多个数组对象，没有的字段自动加上去。 特例显示。 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

<script>

  // 数组中查找某个属性的值 是否有个特殊的值
  function hasKpiName(array, targetValue) {
    return array.some(obj => obj.kpiName === targetValue);
  }

  // 在数组中查找某个字段，前一个字段的值和后一个字段的值
  function findPreviousAndNextValues(array, targetValue) {
    let index = array.indexOf(targetValue);
    if (index === -1) {
      // return "目标值不在数组中";
      return "";
    };
    let previousValue = array[index - 1];
    let nextValue = array[index + 1];
    if (index === 0) {
      // previousValue = "数组的第一个元素之前没有值";
      previousValue = "";
    };
    if (index === array.length - 1) {
      // nextValue = "数组的最后一个元素之后没有值";
      nextValue = "";
    };
    return {
      previousValue: previousValue,
      nextValue: nextValue
    };
  };

  let res = {
    "code": 200,
    "message": "操作成功",
    "data": {
      "modelName": "鱼场测试",
      "modelDescription": "鱼场测试",
      "resultDescription": null,
      "kpiList": [{
        "modKpiDTOList": [{
          "id": "1732288024775565314",
          "fid": null,
          "kpiName": "A类客户",
          "kpiValue": "1",
          "kpiUnit": "1000",
          "inputFlag": null,
          "paramsConfigTips": "A类测试"
        },
        {
          "id": "1732288024779759619",
          "fid": null,
          "kpiName": "C类客户",
          "kpiValue": "0",
          "kpiUnit": "1002",
          "inputFlag": null,
          "paramsConfigTips": "C类测试"
        },
        {
          "id": "1732288024783953921",
          "fid": null,
          "kpiName": "D类客户",
          "kpiValue": "0.0",
          "kpiUnit": "1003",
          "inputFlag": null,
          "paramsConfigTips": "D类测试"
        },
        {
          "id": "1732288024783953922",
          "fid": null,
          "kpiName": "F类客户",
          "kpiValue": "2.0",
          "kpiUnit": "1004",
          "inputFlag": null,
          "paramsConfigTips": "F类测试"
        },
        {
          "id": "1732288024792342530",
          "fid": null,
          "kpiName": "H类客户",
          "kpiValue": "11",
          "kpiUnit": "1005",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288024792342531",
          "fid": null,
          "kpiName": "U类客户",
          "kpiValue": "10",
          "kpiUnit": "1001",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288024796536833",
          "fid": null,
          "kpiName": "P类客户",
          "kpiValue": "9",
          "kpiUnit": "1006",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288024796536834",
          "fid": null,
          "kpiName": "T类客户",
          "kpiValue": "8",
          "kpiUnit": "1008",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288024800731137",
          "fid": null,
          "kpiName": "R类客户",
          "kpiValue": "7",
          "kpiUnit": "1009",
          "inputFlag": null,
          "paramsConfigTips": ""
        }
        ],
        "kpiCalculateTime": "2023-12-06 14:37:35"
      },
      {
        "modKpiDTOList": [{
          "id": "1732288230145466369",
          "fid": null,
          "kpiName": "A类客户",
          "kpiValue": "1",
          "kpiUnit": "1000",
          "inputFlag": null,
          "paramsConfigTips": "A类测试"
        },
        {
          "id": "1732288230149660674",
          "fid": null,
          "kpiName": "B类客户",
          "kpiValue": "0",
          "kpiUnit": "1001",
          "inputFlag": null,
          "paramsConfigTips": "B类测试"
        },
        {
          "id": "1732288230153854979",
          "fid": null,
          "kpiName": "D类客户",
          "kpiValue": "0.0",
          "kpiUnit": "1003",
          "inputFlag": null,
          "paramsConfigTips": "D类测试"
        },
        {
          "id": "1732288230153854980",
          "fid": null,
          "kpiName": "F类客户",
          "kpiValue": "2.0",
          "kpiUnit": "1004",
          "inputFlag": null,
          "paramsConfigTips": "F类测试"
        },
        {
          "id": "1732288230158049281",
          "fid": null,
          "kpiName": "G类客户",
          "kpiValue": "1",
          "kpiUnit": "1000",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288230158049282",
          "fid": null,
          "kpiName": "H类客户",
          "kpiValue": "2",
          "kpiUnit": "1005",
          "inputFlag": null,
          "paramsConfigTips": ""
        },

        {
          "id": "1732288230162243587",
          "fid": null,
          "kpiName": "P类客户",
          "kpiValue": "4",
          "kpiUnit": "1006",
          "inputFlag": null,
          "paramsConfigTips": ""
        },
        {
          "id": "1732288230162243588",
          "fid": null,
          "kpiName": "R类客户",
          "kpiValue": "5",
          "kpiUnit": "1009",
          "inputFlag": null,
          "paramsConfigTips": ""
        }
        ],
        "kpiCalculateTime": "2023-12-06 14:38:28"
      }
      ],
      "resultList": [{
        "modResultDTOList": [{
          "id": "1732288024817508353",
          "fid": null,
          "resultName": "综合结果1",
          "resultValue": "3",
          "resultUnit": "1000",
          "inputFlag": null
        },
        {
          "id": "1732288024821702658",
          "fid": null,
          "resultName": "综合结果2",
          "resultValue": "-1",
          "resultUnit": "1001",
          "inputFlag": null
        }
        ],
        "resCalculateTime": "2023-12-06 14:37:35"
      },
      {
        "modResultDTOList": [{
          "id": "1732288230183215106",
          "fid": null,
          "resultName": "综合结果1",
          "resultValue": "3",
          "resultUnit": "1000",
          "inputFlag": null
        },
        {
          "id": "1732288230183215107",
          "fid": null,
          "resultName": "综合结果2",
          "resultValue": "-1",
          "resultUnit": "1001",
          "inputFlag": null
        }
        ],
        "resCalculateTime": "2023-12-06 14:38:28"
      }
      ],
      "modResultExplainList": [{
        "modResultExplainDTOList": [{
          "id": "1732288152555036674",
          "fid": null,
          "resultExplain": "测试正常",
          "sort": null,
          "modResultExplainId": 1732288024830091265
        }]
      },
      {
        "modResultExplainDTOList": [{
          "id": "1732288375717175298",
          "fid": null,
          "resultExplain": "测试正常",
          "sort": null,
          "modResultExplainId": 1732288230191603713
        }]
      }
      ]
    }
  };

  const { data } = res;

  let Asort = [];
  let modKpiList = {};
  for (let i = 0; i < data.kpiList.length; i++) {
    const element = data.kpiList[i]['modKpiDTOList'];
    modKpiList[`modKpiList${i}`] = [];
    for (let j = 0; j < element.length; j++) {
      const elementUpData = element[j]['kpiName'];
      modKpiList[`modKpiList${i}`].push(elementUpData);
      if (Asort.includes(elementUpData)) {
      } else {
        Asort.push(elementUpData);
      };
    };
  };

  // console.log(JSON.stringify(Asort));
  // console.log(JSON.stringify(modKpiList));

  // Asort = ["A类客户", "C类客户", "D类客户", "F类客户", "H类客户", "U类客户", "P类客户", "T类客户", "R类客户", "B类客户", "G类客户"];
  // modKpiList = {
  //   "modKpiList0": ["A类客户", "C类客户", "D类客户", "F类客户", "H类客户", "U类客户", "P类客户", "T类客户", "R类客户"],
  //   "modKpiList1": ["A类客户", "B类客户", "D类客户", "F类客户", "G类客户", "H类客户", "P类客户", "R类客户"]
  // };

  let lossModKpiList = {};
  for (let key of Object.keys(modKpiList)) {
    lossModKpiList[key] = Asort.filter(item => !modKpiList[key].includes(item));
  };
  // console.log(JSON.stringify(lossModKpiList));
  // lossModKpiList = { "modKpiList0": ["B类客户", "G类客户"], "modKpiList1": ["C类客户", "U类客户", "T类客户"] };

  for (const key in lossModKpiList) {
    if (Object.hasOwnProperty.call(lossModKpiList, key)) {
      const element = lossModKpiList[key];
      for (let index = 0; index < element.length; index++) {
        const elementList = element[index];
        for (const keylist in modKpiList) {
          if (Object.hasOwnProperty.call(modKpiList, keylist)) {
            const elementKpiList = modKpiList[keylist];
            if (keylist !== key) {
              const result = findPreviousAndNextValues(elementKpiList, elementList);
              if (!!result['previousValue'] && modKpiList[key].includes(result['previousValue']) && !modKpiList[key].includes(result[key])) {
                let previousIndex = modKpiList[key].indexOf(result['previousValue']);
                modKpiList[key].splice(previousIndex + 1, 0, elementList);
              } else if (!!result['nextValue'] && modKpiList[key].includes(result['nextValue']) && !modKpiList[key].includes(result[key])) {
                let nextIndex = modKpiList[key].indexOf(result['nextValue']);
                modKpiList[key].splice(nextIndex, 0, elementList);
              }
            }
          }
        }
      }
    }
  };

  
  console.log(modKpiList);
  
  let dataUp = JSON.parse(JSON.stringify(data));

  for (let i = 0; i < data.kpiList.length; i++) {
    const element = data.kpiList[i]['modKpiDTOList'];

    console.log(JSON.stringify(element));
    console.log(JSON.stringify(modKpiList[`modKpiList${i}`]));
    
    // 对数组遍历
    dataUp.kpiList[i]['modKpiDTOList'] = [];
    for (let u = 0; u < modKpiList[`modKpiList${i}`].length; u++) {
      let elementu = modKpiList[`modKpiList${i}`][u];
      if (hasKpiName(element, elementu)) {
        for (let t = 0; t < element.length; t++) {
          if (elementu == element[t]['kpiName']) {
            dataUp.kpiList[i]['modKpiDTOList'].push(element[t]);
          }
        };
      } else {

        let setD = {
          kpiName: elementu,
          fid: null,
          id: "",
          inputFlag: null,
          kpiUnit: "",
          kpiUnitCode: null,
          kpiValue: "",
          paramsConfigTips: "xxxxxx",
        }


        
        console.log(JSON.stringify(data.kpiList));
        console.log(elementu);
        

        for (let r = 0; r < data.kpiList.length; r++) {
          const elementDeeplist = data.kpiList[r]['modKpiDTOList'];
          for (let k = 0; k < elementDeeplist.length; k++) {
            const elementK = elementDeeplist[k];
            if (elementK['kpiName'] == elementu) {
              setD['paramsConfigTips'] = elementK['paramsConfigTips'];
              // setD['kpiUnit'] = elementK['kpiUnit'];
              break;
            }
          }
        }


        dataUp.kpiList[i]['modKpiDTOList'].push(setD);
      };
    };
  };

  
  console.log(dataUp);
  

