update

src/utils/socket.ts

@@ -15,9 +15,52 @@ export const basicPath = VITE_GLOB_API_YIN_JI;
 export const emergencyPath = VITE_GLOB_API_JIAN_CE;
 let t = token || getAuthCache(TOKEN_KEY);
 
-export function useSocket(path = basicPath) {
+export function useSocket(p = basicPath) {
     const socket = ref();
     let socketData = ref({});
+    let lockReconnect = ref(false); //避免ws重复连接
+    const path = ref(p);
+
+    function reconnect(path) {
+        if (lockReconnect.value) return;
+        lockReconnect.value = true;
+        setTimeout(function () {
+            //没连接上会一直重连，设置延迟避免请求过多
+            init(path);
+            lockReconnect.value = false;
+        }, 2000);
+    }
+
+    //心跳检测
+    const heartCheck = {
+        timeout: 1000 * 10, //1分钟发一次心跳
+        timeoutObj: null,
+        serverTimeoutObj: null,
+        reset: function () {
+            clearTimeout(this.timeoutObj);
+            clearTimeout(this.serverTimeoutObj);
+            return this;
+        },
+        start: function () {
+            let self = this;
+            this.timeoutObj = setTimeout(function () {
+                //这里发送一个心跳，后端收到后，返回一个心跳消息，
+                //onmessage拿到返回的心跳就说明连接正常
+                if (socket.value.readyState === WebSocket.OPEN) {
+                    //console.log('p1' + new Date().toLocaleString());
+                    socket.value.send('ping');
+                } else {
+                    //console.log('p2');
+                    init();
+                }
+                self.serverTimeoutObj = setTimeout(function () {
+                    //如果超过一定时间还没重置，说明后端主动断开了
+                    // TODO
+                    // socket.value.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+                }, self.timeout);
+            }, this.timeout);
+        },
+    };
 
     function init() {
         if (!t) {
@@ -27,44 +70,42 @@ export function useSocket(path = basicPath) {
             alert('您的浏览器不支持socket');
         } else {
             // 实例化socket
-            socket.value = new WebSocket(path, [t]);
-            // 监听socket连接
-            socket.value.onopen = open;
-            // 监听socket错误信息
-            socket.value.onerror = error;
-            // 监听socket消息
-            socket.value.onmessage = getMessage;
-            socket.value.onclose = close;
+            socket.value = new WebSocket(path.value + Date.now(), [t]);
+
+            socket.value.onclose = function () {
+                reconnect(path.value);
+                //console.log('连接关闭!:', new Date().toLocaleString());
+            };
+            socket.value.onerror = function () {
+                reconnect(path.value);
+                //console.log('连接错误!');
+            };
+            socket.value.onopen = function () {
+                heartCheck.reset().start(); //心跳检测重置
+                //console.log('连接成功!' + new Date().toLocaleString());
+            };
+            socket.value.onmessage = function (event) {
+                //如果获取到消息，心跳检测重置
+                heartCheck.reset().start(); //拿到任何消息都说明当前连接是正常的
+                //console.log('收到消息啦:', event);
+                if (event.data != 'pong') {
+                    let data = JSON.parse(event.data);
+                    socketData.value = data;
+                }
+            };
         }
     }
 
-    function open() {
-        console.log('socket连接成功');
-    }
-
-    function error() {
-        console.log('socket连接错误');
-    }
-
-    function getMessage(msg) {
-        console.log('getMessage', msg);
-        socketData.value = JSON.parse(msg.data);
-    }
-
     function setSocketData(data) {
         socketData.value = data;
     }
 
-    function close(data) {
-        console.log(data);
-        console.log('socket已经关闭');
+    init();
+
+    function closeSocket() {
+        socket.value && socket.value.close;
     }
 
-    onMounted(() => {
-        init();
-    });
-    onUnmounted(() => {
-        //socket.value.onclose = close;
-    });
-    return { socket, socketData, setSocketData };
-}
+    return { socket, socketData, setSocketData, closeSocket };
+}
+

src/utils/utils.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { cloneDeep } from 'lodash-es';
 
 export function getZero(num: any) {
     if (num < 10) {
@@ -9,15 +10,14 @@ export function getZero(num: any) {
 
 export function useTopTime() {
     const timeLeft = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
-    const timeRight =
-        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')) +
-        '秒';
+    const timeRight = 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') + ':00'), 'seconds')) +
+    // '秒';
     return {
         timeLeft,
         timeRight,
@@ -38,4 +38,19 @@ export function minuteToStr(minutes) {
         return `${h}小时${m > 0 ? `${m}分钟` : ''}`;
     }
     return `${m}分钟`;
+}
+
+//处理echarts-环形图 数据为0时不显示label
+export function visibleChartLabel(chartData) {
+    const data = cloneDeep(chartData);
+    let list = data?.map((item) => item?.value);
+    let flag = list.every((item) => item == 0);
+    if (!flag) {
+        data.forEach((val) => {
+            if (val.value == 0) {
+                val.value = null;
+            }
+        });
+    }
+    return data;
 }