front/src/views/system/user/profile/round-report.vue

<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="fx-row fx-bet-cen">
          <div class="fx-row">
            <round-settings v-if="isFrontMaster" class="mr10"></round-settings>
            <round-history></round-history>
          </div>
          <span>选科管理</span>
        </div>
      </template>
      <mx-condition :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"></mx-condition>
      <el-card v-if="summary" shadow="hover" class="mt20">
        <div class="fx-row fx-bet-cen">
          <span class="fx-1">总人数：{{ summary.total }}</span>
          <span class="fx-1">已选人数：{{ summary.selected }}</span>
          <span>未选人数：{{ summary.total - summary.selected }}</span>
          <el-button type="primary" plain @click="handleMessageSend" icon="el-icon-s-promotion"
                     size="small" class="ml40">发送选科消息
          </el-button>
        </div>
      </el-card>
      <el-card v-if="summary" shadow="hover" class="mt20">
        <template #header>
          <div class="text-right">科目组合人数统计</div>
        </template>
        <el-row>
          <el-col :span="16">
            <mx-chart :options="groupChartData" height="400px"></mx-chart>
          </el-col>
          <el-col :span="8">
            <mx-table :prop-defines="groupTableData.propDefines" :rows="groupTableData.dataList">
              <template #detail="{row}">
                <el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">查看</el-button>
              </template>
            </mx-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-if="summary" shadow="hover" class="mt20">
        <template #header>
          <div class="text-right">单科人数统计</div>
        </template>
        <el-row>
          <el-col :span="16">
            <mx-chart :options="subjectChartData" height="400px"></mx-chart>
          </el-col>
          <el-col :span="8">
            <mx-table-dynamic :local-data="subjectTableData"></mx-table-dynamic>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-dialog :visible.sync="detailDialogVisible" title="选科详情">
      <mx-table-dynamic :local-data="detailTable"></mx-table-dynamic>
    </el-dialog>
  </div>
</template>

<script>
import RoundSettings from '@/views/permission/components/round-settings'
import RoundHistory from '@/views/system/user/profile/components/round-history'
import MxCondition from '@/components/MxCondition/mx-condition'
import { mapGetters } from 'vuex'
import { getSelectDetail, getSelectReport, sendSelectedNotice } from '@/api/webApi/selection'
import MxChart from '@/components/MxChart/index'
import MxTableDynamic from '@/components/MxTableDynamic/index'

export default {
  name: 'round-select-manage',
  components: { MxTableDynamic, MxChart, MxCondition, RoundHistory, RoundSettings },
  data() {
    return {
      requireFields: ['year', 'roundId'],
      queryParams: {
        year: '',
        roundId: ''
      },
      reportData: {},
      detailDialogVisible: false,
      detailTable: {}
    }
  },
  computed: {
    ...mapGetters(['isFrontMaster']),
    summary() {
      return this.reportData?.group?.options
    },
    subjectChartData() {
      if (!this.reportData?.subject?.columns?.length) return null
      const subjectTable = this.reportData.subject
      const { columns, rows } = this.dynamicTableExchangeRowColumn(subjectTable)
      const option = {
        title: {
          text: '选科统计',
          subtext: '单科/学生数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: columns.slice(1)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: rows.first().slice(1),
          type: 'bar',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      return option
    },
    subjectTableData() {
      return this.reportData?.subject || {}
    },
    groupChartData() {
      if (!this.reportData?.group?.columns?.length) return null
      const groupTable = this.reportData.group
      const data = groupTable.rows.map(r => ({
        name: r[0],
        value: r[1]
      }))
      const option = {
        title: {
          text: '选科统计',
          subtext: '组合/学生数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: groupTable.columns.first(),
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      return option
    },
    groupTableData() {
      if (!this.reportData?.group) return {}
      const groupTable = this.reportData.group
      const dataList = this.reverseDynamicTableToObjects(groupTable)
      const propDefines = {}
      propDefines[groupTable.columns.first()] = {
        label: groupTable.columns.first() // 组合
      }
      propDefines[groupTable.columns[1]] = {
        label: groupTable.columns[1] // 人数
      }
      propDefines['detail'] = {
        label: '详情', // 详情
        slot: 'detail'
      }
      return {
        dataList,
        propDefines
      }
    }
  },
  beforeMount() {
    if (this.isFrontMaster) {
      this.queryParams = {
        ...this.queryParams,
        classGradeId: '',
        classId: ''
      }
    }
  },
  methods: {
    handleQuery(model) {
      getSelectReport({
        year: model.year,
        roundId: model.roundId,
        gradeIds: model.classGradeId,
        classIds: model.classId
      }).then(res => this.reportData = res.data)
    },
    handleInvalidQuery() {
      this.reportData = {}
    },
    handleMessageSend() {
      if (!this.queryParams.roundId) {
        this.msgError('请选择次数')
        return
      }
      if (this.summary.total && this.summary.total == this.summary.selected) {
        this.msgError('所有学生均已完成选科')
        return
      }
      sendSelectedNotice({
        year: this.queryParams.year,
        roundId: this.queryParams.roundId
      }).then(res => {
        this.msgSuccess('发送成功')
      })
    },
    handleViewDetail(row) {
      getSelectDetail({
        year: this.queryParams.year,
        gradeIds: this.queryParams.classGradeId,
        classIds: this.queryParams.classId,
        roundId: row.roundId,
        groupId: row.groupId
      }).then(res => {
        this.detailTable = res.data
        this.detailDialogVisible = true
      })
    }
  }
}
</script>

<style scoped>
.fat-button {
}
</style>