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

此次項目的數(shù)據(jù)索引是基于后端傳來的數(shù)據(jù)進行剝離整合形成，索引總共分為4個map，針對的是區(qū)域的id、設(shè)備的id、設(shè)備的SerialNumber、屬性的id所對應(yīng)數(shù)據(jù)層級中的下標。為了方便通過不同的id去取到相應(yīng)的數(shù)據(jù)。

思路：通過遍歷后端的總數(shù)據(jù)，將每層數(shù)據(jù)的id和對應(yīng)的下標抽取出來，根據(jù)不同的層級分為區(qū)域下標、設(shè)備下標和屬性下標。拿到這些下標后可以直接到后端數(shù)據(jù)中抽取想要的數(shù)據(jù)。

總體map結(jié)構(gòu)：

區(qū)域map：

    key：區(qū)域id，

    value：｛area: 區(qū)域所在下標｝

設(shè)備map：

    key：設(shè)備id，

    value：｛area: 區(qū)域所在下標， equipment: 設(shè)備所在下標｝

SerialNumber map：

    key：SerialNumber，

    value：｛area: 區(qū)域所在下標， equipment: 設(shè)備所在下標｝

屬性map：

    key：屬性id，

    value：｛area: 區(qū)域所在下標， equipment: 設(shè)備所在下標， property: 屬性所在下標｝



后端的數(shù)據(jù)層級主要分為：

｛

    區(qū)域:｛

        設(shè)備：｛

            屬性：｛｝

        ｝

    ｝

｝

建立索引的具體代碼如下所示：

let areaObj = new Map(); // 建立區(qū)域索引
let eqObj = new Map(); // 建立設(shè)備索引
let snObj = new Map(); // 建立eqSerialNumber索引
let pObj = new Map(); // 建立屬性索引
const newChange = {
  dictionaryData(st, data) {
    // 獲取當前區(qū)域ID
    for (let i = 0; i < data.length; i++) {
      let areaId = data[i].id; 
      // 定義一個區(qū)域的下標對象
      let areaIndex = {
        area: i
      }
      // 將區(qū)域id和區(qū)域?qū)?yīng)的下標傳入areaObj
      areaObj.set(areaId, areaIndex);  
      // 獲取當前設(shè)備ID
      for (let j = 0; j < data[i].equipmentList.length; j++) {
        let equipmentId = data[i].equipmentList[j].id; 
        // 定義一個設(shè)備所對應(yīng)層級下標的對象
        equipmentIndex = {
          area: i,
          equipment: j
        };
        // 將獲取的設(shè)備id和設(shè)備對應(yīng)的區(qū)域下標、設(shè)備下標傳入eqObj
        eqObj.set(equipmentId, equipmentIndex);
        // 設(shè)備的serialNumber
        let eqSerialNumber = data[i].equipmentList[j].serialNumber; 
        // 同理，由于eqSerialNumber與設(shè)備id同級，可使用相同的下標
           snObj.set(eqSerialNumber, equipmentIndex);
        for (let k = 0; k < data[i].equipmentList[j].propertyList.length; k++) {
        // 獲取當前屬性對應(yīng)ID
          let propertyId = data[i].equipmentList[j].propertyList[k].id;
          // 定義一個屬性所對應(yīng)層級的下標對象
          propertyIndex = {
            area: i,
            equipment: j,
            property: k
          }
          // 將獲取的屬性id，對應(yīng)的區(qū)域下標，設(shè)備下標，屬性下標存入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);  進行調(diào)用 【調(diào)用文件為：pageLogin.vue】

其中 that.$store為全局vuex數(shù)據(jù)池 ， res.data.data為vuex中的svg所有數(shù)據(jù)【store/state.js文件中有相應(yīng)注釋】

如何使用：

this.$store.getters.getIndexDatas.indexData.pObj.get(2330);  // 在全局的數(shù)據(jù)池里調(diào)用 getIndexDatas 來取到屬性id為2330的下標，即可得到返回值為:｛area: 3，equipment:2，property:15｝

建議：console.log(this.$store.getters.getIndexDatas.indexData)； // 輸出可以看到所有的索引結(jié)構(gòu)

例子：

let index = this.$store.getters.getIndexDatas.indexData.pObj.get(2330);   // 查找屬性id為2330的下標

console.log(index)  // 輸出格式為｛area: 3，equipment:2，property:15｝  得出區(qū)域下標為3，設(shè)備下標為2，屬性下標為15。

console.log(this.$store.getters.getDatas.data[index.area].equipmentList[index.equipment].propertyList[index.property].id);  // 再通過調(diào)用 getDatas 對應(yīng)之前索引的下標進行反向?qū)傩詉d的取值查看是否為2330。

用法：

區(qū)域： this.$store.getters.getIndexDatas.indexData.areaObj.get(區(qū)域id);  // 得出 ｛area: 下標｝

設(shè)備： this.$store.getters.getIndexDatas.indexData.eqObj.get(設(shè)備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);

區(qū)域下標: index.area

設(shè)備下標: index.equipment

屬性下標: index.property

得到相應(yīng)的下標之后即可在 this.$store.getters.getDatas.data【getDatas：獲取之前vuex中保存的所有svg數(shù)據(jù)】 中取到想要的內(nèi)容。

this.$store.getters.getDatas.data[index.area].equipmentList[index.equipment].propertyList[index.property].value // 得到屬性id為2330的value