EmploymentSite/vue/src/views/statistics/SystemApplyCount.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-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
                            @change="onRangeChange"/>
          </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">
      <a-col :span="24" class="flex-space-between">
        <div>

        </div>
        <div>
          <BExportExcel :filename="'系统使用情况统计'"
                        :params="{...exportSearchParams}"
                        :title="'导出'"
                        :url="'statistics/export/systemApplyCount'"></BExportExcel>
        </div>
      </a-col>
    </a-row>
    <div class="search-result-list">
      <a-table :columns="originalColumns" :data-source="systemApplyCount" :scroll="{ x:'100%' }"
               :loading="tableLoading"
               :pagination="false"
               bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key == 'regionName'">
            <div>
              {{ record.regionName }}
            </div>
          </template>
          <template v-if="column.key == 'siteName'">
            <div>
              {{ record.siteName }}
            </div>
          </template>
          <template v-if="column.key == 'siteUserCount'">
            <div>
              {{ record.siteUserCount }}
            </div>
          </template>
          <template v-if="column.key == 'companyCount'">
            <div>
              {{ record.companyCount }}
            </div>
          </template>
          <template v-if="column.key == 'postCount'">
            <div>
              {{ record.postCount }}
            </div>
          </template>
          <template v-if="column.key == 'jobUserCount'">
            <div>
              {{ record.jobUserCount }}
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {getSystemApplyCount} from "@/api/statistics";
import type {FormInstance, TableColumnType} from "ant-design-vue";
import dayjs from "dayjs";
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";

const formRef = ref<FormInstance>();

const originalColumns: TableColumnType[] = [
  {
    title: '行政区划', dataIndex: 'regionName', key: 'regionName', align: "center", width: 250,
    customCell: (record, index: any) => {
      const obj = {
        colSpan: 1,
        rowSpan: 1,
      };
      if (record.regionName == '合计') {
        obj.colSpan = 2;
      }
      if (index === 0 || record.regionName !== systemApplyCount.value[index - 1].regionName) {
        for (let i = index + 1; i < systemApplyCount.value.length; i++) {
          if (systemApplyCount.value[i].regionName == record.regionName) {
            obj.rowSpan++;
          } else {
            break;
          }
        }
      } else {
        obj.rowSpan = 0;
      }
      return obj;
    },
  },
  {
    title: '驿站名', dataIndex: 'siteName', key: 'siteName', align: "center", width: 250,
    customCell: (record) => {
      const obj = {
        colSpan: 1,
      };
      if (record.siteName == '合计') {
        obj.colSpan = 0;
      }
      return obj;
    },
  },
  {title: '驿站人员数量', dataIndex: 'siteUserCount', key: 'siteUserCount', align: "center"},
  {title: '录入企业数量', dataIndex: 'companyCount', key: 'companyCount', align: "center"},
  {title: '收集岗位数量', dataIndex: 'postCount', key: 'postCount', align: "center"},
  {title: '登记求职人数', dataIndex: 'jobUserCount', key: 'jobUserCount', align: "center"},
]

// 统计数据
const systemApplyCount = ref<Array<any>>([]);
// 查询条件
const searchParams = reactive({
  startDate: "",
  endDate: ""
})
// 表格加载
const tableLoading = ref(false);
// const reportDate = ref();
// 导出Excel查询参数
const exportSearchParams = computed(() => {
  return JSON.parse(JSON.stringify(searchParams));
})

// 数据加载
function loadData() {
  tableLoading.value = true;
  getSystemApplyCount(searchParams).then((result: any) => {
    systemApplyCount.value = result;
  }).finally(() => {
    tableLoading.value = false;
  })
}

// 时间段变更事件
const onRangeChange = (dateString: [string, string]) => {
  searchParams.startDate = dateString != null ? dayjs(dateString[0]).format("YYYY-MM-DD") : "";
  searchParams.endDate = dateString != null ? dayjs(dateString[1]).format("YYYY-MM-DD") : "";
};

// 查询表单
function onReset() {
  formRef.value?.resetFields();
  loadData()
}

// 页面初始化
onMounted(() => {
  loadData()
})
</script>

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

<style lang="less">
.totalCol {
  background-color: #40a9ff !important;
}
</style>