设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/hashrate/CameraManage/index.vue

@@ -2,7 +2,7 @@
  <div class="CameraManage">
    <div class="cluster">
      <div class="title">集群选择</div>
      <el-select v-model="cluster" placeholder="请选择">
      <el-select v-model="cluster" placeholder="请选择" @change="selectCluster">
        <el-option
          v-for="item in clusterArr"
          :key="item.value"
@@ -49,6 +49,9 @@
import CameraLeft from "@/components/CameraLeft";
import CameraInfo from "./CameraInfo";
import CameraRules from "./CameraRules";
import VideoRuleData from "@/Pool/VideoRuleData";

import { getClusterDevList } from "@/api/clusterManage";

import bus from "@/plugin/bus";
export default {
@@ -61,17 +64,9 @@
  data() {
    return {
      activeTab: "信息维护",
      clusterArr: [
        {
          value: 0,
          label: "集群一",
        },
        {
          value: 1,
          label: "集群二",
        },
      ],
      clusterArr: [],
      cluster: "",
      clusterData: [],
      intervalTimer: null,
      leftWith: 0,
      screenHeight: 0,
@@ -83,19 +78,45 @@
  },

  watch: {
    "TreeDataPool.selectedNode": function (node) {
    "TreeDataPool.activeNode": function (node) {
      sessionStorage.setItem("cameraDevId", node.devId);
      if (this.activeTab == "信息维护") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.cameraInfo.selectCamera(node);
        }
      } else if (this.activeTab === "场景配置") {
        this.$refs.sepRule.initCameraData(node.id);
        if (!this.TreeDataPool.multiple) {
          this.$refs.sepRule.showRules(node.id);
        }
      }
    },
    "TreeDataPool.selectedNodes": {
      handler(nodes) {
      handler(nodes, oldVal) {
        if (this.activeTab == "场景配置") {
          // this.$refs.sepRule.initCameraData();
          //  this.$refs.sepRule.initCameraData(nodes[nodes.length - 1]);
          let CameraArr = [];
          let CameraIds = [];

          nodes.forEach((id) => {
            let newCamera = new VideoRuleData(id);
            CameraArr.push(newCamera);
            CameraIds.push(id);
          });

          this.$refs.sepRule.Carmeras = CameraArr;
          if (
            nodes.length == 1 &&
            oldVal.length == 1 &&
            nodes[0] == oldVal[0]
          ) {
            return;
          }
          if (this.TreeDataPool.multiple && oldVal[0]) {
            this.$refs.sepRule.showRules(CameraIds);
          }

          console.log(CameraArr);
        }
      },
      deep: true,
@@ -117,7 +138,7 @@
    },
  },
  created() {
    this.PollData.statistics();
    this.getCluster();
    this.TreeDataPool.readonly = false;

    //  this.TreeDataPool.readonly = true;
@@ -125,9 +146,10 @@
    this.TreeDataPool.multiple = false;
    this.TreeDataPool.selectedNode = "";
    this.selectedNodes = [];
    this.VideoManageData.init();
  },
  beforeDestroy() {
    sessionStorage.removeItem("devId");
    sessionStorage.removeItem("clusterId");
    clearInterval(this.intervalTimer);
    //this.TreeDataPool.treeActiveName = "camera";
  },
@@ -141,12 +163,6 @@
      });
      this.TreeDataPool.clean();
    });

    let _this = this;
    _this.PollData.statisticTaskInfo();
    this.intervalTimer = setInterval(() => {
      _this.PollData.statisticTaskInfo();
    }, 10000);
  },
  methods: {
    handAddDevice(node) {
@@ -176,11 +192,72 @@
      } else if (tab === "场景配置") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
          this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id);
        } else if (this.TreeDataPool.treeActiveName == "dataStack") {
          this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
        }
      }
    },
    async getCluster() {
      const res = await getClusterDevList();
      if (res && res.success) {
        this.clusterData = res.data.clusterList;
        if (res.data.clusterList <= 0 && res.data.devList <= 0) {
          this.$confirm(
            "系统检测到您还未添加设备, 请在设备管理页面维护",
            "提示",
            {
              confirmButtonText: "跳转",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$router.push("/manageCenter");
            })
            .catch(() => {});
        }

        res.data.clusterList.forEach((item) => {
          this.clusterArr.push({
            label: item.cluster_name,
            value: "0$$" + item.cluster_id,
          });
        });

        res.data.devList.forEach((item) => {
          this.clusterArr.push({
            label: item.devName,
            value: "1$$" + item.devId,
          });
        });

        this.cluster = this.clusterArr[0].value;
        this.selectCluster(this.clusterArr[0].value);
      }
    },
    selectCluster(val) {
      const arr = val.split("$$");
      if (arr[0] == "0") {
        sessionStorage.setItem("clusterId", arr[1]);
        sessionStorage.setItem("devId", "");
        console.log(this.clusterData);
        this.clusterData.forEach((item) => {
          if (arr[1] == item.cluster_id) {
            sessionStorage.setItem("nodeId", item.nodeList[0].devId);
          }
        });
      }
      if (arr[0] == "1") {
        sessionStorage.setItem("clusterId", "");
        sessionStorage.setItem("devId", arr[1]);
        sessionStorage.setItem("nodeId", arr[1]);
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
      this.VideoManageData.init();
      this.PollData.statistics();
    },
  },
};
</script>