摘要:此次项目的数据索引是基于后端传来的数据进行剥离整合形成,索引总共分为个,针对的是区域的设备的设备的属性的所对应数据层级中的下标。为了方便通过不同的去取到相应的数据。拿到这些下标后可以直接到后端数据中抽取想要的数据。
此次项目的数据索引是基于后端传来的数据进行剥离整合形成,索引总共分为4个map,针对的是区域的id、设备的id、设备的SerialNumber、属性的id所对应数据层级中的下标。为了方便通过不同的id去取到相应的数据。
思路:通过遍历后端的总数据,将每层数据的id和对应的下标抽取出来,根据不同的层级分为区域下标、设备下标和属性下标。拿到这些下标后可以直接到后端数据中抽取想要的数据。
总体map结构:
区域map: key:区域id, value:{area: 区域所在下标} 设备map: key:设备id, value:{area: 区域所在下标, equipment: 设备所在下标} SerialNumber map: key:SerialNumber, value:{area: 区域所在下标, equipment: 设备所在下标} 属性map: key:属性id, value:{area: 区域所在下标, equipment: 设备所在下标, property: 属性所在下标} 后端的数据层级主要分为: { 区域:{ 设备:{ 属性:{} } } }
建立索引的具体代码如下所示:
let areaObj = new Map(); // 建立区域索引 let eqObj = new Map(); // 建立设备索引 let snObj = new Map(); // 建立eqSerialNumber索引 let pObj = new Map(); // 建立属性索引 const newChange = { dictionaryData(st, data) { // 获取当前区域ID for (let i = 0; i < data.length; i++) { let areaId = data[i].id; // 定义一个区域的下标对象 let areaIndex = { area: i } // 将区域id和区域对应的下标传入areaObj areaObj.set(areaId, areaIndex); // 获取当前设备ID for (let j = 0; j < data[i].equipmentList.length; j++) { let equipmentId = data[i].equipmentList[j].id; // 定义一个设备所对应层级下标的对象 equipmentIndex = { area: i, equipment: j }; // 将获取的设备id和设备对应的区域下标、设备下标传入eqObj eqObj.set(equipmentId, equipmentIndex); // 设备的serialNumber let eqSerialNumber = data[i].equipmentList[j].serialNumber; // 同理,由于eqSerialNumber与设备id同级,可使用相同的下标 snObj.set(eqSerialNumber, equipmentIndex); for (let k = 0; k < data[i].equipmentList[j].propertyList.length; k++) { // 获取当前属性对应ID let propertyId = data[i].equipmentList[j].propertyList[k].id; // 定义一个属性所对应层级的下标对象 propertyIndex = { area: i, equipment: j, property: k } // 将获取的属性id,对应的区域下标,设备下标,属性下标存入pObj pObj.set(propertyId, propertyIndex); // 存入vuex let mapDictionary = { "areaObj": areaObj, "eqObj": eqObj, "pObj": pObj, "snObj": snObj }; st.commit("changeIndexDatas", { "indexData": mapDictionary }); } } } } } export default newChange; 最后通过 newChangeW.dictionaryData(that.$store, res.data.data); 进行调用 【调用文件为:pageLogin.vue】 其中 that.$store为全局vuex数据池 , res.data.data为vuex中的svg所有数据【store/state.js文件中有相应注释】
如何使用:
this.$store.getters.getIndexDatas.indexData.pObj.get(2330); // 在全局的数据池里调用 getIndexDatas 来取到属性id为2330的下标,即可得到返回值为:{area: 3,equipment:2,property:15}
建议:console.log(this.$store.getters.getIndexDatas.indexData); // 输出可以看到所有的索引结构
例子: let index = this.$store.getters.getIndexDatas.indexData.pObj.get(2330); // 查找属性id为2330的下标 console.log(index) // 输出格式为{area: 3,equipment:2,property:15} 得出区域下标为3,设备下标为2,属性下标为15。 console.log(this.$store.getters.getDatas.data[index.area].equipmentList[index.equipment].propertyList[index.property].id); // 再通过调用 getDatas 对应之前索引的下标进行反向属性id的取值查看是否为2330。
用法:
区域: this.$store.getters.getIndexDatas.indexData.areaObj.get(区域id); // 得出 {area: 下标} 设备: this.$store.getters.getIndexDatas.indexData.eqObj.get(设备id); // 得出 {area:下标,equipment: 下标} SerialNumber: this.$store.getters.getIndexDatas.indexData.snObj.get(SerialNumber); // 得出 {area:下标,equipment: 下标} 属性: this.$store.getters.getIndexDatas.indexData.pObj.get(属性ID); // 得出 {area:下标,equipment: 下标,property:下标}
如何取出单个值:
例子:let index = this.$store.getters.getIndexDatas.indexData.pObj.get(2330);
区域下标: index.area 设备下标: index.equipment 属性下标: index.property
得到相应的下标之后即可在 this.$store.getters.getDatas.data【getDatas:获取之前vuex中保存的所有svg数据】 中取到想要的内容。
this.$store.getters.getDatas.data[index.area].equipmentList[index.equipment].propertyList[index.property].value // 得到属性id为2330的value
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54150.html
摘要:此次项目的数据索引是基于后端传来的数据进行剥离整合形成,索引总共分为个,针对的是区域的设备的设备的属性的所对应数据层级中的下标。为了方便通过不同的去取到相应的数据。拿到这些下标后可以直接到后端数据中抽取想要的数据。 此次项目的数据索引是基于后端传来的数据进行剥离整合形成,索引总共分为4个map,针对的是区域的id、设备的id、设备的SerialNumber、属性的id所对应数据层级中的...
摘要:为了方便调试,可以修改文件,加入以下两行安装中文分词插件原装分词器会简单地拆分每个汉字,没有根据词库来分词,这样的后果就是搜索结果很可能不是你想要的。原文链接参考资料权威指南为你的站点插上的翅膀安裝中文分詞中的简介使用实现博客站内搜索 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎。无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进、...
阅读 1962·2021-09-30 09:47
阅读 667·2021-09-22 15:43
阅读 1932·2019-08-30 15:52
阅读 2381·2019-08-30 15:52
阅读 2481·2019-08-30 15:44
阅读 820·2019-08-30 11:10
阅读 3321·2019-08-29 16:21
阅读 3257·2019-08-29 12:19