marking-cet-web/src/modules/analysis/group-monitoring/index.vue

<template>
  <div class="flex direction-column full group-monitoring-view">
    <div class="p-l-base p-r-base p-t-medium-base fill-blank">
      <base-form size="small" :label-width="'60px'" :disabled="loading" :model="model" :items="items">
        <template #form-item-button-group>
          <el-button :loading="loading" type="primary" @click="onSearch">刷新</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="radius-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
        <base-table border stripe size="small" :columns="columns" :data="result">
          <template #column-leader="{ row }">
            <div style="text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
              <span
                :style="{
                  backgroundColor: row.online ? '#00B42A' : '#ddd',
                  display: 'inline-block',
                  width: '10px',
                  height: '10px',
                  marginRight: '4px',
                  borderRadius: '2px',
                }"
              ></span>
              <span>{{ row.markingGroupLeader }}</span>
            </div>
          </template>
        </base-table>
      </div>

      <div class="radius-base m-t-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
        <div class="chart-wrap">
          <vue-echarts :option="chartOptions" autoresize></vue-echarts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="AnalysisGroupMonitoring">
/** 小组监控 */
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useFormFilter from './hooks/useFormFilter'
import { reactive } from 'vue'
import VueEcharts from 'vue-echarts'
import type { EpTableColumn } from 'global-type'
import type { ExtractApiResponse } from '@/api/api'
const jumpParams = reactive<any>({
  subjectCode: '',
  questionMainNumber: void 0,
})
const { push } = useRouter()

const { model, formModel, items, onOptionInit } = useFormFilter()

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

const columns: any = [
  {
    label: '组长',
    prop: 'markingGroupLeader',
    width: 150,
    fixed: 'left',
    slotName: 'leader',
    align: 'left',
  },
  {
    label: '已浏览试卷总数',
    prop: 'totalCount',
    minWidth: 138,
    sortable: true,
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'VIEW')}>
          {row.totalCount}
        </ElButton>
      )
    },
  },
  {
    label: '已给分试卷总数',
    prop: 'totalReScoreCount',
    minWidth: 138,
    sortable: true,
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'MARK')}>
          {row.totalReScoreCount}
        </ElButton>
      )
    },
  },
  { label: '已浏览系统抽查卷数', prop: 'sysCheckCount', minWidth: 160, sortable: true },
  { label: '已给分系统抽查卷数', prop: 'sysCheckReScoreCount', minWidth: 160, sortable: true },
  { label: '打回量', prop: 'rejectCount', minWidth: 85, sortable: true },
  { label: '主动抽查次数', prop: 'initiativeCheckCount', minWidth: 120, sortable: true },
  { label: '主动抽查给分次数', prop: 'initiativeCheckReScoreCount', minWidth: 150, sortable: true },

  { label: '已浏览问题卷数', prop: 'problemCount', minWidth: 138, sortable: true },
  { label: '已给分问题卷数', prop: 'problemReScoreCount', minWidth: 138, sortable: true },
  { label: '已浏览自定义抽查卷数', prop: 'customCheckCount', minWidth: 178, sortable: true },
  { label: '已给分自定义抽查卷数', prop: 'customCheckReScoreCount', minWidth: 178, sortable: true },
]

/** 刷新按钮 */
function onSearch() {
  let markingGroupNumbers: any = formModel.value.markingGroupNumbers
  if (
    !markingGroupNumbers ||
    (Array.isArray(markingGroupNumbers) && markingGroupNumbers.length !== markingGroupNumbers.filter((v) => !!v).length)
  ) {
    markingGroupNumbers = []
  }
  getGroupMonitor({ ...formModel.value, markingGroupNumbers }).then(() => {
    jumpParams.subjectCode = formModel.value.subjectCode
    jumpParams.questionMainNumber = formModel.value.questionMainNumber
  })
}

/** 查看抽查详情 */

function viewMonitoringDetail(
  row: ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>,
  operateType: 'VIEW' | 'MARK'
) {
  push({
    name: 'AnalysisGroupDetail',
    query: {
      operateType,
      headerId: row.markingGroupLeaderId,
      source: '组长监控',
      subjectCode: jumpParams.subjectCode,
      questionMainNumber: jumpParams.questionMainNumber,
    },
  })
}

onOptionInit(onSearch)

const chartOptions = computed(() => {
  return {
    grid: {
      top: 50,
      bottom: 15,
      left: 30,
      right: 30,
      containLabel: true,
    },
    legend: {
      top: 10,
      itemWidth: 14,
      data: ['已浏览', '已给分'],
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
    },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      // axisLabel: {
      //   align: 'right',
      // },
      data: result.value?.map((item) => item.markingGroupLeader) || [],
    },
    yAxis: {
      axisTick: { show: false },
      type: 'value',
    },

    series: [
      {
        name: '已浏览',
        type: 'bar',
        itemStyle: {
          color: '#0064FF',
        },
        data: result.value?.map((item) => item.totalCount) || [],
        label: {
          show: true,
          color: '#444',
          fontSize: 10,
          position: 'top',
          formatter({ value }) {
            return value > 0 ? `${value}` : ''
          },
        },
      },
      {
        name: '已给分',
        type: 'bar',
        itemStyle: {
          color: '#3AD500',
        },
        data: result.value?.map((item) => item.totalReScoreCount) || [],
        label: {
          show: true,
          color: '#444',
          fontSize: 10,
          position: 'top',
          formatter({ value }) {
            return value > 0 ? `${value}` : ''
          },
        },
      },
    ],
  }
})
</script>

<style scoped lang="scss">
.group-monitoring-view {
  .chart-wrap {
    height: 300px;
  }
}
</style>