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 | 309 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 251 insertions(+), 58 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 711a98d..6f97a2a 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -4,6 +4,7 @@
class="left-tree-box"
:style="`height:${height}px;animation-duration: 0.7s`"
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">
@@ -53,7 +54,7 @@
@click="closeTree"
></i>
</el-tooltip>
- </div> -->
+ </div>-->
</li>
<!-- 娣诲姞鍖哄煙鍥炬爣 -->
@@ -71,6 +72,16 @@
<button @click="addCamera('0')">
<!-- <i class="el-icon-video-camera"></i> -->
<span class="iconfont iconshishishipin" 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">
+ <button @click="importCameras('0')">
+ <!-- <i class="el-icon-video-camera"></i> -->
+ <span class="iconfont icondaoru" style="font-size:16px;"></span>
</button>
</el-tooltip>
</div>
@@ -101,6 +112,7 @@
:node="TreeDataPool.treeData"
:height="height"
@addDevice="addCamera"
+ @import="importCameras"
/>
</el-menu-item-group>
</el-submenu>
@@ -140,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;`"
@@ -148,7 +211,7 @@
<div class="local-vedio-area">
<!-- 鎼滅储 -->
<div class="search-input">
- <span style="display: inline-block;padding: 0px 3px;"></span>
+ <!-- <span style="display: inline-block;padding: 0px 3px;"></span> -->
<el-select
v-model="DataStackPool.searchType"
placeholder="璇烽�夋嫨"
@@ -186,7 +249,7 @@
style="color: #3D68E1;line-height: 22px;font-size: 27px;"
@click="closeTree"
></i>
- </div> -->
+ </div>-->
</div>
<!-- 鏈湴瑙嗛婧愬垪琛� -->
@@ -213,6 +276,20 @@
<file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
</el-tab-pane>
</el-tabs>
+
+ <!-- 瀵煎叆璁惧缁勪欢 浜嬩欢瑙﹀彂 -->
+ <el-upload
+ class="upload-btn"
+ action="https://jsonplaceholder.typicode.com/posts/"
+ accept=".xlsx"
+ :on-exceed="exceed"
+ :limit="10"
+ :on-remove="remove"
+ :http-request="uploadFile"
+ :show-file-list="false"
+ >
+ <button ref="import-btn" v-show="false"></button>
+ </el-upload>
</div>
</transition>
</template>
@@ -225,9 +302,15 @@
updateStatus
} from "@/api/localVedio";
+import {
+ createCamera,
+} from "@/api/camera";
+
+import bus from "@/plugin/bus"
import TreeMenu from "@/components/treeMenu/index";
import LocalVedioList from '@/components/subComponents/LocalVedioList';
import FileUpload from '@/components/subComponents/FileUpload/index';
+import XLSX from 'xlsx'
export default {
components: {
@@ -251,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]) {
@@ -274,7 +378,7 @@
}
return arry;
},
- isAdmin() {
+ isAdmin () {
if (
sessionStorage.getItem("userInfo") &&
sessionStorage.getItem("userInfo") !== ""
@@ -285,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: [
{
@@ -334,28 +439,14 @@
],
timeout: null,
fileUploadBox: false,
- loadingGBTree: false
+ loadingGBTree: false,
+ importAreaId: "",
+ menuLoading: false
};
},
- // watch: {
- // $route(to, from) {
- // switch (to.name) {
- // case "Searching":
- // this.cameraAuth = "videoSearch:camera"
- // this.dataStack = "videoSearch:dataStack"
- // break
- // case "VideoManage":
- // this.cameraAuth = "VIDEOCAMERA:camera"
- // this.dataStack = "VIDEOCAMERA:dataStack"
- // break
- // default:
- // this.cameraAuth = "videoMonitor:camera"
- // this.dataStack = "videoMonitor:dataStack"
- // }
- // // console.log("璺敱鍙樺寲锛�", to, from)
- // }
- // },
- created() {
+ created () {
+ console.log(this.appName)
+ console.log(this.showCam)
if (this.showCam) {
this.TreeDataPool.treeActiveName = "camera"
this.TreeDataPool.fetchTreeData();
@@ -365,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')
+ bus.$emit('refreshCompareImg')
},
- addNode(event) {
+ addNode (event) {
this.$refs.tree.addNode(event, { id: 0 });
},
- addCamera(node) {
- // bus.$emit("addCameraOnTree", node);
+ addCamera (node) {
+ bus.$emit("addCameraOnTree", node);
},
- addDir(node) {
- // bus.$emit("addDirOnTree", 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;
@@ -416,7 +513,7 @@
this.loadingGBTree = false;
}, 1000 * 60);
},
- querySearchAsync(type) {
+ querySearchAsync (type) {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
if (type === "camera") {
@@ -427,7 +524,7 @@
}
}, 500);
},
- handleClick(event) {
+ handleClick (event) {
if (event.name == 'dataStack') {
this.DataStackPool.fetchFiles();
this.DataStackPool.clean();
@@ -436,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: "澶辫触",
@@ -452,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({
@@ -481,7 +578,7 @@
console.log(res, '寮�鍚殏鍋滃弬鏁�')
}
},
- async deleteLocalFiles() {
+ async deleteLocalFiles () {
let list1 = this.getCheckedFiles();
console.log(list1, '宸插嬀閫夌殑瑙嗛')
if (list1.length == 0) {
@@ -503,9 +600,95 @@
}
},
- refrash(current, pageSize) {
+ refrash (current, pageSize) {
this.TreeDataPool.localCurrentPage = current;
},
+
+ importCameras (area) {
+ this.importAreaId = area
+ this.$refs["import-btn"].click()
+ },
+
+ async uploadFile (params) {
+ const _file = params.file;
+ const fileReader = new FileReader();
+ fileReader.onload = (ev) => {
+ this.menuLoading = true;
+ try {
+ const data = ev.target.result;
+ const workbook = XLSX.read(data, {
+ type: 'binary'
+ });
+
+ for (let sheet in workbook.Sheets) {
+ //寰幆璇诲彇姣忎釜鏂囦欢
+ const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
+ //鑻ュ綋鍓峴heet娌℃湁鏁版嵁锛屽垯continue
+ if (sheetArray.length == 0) {
+ continue;
+ }
+
+ 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);
+
+ promiseArr.push(createCamera(camera));
+ }
+ let _this = this;
+ Promise.allSettled(promiseArr).then(res => {
+ res.forEach(item => {
+ if (item.status === 'fulfilled') {
+ succeed++;
+ } else {
+ failed++;
+ }
+ });
+ _this.menuLoading = false;
+ _this.$message({
+ type: "success",
+ message: "鎿嶄綔瀹屾垚, 瀵煎叆鎴愬姛:" + succeed + "涓� 澶辫触:" + failed + "涓�"
+ })
+ _this.TreeDataPool.fetchTreeData();
+ }).catch(e => {
+ console.log(e)
+ });
+
+ }
+ } catch (e) {
+ this.menuLoading = false
+ this.$message.warning('鏂囦欢绫诲瀷涓嶆纭紒');
+ }
+ };
+ fileReader.readAsBinaryString(_file);
+ },
+ exceed () {
+ this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢");
+ },
+ //鍒犻櫎鏂囦欢
+ remove () {
+
+ },
+ newCamera () {
+ return {
+ latitude: 0,
+ rtsp: "",
+ longitude: 0,
+ name: "",
+ addr: "",
+ areaid: "",
+ reserved: "",
+ run_type: -1,
+ username: "",
+ password: "",
+ sensors: []
+ }
+ }
}
};
</script>
@@ -514,15 +697,17 @@
.left-tree-box {
float: left;
width: 100%;
- .el-tabs__nav-prev,.el-tabs__nav-next{
+ .el-tabs__nav-prev,
+ .el-tabs__nav-next {
display: none;
}
.el-tabs--border-card {
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;
@@ -649,6 +834,7 @@
.search-input {
padding-top: 8px;
padding-bottom: 12px;
+ text-align: left;
.dev-tree-close {
width: 10%;
margin-left: 10px;
@@ -734,6 +920,10 @@
.camera-add {
left: 128px;
}
+
+.import-btn {
+ left: 156px;
+}
.tree-font {
font-family: PingFangSC-Medium;
font-size: 14px;
@@ -760,4 +950,7 @@
color: #606266;
}
}
+.flex-box{
+ display: flex;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0