From ece5b7b7d24f85a3253cf722291e69ca7a406192 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 16 八月 2022 13:05:18 +0800
Subject: [PATCH] 完善大屏
---
src/views/hashrate/CameraManage/index.vue | 280 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 187 insertions(+), 93 deletions(-)
diff --git a/src/views/hashrate/CameraManage/index.vue b/src/views/hashrate/CameraManage/index.vue
index 8d6b11b..8f55d57 100644
--- a/src/views/hashrate/CameraManage/index.vue
+++ b/src/views/hashrate/CameraManage/index.vue
@@ -2,187 +2,264 @@
<div class="CameraManage">
<div class="cluster">
<div class="title">闆嗙兢閫夋嫨</div>
- <el-select v-model="cluster" placeholder="璇烽�夋嫨">
- <el-option
- v-for="item in clusterArr"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
+ <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-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
- 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 CameraLeft from "@/components/CameraLeft"
+import CameraInfo from "./CameraInfo"
+import CameraRules from "./CameraRules"
+import VideoRuleData from "@/Pool/VideoRuleData"
-import bus from "@/plugin/bus";
+import { getClusterDevList } from "@/api/clusterManage"
+
+import bus from "@/plugin/bus"
export default {
components: {
CameraLeft,
CameraInfo,
- CameraRules,
+ CameraRules
},
data() {
return {
activeTab: "淇℃伅缁存姢",
- clusterArr: [
- {
- value: 0,
- label: "闆嗙兢涓�",
- },
- {
- value: 1,
- label: "闆嗙兢浜�",
- },
- ],
+ clusterArr: [],
cluster: "",
+ clusterData: [],
intervalTimer: null,
leftWith: 0,
- screenHeight: 0,
- };
+ screenHeight: 0
+ }
},
destroyed() {
- this.TreeDataPool.readonly = true;
+ this.TreeDataPool.readonly = true
},
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);
+ 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)
+ }
}
},
"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,
+ 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.PollData.statistics();
- 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.VideoManageData.init();
+ this.TreeDataPool.multiple = false
+ this.TreeDataPool.selectedNode = ""
+ this.selectedNodes = []
},
beforeDestroy() {
- 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();
- });
-
- let _this = this;
- _this.PollData.statisticTaskInfo();
- this.intervalTimer = setInterval(() => {
- _this.PollData.statisticTaskInfo();
- }, 10000);
+ 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 //瀛樺偍榛樿鐨刣iv鐨勫搴︺��
+ 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;
+ 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.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()
+ 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>
<style lang="scss" scoped>
@@ -235,9 +312,26 @@
margin-bottom: 60px;
display: flex;
align-items: stretch;
- .CameraLeft {
+ .column-left {
+ position: relative;
margin-right: 24px;
- width: 292px;
+ height: 160vh;
+ overflow: auto;
+ 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 {
@@ -267,4 +361,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0