feat: 数据大屏实时时间显示

vue/src/views/dataScreen/html/index.vue

@@ -3,7 +3,7 @@
     <!-- 头部 -->
     <div class="header">
       <h1 style="color: #77F8FF;">惠州市就业驿站大数据</h1>
-      <div class="time">2024-07-17 星期三 17:24</div>
+      <div class="time">{{ formattedTime }}</div>
     </div>
 
     <!-- 内容区 -->
@@ -182,7 +182,7 @@ import {
   getSystemApplyCountBySite,
   getYearSystemDataCount
 } from "@/api/statistics";
-import {onMounted, reactive, ref} from "vue";
+import {computed, onBeforeUnmount, onMounted, reactive, ref} from "vue";
 import {initDataSetBarImageTable, initLineImageTable, initPieImageTable} from "@/views/dataScreen/echarts";
 import dayjs from "dayjs";
 import weekOfYear from 'dayjs/plugin/weekOfYear';
@@ -236,6 +236,20 @@ const siteTabAct = ref("all");
 const siteServiceData = ref<Array<any>>([]);
 // 系统服务记录信息
 const systemServiceList = ref<Array<any>>([]);
+// 实时时间
+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 loadYearData() {
@@ -508,6 +522,10 @@ function loadSystemService() {
   })
 }
 
+function updateTime() {
+  currentTime.value = new Date();
+}
+
 onMounted(() => {
   const now = dayjs();
   searchParams.monthStartDate = now.startOf('month').format('YYYY-MM-DD');
@@ -524,6 +542,11 @@ onMounted(() => {
   changeSiteTab("all");
   loadSystemService();
   setInterval(loadSystemService, 1000 * 60 * 5);
+  updateTime();
+  const timer = setInterval(updateTime, 1000);
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
 })
 
 </script>