项目数据索引使用文档map

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