From c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期一, 19 十月 2020 19:14:52 +0800 Subject: [PATCH] 搜索集群节点样式更新 --- src/components/LeftNav.vue | 185 ++++++++++++++++++++++++++++++++++------------ 1 files changed, 136 insertions(+), 49 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index fc28117..6f97a2a 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -152,6 +152,57 @@ </el-menu> </el-tab-pane> <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-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="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" :style="`height:${height - 56}px;`" @@ -283,19 +334,40 @@ }, computed: { - showTab() { + showTab () { return true; }, - showCam() { - return this.appName === "Camera" || this.appName === "Search"; + showCam () { + return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)); }, - showDataStack() { - return this.appName === "DataStack" || this.appName === "Search"; + showCluster () { + return this.appName === "Cluster"; }, - showLock() { + // 鏁版嵁鏍堥厤缃繀椤绘樉绀恒�� 妫�绱㈤�氳繃鏉冮檺鎺у埗鏄剧ず, 鏈畨瑁呮暟鎹爤涔熶笉鏄剧ず + showDataStack () { + 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; }, - openeds() { + openeds () { let arry = []; for (let i = 0; i < this.TreeDataPool.openeds.length; i++) { if (this.TreeDataPool.openeds[i]) { @@ -306,7 +378,7 @@ } return arry; }, - isAdmin() { + isAdmin () { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" @@ -317,12 +389,13 @@ return false; } }, - data() { + data () { return { cameraAuth: "videoMonitor:camera", dataStack: "videoMonitor:dataStack", activeIndexVideo: "", buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], + installedApps: sessionStorage.getItem("apps") || [], loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", searchTypeOptions: [ { @@ -371,7 +444,9 @@ menuLoading: false }; }, - created() { + created () { + console.log(this.appName) + console.log(this.showCam) if (this.showCam) { this.TreeDataPool.treeActiveName = "camera" this.TreeDataPool.fetchTreeData(); @@ -381,44 +456,50 @@ this.DataStackPool.fetchFiles(); } + if (this.showCluster) { + this.TreeDataPool.treeActiveName = "cluster" + this.TreeDataPool.fetchClusterTree(); + } }, methods: { - searchAreaData() { + searchAreaData () { this.TreeDataPool.fetchTreeData(); }, - searchDataStack() { + searchDataStack () { this.DataStackPool.fetchFiles(); }, - lockSwitch() { - this.TreeDataPool.readonly = !this.TreeDataPool.readonly; - console.log(this.TreeDataPool.readonly) + searchClusterData () { + this.TreeDataPool.fetchClusterTree(); }, - gbLockSwitch() { + lockSwitch () { + this.TreeDataPool.readonly = !this.TreeDataPool.readonly; + }, + gbLockSwitch () { this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly; }, - dataStackLockSwitch() { + dataStackLockSwitch () { this.DataStackPool.readonly = !this.DataStackPool.readonly; }, - closeTree() { + closeTree () { this.TreeDataPool.showTreeBox = false; bus.$emit('refreshCompareImg') }, - addNode(event) { + addNode (event) { this.$refs.tree.addNode(event, { id: 0 }); }, - addCamera(node) { + addCamera (node) { bus.$emit("addCameraOnTree", node); }, - addDir(node) { + addDir (node) { bus.$emit("addDirOnTree", node); }, - menuOpen(index) { + menuOpen (index) { this.TreeDataPool.openeds[index] = true; }, - menuClose(index) { + menuClose (index) { this.TreeDataPool.openeds[index] = false; }, - refreshGB() { + refreshGB () { // 闃叉閲嶅鍒锋柊 if (this.loadingGBTree) { return; @@ -432,7 +513,7 @@ this.loadingGBTree = false; }, 1000 * 60); }, - querySearchAsync(type) { + querySearchAsync (type) { clearTimeout(this.timeout); this.timeout = setTimeout(() => { if (type === "camera") { @@ -443,7 +524,7 @@ } }, 500); }, - handleClick(event) { + handleClick (event) { if (event.name == 'dataStack') { this.DataStackPool.fetchFiles(); this.DataStackPool.clean(); @@ -452,7 +533,7 @@ this.TreeDataPool.treeActiveName = event.name console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName) }, - async changeEnable() { + async changeEnable () { if (this.PollData.localVideo === 0) { this.$notify({ title: "澶辫触", @@ -468,13 +549,13 @@ console.log(res, '鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�') } }, - getCheckedFiles() { + getCheckedFiles () { let list1 = this.TreeDataPool.localVedioList.filter(i => { return i.checkStatus }) return list1 }, - async stopVedio(status) { + async stopVedio (status) { // let list1 = this.getCheckedFiles(); if (this.TreeDataPool.checkedLocalVedio.length == 0) { this.$notify({ @@ -497,7 +578,7 @@ console.log(res, '寮�鍚殏鍋滃弬鏁�') } }, - async deleteLocalFiles() { + async deleteLocalFiles () { let list1 = this.getCheckedFiles(); console.log(list1, '宸插嬀閫夌殑瑙嗛') if (list1.length == 0) { @@ -519,16 +600,16 @@ } }, - refrash(current, pageSize) { + refrash (current, pageSize) { this.TreeDataPool.localCurrentPage = current; }, - importCameras(area) { + importCameras (area) { this.importAreaId = area this.$refs["import-btn"].click() }, - async uploadFile(params) { + async uploadFile (params) { const _file = params.file; const fileReader = new FileReader(); fileReader.onload = (ev) => { @@ -549,7 +630,7 @@ let succeed = 0; let failed = 0; - + let promiseArr = []; for (let item in sheetArray) { let camera = this.newCamera(); camera.areaid = this.importAreaId; @@ -557,26 +638,27 @@ camera.rtsp = String(sheetArray[item].rtsp); camera.addr = String(sheetArray[item].addr); - createCamera(camera).then(rsp => { - if (rsp && rsp.success) { + promiseArr.push(createCamera(camera)); + } + let _this = this; + Promise.allSettled(promiseArr).then(res => { + res.forEach(item => { + if (item.status === 'fulfilled') { succeed++; } else { failed++; } - }).catch(err => { - failed++; - }) - } - - let _this = this - setTimeout(() => { - this.menuLoading = false; + }); + _this.menuLoading = false; _this.$message({ type: "success", message: "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + succeed + "涓� 澶辫触:" + failed + "涓�" }) _this.TreeDataPool.fetchTreeData(); - }, 2000) + }).catch(e => { + console.log(e) + }); + } } catch (e) { this.menuLoading = false @@ -585,14 +667,14 @@ }; fileReader.readAsBinaryString(_file); }, - exceed() { + exceed () { this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢"); }, //鍒犻櫎鏂囦欢 - remove() { + remove () { }, - newCamera() { + newCamera () { return { latitude: 0, rtsp: "", @@ -623,8 +705,9 @@ 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; @@ -751,6 +834,7 @@ .search-input { padding-top: 8px; padding-bottom: 12px; + text-align: left; .dev-tree-close { width: 10%; margin-left: 10px; @@ -866,4 +950,7 @@ color: #606266; } } +.flex-box{ + display: flex; +} </style> \ No newline at end of file -- Gitblit v1.8.0