<template>
|
<div class="TreeArea">
|
<div class="refresh">
|
<span v-if="nodeList && nodeList.length > 0">配置规则</span>
|
<el-switch
|
v-model="ruleType"
|
active-color="#0065FF"
|
inactive-color="#ED7E2F"
|
:width="52"
|
v-if="nodeList && nodeList.length > 0"
|
>
|
</el-switch>
|
<span
|
class="des1"
|
@click="ruleType = false"
|
v-if="ruleType && nodeList && nodeList.length > 0"
|
>自动</span
|
>
|
<span
|
class="des2"
|
@click="ruleType = true"
|
v-if="!ruleType && nodeList && nodeList.length > 0"
|
>手动</span
|
>
|
<div class="button" @click="updateCamerasFromVideosvr">刷新</div>
|
单台设备最大支持配置500路摄像机，集群最大支持配置路数=集群内设备总量*500
|
</div>
|
|
<div class="tree-container">
|
<div class="tree-box">
|
<div class="camera-title">
|
<b>国标摄像机</b>
|
</div>
|
<tree-menu
|
ref="ztree"
|
app="gb28181"
|
treeName="localTree"
|
clickType="multiple"
|
:node="TreeDataPool.treeData"
|
:height="600"
|
:setting="treeSettings"
|
:showDevArea="!ruleType"
|
:nodeList="nodeList"
|
@itemChecked="onItemCheck"
|
@saveTree="tempSaveTree"
|
search
|
style="width: 450px; min-height: 600px"
|
/>
|
</div>
|
|
<div class="tree-box">
|
<div class="camera-title">
|
<b>已选摄像机</b>
|
<span class="des"
|
>(最多勾选<span class="number">500</span>路摄像机)</span
|
>
|
</div>
|
<div class="select-tree-menu" :style="`max-height:${600}px;`">
|
<z-tree
|
:nodes="dstTreeData"
|
:show-checkbox="false"
|
:gb28181="true"
|
search
|
/>
|
</div>
|
</div>
|
|
<div class="base-image" v-loading="TreeDataPool.baseImageLoading">
|
<span class="base-title">{{
|
TreeDataPool.cameraNameForBaseImage
|
}}</span>
|
<div
|
class="camera-image"
|
v-show="TreeDataPool.cameraNameForBaseImage.length"
|
>
|
<img
|
:src="
|
'data:image/png;base64,' + TreeDataPool.gb28181CameraBaseImage
|
"
|
width="450px"
|
alt
|
/>
|
</div>
|
</div>
|
</div>
|
|
<div class="btnArea">
|
<div class="button cancel" @click="$emit('close')">取消</div>
|
<div class="button submit" @click="saveChecked">保存</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveGb28181CamTree, saveTree } from "@/api/Gb28181";
|
import TreeMenu from "@/components/giantTree/index";
|
import ZTree from "@/components/giantTree/zTree/ztree";
|
|
export default {
|
components: {
|
TreeMenu,
|
ZTree,
|
},
|
props: {
|
id: {},
|
nodeList: {},
|
},
|
data() {
|
return {
|
treeSettings: {
|
check: {
|
enable: true,
|
},
|
},
|
treeSettingsSelect: {
|
check: {
|
enable: false,
|
},
|
},
|
dstTreeData: [],
|
loading: null,
|
ruleType: true,
|
allTreeData: {},
|
};
|
},
|
created() {
|
this.TreeDataPool.clusterId = this.id.clusterId ? this.id.clusterId : "";
|
this.TreeDataPool.devId = this.id.devId ? this.id.devId : "";
|
},
|
mounted() {
|
this.TreeDataPool.multiple = true;
|
// 记录目录是否折叠
|
let foldList = localStorage.getItem("ztree_fold_list");
|
if (foldList) {
|
this.TreeDataPool.foldNodeList = JSON.parse(foldList);
|
}
|
this.getCamerasFromVideosvr();
|
},
|
methods: {
|
async updateCamerasFromVideosvr() {
|
this.loading = true;
|
await this.TreeDataPool.fetchVideosvrCameras(true);
|
this.loading = false;
|
},
|
async getCamerasFromVideosvr() {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
await this.TreeDataPool.fetchVideosvrCameras(false);
|
this.dstTreeData = this.TreeDataPool.newTreeByChecked(
|
this.TreeDataPool.treeData
|
);
|
this.loading.close();
|
},
|
onItemCheck() {
|
console.log(this.TreeDataPool.activeTreeData);
|
this.dstTreeData = this.TreeDataPool.newTreeByChecked(
|
this.TreeDataPool.activeTreeData
|
);
|
},
|
tempSaveTree(tab) {
|
console.log(1212);
|
console.log(tab);
|
this.allTreeData[tab.devId] = this.TreeDataPool.newTreeByChecked(
|
this.TreeDataPool.activeTreeData
|
);
|
},
|
saveChecked() {
|
localStorage.setItem(
|
"ztree_fold_list",
|
JSON.stringify(this.TreeDataPool.foldNodeList)
|
);
|
|
if (this.TreeDataPool.gb28181CheckedCount > 500) {
|
this.$message({
|
type: "warning",
|
message: "最多仅支持选择500路摄像机. 请重新选择",
|
});
|
|
return;
|
}
|
|
this.loading = true;
|
|
let treeData = this.TreeDataPool.newTreeByChecked(
|
this.TreeDataPool.activeTreeData
|
);
|
|
if (this.ruleType) {
|
saveGb28181CamTree({
|
clusterId: this.id.clusterId ? this.id.clusterId : "",
|
devId: this.id.devId ? this.id.devId : "",
|
checkedMenus: treeData,
|
}).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "保存成功",
|
});
|
}
|
this.loading = false;
|
});
|
} else {
|
let tab = this.$refs["ztree"].activeTabObj;
|
this.allTreeData[tab.devId] = treeData;
|
let params = [];
|
for (const key in this.allTreeData) {
|
params.push({
|
devId: key,
|
checkedMenus: this.allTreeData[key],
|
});
|
}
|
|
saveTree({
|
list: params,
|
}).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
message: "保存成功",
|
});
|
}
|
this.loading = false;
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.TreeArea {
|
position: relative;
|
height: 780px;
|
.refresh {
|
margin-top: 32px;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
color: #666666;
|
position: relative;
|
|
span {
|
font-size: 14px;
|
}
|
|
.el-switch {
|
margin-left: 16px;
|
margin-right: 32px;
|
}
|
|
.des1 {
|
top: 7px;
|
left: 78px;
|
position: absolute;
|
font-size: 12px;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.des2 {
|
top: 7px;
|
left: 92px;
|
position: absolute;
|
font-size: 12px;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.button {
|
margin-right: 10px;
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #fff;
|
background-color: #0065ff;
|
font-size: 14px;
|
}
|
}
|
|
.tree-container {
|
display: flex;
|
.tree-box {
|
width: 450px;
|
margin: 5px 20px 0px 0px;
|
border: 1px solid #c0c5cc;
|
|
.camera-title {
|
text-align: left;
|
padding: 0px 10px;
|
margin: 0px 0px;
|
height: 40px;
|
background-color: #f0f5fa;
|
line-height: 40px;
|
font-size: 14px;
|
font-weight: 700;
|
border-bottom: 1px solid #c0c5cc;
|
|
.des {
|
margin-left: 10px;
|
color: #666666;
|
font-size: 12px;
|
}
|
|
.number {
|
color: #0065ff;
|
}
|
}
|
}
|
|
.base-image {
|
width: 450px;
|
height: 300px;
|
|
.base-title {
|
text-align: left;
|
font-size: 14px;
|
}
|
|
.camera-image {
|
margin-top: 10px;
|
background-color: black;
|
height: 254px;
|
}
|
}
|
.select-tree-menu {
|
// max-width: 350px;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
margin-bottom: 4px;
|
}
|
.select-tree-menu::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
}
|
.select-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);
|
}
|
.select-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);
|
}
|
.select-tree-menu::-webkit-scrollbar-thumb:hover {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
.select-tree-menu:hover {
|
overflow-x: visible;
|
overflow-y: auto;
|
margin-bottom: 0px;
|
}
|
}
|
|
.btnArea {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20px 0;
|
border-top: 1px solid #e9ebee;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
|
.cancel {
|
margin-right: 10px;
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #fff;
|
background-color: #0065ff;
|
}
|
}
|
}
|
</style>
|
