EmploymentSite/vue/src/views/statistics/MonthSystemApplyCount.vue

<template>
  <div class="card-search">
    <!-- 查询表单 -->
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="searchParams"
    >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="查询月份" :label-col="{span:6}" name="reportDate">
            <a-date-picker format="YYYY-MM" picker="month" v-model:value="pickerDate" :allow-clear="false"
                           @change="pickerDateChange"/>
          </a-form-item>
        </a-col>
        <a-col :span="6" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="loadData">查询</a-button>
          <a-button style="margin: 0 8px" @click="onReset">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <!-- 操作按钮 -->
    <a-row class="edit-operation" style="margin-bottom: 20px">
      <a-col :span="24" class="flex-space-between">
        <div>
          <a-radio-group v-model:value="dataType" button-style="solid">
            <a-radio-button value="table">表格</a-radio-button>
            <a-radio-button value="imageTable">图表</a-radio-button>
          </a-radio-group>
        </div>
        <div>
          <BExportExcel :filename="'系统使用情况统计'"
                        :params="{...exportSearchParams}"
                        :title="'导出'"
                        :url="'statistics/export/systemApplyCount'"></BExportExcel>
        </div>
      </a-col>
    </a-row>
    <!-- 数据展示 -->
    <div v-show="dataType == 'table'">
      <a-table :columns="originalColumns" :data-source="systemApplyCount" :scroll="{ x:'1300' }"
               :loading="tableLoading"
               :pagination="false"
               bordered>
      </a-table>
    </div>
    <div v-show="dataType == 'imageTable'">

    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {getMonthSystemDataCount} from "@/api/statistics";
import dayjs from "dayjs";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";

// 查询条件
const searchParams = reactive({
  dateStr: "",
})
// 导出Excel查询参数
const exportSearchParams = computed(() => {
  return JSON.parse(JSON.stringify(searchParams));
})
const pickerDate = ref<any>(dayjs());
// 表格加载
const tableLoading = ref(false);
// 展示类型切换
const dataType = ref("table");
// 统计数据
const systemApplyCount = ref<Array<any>>([]);
// 表格定义
const originalColumns = ref<Array<any>>([
  {
    title: '项目', dataIndex: 'regionName', key: 'regionName', align: "center", width: 200, fixed: 'left'
  },
  {
    title: '第一周',
    children: [
      {title: '驿站人员数量', dataIndex: 'siteUserCount', key: 'siteUserCount', width: 120, align: "center"},
      {title: '录入企业数量', dataIndex: 'companyCount', key: 'companyCount', width: 120, align: "center"},
      {title: '收集岗位数量', dataIndex: 'postCount', key: 'postCount', width: 120, align: "center"},
      {title: '登记求职人数', dataIndex: 'jobUserCount', key: 'jobUserCount', width: 120, align: "center"},
    ]
  }
])

// 数据加载
function loadData() {
  tableLoading.value = true;
  getMonthSystemDataCount(searchParams).then((result: any) => {
    console.log(result);
    // 初始化数据，获取到区县名称
    let arr = new Array<any>();
    if (result && Object.keys(result).length > 0) {
      // 获取到查询结果Map中的第一个键值对，解析获取到县区信息，填充进初始数组中
      result[Object.keys(result)[0]].forEach((item: any) => {
        arr.push({
          regionCode: item.regionCode,
          regionName: item.regionName
        });
      });
    }
    // 初始化表结构
    originalColumns.value = [{
      title: '项目', dataIndex: 'regionName', key: 'regionName', align: "center", width: 200, fixed: 'left'
    }]
    // 解析第一周到第五周的统计数据
    for (let i = 1; i <= 5; i++) {
      // 填充数据
      initTableData(result, '第' + i + '周', arr, i + 'z');
    }
    // 解析汇总数据
    initTableData(result, '汇总', arr, 'hz');
    systemApplyCount.value = arr;
  }).finally(() => {
    tableLoading.value = false;
  })
}

// 查询表单
function onReset() {
  searchParams.dateStr = dayjs(new Date().getDate()).format("YYYY-MM");
  loadData()
}

// 日期变更事件
function pickerDateChange(date: any, dateStr: string) {
  console.log(date);
  searchParams.dateStr = dateStr;
  loadData();
}

// 表格数据与结构定义初始化
function initTableData(result: any, resultKey: any, arr: any, arrNewKey: any) {
  if (!result[resultKey]) {
    return;
  }
  // 填充数据
  result[resultKey].forEach((item: any) => {
    let arrItem = arr.find((arrElement: any) => arrElement.regionCode === item.regionCode);
    if (arrItem) {
      // 将item的其他字段重命名，然后将其赋值给arr中对应的元素
      Object.keys(item).forEach(key => {
        if (key !== 'regionCode' && key !== 'regionName') {
          arrItem[key + arrNewKey] = item[key];
        }
      });
    }
  })
  // 填充表结构
  originalColumns.value.push({
    title: resultKey,
    children: [
      {
        title: '驿站人员数量',
        dataIndex: 'siteUserCount' + arrNewKey,
        key: 'siteUserCount' + arrNewKey,
        width: 120,
        align: "center"
      },
      {
        title: '录入企业数量',
        dataIndex: 'companyCount' + arrNewKey,
        key: 'companyCount' + arrNewKey,
        width: 120,
        align: "center"
      },
      {
        title: '收集岗位数量',
        dataIndex: 'postCount' + arrNewKey,
        key: 'postCount' + arrNewKey,
        width: 120,
        align: "center"
      },
      {
        title: '登记求职人数',
        dataIndex: 'jobUserCount' + arrNewKey,
        key: 'jobUserCount' + arrNewKey,
        width: 120,
        align: "center"
      },
    ]
  })
}

onMounted(() => {
  searchParams.dateStr = dayjs().format("YYYY-MM");
  loadData();
})
</script>

<script lang="ts">
// 设置页面名称进行组件缓存
export default {
  name: "MonthSystemApplyDataCount",
}
</script>

<style scoped>

</style>