| | |
| | | :show-checkbox="TreeDataPool.multiple" |
| | | :readonly="TreeDataPool.readonly" |
| | | :gb28181="gb28181" |
| | | :setting="setting" |
| | | @onCreated="handleCreated" |
| | | @onClick="itemClick" |
| | | @onCheck="itemCheck" |
| | |
| | | @onImport="importCameras" |
| | | @onExpand="itemExpand" |
| | | @onCollapse="itemCollapse" |
| | | @onShowPic="showCameraPic" |
| | | /> |
| | | <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div> |
| | | <div |
| | |
| | | height: { |
| | | type: Number, |
| | | default: 0 |
| | | } |
| | | }, |
| | | setting: { |
| | | type: Object, |
| | | require: false, |
| | | default: function () { |
| | | return {}; |
| | | }, |
| | | }, |
| | | }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | hoverNodeId: "", |
| | | showDialog: false, |
| | |
| | | curNodeTid: '', |
| | | }; |
| | | }, |
| | | created () { |
| | | created() { |
| | | // console.log(this.height, '树高度') |
| | | this.TreeDataPool.zTree = true; |
| | | |
| | |
| | | //摄像机信息更新信息后,如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息 |
| | | let ztreeNodes = ztreeObj.getNodes(); |
| | | //var curNodeTid = ''; |
| | | console.log(ztreeNodes) |
| | | _this.findTidByIdFromArr(ztreeNodes); |
| | | console.log('curNodeTid', _this.curNodeTid) |
| | | this.TreeDataPool.selectedNode.tId = _this.curNodeTid; |
| | | let node = this.ztreeObj.getNodeByTId(this.TreeDataPool.selectedNode.tId) |
| | | console.log('selecBode', this.TreeDataPool.selectedNode) |
| | | console.log('selectedNode.tId', this.TreeDataPool.selectedNode.tId) |
| | | |
| | | // 多选时, 选中单选单击的节点 |
| | | if (this.TreeDataPool.multiple) { |
| | | this.ztreeObj.checkAllNodes(false); |
| | |
| | | } |
| | | }, |
| | | |
| | | findTidByIdFromArr (arr) { |
| | | findTidByIdFromArr(arr) { |
| | | let len = arr.length; |
| | | let _this = this; |
| | | for (var i = 0; i < len; i++) { |
| | |
| | | _this.curNodeTid = arr[i].tId; |
| | | break; |
| | | } |
| | | if(arr[i].children){ |
| | | if (arr[i].children) { |
| | | this.findTidByIdFromArr(arr[i].children); |
| | | } |
| | | } |
| | | |
| | | |
| | | }, |
| | | onDblClick (evt, treeId, item) { |
| | | onDblClick(evt, treeId, item) { |
| | | if (item.type !== "4" || this.app !== "Camera") { |
| | | return; |
| | | } |
| | |
| | | this.TreeDataPool.activeVideoIndex = nullVideoIndex; |
| | | } |
| | | }, |
| | | addCamera (node) { |
| | | addCamera(node) { |
| | | this.$emit("addDevice", node); |
| | | }, |
| | | importCameras (node) { |
| | | importCameras(node) { |
| | | this.$emit("import", node); |
| | | }, |
| | | addNode (node) { |
| | | addNode(node) { |
| | | this.dialogForm = { |
| | | text: "", |
| | | method: "add", |
| | |
| | | }; |
| | | this.showDialogBox(event); |
| | | }, |
| | | editNode (node) { |
| | | editNode(node) { |
| | | this.dialogForm = { |
| | | text: node.name, |
| | | method: "edit", |
| | |
| | | }; |
| | | this.showDialogBox(event); |
| | | }, |
| | | delNode (node) { |
| | | delNode(node) { |
| | | this.TreeDataPool.del(node.id); |
| | | }, |
| | | submitForm () { |
| | | submitForm() { |
| | | // 提交新增或者编辑区域节点表单 |
| | | this.$refs.dialogForm.validate(valid => { |
| | | if (valid) { |
| | |
| | | }); |
| | | this.hideDialogBox(); |
| | | }, |
| | | hideDialogBox () { |
| | | hideDialogBox() { |
| | | this.showDialog = false; |
| | | this.dialogForm = { text: "" }; |
| | | }, |
| | | showDialogBox (event) { |
| | | 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) { |
| | | console.log(evt, treeId) |
| | | itemClick(evt, treeId, treeNode) { |
| | | |
| | | this.TreeDataPool.selectedNode = treeNode; |
| | | this.TreeDataPool.treeType = this.treeName; |
| | |
| | | |
| | | // this.TreeDataPool.updateZTreeCheckNodes([treeNode]); |
| | | // }, |
| | | itemCheck (evt, treeId, 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) { |
| | | this.TreeDataPool.foldNodeList[node.id] = true |
| | | }, |
| | | // 折叠 |
| | | itemCollapse (e, id, node) { |
| | | itemExpand(e, id, node) { |
| | | delete this.TreeDataPool.foldNodeList[node.id] |
| | | }, |
| | | dropNode (node, item, draggedItem, e) { |
| | | // 折叠 |
| | | 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) |
| | | } |
| | | } |
| | | }; |