项目数据索引使用文档（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