marking-cet-web/src/modules/quality/ending-check/components/SubjectProgress.vue

<template>
  <div class="p-base">
    <div class="fill-blank radius-base p-base chart-info">
      <vue-e-charts v-loading="loading" class="full" :option="totalChartsOption" autoresize></vue-e-charts>
    </div>
    <div class="m-t-base fill-blank radius-base p-base">
      <base-table
        v-loading="loading"
        border
        stripe
        size="small"
        :data="subjectProgressEndList"
        :columns="columns"
        :span-method="tableSpanMethod"
      ></base-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="SubjectProgress">
/** 科目进度 */
import { reactive, ref, computed } from 'vue'
import { minus } from '@/utils/common'
import useFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'
import VueECharts from 'vue-echarts'
import BaseTable from '@/components/element/BaseTable.vue'

import type { EChartsOption } from 'echarts'
import type { ExtractApiResponse } from '@/api/api'
import type { EpTableColumn, InstanceTable } from 'global-type'

type SubjectProgress = ExtractArrayValue<ExtractApiResponse<'subjectProgressEnd'>>

const mainStore = useMainStore()

const { fetch: subjectProgressEnd, result: subjectProgressEndList, loading } = useFetch('subjectProgressEnd')

subjectProgressEnd({ subjectCode: mainStore.myUserInfo?.subjectCode || '' })

const getMainName = (row?: SubjectProgress) => {
  const { questionMainName: name, questionMainNumber: number } = row || {}
  return [number, name].filter(Boolean).join('-')
}

const getYAxisData = (field: keyof SubjectProgress | 'name', data?: SubjectProgress[]) => {
  if (!data) {
    return []
  }
  return data.map((v) => {
    if (field === 'name') {
      return getMainName(v)
    }
    return v[field]
  })
}

const totalChartsOption = computed<EChartsOption>(() => {
  return {
    grid: {
      top: 20,
      bottom: -20,
      left: 20,
      right: 30,
      containLabel: true,
    },
    legend: {
      right: 0,
      itemWidth: 14,
      data: ['试卷总量', '已完成', '完成比'],
    },
    yAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      inverse: true,
      axisLabel: {
        align: 'right',
        verticalAlign: 'bottom',
      },
      data: getYAxisData('name', subjectProgressEndList?.value),
    },
    xAxis: [
      {
        position: 'top',
        type: 'value',
        splitLine: { show: true },
      },
      {
        position: 'bottom',
        type: 'value',
        show: false,
        axisLabel: {
          formatter: `{value}%`,
        },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: '试卷总量',
        type: 'bar',
        barWidth: 11,
        barGap: '-200%',
        itemStyle: {
          color: '#3AD500',
        },
        data: getYAxisData('totalPaper', subjectProgressEndList?.value),
      },
      {
        name: '已完成',
        type: 'bar',
        barWidth: 11,
        barGap: '-200%',
        itemStyle: {
          color: '#0064FF',
        },
        data: getYAxisData('finishCount', subjectProgressEndList?.value),
      },
      {
        name: '完成比',
        type: 'bar',
        barWidth: 44,
        barGap: '-200%',
        showBackground: true,
        xAxisIndex: 1,
        itemStyle: {
          color: 'rgba(0, 186, 151,0.3)',
        },
        label: {
          show: true,
          color: '#444',
          fontSize: 10,
          formatter({ value }) {
            return value > 0 ? `${value}%` : ''
          },
          position: 'insideTopRight',
        },
        data: getYAxisData('finishRate', subjectProgressEndList?.value),
      },
    ],
  }
})

const columns: EpTableColumn<SubjectProgress>[] = [
  {
    label: '科目',
    formatter() {
      return mainStore.myUserInfo?.subjectCode + '-' + mainStore.myUserInfo?.subjectName
    },
  },
  { label: '大题', prop: 'questionMainName', width: 80 },
  { label: '试卷总量', prop: 'totalPaper', width: 90 },
  { label: '已完成', prop: 'finishCount', width: 70 },
  {
    label: '完成比',
    prop: 'finishRate',
    width: 70,
    formatter(row) {
      return `${row.finishRate}%`
    },
  },
  {
    label: '待完成',
    width: 90,
    formatter(row) {
      return `${minus(row.totalPaper, row.finishCount)}`
    },
  },
  {
    label: '待完成比',
    width: 90,
    prop: 'totalPaper',
    formatter(row) {
      return `${minus(100, row.finishRate)}%`
    },
  },
  { label: '问题卷待处理', prop: 'todoProblemPaperCount', width: 110 },
  { label: '雷同卷待处理', prop: 'todoSamePaperCount', width: 110 },
  { label: '主观题校验待处理', prop: 'subjectiveUnVerifyPaperCount', width: 140 },
  {
    label: '抽查比例',
    prop: 'checkPaperRate',
    width: 90,
    formatter(row) {
      return `${row.checkPaperRate}%`
    },
  },
  { label: '仲裁卷待处理', prop: 'todoArbitrationPaperCount', width: 110 },
  {
    label: '仲裁率',
    prop: 'arbitrationPaperRate',
    width: 70,
    formatter(row) {
      return `${row.arbitrationPaperRate}%`
    },
  },
]

const tableSpanMethod: InstanceTable['spanMethod'] = (scope) => {
  if (scope.columnIndex === 0) {
    if (scope.rowIndex === 0) {
      return {
        rowspan: subjectProgressEndList.value?.length || 1,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  return {
    rowspan: 1,
    colspan: 1,
  }
}
</script>

<style scoped lang="scss">
.chart-info {
  height: 260px;
}
</style>