</script>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useModelcompareStore } from "@/stores/modelcompare";
import { QuestionFilled } from "@element-plus/icons-vue";
import http from "@/common/utils/http";

const route = useRoute();
const modelcompareStore = useModelcompareStore();
const tableLoad = ref(false);
const dicList = ref([]);
const modelName = ref("");
const modResultExplainList = ref([]);
const allResponseList = ref({});

const list = ref([]);
const resList = ref([]);
const ExplainList = ref([]);

const tableHead = ref([]);
const resTableHead = ref([]);
const ExplainTableHead = ref([]);



// 翻译字典单位
var _filter = (val, list) => {
  if (!list.length || !val) return '';
  let valList = list.filter((item) => item.codeKey == val);
  if (valList.length > 0) {
    return valList[0].codeName;
  }
};



// 数组中查找某个属性的值 是否有个特殊的值
function hasKpiName(array, targetValue) {
  return array.some(obj => obj.kpiName === targetValue);
}

// 在数组中查找某个字段，前一个字段的值和后一个字段的值
function findPreviousAndNextValues(array, targetValue) {
  let index = array.indexOf(targetValue);
  if (index === -1) {
    // return "目标值不在数组中";
    return "";
  };
  let previousValue = array[index - 1];
  let nextValue = array[index + 1];
  if (index === 0) {
    // previousValue = "数组的第一个元素之前没有值";
    previousValue = "";
  };
  if (index === array.length - 1) {
    // nextValue = "数组的最后一个元素之后没有值";
    nextValue = "";
  };
  return {
    previousValue: previousValue,
    nextValue: nextValue
  };
};


