<template>
|
<div class="tree-menu" :style="`max-height:${height - 170}px;`">
|
<v-jstree
|
:data="node"
|
:item-events="itemClickEvents"
|
:show-checkbox="TreeDataPool.multiple"
|
:multiple="TreeDataPool.multiple"
|
allow-batch
|
collapse
|
draggable
|
@item-click="itemClick"
|
text-field-name="name"
|
ref="jstree"
|
>
|
<template slot-scope="_">
|
<div
|
style="display: inherit; min-width: 250px"
|
@mouseover="selectStyle(_)"
|
@mouseout="outStyle(_)"
|
>
|
<i
|
:class="_.vm.themeIconClasses"
|
role="presentation"
|
v-if="!_.model.loading && _.model.type !== '4'"
|
></i>
|
<span class="tree-name">{{ _.model.name }}</span>
|
<i
|
class="iconfont iconmtsaishipinAI"
|
style="padding-left:4px;color:#3D68E1; font-size:15px;line-height: 28px;"
|
role="presentation"
|
v-if="!_.model.loading && _.model.isAI"
|
></i>
|
|
<div
|
v-if="gb28181"
|
v-show="
|
hoverNodeId === _.model.id &&
|
!TreeDataPool.gbReadonly &&
|
'4' !== _.model.type
|
"
|
class="tree-item-handle"
|
>
|
<el-tooltip class="item" effect="dark" content="编辑区域" placement="bottom">
|
<button @click="editNode($event, _.model)">
|
<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 class="item" effect="dark" content="添加区域" placement="bottom">
|
<button @click="addNode($event, _.model)">
|
<i class="el-icon-circle-plus-outline"></i>
|
</button>
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="删除区域" placement="bottom">
|
<button @click="delNode(_.model)" v-show="!_.model.children" style="color:#f53d3d">
|
<i class="el-icon-remove-outline"></i>
|
</button>
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="编辑区域" placement="bottom">
|
<button @click="editNode($event, _.model)">
|
<i class="el-icon-edit"></i>
|
</button>
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="添加设备" placement="bottom">
|
<button @click="addCamera(_.model.id)">
|
<i class="el-icon-video-camera"></i>
|
<!-- <i
|
class="iconfont iconshishishipin"
|
style="padding-left:4px;color:#3D68E1; font-size:15px;padding-top:10px"
|
></i>-->
|
</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: {
|
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") {
|
return;
|
}
|
|
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,
|
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,
|
item,
|
this
|
);
|
} else {
|
this.TreeDataPool.setVideoArr(nullVideoIndex, 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: "blur" },
|
{ min: 2, max: 10, message: "长度在2到10个字", trigger: "blur" }
|
]
|
}
|
};
|
},
|
created() {
|
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);
|
},
|
addNode(event, node) {
|
this.dialogForm = {
|
text: "",
|
method: "add",
|
node: node.id
|
};
|
this.showDialogBox(event);
|
},
|
editNode(event, node) {
|
this.dialogForm = {
|
text: node.name,
|
method: "edit",
|
node: node.id,
|
alias: node.alias
|
};
|
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 : ""
|
);
|
}
|
} 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) {
|
this.TreeDataPool.selectedNode = item;
|
this.TreeDataPool.updateSelectedNodes();
|
this.TreeDataPool.treeType = this.treeName;
|
}
|
}
|
};
|
</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: rgb(82, 193, 245);
|
}
|
}
|
.tree-name {
|
font-family: PingFangSC-Medium;
|
font-size: 13px;
|
color: #95b7ff;
|
// 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: 300px;
|
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: rgba(61, 104, 225, 0.2);
|
}
|
.tree-menu::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
border-radius: 0;
|
background: #091944;
|
}
|
.tree-menu::-webkit-scrollbar-thumb:hover {
|
background: rgba(61, 104, 225, 0.4);
|
}
|
.tree-menu:hover {
|
overflow-x: visible;
|
overflow-y: auto;
|
margin-bottom: 0px;
|
}
|
</style>
|
