From a3f357e8a60443b74b64c7479113c68eb35ce1f5 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期五, 15 七月 2022 19:44:57 +0800 Subject: [PATCH] 控制轮询 --- src/components/LeftNav.vue | 497 +++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 359 insertions(+), 138 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index 711a98d..0ba92c5 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -2,17 +2,26 @@ <transition name="slideLeft"> <div class="left-tree-box" - :style="`height:${height}px;animation-duration: 0.7s`" v-show="TreeDataPool.showTreeBox" + v-loading="menuLoading" > - <el-tabs v-model="TreeDataPool.treeActiveName" type="border-card" @tab-click="handleClick"> - <el-tab-pane label="鎽勫儚鏈�" name="camera" :style="`height:${height - 56}px;`" v-if="showCam"> + <el-tabs + v-model="TreeDataPool.treeActiveName" + type="border-card" + @tab-click="handleClick" + > + <el-tab-pane + label="鎽勫儚鏈�" + name="camera" + :style="`height:${height - 56}px;`" + v-if="showCam" + > <el-menu :default-openeds="openeds" background-color="#fff" text-color="#303133" active-text-color="#409EFF" - style="height: 100%;" + style="height: 100%" class="el-menu-vertical-demo" unique-opened @open="menuOpen" @@ -31,7 +40,7 @@ :value="item.value" ></el-option> </el-select> - <span style="display: inline-block;padding: 0px 3px;"></span> + <span style="display: inline-block; padding: 0px 3px"></span> <el-input v-model="TreeDataPool.searchInput" placeholder="鎼滅储" @@ -40,7 +49,7 @@ > <i class="el-icon-search el-input__icon" - style="color:#DCDFE6" + style="color: #dcdfe6" slot="prefix" @click="searchAreaData" ></i> @@ -53,12 +62,15 @@ @click="closeTree" ></i> </el-tooltip> - </div> --> + </div>--> </li> - <!-- 娣诲姞鍖哄煙鍥炬爣 --> <div class="tree-edit area-add" v-show="!TreeDataPool.readonly"> - <el-tooltip content="娣诲姞鍖哄煙" placement="bottom" popper-class="atooltip"> + <el-tooltip + content="娣诲姞鍖哄煙" + placement="bottom" + popper-class="atooltip" + > <button @click="addNode($event)"> <i class="iconfont iconhebingxingzhuang"></i> </button> @@ -67,10 +79,34 @@ <!-- 娣诲姞璁惧鍥炬爣 --> <div class="tree-edit camera-add" v-show="!TreeDataPool.readonly"> - <el-tooltip content="娣诲姞璁惧" placement="bottom" popper-class="atooltip"> + <el-tooltip + content="娣诲姞璁惧" + placement="bottom" + popper-class="atooltip" + > <button @click="addCamera('0')"> <!-- <i class="el-icon-video-camera"></i> --> - <span class="iconfont iconshishishipin" style="font-size:14px;"></span> + <span + class="iconfont iconshishishipin" + style="font-size: 14px" + ></span> + </button> + </el-tooltip> + </div> + + <!-- 瀵煎叆璁惧 --> + <div class="tree-edit import-btn" v-show="!TreeDataPool.readonly"> + <el-tooltip + content="瀵煎叆璁惧" + placement="bottom" + popper-class="atooltip" + > + <button @click="importCameras('0')"> + <!-- <i class="el-icon-video-camera"></i> --> + <span + class="iconfont icondaoru" + style="font-size: 16px" + ></span> </button> </el-tooltip> </div> @@ -89,7 +125,7 @@ <!-- <i class="iconfont iconjiankongshexiangji"></i> --> <span class="iconfont iconjiankongshexiangji" - style="padding-right:10px;font-size:13px;" + style="padding-right: 10px; font-size: 13px" ></span> <b class="tree-font">鎽勫儚鏈�</b> </template> @@ -101,27 +137,33 @@ :node="TreeDataPool.treeData" :height="height" @addDevice="addCamera" + @import="importCameras" /> </el-menu-item-group> </el-submenu> <el-submenu index="1"> <template slot="title"> - <i class="iconfont iconGBx"></i> + <i class="iconfont iconGBx" style="margin-left: -4px"></i> <b class="tree-font">GB28181</b> </template> <!-- 鍥芥爣鍒锋柊鍥炬爣 --> - <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly"> + <!-- <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly"> <el-tooltip content="鍒锋柊" placement="top" popper-class="atooltip"> <button @click="refreshGB"> - <i class="el-icon-refresh" style="font-size:16px"></i> + <i v-if="loadingGBTree" class="el-icon-loading" style="font-size:16px"></i> + <i v-else class="el-icon-refresh" style="font-size:16px"></i> </button> </el-tooltip> - </div> + </div>--> <div class="tree-edit gb-lock" v-show="showLock"> <button @click="gbLockSwitch"> - <i v-if="TreeDataPool.gbReadonly" class="el-icon-lock" style="font-size:16px"></i> - <i v-else class="el-icon-unlock" style="font-size:16px"></i> + <i + v-if="TreeDataPool.gbReadonly" + class="el-icon-lock" + style="font-size: 16px" + ></i> + <i v-else class="el-icon-unlock" style="font-size: 16px"></i> </button> </div> <el-menu-item-group class="item-group"> @@ -140,20 +182,73 @@ </el-menu> </el-tab-pane> <el-tab-pane - label="鏁版嵁鏍�" - name="dataStack" + label="闆嗙兢" + name="cluster" :style="`height:${height - 56}px;`" - v-if="showDataStack" + v-if="showCluster" > <div class="local-vedio-area"> <!-- 鎼滅储 --> + <div class="navTopSelect"> + <div class="search-input flex-box"> + <el-select + v-model="TreeDataPool.searchCamType" + placeholder="璇烽�夋嫨" + @change="searchClusterData" + > + <el-option + v-for="item in searchTypeOptions" + :key="item.value" + :label="item.label" + :value="item.value" + ></el-option> + </el-select> + <span style="display: inline-block; padding: 0px 3px"></span> + <el-input + v-model="TreeDataPool.searchInput" + placeholder="鎼滅储" + clearable + @input="querySearchAsync('cluster')" + > + <i + class="el-icon-search el-input__icon" + style="color: #dcdfe6" + slot="prefix" + @click="searchClusterData" + ></i> + </el-input> + </div> + </div> + <div class="top-menu" style="margin: 0 0 10px; text-align: left"> + <span class="iconfont iconjiqun" style="font-size: 20px"></span> + <span + style="font-size: 14px; margin-left: 5px; font-weight: 600" + >{{ clusterName }}</span + > + </div> + <div class="cluster-list"> + <tree-menu + ref="tree" + :app="appName" + :treeName="'localTree'" + :node="TreeDataPool.clusterData" + :height="height" + @addDevice="addCamera" + @import="importCameras" + /> + </div> + </div> + </el-tab-pane> + <el-tab-pane label="鏁版嵁鏍�" name="dataStack" v-if="showDataStack"> + <div class="local-vedio-area"> + <!-- 鎼滅储 --> <div class="search-input"> - <span style="display: inline-block;padding: 0px 3px;"></span> + <!-- <span style="display: inline-block;padding: 0px 3px;"></span> --> <el-select v-model="DataStackPool.searchType" placeholder="璇烽�夋嫨" size="small" - style="width: 134px;height: 34px;margin-left: 10px;" + style="width: 134px; height: 34px; margin-left: 10px" @change="searchDataStack" > <el-option @@ -163,18 +258,18 @@ :value="item.value" ></el-option> </el-select> - <span style="display: inline-block;padding: 0px 3px;"></span> + <span style="display: inline-block; padding: 0px 3px"></span> <el-input v-model="DataStackPool.searchInput" placeholder="璇疯緭鍏�" size="small" clearable @input="querySearchAsync('dir')" - :style="'width:103px;'" + :style="'width:148px;'" > <i class="el-icon-search el-input__icon" - style="color:black" + style="color: black" slot="prefix" @click="searchDataStack" ></i> @@ -186,14 +281,18 @@ style="color: #3D68E1;line-height: 22px;font-size: 27px;" @click="closeTree" ></i> - </div> --> + </div>--> </div> <!-- 鏈湴瑙嗛婧愬垪琛� --> <div class="dev-vedio-list"> <!-- 娣诲姞鏂囦欢澶瑰浘鏍� --> <div class="tree-edit area-add" v-show="!DataStackPool.readonly"> - <el-tooltip content="娣诲姞鏂囦欢澶�" placement="bottom" popper-class="atooltip"> + <el-tooltip + content="娣诲姞鏂囦欢澶�" + placement="bottom" + popper-class="atooltip" + > <button @click="addDir($event)"> <i class="iconfont iconhebingxingzhuang"></i> </button> @@ -207,12 +306,28 @@ <i v-else class="el-icon-unlock"></i> </button> </div> - <LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList> + <LocalVedioList + :dataList="TreeDataPool.localVedioList" + ></LocalVedioList> </div> </div> - <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" /> + <file-upload v-show="fileUploadBox" @close="fileUploadBox = false" /> </el-tab-pane> </el-tabs> + + <!-- 瀵煎叆璁惧缁勪欢 浜嬩欢瑙﹀彂 --> + <el-upload + class="upload-btn" + action="https://jsonplaceholder.typicode.com/posts/" + accept=".xlsx" + :on-exceed="exceed" + :limit="10" + :on-remove="remove" + :http-request="uploadFile" + :show-file-list="false" + > + <button ref="import-btn" v-show="false"></button> + </el-upload> </div> </transition> </template> @@ -222,32 +337,38 @@ show, changeEnable, deleteLocalFile, - updateStatus + updateStatus, } from "@/api/localVedio"; -import TreeMenu from "@/components/treeMenu/index"; -import LocalVedioList from '@/components/subComponents/LocalVedioList'; -import FileUpload from '@/components/subComponents/FileUpload/index'; +import { createCamera } from "@/api/camera"; + +import bus from "@/plugin/bus"; +// import TreeMenu from "@/components/treeMenu/index"; +import TreeMenu from "@/components/giantTree/index"; +import LocalVedioList from "@/components/subComponents/LocalVedioList"; +import FileUpload from "@/components/subComponents/FileUpload/index"; +import XLSX from "xlsx"; +import { findCluster } from "@/api/clusterManage"; export default { components: { TreeMenu, LocalVedioList, - FileUpload + FileUpload, }, props: { appName: { type: String, - default: "Video" + default: "Video", }, edit: { type: Boolean, - default: false + default: false, }, height: { type: Number, - default: 0 - } + default: 0, + }, }, computed: { @@ -255,10 +376,36 @@ return true; }, showCam() { - return this.appName === "Camera" || this.appName === "Search"; + return ( + this.appName === "Camera" || + this.appName === "Cluster" || + (this.appName === "Search" && + (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)) + ); }, + showCluster() { + return this.appName === "Cluster"; + }, + // 鏁版嵁鏍堥厤缃繀椤绘樉绀恒�� 妫�绱㈤�氳繃鏉冮檺鎺у埗鏄剧ず, 鏈畨瑁呮暟鎹爤涔熶笉鏄剧ず showDataStack() { - return this.appName === "DataStack" || this.appName === "Search"; + if (this.appName === "DataStack") { + return true; + } + + if (this.appName === "Search") { + // 鏈畨瑁呮暟鎹爤閰嶇疆 + if (this.installedApps.indexOf("dataStack") >= 0) { + if (this.isAdmin) { + return true; + } + + if (this.buttonAuthority.indexOf("search:stack") >= 0) { + return true; + } + } + } + + return false; }, showLock() { return this.edit; @@ -283,87 +430,58 @@ return loginName === "superadmin" || loginName === "basic"; } return false; - } + }, }, data() { return { - cameraAuth: "videoMonitor:camera", dataStack: "videoMonitor:dataStack", - activeIndexVideo: "", buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], - loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", + installedApps: sessionStorage.getItem("apps") || [], + loginName: + JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", searchTypeOptions: [ { value: 0, - label: "鍏ㄩ儴鎽勫儚鏈�" + label: "鍏ㄩ儴鎽勫儚鏈�", }, { value: 1, - label: "鍒嗘瀽鎽勫儚鏈�" + label: "鍒嗘瀽鎽勫儚鏈�", }, { value: 2, - label: "鐩戞帶鎽勫儚鏈�" + label: "鐩戞帶鎽勫儚鏈�", }, { value: 3, - label: "鑱斿姩鎽勫儚鏈�" - } - ], - searchTypeLocalVideo: [ - { - value: 0, - label: "鍏ㄩ儴" + label: "鑱斿姩鎽勫儚鏈�", }, - { - value: 1, - label: "澶勭悊瀹屾垚" - }, - { - value: 2, - label: "澶勭悊涓�" - }, - { - value: 3, - label: "鏈厤瑙勫垯" - }, - { - value: 4, - label: "鏈紑鍚�" - } ], timeout: null, fileUploadBox: false, - loadingGBTree: false + loadingGBTree: false, + importAreaId: "", + menuLoading: false, + clusterName: "", }; }, - // watch: { - // $route(to, from) { - // switch (to.name) { - // case "Searching": - // this.cameraAuth = "videoSearch:camera" - // this.dataStack = "videoSearch:dataStack" - // break - // case "VideoManage": - // this.cameraAuth = "VIDEOCAMERA:camera" - // this.dataStack = "VIDEOCAMERA:dataStack" - // break - // default: - // this.cameraAuth = "videoMonitor:camera" - // this.dataStack = "videoMonitor:dataStack" - // } - // // console.log("璺敱鍙樺寲锛�", to, from) - // } - // }, created() { + console.log("---------"); if (this.showCam) { - this.TreeDataPool.treeActiveName = "camera" + this.TreeDataPool.treeActiveName = "camera"; this.TreeDataPool.fetchTreeData(); - } else { - this.TreeDataPool.treeActiveName = "dataStack" + this.TreeDataPool.treeActiveName = "dataStack"; this.DataStackPool.fetchFiles(); - + } + if (this.showCluster) { + this.TreeDataPool.treeActiveName = "cluster"; + this.TreeDataPool.fetchClusterTree(); + findCluster().then((res) => { + if (res.success) { + this.clusterName = res.data.clusterName; + } + }); } }, methods: { @@ -373,9 +491,11 @@ searchDataStack() { this.DataStackPool.fetchFiles(); }, + searchClusterData() { + this.TreeDataPool.fetchClusterTree(); + }, lockSwitch() { this.TreeDataPool.readonly = !this.TreeDataPool.readonly; - console.log(this.TreeDataPool.readonly) }, gbLockSwitch() { this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly; @@ -385,16 +505,16 @@ }, closeTree() { this.TreeDataPool.showTreeBox = false; - // bus.$emit('refreshCompareImg') + bus.$emit("refreshCompareImg"); }, addNode(event) { this.$refs.tree.addNode(event, { id: 0 }); }, addCamera(node) { - // bus.$emit("addCameraOnTree", node); + bus.$emit("addCameraOnTree", node); }, addDir(node) { - // bus.$emit("addDirOnTree", node); + bus.$emit("addDirOnTree", node); }, menuOpen(index) { this.TreeDataPool.openeds[index] = true; @@ -422,48 +542,51 @@ if (type === "camera") { this.TreeDataPool.fetchTreeData(); } + if (type === "cluster") { + this.TreeDataPool.fetchClusterTree(); + } if (type === "dir") { this.DataStackPool.fetchFiles(); } }, 500); }, handleClick(event) { - if (event.name == 'dataStack') { + if (event.name == "dataStack") { this.DataStackPool.fetchFiles(); this.DataStackPool.clean(); this.TreeDataPool.clean(); } - this.TreeDataPool.treeActiveName = event.name - console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName) + this.TreeDataPool.treeActiveName = event.name; + console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName); }, async changeEnable() { if (this.PollData.localVideo === 0) { this.$notify({ title: "澶辫触", type: "warning", - message: "寮�鍚湰鍦版暟鎹棰戝垎鏋愬鐞嗭紝闇�鍏堜负鏈湴鏁版嵁鎵嬪姩璁剧疆绠楀姏璧勬簮锛�" - }) + message: "寮�鍚湰鍦版暟鎹棰戝垎鏋愬鐞嗭紝闇�鍏堜负鏈湴鏁版嵁鎵嬪姩璁剧疆绠楀姏璧勬簮锛�", + }); return false; } let res = await changeEnable({ - enable: this.TreeDataPool.vedioAnaliyseSwitch - }) + enable: this.TreeDataPool.vedioAnaliyseSwitch, + }); if (res && res.success) { - console.log(res, '鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�') + console.log(res, "鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�"); } }, getCheckedFiles() { - let list1 = this.TreeDataPool.localVedioList.filter(i => { - return i.checkStatus - }) - return list1 + let list1 = this.TreeDataPool.localVedioList.filter((i) => { + return i.checkStatus; + }); + return list1; }, async stopVedio(status) { // let list1 = this.getCheckedFiles(); if (this.TreeDataPool.checkedLocalVedio.length == 0) { this.$notify({ type: "warning", - message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�" + message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�", }); // this.$notify({ // type:"info", @@ -472,41 +595,133 @@ return false; } let res = await updateStatus({ - ids: this.TreeDataPool.checkedLocalVedio.map(i => { - return i.id + ids: this.TreeDataPool.checkedLocalVedio.map((i) => { + return i.id; }), - status: status - }) + status: status, + }); if (res && res.success) { - console.log(res, '寮�鍚殏鍋滃弬鏁�') + console.log(res, "寮�鍚殏鍋滃弬鏁�"); } }, async deleteLocalFiles() { let list1 = this.getCheckedFiles(); - console.log(list1, '宸插嬀閫夌殑瑙嗛') + console.log(list1, "宸插嬀閫夌殑瑙嗛"); if (list1.length == 0) { - return false + return false; } let res = await deleteLocalFile({ - ids: list1.map(i => { return i.id }) - }) + ids: list1.map((i) => { + return i.id; + }), + }); if (res && res.success) { this.$notify({ - type: 'success', - message: '鍒犻櫎鎴愬姛锛侊紒' - }) + type: "success", + message: "鍒犻櫎鎴愬姛锛侊紒", + }); } else { this.$notify({ type: "error", - message: "鍒犻櫎澶辫触锛�" - }) + message: "鍒犻櫎澶辫触锛�", + }); } }, refrash(current, pageSize) { this.TreeDataPool.localCurrentPage = current; }, - } + + importCameras(area) { + this.importAreaId = area; + this.$refs["import-btn"].click(); + }, + + async uploadFile(params) { + const _file = params.file; + const fileReader = new FileReader(); + fileReader.onload = (ev) => { + this.menuLoading = true; + try { + const data = ev.target.result; + const workbook = XLSX.read(data, { + type: "binary", + }); + + for (let sheet in workbook.Sheets) { + //寰幆璇诲彇姣忎釜鏂囦欢 + const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); + //鑻ュ綋鍓峴heet娌℃湁鏁版嵁锛屽垯continue + if (sheetArray.length == 0) { + continue; + } + + let succeed = 0; + let failed = 0; + let promiseArr = []; + for (let item in sheetArray) { + let camera = this.newCamera(); + camera.areaid = this.importAreaId; + camera.name = String(sheetArray[item].name); + camera.rtsp = String(sheetArray[item].rtsp); + camera.addr = String(sheetArray[item].addr); + + promiseArr.push(createCamera(camera)); + } + let _this = this; + Promise.allSettled(promiseArr) + .then((res) => { + res.forEach((item) => { + if (item.status === "fulfilled") { + succeed++; + } else { + failed++; + } + }); + _this.menuLoading = false; + _this.$message({ + type: "success", + message: + "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + + succeed + + "涓� 澶辫触:" + + failed + + "涓�", + }); + _this.TreeDataPool.fetchTreeData(); + }) + .catch((e) => { + console.log(e); + }); + } + } catch (e) { + this.menuLoading = false; + this.$message.warning("鏂囦欢绫诲瀷涓嶆纭紒"); + } + }; + fileReader.readAsBinaryString(_file); + }, + exceed() { + this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢"); + }, + //鍒犻櫎鏂囦欢 + remove() {}, + newCamera() { + return { + latitude: 0, + rtsp: "", + longitude: 0, + name: "", + addr: "", + areaid: "", + reserved: "", + run_type: -1, + username: "", + password: "", + sensors: [], + }; + }, + }, }; </script> @@ -514,15 +729,17 @@ .left-tree-box { float: left; width: 100%; - .el-tabs__nav-prev,.el-tabs__nav-next{ + .el-tabs__nav-prev, + .el-tabs__nav-next { display: none; } .el-tabs--border-card { border: none; box-shadow: none; .el-tabs__header { + display: none; border-bottom: none; - margin: 0 0 15px; + //margin: 0 0 15px; } .el-tabs__content { padding: 0; @@ -649,6 +866,7 @@ .search-input { padding-top: 8px; padding-bottom: 12px; + text-align: left; .dev-tree-close { width: 10%; margin-left: 10px; @@ -669,15 +887,11 @@ } .dev-vedio-list { padding: 0 15px; - max-height: 740px; - overflow-x: hidden; - overflow-y: auto; - @media screen and (max-height: 720px) { - max-height: 580px; - } - @media screen and (min-height: 900px) { - max-height: 740px; - } + box-sizing: border-box; + // height: calc(100vh - 80px); + //max-height: 740px; + // overflow-x: hidden; + overflow: auto; } .dev-vedio-list::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮�*/ @@ -697,7 +911,7 @@ } .tree-edit { - z-index: 1; + z-index: 2; font-size: 16px; position: absolute; top: 56px; @@ -734,6 +948,10 @@ .camera-add { left: 128px; } + +.import-btn { + left: 156px; +} .tree-font { font-family: PingFangSC-Medium; font-size: 14px; @@ -760,4 +978,7 @@ color: #606266; } } +.flex-box { + display: flex; +} </style> \ No newline at end of file -- Gitblit v1.8.0