| | |
| | | </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 |
| | |
| | | |
| | | 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); |
| | | } |
| | | }, |
| | |
| | | this.selectedNodes = []; |
| | | }, |
| | | beforeDestroy() { |
| | | sessionStorage.removeItem("devId"); |
| | | sessionStorage.removeItem("clusterId"); |
| | | clearInterval(this.intervalTimer); |
| | | //this.TreeDataPool.treeActiveName = "camera"; |
| | | }, |
| | |
| | | }); |
| | | }, |
| | | 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(() => { |
| | |
| | | } 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); |
| | | } |
| | |
| | | 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, |
| | |
| | | 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 { |