EmploymentSite/vue/src/views/dataScreen/html/copy.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="yearSystemApplyBox"></div>
        </div>
        <div class="content-box">
          <div class="box-title">岗位占比</div>
          <div class="chart-box" id="employedCountBox"></div>
        </div>
        <div class="content-box">
          <div class="box-title">全市企业情况</div>
          <div class="chart-box" id="ordinaryDifficultyCountBox"></div>
        </div>
      </div>

      <!-- 中 -->
      <div class="center">
        <div class="center-1">
          <div class="nav">
            <div class="nav-items">
              <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="allSystemDatBox"></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';

dayjs.extend(weekOfYear);
dayjs.extend(weekday);

// 全市数据情况
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 updateTime() {
  currentTime.value = new Date();
}

onMounted(() => {
  updateTime();
  const timer = setInterval(updateTime, 1000);
  onBeforeUnmount(() => {
    clearInterval(timer);
  });
})

</script>

<style scoped>
@import url('@/views/dataScreen/html/css/reset.css');
@import url('@/views/dataScreen/html/css/style.css');
</style>