摄像机树样式,导出数据样式

ZZJ

2022-08-02 ed35d0b4c2051e067bd9904c4b0158257d5db0d9

 src/views/hashrate/CameraManage/index.vue

@@ -13,7 +13,10 @@
      </el-select>
    </div>
    <div class="content">
      <CameraLeft :appName="'Camera'" ref="left"></CameraLeft>
      <div class="column-left" ref="left">
        <div class="resize-line" @mousedown="TextWidthChange"></div>
        <CameraLeft :appName="'Camera'" ref="left"></CameraLeft>
      </div>
      <div class="right">
        <div class="tabs">
          <div
@@ -66,6 +69,7 @@
      activeTab: "信息维护",
      clusterArr: [],
      cluster: "",
      clusterData: [],
      intervalTimer: null,
      leftWith: 0,
      screenHeight: 0,
@@ -77,31 +81,45 @@
  },

  watch: {
    "TreeDataPool.selectedNode": function (node) {
      if (this.TreeDataPool.multiple) {
        return;
      }

    "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(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,
@@ -124,7 +142,6 @@
  },
  created() {
    this.getCluster();
    this.PollData.statistics();
    this.TreeDataPool.readonly = false;

    //  this.TreeDataPool.readonly = true;
@@ -132,9 +149,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";
  },
@@ -148,14 +166,33 @@
      });
      this.TreeDataPool.clean();
    });

    let _this = this;
    _this.PollData.statisticTaskInfo();
    this.intervalTimer = setInterval(() => {
      _this.PollData.statisticTaskInfo();
    }, 10000);
  },
  methods: {
    TextWidthChange(e) {
      console.log(1212);
      let odivParent = e.currentTarget.parentNode; //获取目标父元素
      let dx = e.clientX; //当你第一次单击的时候，存储x轴的坐标。
      let dw = odivParent.offsetWidth; //存储默认的div的宽度。
      document.onmousemove = (e) => {
        odivParent.style.width = dw + (e.clientX - dx) + "px";

        if (odivParent.offsetWidth <= 100) {
          //当盒子缩小到一定范围内的时候，让他保持一个固定值，不再继续改变
          odivParent.style.width = "100px";
        }

        if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) {
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    handAddDevice(node) {
      let _this = this;
      setTimeout(() => {
@@ -183,6 +220,7 @@
      } 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);
        }
@@ -190,8 +228,24 @@
    },
    async getCluster() {
      const res = await getClusterDevList();
      console.log(res);
      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,
@@ -207,20 +261,30 @@
        });

        this.cluster = this.clusterArr[0].value;
        this.selectCluster(this.clusterArr[0].value);
      }
    },
    selectCluster(val) {
      const arr = val.split("$$");
      console.log(arr);
      if (arr[0] == "0") {
        this.TreeDataPool.clusterId = arr[1];
        this.TreeDataPool.devId = "";
        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") {
        this.TreeDataPool.devId = arr[1];
        this.TreeDataPool.clusterId = "";
        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();
    },
  },
};
@@ -276,9 +340,25 @@
    margin-bottom: 60px;
    display: flex;
    align-items: stretch;
    .CameraLeft {
    .column-left {
      position: relative;
      margin-right: 24px;
      width: 292px;
      background-color: #fff;
    }

    .resize-line {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      border-right: 2px solid #efefef;
      border-left: 2px solid #e0e0e0;
      z-index: 1;
      cursor: ew-resize;
    }
    .resize-line:hover {
      border-left: 2px dashed skyblue;
    }

    .right {