此次项目的数据索引是基于后端传来的数据进行剥离整合形成，索引总共分为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