比较
<template>
<a-row>
<a-col :span="12">
<h3>改动前</h3>
<a-form class="p-4 enter-x" ref="formRef">
<ul v-for="(item, i) in perList" :key="i">
<a-row>
<a-col :span="3">
<a-form-item name="completionRateGte" class="modify">
{{ item.completionRateGte }}
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item>
<div> ≤达成率< </div>
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item name="completionRateLt" class="modify">
{{ item.completionRateLt }}
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item>
<img class="direction ml-2" src="../../../../../../assets/svg/direction.svg" />
</a-form-item>
</a-col>
<a-col :span="3">
<div>
<a-form-item name="performanceCoefficient" class="modify">
{{ item.performanceCoefficient }}
</a-form-item>
</div>
</a-col>
</a-row>
</ul>
</a-form>
</a-col>
<a-col :span="12">
<h3>改动后</h3>
<a-form class="p-4 enter-x" ref="formRefComparison">
<ul v-for="(item, i) in perListComparison" :key="i">
<a-row>
<a-col :span="3">
<a-form-item
:class="item.different ? 'comparison' : 'modify'"
name="completionRateGte"
>
{{ item.completionRateGte }}
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item>
<div> ≤达成率< </div>
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item
name="completionRateLt"
:class="item.different1 ? 'comparison' : 'modify'"
>
{{ item.completionRateLt }}
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item>
<img class="direction ml-2" src="../../../../../../assets/svg/direction.svg" />
</a-form-item>
</a-col>
<a-col :span="3">
<div>
<a-form-item name="performanceCoefficient" class="modify">
{{ item.performanceCoefficient }}
</a-form-item>
</div>
</a-col>
</a-row>
</ul>
</a-form>
</a-col>
<a-col :span="12">
<h3>改动后</h3>
<a-form class="p-4 enter-x" ref="formRefComparison">
<ul v-for="(item, i) in modifyBefore" :key="i">
<a-row>
<a-col :span="3">
<a-form-item
:class="item.different3 ? 'comparison' : 'modify'"
name="completionRateGte"
>
{{ item.completionRateGte }}
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item>
<div> ≤达成率< </div>
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item
name="completionRateLt"
:class="item.different ? 'comparison' : 'modify'"
>
{{ item.completionRateLt }}
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item>
<img class="direction ml-2" src="../../../../../../assets/svg/direction.svg" />
</a-form-item>
</a-col>
<a-col :span="3">
<div>
<a-form-item name="performanceCoefficient" class="modify">
{{ item.performanceCoefficient }}
</a-form-item>
</div>
</a-col>
</a-row>
</ul>
</a-form>
</a-col>
</a-row>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
export default defineComponent({
name: 'Comparison',
components: {},
props: {
record: {
type: Array,
required: true,
},
},
setup(props, context) {
const perList = ref([
{
completionRateGte: '0.00',
completionRateLt: '7.00',
performanceCoefficient: '9',
},
{
completionRateGte: '7.00',
completionRateLt: '9.00',
performanceCoefficient: '9',
},
{
completionRateGte: '9.00',
completionRateLt: '10.00',
performanceCoefficient: '8',
},
{
completionRateGte: '10.00',
completionRateLt: '11.00',
performanceCoefficient: '8',
},
{
completionRateGte: '11.00',
completionRateLt: '12.00',
performanceCoefficient: '8',
},
{
completionRateGte: '12.00',
completionRateLt: '13.00',
performanceCoefficient: '8',
},
]);
const perListComparison = ref([
{
completionRateGte: '0.00',
completionRateLt: '7.00',
performanceCoefficient: '9',
different: false,
different1: false,
},
{
completionRateGte: '7.00',
completionRateLt: '19.00',
performanceCoefficient: '9',
different: false,
different1: false,
},
// {
// completionRateGte: '19.00',
// completionRateLt: '10.00',
// performanceCoefficient: '8',
// different: false,
// different1: false,
// },
{
completionRateGte: '19.00',
completionRateLt: '119.00',
performanceCoefficient: '8',
different: false,
different1: false,
},
{
completionRateGte: '119.00',
completionRateLt: '129.00',
performanceCoefficient: '8',
different: false,
different1: false,
},
{
completionRateGte: '129.00',
completionRateLt: '17.00',
performanceCoefficient: '8',
different: false,
different1: false,
},
]);
const modifyAfter = ref([]);
const modifyBefore = ref([]);
watch(
() => props.record,
(val) => {
if (val) {
perList.value = val.afterConfigListVO || [];
perListComparison.value = val.beforeConfigListVO || [];
modifyComparison();
setTheme();
}
},
{
immediate: true,
},
);
// 对比
function modifyComparison() {
// let newModifyAfter = [];
// let newModifyBefore = [];
// let different1 = [];
// perList.value.map((list: any) => {
// newModifyAfter.push(list.completionRateGte);
// });
// perListComparison.value.map((list: any) => {
// newModifyBefore.push(list.completionRateGte);
// });
// console.log(newModifyAfter, newModifyBefore);
// for (let i = 0; i < newModifyBefore.length; i++) {
// if (newModifyBefore.length > i && newModifyAfter[i] !== newModifyBefore[i]) {
// console.log('index', newModifyBefore[i]);
// different1.push(newModifyBefore[i]);
// }
// }
// console.log(different1);
// newModifyBefore.map((list: any) => {
// different1.map((item: any) => {
// if(list === item) {
// }
// })
// })
modifyAfter.value = perList.value.map((list: any) => ({
completionRateGte: list.completionRateGte,
}));
modifyBefore.value = perListComparison.value.map((list: any) => ({
completionRateGte: list.completionRateGte,
}));
console.log(modifyAfter.value, modifyBefore.value);
for (let i = 0; i < modifyAfter.value.length; i++) {
if (
modifyBefore.value.length > i &&
modifyAfter.value[i].completionRateGte !== modifyBefore.value[i].completionRateGte
) {
console.log('index', modifyBefore.value[i]);
modifyBefore.value[i].different3 = true;
} else {
// modifyBefore.value[i].different3 = false;
}
}
console.log(modifyAfter.value.length < modifyBefore.value.length);
if (modifyAfter.value.length < modifyBefore.value.length) {
for (let i = modifyAfter.value.length; i < modifyBefore.value.length; i++) {
console.log('index', modifyBefore.value[i]);
modifyBefore.value[i].different3 = true;
}
}
console.log('index111', modifyBefore.value);
}
function comparison(value) {
if (value == 'completionRateGte' || value == 'completionRateLt') {
var result = [];
for (var i = 0; i < perListComparison.value.length; i++) {
var obj = perListComparison.value[i];
var num = value === 'completionRateGte' ? obj.completionRateGte : obj.completionRateLt;
var flag = false;
for (var j = 0; j < perList.value.length; j++) {
var aj = perList.value[j];
var n = value === 'completionRateGte' ? aj.completionRateGte : aj.completionRateLt;
if (n == num) {
flag = true;
break;
}
}
if (!flag) {
result.push(obj);
}
}
console.log(result);
return result;
}
}
const deWeight = (deWeightArr) => {
return [...new Set(deWeightArr.map((e: any) => JSON.stringify(e)))].map((e: any) =>
JSON.parse(e),
);
};
//钩子函数
onMounted(() => {
// init();
});
function setTheme() {
const comPrev = comparison('completionRateGte').map((completionRateGte: any) => ({
completionRateGte: completionRateGte.completionRateGte,
completionRateLt: completionRateGte.completionRateLt,
performanceCoefficient: completionRateGte.performanceCoefficient,
different: true,
different1: false,
}));
const comCur = comparison('completionRateLt').map((completionRateLt: any) => ({
completionRateGte: completionRateLt.completionRateGte,
completionRateLt: completionRateLt.completionRateLt,
performanceCoefficient: completionRateLt.performanceCoefficient,
different: false,
different1: true,
}));
perListComparison.value.map((completionRateLt: any) => {
comPrev.map((i: any) => {
if (i.completionRateGte === completionRateLt.completionRateGte) {
completionRateLt.different = true;
}
});
comCur.map((i: any) => {
if (i.completionRateLt === completionRateLt.completionRateLt) {
completionRateLt.different1 = true;
}
});
});
}
const init = () => {
// const comPrev = comparison('completionRateGte').map((completionRateGte: any) => ({
// completionRateGte: completionRateGte.completionRateGte,
// completionRateLt: completionRateGte.completionRateLt,
// performanceCoefficient: completionRateGte.performanceCoefficient,
// different: true,
// different1: false,
// }));
// const comCur = comparison('completionRateLt').map((completionRateLt: any) => ({
// completionRateGte: completionRateLt.completionRateGte,
// completionRateLt: completionRateLt.completionRateLt,
// performanceCoefficient: completionRateLt.performanceCoefficient,
// different: false,
// different1: true,
// }));
// perListComparison.value.map((completionRateLt: any) => {
// comPrev.map((i: any) => {
// if (i.completionRateGte === completionRateLt.completionRateGte) {
// completionRateLt.different = true;
// }
// });
// comCur.map((i: any) => {
// if (i.completionRateLt === completionRateLt.completionRateLt) {
// completionRateLt.different1 = true;
// }
// });
// });
};
return {
perList,
perListComparison,
comparison,
init,
deWeight,
modifyAfter,
modifyBefore,
};
},
});
</script>
<style lang="less" scoped>
.comparison {
color: #e4393c;
font-size: 14px;
// line-height: 1.5715;
background-color: #fff;
background-image: none;
border: 1px solid #e4393c;
border-radius: 2px;
transition: all 0.3s;
width: 100%;
}
.modify {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
// line-height: 1.5715;
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 2px;
transition: all 0.3s;
width: 100%;
}
.direction {
width: 50px;
height: 35px;
}
:deep(.ant-form-item-control-input) {
text-align: center;
}
</style>
