客车

src/views/screen/kouan-run-monitor/components/head.vue

@@ -10,33 +10,38 @@
       口岸运行监测中心
     </div>
     <div class="head-right">
-      <div class="head-right-time">{{$util.Hms(new Date())}}</div>
+      <div class="head-right-time">{{state.time}}</div>
       <div class="head-right-date">
-        <div class="day">{{dayCpt}}</div>
-        <div class="date">{{$util.YMD(new Date())}}</div>
+        <div class="day">{{state.day}}</div>
+        <div class="date">{{state.date}}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, reactive} from "vue";
+import {computed, getCurrentInstance, onMounted, reactive} from "vue";
 
 const {proxy} = getCurrentInstance()
 const props = defineProps({
   tab: {}
 })
 const state: any = reactive({
+  time: '',
+  day: '',
+  date: ''
 })
 const tabs = [
   {label: '旅客', value: 'guest', url: '/screen/kouan-run-monitor/guest'},
   {label: '客车', value: 'bus', url: '/screen/kouan-run-monitor/bus'},
   {label: '货运', value: 'goods', url: '/screen/kouan-run-monitor/goods'},
 ]
-const dayCpt = computed(() => {
-  const d = new Date().getDay()
+const initTime = () => {
+  const d = new Date()
+  state.time = proxy.$util.Hms(d)
+  state.date = proxy.$util.YMD(d)
   let str = ''
-  switch (d) {
+  switch (d.getDay()) {
     case 0: str = '星期日'
       break
     case 1: str = '星期一'
@@ -52,7 +57,13 @@ const dayCpt = computed(() => {
     case 6: str = '星期六'
       break
   }
-  return str
+  state.day = str
+}
+onMounted(() => {
+  initTime()
+  setInterval(() => {
+    initTime()
+  }, 1000)
 })
 </script>