update 添加websocket功能推送员工报警信息

src/views/index.vue

@@ -23,10 +23,11 @@
             </div>
         </div>
         <div class="bottom-d"></div>
+        <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
+    import { onUnmounted, ref, watch, nextTick } from 'vue';
     import OneL from '../components/body-d-left/oneL.vue';
     import TwoL from '../components/body-d-left/twoL.vue';
     import ThreeL from '../components/body-d-left/threeL.vue';
@@ -34,39 +35,42 @@
     import TwoR from '../components/body-d-right/twoR.vue';
     import ThreeR from '../components/body-d-right/threeR.vue';
     import ChinaMap from '../components/chinaMap/chinaMap.vue';
-    import * as dayjs from 'dayjs';
+    import EmployeeDialog from '/@/views/components/employeeDialog.vue';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import { useSocket } from '/@/utils/socket.ts';
 
     const dayTimeO = ref();
     const dayTimeT = ref();
+    const interval = ref(1);
 
     function init() {
         getTime();
-        setInterval(() => {
+        interval.value = setInterval(() => {
             getTime();
         }, 1000);
     }
 
     function getTime() {
-        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
-        dayTimeT.value =
-            dayjs().diff(dayjs('2018-10-01'), 'day') +
-            '天' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
-            '时' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
-            '分' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
-            '秒';
-    }
-
-    function getZero(num: any) {
-        if (num < 10) {
-            return '0' + num;
-        }
-        return num;
+        const { timeLeft, timeRight } = useTopTime();
+        dayTimeO.value = timeLeft;
+        dayTimeT.value = timeRight;
     }
 
+    onUnmounted(() => {
+        clearInterval(interval.value);
+    });
     init();
+    const { socketData, setSocketData } = useSocket();
+    const employeeDialogRef = ref();
+    watch(socketData, (nVal) => {
+        console.log('nval', nVal);
+        if (nVal) {
+            nextTick(() => {
+                setSocketData(nVal);
+                employeeDialogRef.value.openDialog();
+            });
+        }
+    });
 </script>
 <style lang="less" scoped>
     .outer {