From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 01 九月 2023 16:10:37 +0800 Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加 --- src/components/LeftNav.vue | 115 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 93 insertions(+), 22 deletions(-) diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue index 151f219..e63e984 100644 --- a/src/components/LeftNav.vue +++ b/src/components/LeftNav.vue @@ -118,18 +118,19 @@ </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> @@ -156,13 +157,57 @@ name="cluster" :style="`height:${height - 56}px;`" v-if="showCluster" - ></el-tab-pane> - <el-tab-pane - label="鏁版嵁鏍�" - name="dataStack" - :style="`height:${height - 56}px;`" - v-if="showDataStack" > + <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"> @@ -188,7 +233,7 @@ size="small" clearable @input="querySearchAsync('dir')" - :style="'width:103px;'" + :style="'width:148px;'" > <i class="el-icon-search el-input__icon" @@ -262,10 +307,12 @@ } from "@/api/camera"; import bus from "@/plugin/bus" -import TreeMenu from "@/components/treeMenu/index"; +// 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: { @@ -293,7 +340,7 @@ return true; }, showCam() { - return this.appName === "Camera" || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)); + return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin)); }, showCluster() { return this.appName === "Cluster"; @@ -396,10 +443,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(); @@ -409,6 +459,16 @@ 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: { searchAreaData() { @@ -416,6 +476,9 @@ }, searchDataStack() { this.DataStackPool.fetchFiles(); + }, + searchClusterData() { + this.TreeDataPool.fetchClusterTree(); }, lockSwitch() { this.TreeDataPool.readonly = !this.TreeDataPool.readonly; @@ -464,6 +527,9 @@ this.timeout = setTimeout(() => { if (type === "camera") { this.TreeDataPool.fetchTreeData(); + } + if (type === "cluster") { + this.TreeDataPool.fetchClusterTree(); } if (type === "dir") { this.DataStackPool.fetchFiles(); @@ -801,15 +867,17 @@ } .dev-vedio-list { padding: 0 15px; - max-height: 740px; + box-sizing: border-box; + height: calc(100vh - 80px); + //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; - } + // @media screen and (max-height: 720px) { + // max-height: 580px; + // } + // @media screen and (min-height: 900px) { + // max-height: 740px; + // } } .dev-vedio-list::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮�*/ @@ -829,7 +897,7 @@ } .tree-edit { - z-index: 1; + z-index: 2; font-size: 16px; position: absolute; top: 56px; @@ -896,4 +964,7 @@ color: #606266; } } +.flex-box { + display: flex; +} </style> \ No newline at end of file -- Gitblit v1.8.0