From a3f357e8a60443b74b64c7479113c68eb35ce1f5 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期五, 15 七月 2022 19:44:57 +0800
Subject: [PATCH] 控制轮询
---
src/components/LeftNav.vue | 404 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 216 insertions(+), 188 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 5322b01..0ba92c5 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -2,18 +2,26 @@
<transition name="slideLeft">
<div
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">
+ <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"
+ >
<el-menu
:default-openeds="openeds"
background-color="#fff"
text-color="#303133"
active-text-color="#409EFF"
- style="height: 100%;"
+ style="height: 100%"
class="el-menu-vertical-demo"
unique-opened
@open="menuOpen"
@@ -32,7 +40,7 @@
:value="item.value"
></el-option>
</el-select>
- <span style="display: inline-block;padding: 0px 3px;"></span>
+ <span style="display: inline-block; padding: 0px 3px"></span>
<el-input
v-model="TreeDataPool.searchInput"
placeholder="鎼滅储"
@@ -41,7 +49,7 @@
>
<i
class="el-icon-search el-input__icon"
- style="color:#DCDFE6"
+ style="color: #dcdfe6"
slot="prefix"
@click="searchAreaData"
></i>
@@ -57,9 +65,12 @@
</div>-->
</li>
- <!-- 娣诲姞鍖哄煙鍥炬爣 -->
<div class="tree-edit area-add" v-show="!TreeDataPool.readonly">
- <el-tooltip content="娣诲姞鍖哄煙" placement="bottom" popper-class="atooltip">
+ <el-tooltip
+ content="娣诲姞鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
<button @click="addNode($event)">
<i class="iconfont iconhebingxingzhuang"></i>
</button>
@@ -68,20 +79,34 @@
<!-- 娣诲姞璁惧鍥炬爣 -->
<div class="tree-edit camera-add" v-show="!TreeDataPool.readonly">
- <el-tooltip content="娣诲姞璁惧" placement="bottom" popper-class="atooltip">
+ <el-tooltip
+ content="娣诲姞璁惧"
+ placement="bottom"
+ popper-class="atooltip"
+ >
<button @click="addCamera('0')">
<!-- <i class="el-icon-video-camera"></i> -->
- <span class="iconfont iconshishishipin" style="font-size:14px;"></span>
+ <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">
+ <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>
+ <span
+ class="iconfont icondaoru"
+ style="font-size: 16px"
+ ></span>
</button>
</el-tooltip>
</div>
@@ -100,7 +125,7 @@
<!-- <i class="iconfont iconjiankongshexiangji"></i> -->
<span
class="iconfont iconjiankongshexiangji"
- style="padding-right:10px;font-size:13px;"
+ style="padding-right: 10px; font-size: 13px"
></span>
<b class="tree-font">鎽勫儚鏈�</b>
</template>
@@ -118,22 +143,27 @@
</el-submenu>
<el-submenu index="1">
<template slot="title">
- <i class="iconfont iconGBx" style="margin-left:-4px;"></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>
- <i v-else class="el-icon-unlock" style="font-size:16px"></i>
+ <i
+ v-if="TreeDataPool.gbReadonly"
+ class="el-icon-lock"
+ style="font-size: 16px"
+ ></i>
+ <i v-else class="el-icon-unlock" style="font-size: 16px"></i>
</button>
</div>
<el-menu-item-group class="item-group">
@@ -173,7 +203,7 @@
:value="item.value"
></el-option>
</el-select>
- <span style="display: inline-block;padding: 0px 3px;"></span>
+ <span style="display: inline-block; padding: 0px 3px"></span>
<el-input
v-model="TreeDataPool.searchInput"
placeholder="鎼滅储"
@@ -182,12 +212,19 @@
>
<i
class="el-icon-search el-input__icon"
- style="color:#DCDFE6"
+ 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
@@ -202,12 +239,7 @@
</div>
</div>
</el-tab-pane>
- <el-tab-pane
- label="鏁版嵁鏍�"
- name="dataStack"
- :style="`height:${height - 56}px;`"
- v-if="showDataStack"
- >
+ <el-tab-pane label="鏁版嵁鏍�" name="dataStack" v-if="showDataStack">
<div class="local-vedio-area">
<!-- 鎼滅储 -->
<div class="search-input">
@@ -216,7 +248,7 @@
v-model="DataStackPool.searchType"
placeholder="璇烽�夋嫨"
size="small"
- style="width: 134px;height: 34px;margin-left: 10px;"
+ style="width: 134px; height: 34px; margin-left: 10px"
@change="searchDataStack"
>
<el-option
@@ -226,18 +258,18 @@
:value="item.value"
></el-option>
</el-select>
- <span style="display: inline-block;padding: 0px 3px;"></span>
+ <span style="display: inline-block; padding: 0px 3px"></span>
<el-input
v-model="DataStackPool.searchInput"
placeholder="璇疯緭鍏�"
size="small"
clearable
@input="querySearchAsync('dir')"
- :style="'width:103px;'"
+ :style="'width:148px;'"
>
<i
class="el-icon-search el-input__icon"
- style="color:black"
+ style="color: black"
slot="prefix"
@click="searchDataStack"
></i>
@@ -256,7 +288,11 @@
<div class="dev-vedio-list">
<!-- 娣诲姞鏂囦欢澶瑰浘鏍� -->
<div class="tree-edit area-add" v-show="!DataStackPool.readonly">
- <el-tooltip content="娣诲姞鏂囦欢澶�" placement="bottom" popper-class="atooltip">
+ <el-tooltip
+ content="娣诲姞鏂囦欢澶�"
+ placement="bottom"
+ popper-class="atooltip"
+ >
<button @click="addDir($event)">
<i class="iconfont iconhebingxingzhuang"></i>
</button>
@@ -270,10 +306,12 @@
<i v-else class="el-icon-unlock"></i>
</button>
</div>
- <LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList>
+ <LocalVedioList
+ :dataList="TreeDataPool.localVedioList"
+ ></LocalVedioList>
</div>
</div>
- <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
+ <file-upload v-show="fileUploadBox" @close="fileUploadBox = false" />
</el-tab-pane>
</el-tabs>
@@ -299,52 +337,57 @@
show,
changeEnable,
deleteLocalFile,
- updateStatus
+ updateStatus,
} from "@/api/localVedio";
-import {
- createCamera,
-} from "@/api/camera";
+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'
+import bus from "@/plugin/bus";
+// 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: {
TreeMenu,
LocalVedioList,
- FileUpload
+ FileUpload,
},
props: {
appName: {
type: String,
- default: "Video"
+ default: "Video",
},
edit: {
type: Boolean,
- default: false
+ default: false,
},
height: {
type: Number,
- default: 0
- }
+ default: 0,
+ },
},
computed: {
- showTab () {
+ showTab() {
return true;
},
- showCam () {
- return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin));
+ showCam() {
+ return (
+ this.appName === "Camera" ||
+ this.appName === "Cluster" ||
+ (this.appName === "Search" &&
+ (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin))
+ );
},
- showCluster () {
+ showCluster() {
return this.appName === "Cluster";
},
// 鏁版嵁鏍堥厤缃繀椤绘樉绀恒�� 妫�绱㈤�氳繃鏉冮檺鎺у埗鏄剧ず, 鏈畨瑁呮暟鎹爤涔熶笉鏄剧ず
- showDataStack () {
+ showDataStack() {
if (this.appName === "DataStack") {
return true;
}
@@ -364,10 +407,10 @@
return false;
},
- showLock () {
+ showLock() {
return this.edit;
},
- openeds () {
+ openeds() {
let arry = [];
for (let i = 0; i < this.TreeDataPool.openeds.length; i++) {
if (this.TreeDataPool.openeds[i]) {
@@ -378,7 +421,7 @@
}
return arry;
},
- isAdmin () {
+ isAdmin() {
if (
sessionStorage.getItem("userInfo") &&
sessionStorage.getItem("userInfo") !== ""
@@ -387,119 +430,99 @@
return loginName === "superadmin" || loginName === "basic";
}
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 || "鐢ㄦ埛鍚�",
+ loginName:
+ JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�",
searchTypeOptions: [
{
value: 0,
- label: "鍏ㄩ儴鎽勫儚鏈�"
+ label: "鍏ㄩ儴鎽勫儚鏈�",
},
{
value: 1,
- label: "鍒嗘瀽鎽勫儚鏈�"
+ label: "鍒嗘瀽鎽勫儚鏈�",
},
{
value: 2,
- label: "鐩戞帶鎽勫儚鏈�"
+ label: "鐩戞帶鎽勫儚鏈�",
},
{
value: 3,
- label: "鑱斿姩鎽勫儚鏈�"
- }
- ],
- searchTypeLocalVideo: [
- {
- value: 0,
- label: "鍏ㄩ儴"
+ label: "鑱斿姩鎽勫儚鏈�",
},
- {
- value: 1,
- label: "澶勭悊瀹屾垚"
- },
- {
- value: 2,
- label: "澶勭悊涓�"
- },
- {
- value: 3,
- label: "鏈厤瑙勫垯"
- },
- {
- value: 4,
- label: "鏈紑鍚�"
- }
],
timeout: null,
fileUploadBox: false,
loadingGBTree: false,
importAreaId: "",
- menuLoading: false
+ menuLoading: false,
+ clusterName: "",
};
},
- created () {
- console.log(this.appName)
- console.log(this.showCam)
+ created() {
+ console.log("---------");
if (this.showCam) {
- this.TreeDataPool.treeActiveName = "camera"
+ this.TreeDataPool.treeActiveName = "camera";
this.TreeDataPool.fetchTreeData();
-
} else {
- this.TreeDataPool.treeActiveName = "dataStack"
+ this.TreeDataPool.treeActiveName = "dataStack";
this.DataStackPool.fetchFiles();
-
}
if (this.showCluster) {
- this.TreeDataPool.treeActiveName = "cluster"
+ this.TreeDataPool.treeActiveName = "cluster";
this.TreeDataPool.fetchClusterTree();
+ findCluster().then((res) => {
+ if (res.success) {
+ this.clusterName = res.data.clusterName;
+ }
+ });
}
},
methods: {
- searchAreaData () {
+ searchAreaData() {
this.TreeDataPool.fetchTreeData();
},
- searchDataStack () {
+ searchDataStack() {
this.DataStackPool.fetchFiles();
},
- searchClusterData () {
+ searchClusterData() {
this.TreeDataPool.fetchClusterTree();
},
- lockSwitch () {
+ lockSwitch() {
this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
},
- gbLockSwitch () {
+ 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) {
+ 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;
@@ -513,54 +536,57 @@
this.loadingGBTree = false;
}, 1000 * 60);
},
- querySearchAsync (type) {
+ querySearchAsync(type) {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
if (type === "camera") {
this.TreeDataPool.fetchTreeData();
+ }
+ if (type === "cluster") {
+ this.TreeDataPool.fetchClusterTree();
}
if (type === "dir") {
this.DataStackPool.fetchFiles();
}
}, 500);
},
- handleClick (event) {
- if (event.name == 'dataStack') {
+ handleClick(event) {
+ if (event.name == "dataStack") {
this.DataStackPool.fetchFiles();
this.DataStackPool.clean();
this.TreeDataPool.clean();
}
- this.TreeDataPool.treeActiveName = event.name
- console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName)
+ this.TreeDataPool.treeActiveName = event.name;
+ console.log("褰撳墠婵�娲籲ame锛�", this.TreeDataPool.treeActiveName);
},
- async changeEnable () {
+ async changeEnable() {
if (this.PollData.localVideo === 0) {
this.$notify({
title: "澶辫触",
type: "warning",
- message: "寮�鍚湰鍦版暟鎹棰戝垎鏋愬鐞嗭紝闇�鍏堜负鏈湴鏁版嵁鎵嬪姩璁剧疆绠楀姏璧勬簮锛�"
- })
+ message: "寮�鍚湰鍦版暟鎹棰戝垎鏋愬鐞嗭紝闇�鍏堜负鏈湴鏁版嵁鎵嬪姩璁剧疆绠楀姏璧勬簮锛�",
+ });
return false;
}
let res = await changeEnable({
- enable: this.TreeDataPool.vedioAnaliyseSwitch
- })
+ enable: this.TreeDataPool.vedioAnaliyseSwitch,
+ });
if (res && res.success) {
- console.log(res, '鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�')
+ console.log(res, "鍒囨崲鏈湴鏂囦欢鍒嗘瀽寮�鍏�");
}
},
- getCheckedFiles () {
- let list1 = this.TreeDataPool.localVedioList.filter(i => {
- return i.checkStatus
- })
- return list1
+ 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({
type: "warning",
- message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�"
+ message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�",
});
// this.$notify({
// type:"info",
@@ -569,47 +595,49 @@
return false;
}
let res = await updateStatus({
- ids: this.TreeDataPool.checkedLocalVedio.map(i => {
- return i.id
+ ids: this.TreeDataPool.checkedLocalVedio.map((i) => {
+ return i.id;
}),
- status: status
- })
+ status: status,
+ });
if (res && res.success) {
- console.log(res, '寮�鍚殏鍋滃弬鏁�')
+ console.log(res, "寮�鍚殏鍋滃弬鏁�");
}
},
- async deleteLocalFiles () {
+ async deleteLocalFiles() {
let list1 = this.getCheckedFiles();
- console.log(list1, '宸插嬀閫夌殑瑙嗛')
+ console.log(list1, "宸插嬀閫夌殑瑙嗛");
if (list1.length == 0) {
- return false
+ return false;
}
let res = await deleteLocalFile({
- ids: list1.map(i => { return i.id })
- })
+ ids: list1.map((i) => {
+ return i.id;
+ }),
+ });
if (res && res.success) {
this.$notify({
- type: 'success',
- message: '鍒犻櫎鎴愬姛锛侊紒'
- })
+ type: "success",
+ message: "鍒犻櫎鎴愬姛锛侊紒",
+ });
} else {
this.$notify({
type: "error",
- message: "鍒犻櫎澶辫触锛�"
- })
+ message: "鍒犻櫎澶辫触锛�",
+ });
}
},
- refrash (current, pageSize) {
+ refrash(current, pageSize) {
this.TreeDataPool.localCurrentPage = current;
},
- importCameras (area) {
- this.importAreaId = area
- this.$refs["import-btn"].click()
+ 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) => {
@@ -617,7 +645,7 @@
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
- type: 'binary'
+ type: "binary",
});
for (let sheet in workbook.Sheets) {
@@ -641,40 +669,44 @@
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 + "涓�"
+ 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();
})
- _this.TreeDataPool.fetchTreeData();
- }).catch(e => {
- console.log(e)
- });
-
+ .catch((e) => {
+ console.log(e);
+ });
}
} catch (e) {
- this.menuLoading = false
- this.$message.warning('鏂囦欢绫诲瀷涓嶆纭紒');
+ this.menuLoading = false;
+ this.$message.warning("鏂囦欢绫诲瀷涓嶆纭紒");
}
};
fileReader.readAsBinaryString(_file);
},
- exceed () {
+ exceed() {
this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢");
},
//鍒犻櫎鏂囦欢
- remove () {
-
- },
- newCamera () {
+ remove() {},
+ newCamera() {
return {
latitude: 0,
rtsp: "",
@@ -686,10 +718,10 @@
run_type: -1,
username: "",
password: "",
- sensors: []
- }
- }
- }
+ sensors: [],
+ };
+ },
+ },
};
</script>
@@ -855,15 +887,11 @@
}
.dev-vedio-list {
padding: 0 15px;
- 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;
- }
+ box-sizing: border-box;
+ // height: calc(100vh - 80px);
+ //max-height: 740px;
+ // overflow-x: hidden;
+ overflow: auto;
}
.dev-vedio-list::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
@@ -883,7 +911,7 @@
}
.tree-edit {
- z-index: 1;
+ z-index: 2;
font-size: 16px;
position: absolute;
top: 56px;
@@ -950,7 +978,7 @@
color: #606266;
}
}
-.flex-box{
+.flex-box {
display: flex;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0