From d8fcf4c20cd4638a3def6227a71ea2c81fbc0885 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期五, 23 十月 2020 17:23:15 +0800 Subject: [PATCH] 标注静态交互 --- src/components/LeftNav.vue | 125 +++++++++++++++++++++++++++++++++++++---- 1 files changed, 113 insertions(+), 12 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index 2ef7e0d..421a4e1 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -118,7 +118,7 @@ </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> @@ -126,7 +126,8 @@ <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> @@ -150,6 +151,61 @@ </el-menu-item-group> </el-submenu> </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="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="鏁版嵁鏍�" @@ -260,6 +316,7 @@ 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: { @@ -287,10 +344,31 @@ 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; @@ -323,6 +401,7 @@ dataStack: "videoMonitor:dataStack", activeIndexVideo: "", buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], + installedApps: sessionStorage.getItem("apps") || [], loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�", searchTypeOptions: [ { @@ -368,10 +447,13 @@ fileUploadBox: false, loadingGBTree: false, importAreaId: "", - menuLoading: false + menuLoading: false, + clusterName: '' }; }, created() { + console.log(this.appName) + console.log(this.showCam) if (this.showCam) { this.TreeDataPool.treeActiveName = "camera" this.TreeDataPool.fetchTreeData(); @@ -381,6 +463,17 @@ this.DataStackPool.fetchFiles(); } + if (this.showCluster) { + this.TreeDataPool.treeActiveName = "cluster" + this.TreeDataPool.fetchClusterTree(); + findCluster().then(res => { + if (res.success) { + debugger + this.clusterName = res.data.clusterName; + } + + }) + } }, methods: { searchAreaData() { @@ -388,6 +481,9 @@ }, searchDataStack() { this.DataStackPool.fetchFiles(); + }, + searchClusterData() { + this.TreeDataPool.fetchClusterTree(); }, lockSwitch() { this.TreeDataPool.readonly = !this.TreeDataPool.readonly; @@ -559,11 +655,11 @@ promiseArr.push(createCamera(camera)); } let _this = this; - Promise.allSettled(promiseArr).then(res=>{ - res.forEach(item=>{ - if(item.status === 'fulfilled'){ + Promise.allSettled(promiseArr).then(res => { + res.forEach(item => { + if (item.status === 'fulfilled') { succeed++; - }else{ + } else { failed++; } }); @@ -573,10 +669,10 @@ message: "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + succeed + "涓� 澶辫触:" + failed + "涓�" }) _this.TreeDataPool.fetchTreeData(); - }).catch(e=>{ + }).catch(e => { console.log(e) }); - + } } catch (e) { this.menuLoading = false @@ -623,8 +719,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 +848,7 @@ .search-input { padding-top: 8px; padding-bottom: 12px; + text-align: left; .dev-tree-close { width: 10%; margin-left: 10px; @@ -866,4 +964,7 @@ color: #606266; } } +.flex-box { + display: flex; +} </style> \ No newline at end of file -- Gitblit v1.8.0