<!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>
