<template>
|
<transition name="slideLeft">
|
<div class="left-tree-box" :style="`height:${height}px;`">
|
<el-menu
|
:default-openeds="openeds"
|
background-color="transparent"
|
text-color="#303133"
|
active-text-color="#409EFF"
|
style="height: 100%;"
|
class="el-menu-vertical-demo"
|
@open="menuOpen"
|
@close="menuClose"
|
>
|
<li class="navTopSelect">
|
<el-select
|
v-model="TreeDataPool.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="TreeDataPool.searchInput"
|
placeholder="搜索"
|
style="width: 103px;color:#95b7ff"
|
>
|
<i
|
class="el-icon-search el-input__icon"
|
style="color:#95b7ff"
|
slot="prefix"
|
@click="searchAreaData"
|
></i>
|
</el-input>
|
<div class="tree-close">
|
<i
|
class="el-icon-s-fold"
|
style="color: #3D68E1;line-height: 22px;font-size: 27px;"
|
@click="closeTree"
|
></i>
|
</div>
|
</li>
|
|
<!-- 添加区域图标 -->
|
<div class="tree-edit area-add" v-show="!TreeDataPool.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="tree-edit camera-add" v-show="!TreeDataPool.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="tree-edit tree-lock" v-show="showLock">
|
<button @click="lockSwitch">
|
<i v-if="TreeDataPool.readonly" class="el-icon-lock"></i>
|
<i v-else class="el-icon-unlock"></i>
|
</button>
|
</div>
|
|
<!-- 主菜单 -->
|
<el-submenu index="0">
|
<template slot="title">
|
<i class="font_family icon-shexiangjix"></i>
|
<b class="tree-font">摄像机</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
ref="tree"
|
:treeName="'localTree'"
|
:node="TreeDataPool.treeData"
|
@addDevice="addCamera"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="1">
|
<template slot="title">
|
<i class="font_family icon-GBx"></i>
|
<b class="tree-font">GB28181</b>
|
</template>
|
|
<!-- 国标刷新图标 -->
|
<div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly">
|
<el-tooltip effect="dark" content="刷新" placement="bottom" popper-class="atooltip">
|
<button @click="refreshGB">
|
<i class="el-icon-refresh"></i>
|
</button>
|
</el-tooltip>
|
</div>
|
<div class="tree-edit gb-lock" v-show="showLock">
|
<button @click="gbLockSwitch">
|
<i v-if="TreeDataPool.gbReadonly" class="el-icon-lock"></i>
|
<i v-else class="el-icon-unlock"></i>
|
</button>
|
</div>
|
<el-menu-item-group class="item-group">
|
<tree-menu
|
ref="gb28182tree"
|
:treeName="'gb28182Tree'"
|
:node="TreeDataPool.gb28181Data"
|
gb28181
|
@addDevice="addCamera"
|
/>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-menu-item index="2">
|
<i class="font_family icon-benditupianx"></i>
|
<b slot="title" class="tree-font">本地图片</b>
|
</el-menu-item>
|
<el-menu-item index="3">
|
<i class="font_family icon-bendishipinx"></i>
|
<b slot="title" class="tree-font">本地视频</b>
|
</el-menu-item>
|
<el-menu-item index="4">
|
<i class="font_family icon-zaixianshipinx"></i>
|
<b slot="title" class="tree-font">在线视频</b>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
import TreeMenu from "./treeMenu/index";
|
import bus from "@/plugin/bus"
|
|
export default {
|
components: {
|
TreeMenu
|
},
|
props: {
|
height: {
|
type: Number,
|
default: 0
|
}
|
},
|
|
computed: {
|
showLock() {
|
return false;
|
},
|
openeds() {
|
let arry = [];
|
for (let i = 0; i < this.TreeDataPool.openeds.length; i++) {
|
if (this.TreeDataPool.openeds[i]) {
|
arry.push(i + "");
|
}
|
}
|
return arry;
|
}
|
},
|
data() {
|
return {
|
activeIndexVideo: "",
|
slideLeft: "slideLeft",
|
searchTypeOptions: [
|
{
|
value: 0,
|
label: "全部摄像机"
|
},
|
{
|
value: 1,
|
label: "分析摄像机"
|
},
|
{
|
value: 2,
|
label: "监控摄像机"
|
},
|
{
|
value: 3,
|
label: "联动摄像机"
|
}
|
]
|
};
|
},
|
created() {
|
this.TreeDataPool.fetchTreeData();
|
},
|
mounted() {
|
this.$nextTick(() => {
|
bus.$on("slideLeft", () => {
|
this.slideLeft = "slideLeft";
|
setTimeout(() => {
|
this.TreeDataPool.showTreeBox = !this.TreeDataPool.showTreeBox;
|
}, 200);
|
});
|
});
|
},
|
methods: {
|
searchAreaData() {
|
this.TreeDataPool.fetchTreeData();
|
},
|
lockSwitch() {
|
this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
|
},
|
gbLockSwitch() {
|
this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly;
|
},
|
closeTree() {
|
this.TreeDataPool.showTreeBox = false;
|
this.CategoryData.isShow = false;
|
this.$nextTick(() => {
|
this.CategoryData.isShow = true;
|
});
|
},
|
addNode(event) {
|
this.$refs.tree.addNode(event, { id: 0 });
|
},
|
addCamera(node) {
|
bus.$emit("addCameraOnTree", node);
|
},
|
menuOpen(index) {
|
this.TreeDataPool.openeds[index] = true;
|
},
|
menuClose(index) {
|
this.TreeDataPool.openeds[index] = false;
|
},
|
refreshGB() {
|
this.TreeDataPool.refreshGB28181();
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.left-tree-box {
|
width: 315px;
|
margin-left: 5px;
|
|
.el-menu {
|
border-right: solid 0px #e6e6e6 !important;
|
}
|
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 !important;
|
color: #95b7ff !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);
|
}
|
}
|
|
.el-input__inner {
|
background: #0e2457;
|
border: 1px solid #053e83;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
border-radius: 4px;
|
color: #95b7ff;
|
}
|
.el-select .el-input .el-select__caret {
|
color: #95b7ff;
|
}
|
input::-webkit-input-placeholder,
|
textarea::-webkit-input-placeholder {
|
/* WebKit browsers */
|
color: #9fbcfc;
|
}
|
.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;
|
}
|
}
|
.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;
|
}
|
}
|
.tree-close {
|
width: 10%;
|
margin-left: 10px;
|
font-size: 20px;
|
display: inline-block;
|
color: #9ea0a0;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
|
.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);
|
}
|
}
|
.tree-lock {
|
left: 76%;
|
button {
|
color: #000;
|
}
|
}
|
|
.gb-lock {
|
left: 76%;
|
top: -27px;
|
button {
|
color: #000;
|
}
|
}
|
.area-add {
|
left: 35%;
|
}
|
.camera-add {
|
left: 45%;
|
}
|
.tree-font {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #95b7ff;
|
}
|
|
.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>
|
