stmms-web-admin/src/views/review/ScoreReviewStatistics.vue

<template>
  <div class="part-box">
    <!-- 统计图表区域 -->
    <div class="chart-container">
      <div class="chart-item">
        <h3>复核总进度</h3>
        <Chart :options="taskChartOptions" width="400px" height="300px" />
      </div>
      <div class="chart-item">
        <h3>科目复核进度</h3>
        <Chart :options="courseChartOptions" width="400px" height="300px" />
      </div>
    </div>
  </div>

  <div class="part-box is-filter">
    <el-form inline>
      <el-form-item label="科目">
        <select-subject v-model="searchModel.subjectId"></select-subject>
      </el-form-item>
      <el-form-item label="选做科目">
        <el-select
          v-model="searchModel.isOptional"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="完成进度">
        <el-select
          v-model="searchModel.isFinished"
          placeholder="请选择"
          clearable
          style="width: 120px"
        >
          <el-option label="已完成" :value="true" />
          <el-option label="未完成" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="part-box">
    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      @sort-change="handleSortChange"
    >
      <el-table-column property="courseName" label="科目" min-width="200" />
      <el-table-column label="选做科目" min-width="100" sortable>
        <template #default="scope">
          <el-tag :type="scope.row.isOptional ? 'success' : 'info'">
            {{ scope.row.isOptional ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        property="paperCount"
        label="试卷总量"
        min-width="100"
        sortable
      />
      <el-table-column
        property="taskCount"
        label="任务数"
        min-width="80"
        sortable
      />
      <el-table-column
        property="reviewedCount"
        label="已复核数"
        width="100"
        sortable
      />
      <el-table-column
        property="unReviewedCount"
        label="待复核数"
        min-width="100"
        sortable
      />
      <el-table-column label="完成进度" min-width="100" sortable>
        <template #default="scope">
          <el-progress
            :percentage="scope.row.progress"
            :color="scope.row.progress === 100 ? '#67c23a' : '#409eff'"
          />
        </template>
      </el-table-column>
      <el-table-column
        property="reviewedTimes"
        label="已复核次数"
        min-width="100"
        sortable
      />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onMounted } from 'vue';
  import { getReviewStatInfo, getReviewStatList } from '@/api/review';
  import {
    ReviewStatInfo,
    ReviewStatItem,
    ReviewStatListFilter,
  } from '@/api/types/review';
  import useTable from '@/hooks/table';
  import Chart from '@/components/chart/index.vue';

  defineOptions({
    name: 'ScoreReviewStatistics',
  });

  const searchModel = reactive<ReviewStatListFilter>({
    subjectId: null,
    isOptional: null,
    isFinished: null,
  });

  const {
    dataList,
    pagination,
    loading,
    toPage,
    pageSizeChange,
    handleSortChange,
  } = useTable<ReviewStatItem>(getReviewStatList, searchModel, false);

  // 统计信息
  const statInfo = ref<ReviewStatInfo>({
    taskFinishedCount: 0,
    taskUnfinishedCount: 0,
    courseFinishedCount: 0,
    courseUnfinishedCount: 0,
  });

  // 任务进度饼状图配置
  const taskChartOptions = computed(() => ({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'horizontal',
      bottom: '10%',
      data: ['任务待完成', '任务已完成'],
    },
    series: [
      {
        name: '任务进度',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '40%'],
        data: [
          {
            value: statInfo.value.taskUnfinishedCount,
            name: '任务待完成',
            itemStyle: { color: '#5470c6' },
          },
          {
            value: statInfo.value.taskFinishedCount,
            name: '任务已完成',
            itemStyle: { color: '#ff7875' },
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }));

  // 科目进度饼状图配置
  const courseChartOptions = computed(() => ({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'horizontal',
      bottom: '10%',
      data: ['科目待完成', '科目已完成'],
    },
    series: [
      {
        name: '科目进度',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '40%'],
        data: [
          {
            value: statInfo.value.courseUnfinishedCount,
            name: '科目待完成',
            itemStyle: { color: '#5470c6' },
          },
          {
            value: statInfo.value.courseFinishedCount,
            name: '科目已完成',
            itemStyle: { color: '#ff7875' },
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }));

  // 获取统计信息
  async function getStatInfo() {
    try {
      const data = await getReviewStatInfo();
      statInfo.value = data;
    } catch (error) {
      console.error('获取统计信息失败:', error);
    }
  }

  onMounted(() => {
    getStatInfo();
  });
</script>

<style scoped lang="less">
  .chart-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    gap: 40px;

    .chart-item {
      text-align: center;

      h3 {
        margin-bottom: 20px;
        color: #333;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
</style>