Browse Source

消缺上传

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 4 months ago
parent
commit
d36fc38d67
3 changed files with 52 additions and 80 deletions
  1. 5 2
      src/App.vue
  2. 21 17
      src/utils/ws.js
  3. 26 61
      src/views/generatingCapacity/dataAnalysis/rateAnalysis/index.vue

+ 5 - 2
src/App.vue

@@ -989,13 +989,14 @@ export default {
     },
 
     getSocketData({ detail }) {
-      const res = JSON.parse(detail.data);
-      console.log(11111, res);
+      const res = detail.data;
       if (res.type === "message") {
         this.showReadyProgress = true;
         this.$store.commit("setReadyProgress", Number(res.content.data) * 100);
         if (res.content.code === 2001) {
           this.progressType = "success";
+        } else {
+          this.progressType = "primary";
         }
       } else if (
         res.type === "connection" &&
@@ -1145,6 +1146,8 @@ export default {
 
     .el-progress__text {
       color: #fff;
+      margin-left: 12px;
+      font-size: 16px;
     }
 
     &.show {

+ 21 - 17
src/utils/ws.js

@@ -2,7 +2,7 @@ import { ElNotification } from "element-plus";
 
 let socket = null; // 实例对象
 let lockReconnect = false; // 是否真正建立连接
-let timeout = 10 * 1000; // 1秒一次心跳|
+let timeout = 5 * 1000; // 5秒一次心跳|
 let timeoutObj = null; // 心跳倒计时
 let serverTimeoutObj = null; // 服务心跳倒计时
 let timeoutnum = null; // 断开 重连倒计时
@@ -33,23 +33,23 @@ const openWebsocket = (e) => {
 }
 
 const start = () => {
-    //开启心跳
+    // 开启心跳
     timeoutObj && clearTimeout(timeoutObj);
     serverTimeoutObj && clearTimeout(serverTimeoutObj);
     timeoutObj = setTimeout(() => {
-        //这里发送一个心跳,后端收到后,返回一个心跳消息
-        if (socket.readyState == 1) {
+        // 这里发送一个心跳,后端收到后,返回一个心跳消息
+        if (socket.readyState === WebSocket.OPEN) {
             if (reLinkNum > 0) {
                 reLinkNum = 0;
             }
-            //如果连接正常
-            // socket.send("heartbeat");
+            // 如果连接正常,发送心跳
+            socket.send(JSON.stringify({ type: 'heartbeat' }));
         } else {
-            //否则重连
+            // 否则重连
             reconnect();
         }
         serverTimeoutObj = setTimeout(() => {
-            //超时关闭
+            // 超时关闭
             socket.close();
         }, timeout);
     }, timeout);
@@ -60,6 +60,7 @@ const reconnect = () => {
     if (lockReconnect) {
         return;
     }
+    close();
     lockReconnect = true;
     //没连接上会一直重连,设置延迟避免请求过多
     timeoutnum && clearTimeout(timeoutnum);
@@ -73,16 +74,16 @@ const reconnect = () => {
         }, 1000);
     } else {
         console.log(`websocket超过最大重连限制,已手动关闭`);
-        socket && socket?.close && socket?.close();
+
     }
 }
 
 //重置心跳
 const reset = () => {
-    //清除时间
+    // 清除时间
     clearTimeout(timeoutObj);
     clearTimeout(serverTimeoutObj);
-    //重启心跳
+    // 重启心跳
     start();
 }
 
@@ -93,30 +94,33 @@ const sendWebsocket = (e) => {
 const webSocketOnError = (e) => {
     initWebSocket();
     reconnect();
-
 }
 
 //服务器返回的数据
 const webSocketOnMessage = (e) => {
-    //window自定义事件[下面有说明]
+    const data = JSON.parse(JSON.parse(e.data));
+    reset();
+    console.log(11111, data);
+    // 处理其他类型的消息
     window.dispatchEvent(
         new CustomEvent("onmessageWS", {
             detail: {
-                data: JSON.parse(e?.data),
+                data,
             },
         })
     );
-    reset();
 }
 
 const closeWebsocket = (e) => {
-    reconnect();
+    // reconnect();
+    close();
 }
 
 //断开连接
 const close = () => {
     //WebSocket对象也有发送和关闭的两个方法,只需要在自定义方法中分别调用send()和close()即可实现。
-    socket.close();
+    socket && socket?.close && socket?.close();
+    socket = null;
 }
 //具体问题具体分析,把需要用到的方法暴露出去
 export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };

+ 26 - 61
src/views/generatingCapacity/dataAnalysis/rateAnalysis/index.vue

@@ -411,39 +411,6 @@ const funCurrentChange = ({ current, currentNode }) => {
 const funText = (index) => {
   let str = "";
   switch (index) {
-    // case 0:
-    //     str = '0-2.5'
-    //     break
-    // case 1:
-    //     str = '2.5-5'
-    //     break
-    // case 2:
-    //     str = '5-7.5'
-    //     break
-    // case 3:
-    //     str = '7.5-10'
-    //     break
-    // case 4:
-    //     str = '10-12.5'
-    //     break
-    // case 5:
-    //     str = '12.5-15'
-    //     break
-    // case 6:
-    //     str = '15-17.5'
-    //     break
-    // case 7:
-    //     str = '17.5-20'
-    //     break
-    // case 8:
-    //     str = '20-22.5'
-    //     break
-    // case 9:
-    //     str = '22.5-25'
-    //     break
-    // case 10:
-    //     str = '25-inf'
-    //     break
     case 0:
       str = "0-3";
       break;
@@ -485,7 +452,6 @@ const funSubmit = async () => {
   // const lineRes = lineChartRes
   if (rosesRes.code === 200) {
     if (rosesRes.data.length) {
-      // console.log(rosesRes.data)
       chartData.value = [];
       for (const chart of rosesRes.data) {
         chartData.value.push({
@@ -568,12 +534,9 @@ const funSubmit = async () => {
                 }),
                 {
                   type: "radar",
-                  // coordinateSystem: 'polar',
                   tooltip: {
                     trigger: "item",
                   },
-                  // smooth: true,
-                  // areaStyle: {},
                   name: "对风",
                   data: [
                     {
@@ -605,6 +568,7 @@ const funSubmit = async () => {
         return [o.x + "", o.y];
       });
       const lineSeriseMax = Math.max(...lineRes.data[0].count);
+      const lineSeriseMaxIndex = lineRes.data[0].count.indexOf(lineSeriseMax);
       lineSeries.value = [
         {
           name: "对风频次",
@@ -615,13 +579,19 @@ const funSubmit = async () => {
           data: lineRes.data[0].count,
           yAxisIndex: 1,
           markLine: {
+            symbol: "none",
+            label: {
+              show: false,
+            },
+            lineStyle: {
+              color: "#F72C5B",
+              width: "3",
+            },
+            large: true,
             data: [
               {
-                yAxis: maxValue,
-                label: {
-                  show: false,
-                  formatter: "最高频次: {value}",
-                },
+                // name: `平均偏航:${chart.frequency.avg}度`,
+                xAxis: lineSeriseMaxIndex,
               },
             ],
           },
@@ -1055,17 +1025,6 @@ const funDiaSubmit = async () => {
                   data: chart.count,
                   yAxisIndex: 1,
                   large: true,
-                  markLine: {
-                    data: [
-                      {
-                        yAxis: Math.max(chart.count),
-                        label: {
-                          show: false,
-                          formatter: "最高频次: {value}",
-                        },
-                      },
-                    ],
-                  },
                 },
                 {
                   type: "effectScatter",
@@ -1317,12 +1276,9 @@ const initPageData = () => {
               }),
               {
                 type: "radar",
-                // coordinateSystem: 'polar',
                 tooltip: {
                   trigger: "item",
                 },
-                // smooth: true,
-                // areaStyle: {},
                 name: "对风",
                 data: [
                   {
@@ -1349,7 +1305,10 @@ const initPageData = () => {
     lineDataSet.value[0].source = jsonData.ratioData[0].scatter.map((o) => {
       return [o.x + "", o.y];
     });
+
     const lineSeriseMax = Math.max(...jsonData.ratioData[0].count);
+    const lineSeriseMaxIndex =
+      jsonData.ratioData[0].count.indexOf(lineSeriseMax);
 
     lineSeries.value = [
       {
@@ -1361,13 +1320,19 @@ const initPageData = () => {
         data: jsonData.ratioData[0].count,
         yAxisIndex: 1,
         markLine: {
+          symbol: "none",
+          label: {
+            show: false,
+          },
+          lineStyle: {
+            color: "#F72C5B",
+            width: "3",
+          },
+          large: true,
           data: [
             {
-              yAxis: lineSeriseMax,
-              label: {
-                show: false,
-                formatter: "最高频次: {value}",
-              },
+              // name: `平均偏航:${chart.frequency.avg}度`,
+              xAxis: lineSeriseMaxIndex,
             },
           ],
         },