school-developer/src/views/recruit/recruitstudentsignup/areaStaticByCZ.vue

<template>
  <div class="mod-config">
    <basic-container>
      <el-form :inline="true" :model="dataForm" @keyup.enter="handleFilter" ref="searchFormRef">
        <el-form-item label="招生计划" prop="groupId">
          <el-select v-model="dataForm.groupId" filterable placeholder="请选择招生计划" size="small">
            <el-option
              v-for="item in planList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="Search" type="primary" size="small"
                      @click="handleFilter">查询
          </el-button>
          <el-button icon="Delete" type="default" plain size="small"
                     @click="resetForm">清空
          </el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-button icon="Download" type="warning" size="small" @click="dataExportHandle">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border stripe v-loading="dataListLoading"
                  :summary-method="getSummaries" show-summary
        >
          <el-table-column align="center" header-align="center" prop="provinceName" label="省市" />
          <el-table-column align="center" header-align="center" prop="peopleNum" label="人数" />
          <el-table-column align="center" header-align="center" prop="peopleRate" label="占比" />
        </el-table>

        <chart ref="typeEchartBarRef" style="width:100%;margin-top:80px" :options="chartOption" theme="macarons"></chart>

      </div>
    </basic-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { getAreaStatic } from "@/api/recruit/recruitstudentsignup"
import { getList } from "@/api/recruit/recruitstudentplangroup"

// 响应式数据
const dataForm = reactive({
  groupId: "",
  degreeOfEducation: ""
})

const dataList = ref<any[]>([])
const planList = ref<any[]>([])
const dataListLoading = ref(false)
const chartOption = ref<any>({})
const searchFormRef = ref()
const typeEchartBarRef = ref()

// 初始化
const init = () => {
  getList().then((data: any) => {
    planList.value = data.data
    if (planList.value.length > 0) {
      dataForm.groupId = planList.value[0].id
    }
    getDataList()
  })
}

// 获取数据列表
const getDataList = () => {
  dataList.value = []
  dataForm.degreeOfEducation = '1'
  dataListLoading.value = true
  getAreaStatic(dataForm).then((response: any) => {
    dataList.value = response.data
    chartOption.value = response.data.option
    dataListLoading.value = false
  }).catch(() => {
    dataListLoading.value = false
  })
}

// 导出Excel
const exportExcel = (form: any, url: string) => {
  return axios({
    method: 'post',
    url: url,
    data: form,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

// 导出表格
const dataExportHandle = () => {
  exportExcel(dataForm, '/recruit/recruitstudentsignup/getAreaStaticExport').then((res: any) => {
    const blob = new Blob([res.data])
    const fileName = '按地区导出.xls'
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }).catch(() => {
    // 错误处理
  })
}

// 表格汇总
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: any[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '总计'
    } else if (index !== 0) {
      const values = data.map((item: any) => Number(item[column.property]))
      if (!values.every((value: number) => isNaN(value))) {
        sums[index] = values.reduce((prev: number, curr: number) => {
          const numValue = Number(curr)
          if (!isNaN(numValue)) {
            return prev + numValue
          } else {
            return prev
          }
        }, 0)
      } else {
        sums[index] = '--'
      }
    } else {
      sums[index] = '--'
    }
  })
  return sums
}

// 查询
const handleFilter = () => {
  getDataList()
}

// 重置表单
const resetForm = () => {
  searchFormRef.value?.resetFields()
}

// 组件挂载时初始化
onMounted(() => {
  init()
})
</script>

<style scoped>
.avue-crud {
  margin-top: 20px;
}
</style>