From 832896ccaf8ac6a8ca31394e55577f064bc5eacf Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 11:05:48 +0800
Subject: [PATCH] 暂存
---
src/components/treeMenu/index.vue | 921 +++++++++++----------
src/components/giantTree/zTree/ztree.vue | 165 ++-
src/pages/cameraAccess/index/VideoManage.vue | 619 +++++++------
src/components/LeftNav.vue | 273 +++--
src/components/treeMenu/jsTree/treeItem.vue | 578 ++++++------
5 files changed, 1,368 insertions(+), 1,188 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index eb10dfc..2e92b3f 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -6,14 +6,23 @@
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 +41,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 +50,7 @@
>
<i
class="el-icon-search el-input__icon"
- style="color:#DCDFE6"
+ style="color: #dcdfe6"
slot="prefix"
@click="searchAreaData"
></i>
@@ -58,7 +67,11 @@
</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>
@@ -67,20 +80,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>
@@ -99,7 +126,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>
@@ -117,7 +144,7 @@
</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>
@@ -132,8 +159,12 @@
</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 +204,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,16 +213,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 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
@@ -215,7 +249,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
@@ -225,7 +259,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="DataStackPool.searchInput"
placeholder="璇疯緭鍏�"
@@ -236,7 +270,7 @@
>
<i
class="el-icon-search el-input__icon"
- style="color:black"
+ style="color: black"
slot="prefix"
@click="searchDataStack"
></i>
@@ -255,7 +289,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>
@@ -269,10 +307,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>
@@ -298,40 +338,38 @@
show,
changeEnable,
deleteLocalFile,
- updateStatus
+ updateStatus,
} from "@/api/localVedio";
-import {
- createCamera,
-} from "@/api/camera";
+import { createCamera } from "@/api/camera";
-import bus from "@/plugin/bus"
+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 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: {
@@ -339,7 +377,12 @@
return true;
},
showCam() {
- return this.appName === "Camera" || this.appName === 'Cluster' || (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";
@@ -388,59 +431,58 @@
return loginName === "superadmin" || loginName === "basic";
}
return false;
- }
+ },
},
data() {
return {
dataStack: "videoMonitor:dataStack",
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: "鑱斿姩鎽勫儚鏈�"
- }
+ label: "鑱斿姩鎽勫儚鏈�",
+ },
],
timeout: null,
fileUploadBox: false,
loadingGBTree: false,
importAreaId: "",
menuLoading: false,
- clusterName: ''
+ clusterName: "",
};
},
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 => {
+ findCluster().then((res) => {
if (res.success) {
this.clusterName = res.data.clusterName;
}
-
- })
+ });
}
},
methods: {
@@ -464,7 +506,7 @@
},
closeTree() {
this.TreeDataPool.showTreeBox = false;
- bus.$emit('refreshCompareImg')
+ bus.$emit("refreshCompareImg");
},
addNode(event) {
this.$refs.tree.addNode(event, { id: 0 });
@@ -510,42 +552,42 @@
}, 500);
},
handleClick(event) {
- if (event.name == 'dataStack') {
+ 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() {
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
+ let list1 = this.TreeDataPool.localVedioList.filter((i) => {
+ return i.checkStatus;
+ });
+ return list1;
},
async stopVedio(status) {
// let list1 = this.getCheckedFiles();
if (this.TreeDataPool.checkedLocalVedio.length == 0) {
this.$notify({
type: "warning",
- message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�"
+ message: "璇峰厛閫夋嫨闇�瑕佸仠姝㈢殑瑙嗛锛�",
});
// this.$notify({
// type:"info",
@@ -554,34 +596,36 @@
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() {
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: "鍒犻櫎澶辫触锛�",
+ });
}
},
@@ -590,8 +634,8 @@
},
importCameras(area) {
- this.importAreaId = area
- this.$refs["import-btn"].click()
+ this.importAreaId = area;
+ this.$refs["import-btn"].click();
},
async uploadFile(params) {
@@ -602,7 +646,7 @@
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
- type: 'binary'
+ type: "binary",
});
for (let sheet in workbook.Sheets) {
@@ -626,28 +670,34 @@
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);
@@ -656,9 +706,7 @@
this.$message.error("鏈�澶氬彧鑳戒笂浼�1涓獂ls鏂囦欢");
},
//鍒犻櫎鏂囦欢
- remove() {
-
- },
+ remove() {},
newCamera() {
return {
latitude: 0,
@@ -671,10 +719,10 @@
run_type: -1,
username: "",
password: "",
- sensors: []
- }
- }
- }
+ sensors: [],
+ };
+ },
+ },
};
</script>
@@ -845,7 +893,6 @@
//max-height: 740px;
// overflow-x: hidden;
overflow: auto;
-
}
.dev-vedio-list::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue
index a05b203..6ec0d4e 100644
--- a/src/components/giantTree/zTree/ztree.vue
+++ b/src/components/giantTree/zTree/ztree.vue
@@ -41,11 +41,11 @@
showLine: true,
showIcon: true, // default to hide icon
addHoverDom: this.addHoverDom,
- removeHoverDom: this.removeHoverDom
+ removeHoverDom: this.removeHoverDom,
},
check: {
- chkboxType: { "Y": "", "N": "" },
- enable: this.showCheckbox
+ chkboxType: { Y: "", N: "" },
+ enable: this.showCheckbox,
},
callback: {
onAsyncError: (...arg) => {
@@ -84,7 +84,6 @@
},
onMouseUp: (...arg) => {
this.$emit("onMouseUp", ...arg);
-
},
onRemove: (...arg) => {
this.$emit("onRemove", ...arg);
@@ -138,7 +137,7 @@
});
},
immediate: true,
- }
+ },
},
methods: {
addHoverDom(treeid, treeNode) {
@@ -146,102 +145,136 @@
const item = document.getElementById(`${treeNode.tId}_a`);
// 鏂囦欢澶规柊澧炴寜閽�
- if (item && !item.querySelector('.el-icon-circle-plus-outline') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-circle-plus-outline") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-circle-plus-outline');
- btn.classList.add('primary');
+ btn.classList.add("el-icon-circle-plus-outline");
+ btn.classList.add("primary");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onAddNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 鏂囦欢澶瑰垹闄ゆ寜閽�
- if (item && !item.querySelector('.el-icon-remove-outline') && treeNode.isParent && !this.readonly && !treeNode.children && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-remove-outline") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !treeNode.children &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-remove-outline');
- btn.classList.add('danger');
+ btn.classList.add("el-icon-remove-outline");
+ btn.classList.add("danger");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onRemoveNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 鏂囦欢澶圭紪杈戞寜閽�
- if (item && !item.querySelector('.el-icon-edit') && treeNode.isParent && !this.readonly) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-edit") &&
+ treeNode.isParent &&
+ !this.readonly
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-edit');
- btn.classList.add('primary');
+ btn.classList.add("el-icon-edit");
+ btn.classList.add("primary");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onRenameNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 娣诲姞鎽勫儚鏈烘寜閽�
- if (item && !item.querySelector('.iconshishishipin') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".iconshishishipin") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('iconshishishipin');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("iconshishishipin");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onAddDevice", treeNode.id);
- })
+ });
item.appendChild(btn);
}
// 瀵煎叆鎽勫儚鏈烘寜閽�
- if (item && !item.querySelector('.icondaoru') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".icondaoru") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('icondaoru');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("icondaoru");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onImport", treeNode.id);
- })
+ });
item.appendChild(btn);
}
// 鏌ョ湅搴曞浘鎸夐挳
- if (item && !item.querySelector('.icontupian1') && treeNode.type == "camera") {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".icontupian1") &&
+ treeNode.type == "camera"
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('icontupian1');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("icontupian1");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onShowPic", treeNode);
- })
+ });
item.appendChild(btn);
}
@@ -252,38 +285,38 @@
removeHoverDom(treeid, treeNode) {
const item = document.getElementById(`${treeNode.tId}_a`);
if (item) {
- let btn = item.querySelector('.el-icon-circle-plus-outline');
+ let btn = item.querySelector(".el-icon-circle-plus-outline");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-circle-plus-outline'))
+ item.removeChild(item.querySelector(".el-icon-circle-plus-outline"));
}
- btn = item.querySelector('.el-icon-remove-outline');
+ btn = item.querySelector(".el-icon-remove-outline");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-remove-outline'))
+ item.removeChild(item.querySelector(".el-icon-remove-outline"));
}
- btn = item.querySelector('.el-icon-edit');
+ btn = item.querySelector(".el-icon-edit");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-edit'))
+ item.removeChild(item.querySelector(".el-icon-edit"));
}
- btn = item.querySelector('.iconshishishipin');
+ btn = item.querySelector(".iconshishishipin");
if (btn) {
- item.removeChild(item.querySelector('.iconshishishipin'))
+ item.removeChild(item.querySelector(".iconshishishipin"));
}
- btn = item.querySelector('.icondaoru');
+ btn = item.querySelector(".icondaoru");
if (btn) {
- item.removeChild(item.querySelector('.icondaoru'))
+ item.removeChild(item.querySelector(".icondaoru"));
}
- btn = item.querySelector('.icontupian1');
+ btn = item.querySelector(".icontupian1");
if (btn) {
- item.removeChild(item.querySelector('.icontupian1'))
+ item.removeChild(item.querySelector(".icontupian1"));
}
}
},
- }
+ },
};
</script>
diff --git a/src/components/treeMenu/index.vue b/src/components/treeMenu/index.vue
index 7b0acac..b1ccbab 100644
--- a/src/components/treeMenu/index.vue
+++ b/src/components/treeMenu/index.vue
@@ -1,430 +1,491 @@
-<template>
- <div class="tree-menu" :style="`max-height:${height - 200}px;`">
- <v-jstree
- :data="node"
- :item-events="itemClickEvents"
- :show-checkbox="TreeDataPool.multiple"
- :multiple="TreeDataPool.multiple"
- allow-batch
- collapse
- :draggable="!gb28181"
- @item-click="itemClick"
- @item-toggle="itemToggle"
- @item-drop="dropNode"
- text-field-name="name"
- ref="jstree"
- >
- <template slot-scope="_">
- <div
- style="display: inherit; width:calc(100% + 120px) "
- @mouseover="selectStyle(_)"
- @mouseout="outStyle(_)"
- >
- <i
- :class="_.vm.themeIconClasses"
- role="presentation"
- v-if="!_.model.loading && _.model.type !== '4'"
- ></i>
-
- <!-- 鎽勫儚鏈虹姸鎬佸浘鏍� -->
- <i
- class="iconfont iconjiankongshexiangji"
- style="padding-left:4px;font-size:13px;line-height: 28px;"
- role="presentation"
- v-if="!_.model.loading && _.model.type === '4' && !_.model.isAI"
- ></i>
- <i
- class="iconfont iconfenxishexiangji"
- style="padding-left:4px;color:#3D68E1; font-size:13px;line-height: 28px;"
- role="presentation"
- v-if="!_.model.loading && _.model.isAI"
- ></i>
-
- <!-- 姝ｅ湪澶勭悊鐨勬憚鍍忔満鍚嶇О鏄剧ず涓鸿摑鑹� -->
- <span
- class="tree-name"
- :style="_.model.isRunning ? `color:#3d68e1` : '' "
- >{{ _.model.name }}</span>
-
- <div
- v-if="gb28181"
- v-show="
- hoverNodeId === _.model.id &&
- !TreeDataPool.gbReadonly &&
- '4' !== _.model.type
- "
- class="tree-item-handle"
- >
- <el-tooltip content="缂栬緫鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="editNode($event, _.model, gb28181)">
- <i class="el-icon-edit"></i>
- </button>
- </el-tooltip>
- </div>
-
- <div
- v-else
- v-show="
- hoverNodeId === _.model.id &&
- !TreeDataPool.readonly &&
- '4' !== _.model.type
- "
- class="tree-item-handle"
- >
- <el-tooltip content="娣诲姞鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="addNode($event, _.model)">
- <i class="el-icon-circle-plus-outline"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="鍒犻櫎鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="delNode(_.model)" v-show="!_.model.children" style="color:#f53d3d">
- <i class="el-icon-remove-outline"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="缂栬緫鍖哄煙" placement="bottom" popper-class="atooltip">
- <button @click="editNode($event, _.model, gb28181)">
- <i class="el-icon-edit"></i>
- </button>
- </el-tooltip>
-
- <el-tooltip content="娣诲姞璁惧" placement="bottom" popper-class="atooltip">
- <button @click="addCamera(_.model.id)">
- <span
- class="iconfont iconshishishipin"
- style="font-size:15px; margin-left:3px; position:relative; top:2px;"
- ></span>
- </button>
- </el-tooltip>
-
- <el-tooltip content="瀵煎叆璁惧" placement="bottom" popper-class="atooltip">
- <button @click="importCameras(_.model.id)">
- <span
- class="iconfont icondaoru"
- style="font-size:17px; margin-left:9px; position:relative; top:2px;"
- ></span>
- </button>
- </el-tooltip>
- </div>
- </div>
- </template>
- </v-jstree>
- <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
- <div
- class="dialog-box"
- v-show="showDialog"
- :style="{ left: clientX + 'px', top: clientY + 'px' }"
- >
- <el-card :body-style="{ padding: '10px' }">
- <el-form :model="dialogForm" size="mini" :rules="rules" ref="dialogForm" label-width="70px">
- <el-form-item label="鍚嶇О锛�" prop="name">
- <el-input v-model="dialogForm.text"></el-input>
- </el-form-item>
- <div class="text-center pb-2">
- <el-button size="mini" type="primary" @click="submitForm">淇濆瓨</el-button>
- <el-button size="mini" @click="hideDialogBox">鍙栨秷</el-button>
- </div>
- </el-form>
- </el-card>
- </div>
- </div>
-</template>
-
-<script>
-import VJstree from "./jsTree";
-
-export default {
- name: "TreeMenu",
- components: {
- VJstree
- },
- props: {
- app: {
- type: String,
- default: "Video"
- },
- node: {
- type: Array
- },
- treeName: {
- type: String,
- default: ""
- },
- gb28181: {
- type: Boolean,
- default: false
- },
- height: {
- type: Number,
- default: 0
- }
- },
- data() {
- return {
- hoverNodeId: "",
- itemClickEvents: {
- dblclick: (VNode, item, e) => {
- if (item.type !== "4" || this.app !== "Camera") {
- return;
- }
- // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
- this.TreeDataPool.activeVideoId = item.id;
- let videoArr = this.TreeDataPool.videoArr;
- let nullVideoIndex = "";
-
- if (
- this.TreeDataPool.activeForceChoose &&
- this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
- ) {
- this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
- this.$nextTick(() => {
- this.TreeDataPool.setVideoArr(
- this.TreeDataPool.activeVideoIndex,
- item,
- this
- );
- })
- return;
- }
-
- for (let i = 0; i < videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- videoArr[i] === "" ||
- videoArr[i] === undefined ||
- videoArr[i] === null
- ) {
- nullVideoIndex = i;
- break;
- } else {
- nullVideoIndex = "";
- }
- }
- if (nullVideoIndex === "") {
- this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
- this.$nextTick(() => {
- this.TreeDataPool.setVideoArr(
- this.TreeDataPool.activeVideoIndex,
- item,
- this
- );
- })
- } else {
- // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
- this.$nextTick(() => {
- this.TreeDataPool.setVideoArr(
- this.TreeDataPool.activeVideoIndex,
- item,
- this
- );
- })
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
- }
- // this.TreeDataPool.setVideoArr(videoArr.length - 1, item, this);
- }
- },
- showDialog: false,
- clientX: 0,
- clientY: 0,
- dialogForm: {
- text: ""
- },
- rules: {
- text: [
- { required: true, message: "璇疯緭鍏ヨ妭鐐瑰悕绉�", trigger: "change" },
- { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" }
- ]
- }
- };
- },
- created() {
- // console.log(this.height, '鏍戦珮搴�')
- this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
- ? Number(sessionStorage.activeIndexVideo)
- : this.TreeDataPool.activeVideoIndex;
- },
- watch: {
- "TreeDataPool.treeType": function (newValue) {
- if (newValue !== this.treeName) {
- this.TreeDataPool.cleanTree(this.treeName);
- }
- },
- node: function (newValue) {
- this.$refs.jstree.initializeData(newValue);
- }
- },
- methods: {
- addCamera(node) {
- this.$emit("addDevice", node);
- },
- importCameras(node) {
- this.$emit("import", node);
- },
- addNode(event, node) {
- this.dialogForm = {
- text: "",
- method: "add",
- node: node.id
- };
- this.showDialogBox(event);
- },
- editNode(event, node, isGb) {
- this.dialogForm = {
- text: node.name,
- method: "edit",
- node: node.id,
- alias: node.alias,
- gb28181: isGb
- };
- this.showDialogBox(event);
- },
- delNode(node) {
- this.TreeDataPool.del(node.id);
- },
- selectStyle(item) {
- this.hoverNodeId = item.model.id;
- },
- outStyle(item) {
- this.hoverNodeId = "";
- },
- submitForm() {
- // 鎻愪氦鏂板鎴栬�呯紪杈戝尯鍩熻妭鐐硅〃鍗�
- this.$refs.dialogForm.validate(valid => {
- if (valid) {
- if (this.dialogForm.method == "add") {
- this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
- } else if (this.dialogForm.method == "edit") {
- this.TreeDataPool.update(
- this.dialogForm.text,
- this.dialogForm.node,
- this.gb28181 ? this.dialogForm.text : "",
- this.dialogForm.gb28181
- );
- }
- } else {
- return false;
- }
- });
- this.hideDialogBox();
- },
- hideDialogBox() {
- this.showDialog = false;
- this.dialogForm = { text: "" };
- },
- showDialogBox(event) {
- let { clientX = 0, offsetY = 0 } = event;
- // this.clientX = clientX - 120;
- this.clientX = 50;
- this.clientY = offsetY;
- this.showDialog = true;
- },
- itemClick(node, item, e) {
- console.log('jsTree index.vue', item)
- this.TreeDataPool.selectedNode = item;
- this.TreeDataPool.updateSelectedNodes();
- this.TreeDataPool.treeType = this.treeName;
- },
- itemToggle(node, item, e) {
- if (item.opened) {
- delete this.TreeDataPool.foldNodeList[item.id]
- } else {
- this.TreeDataPool.foldNodeList[item.id] = true
- }
- },
- dropNode(node, item, draggedItem, e) {
- console.log('dropNode', node, item, draggedItem);
- this.TreeDataPool.dropNode(draggedItem.id, item.id)
- }
- }
-};
-</script>
-<style lang="scss" scoped>
-.dialog-box {
- position: absolute;
- width: 220px;
- z-index: 1;
-}
-.dialog-box-bg {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background: rgba(255, 255, 255, 0.6);
-}
-.tree-item-handle {
- display: inline;
- font-size: 16px;
- margin-left: 6px;
- button {
- position: relative;
- color: #3d68e1;
- border: 0px;
- background-color: transparent;
- cursor: pointer;
- outline: none;
- }
- button:hover {
- color: #2249b4;
- }
- // button:hover:after {
- // position: fixed;
- // padding: 5px 10px;
- // background-color: #00000090;
- // border-radius: 0px;
- // color: #fff;
- // content: attr(labelTooltip);
- // font-size: 12px;
- // width: 55px;
- // margin-left: -50px;
- // margin-top: 25px;
- // vertical-align: left;
- // }
-}
-.tree-name {
- font-family: PingFangSC-Medium;
- font-size: 13px;
- color: #222222;
- // max-width: 100px;
- line-height: 27px;
- margin-left: 4px;
- display: inline-block;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- vertical-align: top;
-}
-.tree-menu {
- // max-width: 350px;
- overflow-x: hidden;
- overflow-y: hidden;
- margin-bottom: 4px;
-}
-.tree-menu::-webkit-scrollbar {
- /*婊氬姩鏉℃暣浣撴牱寮�*/
- width: 4px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- height: 4px;
-}
-.tree-menu::-webkit-scrollbar-thumb {
- /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
- border-radius: 5px;
- -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
- background: rgb(202, 201, 201);
-}
-.tree-menu::-webkit-scrollbar-track {
- /*婊氬姩鏉￠噷闈㈣建閬�*/
- -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
- border-radius: 0;
- background: rgb(235, 234, 234);
-}
-.tree-menu::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 0, 0, 0.4);
-}
-.tree-menu:hover {
- overflow-x: visible;
- overflow-y: auto;
- margin-bottom: 0px;
-}
-</style>
+<template>
+ <div class="tree-menu" :style="`max-height:${height - 200}px;`">
+ <v-jstree
+ :data="node"
+ :item-events="itemClickEvents"
+ :show-checkbox="TreeDataPool.multiple"
+ :multiple="TreeDataPool.multiple"
+ allow-batch
+ collapse
+ :draggable="!gb28181"
+ @item-click="itemClick"
+ @item-toggle="itemToggle"
+ @item-drop="dropNode"
+ text-field-name="name"
+ ref="jstree"
+ >
+ <template slot-scope="_">
+ <div
+ style="display: inherit; width: calc(100% + 120px)"
+ @mouseover="selectStyle(_)"
+ @mouseout="outStyle(_)"
+ >
+ <i
+ :class="_.vm.themeIconClasses"
+ role="presentation"
+ v-if="!_.model.loading && _.model.type !== '4'"
+ ></i>
+
+ <!-- 鎽勫儚鏈虹姸鎬佸浘鏍� -->
+ <i
+ class="iconfont iconjiankongshexiangji"
+ style="padding-left: 4px; font-size: 13px; line-height: 28px"
+ role="presentation"
+ v-if="!_.model.loading && _.model.type === '4' && !_.model.isAI"
+ ></i>
+ <i
+ class="iconfont iconfenxishexiangji"
+ style="
+ padding-left: 4px;
+ color: #3d68e1;
+ font-size: 13px;
+ line-height: 28px;
+ "
+ role="presentation"
+ v-if="!_.model.loading && _.model.isAI"
+ ></i>
+
+ <!-- 姝ｅ湪澶勭悊鐨勬憚鍍忔満鍚嶇О鏄剧ず涓鸿摑鑹� -->
+ <span
+ class="tree-name"
+ :style="_.model.isRunning ? `color:#3d68e1` : ''"
+ >{{ _.model.name }}</span
+ >
+
+ <div
+ v-if="gb28181"
+ v-show="
+ hoverNodeId === _.model.id &&
+ !TreeDataPool.gbReadonly &&
+ '4' !== _.model.type
+ "
+ class="tree-item-handle"
+ >
+ <el-tooltip
+ content="缂栬緫鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="editNode($event, _.model, gb28181)">
+ <i class="el-icon-edit"></i>
+ </button>
+ </el-tooltip>
+ </div>
+
+ <div
+ v-else
+ v-show="
+ hoverNodeId === _.model.id &&
+ !TreeDataPool.readonly &&
+ '4' !== _.model.type
+ "
+ class="tree-item-handle"
+ >
+ <el-tooltip
+ content="娣诲姞鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="addNode($event, _.model)">
+ <i class="el-icon-circle-plus-outline"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="鍒犻櫎鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button
+ @click="delNode(_.model)"
+ v-show="!_.model.children"
+ style="color: #f53d3d"
+ >
+ <i class="el-icon-remove-outline"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="缂栬緫鍖哄煙"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="editNode($event, _.model, gb28181)">
+ <i class="el-icon-edit"></i>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="娣诲姞璁惧"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="addCamera(_.model.id)">
+ <span
+ class="iconfont iconshishishipin"
+ style="
+ font-size: 15px;
+ margin-left: 3px;
+ position: relative;
+ top: 2px;
+ "
+ ></span>
+ </button>
+ </el-tooltip>
+
+ <el-tooltip
+ content="瀵煎叆璁惧"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <button @click="importCameras(_.model.id)">
+ <span
+ class="iconfont icondaoru"
+ style="
+ font-size: 17px;
+ margin-left: 9px;
+ position: relative;
+ top: 2px;
+ "
+ ></span>
+ </button>
+ </el-tooltip>
+ </div>
+ </div>
+ </template>
+ </v-jstree>
+ <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
+ <div
+ class="dialog-box"
+ v-show="showDialog"
+ :style="{ left: clientX + 'px', top: clientY + 'px' }"
+ >
+ <el-card :body-style="{ padding: '10px' }">
+ <el-form
+ :model="dialogForm"
+ size="mini"
+ :rules="rules"
+ ref="dialogForm"
+ label-width="70px"
+ >
+ <el-form-item label="鍚嶇О锛�" prop="name">
+ <el-input v-model="dialogForm.text"></el-input>
+ </el-form-item>
+ <div class="text-center pb-2">
+ <el-button size="mini" type="primary" @click="submitForm"
+ >淇濆瓨</el-button
+ >
+ <el-button size="mini" @click="hideDialogBox">鍙栨秷</el-button>
+ </div>
+ </el-form>
+ </el-card>
+ </div>
+ </div>
+</template>
+
+<script>
+import VJstree from "./jsTree";
+
+export default {
+ name: "TreeMenu",
+ components: {
+ VJstree,
+ },
+ props: {
+ app: {
+ type: String,
+ default: "Video",
+ },
+ node: {
+ type: Array,
+ },
+ treeName: {
+ type: String,
+ default: "",
+ },
+ gb28181: {
+ type: Boolean,
+ default: false,
+ },
+ height: {
+ type: Number,
+ default: 0,
+ },
+ },
+ data() {
+ return {
+ hoverNodeId: "",
+ itemClickEvents: {
+ dblclick: (VNode, item, e) => {
+ if (item.type !== "4" || this.app !== "Camera") {
+ return;
+ }
+ // console.log('activeForceChoose', this.TreeDataPool.activeForceChoose)
+ this.TreeDataPool.activeVideoId = item.id;
+ let videoArr = this.TreeDataPool.videoArr;
+ let nullVideoIndex = "";
+
+ if (
+ this.TreeDataPool.activeForceChoose &&
+ this.TreeDataPool.activeVideoIndex !== "" &&
+ this.TreeDataPool.activeVideoIndex <= videoArr.length - 1
+ ) {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ undefined,
+ this
+ );
+ this.$nextTick(() => {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ item,
+ this
+ );
+ });
+ return;
+ }
+
+ for (let i = 0; i < videoArr.length; i++) {
+ // eslint-disable-next-line
+ if (
+ videoArr[i] === "" ||
+ videoArr[i] === undefined ||
+ videoArr[i] === null
+ ) {
+ nullVideoIndex = i;
+ break;
+ } else {
+ nullVideoIndex = "";
+ }
+ }
+ if (nullVideoIndex === "") {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ undefined,
+ this
+ );
+ this.$nextTick(() => {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ item,
+ this
+ );
+ });
+ } else {
+ // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this);
+ this.$nextTick(() => {
+ this.TreeDataPool.setVideoArr(
+ this.TreeDataPool.activeVideoIndex,
+ item,
+ this
+ );
+ });
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex;
+ }
+ // this.TreeDataPool.setVideoArr(videoArr.length - 1, item, this);
+ },
+ },
+ showDialog: false,
+ clientX: 0,
+ clientY: 0,
+ dialogForm: {
+ text: "",
+ },
+ rules: {
+ text: [
+ { required: true, message: "璇疯緭鍏ヨ妭鐐瑰悕绉�", trigger: "change" },
+ { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" },
+ ],
+ },
+ };
+ },
+ created() {
+ console.log("------------");
+ // console.log(this.height, '鏍戦珮搴�')
+ this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
+ ? Number(sessionStorage.activeIndexVideo)
+ : this.TreeDataPool.activeVideoIndex;
+ },
+ watch: {
+ "TreeDataPool.treeType": function (newValue) {
+ if (newValue !== this.treeName) {
+ this.TreeDataPool.cleanTree(this.treeName);
+ }
+ },
+ node: function (newValue) {
+ this.$refs.jstree.initializeData(newValue);
+ },
+ },
+ methods: {
+ addCamera(node) {
+ this.$emit("addDevice", node);
+ },
+ importCameras(node) {
+ this.$emit("import", node);
+ },
+ addNode(event, node) {
+ this.dialogForm = {
+ text: "",
+ method: "add",
+ node: node.id,
+ };
+ this.showDialogBox(event);
+ },
+ editNode(event, node, isGb) {
+ this.dialogForm = {
+ text: node.name,
+ method: "edit",
+ node: node.id,
+ alias: node.alias,
+ gb28181: isGb,
+ };
+ this.showDialogBox(event);
+ },
+ delNode(node) {
+ this.TreeDataPool.del(node.id);
+ },
+ selectStyle(item) {
+ this.hoverNodeId = item.model.id;
+ },
+ outStyle(item) {
+ this.hoverNodeId = "";
+ },
+ submitForm() {
+ // 鎻愪氦鏂板鎴栬�呯紪杈戝尯鍩熻妭鐐硅〃鍗�
+ this.$refs.dialogForm.validate((valid) => {
+ if (valid) {
+ if (this.dialogForm.method == "add") {
+ this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node);
+ } else if (this.dialogForm.method == "edit") {
+ this.TreeDataPool.update(
+ this.dialogForm.text,
+ this.dialogForm.node,
+ this.gb28181 ? this.dialogForm.text : "",
+ this.dialogForm.gb28181
+ );
+ }
+ } else {
+ return false;
+ }
+ });
+ this.hideDialogBox();
+ },
+ hideDialogBox() {
+ this.showDialog = false;
+ this.dialogForm = { text: "" };
+ },
+ showDialogBox(event) {
+ let { clientX = 0, offsetY = 0 } = event;
+ // this.clientX = clientX - 120;
+ this.clientX = 50;
+ this.clientY = offsetY;
+ this.showDialog = true;
+ },
+ itemClick(node, item, e) {
+ console.log("jsTree index.vue", item);
+ this.TreeDataPool.selectedNode = item;
+ this.TreeDataPool.updateSelectedNodes();
+ this.TreeDataPool.treeType = this.treeName;
+ },
+ itemToggle(node, item, e) {
+ if (item.opened) {
+ delete this.TreeDataPool.foldNodeList[item.id];
+ } else {
+ this.TreeDataPool.foldNodeList[item.id] = true;
+ }
+ },
+ dropNode(node, item, draggedItem, e) {
+ console.log("dropNode", node, item, draggedItem);
+ this.TreeDataPool.dropNode(draggedItem.id, item.id);
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+.dialog-box {
+ position: absolute;
+ width: 220px;
+ z-index: 1;
+}
+.dialog-box-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: rgba(255, 255, 255, 0.6);
+}
+.tree-item-handle {
+ display: inline;
+ font-size: 16px;
+ margin-left: 6px;
+ button {
+ position: relative;
+ color: #3d68e1;
+ border: 0px;
+ background-color: transparent;
+ cursor: pointer;
+ outline: none;
+ }
+ button:hover {
+ color: #2249b4;
+ }
+ // button:hover:after {
+ // position: fixed;
+ // padding: 5px 10px;
+ // background-color: #00000090;
+ // border-radius: 0px;
+ // color: #fff;
+ // content: attr(labelTooltip);
+ // font-size: 12px;
+ // width: 55px;
+ // margin-left: -50px;
+ // margin-top: 25px;
+ // vertical-align: left;
+ // }
+}
+.tree-name {
+ font-family: PingFangSC-Medium;
+ font-size: 13px;
+ color: #222222;
+ // max-width: 100px;
+ line-height: 27px;
+ margin-left: 4px;
+ display: inline-block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ vertical-align: top;
+}
+.tree-menu {
+ // max-width: 350px;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ margin-bottom: 4px;
+}
+.tree-menu::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 4px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 4px;
+}
+.tree-menu::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ background: rgb(202, 201, 201);
+}
+.tree-menu::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ -webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
+ border-radius: 0;
+ background: rgb(235, 234, 234);
+}
+.tree-menu::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.4);
+}
+.tree-menu:hover {
+ overflow-x: visible;
+ overflow-y: auto;
+ margin-bottom: 0px;
+}
+</style>
diff --git a/src/components/treeMenu/jsTree/treeItem.vue b/src/components/treeMenu/jsTree/treeItem.vue
index d0c97fa..3ba7d6e 100644
--- a/src/components/treeMenu/jsTree/treeItem.vue
+++ b/src/components/treeMenu/jsTree/treeItem.vue
@@ -1,279 +1,299 @@
-<template>
- <li
- role="treeitem"
- :class="classes"
- :draggable="draggable"
- @dragstart.stop="onItemDragStart($event, _self, _self.model)"
- @dragend.stop.prevent="onItemDragEnd($event, _self, _self.model)"
- @dragover.stop.prevent="isDragEnter = true"
- @dragenter.stop.prevent="isDragEnter = true"
- @dragleave.stop.prevent="isDragEnter = false"
- @drop.stop.prevent="handleItemDrop($event, _self, _self.model)"
- >
- <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow"> </div>
- <i class="tree-icon tree-ocl" role="presentation" @click="handleItemToggle"></i>
- <div :class="anchorClasses" v-on="events">
- <i
- class="tree-icon tree-checkbox"
- role="presentation"
- v-show="isShowCheckBox"
- @click.stop="handleCheckbox($event)"
- ></i>
- <slot :vm="this" :model="model">
- <i :class="themeIconClasses" role="presentation" v-if="!model.loading"></i>
- <span v-html="model[textFieldName]"></span>
- </slot>
- </div>
- <ul role="group" ref="group" class="tree-children" v-if="isFolder" :style="groupStyle">
- <tree-item
- v-for="(child, index) in model[childrenFieldName]"
- :key="index"
- :data="child"
- :text-field-name="textFieldName"
- :value-field-name="valueFieldName"
- :children-field-name="childrenFieldName"
- :item-events="itemEvents"
- :whole-row="wholeRow"
- :show-checkbox="showCheckbox"
- :allow-transition="allowTransition"
- :height="height"
- :parent-item="model[childrenFieldName]"
- :draggable="draggable"
- :drag-over-background-color="dragOverBackgroundColor"
- :on-item-click="onItemClick"
- :on-item-toggle="onItemToggle"
- :on-item-drag-start="onItemDragStart"
- :on-item-drag-end="onItemDragEnd"
- :on-item-drop="onItemDrop"
- :on-checkbox-click="onCheckboxClick"
- :klass="
- index === model[childrenFieldName].length - 1 ? 'tree-last' : ''
- "
- >
- <template slot-scope="_">
- <slot :vm="_.vm" :model="_.model">
- <i :class="_.vm.themeIconClasses" role="presentation" v-if="!model.loading"></i>
- <span v-html="_.model[textFieldName]"></span>
- </slot>
- </template>
- </tree-item>
- </ul>
- </li>
-</template>
-
-<script>
-/* eslint-disable */
-export default {
- name: "TreeItem",
- props: {
- data: { type: Object, required: true },
- textFieldName: { type: String },
- valueFieldName: { type: String },
- childrenFieldName: { type: String },
- itemEvents: { type: Object },
- wholeRow: { type: Boolean, default: false },
- showCheckbox: { type: Boolean, default: false },
- allowTransition: { type: Boolean, default: false },
- height: { type: Number, default: 24 },
- parentItem: { type: Array },
- draggable: { type: Boolean, default: false },
- dragOverBackgroundColor: { type: String },
- onItemClick: {
- type: Function,
- default: () => false
- },
- onItemToggle: {
- type: Function,
- default: () => false
- },
- onItemDragStart: {
- type: Function,
- default: () => false
- },
- onItemDragEnd: {
- type: Function,
- default: () => false
- },
- onItemDrop: {
- type: Function,
- default: () => false
- },
- onCheckboxClick: {
- type: Function,
- default: () => false
- },
- klass: String
- },
- data() {
- return {
- isHover: false,
- isDragEnter: false,
- model: this.data,
- maxHeight: 0,
- events: {}
- };
- },
- watch: {
- isDragEnter(newValue) {
- if (newValue) {
- this.$el.style.backgroundColor = this.dragOverBackgroundColor;
- } else {
- this.$el.style.backgroundColor = "inherit";
- }
- },
- data(newValue) {
- this.model = newValue;
- },
- "model.opened": {
- handler: function(val, oldVal) {
- this.onItemToggle(this, this.model);
- this.handleGroupMaxHeight();
- },
- deep: true
- }
- },
- computed: {
- isShowCheckBox() {
- return this.showCheckbox && (this.isHover || this.model.selected);
- },
- isFolder() {
- return (
- this.model[this.childrenFieldName] &&
- this.model[this.childrenFieldName].length
- );
- },
- classes() {
- return [
- { "tree-node": true },
- { "tree-open": this.model.opened },
- { "tree-closed": !this.model.opened },
- { "tree-leaf": !this.isFolder },
- { "tree-loading": !!this.model.loading },
- { "tree-drag-enter": this.isDragEnter },
- { [this.klass]: !!this.klass }
- ];
- },
- anchorClasses() {
- return [
- { "tree-anchor": true },
- { "tree-disabled": this.model.disabled },
- { "tree-selected": this.model.selected },
- { "tree-hovered": this.isHover }
- ];
- },
- wholeRowClasses() {
- return [
- { "tree-wholerow": true },
- { "tree-wholerow-clicked": this.model.selected },
- { "tree-wholerow-hovered": this.isHover }
- ];
- },
- themeIconClasses() {
- return [
- { "tree-icon": true },
- { "tree-themeicon": true },
- { [this.model.icon]: !!this.model.icon },
- { "tree-themeicon-custom": !!this.model.icon }
- ];
- },
- isWholeRow() {
- if (this.wholeRow) {
- if (
- this.$parent.model === undefined ||
- this.$parent.model.opened === true
- ) {
- return true;
- }
- }
-
- return false;
- },
- groupStyle() {
- return {
- position: this.model.opened ? "" : "relative",
- "max-height": !!this.allowTransition ? this.maxHeight + "px" : "",
- "transition-duration": this.allowTransition
- ? Math.ceil(this.model[this.childrenFieldName].length / 100) * 300 +
- "ms"
- : "",
- "transition-property": !!this.allowTransition ? "max-height" : "",
- display: this.allowTransition
- ? "block"
- : this.model.opened
- ? "block"
- : "none"
- };
- }
- },
- methods: {
- handleItemToggle(e) {
- if (this.isFolder) {
- this.model.opened = !this.model.opened;
- this.onItemToggle(this, this.model);
- }
- },
- handleGroupMaxHeight() {
- if (this.allowTransition) {
- let length = 0;
- let childHeight = 0;
- if (this.model.opened) {
- length = this.$children.length;
- for (let children of this.$children) {
- childHeight += children.maxHeight;
- }
- }
- this.maxHeight = length * this.height + childHeight;
- if (this.$parent.$options._componentTag === "tree-item") {
- this.$parent.handleGroupMaxHeight();
- }
- }
- },
- handleItemClick(e) {
- if (this.model.disabled) return;
- this.model.selected = !this.model.selected;
- this.onItemClick(this, this.model, e);
- },
- handleItemMouseOver() {
- this.isHover = true;
- },
- handleItemMouseOut() {
- this.isHover = false;
- },
- handleItemDrop(e, oriNode, oriItem) {
- this.$el.style.backgroundColor = "inherit";
- this.onItemDrop(e, oriNode, oriItem);
- },
- handleCheckbox(e) {
- if (this.model.disabled) return;
- this.model.selected = !this.model.selected;
- this.onCheckboxClick(this, this.model, e);
- }
- },
- created() {
- const self = this;
- const events = {
- click: this.handleItemClick,
- mouseover: this.handleItemMouseOver,
- mouseout: this.handleItemMouseOut
- };
- for (let itemEvent in this.itemEvents) {
- let itemEventCallback = this.itemEvents[itemEvent];
- if (events.hasOwnProperty(itemEvent)) {
- let eventCallback = events[itemEvent];
- events[itemEvent] = function(event) {
- eventCallback(self, self.model, event);
- itemEventCallback(self, self.model, event);
- };
- } else {
- events[itemEvent] = function(event) {
- itemEventCallback(self, self.model, event);
- };
- }
- }
- this.events = events;
- },
- mounted() {
- this.handleGroupMaxHeight();
- }
-};
-</script>
+<template>
+ <li
+ role="treeitem"
+ :class="classes"
+ :draggable="draggable"
+ @dragstart.stop="onItemDragStart($event, _self, _self.model)"
+ @dragend.stop.prevent="onItemDragEnd($event, _self, _self.model)"
+ @dragover.stop.prevent="isDragEnter = true"
+ @dragenter.stop.prevent="isDragEnter = true"
+ @dragleave.stop.prevent="isDragEnter = false"
+ @drop.stop.prevent="handleItemDrop($event, _self, _self.model)"
+ >
+ <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow">
+
+ </div>
+ <i
+ class="tree-icon tree-ocl"
+ role="presentation"
+ @click="handleItemToggle"
+ ></i>
+ <div :class="anchorClasses" v-on="events">
+ <i
+ class="tree-icon tree-checkbox"
+ role="presentation"
+ v-show="isShowCheckBox"
+ @click.stop="handleCheckbox($event)"
+ ></i>
+ <slot :vm="this" :model="model">
+ <i
+ :class="themeIconClasses"
+ role="presentation"
+ v-if="!model.loading"
+ ></i>
+ <span v-html="model[textFieldName]"></span>
+ </slot>
+ </div>
+ <ul
+ role="group"
+ ref="group"
+ class="tree-children"
+ v-if="isFolder"
+ :style="groupStyle"
+ >
+ <tree-item
+ v-for="(child, index) in model[childrenFieldName]"
+ :key="index"
+ :data="child"
+ :text-field-name="textFieldName"
+ :value-field-name="valueFieldName"
+ :children-field-name="childrenFieldName"
+ :item-events="itemEvents"
+ :whole-row="wholeRow"
+ :show-checkbox="showCheckbox"
+ :allow-transition="allowTransition"
+ :height="height"
+ :parent-item="model[childrenFieldName]"
+ :draggable="draggable"
+ :drag-over-background-color="dragOverBackgroundColor"
+ :on-item-click="onItemClick"
+ :on-item-toggle="onItemToggle"
+ :on-item-drag-start="onItemDragStart"
+ :on-item-drag-end="onItemDragEnd"
+ :on-item-drop="onItemDrop"
+ :on-checkbox-click="onCheckboxClick"
+ :klass="
+ index === model[childrenFieldName].length - 1 ? 'tree-last' : ''
+ "
+ >
+ <template slot-scope="_">
+ <slot :vm="_.vm" :model="_.model">
+ <i
+ :class="_.vm.themeIconClasses"
+ role="presentation"
+ v-if="!model.loading"
+ ></i>
+ <span v-html="_.model[textFieldName]"></span>
+ </slot>
+ </template>
+ </tree-item>
+ </ul>
+ </li>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+ name: "TreeItem",
+ props: {
+ data: { type: Object, required: true },
+ textFieldName: { type: String },
+ valueFieldName: { type: String },
+ childrenFieldName: { type: String },
+ itemEvents: { type: Object },
+ wholeRow: { type: Boolean, default: false },
+ showCheckbox: { type: Boolean, default: false },
+ allowTransition: { type: Boolean, default: false },
+ height: { type: Number, default: 24 },
+ parentItem: { type: Array },
+ draggable: { type: Boolean, default: false },
+ dragOverBackgroundColor: { type: String },
+ onItemClick: {
+ type: Function,
+ default: () => false,
+ },
+ onItemToggle: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDragStart: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDragEnd: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDrop: {
+ type: Function,
+ default: () => false,
+ },
+ onCheckboxClick: {
+ type: Function,
+ default: () => false,
+ },
+ klass: String,
+ },
+ data() {
+ return {
+ isHover: false,
+ isDragEnter: false,
+ model: this.data,
+ maxHeight: 0,
+ events: {},
+ };
+ },
+ watch: {
+ isDragEnter(newValue) {
+ if (newValue) {
+ this.$el.style.backgroundColor = this.dragOverBackgroundColor;
+ } else {
+ this.$el.style.backgroundColor = "inherit";
+ }
+ },
+ data(newValue) {
+ this.model = newValue;
+ },
+ "model.opened": {
+ handler: function (val, oldVal) {
+ this.onItemToggle(this, this.model);
+ this.handleGroupMaxHeight();
+ },
+ deep: true,
+ },
+ },
+ computed: {
+ isShowCheckBox() {
+ return this.showCheckbox && (this.isHover || this.model.selected);
+ },
+ isFolder() {
+ return (
+ this.model[this.childrenFieldName] &&
+ this.model[this.childrenFieldName].length
+ );
+ },
+ classes() {
+ return [
+ { "tree-node": true },
+ { "tree-open": this.model.opened },
+ { "tree-closed": !this.model.opened },
+ { "tree-leaf": !this.isFolder },
+ { "tree-loading": !!this.model.loading },
+ { "tree-drag-enter": this.isDragEnter },
+ { [this.klass]: !!this.klass },
+ ];
+ },
+ anchorClasses() {
+ return [
+ { "tree-anchor": true },
+ { "tree-disabled": this.model.disabled },
+ { "tree-selected": this.model.selected },
+ { "tree-hovered": this.isHover },
+ ];
+ },
+ wholeRowClasses() {
+ return [
+ { "tree-wholerow": true },
+ { "tree-wholerow-clicked": this.model.selected },
+ { "tree-wholerow-hovered": this.isHover },
+ ];
+ },
+ themeIconClasses() {
+ return [
+ { "tree-icon": true },
+ { "tree-themeicon": true },
+ { [this.model.icon]: !!this.model.icon },
+ { "tree-themeicon-custom": !!this.model.icon },
+ ];
+ },
+ isWholeRow() {
+ if (this.wholeRow) {
+ if (
+ this.$parent.model === undefined ||
+ this.$parent.model.opened === true
+ ) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+ groupStyle() {
+ return {
+ position: this.model.opened ? "" : "relative",
+ "max-height": !!this.allowTransition ? this.maxHeight + "px" : "",
+ "transition-duration": this.allowTransition
+ ? Math.ceil(this.model[this.childrenFieldName].length / 100) * 300 +
+ "ms"
+ : "",
+ "transition-property": !!this.allowTransition ? "max-height" : "",
+ display: this.allowTransition
+ ? "block"
+ : this.model.opened
+ ? "block"
+ : "none",
+ };
+ },
+ },
+ methods: {
+ handleItemToggle(e) {
+ if (this.isFolder) {
+ this.model.opened = !this.model.opened;
+ this.onItemToggle(this, this.model);
+ }
+ },
+ handleGroupMaxHeight() {
+ if (this.allowTransition) {
+ let length = 0;
+ let childHeight = 0;
+ if (this.model.opened) {
+ length = this.$children.length;
+ for (let children of this.$children) {
+ childHeight += children.maxHeight;
+ }
+ }
+ this.maxHeight = length * this.height + childHeight;
+ if (this.$parent.$options._componentTag === "tree-item") {
+ this.$parent.handleGroupMaxHeight();
+ }
+ }
+ },
+ handleItemClick(e) {
+ if (this.model.disabled) return;
+ this.model.selected = !this.model.selected;
+ this.onItemClick(this, this.model, e);
+ },
+ handleItemMouseOver() {
+ this.isHover = true;
+ },
+ handleItemMouseOut() {
+ this.isHover = false;
+ },
+ handleItemDrop(e, oriNode, oriItem) {
+ this.$el.style.backgroundColor = "inherit";
+ this.onItemDrop(e, oriNode, oriItem);
+ },
+ handleCheckbox(e) {
+ if (this.model.disabled) return;
+ this.model.selected = !this.model.selected;
+ this.onCheckboxClick(this, this.model, e);
+ },
+ },
+ created() {
+ const self = this;
+ const events = {
+ click: this.handleItemClick,
+ mouseover: this.handleItemMouseOver,
+ mouseout: this.handleItemMouseOut,
+ };
+ for (let itemEvent in this.itemEvents) {
+ let itemEventCallback = this.itemEvents[itemEvent];
+ if (events.hasOwnProperty(itemEvent)) {
+ let eventCallback = events[itemEvent];
+ events[itemEvent] = function (event) {
+ eventCallback(self, self.model, event);
+ itemEventCallback(self, self.model, event);
+ };
+ } else {
+ events[itemEvent] = function (event) {
+ itemEventCallback(self, self.model, event);
+ };
+ }
+ }
+ this.events = events;
+ },
+ mounted() {
+ this.handleGroupMaxHeight();
+ },
+};
+</script>
diff --git a/src/pages/cameraAccess/index/VideoManage.vue b/src/pages/cameraAccess/index/VideoManage.vue
index 217ac51..1e264f4 100644
--- a/src/pages/cameraAccess/index/VideoManage.vue
+++ b/src/pages/cameraAccess/index/VideoManage.vue
@@ -1,300 +1,319 @@
-<template>
- <div class="s-video-manage">
- <el-tabs
- class="video-tab"
- ref="topTab"
- v-model="activeName"
- type="border-card"
- @tab-click="handleClick"
- >
- <el-tab-pane
- :label="firstLabeName"
- name="camera-info"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('cameraAccess:cameraInfo')"
- >
- <camera-info ref="cameraInfo" />
- </el-tab-pane>
- <el-tab-pane
- :label="firstLabeName"
- name="camera-info"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('dataStack:cameraInfo')"
- >
- <data-stack-info ref="dataStackInfo" />
- </el-tab-pane>
- <el-tab-pane
- label="鐙珛鍦烘櫙"
- name="separate-rule"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('cameraAccess:selfRule')"
- >
- <separate-rules ref="sepRule" />
- <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
- </el-tab-pane>
- <el-tab-pane
- label="鐙珛鍦烘櫙"
- name="separate-rule"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('dataStack:selfRule')"
- >
- <separate-rules ref="sepRule" />
- <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
- </el-tab-pane>
- <el-tab-pane
- label="鑱斿姩鍦烘櫙"
- name="linkage-rule"
- v-if="(isShow('cameraAccess:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
- >
- <linkage-rule ref="linkRule" />
- </el-tab-pane>
- </el-tabs>
- </div>
-</template>
-
-<script>
-import CameraInfo from "../components/CameraInfo";
-import DataStackInfo from "../components/DataStackInfo"
-import SeparateRules from "../components/SeparateRules";
-import LinkageRule from "../components/LinkageRule";
-// import fTemplate from "@/components/common/fTemplate";
-// import localSeparate from "@/components/camera/localSeparate";
-
-import bus from "@/plugin/bus";
-//import TreeDataPool from "@/Pool/TreeData";
-
-export default {
- components: {
- CameraInfo,
- DataStackInfo,
- SeparateRules,
- LinkageRule
- },
- data() {
- return {
- activeName: "camera-info",
- buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
- intervalTimer: null
- };
- },
- computed: {
- isAdmin() {
- if (
- sessionStorage.getItem("userInfo") &&
- sessionStorage.getItem("userInfo") !== ""
- ) {
- let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
- return loginName === "superadmin" || loginName === "basic";
- }
-
- return false;
- },
- firstLabeName() {
- return this.TreeDataPool.treeActiveName === "camera" ? "鎽勫儚鏈轰俊鎭�" : "鏁版嵁鏍堜俊鎭�"
- }
- },
- watch: {
- // 鏁版嵁鏍堜笉鏄剧ず鑱斿姩瑙勫垯锛岄槻姝㈠湪閫変腑鑱斿姩瑙勫垯tab涓垏鎹㈠埌鏁版嵁鏍�
- "TreeDataPool.treeActiveName": function (val) {
- if (val === "dataStack" && this.activeName === "linkage-rule") {
- this.activeName = "camera-info";
- }
- },
- "TreeDataPool.selectedNode": function (node) {
- if (this.activeName == "camera-info") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.cameraInfo.selectCamera(node);
- }
- } else if (this.activeName === "separate-rule") {
- this.$refs.sepRule.Camera = {}
- this.$refs.sepRule.initCameraData(node.id);
- }
- },
- "TreeDataPool.selectedNodes": {
- handler(nodes) {
- if (this.activeName == "linkage-rule") {
- this.$refs.linkRule.initCameraData();
- }
- },
- deep: true
- },
- "DataStackPool.selectedDir": {
- handler(node, oldNode) {
- if (this.TreeDataPool.treeActiveName !== 'dataStack') {
- return
- }
- this.$nextTick(() => {
- if (this.activeName == "camera-info") {
- this.$refs.dataStackInfo.selectDir(node);
- } else if (this.activeName == "separate-rule" && node.length !== 0) {
- this.$refs.sepRule.initCameraData(node.id);
- }
- })
- },
- deep: true
- },
-
- },
- created() {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- if (this.isShow('cameraAccess:cameraInfo')) {
- this.activeName = "camera-info"
- } else if (this.isShow('cameraAccess:selfRule')) {
- this.activeName = "separate-rule"
- } else if (this.isShow('cameraAccess:linkRule')) {
- this.activeName = "linkage-rule"
- }
- } else {
- if (this.isShow('dataStack:cameraInfo')) {
- this.activeName = "camera-info"
- } else if (this.isShow('dataStack:selfRule')) {
- this.activeName = "separate-rule"
- }
- }
-
- this.TreeDataPool.readonly = true;
- this.TreeDataPool.gbReadonly = true;
- this.TreeDataPool.multiple = false;
- this.TreeDataPool.selectedNode = "";
- this.selectedNodes = [];
- this.VideoManageData.init();
- },
- beforeDestroy() {
- clearInterval(this.intervalTimer);
- //this.TreeDataPool.treeActiveName = "camera";
- },
- mounted() {
- this.$nextTick(() => {
- bus.$on("addCameraOnTree", node => {
- this.handAddDevice(node);
- });
- bus.$on("addDirOnTree", node => {
- this.handAddDIr(node);
- });
- this.TreeDataPool.clean();
- });
-
- let _this = this;
- _this.PollData.statisticTaskInfo();
- this.intervalTimer = setInterval(() => {
- _this.PollData.statisticTaskInfo();
- }, 10000)
- },
- methods: {
- isShow(authority) {
- return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
- },
- handAddDevice(node) {
- let _this = this;
- setTimeout(() => {
- _this.$refs.cameraInfo.addDevice(node);
- _this.activeName = "camera-info";
- }, 100);
- },
- handAddDIr(node) {
- let _this = this;
- setTimeout(() => {
- _this.$refs.dataStackInfo.addDir(node);
- _this.activeName = "camera-info";
- }, 100);
- },
- handleClick(tab, event) {
- this.TreeDataPool.multiple = tab.name === "linkage-rule";
- if (tab.name === "camera-info") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
- } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
- }
- } else if (tab.name === "separate-rule") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
- } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
- }
- } else if (this.activeName == "linkage-rule") {
- this.$refs.linkRule.initCameraData();
- } else if (this.activeName == "poll-setting") {
- this.$nextTick(() => {
- this.$refs.pullSetting.initLineChart();
- })
- }
- }
- }
-};
-</script>
-<style lang="scss">
-.s-video-manage {
- width: 100%;
- min-width: 1599px;
- height: 100%;
- float: left;
- box-sizing: border-box;
- .el-tabs--border-card {
- box-shadow: none;
- -webkit-box-shadow: none;
- border: none;
- }
- // .s-video-manage-breadcrumb {
- // height: 5%;
- // -webkit-box-sizing: border-box;
- // border: 1px solid #e4e7ed;
- // -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
- // box-shadow: #e4e7ed 0px 0px 9px inset;
- // border-radius: 5px;
- // }
- .el-tabs--border-card {
- height: 100%;
- width: 100%;
- &.video-tab {
- & > .el-tabs__header {
- //position: fixed;
- //position: absolute;
- //top:0;
- //left: 0;
- height: 54px;
- overflow-y: hidden;
- }
- }
- .el-tabs__header {
- .is-active {
- color: #3d68e1 !important;
- }
- .el-tabs__item:not(.is-disabled):hover {
- color: #3d68e1 !important;
- }
- height: 52px;
- border-bottom: none;
- background-color: #f8f9fb;
- .el-tabs__nav-wrap,
- .el-tabs__nav-scroll,
- .el-tabs__nav,
- .el-tabs__item {
- height: calc(100% + 1px);
- }
- .el-tabs__item {
- line-height: 52px;
- width: 144px;
- border-right-color: transparent;
- border-left-color: transparent;
- font-family: PingFangSC-Medium;
- font-size: 14px;
- color: #222222;
- }
- }
- }
- .video-tab > .el-tabs__content {
- width: 100%;
- //margin-top: 52px;
- height: calc(100% - 36px);
- box-sizing: border-box;
- overflow-y: auto;
- padding: 0;
- }
- .video-tab > .el-tabs__content::-webkit-scrollbar {
- /*婊氬姩鏉℃暣浣撴牱寮�*/
- width: 6px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- height: 6px;
- }
- .el-tab-pane {
- width: 100%;
- //height: 100%;
- }
-}
-</style>
+<template>
+ <div class="s-video-manage">
+ <el-tabs
+ class="video-tab"
+ ref="topTab"
+ v-model="activeName"
+ type="border-card"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane
+ :label="firstLabeName"
+ name="camera-info"
+ v-if="
+ this.TreeDataPool.treeActiveName == 'camera' &&
+ isShow('cameraAccess:cameraInfo')
+ "
+ >
+ <camera-info ref="cameraInfo" />
+ </el-tab-pane>
+ <el-tab-pane
+ :label="firstLabeName"
+ name="camera-info"
+ v-if="
+ this.TreeDataPool.treeActiveName == 'dataStack' &&
+ isShow('dataStack:cameraInfo')
+ "
+ >
+ <data-stack-info ref="dataStackInfo" />
+ </el-tab-pane>
+ <el-tab-pane
+ label="鐙珛鍦烘櫙"
+ name="separate-rule"
+ v-if="
+ this.TreeDataPool.treeActiveName == 'camera' &&
+ isShow('cameraAccess:selfRule')
+ "
+ >
+ <separate-rules ref="sepRule" />
+ <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
+ </el-tab-pane>
+ <el-tab-pane
+ label="鐙珛鍦烘櫙"
+ name="separate-rule"
+ v-if="
+ this.TreeDataPool.treeActiveName == 'dataStack' &&
+ isShow('dataStack:selfRule')
+ "
+ >
+ <separate-rules ref="sepRule" />
+ <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
+ </el-tab-pane>
+ <el-tab-pane
+ label="鑱斿姩鍦烘櫙"
+ name="linkage-rule"
+ v-if="
+ isShow('cameraAccess:linkRule') &&
+ this.TreeDataPool.treeActiveName == 'camera'
+ "
+ >
+ <linkage-rule ref="linkRule" />
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+</template>
+
+<script>
+import CameraInfo from "../components/CameraInfo";
+import DataStackInfo from "../components/DataStackInfo";
+import SeparateRules from "../components/SeparateRules";
+import LinkageRule from "../components/LinkageRule";
+// import fTemplate from "@/components/common/fTemplate";
+// import localSeparate from "@/components/camera/localSeparate";
+
+import bus from "@/plugin/bus";
+//import TreeDataPool from "@/Pool/TreeData";
+
+export default {
+ components: {
+ CameraInfo,
+ DataStackInfo,
+ SeparateRules,
+ LinkageRule,
+ },
+ data() {
+ return {
+ activeName: "camera-info",
+ buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
+ intervalTimer: null,
+ };
+ },
+ computed: {
+ isAdmin() {
+ if (
+ sessionStorage.getItem("userInfo") &&
+ sessionStorage.getItem("userInfo") !== ""
+ ) {
+ let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
+ return loginName === "superadmin" || loginName === "basic";
+ }
+
+ return false;
+ },
+ firstLabeName() {
+ return this.TreeDataPool.treeActiveName === "camera"
+ ? "鎽勫儚鏈轰俊鎭�"
+ : "鏁版嵁鏍堜俊鎭�";
+ },
+ },
+ watch: {
+ // 鏁版嵁鏍堜笉鏄剧ず鑱斿姩瑙勫垯锛岄槻姝㈠湪閫変腑鑱斿姩瑙勫垯tab涓垏鎹㈠埌鏁版嵁鏍�
+ "TreeDataPool.treeActiveName": function (val) {
+ if (val === "dataStack" && this.activeName === "linkage-rule") {
+ this.activeName = "camera-info";
+ }
+ },
+ "TreeDataPool.selectedNode": function (node) {
+ if (this.activeName == "camera-info") {
+ if (this.TreeDataPool.treeActiveName == "camera") {
+ this.$refs.cameraInfo.selectCamera(node);
+ }
+ } else if (this.activeName === "separate-rule") {
+ this.$refs.sepRule.Camera = {};
+ this.$refs.sepRule.initCameraData(node.id);
+ }
+ },
+ "TreeDataPool.selectedNodes": {
+ handler(nodes) {
+ if (this.activeName == "linkage-rule") {
+ this.$refs.linkRule.initCameraData();
+ }
+ },
+ deep: true,
+ },
+ "DataStackPool.selectedDir": {
+ handler(node, oldNode) {
+ if (this.TreeDataPool.treeActiveName !== "dataStack") {
+ return;
+ }
+ this.$nextTick(() => {
+ if (this.activeName == "camera-info") {
+ this.$refs.dataStackInfo.selectDir(node);
+ } else if (this.activeName == "separate-rule" && node.length !== 0) {
+ this.$refs.sepRule.initCameraData(node.id);
+ }
+ });
+ },
+ deep: true,
+ },
+ },
+ created() {
+ if (this.TreeDataPool.treeActiveName == "camera") {
+ if (this.isShow("cameraAccess:cameraInfo")) {
+ this.activeName = "camera-info";
+ } else if (this.isShow("cameraAccess:selfRule")) {
+ this.activeName = "separate-rule";
+ } else if (this.isShow("cameraAccess:linkRule")) {
+ this.activeName = "linkage-rule";
+ }
+ } else {
+ if (this.isShow("dataStack:cameraInfo")) {
+ this.activeName = "camera-info";
+ } else if (this.isShow("dataStack:selfRule")) {
+ this.activeName = "separate-rule";
+ }
+ }
+
+ this.TreeDataPool.readonly = true;
+ this.TreeDataPool.gbReadonly = true;
+ this.TreeDataPool.multiple = false;
+ this.TreeDataPool.selectedNode = "";
+ this.selectedNodes = [];
+ this.VideoManageData.init();
+ },
+ beforeDestroy() {
+ clearInterval(this.intervalTimer);
+ //this.TreeDataPool.treeActiveName = "camera";
+ },
+ mounted() {
+ this.$nextTick(() => {
+ bus.$on("addCameraOnTree", (node) => {
+ this.handAddDevice(node);
+ });
+ bus.$on("addDirOnTree", (node) => {
+ this.handAddDIr(node);
+ });
+ this.TreeDataPool.clean();
+ });
+
+ let _this = this;
+ _this.PollData.statisticTaskInfo();
+ this.intervalTimer = setInterval(() => {
+ _this.PollData.statisticTaskInfo();
+ }, 10000);
+ },
+ methods: {
+ isShow(authority) {
+ return (
+ this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
+ );
+ },
+ handAddDevice(node) {
+ let _this = this;
+ setTimeout(() => {
+ _this.$refs.cameraInfo.addDevice(node);
+ _this.activeName = "camera-info";
+ }, 100);
+ },
+ handAddDIr(node) {
+ let _this = this;
+ setTimeout(() => {
+ _this.$refs.dataStackInfo.addDir(node);
+ _this.activeName = "camera-info";
+ }, 100);
+ },
+ handleClick(tab, event) {
+ console.log(this.TreeDataPool);
+ this.TreeDataPool.multiple = tab.name === "linkage-rule";
+ if (tab.name === "camera-info") {
+ if (this.TreeDataPool.treeActiveName == "camera") {
+ this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
+ } else if (this.TreeDataPool.treeActiveName == "dataStack") {
+ this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
+ }
+ } else if (tab.name === "separate-rule") {
+ if (this.TreeDataPool.treeActiveName == "camera") {
+ this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
+ } else if (this.TreeDataPool.treeActiveName == "dataStack") {
+ this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
+ }
+ } else if (this.activeName == "linkage-rule") {
+ this.$refs.linkRule.initCameraData();
+ } else if (this.activeName == "poll-setting") {
+ this.$nextTick(() => {
+ this.$refs.pullSetting.initLineChart();
+ });
+ }
+ },
+ },
+};
+</script>
+<style lang="scss">
+.s-video-manage {
+ width: 100%;
+ min-width: 1599px;
+ height: 100%;
+ float: left;
+ box-sizing: border-box;
+ .el-tabs--border-card {
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ border: none;
+ }
+ // .s-video-manage-breadcrumb {
+ // height: 5%;
+ // -webkit-box-sizing: border-box;
+ // border: 1px solid #e4e7ed;
+ // -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
+ // box-shadow: #e4e7ed 0px 0px 9px inset;
+ // border-radius: 5px;
+ // }
+ .el-tabs--border-card {
+ height: 100%;
+ width: 100%;
+ &.video-tab {
+ & > .el-tabs__header {
+ //position: fixed;
+ //position: absolute;
+ //top:0;
+ //left: 0;
+ height: 54px;
+ overflow-y: hidden;
+ }
+ }
+ .el-tabs__header {
+ .is-active {
+ color: #3d68e1 !important;
+ }
+ .el-tabs__item:not(.is-disabled):hover {
+ color: #3d68e1 !important;
+ }
+ height: 52px;
+ border-bottom: none;
+ background-color: #f8f9fb;
+ .el-tabs__nav-wrap,
+ .el-tabs__nav-scroll,
+ .el-tabs__nav,
+ .el-tabs__item {
+ height: calc(100% + 1px);
+ }
+ .el-tabs__item {
+ line-height: 52px;
+ width: 144px;
+ border-right-color: transparent;
+ border-left-color: transparent;
+ font-family: PingFangSC-Medium;
+ font-size: 14px;
+ color: #222222;
+ }
+ }
+ }
+ .video-tab > .el-tabs__content {
+ width: 100%;
+ //margin-top: 52px;
+ height: calc(100% - 36px);
+ box-sizing: border-box;
+ overflow-y: auto;
+ padding: 0;
+ }
+ .video-tab > .el-tabs__content::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 6px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 6px;
+ }
+ .el-tab-pane {
+ width: 100%;
+ //height: 100%;
+ }
+}
+</style>
--
Gitblit v1.8.0