|
@@ -0,0 +1,205 @@
|
|
|
+<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>
|