问题整改跟踪和工作流模块

Riku

2024-07-08 04e9d32ac49bf5a38adf3cd7dab6bff6e346eefd

 src/views/management/TaskSummary.vue

@@ -1,26 +1,147 @@
<template>
  <el-row> 巡查汇总 </el-row>
  <el-row>
    <el-col :span="8">
      <TaskSummaryItem title="今日汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="8">
      <TaskSummaryItem title="周度汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="8">
      <TaskSummaryItem title="月度汇总"></TaskSummaryItem>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <TaskSummaryItem title="季度汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="12">
      <TaskSummaryItem title="年度汇总"></TaskSummaryItem>
    </el-col>
  </el-row>
  <div class="border-r-small">
    <el-row> 巡查汇总 </el-row>
    <el-segmented v-model="value" :options="options" />
    <div><el-text tag="i"> 评估 </el-text></div>
    <el-row justify="space-evenly">
      <div>
        <el-statistic title="总计" :value="10"> </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>对比昨日</span>
            <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <el-statistic title="高风险" :value="2" :value-style="styleRed"> </el-statistic>
      <el-statistic title="中风险" :value="6" :value-style="styleYellow"> </el-statistic>
      <el-statistic title="低风险" :value="2" :value-style="styleGreen"> </el-statistic>
    </el-row>
    <div><el-text tag="i"> 复核 </el-text></div>
    <el-row justify="space-evenly">
      <div>
        <el-statistic title="需复核" :value="2"> </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>对比昨日</span>
            <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <el-statistic title="已完成" :value="2" :value-style="styleGreen"> </el-statistic>
    </el-row>
    <div><el-text tag="i"> 问题 </el-text></div>
    <el-row justify="space-evenly">
      <div>
        <el-statistic title="总计" :value="10"> </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>对比昨日</span>
            <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <el-statistic title="待审核" :value="2" :value-style="styleRed"> </el-statistic>
      <el-statistic title="已审核" :value="6" :value-style="styleYellow"> </el-statistic>
      <el-statistic title="待整改" :value="2" :value-style="styleGreen"> </el-statistic>
      <el-statistic title="已整改" :value="2" :value-style="styleGreen"> </el-statistic>
      <el-statistic title="待确认" :value="2" :value-style="styleGreen"> </el-statistic>
    </el-row>
    <!-- <el-row>
      <el-col :span="8">
        <TaskSummaryItem title="今日汇总"></TaskSummaryItem>
      </el-col>
      <el-col :span="8">
        <TaskSummaryItem title="周度汇总"></TaskSummaryItem>
      </el-col>
      <el-col :span="8">
        <TaskSummaryItem title="月度汇总"></TaskSummaryItem>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <TaskSummaryItem title="季度汇总"></TaskSummaryItem>
      </el-col>
      <el-col :span="12">
        <TaskSummaryItem title="年度汇总"></TaskSummaryItem>
      </el-col>
    </el-row> -->
  </div>
</template>

<script setup></script>
<script>
export default {
  props: {
    height: String
  },
  emits: ['update:height'],
  data() {
    return {
      value: '今日汇总',
      options: ['今日汇总', '周度汇总', '月度汇总', '季度汇总', '年度汇总'],
      styleRed: 'color:var(--el-color-danger);',
      styleYellow: 'color:var(--el-color-warning);',
      styleGreen: 'color:var(--el-color-success);'
    }
  },
  mounted() {}
}
</script>

<style scoped></style>
<style scoped>
.el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}

.el-statistic {
  --el-statistic-content-font-size: var(--el-font-size-base);
  /* background-color: aliceblue; */
}

.statistic-footer {
  background-color: #ffd100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  /* margin-top: 16px; */
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>