ZZJ
2022-08-02 f137bb34c3e9a7e2742cd8b88e004c7a958ff3b6
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
@@ -79,28 +82,43 @@
  watch: {
    "TreeDataPool.activeNode": function (node) {
      console.log("cclickaaa");
      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 == "场景配置") {
          console.log(this.TreeDataPool.multiple);
          //  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);
        }
      },
@@ -133,6 +151,8 @@
    this.selectedNodes = [];
  },
  beforeDestroy() {
    sessionStorage.removeItem("devId");
    sessionStorage.removeItem("clusterId");
    clearInterval(this.intervalTimer);
    //this.TreeDataPool.treeActiveName = "camera";
  },
@@ -148,6 +168,31 @@
    });
  },
  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(() => {
@@ -175,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);
        }
@@ -184,6 +230,22 @@
      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,
@@ -278,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 {