diff --git a/src/views/realTimeMonitor/components/siderBar.vue b/src/views/realTimeMonitor/components/siderBar.vue index 3cd22de..37a39cc 100644 --- a/src/views/realTimeMonitor/components/siderBar.vue +++ b/src/views/realTimeMonitor/components/siderBar.vue @@ -36,14 +36,14 @@ :data="lineTreeData" :props="defaultProps" node-key="id" - :default-expanded-keys="defaultExpandedKeys" + :default-expanded-keys="defaultExpandIds" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" :current-node-key="currentNodekey" - @node-expand="onHandleExpand" - @node-collapse="onHandleCollapse" @node-click="handleNodeClick" + @node-expand="handleNodeExpand" + @node-collapse="handleNodeCollapse" > @@ -136,8 +136,8 @@ export default { totalNum: "", //装置总数 zzradio: -1, //装置是否在线选择 lineTreeData: [], - defaultExpandedKeys: [], //默认展开 - collapsedKeys: [], // 收起节点的key数组 + defaultExpandIds: [], //默认展开 + defaultProps: { //指定参数格式回显数据 children: "list", @@ -276,21 +276,10 @@ export default { this.onlineNum = res.data.onlineNum; this.totalNum = res.data.totalNum; this.currentData = JSON.parse(localStorage.getItem("currentData")); - this.lineTreeData.forEach((node) => { - if (node.list) { - node.list.forEach((child) => { - this.defaultExpandedKeys.push(child.id); - }); - } else { - this.defaultExpandedKeys.push(node.id); - } - }); - this.defaultExpandedKeys = - JSON.parse(localStorage.getItem("defaultKey")) !== null - ? JSON.parse(localStorage.getItem("defaultKey")) + this.defaultExpandIds = + JSON.parse(localStorage.getItem("defultkeys")) !== null + ? JSON.parse(localStorage.getItem("defultkeys")) : []; //获取保存的defaultKey ; - - console.log(this.defaultExpandedKeys); if (this.lineTreeData[0].list[0].list.length > 0) { } if ( @@ -304,6 +293,7 @@ export default { this.currentNodekey = this.lineTreeData[0].id; //第一个数据 this.handleNodeClick(this.currentData); } + this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 this.scrollView(); @@ -326,21 +316,7 @@ export default { this.onlineNum = res.data.onlineNum; this.totalNum = res.data.totalNum; this.currentData = JSON.parse(localStorage.getItem("currentData")); - this.lineTreeData.forEach((node) => { - if (node.list) { - node.list.forEach((child) => { - this.defaultExpandedKeys.push(child.id); - }); - } else { - this.defaultExpandedKeys.push(node.id); - } - }); - this.defaultExpandedKeys = - JSON.parse(localStorage.getItem("defaultKey")) !== null - ? JSON.parse(localStorage.getItem("defaultKey")) - : this.defaultExpandedKeys; //获取保存的defaultKey ; - console.log(this.defaultExpandedKeys); // if (this.lineTreeData[0].list[0].list.length > 0) { // } if ( @@ -354,6 +330,10 @@ export default { this.currentNodekey = this.lineTreeData[1].id; //第一个数据 this.handleNodeClick(this.currentData); } + this.defaultExpandIds = + JSON.parse(localStorage.getItem("defultkeys")) !== null + ? JSON.parse(localStorage.getItem("defultkeys")) + : []; //获取保存的defaultKey ; this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 this.scrollView(); @@ -364,6 +344,61 @@ export default { }); } }, + // 树节点展开 + handleNodeExpand(data) { + // 保存当前展开的节点 + let flag = false; + this.defaultExpandIds.some((item) => { + if (item === data.id) { + // 判断当前节点是否存在， 存在不做处理 + flag = true; + return true; + } + }); + if (!flag) { + // 不存在则存到数组里 + this.defaultExpandIds.push(data.id); + localStorage.setItem( + "defultkeys", + JSON.stringify(this.defaultExpandIds) + ); + } + }, + // 树节点关闭 + handleNodeCollapse(data) { + // 删除当前关闭的节点 + this.defaultExpandIds.some((item, i) => { + if (item === data.id) { + this.defaultExpandIds.splice(i, 1); + localStorage.setItem( + "defultkeys", + JSON.stringify(this.defaultExpandIds) + ); + } + }); + this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点 + }, + // 删除树子节点 + removeChildrenIds(data) { + console.log("我还有子节点"); + const ts = this; + console.log(data); + if (data.list) { + console.log(data.list); + data.list.forEach(function (item) { + const index = ts.defaultExpandIds.indexOf(item.id); + if (index > 0) { + ts.defaultExpandIds.splice(index, 1); + } + ts.removeChildrenIds(item); + console.log(ts.defaultExpandIds); + }); + localStorage.setItem( + "defultkeys", + JSON.stringify(this.defaultExpandIds) + ); + } + }, //点击当前选中的treenode handleNodeClick(data) { @@ -375,76 +410,17 @@ export default { } else { this.collectFlag = true; } - if (data.id == "13009") { - // { - // "id": 13009, - // "towerid": 3980, - // "cmdid": "XYIGQ10C231000008", - // "equipname": "", - // "name": "XYIGQ10C231000008", - // "address": null, - // "protocol": 65285, - // "displayname": null, - // "model": null, - // "onlinestatus": 1, - // "hasPan": 0, - // "phase": "", - // "equipmentType": "", - // "isfavor": 0 - // } - - this.currentData = { - id: 13276, - towerid: 3981, - cmdid: "XYIGQ10C231000008", - equipname: "", - name: "XYIGQ10C231000008", - address: null, - protocol: 65285, - displayname: null, - model: null, - onlinestatus: 1, - hasPan: 0, - phase: "", - equipmentType: "", - isfavor: 0, - }; - } else { - this.currentData = data; - } - + this.currentData = data; //this.scrollView(); this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中 this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中 this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中 this.$store.commit("cmdId", this.currentData.cmdid); //将currentData保存在vuex中 this.$parent.getCurrentData(); - //this.$refs.tree.scrollTo(data); // localStorage.setItem("currentData", JSON.stringify(this.currentData)); }, - //展开 - onHandleExpand(data) { - this.defaultExpandedKeys.push(data.id); - console.log(this.defaultExpandedKeys); - localStorage.setItem( - "defaultKey", - JSON.stringify(this.defaultExpandedKeys) - ); - }, - //关闭 - onHandleCollapse(data) { - console.log(this.defaultExpandedKeys); - let index = this.defaultExpandedKeys.findIndex( - (item) => item === data.id - ); - if (index !== -1) this.defaultExpandedKeys.splice(index, 1); - console.log(this.defaultExpandedKeys); - localStorage.setItem( - "defaultKey", - JSON.stringify(this.defaultExpandedKeys) - ); - }, + scrollView() { if (this.currentData) { this.$nextTick(() => {