修复树滚动条样式,和图片URL

zhangzengfei

2022-08-04 8f5d6bac4776973c73626c9f34fa68ba1ac83d6e

 src/views/hashrate/CameraManage/index.vue

@@ -3,13 +3,7 @@
    <div class="cluster">
      <div class="title">集群选择</div>
      <el-select v-model="cluster" placeholder="请选择" @change="selectCluster">
        <el-option
          v-for="item in clusterArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
        <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="content">
@@ -19,49 +13,35 @@
      </div>
      <div class="right">
        <div class="tabs">
          <div
            class="tab"
            :class="{ active: activeTab === '信息维护' }"
            @click="handleClick('信息维护')"
          >
          <div class="tab" :class="{ active: activeTab === '信息维护' }" @click="handleClick('信息维护')">
            信息维护
          </div>
          <div
            class="tab"
            :class="{ active: activeTab === '场景配置' }"
            @click="handleClick('场景配置')"
          >
          <div class="tab" :class="{ active: activeTab === '场景配置' }" @click="handleClick('场景配置')">
            场景配置
          </div>
        </div>

        <CameraInfo
          ref="cameraInfo"
          v-show="activeTab === '信息维护'"
        ></CameraInfo>
        <CameraRules
          v-show="activeTab === '场景配置'"
          ref="sepRule"
        ></CameraRules>
        <CameraInfo ref="cameraInfo" v-show="activeTab === '信息维护'"></CameraInfo>
        <CameraRules v-show="activeTab === '场景配置'" ref="sepRule"></CameraRules>
      </div>
    </div>
  </div>
</template>

<script>
import CameraLeft from "@/components/CameraLeft";
import CameraInfo from "./CameraInfo";
import CameraRules from "./CameraRules";
import VideoRuleData from "@/Pool/VideoRuleData";
import CameraLeft from "@/components/CameraLeft"
import CameraInfo from "./CameraInfo"
import CameraRules from "./CameraRules"
import VideoRuleData from "@/Pool/VideoRuleData"

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

import bus from "@/plugin/bus";
import bus from "@/plugin/bus"
export default {
  components: {
    CameraLeft,
    CameraInfo,
    CameraRules,
    CameraRules
  },

  data() {
@@ -72,25 +52,25 @@
      clusterData: [],
      intervalTimer: null,
      leftWith: 0,
      screenHeight: 0,
    };
      screenHeight: 0
    }
  },

  destroyed() {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.readonly = true
  },

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

          nodes.forEach((id) => {
            let newCamera = new VideoRuleData(id);
            CameraArr.push(newCamera);
            CameraIds.push(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;
          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);
            this.$refs.sepRule.showRules(CameraIds)
          }

          console.log(CameraArr);
          console.log(CameraArr)
        }
      },
      deep: true,
      deep: true
    },
    "DataStackPool.selectedDir": {
      handler(node, oldNode) {
        if (this.TreeDataPool.treeActiveName !== "dataStack") {
          return;
          return
        }
        this.$nextTick(() => {
          if (this.activeTab == "信息维护") {
            //   this.$refs.dataStackInfo.selectDir(node);
          } else if (this.activeTab == "场景配置" && node.length !== 0) {
            this.$refs.sepRule.initCameraData(node.id);
            this.$refs.sepRule.initCameraData(node.id)
          }
        });
        })
      },
      deep: true,
    },
      deep: true
    }
  },
  created() {
    this.getCluster();
    this.TreeDataPool.readonly = false;
    this.getCluster()
    this.TreeDataPool.readonly = false

    //  this.TreeDataPool.readonly = true;
    //this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = false;
    this.TreeDataPool.selectedNode = "";
    this.selectedNodes = [];
    this.TreeDataPool.multiple = false
    this.TreeDataPool.selectedNode = ""
    this.selectedNodes = []
  },
  beforeDestroy() {
    sessionStorage.removeItem("devId");
    sessionStorage.removeItem("clusterId");
    clearInterval(this.intervalTimer);
    sessionStorage.removeItem("devId")
    sessionStorage.removeItem("clusterId")
    clearInterval(this.intervalTimer)
    //this.TreeDataPool.treeActiveName = "camera";
  },
  mounted() {
    this.$nextTick(() => {
      bus.$on("addCameraOnTree", (node) => {
        this.handAddDevice(node);
      });
        this.handAddDevice(node)
      })
      bus.$on("addDirOnTree", (node) => {
        this.handAddDIr(node);
      });
      this.TreeDataPool.clean();
    });
        this.handAddDIr(node)
      })
      this.TreeDataPool.clean()
    })
  },
  methods: {
    TextWidthChange(e) {
      console.log(1212);
      let odivParent = e.currentTarget.parentNode; //获取目标父元素
      let dx = e.clientX; //当你第一次单击的时候，存储x轴的坐标。
      let dw = odivParent.offsetWidth; //存储默认的div的宽度。
      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";
        odivParent.style.width = dw + (e.clientX - dx) + "px"

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

        if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) {
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px";
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px"
        }
      };
      }
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      e.stopPropagation();
      e.preventDefault();
      return false;
        document.onmousemove = null
        document.onmouseup = null
      }
      e.stopPropagation()
      e.preventDefault()
      return false
    },
    handAddDevice(node) {
      let _this = this;
      let _this = this
      setTimeout(() => {
        _this.$refs.cameraInfo.addDevice(node);
        _this.activeTab = "信息维护";
      }, 100);
        _this.$refs.cameraInfo.addDevice(node)
        _this.activeTab = "信息维护"
      }, 100)
    },
    handAddDIr(node) {
      let _this = this;
      let _this = this
      setTimeout(() => {
        _this.$refs.dataStackInfo.addDir(node);
        _this.activeTab = "信息维护";
      }, 100);
        _this.$refs.dataStackInfo.addDir(node)
        _this.activeTab = "信息维护"
      }, 100)
    },
    handleClick(tab) {
      //这个控制是否多选
      //    this.TreeDataPool.multiple = tab.name === "场景配置";
      this.activeTab = tab;
      this.activeTab = tab
      if (tab === "信息维护") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
          this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode)
        } else if (this.TreeDataPool.treeActiveName == "dataStack") {
          this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
          this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir)
        }
      } else if (tab === "场景配置") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
          this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id);
          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);
          this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id)
        }
      }
    },
    async getCluster() {
      const res = await getClusterDevList();
      const res = await getClusterDevList()
      if (res && res.success) {
        this.clusterData = res.data.clusterList;
        this.clusterData = res.data.clusterList
        if (res.data.clusterList <= 0 && res.data.devList <= 0) {
          this.$confirm(
            "系统检测到您还未添加设备, 请在设备管理页面维护",
            "提示",
            {
              confirmButtonText: "跳转",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
          this.$confirm("系统检测到您还未添加设备, 请在设备管理页面维护", "提示", {
            confirmButtonText: "跳转",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$router.push("/manageCenter");
              this.$router.push("/manageCenter")
            })
            .catch(() => {});
            .catch(() => {})
        }

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

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

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

<style lang="scss" scoped>
@@ -343,7 +315,8 @@
    .column-left {
      position: relative;
      margin-right: 24px;
      width: 292px;
      height: 233vh;
      overflow: auto;
      background-color: #fff;
    }

@@ -388,4 +361,4 @@
    }
  }
}
</style>
</style>