<template>
|
<transition name="slideLeft">
|
<div
|
class="dev-left-tree-box"
|
:style="`height:${height}px;`"
|
style="animation-duration: 0.7s;display: inline-block;"
|
>
|
<el-menu
|
:default-openeds="openeds"
|
background-color="#fff"
|
text-color="#303133"
|
active-text-color="#409EFF"
|
style="height: 100%;width:315px"
|
class="el-menu-vertical-demo"
|
@open="menuOpen"
|
@close="menuClose"
|
@select="clickMenu"
|
>
|
<li class="navTopSelect">
|
<el-select
|
v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'"
|
v-model="DeviceTreeData.searchCamType"
|
placeholder="请选择"
|
style="width: 134px;height: 34px;"
|
@change="searchAreaData"
|
>
|
<el-option
|
v-for="item in searchTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
<span style="display: inline-block;padding: 0px 3px;"></span>
|
<el-input v-model="DeviceTreeData.searchInput" placeholder="请输入" @input="querySearchAsync"
|
:style="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage' ? 'width: 103px;':'width:78%'">
|
<i
|
class="el-icon-search el-input__icon"
|
style="color:black"
|
slot="prefix"
|
@click="searchAreaData"
|
></i>
|
</el-input>
|
<div class="dev-tree-close">
|
<i
|
class="el-icon-s-fold"
|
style="color: #3D68E1;line-height: 22px;font-size: 27px;"
|
@click="closeTree"
|
></i>
|
</div>
|
</li>
|
|
<!-- 添加区域图标 -->
|
<!-- <div class="dev-tree-edit dev-area-add" v-show="!DeviceTreeData.readonly">
|
<el-tooltip effect="dark" content="添加区域" placement="bottom" popper-class="atooltip">
|
<button @click="addNode($event)">
|
<i class="el-icon-circle-plus-outline"></i>
|
</button>
|
</el-tooltip>
|
</div> -->
|
|
<!-- 添加设备图标 -->
|
<!-- <div class="dev-tree-edit dev-camera-add" v-show="!DeviceTreeData.readonly">
|
<el-tooltip effect="dark" content="添加设备" placement="bottom" popper-class="atooltip">
|
<button @click="addCamera('0')">
|
<i class="el-icon-video-camera"></i>
|
</button>
|
</el-tooltip>
|
</div> -->
|
|
<!-- 树操作锁 -->
|
<div class="dev-tree-edit dev-tree-lock" v-show="showLock && (isShow('device:manage:tree:edit') || isShow('device:map:editTree') )">
|
<button @click="lockSwitch">
|
<i v-if="DeviceTreeData.readonly" class="el-icon-lock"></i>
|
<i v-else class="el-icon-unlock"></i>
|
</button>
|
</div>
|
|
<!-- 主菜单 -->
|
<el-submenu index="100001" v-if="DeviceTreeData.activeTab === 'deviceMap'">
|
<template slot="title">
|
<i class="iconfont iconshexiangjix"></i>
|
<b class="dev-tree-font">摄像机</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
ref="tree"
|
:treeName="'localTree'"
|
:node="DeviceTreeData.treeData"
|
@addDevice="addCamera"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
<div v-if="DeviceTreeData.activeTab !== 'deviceMap'">
|
<div v-for="item in DeviceTreeData.deviceTreeList" :key="item.id">
|
<el-submenu :index="item.id">
|
<template slot="title">
|
<i class="iconfont iconshexiangjix"></i>
|
<b class="dev-tree-font">{{item.name}}</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
:ref="item.id"
|
:treeName="'localTree'"
|
:node="item.children"
|
@addDevice="addCamera($event,item.id)"
|
@itemClick="itemClick($event,item.id)"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
</div>
|
</div>
|
|
<!-- GB28181 -->
|
<el-submenu index="100002" v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<template slot="title">
|
<i class="iconfont iconGBx"></i>
|
<b class="dev-tree-font">GB28181</b>
|
</template>
|
|
<!-- 国标刷新图标 -->
|
<div class="dev-tree-edit dev-gb-refresh" v-show="!DeviceTreeData.gbReadonly">
|
<el-tooltip effect="dark" content="刷新" placement="bottom" popper-class="atooltip">
|
<button @click="refreshGB">
|
<i class="el-icon-refresh" style="font-size:16px"></i>
|
</button>
|
</el-tooltip>
|
</div>
|
<div class="dev-tree-edit dev-gb-lock" v-show="showLock && (isShow('device:manage:tree:edit') || isShow('device:map:editTree') )">
|
<button @click="gbLockSwitch">
|
<i v-if="DeviceTreeData.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">
|
<tree-menu
|
ref="gb28182tree"
|
:treeName="'gb28182Tree'"
|
:node="DeviceTreeData.gb28181Data"
|
gb28181
|
@addDevice="addCamera"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
|
<!-- 监控摄像机 -->
|
<div v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<div v-for="item in DeviceTreeData.videoTreeList" :key="item.id">
|
<el-submenu :index="item.id" v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<template slot="title">
|
<i class="iconfont iconshexiangjix"></i>
|
<b class="dev-tree-font">{{item.name}}</b>
|
</template>
|
|
<!-- 显示锁 -->
|
<div class="dev-tree-edit dev-gb-lock" v-show="showLock && (isShow('device:manage:tree:edit') || isShow('device:map:editTree') )">
|
<button @click="gbLockSwitch">
|
<i v-if="DeviceTreeData.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">
|
<tree-menu
|
ref="videoTree"
|
:treeName="'videoTree'"
|
:node="item.children"
|
@addDevice="addCamera($event,item.id)"
|
@itemClick="itemClick($event,item.id)"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
</div>
|
</div>
|
|
<!-- 管理平台 -->
|
<div v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<div v-for="item in DeviceTreeData.platformTreeList" :key="item.id">
|
<el-submenu :index="item.id">
|
<template slot="title">
|
<i class="iconfont iconguanlipingtai1" style="font-size:18px"></i>
|
<b class="dev-tree-font">{{item.name}}</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
:ref="item.id"
|
:treeName="'platformTree'"
|
:node="item.children"
|
@addDevice="addCamera($event,item.id)"
|
@itemClick="itemClick($event,item.id)"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
</div>
|
</div>
|
|
<!-- 存储设备 -->
|
<div v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<div v-for="item in DeviceTreeData.storeTreeList" :key="item.id">
|
<el-submenu :index="item.id">
|
<template slot="title">
|
<i class="iconfont iconcunchushebei" style="font-size:18px"></i>
|
<b class="dev-tree-font">{{item.name}}</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
:ref="item.id"
|
:treeName="'storeTree'"
|
:node="item.children"
|
@addDevice="addCamera($event,item.id)"
|
@itemClick="itemClick($event,item.id)"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
</div>
|
</div>
|
|
<!-- 进出入设备 -->
|
<div v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<div v-for="item in DeviceTreeData.padTreeList" :key="item.id">
|
<el-submenu :index="item.id">
|
<template slot="title">
|
<i class="iconfont iconjinchurushebei" style="font-size:18px"></i>
|
<b class="dev-tree-font">{{item.name}}</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
:ref="item.id"
|
:treeName="'padTree'"
|
:node="item.children"
|
@addDevice="addCamera($event,item.id)"
|
@itemClick="itemClick($event,item.id)"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
</div>
|
</div>
|
|
<!-- <div v-if="DeviceTreeData.activeTab === 'deviceMap'">
|
<el-menu-item index="2" v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<i class="iconfont iconbenditupianx"></i>
|
<b slot="title" class="dev-tree-font">本地图片</b>
|
</el-menu-item>
|
<el-menu-item index="3" v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<i class="iconfont iconbendishipinx"></i>
|
<b slot="title" class="dev-tree-font">本地视频</b>
|
</el-menu-item>
|
<el-menu-item index="4" v-if="DeviceTreeData.activeTab !== 'baseLibrary' && DeviceTreeData.activeTab !== 'taskManage'">
|
<i class="iconfont iconzaixianshipinx"></i>
|
<b slot="title" class="dev-tree-font">在线视频</b>
|
</el-menu-item>
|
</div> -->
|
|
|
</el-menu>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
import TreeMenu from "@/components/deviceTree/index";
|
import bus from "@/main";
|
export default {
|
components: {
|
TreeMenu
|
},
|
props: {
|
height: {
|
type: Number,
|
default: 0
|
}
|
},
|
|
computed: {
|
showLock() {
|
if(this.DeviceTreeData.activeTab === 'deviceManage' || this.DeviceTreeData.activeTab === 'deviceMap'){
|
return true;
|
}else{
|
return false;
|
}
|
},
|
openeds() {
|
let arry = [];
|
for (let i = 0; i < this.DeviceTreeData.openeds.length; i++) {
|
if (this.DeviceTreeData.openeds[i]) {
|
arry.push(this.DeviceTreeData.openeds[i]);
|
}
|
}
|
return Array.from(new Set(arry));
|
},
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "basic";
|
}
|
return false;
|
}
|
},
|
data() {
|
return {
|
activeIndexVideo: "",
|
slideLeft: "slideLeft",
|
searchTypeOptions: [
|
{
|
value: 0,
|
label: "全部摄像机"
|
},
|
{
|
value: 1,
|
label: "分析摄像机"
|
},
|
{
|
value: 2,
|
label: "监控摄像机"
|
},
|
{
|
value: 3,
|
label: "联动摄像机"
|
}
|
],
|
timeout: null,
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
};
|
},
|
created() {
|
this.DeviceTreeData.fetchTreeData();
|
},
|
mounted() {
|
this.$nextTick(() => {
|
bus.$on("slideLeft", () => {
|
this.slideLeft = "slideLeft";
|
setTimeout(() => {
|
this.DeviceTreeData.showTreeBox = !this.DeviceTreeData.showTreeBox;
|
}, 200);
|
});
|
});
|
},
|
methods: {
|
isShow(authority) {
|
if (this.isAdmin) {
|
return true;
|
} else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
searchAreaData() {
|
this.DeviceTreeData.fetchTreeData();
|
},
|
lockSwitch() {
|
this.DeviceTreeData.readonly = !this.DeviceTreeData.readonly;
|
},
|
gbLockSwitch() {
|
this.DeviceTreeData.gbReadonly = !this.DeviceTreeData.gbReadonly;
|
},
|
closeTree() {
|
this.DeviceTreeData.showTreeBox = false;
|
},
|
addNode(event) {
|
this.$refs.tree.addNode(event, { id: 0 });
|
},
|
addCamera(node,baseId='-1') {
|
bus.$emit("addCameraOnTree", {node:node,baseId:baseId});
|
},
|
menuOpen(index) {
|
console.log(index,'树目录折叠展开')
|
this.DeviceTreeData.openeds[index] = true;
|
// this.DeviceTreeData.showSystem = true
|
// this.DeviceTreeData.targetServerId = index
|
this.$emit('clickNode',index,"menu")
|
},
|
menuClose(index) {
|
console.log(index,'树目录折叠收起')
|
this.DeviceTreeData.openeds[index] = false;
|
// this.DeviceTreeData.showSystem = true
|
// this.DeviceTreeData.targetServerId = index
|
this.$emit('clickNode',index,"menu")
|
},
|
refreshGB() {
|
this.DeviceTreeData.refreshGB28181();
|
},
|
querySearchAsync() {
|
clearTimeout(this.timeout);
|
this.timeout = setTimeout(() => {
|
this.DeviceTreeData.fetchTreeData();
|
}, 500);
|
},
|
itemClick(node,index){
|
console.log(node,index,'点击某个节点')
|
this.DeviceTreeData.showSystem = false
|
this.DeviceTreeData.targetServerId = node.data.targetServerId
|
if(index === '100001'){
|
if(node.data && node.data.isParent){
|
this.$emit('clickNode',index,'menu')
|
}else{
|
this.$emit('clickNode',index)
|
}
|
}
|
if(index === '100002'){
|
|
}
|
if(index === '100003'){
|
this.$emit('clickNode',index)
|
}
|
if(index === '100004'){
|
this.$emit('clickNode',index)
|
}
|
if(index === '100005'){
|
|
}
|
if(index === '100006'){
|
this.$emit('clickNode',index)
|
}
|
},
|
clickMenu(targetServerId, indexPath){
|
console.log(targetServerId,indexPath,'点击目录')
|
this.DeviceTreeData.showSystem = true
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.dev-left-tree-box {
|
float: left;
|
width: 330px;
|
ul {
|
li {
|
.el-menu-item-group__title {
|
padding: none;
|
}
|
}
|
.el-submenu__title,
|
.el-menu-item {
|
padding-left: 10px !important;
|
color: #222222 !important;
|
font-size: 17px !important;
|
height: 35px;
|
line-height: 35px;
|
.el-submenu__icon-arrow {
|
font-size: 12px !important;
|
padding-right: 2px !important;
|
}
|
i {
|
padding-right: 10px !important;
|
font-size: 24px;
|
color: #666666 !important;
|
}
|
}
|
}
|
.navTopSelect {
|
.el-input__icon {
|
line-height: 34px;
|
}
|
// padding: 24px 0px;
|
padding-top: 24px;
|
padding-bottom: 12px;
|
input:nth-child(1) {
|
height: 34px;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
}
|
input:nth-child(2) {
|
height: 34px;
|
width: 103px;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
}
|
}
|
.isCollapse {
|
font-size: 20px;
|
padding: 0px 5px;
|
}
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
.fontFamily,
|
.el-submenu__title .fontFamily,
|
.el-submenu__title .fontFamily {
|
padding-right: 20px;
|
font-size: 22px;
|
}
|
}
|
|
.el-menu-vertical-demo::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
// background: rgb(202, 201, 201);
|
background: rgb(255, 255, 255);
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
border-radius: 0;
|
background: rgb(255, 255, 255);
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
.el-menu-vertical-demo:hover {
|
overflow-y: visible;
|
overflow-x: hidden;
|
}
|
|
.tree-anchor .fontFamily {
|
font-size: 16px !important;
|
color: #2074ef;
|
padding-right: 0px !important;
|
}
|
.el-submenu__title,
|
.el-menu-item {
|
text-align: left;
|
}
|
|
.item-group {
|
margin-left: 33px;
|
margin-top: -12px;
|
}
|
}
|
.dev-tree-close {
|
width: 10%;
|
margin-left: 10px;
|
font-size: 20px;
|
display: inline-block;
|
color: #9ea0a0;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
|
.dev-tree-edit {
|
z-index: 1;
|
font-size: 16px;
|
position: absolute;
|
top: 81px;
|
cursor: pointer;
|
button {
|
border: 0px;
|
color: #3d68e1;
|
|
background-color: transparent;
|
cursor: pointer;
|
outline: none;
|
}
|
button:hover {
|
color: rgb(82, 193, 245);
|
}
|
}
|
.dev-tree-lock {
|
left: 76%;
|
button {
|
color: #000;
|
}
|
}
|
|
.dev-gb-lock {
|
left: 76%;
|
top: -27px;
|
button {
|
color: #000;
|
}
|
}
|
.dev-area-add {
|
left: 46%;
|
}
|
.dev-camera-add {
|
left: 55%;
|
}
|
.dev-tree-font {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
}
|
|
.dev-gb-refresh {
|
top: -27px;
|
left: 113px;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
|
border-bottom-color: #00000090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
|
border-bottom-color: #68666690;
|
}
|
</style>
|
