<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>
|
