<template>
|
<div class="tree-menu" :style="`max-height:${height - 200}px;`">
|
<z-tree
|
:nodes="node"
|
:show-checkbox="TreeDataPool.multiple"
|
:readonly="TreeDataPool.readonly"
|
:gb28181="gb28181"
|
:setting="setting"
|
@onCreated="handleCreated"
|
@onClick="itemClick"
|
@onCheck="itemCheck"
|
@onDblClick="onDblClick"
|
@onAddNode="addNode"
|
@onRemoveNode="delNode"
|
@onRenameNode="editNode"
|
@onAddDevice="addCamera"
|
@onImport="importCameras"
|
@onExpand="itemExpand"
|
@onCollapse="itemCollapse"
|
@onShowPic="showCameraPic"
|
/>
|
<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";
|
import ZTree from "./zTree/ztree";
|
|
export default {
|
name: "GiantTreeMenu",
|
components: {
|
ZTree,
|
},
|
props: {
|
app: {
|
type: String,
|
default: "Video",
|
},
|
node: {
|
type: Array,
|
},
|
treeName: {
|
type: String,
|
default: "",
|
},
|
gb28181: {
|
type: Boolean,
|
default: false,
|
},
|
height: {
|
type: Number,
|
default: 0,
|
},
|
setting: {
|
type: Object,
|
require: false,
|
default: function () {
|
return {};
|
},
|
},
|
clickType: {
|
type: String,
|
default: "",
|
},
|
},
|
data() {
|
return {
|
hoverNodeId: "",
|
showDialog: false,
|
clientX: 0,
|
clientY: 0,
|
dialogForm: {
|
text: "",
|
},
|
rules: {
|
text: [
|
{ required: true, message: "请输入节点名称", trigger: "change" },
|
{ min: 2, max: 10, message: "长度在2到10个字", trigger: "change" },
|
],
|
},
|
curNodeTid: "",
|
};
|
},
|
created() {
|
// console.log(this.height, '树高度')
|
this.TreeDataPool.zTree = true;
|
|
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);
|
}
|
},
|
},
|
methods: {
|
handleCreated: function (ztreeObj) {
|
let _this = this;
|
this.ztreeObj = ztreeObj;
|
// console.log("handleCreated")
|
// onCreated 中操作ztreeObj对象展开第一个节点
|
// ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
|
|
// 摄像机配置切换时, 设置选中状态
|
if (this.TreeDataPool.selectedNode.id) {
|
// 取消所有多选的节点,仅保留当前单选的节点
|
this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id];
|
this.curNodeTid = this.TreeDataPool.selectedNode.tId;
|
//摄像机信息更新信息后，如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息
|
let ztreeNodes = ztreeObj.getNodes();
|
//var curNodeTid = '';
|
_this.findTidByIdFromArr(ztreeNodes);
|
this.TreeDataPool.selectedNode.tId = _this.curNodeTid;
|
let node = this.ztreeObj.getNodeByTId(
|
this.TreeDataPool.selectedNode.tId
|
);
|
|
// 多选时, 选中单选单击的节点
|
if (this.TreeDataPool.multiple) {
|
this.ztreeObj.checkAllNodes(false);
|
this.ztreeObj.checkNode(node, true, false, false);
|
}
|
|
this.ztreeObj.selectNode(node, false, true);
|
}
|
},
|
|
findTidByIdFromArr(arr) {
|
let len = arr.length;
|
let _this = this;
|
for (var i = 0; i < len; i++) {
|
if (arr[i].id == this.TreeDataPool.selectedNode.id) {
|
_this.curNodeTid = arr[i].tId;
|
break;
|
}
|
if (arr[i].children) {
|
this.findTidByIdFromArr(arr[i].children);
|
}
|
}
|
},
|
onDblClick(evt, treeId, item) {
|
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;
|
}
|
},
|
addCamera(node) {
|
this.$emit("addDevice", node);
|
},
|
importCameras(node) {
|
this.$emit("import", node);
|
},
|
addNode(node) {
|
this.dialogForm = {
|
text: "",
|
method: "add",
|
node: node.id,
|
};
|
this.showDialogBox(event);
|
},
|
editNode(node) {
|
this.dialogForm = {
|
text: node.name,
|
method: "edit",
|
node: node.id,
|
alias: node.alias,
|
gb28181: this.gb28181,
|
};
|
this.showDialogBox(event);
|
},
|
delNode(node) {
|
this.TreeDataPool.del(node.id);
|
},
|
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(evt, treeId, treeNode) {
|
if (this.clickType == "multiple") {
|
evt.target.parentNode.parentNode.querySelector(".chk").click();
|
return;
|
}
|
|
this.TreeDataPool.selectedNode = treeNode;
|
this.TreeDataPool.treeType = this.treeName;
|
|
// 多选
|
if (this.TreeDataPool.multiple) {
|
// 单击某一个节点文字时 取消所有勾选状态 然后选中自身
|
this.ztreeObj.checkAllNodes(false);
|
this.ztreeObj.checkNode(treeNode, true, false, false);
|
}
|
|
this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
|
},
|
// itemClick(treeNode) {
|
// this.TreeDataPool.selectedNode = treeNode;
|
// this.TreeDataPool.treeType = this.treeName;
|
|
// // 多选
|
// if (this.TreeDataPool.multiple) {
|
// // 单击某一个节点文字时 取消所有勾选状态 然后选中自身
|
// this.ztreeObj.checkAllNodes(false);
|
// this.ztreeObj.checkNode(treeNode, true, false, false);
|
// }
|
|
// this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
|
// },
|
itemCheck(evt, treeId, treeNode) {
|
this.TreeDataPool.selectedNode = treeNode;
|
this.TreeDataPool.treeType = this.treeName;
|
|
// 多选
|
// this.ztreeObj.checkNode(treeNode, true, false, false);
|
let checkedNodes = this.ztreeObj.getCheckedNodes(true);
|
this.TreeDataPool.updateZTreeCheckNodes(checkedNodes);
|
|
// 实时统计选中个数
|
this.TreeDataPool.countCheckedNodes(checkedNodes);
|
|
// 保存一份数据
|
this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
|
},
|
//展开
|
itemExpand(e, id, node) {
|
delete this.TreeDataPool.foldNodeList[node.id];
|
},
|
// 折叠
|
itemCollapse(e, id, node) {
|
this.TreeDataPool.foldNodeList[node.id] = true;
|
},
|
dropNode(node, item, draggedItem, e) {
|
// console.log('dropNode', node, item, draggedItem);
|
this.TreeDataPool.dropNode(draggedItem.id, item.id);
|
},
|
showCameraPic(nodeId) {
|
this.TreeDataPool.showBaseImage(nodeId);
|
},
|
},
|
};
|
</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>
|
