From 401524fb5661d57ffb2229d683fe4de85b65fd1c Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期四, 31 八月 2023 17:54:24 +0800 Subject: [PATCH] 生产管理看板+删不需要的文件 --- src/components/giantTree/index.vue | 194 +++++++++++++++++++++++++----------------------- 1 files changed, 102 insertions(+), 92 deletions(-) diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue index aabca2d..d1a7af1 100644 --- a/src/components/giantTree/index.vue +++ b/src/components/giantTree/index.vue @@ -5,9 +5,12 @@ :show-checkbox="TreeDataPool.multiple" :readonly="TreeDataPool.readonly" :gb28181="gb28181" + :setting="setting" + :search="search" @onCreated="handleCreated" @onClick="itemClick" @onCheck="itemCheck" + @onAfterSearch="itemCheck" @onDblClick="onDblClick" @onAddNode="addNode" @onRemoveNode="delNode" @@ -16,13 +19,10 @@ @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' }" - > + <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"> @@ -63,9 +63,24 @@ type: Boolean, default: false }, + search: { + type: Boolean, + default: false + }, height: { type: Number, default: 0 + }, + setting: { + type: Object, + require: false, + default: function() { + return {} + } + }, + clickType: { + type: String, + default: "" } }, data() { @@ -83,28 +98,28 @@ { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" } ] }, - curNodeTid: '', - }; + curNodeTid: "" + } }, created() { // console.log(this.height, '鏍戦珮搴�') - this.TreeDataPool.zTree = true; + this.TreeDataPool.zTree = true this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo ? Number(sessionStorage.activeIndexVideo) - : this.TreeDataPool.activeVideoIndex; + : this.TreeDataPool.activeVideoIndex }, watch: { - "TreeDataPool.treeType": function (newValue) { + "TreeDataPool.treeType": function(newValue) { if (newValue !== this.treeName) { - this.TreeDataPool.cleanTree(this.treeName); + this.TreeDataPool.cleanTree(this.treeName) } } }, methods: { - handleCreated: function (ztreeObj) { - let _this = this; - this.ztreeObj = ztreeObj; + handleCreated: function(ztreeObj) { + let _this = this + this.ztreeObj = ztreeObj // console.log("handleCreated") // onCreated 涓搷浣渮treeObj瀵硅薄灞曞紑绗竴涓妭鐐� // ztreeObj.expandNode(ztreeObj.getNodes()[0], true); @@ -113,21 +128,18 @@ if (this.TreeDataPool.selectedNode.id) { // 鍙栨秷鎵�鏈夊閫夌殑鑺傜偣,浠呬繚鐣欏綋鍓嶅崟閫夌殑鑺傜偣 this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id] - this.curNodeTid = this.TreeDataPool.selectedNode.tId; + this.curNodeTid = this.TreeDataPool.selectedNode.tId //鎽勫儚鏈轰俊鎭洿鏂颁俊鎭悗锛屽鏋滆妭鐐逛綅缃湁鍙榯Id灏变笉鍑嗕簡,this.TreeDataPool.selectedNode姝ゆ椂杩樻槸鏃х殑淇℃伅 - let ztreeNodes = ztreeObj.getNodes(); + let ztreeNodes = ztreeObj.getNodes() //var curNodeTid = ''; - console.log(ztreeNodes) - _this.findTidByIdFromArr(ztreeNodes); - console.log('curNodeTid', _this.curNodeTid) - this.TreeDataPool.selectedNode.tId = _this.curNodeTid; + _this.findTidByIdFromArr(ztreeNodes) + 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); - this.ztreeObj.checkNode(node, true, false, false); + this.ztreeObj.checkAllNodes(false) + this.ztreeObj.checkNode(node, true, false, false) } this.ztreeObj.selectNode(node, false, true) @@ -135,91 +147,74 @@ }, findTidByIdFromArr(arr) { - let len = arr.length; - let _this = this; + 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; + _this.curNodeTid = arr[i].tId + break } if (arr[i].children) { - this.findTidByIdFromArr(arr[i].children); + this.findTidByIdFromArr(arr[i].children) } } - }, onDblClick(evt, treeId, item) { - if (item.type !== "4" || this.app !== "Camera") { - return; + if (!item || 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 = ""; + 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.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this) this.$nextTick(() => { - this.TreeDataPool.setVideoArr( - this.TreeDataPool.activeVideoIndex, - item, - this - ); + this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, item, this) }) - return; + 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; + if (videoArr[i] === "" || videoArr[i] === undefined || videoArr[i] === null) { + nullVideoIndex = i + break } else { - nullVideoIndex = ""; + nullVideoIndex = "" } } if (nullVideoIndex === "") { - this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); + this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this) this.$nextTick(() => { - this.TreeDataPool.setVideoArr( - this.TreeDataPool.activeVideoIndex, - item, - this - ); + 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.setVideoArr(this.TreeDataPool.activeVideoIndex, item, this) }) - this.TreeDataPool.activeVideoIndex = nullVideoIndex; + this.TreeDataPool.activeVideoIndex = nullVideoIndex } }, addCamera(node) { - this.$emit("addDevice", node); + this.$emit("addDevice", node) }, importCameras(node) { - this.$emit("import", node); + this.$emit("import", node) }, addNode(node) { this.dialogForm = { text: "", method: "add", node: node.id - }; - this.showDialogBox(event); + } + this.showDialogBox(event) }, editNode(node) { this.dialogForm = { @@ -228,57 +223,60 @@ node: node.id, alias: node.alias, gb28181: this.gb28181 - }; - this.showDialogBox(event); + } + this.showDialogBox(event) }, delNode(node) { - this.TreeDataPool.del(node.id); + this.TreeDataPool.del(node.id) }, submitForm() { // 鎻愪氦鏂板鎴栬�呯紪杈戝尯鍩熻妭鐐硅〃鍗� - this.$refs.dialogForm.validate(valid => { + this.$refs.dialogForm.validate((valid) => { if (valid) { if (this.dialogForm.method == "add") { - this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node); + 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; + return false } - }); - this.hideDialogBox(); + }) + this.hideDialogBox() }, hideDialogBox() { - this.showDialog = false; - this.dialogForm = { text: "" }; + this.showDialog = false + this.dialogForm = { text: "" } }, showDialogBox(event) { - let { clientX = 0, offsetY = 0 } = event; + let { clientX = 0, offsetY = 0 } = event // this.clientX = clientX - 120; - this.clientX = 50; - this.clientY = offsetY; - this.showDialog = true; + this.clientX = 50 + this.clientY = offsetY + this.showDialog = true }, itemClick(evt, treeId, treeNode) { - console.log(evt, treeId) + if (this.clickType == "multiple") { + evt.target.parentNode.parentNode.querySelector(".chk").click() + return + } - this.TreeDataPool.selectedNode = treeNode; - this.TreeDataPool.treeType = this.treeName; + 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.ztreeObj.checkAllNodes(false) + this.ztreeObj.checkNode(treeNode, true, false, false) } - this.TreeDataPool.updateZTreeCheckNodes([treeNode]); + this.TreeDataPool.updateZTreeCheckNodes([treeNode]) }, // itemClick(treeNode) { // this.TreeDataPool.selectedNode = treeNode; @@ -294,13 +292,22 @@ // this.TreeDataPool.updateZTreeCheckNodes([treeNode]); // }, itemCheck(evt, treeId, treeNode) { - this.TreeDataPool.selectedNode = treeNode; - this.TreeDataPool.treeType = this.treeName; + if (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); + let checkedNodes = this.ztreeObj.getCheckedNodes(true) + this.TreeDataPool.updateZTreeCheckNodes(checkedNodes) + + // 瀹炴椂缁熻閫変腑涓暟 + this.TreeDataPool.countCheckedNodes(checkedNodes) + + // 淇濆瓨涓�浠芥暟鎹� + this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes() + this.$emit("itemChecked", treeNode) }, //灞曞紑 itemExpand(e, id, node) { @@ -313,9 +320,12 @@ 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 { -- Gitblit v1.8.0