// 获取测算记录对比数据
const getRecordContrastData = () => {
  tableLoad.value = true;
  let params = new URLSearchParams();
  params.append("calculateIds", Array.from(modelcompareStore.routeParams.ids));
  params.append("modeId", modelcompareStore.routeParams.modelId);
  http
    .POST(
      "/operate-model/modCalculate/calculateRecordComparison",
      params,
      "application/x-www-form-urlencoded"
    )
    .then((res) => {
      if (res.code == 200) {
        let { data } = res;
        // ------------------
        let Asort = [];
        let modKpiList = {};
        for (let i = 0; i < data.kpiList.length; i++) {
          const element = data.kpiList[i]['modKpiDTOList'];
          modKpiList[`modKpiList${i}`] = [];
          for (let j = 0; j < element.length; j++) {
            const elementUpData = element[j]['kpiName'];
            modKpiList[`modKpiList${i}`].push(elementUpData);
            if (Asort.includes(elementUpData)) {
            } else {
              Asort.push(elementUpData);
            };
          };
        };

        // console.log(JSON.stringify(Asort));
        // console.log(JSON.stringify(modKpiList));

        // Asort = ["A类客户", "C类客户", "D类客户", "F类客户", "H类客户", "U类客户", "P类客户", "T类客户", "R类客户", "B类客户", "G类客户"];
        // modKpiList = {
        //   "modKpiList0": ["A类客户", "C类客户", "D类客户", "F类客户", "H类客户", "U类客户", "P类客户", "T类客户", "R类客户"],
        //   "modKpiList1": ["A类客户", "B类客户", "D类客户", "F类客户", "G类客户", "H类客户", "P类客户", "R类客户"]
        // };

        let lossModKpiList = {};
        for (let key of Object.keys(modKpiList)) {
          lossModKpiList[key] = Asort.filter(item => !modKpiList[key].includes(item));
        };
        // console.log(JSON.stringify(lossModKpiList));
        // lossModKpiList = { "modKpiList0": ["B类客户", "G类客户"], "modKpiList1": ["C类客户", "U类客户", "T类客户"] };

        for (const key in lossModKpiList) {
          if (Object.hasOwnProperty.call(lossModKpiList, key)) {
            const element = lossModKpiList[key];
            for (let index = 0; index < element.length; index++) {
              const elementList = element[index];
              for (const keylist in modKpiList) {
                if (Object.hasOwnProperty.call(modKpiList, keylist)) {
                  const elementKpiList = modKpiList[keylist];
                  if (keylist !== key) {
                    const result = findPreviousAndNextValues(elementKpiList, elementList);
                    if (!!result['previousValue'] && modKpiList[key].includes(result['previousValue']) && !modKpiList[key].includes(result[key])) {
                      let previousIndex = modKpiList[key].indexOf(result['previousValue']);
                      modKpiList[key].splice(previousIndex + 1, 0, elementList);
                    } else if (!!result['nextValue'] && modKpiList[key].includes(result['nextValue']) && !modKpiList[key].includes(result[key])) {
                      let nextIndex = modKpiList[key].indexOf(result['nextValue']);
                      modKpiList[key].splice(nextIndex, 0, elementList);
                    }
                  }
                }
              }
            }
          }
        };

        
        console.log(modKpiList);
        
        let dataUp = JSON.parse(JSON.stringify(data));
        for (let i = 0; i < data.kpiList.length; i++) {
          const element = data.kpiList[i]['modKpiDTOList'];
          
          console.log(JSON.stringify(element));
          console.log(JSON.stringify(modKpiList[`modKpiList${i}`]));
          
          // 对数组遍历
          dataUp.kpiList[i]['modKpiDTOList'] = [];
          for (let u = 0; u < modKpiList[`modKpiList${i}`].length; u++) {
            let elementu = modKpiList[`modKpiList${i}`][u];
            if (hasKpiName(element, elementu)) {
              for (let t = 0; t < element.length; t++) {
                if (elementu == element[t]['kpiName']) {
                  dataUp.kpiList[i]['modKpiDTOList'].push(element[t]);
                }
              };
            } else {
              // console.log(JSON.stringify(element));
              // console.log(elementu);
              let setD = {
                kpiName: elementu,
                fid: null,
                id: "",
                inputFlag: null,
                kpiUnit: "",
                kpiUnitCode: null,
                kpiValue: "",
                paramsConfigTips: "",
              }

              for (let r = 0; r < data.kpiList.length; r++) {
                const elementDeeplist = data.kpiList[r]['modKpiDTOList'];
                for (let k = 0; k < elementDeeplist.length; k++) {
                  const elementK = elementDeeplist[k];
                  if (elementK['kpiName'] == elementu) {
                    setD['paramsConfigTips'] = elementK['paramsConfigTips'];
                    // setD['kpiUnit'] = elementK['kpiUnit'];
                    break;
                  }
                }
              }
              dataUp.kpiList[i]['modKpiDTOList'].push(setD);
            };
          };
        };
        console.log(dataUp);
        data = dataUp;
        // ------------------
        modelName.value = data.modelName;
        // 处理表头数据
        if (!data.kpiList || !data.modResultExplainList || !data.resultList)
          return;
        let tableHeadData = [{ prop: "A0", label: "KPI" }];
        let tableRowData = [];
        for (let j = 0; j < data.kpiList[0].modKpiDTOList.length; j++) {
          tableRowData.push({});
        };

        for (let i = 0; i < data.kpiList.length; i++) {

          let HeadRow = {
            prop: `B${i}`,
            label: data.kpiList[i]["kpiCalculateTime"],
          };

          tableHeadData.push(HeadRow);
          for (let r = 0; r < data.kpiList[i].modKpiDTOList.length; r++) {
            const element = data.kpiList[i].modKpiDTOList[r];
            if (i == 0) {
              tableRowData[r]["A0"] = element.kpiName;
              tableRowData[r]["A1"] = element.paramsConfigTips
                ? element.paramsConfigTips
                : "";
            };

            if (_filter(element.kpiUnit, dicList.value)) {
              tableRowData[r][`B${i}`] = `${element.kpiValue}（${_filter(element.kpiUnit, dicList.value)}）`;
            } else {
              tableRowData[r][`B${i}`] = `${element.kpiValue}`;
            };

          }
        };

        let resTableHeadA = [{ prop: "A0", label: "测算结果" }];

        let resRowTable = [];
        for (let j = 0; j < data.resultList[0].modResultDTOList.length; j++) {
          resRowTable.push({});
        };

        for (let j = 0; j < data.resultList.length; j++) {
          let resHeadRow = {
            prop: `B${j}`,
            label: data.resultList[j]["resCalculateTime"],
          };
          resTableHeadA.push(resHeadRow);

          for (let t = 0; t < data.resultList[j].modResultDTOList.length; t++) {
            const element = data.resultList[j].modResultDTOList[t];
            if (j == 0) {
              resRowTable[t]["A0"] = element.resultName;
              resRowTable[t]["A1"] = element.paramsConfigTips
                ? element.paramsConfigTips
                : "";
            };

            if (_filter(element.resultUnit, dicList.value)) {
              resRowTable[t][`B${j}`] = `${element.resultValue}（${_filter(element.resultUnit, dicList.value)}）`;
            } else {
              resRowTable[t][`B${j}`] = `${element.resultValue}`;
            }

          };
        };
        tableHead.value = tableHeadData;
        list.value = tableRowData;
        resTableHead.value = resTableHeadA;
        // 结果说明
        let explainTableHead = [{ prop: "A0", label: "" }];
        for (let j = 0; j < data.resultList.length; j++) {
          let resHeadRow = {
            prop: `B${j}`,
            label: data.resultList[j]["resCalculateTime"],
          };
          explainTableHead.push(resHeadRow);
        };
        ExplainTableHead.value = explainTableHead;
        var modResultExplain = [];
        for (let j = 0; j < data.modResultExplainList.length; j++) {
          for (
            let t = 0;
            t < data.modResultExplainList[j].modResultExplainDTOList.length;
            t++
          ) {
            const element = data.modResultExplainList[j].modResultExplainDTOList[t];
            if (!modResultExplain[t]) {
              modResultExplain[t] = {
                A0: '结果说明'
              };
            };
            modResultExplain[t][`B${j}`] = `${element.resultExplain}`;
          }
        };
        modResultExplainList.value = modResultExplain;
        const combinedArray = resRowTable.concat(modResultExplain);
        resList.value = combinedArray;
        ExplainList.value = modResultExplain;
      };
    })
    .finally(() => {
      tableLoad.value = false;
    });
};

