From bae0368f502f524fc739003fe751fb0eb06c5859 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 17 六月 2021 14:48:29 +0800
Subject: [PATCH] 修改朔黄前端分析
---
src/components/LeftNav.vue | 168 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 135 insertions(+), 33 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 98e72a4..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>
@@ -152,11 +153,61 @@
</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">
@@ -182,7 +233,7 @@
size="small"
clearable
@input="querySearchAsync('dir')"
- :style="'width:103px;'"
+ :style="'width:148px;'"
>
<i
class="el-icon-search el-input__icon"
@@ -256,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: {
@@ -287,10 +340,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 +397,7 @@
dataStack: "videoMonitor:dataStack",
activeIndexVideo: "",
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
+ installedApps: sessionStorage.getItem("apps") || [],
loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�",
searchTypeOptions: [
{
@@ -368,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();
@@ -381,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() {
@@ -388,6 +476,9 @@
},
searchDataStack() {
this.DataStackPool.fetchFiles();
+ },
+ searchClusterData() {
+ this.TreeDataPool.fetchClusterTree();
},
lockSwitch() {
this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
@@ -436,6 +527,9 @@
this.timeout = setTimeout(() => {
if (type === "camera") {
this.TreeDataPool.fetchTreeData();
+ }
+ if (type === "cluster") {
+ this.TreeDataPool.fetchClusterTree();
}
if (type === "dir") {
this.DataStackPool.fetchFiles();
@@ -548,7 +642,7 @@
let succeed = 0;
let failed = 0;
-
+ let promiseArr = [];
for (let item in sheetArray) {
let camera = this.newCamera();
camera.areaid = this.importAreaId;
@@ -556,26 +650,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
@@ -622,8 +717,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;
@@ -750,6 +846,7 @@
.search-input {
padding-top: 8px;
padding-bottom: 12px;
+ text-align: left;
.dev-tree-close {
width: 10%;
margin-left: 10px;
@@ -770,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 {
/*婊氬姩鏉℃暣浣撴牱寮�*/
@@ -798,7 +897,7 @@
}
.tree-edit {
- z-index: 1;
+ z-index: 2;
font-size: 16px;
position: absolute;
top: 56px;
@@ -865,4 +964,7 @@
color: #606266;
}
}
+.flex-box {
+ display: flex;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0