问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能

riku

2024-11-21 55bd7fb6365909a0cbcf0957333c7876bd791bb9

 src/views/fysp/check/components/CompSubTaskStatistic.vue

@@ -1,43 +1,76 @@
<template>
  <el-space>
    <el-descriptions :column="3" size="small" border direction="vertical">
      <el-descriptions-item label="问题数">{{
        summary.proCount
      }}</el-descriptions-item>
      <el-descriptions-item label="整改数">{{
        summary.changeCount
      }}</el-descriptions-item>
      <el-descriptions-item label="整改率">{{
        summary.changePer
      }}</el-descriptions-item>
      <el-descriptions-item
        label="问题数"
        label-class-name="problem-label"
        class-name="secondary-content"
        >{{ summary.proCount }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改数"
        label-class-name="problem-label"
        class-name="secondary-content"
        >{{ summary.changeCount }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改率"
        label-class-name="problem-label"
        :class-name="summary.changePer < 0.6 ? 'danger-content' : 'secondary-content'"
        >{{ formatPercent(summary.changePer) }}</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions :column="8" size="small" border direction="vertical">
      <el-descriptions-item label="巡查点次">{{
        summary.total
      }}</el-descriptions-item>
      <el-descriptions-item label="问题未审核">{{
        summary.proUnCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="部分审核">{{
        summary.proPartCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="全部审核">{{
        summary.proAllCheck
      }}</el-descriptions-item>
      <el-descriptions-item
        label="巡查点次"
        label-class-name="pro-check-label"
        class-name="secondary-content"
        >{{ summary.total }}</el-descriptions-item
      >
      <el-descriptions-item
        label="问题未审核"
        label-class-name="pro-check-label"
        :class-name="summary.proUnCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.proUnCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="部分审核"
        label-class-name="pro-check-label"
        :class-name="summary.proPartCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.proPartCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="全部审核"
        label-class-name="pro-check-label"
        class-name="secondary-content"
        >{{ summary.proAllCheck }}</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions :column="8" size="small" border direction="vertical">
      <el-descriptions-item label="未整改">{{
        summary.UnChange
      }}</el-descriptions-item>
      <el-descriptions-item label="整改未审核">{{
        summary.changeUnCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="部分审核">{{
        summary.changePartCheck
      }}</el-descriptions-item>
      <el-descriptions-item label="全部审核">{{
        summary.changeAllCheck
      }}</el-descriptions-item>
      <el-descriptions-item
        label="未整改"
        label-class-name="change-check-label"
        :class-name="summary.UnChange > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.UnChange }}</el-descriptions-item
      >
      <el-descriptions-item
        label="整改未审核"
        label-class-name="change-check-label"
        :class-name="summary.changeUnCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.changeUnCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="部分审核"
        label-class-name="change-check-label"
        :class-name="summary.changePartCheck > 0 ? 'danger-content' : 'secondary-content'"
        >{{ summary.changePartCheck }}</el-descriptions-item
      >
      <el-descriptions-item
        label="全部审核"
        label-class-name="change-check-label"
        class-name="secondary-content"
        >{{ summary.changeAllCheck }}</el-descriptions-item
      >
    </el-descriptions>
  </el-space>
  <!-- <el-space>
@@ -68,7 +101,7 @@
        changeAllCheck: 0,
        proCount: 0,
        changeCount: 0,
        changePer: '0%'
        changePer: 0
      };
      this.subtasks.forEach((s) => {
        _summary.total++;
@@ -106,19 +139,14 @@
      });

      if (_summary.proCount != 0) {
        _summary.changePer =
          Math.round((_summary.changeCount / _summary.proCount) * 1000) / 10 +
          '%';
        _summary.changePer = _summary.changeCount / _summary.proCount;
      }
      // _summary.forEach((s, i) => {
      //   if (i > 0) {
      //     let per = Math.round((s.value / _summary[0].value) * 1000) / 10
      //     if (isNaN(per)) per = 0
      //     s.value = `${s.value}(${per}%)`
      //   }
      // })

      return _summary;
    }
  },
  methods: {
    formatPercent(value) {
      return Math.round(value * 1000) / 10 + '%';
    }
  }
};
@@ -128,4 +156,34 @@
  padding: 0px 4px !important;
  /* font-size: 13px !important; */
}

:deep(.problem-label) {
  background: var(--el-color-primary-light-7) !important;
}
:deep(.problem-content) {
  /* background: var(--el-color-danger-light-9); */
}

:deep(.pro-check-label) {
  background: var(--el-color-success-light-7) !important;
}
:deep(.pro-check-content) {
}

:deep(.change-check-label) {
  background: var(--el-color-warning-light-7) !important;
}
:deep(.change-check-content) {
}

:deep(.danger-content) {
  color: var(--el-color-danger) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}

:deep(.secondary-content) {
  color: var(--el-text-color-regular) !important;
  font-size: 12px !important;
}
</style>