数据组装

src/components/Operator.vue

@@ -61,9 +61,9 @@
         <div class="num">000/100</div> -->
         <div class="time">
           {{
-            operatorStore.disinfectStatus
+            operatorStore.estimatedRemainingTimeS == 0
               ? `${operatorStore.estimatedRemainingTimeS} S`
-              : '未开始'
+              : '已结束'
           }}
         </div>
       </div>
@@ -131,6 +131,7 @@ const startDisinfect = () => {
     if (roomSize.value == 0) {
       showFailToast('请调整房间大小设置，不能为0')
     } else {
+      localStorage.clear()
       webSocketStore.sendCommandMsg(
         startDisinfectionJSON(logVal.value, roomSize.value),
       )

src/components/Progress.vue

@@ -3,7 +3,13 @@
     <div class="header_wrap">
       <div class="left_progress">
         <div class="left_time_tag">剩余时间</div>
-        <p class="time">{{ operatorStore.estimatedRemainingTimeS }} S</p>
+        <p class="time">
+          {{
+            operatorStore.estimatedRemainingTimeS == 0
+              ? '已结束'
+              : `${operatorStore.estimatedRemainingTimeS} S`
+          }}
+        </p>
         <!-- <div class="progress_bg">
           <div
             class="pro"
@@ -37,15 +43,27 @@
     <div class="echarts_wrap">
       <div class="single_wrap">
         <p class="title">设备温度/湿度/过氧化氢浓度</p>
-        <div class="echarts_box" id="bin"></div>
+        <div
+          class="echarts_box"
+          id="bin"
+          v-if="operatorStore.disinfectStatus"
+        ></div>
       </div>
       <div class="single_wrap">
         <p class="title">环境1/湿度/过氧化氢浓度</p>
-        <div class="echarts_box" id="envir1"></div>
+        <div
+          class="echarts_box"
+          id="envir1"
+          v-if="operatorStore.disinfectStatus"
+        ></div>
       </div>
       <div class="single_wrap">
         <p class="title">环境2/湿度/过氧化氢浓度</p>
-        <div class="echarts_box" id="envir2"></div>
+        <div
+          class="echarts_box"
+          id="envir2"
+          v-if="operatorStore.disinfectStatus"
+        ></div>
       </div>
     </div>
     <div class="detail_wrap">

src/store/modules/websocket.js

@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 import Socket from '@/socket'
+import moment from 'moment'
 import { useSettingStore } from './setting'
 import { useUserStore } from './user'
 import { useOperatorStore } from './operator'
 import { useDeviceStore } from './device'
 import { useTestStore } from './test'
 import { showSuccessToast, showFailToast } from 'vant'
+import { saveEchartsDataToLocal } from '@/utils'
 
 export const useWebSocketStore = defineStore({
   id: 'websocket', // id必填，且需要唯一
@@ -141,9 +143,10 @@ export const useWebSocketStore = defineStore({
       const deviceStore = useDeviceStore()
       const testStore = useTestStore()
       const settingStore = useSettingStore()
+      const operatorStore = useOperatorStore()
       init.ws.onmessage = function (ev) {
         // console.log(JSON.parse(ev.data))
-        const { command } = JSON.parse(ev.data)
+        const { command, timeStamp } = JSON.parse(ev.data)
         switch (command) {
           case 'RealtimeSensorDataReport':
             const { sensor_data } = JSON.parse(ev.data)
@@ -189,6 +192,17 @@ export const useWebSocketStore = defineStore({
             deviceStore.updateEnvirTemperature2(temp_3)
             deviceStore.updateEnvirHumidity2(humid_3)
             deviceStore.updateEnvirHP2(h2o2_3)
+
+            // 对数据进行处理 并存入到localstorage中
+            // console.log(moment(timeStamp).format('HH:mm:ss'))
+            // console.log(localStorage)
+            saveEchartsDataToLocal(
+              moment(timeStamp).format('HH:mm'),
+              [temp_1, humid_1, h2o2_1],
+              [temp_2, humid_2, h2o2_2],
+              [temp_3, humid_3, h2o2_3],
+            )
+
             break
           default:
             break

src/utils/index.js

@@ -0,0 +1,29 @@
+export const saveEchartsDataToLocal = (time, binObj, envir1Obj, envir2Obj) => {
+  if (localStorage.getItem('bin')) {
+    const binLocal = JSON.parse(localStorage.getItem('bin'))
+    resolveData(binLocal, time, binObj, 'bin')
+  } else {
+    resolveData({}, time, binObj, 'bin')
+  }
+  if (localStorage.getItem('envir1')) {
+    const envir1Local = JSON.parse(localStorage.getItem('envir1'))
+    resolveData(envir1Local, time, envir1Obj, 'envir1')
+  } else {
+    resolveData({}, time, envir1Obj, 'envir1')
+  }
+  if (localStorage.getItem('envir2')) {
+    const envir2Local = JSON.parse(localStorage.getItem('envir2'))
+    resolveData(envir2Local, time, envir2Obj, 'envir2')
+  } else {
+    resolveData({}, time, envir2Obj, 'envir2')
+  }
+}
+
+function resolveData(obj, time, newData, key) {
+  if (obj.hasOwnProperty('time')) {
+    return
+  } else {
+    obj[time] = newData
+  }
+  localStorage.setItem(key, JSON.stringify(obj))
+}