|
@@ -0,0 +1,250 @@
|
|
|
|
+<template>
|
|
|
|
+ <div style="height:100vh; min-height:1080px;">
|
|
|
|
+ <!-- 头部 -->
|
|
|
|
+ <div class="header">
|
|
|
|
+ <h1 style="color: #77F8FF;">惠州市就业驿站大数据</h1>
|
|
|
|
+ <div class="time">{{ formattedTime }}</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 内容区 -->
|
|
|
|
+ <div class="body-content">
|
|
|
|
+ <!-- 左 -->
|
|
|
|
+ <div class="side" style="padding-left: 20px;">
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">企业占比</div>
|
|
|
|
+ <div class="chart-box" id="companyPieBox"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">岗位占比</div>
|
|
|
|
+ <div class="chart-box" id="postPieBox"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">全市企业情况</div>
|
|
|
|
+ <div class="chart-box" id="companyAndPostCountBox"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 中 -->
|
|
|
|
+ <div class="center">
|
|
|
|
+ <div class="center-1">
|
|
|
|
+ <div class="nav">
|
|
|
|
+ <div class="nav-items" @click="goIndex">
|
|
|
|
+ <div class="nav-1"></div>
|
|
|
|
+ <h2 style="color: #77F8FF;">总体概况</h2></div>
|
|
|
|
+ <div class="nav-items nav-active">
|
|
|
|
+ <div class="nav-2"></div>
|
|
|
|
+ <h2 style="color: #77F8FF;">企业情况</h2></div>
|
|
|
|
+ <div class="nav-items">
|
|
|
|
+ <div class="nav-3"></div>
|
|
|
|
+ <h2 style="color: #77F8FF;">求职情况</h2></div>
|
|
|
|
+ <div class="nav-items">
|
|
|
|
+ <div class="nav-4"></div>
|
|
|
|
+ <h2 style="color: #77F8FF;">服务情况</h2></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s-box">
|
|
|
|
+ <div class="statistics t-1">
|
|
|
|
+ <div style="margin: 8px 0 0 18px; position: revert;">
|
|
|
|
+ <div class="s-title">岗位数</div>
|
|
|
|
+ <div class="s-number">{{ allSystemDataCountList.count.postCount }}</div>
|
|
|
|
+ <div class="waves" style="right: -187px; top: 42px"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="statistics t-2">
|
|
|
|
+ <div style="margin: 8px 0 0 78px; position: revert;">
|
|
|
|
+ <div class="s-title">企业数</div>
|
|
|
|
+ <div class="s-number">{{ allSystemDataCountList.count.companyCount }}</div>
|
|
|
|
+ <div class="waves" style="left: -86px; top: 42px"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="statistics t-3">
|
|
|
|
+ <div style="margin: 78px 0 0 98px; position: revert;">
|
|
|
|
+ <div class="s-title">推荐岗位数</div>
|
|
|
|
+ <div class="s-number">{{ allSystemDataCountList.count.jobUserCount }}</div>
|
|
|
|
+ <div class="waves" style="left: -106px; top: -141px"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="center-2">
|
|
|
|
+ <div class="box-bigtitle">企业规模情况</div>
|
|
|
|
+ <div class="chart-box" id="companyModelCountBox"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 右 -->
|
|
|
|
+ <div class="side" style="padding-right: 20px;">
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">本周新增企业</div>
|
|
|
|
+ <div class="chart-box">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">本月新增企业</div>
|
|
|
|
+ <div class="chart-box">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content-box">
|
|
|
|
+ <div class="box-title">本季度新增企业</div>
|
|
|
|
+ <div class="chart-box">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import {computed, onBeforeUnmount, onMounted, ref} from "vue";
|
|
|
|
+import dayjs from "dayjs";
|
|
|
|
+import weekOfYear from 'dayjs/plugin/weekOfYear';
|
|
|
|
+import weekday from 'dayjs/plugin/weekday';
|
|
|
|
+import {getCompanyAndPostByRegion, getCompanyModelCount} from "@/api/statistics";
|
|
|
|
+import {
|
|
|
|
+ initDataSetBarImageTable,
|
|
|
|
+ initPieImageTable,
|
|
|
|
+ initStackBarImageTable,
|
|
|
|
+ PieColorData
|
|
|
|
+} from "@/views/dataScreen/echarts";
|
|
|
|
+import {useRouter} from "vue-router";
|
|
|
|
+
|
|
|
|
+dayjs.extend(weekOfYear);
|
|
|
|
+dayjs.extend(weekday);
|
|
|
|
+
|
|
|
|
+const router = useRouter();
|
|
|
|
+
|
|
|
|
+// 全市数据情况
|
|
|
|
+const allSystemDataCountList = ref({
|
|
|
|
+ count: {
|
|
|
|
+ companyCount: 0,
|
|
|
|
+ postCount: 0,
|
|
|
|
+ jobUserCount: 0
|
|
|
|
+ },
|
|
|
|
+ list: []
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// 实时时间
|
|
|
|
+const currentTime = ref(new Date());
|
|
|
|
+const formattedTime = computed(() => {
|
|
|
|
+ const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
|
+ const year = currentTime.value.getFullYear();
|
|
|
|
+ const month = (currentTime.value.getMonth() + 1).toString().padStart(2, '0');
|
|
|
|
+ const date = currentTime.value.getDate().toString().padStart(2, '0');
|
|
|
|
+ const day = days[currentTime.value.getDay()];
|
|
|
|
+ const hours = currentTime.value.getHours().toString().padStart(2, '0');
|
|
|
|
+ const minutes = currentTime.value.getMinutes().toString().padStart(2, '0');
|
|
|
|
+ // const seconds = currentTime.value.getSeconds().toString().padStart(2, '0');
|
|
|
|
+
|
|
|
|
+ return `${year}-${month}-${date} ${day} ${hours}:${minutes}`;
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// 查询企业与岗位数据
|
|
|
|
+function loadCompanyAndPostCount() {
|
|
|
|
+ getCompanyAndPostByRegion({}).then((result: any) => {
|
|
|
|
+ // 生成图表需要的数据
|
|
|
|
+ let companyArr: any[] = [], postArr: any[] = [], barTableArr = [['区县', '企业数', '岗位数']];
|
|
|
|
+ let companyTotal = 0, postTotal = 0;
|
|
|
|
+ result.forEach((item: any) => {
|
|
|
|
+ if (item.regionName !== "市本级") {
|
|
|
|
+ companyTotal += item.companyCount;
|
|
|
|
+ postTotal += item.postCount;
|
|
|
|
+ const commonData = {
|
|
|
|
+ value: item.companyCount,
|
|
|
|
+ name: item.regionName,
|
|
|
|
+ itemStyle: {color: PieColorData[item.regionName]}
|
|
|
|
+ };
|
|
|
|
+ if (item.companyCount > 0) {
|
|
|
|
+ companyArr.push(commonData);
|
|
|
|
+ }
|
|
|
|
+ if (item.postCount > 0) {
|
|
|
|
+ postArr.push({...commonData, value: item.postCount});
|
|
|
|
+ }
|
|
|
|
+ barTableArr.push([item.regionName, item.companyCount, item.postCount]);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 环形图的中间文本内容
|
|
|
|
+ const createTextConfig = (text: string, total: number) => ([
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ left: 'center',
|
|
|
|
+ top: '43%',
|
|
|
|
+ style: {fill: 'rgba(119,248,255,0.7)', text, font: 'bold 12px Arial', textAlign: 'center'}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ left: 'center',
|
|
|
|
+ top: '53%',
|
|
|
|
+ style: {fill: '#77F8FF', text: total, font: 'bold 16px Arial', textAlign: 'center'}
|
|
|
|
+ }
|
|
|
|
+ ]);
|
|
|
|
+
|
|
|
|
+ initPieImageTable(companyArr, createTextConfig('企业数', companyTotal), "companyPieBox", "企业数");
|
|
|
|
+ initPieImageTable(postArr, createTextConfig('岗位数', postTotal), "postPieBox", "岗位数");
|
|
|
|
+ initDataSetBarImageTable(barTableArr, [
|
|
|
|
+ {type: 'bar', barMaxWidth: '10px', color: "#0062cc"},
|
|
|
|
+ {type: 'bar', barMaxWidth: '10px', color: '#73ecf3'}
|
|
|
|
+ ], 'companyAndPostCountBox', 3);
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 查询企业规模数据
|
|
|
|
+function loadCompanyModelCount() {
|
|
|
|
+ getCompanyModelCount().then((result: any) => {
|
|
|
|
+ console.log(result);
|
|
|
|
+
|
|
|
|
+ // 获取X轴刻度标题,去除重复项,去除“市本级”
|
|
|
|
+ const xTitleList = Array.from(new Set(result.map((item: any) => item.regionName))).filter((regionName: string) => regionName !== "市本级");
|
|
|
|
+ console.log(xTitleList);
|
|
|
|
+ // Y轴的值内容
|
|
|
|
+ const yValueList = result.filter((item: any) => item.companyModel != null && item.regionName != '市本级').reduce((acc: any, item: any) => {
|
|
|
|
+ if (!acc[item.companyModelName]) {
|
|
|
|
+ acc[item.companyModelName] = [];
|
|
|
|
+ }
|
|
|
|
+ // 将人数填充
|
|
|
|
+ acc[item.companyModelName].push(item.companyCount);
|
|
|
|
+ return acc;
|
|
|
|
+ }, {});
|
|
|
|
+ let bars: any[] = [];
|
|
|
|
+ let legendList: any[] = [];
|
|
|
|
+ for (let key in yValueList) {
|
|
|
|
+ legendList.push(key);
|
|
|
|
+ bars.push({
|
|
|
|
+ name: key,
|
|
|
|
+ type: 'bar',
|
|
|
|
+ barMaxWidth: '15px',
|
|
|
|
+ stack: 'ageRange',
|
|
|
|
+ emphasis: {focus: 'series'},
|
|
|
|
+ data: yValueList[key]
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ initStackBarImageTable(xTitleList, bars, legendList, 'companyModelCountBox')
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 跳转首页
|
|
|
|
+function goIndex() {
|
|
|
|
+ router.push({name: "dataScreenIndex"})
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ loadCompanyAndPostCount();
|
|
|
|
+ loadCompanyModelCount();
|
|
|
|
+
|
|
|
|
+ currentTime.value = new Date();
|
|
|
|
+ const timer = setInterval(() => {
|
|
|
|
+ currentTime.value = new Date();
|
|
|
|
+ }, 1000);
|
|
|
|
+ onBeforeUnmount(() => {
|
|
|
|
+ clearInterval(timer);
|
|
|
|
+ });
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+@import url('@/views/dataScreen/html/css/reset.css');
|
|
|
|
+@import url('@/views/dataScreen/html/css/style.css');
|
|
|
|
+</style>
|