<!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>
标签:特例,const,element,客户,let,数组,modKpiList,自动,null From: https://www.cnblogs.com/LFxanla/p/17920819.html