2025.6.13

riku

2025-06-13 b2f563e557d7b19334b6591a00001e3fb522da21

 src/views/management/TaskSummary.vue

@@ -1,26 +1,139 @@
<template>
  <!-- <BaseCard> -->
  <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-segmented v-model="value" :options="options" block />
  <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>
  <el-row>
    <el-col :span="12">
      <TaskSummaryItem title="季度汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="12">
      <TaskSummaryItem title="年度汇总"></TaskSummaryItem>
    </el-col>
  <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>
  <!-- </BaseCard> -->
</template>

<script setup></script>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import taskApi from '@/api/fysp/taskApi.js'

<style scoped></style>
const props = defineProps({
  height: String
})

const emits = defineEmits(['update:height'])

const alue = '今日汇总'
const ptions = ['今日汇总', '周度汇总', '月度汇总', '季度汇总', '年度汇总']
const tyleRed = 'color:var(--el-color-danger);'
const tyleYellow = 'color:var(--el-color-warning);'
const tyleGreen = 'color:var(--el-color-success);'

function name(params) {
  const d = dayjs()
  const area = {
    starttime: d.startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    endtime: d.endOf(type).format('YYYY-MM-DD HH:mm:ss')
  }

  taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
    this.subtaskList = res.data
  })
}
</script>

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