摘要：此次項目的數據索引是基于后端傳來的數據進行剝離整合形成，索引總共分為個，針對的是區域的設備的設備的屬性的所對應數據層級中的下標。為了方便通過不同的去取到相應的數據。拿到這些下標后可以直接到后端數據中抽取想要的數據。

此次項目的數據索引是基于后端傳來的數據進行剝離整合形成，索引總共分為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