比较 - 简书

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

比较

推荐阅读更多精彩内容