From 3e4904fda5c78cfd8b40fa925fd2970b01850224 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 19 八月 2022 22:21:30 +0800 Subject: [PATCH] 添加摄像机权限 --- src/components/CameraLeft.vue | 447 +++++++++++++++++++++---------------------------------- 1 files changed, 174 insertions(+), 273 deletions(-) diff --git a/src/components/CameraLeft.vue b/src/components/CameraLeft.vue index 76f3cbb..d601e66 100644 --- a/src/components/CameraLeft.vue +++ b/src/components/CameraLeft.vue @@ -2,22 +2,9 @@ <transition name="slideLeft"> <div class="CameraLeft"> <div class="tree"> - <div - class="left-tree-box" - 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" - > + <div class="left-tree-box" 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-menu :default-openeds="openeds" background-color="#fff" @@ -30,11 +17,7 @@ @close="menuClose" > <li class="navTopSelect"> - <el-select - v-model="TreeDataPool.searchCamType" - placeholder="璇烽�夋嫨" - @change="searchAreaData" - > + <el-select v-model="TreeDataPool.searchCamType" placeholder="璇烽�夋嫨" @change="searchAreaData"> <el-option v-for="item in searchTypeOptions" :key="item.value" @@ -48,11 +31,7 @@ clearable @input="querySearchAsync('camera')" > - <i - class="iconfont searchIcon" - style="color: #dcdfe6" - slot="suffix" - @click="searchAreaData" + <i class="iconfont searchIcon" style="color: #dcdfe6" slot="suffix" @click="searchAreaData" ></i > </el-input> @@ -68,11 +47,7 @@ </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"></i> </button> @@ -80,39 +55,21 @@ </div> <!-- 娣诲姞璁惧鍥炬爣 --> - <div - class="tree-edit camera-add" - v-show="!TreeDataPool.readonly" - > - <el-tooltip - content="娣诲姞璁惧" - placement="bottom" - popper-class="atooltip" - > + <div class="tree-edit camera-add" v-show="!TreeDataPool.readonly"> + <el-tooltip content="娣诲姞璁惧" placement="bottom" popper-class="atooltip"> <button @click="addCamera('0')"> <!-- <i class="el-icon-video-camera"></i> --> - <span class="iconfont" style="font-size: 14px" - ></span - > + <span class="iconfont" 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" - > + <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" style="font-size: 16px" - ></span - > + <span class="iconfont" style="font-size: 16px"></span> </button> </el-tooltip> </div> @@ -129,9 +86,7 @@ <el-submenu index="0"> <template slot="title"> <!-- <i class="iconfont iconjiankongshexiangji"></i> --> - <span class="iconfont closeIcon" v-if="openeds[0] === '0'" - ></span - > + <span class="iconfont closeIcon" v-if="openeds[0] === '0'"></span> <span class="iconfont openIcon" v-else></span> <span class="iconfont cameraIcon"></span> <b class="tree-font">鎽勫儚鏈�</b> @@ -151,9 +106,7 @@ <el-submenu index="1"> <template slot="title"> <!-- <i class="iconfont iconjiankongshexiangji"></i> --> - <span class="iconfont closeIcon" v-if="openeds[0] === '1'" - ></span - > + <span class="iconfont closeIcon" v-if="openeds[0] === '1'"></span> <span class="iconfont openIcon" v-else></span> <span class="iconfont cameraIcon"></span> <b class="tree-font">GB28181</b> @@ -170,16 +123,8 @@ </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"> @@ -198,9 +143,7 @@ <el-submenu index="2"> <template slot="title"> <!-- <i class="iconfont iconjiankongshexiangji"></i> --> - <span class="iconfont closeIcon" v-if="openeds[0] === '2'" - ></span - > + <span class="iconfont closeIcon" v-if="openeds[0] === '2'"></span> <span class="iconfont openIcon" v-else></span> <span class="iconfont cameraIcon"></span> <b class="tree-font">鍥剧墖</b> @@ -208,21 +151,12 @@ </el-submenu> </el-menu> </el-tab-pane> - <el-tab-pane - label="闆嗙兢" - name="cluster" - :style="`height:${height - 56}px;`" - v-if="showCluster" - > + <el-tab-pane label="闆嗙兢" name="cluster" :style="`height:${height - 56}px;`" 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-select v-model="TreeDataPool.searchCamType" placeholder="璇烽�夋嫨" @change="searchClusterData"> <el-option v-for="item in searchTypeOptions" :key="item.value" @@ -230,9 +164,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="鎼滅储" @@ -248,18 +180,9 @@ </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 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 @@ -270,6 +193,7 @@ :height="height" @addDevice="addCamera" @import="importCameras" + style="width:400px" /> </div> </div> @@ -322,15 +246,8 @@ <!-- 鏈湴瑙嗛婧愬垪琛� --> <div class="dev-vedio-list"> <!-- 娣诲姞鏂囦欢澶瑰浘鏍� --> - <div - class="tree-edit area-add" - v-show="!DataStackPool.readonly" - > - <el-tooltip - content="娣诲姞鏂囦欢澶�" - placement="bottom" - popper-class="atooltip" - > + <div class="tree-edit area-add" v-show="!DataStackPool.readonly"> + <el-tooltip content="娣诲姞鏂囦欢澶�" placement="bottom" popper-class="atooltip"> <button @click="addDir($event)"> <i class="iconfont iconhebingxingzhuang"></i> </button> @@ -344,15 +261,10 @@ <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> @@ -376,90 +288,86 @@ </template> <script> -import { changeEnable, deleteLocalFile, updateStatus } from "@/api/localVedio"; +import { changeEnable, deleteLocalFile, updateStatus } from "@/api/localVedio" -import { createCamera } from "@/api/camera"; +import { createCamera } from "@/api/camera" -import bus from "@/plugin/bus"; +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"; +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: { showTab() { - return true; + return true }, showCam() { return ( this.appName === "Camera" || this.appName === "Cluster" || - (this.appName === "Search" && - (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)) - ); + (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)) + ) }, showCluster() { - return this.appName === "Cluster"; + return this.appName === "Cluster" }, // 鏁版嵁鏍堥厤缃繀椤绘樉绀恒�� 妫�绱㈤�氳繃鏉冮檺鎺у埗鏄剧ず, 鏈畨瑁呮暟鎹爤涔熶笉鏄剧ず showDataStack() { if (this.appName === "DataStack") { - return true; + return true } if (this.appName === "Search") { // 鏈畨瑁呮暟鎹爤閰嶇疆 if (this.installedApps.indexOf("dataStack") >= 0) { if (this.isAdmin) { - return true; + return true } if (this.buttonAuthority.indexOf("search:stack") >= 0) { - return true; + return true } } } - return false; + return false }, showLock() { - return this.edit; + return this.edit }, isAdmin() { //鍚庨棬 - if ( - sessionStorage.getItem("userInfo") && - sessionStorage.getItem("userInfo") !== "" - ) { - let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; - return loginName === "superadmin" || loginName === "basic"; + if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username + return loginName === "superadmin" || loginName === "basic" } - return true; - }, + return true + } }, data() { return { @@ -467,25 +375,24 @@ dataStack: "videoMonitor:dataStack", buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], installedApps: sessionStorage.getItem("apps") || [], - loginName: - JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", + loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", searchTypeOptions: [ { value: 0, - label: "鍏ㄩ儴鎽勫儚鏈�", + label: "鍏ㄩ儴鎽勫儚鏈�" }, { value: 1, - label: "鍒嗘瀽鎽勫儚鏈�", + label: "鍒嗘瀽鎽勫儚鏈�" }, { value: 2, - label: "鐩戞帶鎽勫儚鏈�", + label: "鐩戞帶鎽勫儚鏈�" }, { value: 3, - label: "鑱斿姩鎽勫儚鏈�", - }, + label: "鑱斿姩鎽勫儚鏈�" + } ], timeout: null, fileUploadBox: false, @@ -493,258 +400,252 @@ importAreaId: "", menuLoading: false, clusterName: "", - cluster: "", - }; + cluster: "" + } }, created() { if (this.showCam) { - this.TreeDataPool.treeActiveName = "camera"; + this.TreeDataPool.treeActiveName = "camera" // this.TreeDataPool.fetchTreeData(); } else { - this.TreeDataPool.treeActiveName = "dataStack"; - this.DataStackPool.fetchFiles(); + this.TreeDataPool.treeActiveName = "dataStack" + this.DataStackPool.fetchFiles() } if (this.showCluster) { - this.TreeDataPool.treeActiveName = "cluster"; - this.TreeDataPool.fetchClusterTree(); + this.TreeDataPool.treeActiveName = "cluster" + this.TreeDataPool.fetchClusterTree() findCluster().then((res) => { if (res.success) { - this.clusterName = res.data.clusterName; + this.clusterName = res.data.clusterName } - }); + }) } }, methods: { searchAreaData() { - this.TreeDataPool.fetchTreeData(); + this.TreeDataPool.fetchTreeData() }, searchDataStack() { - this.DataStackPool.fetchFiles(); + this.DataStackPool.fetchFiles() }, searchClusterData() { - this.TreeDataPool.fetchClusterTree(); + this.TreeDataPool.fetchClusterTree() }, lockSwitch() { - this.TreeDataPool.readonly = !this.TreeDataPool.readonly; + this.TreeDataPool.readonly = !this.TreeDataPool.readonly }, gbLockSwitch() { - this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly; + this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly }, dataStackLockSwitch() { - this.DataStackPool.readonly = !this.DataStackPool.readonly; + this.DataStackPool.readonly = !this.DataStackPool.readonly }, closeTree() { - this.TreeDataPool.showTreeBox = false; - bus.$emit("refreshCompareImg"); + this.TreeDataPool.showTreeBox = false + bus.$emit("refreshCompareImg") }, addNode(event) { - this.$refs.tree.addNode(event, { id: 0 }); + 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.$set(this.openeds, 0, index); - this.TreeDataPool.openeds[index] = true; + this.$set(this.openeds, 0, index) + this.TreeDataPool.openeds[index] = true }, menuClose(index) { - this.$set(this.openeds, 0, ""); - this.TreeDataPool.openeds[index] = false; + this.$set(this.openeds, 0, "") + this.TreeDataPool.openeds[index] = false }, refreshGB() { // 闃叉閲嶅鍒锋柊 if (this.loadingGBTree) { - return; + return } // 鍥芥爣鎽勫儚鏈烘暟鎹槸鍥芥爣鏈嶅姟鍒嗘壒鎺ㄩ�佺殑锛岃姹傚埛鏂板垪琛ㄥ悗锛岄渶瑕佺瓑寰呯害1鍒嗛挓鐨勬椂闂村悗绔墠鑳藉悓姝ュ畬鏁版嵁銆� - this.TreeDataPool.refreshGB28181(); - this.loadingGBTree = true; + this.TreeDataPool.refreshGB28181() + this.loadingGBTree = true setTimeout(() => { - this.TreeDataPool.fetchGbTree(); - this.loadingGBTree = false; - }, 1000 * 60); + this.TreeDataPool.fetchGbTree() + this.loadingGBTree = false + }, 1000 * 60) }, querySearchAsync(type) { - clearTimeout(this.timeout); + clearTimeout(this.timeout) this.timeout = setTimeout(() => { if (type === "camera") { - this.TreeDataPool.fetchTreeData(); + this.TreeDataPool.fetchTreeData() } if (type === "cluster") { - this.TreeDataPool.fetchClusterTree(); + this.TreeDataPool.fetchClusterTree() } if (type === "dir") { - this.DataStackPool.fetchFiles(); + this.DataStackPool.fetchFiles() } - }, 500); + }, 500) }, handleClick(event) { if (event.name == "dataStack") { - this.DataStackPool.fetchFiles(); - this.DataStackPool.clean(); - this.TreeDataPool.clean(); + 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 }, async changeEnable() { if (this.PollData.localVideo === 0) { this.$notify({ title: "澶辫触", type: "warning", - message: "寮�鍚湰鍦版暟鎹棰戝垎鏋愬鐞嗭紝闇�鍏堜负鏈湴鏁版嵁鎵嬪姩璁剧疆绠楀姏璧勬簮锛�", - }); - return false; + 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; + 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", // message:"璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�" // }) - return false; + return false } let res = await updateStatus({ ids: this.TreeDataPool.checkedLocalVedio.map((i) => { - return i.id; + 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, "宸插嬀閫夌殑瑙嗛"); + let list1 = this.getCheckedFiles() + console.log(list1, "宸插嬀閫夌殑瑙嗛") if (list1.length == 0) { - return false; + return false } let res = await deleteLocalFile({ ids: list1.map((i) => { - return i.id; - }), - }); + return i.id + }) + }) if (res && res.success) { this.$notify({ type: "success", - message: "鍒犻櫎鎴愬姛锛侊紒", - }); + message: "鍒犻櫎鎴愬姛锛侊紒" + }) } else { this.$notify({ type: "error", - message: "鍒犻櫎澶辫触锛�", - }); + message: "鍒犻櫎澶辫触锛�" + }) } }, refrash(current, pageSize) { - this.TreeDataPool.localCurrentPage = current; + this.TreeDataPool.localCurrentPage = current }, importCameras(area) { - this.importAreaId = area; - this.$refs["import-btn"].click(); + this.importAreaId = area + this.$refs["import-btn"].click() }, async uploadFile(params) { - const _file = params.file; - const fileReader = new FileReader(); + const _file = params.file + const fileReader = new FileReader() fileReader.onload = (ev) => { - this.menuLoading = true; + this.menuLoading = true try { - const data = ev.target.result; + const data = ev.target.result const workbook = XLSX.read(data, { - type: "binary", - }); + type: "binary" + }) for (let sheet in workbook.Sheets) { //寰幆璇诲彇姣忎釜鏂囦欢 - const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); + const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]) //鑻ュ綋鍓峴heet娌℃湁鏁版嵁锛屽垯continue if (sheetArray.length == 0) { - continue; + continue } - let succeed = 0; - let failed = 0; - let promiseArr = []; + 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); + 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) let tem = { camera: camera, - sensors: camera.sensors, - }; - tem.camera.clusterId = this.TreeDataPool.clusterId; - tem.camera.devId = this.TreeDataPool.devId; - tem.camera.parentUserId = ""; - tem.camera.enable = false; - delete tem.camera.sensors; + sensors: camera.sensors + } + tem.camera.clusterId = this.TreeDataPool.clusterId + tem.camera.devId = this.TreeDataPool.devId + tem.camera.parentUserId = "" + tem.camera.enable = false + delete tem.camera.sensors - promiseArr.push(createCamera(tem)); + promiseArr.push(createCamera(tem)) } - let _this = this; + let _this = this Promise.allSettled(promiseArr) .then((res) => { res.forEach((item) => { if (item.status === "fulfilled") { - succeed++; + succeed++ } else { - failed++; + failed++ } - }); - _this.menuLoading = false; + }) + _this.menuLoading = false _this.$message({ type: "success", - message: - "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + - succeed + - "涓� 澶辫触:" + - failed + - "涓�", - }); - _this.TreeDataPool.fetchTreeData(); + message: "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + succeed + "涓� 澶辫触:" + failed + "涓�" + }) + _this.TreeDataPool.fetchTreeData() }) .catch((e) => { - console.log(e); - }); + console.log(e) + }) } } catch (e) { - this.menuLoading = false; - this.$message.warning("鏂囦欢绫诲瀷涓嶆纭紒"); + this.menuLoading = false + this.$message.warning("鏂囦欢绫诲瀷涓嶆纭紒") } - }; - fileReader.readAsBinaryString(_file); + } + fileReader.readAsBinaryString(_file) }, exceed() { - this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢"); + this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢") }, //鍒犻櫎鏂囦欢 remove() {}, @@ -760,11 +661,11 @@ run_type: -1, username: "", password: "", - sensors: [], - }; - }, - }, -}; + sensors: [] + } + } + } +} </script> <style lang="scss" scoped> @@ -1069,4 +970,4 @@ .flex-box { display: flex; } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0