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

riku

2024-11-21 55bd7fb6365909a0cbcf0957333c7876bd791bb9

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

@@ -1,14 +1,78 @@
<template>
  <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="未整改">{{ 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>
  <el-space>
    <el-descriptions :column="3" size="small" border direction="vertical">
      <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="巡查点次"
        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="未整改"
        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>
    <el-tag v-for="(s, i) in summary" :key="i" :type="s.type" size="small">
      <el-icon v-if="s.icon" color="">
@@ -34,50 +98,92 @@
        UnChange: 0,
        changeUnCheck: 0,
        changePartCheck: 0,
        changeAllCheck: 0
      }
        changeAllCheck: 0,
        proCount: 0,
        changeCount: 0,
        changePer: 0
      };
      this.subtasks.forEach((s) => {
        _summary.total++
        _summary.total++;
        _summary.proCount += s.data.proNum;
        _summary.changeCount += s.data.changeNum;

        // 问题审核情况
        if (s.data.proNum == 0) {
          _summary.proAllCheck++
          _summary.proAllCheck++;
        } else if (s.data.proCheckedNum == 0) {
          _summary.proUnCheck++
          _summary.proUnCheck++;
        } else if (s.data.proCheckedNum < s.data.proNum) {
          _summary.proPartCheck++
          _summary.proPartCheck++;
        } else {
          _summary.proAllCheck++
          _summary.proAllCheck++;
        }

        // 是否有未整改
        if (s.data.changeNum < s.data.proNum) {
          _summary.UnChange++
          _summary.UnChange++;
        }

        // 整改审核情况
        if (s.data.proNum == 0) {
          _summary.changeAllCheck++
          _summary.changeAllCheck++;
        } else if (s.data.changeNum > 0) {
          if (s.data.changeCheckedNum == 0) {
            _summary.changeUnCheck++
            _summary.changeUnCheck++;
          } else if (s.data.changeCheckedNum < s.data.changeNum) {
            _summary.changePartCheck++
            _summary.changePartCheck++;
          } else {
            _summary.changeAllCheck++
            _summary.changeAllCheck++;
          }
        }
      })
      // _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
      if (_summary.proCount != 0) {
        _summary.changePer = _summary.changeCount / _summary.proCount;
      }
      return _summary;
    }
  },
  methods: {
    formatPercent(value) {
      return Math.round(value * 1000) / 10 + '%';
    }
  }
}
};
</script>
<style scoped>
:deep(.el-descriptions__cell) {
  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>