|
|
@@ -15,7 +15,7 @@
|
|
|
</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 type="primary" html-type="submit" @click="loadData" :loading="tableLoading">查询</a-button>
|
|
|
<a-button style="margin: 0 8px" @click="onReset">重置</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
@@ -24,7 +24,7 @@
|
|
|
<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-group v-model:value="dataType" button-style="solid" @change="dataTypeChange">
|
|
|
<a-radio-button value="table">表格</a-radio-button>
|
|
|
<a-radio-button value="imageTable">图表</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
@@ -45,17 +45,21 @@
|
|
|
bordered>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
- <div v-show="dataType == 'imageTable'">
|
|
|
-
|
|
|
+ <div v-show="dataType == 'imageTable'" class="image-table-box">
|
|
|
+ <div id="companyImageTable" class="echarts-main"></div>
|
|
|
+ <div id="postImageTable" class="echarts-main"></div>
|
|
|
+ <div id="jobUserImageTable" class="echarts-main"></div>
|
|
|
+ <div id="weekCountImageTable" class="echarts-main"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {computed, onMounted, reactive, ref} from "vue";
|
|
|
+import {computed, nextTick, onMounted, reactive, ref} from "vue";
|
|
|
import {getMonthSystemDataCount} from "@/api/statistics";
|
|
|
import dayjs from "dayjs";
|
|
|
import BExportExcel from "@/components/basic/excel/exportExcel/exportExcel.vue";
|
|
|
+import {initBarImageTable, initLineImageTable} from "@/utils/echartsUtil";
|
|
|
|
|
|
// 查询条件
|
|
|
const searchParams = reactive({
|
|
|
@@ -87,40 +91,125 @@ const originalColumns = ref<Array<any>>([
|
|
|
]
|
|
|
}
|
|
|
])
|
|
|
+// 查询方法未处理的初始数据
|
|
|
+const searchOriginalList = ref();
|
|
|
|
|
|
// 数据加载
|
|
|
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
|
|
|
- });
|
|
|
- });
|
|
|
+ searchOriginalList.value = result;
|
|
|
+ if (dataType.value == 'table') {
|
|
|
+ analysisByTable();
|
|
|
}
|
|
|
- // 初始化表结构
|
|
|
- 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');
|
|
|
+ if (dataType.value == 'imageTable') {
|
|
|
+ analysisByImageTable();
|
|
|
}
|
|
|
- // 解析汇总数据
|
|
|
- initTableData(result, '汇总', arr, 'hz');
|
|
|
- systemApplyCount.value = arr;
|
|
|
}).finally(() => {
|
|
|
tableLoading.value = false;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+// 解析生成表格内容
|
|
|
+function analysisByTable() {
|
|
|
+ let arr = new Array<any>();
|
|
|
+ // 获取到区县名称信息
|
|
|
+ if (searchOriginalList.value && Object.keys(searchOriginalList.value).length > 0) {
|
|
|
+ // 获取到查询结果Map中的第一个键值对，解析获取到县区信息，填充进初始数组中
|
|
|
+ searchOriginalList.value[Object.keys(searchOriginalList.value)[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(searchOriginalList.value, '第' + i + '周', arr, i + 'z');
|
|
|
+ }
|
|
|
+ // 解析汇总数据
|
|
|
+ initTableData(searchOriginalList.value, '汇总', arr, 'hz');
|
|
|
+ systemApplyCount.value = arr;
|
|
|
+}
|
|
|
+
|
|
|
+function analysisByImageTable() {
|
|
|
+ let regionNameList = new Array<any>();
|
|
|
+ let weekNameList = new Array<any>();
|
|
|
+
|
|
|
+ // 获取到区县名称信息
|
|
|
+ if (searchOriginalList.value && Object.keys(searchOriginalList.value).length > 0) {
|
|
|
+ // 获取到查询结果Map中的第一个键值对，解析获取到县区信息，填充进初始数组中
|
|
|
+ searchOriginalList.value[Object.keys(searchOriginalList.value)[0]].forEach((item: any) => {
|
|
|
+ if (item.regionCode != 100) {
|
|
|
+ regionNameList.push(item.regionName);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 初始化折线图数据
|
|
|
+ let weekLineData = [
|
|
|
+ {
|
|
|
+ name: '驿站人员数量',
|
|
|
+ type: 'line',
|
|
|
+ data: new Array<any>()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '录入企业数量',
|
|
|
+ type: 'line',
|
|
|
+ data: new Array<any>()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '收集岗位数量',
|
|
|
+ type: 'line',
|
|
|
+ data: new Array<any>()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '登记求职人数',
|
|
|
+ type: 'line',
|
|
|
+ data: new Array<any>()
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 解析第一周到第五周的统计数据
|
|
|
+ for (let i = 1; i <= 5; i++) {
|
|
|
+ if (searchOriginalList.value['第' + i + '周']) {
|
|
|
+ weekNameList.push('第' + i + '周');
|
|
|
+
|
|
|
+ // 查询获取到每周的合计总数，填充进折线图数据中
|
|
|
+ const hjData = searchOriginalList.value['第' + i + '周'].find(item => item.regionCode == '100');
|
|
|
+ if (hjData) {
|
|
|
+ weekLineData[0].data.push(hjData.siteUserCount);
|
|
|
+ weekLineData[1].data.push(hjData.companyCount);
|
|
|
+ weekLineData[2].data.push(hjData.postCount);
|
|
|
+ weekLineData[3].data.push(hjData.jobUserCount);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 收集图表数据
|
|
|
+ let companyImageTableData = new Array<any>();
|
|
|
+ let postImageTableData = new Array<any>();
|
|
|
+ let jobUserImageTableData = new Array<any>();
|
|
|
+ searchOriginalList.value['汇总'].forEach((item: any) => {
|
|
|
+ if (item.regionCode != 100) {
|
|
|
+ companyImageTableData.push(item.companyCount)
|
|
|
+ postImageTableData.push(item.postCount)
|
|
|
+ jobUserImageTableData.push(item.jobUserCount)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 初始化图表
|
|
|
+ initBarImageTable(regionNameList, companyImageTableData, "companyImageTable", '录入企业数量');
|
|
|
+ initBarImageTable(regionNameList, postImageTableData, "postImageTable", "收集岗位数量");
|
|
|
+ initBarImageTable(regionNameList, jobUserImageTableData, "jobUserImageTable", "登记求职人数");
|
|
|
+ initLineImageTable(weekNameList, weekLineData, "weekCountImageTable", "全市就业驿站运行概括");
|
|
|
+}
|
|
|
+
|
|
|
// 查询表单
|
|
|
function onReset() {
|
|
|
searchParams.dateStr = dayjs(new Date().getDate()).format("YYYY-MM");
|
|
|
@@ -187,6 +276,15 @@ function initTableData(result: any, resultKey: any, arr: any, arrNewKey: any) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function dataTypeChange(value: any) {
|
|
|
+ if (dataType.value == 'table') {
|
|
|
+ analysisByTable();
|
|
|
+ }
|
|
|
+ if (dataType.value == 'imageTable') {
|
|
|
+ nextTick(analysisByImageTable);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
searchParams.dateStr = dayjs().format("YYYY-MM");
|
|
|
loadData();
|
|
|
@@ -201,5 +299,15 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.image-table-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
|
|
|
+ .echarts-main {
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
