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 | 277 +++++++++++++++++++++++++++++--------------------------
1 files changed, 147 insertions(+), 130 deletions(-)
diff --git a/src/views/hashrate/CameraManage/index.vue b/src/views/hashrate/CameraManage/index.vue
index b738df9..8f55d57 100644
--- a/src/views/hashrate/CameraManage/index.vue
+++ b/src/views/hashrate/CameraManage/index.vue
@@ -3,62 +3,45 @@
<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">
- <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 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() {
@@ -69,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)
}
}
},
@@ -95,171 +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 //瀛樺偍榛樿鐨刣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.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>
@@ -312,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 {
@@ -344,4 +361,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0