EmploymentSite/vue/src/views/dataScreen/html/company.vue

<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>