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

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

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

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

區(qū)域map：

    key：區(qū)域id，

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

設(shè)備map：

    key：設(shè)備id，

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

SerialNumber map：

    key：SerialNumber，

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

屬性map：

    key：屬性id，

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



后端的數(shù)據(jù)層級(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) {
    // 獲取當(dāng)前區(qū)域ID
    for (let i = 0; i < data.length; i++) {
      let areaId = data[i].id; 
      // 定義一個(gè)區(qū)域的下標(biāo)對(duì)象
      let areaIndex = {
        area: i
      }
      // 將區(qū)域id和區(qū)域?qū)?yīng)的下標(biāo)傳入areaObj
      areaObj.set(areaId, areaIndex);  
      // 獲取當(dāng)前設(shè)備ID
      for (let j = 0; j < data[i].equipmentList.length; j++) {
        let equipmentId = data[i].equipmentList[j].id; 
        // 定義一個(gè)設(shè)備所對(duì)應(yīng)層級(jí)下標(biāo)的對(duì)象
        equipmentIndex = {
          area: i,
          equipment: j
        };
        // 將獲取的設(shè)備id和設(shè)備對(duì)應(yīng)的區(qū)域下標(biāo)、設(shè)備下標(biāo)傳入eqObj
        eqObj.set(equipmentId, equipmentIndex);
        // 設(shè)備的serialNumber
        let eqSerialNumber = data[i].equipmentList[j].serialNumber; 
        // 同理，由于eqSerialNumber與設(shè)備id同級(jí)，可使用相同的下標(biāo)
           snObj.set(eqSerialNumber, equipmentIndex);
        for (let k = 0; k < data[i].equipmentList[j].propertyList.length; k++) {
        // 獲取當(dāng)前屬性對(duì)應(yīng)ID
          let propertyId = data[i].equipmentList[j].propertyList[k].id;
          // 定義一個(gè)屬性所對(duì)應(yīng)層級(jí)的下標(biāo)對(duì)象
          propertyIndex = {
            area: i,
            equipment: j,
            property: k
          }
          // 將獲取的屬性id，對(duì)應(yīng)的區(qū)域下標(biāo)，設(shè)備下標(biāo)，屬性下標(biāo)存入pObj
          pObj.set(propertyId, propertyIndex);
          // 存入vuex
          let mapDictionary = {
            "areaObj": areaObj,
            "eqObj": eqObj,
            "pObj": pObj,
            "snObj": snObj
          };
          st.commit("changeIndexDatas", {
            "indexData": mapDictionary
          });
        }
      }
    }
  }
}

export default newChange;

最后通過(guò) newChangeW.dictionaryData(that.$store, res.data.data);  進(jìn)行調(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 來(lái)取到屬性id為2330的下標(biāo)，即可得到返回值為:｛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的下標(biāo)

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

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

用法：

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

設(shè)備： this.$store.getters.getIndexDatas.indexData.eqObj.get(設(shè)備id); // 得出 ｛area:下標(biāo)，equipment: 下標(biāo)｝

SerialNumber： this.$store.getters.getIndexDatas.indexData.snObj.get(SerialNumber); // 得出 ｛area:下標(biāo)，equipment: 下標(biāo)｝

屬性： this.$store.getters.getIndexDatas.indexData.pObj.get(屬性ID); // 得出 ｛area:下標(biāo)，equipment: 下標(biāo)，property:下標(biāo)｝

如何取出單個(gè)值：

例子：let index = this.$store.getters.getIndexDatas.indexData.pObj.get(2330);

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

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

屬性下標(biāo): index.property

得到相應(yīng)的下標(biāo)之后即可在 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