From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/components/giantTree/index.vue | 152 ++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 109 insertions(+), 43 deletions(-) diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue index 09e5bdc..ab602d2 100644 --- a/src/components/giantTree/index.vue +++ b/src/components/giantTree/index.vue @@ -5,6 +5,7 @@ :show-checkbox="TreeDataPool.multiple" :readonly="TreeDataPool.readonly" :gb28181="gb28181" + :setting="setting" @onCreated="handleCreated" @onClick="itemClick" @onCheck="itemCheck" @@ -16,6 +17,7 @@ @onImport="importCameras" @onExpand="itemExpand" @onCollapse="itemCollapse" + @onShowPic="showCameraPic" /> <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div> <div @@ -24,12 +26,23 @@ :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 + :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-input + v-model="dialogForm.text" + oninput="if(value.length>10)value=value.slice(0,10)" + ></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" type="primary" @click="submitForm" + >淇濆瓨</el-button + > <el-button size="mini" @click="hideDialogBox">鍙栨秷</el-button> </div> </el-form> @@ -39,56 +52,60 @@ </template> <script> -// import VJstree from "./jsTree"; -import ZTree from "./zTree/ztree" +import ZTree from "./zTree/ztree"; export default { name: "GiantTreeMenu", components: { - ZTree + ZTree, }, props: { app: { type: String, - default: "Video" + default: "Video", }, node: { - type: Array + type: Array, }, treeName: { type: String, - default: "" + default: "", }, gb28181: { type: Boolean, - default: false + default: false, }, height: { type: Number, - default: 0 - } + default: 0, + }, + setting: { + type: Object, + require: false, + default: function () { + return {}; + }, + }, }, data() { return { - hoverNodeId: "", showDialog: false, clientX: 0, clientY: 0, dialogForm: { - text: "" + text: "", }, rules: { text: [ { required: true, message: "璇疯緭鍏ヨ妭鐐瑰悕绉�", trigger: "change" }, - { min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", 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; @@ -98,21 +115,29 @@ if (newValue !== this.treeName) { this.TreeDataPool.cleanTree(this.treeName); } - } + }, }, methods: { handleCreated: function (ztreeObj) { + let _this = this; this.ztreeObj = ztreeObj; - // console.log("handleCreated") + ztreeObj.expandAll(true); // onCreated 涓搷浣渮treeObj瀵硅薄灞曞紑绗竴涓妭鐐� // ztreeObj.expandNode(ztreeObj.getNodes()[0], true); // 鎽勫儚鏈洪厤缃垏鎹㈡椂, 璁剧疆閫変腑鐘舵�� if (this.TreeDataPool.selectedNode.id) { // 鍙栨秷鎵�鏈夊閫夌殑鑺傜偣,浠呬繚鐣欏綋鍓嶅崟閫夌殑鑺傜偣 - this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id] - - let node = this.ztreeObj.getNodeByTId(this.TreeDataPool.selectedNode.tId) + this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id]; + this.curNodeTid = this.TreeDataPool.selectedNode.tId; + //鎽勫儚鏈轰俊鎭洿鏂颁俊鎭悗锛屽鏋滆妭鐐逛綅缃湁鍙榯Id灏变笉鍑嗕簡,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) { @@ -120,14 +145,27 @@ this.ztreeObj.checkNode(node, true, false, false); } - this.ztreeObj.selectNode(node, false, true) + 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 = ""; @@ -137,14 +175,18 @@ 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 ); - }) + }); return; } @@ -162,14 +204,18 @@ } } 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 ); - }) + }); } else { // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); this.$nextTick(() => { @@ -178,7 +224,7 @@ item, this ); - }) + }); this.TreeDataPool.activeVideoIndex = nullVideoIndex; } }, @@ -192,7 +238,7 @@ this.dialogForm = { text: "", method: "add", - node: node.id + node: node.id, }; this.showDialogBox(event); }, @@ -202,7 +248,7 @@ method: "edit", node: node.id, alias: node.alias, - gb28181: this.gb28181 + gb28181: this.gb28181, }; this.showDialogBox(event); }, @@ -211,7 +257,7 @@ }, 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); @@ -253,28 +299,50 @@ 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; - + debugger; // 澶氶�� // 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 + delete this.TreeDataPool.foldNodeList[node.id]; }, // 鎶樺彔 itemCollapse(e, id, node) { - delete this.TreeDataPool.foldNodeList[node.id] + this.TreeDataPool.foldNodeList[node.id] = true; }, dropNode(node, item, draggedItem, e) { // console.log('dropNode', node, item, draggedItem); - this.TreeDataPool.dropNode(draggedItem.id, item.id) - } - } + this.TreeDataPool.dropNode(draggedItem.id, item.id); + }, + showCameraPic(nodeId) { + this.TreeDataPool.showBaseImage(nodeId); + }, + }, }; </script> <style lang="scss" scoped> @@ -335,7 +403,7 @@ } .tree-menu { // max-width: 350px; - overflow-x: hidden; + overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; } @@ -360,8 +428,6 @@ background: rgba(0, 0, 0, 0.4); } .tree-menu:hover { - overflow-x: visible; overflow-y: auto; - margin-bottom: 0px; } </style> -- Gitblit v1.8.0