// 查询数据字典配置
const getDicConfigOptions = () => {
  http
    .GET("/operate-system/sysDicConfigManage/getListByCodeType", {
      codeType: "modelUnit",
    })
    .then((res) => {
      if (res.code == 200) {
        dicList.value = res.data;
        getRecordContrastData();

      }
    });
};

onMounted(() => {
  getDicConfigOptions();
  // getRecordContrastData();
});
</script>

<template>
  <div class="modelcompare-container">
    <div class="head-table">
      <div class="headtable-title">
        <span>{{ modelName }}</span>
      </div>
      <div class="headtable-main">
        <el-table :data="list" :row-style="{ fontSize: '14px' }" :header-cell-style="{
          background: '#F5F7FA',
          color: '#909399',
          fontSize: '14px',
          fontWeight: '600',
          lineHeight: '23px',
        }" :fit="true" :border="true" v-loading="tableLoad" style="width: 100%" class="elementplus-tables">
          <el-table-column v-for="(column, index) in tableHead" :key="index" :prop="column.prop" :label="column.label">
            <template #default="scope">
              {{ scope.row[column.prop] }}
              <el-tooltip placement="top" v-if="index == 0 ? (scope.row['A1'] ? true : false) : false">
                <template #content> {{ scope.row["A1"] }}</template>
                <QuestionFilled style="font-size: 14px; width: 16px"></QuestionFilled>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="foot-table">
      <div class="ft-table-title">测算结果对比</div>
      <div class="foottable-main">
        <el-table :data="resList" :row-style="{ fontSize: '14px' }" :header-cell-style="{
          background: '#F5F7FA',
          color: '#909399',
          fontSize: '14px',
          fontWeight: '600',
          lineHeight: '23px',
        }" :fit="true" :border="true" v-loading="tableLoad" style="width: 100%" class="elementplus-tables">
          <el-table-column v-for="(column, index) in resTableHead" :key="index" :prop="column.prop" :label="column.label">
            <template #default="scope">
              {{ scope.row[column.prop] }}
              <el-tooltip placement="top" v-if="index == 0 ? (scope.row['A1'] ? true : false) : false">
                <template #content> {{ scope.row["A1"] }}</template>
                <QuestionFilled style="font-size: 14px; width: 16px"></QuestionFilled>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.modelcompare-container {
  width: 1200px;
  background-color: #fff;
  margin: auto;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 24px 24px 16px;

  .head-table {
    .headtable-title {
      margin-bottom: 24px;

      span {
        width: 176px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
      }
    }
  }

  .foot-table {
    .ft-table-title {
      font-size: 16px;
      color: #000;
      line-height: 24px;
      margin: 24px 0;
    }
  }

  .elementplus-tables {
    --el-table-row-hover-bg-color: #fef2f0;
  }
}

.ft-table-box {
  display: flex;
  justify-content: space-between;
  // .foottable-foot {
  // }
}
</style>

　　

 

posted @ 2023-12-22 10:55  龙旋风  阅读(19)  评论(0)    收藏  举报