各个状态

src/components/Operator.vue

@@ -19,7 +19,10 @@
         <p class="warn_text">警报信息</p>
         <div
           class="detail_btn"
-          v-if="operatorStore.disinfectStatus"
+          v-if="
+            operatorStore.disinfectStatus != 0 &&
+            operatorStore.disinfectStatus != 3
+          "
           @click="toDetail"
         >
           详情
@@ -34,7 +37,7 @@
       <div class="set_form">
         <input
           type="number"
-          :disabled="operatorStore.disinfectStatus"
+          :disabled="[1, 2].includes(operatorStore.disinfectStatus)"
           v-model="roomSize"
           class="room_size"
           id="room_size"
@@ -43,7 +46,11 @@
         <div class="log" @click="showLogPicker">{{ logVal }}</div>
       </div>
       <div
-        :class="operatorStore.disinfectStatus ? 'start cant' : 'start'"
+        :class="
+          [1, 2].includes(operatorStore.disinfectStatus)
+            ? 'start cant'
+            : 'start'
+        "
         @click="startDisinfect"
       >
         开始消毒
@@ -107,7 +114,7 @@ const props = defineProps({
 
 const toDetail = () => {
   // 判断当前消毒任务是否开始，如果开始时才生效 否则点击不生效
-  if (operatorStore.disinfectStatus) {
+  if (operatorStore.disinfectStatus != 0) {
     props.changeShowOperator(false)
   }
 }
@@ -127,22 +134,24 @@ const changeLogVal = val => {
 
 const startDisinfect = () => {
   // 改变开始消毒状态 如果已经开始则不可点击
-  if (!operatorStore.disinfectStatus) {
+  if (![1, 2].includes(operatorStore.disinfectStatus)) {
     if (roomSize.value == 0) {
       showFailToast('请调整房间大小设置，不能为0')
     } else {
+      localStorage.removeItem('bin')
+      localStorage.removeItem('envir1')
+      localStorage.removeItem('envir2')
       localStorage.clear()
       webSocketStore.sendCommandMsg(
         startDisinfectionJSON(logVal.value, roomSize.value),
       )
-      operatorStore.updateDisinfectStatus(true)
       props.changeShowOperator(false)
     }
   }
 }
 
 const showLogPicker = () => {
-  if (!operatorStore.disinfectStatus) {
+  if (![1, 2].includes(operatorStore.disinfectStatus)) {
     logVisible.value = true
   }
 }

src/components/Progress.vue

@@ -21,19 +21,25 @@
       </div>
       <div class="right_btns">
         <div
-          :class="operatorStore.disinfectStatus ? 'btn active' : 'btn'"
+          :class="
+            [1, 2].includes(operatorStore.disinfectStatus)
+              ? 'btn active'
+              : 'btn'
+          "
           @click="stopDisinfect"
         >
           停止消毒
         </div>
         <div
-          :class="operatorStore.disinfectStatus ? 'btn active ml' : 'btn ml'"
+          :class="
+            operatorStore.disinfectStatus == 1 ? 'btn active ml' : 'btn ml'
+          "
           @click="pauseDisinfect"
         >
           暂停消毒
         </div>
         <div
-          :class="operatorStore.disinfectStatus ? 'btn' : 'btn active'"
+          :class="operatorStore.disinfectStatus == 2 ? 'btn active' : 'btn'"
           @click="continueDisinfect"
         >
           继续消毒
@@ -46,7 +52,7 @@
         <div
           class="echarts_box"
           id="bin"
-          v-if="operatorStore.disinfectStatus || binLocal"
+          v-if="operatorStore.disinfectStatus != 0 || binLocal"
         ></div>
       </div>
       <div class="single_wrap">
@@ -54,7 +60,7 @@
         <div
           class="echarts_box"
           id="envir1"
-          v-if="operatorStore.disinfectStatus || envir1Local"
+          v-if="operatorStore.disinfectStatus != 0 || envir1Local"
         ></div>
       </div>
       <div class="single_wrap">
@@ -62,7 +68,7 @@
         <div
           class="echarts_box"
           id="envir2"
-          v-if="operatorStore.disinfectStatus || envir2Local"
+          v-if="operatorStore.disinfectStatus != 0 || envir2Local"
         ></div>
       </div>
     </div>
@@ -80,41 +86,28 @@ import {
   continueDisinfectionJSON,
   pauseDisinfectionJSON,
 } from '@/mock/command'
-import { onMounted, onUnmounted, ref, computed } from 'vue'
+import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import * as echarts from 'echarts'
 import { storeToRefs } from 'pinia'
 
 const echartsStore = useEchartsStore()
 
 const binLocal = computed(() => {
-  return localStorage.getItem('bin')
+  return echartsStore?.binCharts || localStorage.getItem('bin')
 })
 
 const envir1Local = computed(() => {
-  return localStorage.getItem('envir1')
+  return echartsStore?.envir1Charts || localStorage.getItem('envir1')
 })
 
 const envir2Local = computed(() => {
-  return localStorage.getItem('envir2')
+  return echartsStore?.envir2Charts || localStorage.getItem('envir2')
 })
 
 const binOption = ref({
   tooltip: {
     trigger: 'axis',
   },
-  dataZoom: {
-    show: true, // 为true 滚动条出现
-    realtime: true,
-    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
-    height: 10, // 表示滚动条的高度，也就是粗细
-    start: 40, // 表示默认展示0%～80%这一段。
-    end: 100,
-    backgroundColor: 'transparent',
-    bottom: 10,
-    textStyle: {
-      color: 'transparent',
-    },
-  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -157,19 +150,6 @@ const envir1Option = ref({
   tooltip: {
     trigger: 'axis',
   },
-  dataZoom: {
-    show: true, // 为true 滚动条出现
-    realtime: true,
-    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
-    height: 10, // 表示滚动条的高度，也就是粗细
-    start: 40, // 表示默认展示0%～80%这一段。
-    end: 100,
-    backgroundColor: 'transparent',
-    bottom: 10,
-    textStyle: {
-      color: 'transparent',
-    },
-  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -212,19 +192,6 @@ const envir2Option = ref({
   tooltip: {
     trigger: 'axis',
   },
-  dataZoom: {
-    show: true, // 为true 滚动条出现
-    realtime: true,
-    type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
-    height: 10, // 表示滚动条的高度，也就是粗细
-    start: 40, // 表示默认展示0%～80%这一段。
-    end: 100,
-    backgroundColor: 'transparent',
-    bottom: 10,
-    textStyle: {
-      color: 'transparent',
-    },
-  },
   legend: {
     data: ['温度', '湿度', '过氧化氢浓度'],
   },
@@ -276,48 +243,180 @@ const showDetail = () => {
 }
 
 const timer = ref(null)
+
+const binCharts = ref(null)
+const envir1Charts = ref(null)
+const envir2Charts = ref(null)
 onMounted(() => {
   timer.value = setInterval(() => {
     webSocketStore.sendCommandMsg(getStateJSON)
   }, 1000)
   let a = echarts.getInstanceByDom(document.getElementById('bin'))
   if (a == undefined) {
-    var binCharts = echarts.init(document.getElementById('bin'))
-    binCharts.setOption(binOption.value)
+    binCharts.value = echarts.init(document.getElementById('bin'))
+    binCharts.value.setOption(binOption.value)
   }
   let b = echarts.getInstanceByDom(document.getElementById('envir1'))
   if (b == undefined) {
-    var envir1Charts = echarts.init(document.getElementById('envir1'))
-    envir1Charts.setOption(envir1Option.value)
+    envir1Charts.value = echarts.init(document.getElementById('envir1'))
+    envir1Charts.value.setOption(envir1Option.value)
   }
   let c = echarts.getInstanceByDom(document.getElementById('envir2'))
   if (c == undefined) {
-    var envir2Charts = echarts.init(document.getElementById('envir2'))
-    envir2Charts.setOption(envir2Option.value)
+    envir2Charts.value = echarts.init(document.getElementById('envir2'))
+    envir2Charts.value.setOption(envir2Option.value)
   }
+
+  setInterval(() => {
+    binCharts.value?.setOption({
+      tooltip: {
+        trigger: 'axis',
+      },
+      legend: {
+        data: ['温度', '湿度', '过氧化氢浓度'],
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: Object.keys(echartsStore.binCharts),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          name: '温度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.binTemp,
+        },
+        {
+          name: '湿度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.binHumidity,
+        },
+        {
+          name: '过氧化氢浓度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.binHP,
+        },
+      ],
+    })
+    envir1Charts.value?.setOption({
+      tooltip: {
+        trigger: 'axis',
+      },
+      legend: {
+        data: ['温度', '湿度', '过氧化氢浓度'],
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: Object.keys(echartsStore.envir1Charts),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          name: '温度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir1Temp,
+        },
+        {
+          name: '湿度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir1Humidity,
+        },
+        {
+          name: '过氧化氢浓度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir1HP,
+        },
+      ],
+    })
+    envir2Charts.value?.setOption({
+      tooltip: {
+        trigger: 'axis',
+      },
+      legend: {
+        data: ['温度', '湿度', '过氧化氢浓度'],
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: Object.keys(echartsStore.envir2Charts),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          name: '温度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir2Temp,
+        },
+        {
+          name: '湿度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir2Humidity,
+        },
+        {
+          name: '过氧化氢浓度',
+          type: 'line',
+          stack: 'Total',
+          data: echartsStore.envir2HP,
+        },
+      ],
+    })
+  }, 1000 * 30)
 })
+
+// 监听到store中的数据变化动态更改options
 onUnmounted(() => {
   timer.value = null
 })
 
 const pauseDisinfect = () => {
-  if (operatorStore.disinfectStatus) {
+  if (operatorStore.disinfectStatus == 1) {
     webSocketStore.sendCommandMsg(pauseDisinfectionJSON)
-    operatorStore.updateDisinfectStatus(false)
   }
 }
 
 const stopDisinfect = () => {
-  if (operatorStore.disinfectStatus) {
+  if ([1, 2].includes(operatorStore.disinfectStatus)) {
     webSocketStore.sendCommandMsg(stopDisinfectionJSON)
-    operatorStore.updateDisinfectStatus(false)
   }
 }
 
 const continueDisinfect = () => {
-  if (!operatorStore.disinfectStatus) {
+  if (operatorStore.disinfectStatus == 2) {
     webSocketStore.sendCommandMsg(continueDisinfectionJSON)
-    operatorStore.updateDisinfectStatus(true)
   }
 }
 </script>

src/pages/Home.vue

@@ -27,7 +27,7 @@
       <div
         :class="activeTab == 2 ? 'tab_btn active_btn' : 'tab_btn'"
         @click="changeTab(2)"
-        v-if="!operatorStore.disinfectStatus"
+        v-if="operatorStore.disinfectStatus != 1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +51,7 @@
       <div
         :class="activeTab == 3 ? 'tab_btn active_btn' : 'tab_btn'"
         @click="changeTab(3)"
-        v-if="!operatorStore.disinfectStatus"
+        v-if="operatorStore.disinfectStatus != 1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -76,7 +76,8 @@
         :class="activeTab == 4 ? 'tab_btn active_btn' : 'tab_btn'"
         @click="changeTab(4)"
         v-if="
-          userStore.loginUserPermission != 3 && !operatorStore.disinfectStatus
+          userStore.loginUserPermission != 3 &&
+          operatorStore.disinfectStatus != 1
         "
       >
         <svg
@@ -102,7 +103,8 @@
         :class="activeTab == 5 ? 'tab_btn active_btn' : 'tab_btn'"
         @click="changeTab(5)"
         v-if="
-          userStore.loginUserPermission != 3 && !operatorStore.disinfectStatus
+          userStore.loginUserPermission != 3 &&
+          operatorStore.disinfectStatus != 1
         "
       >
         <svg

src/socket/index.js

@@ -39,7 +39,9 @@ export default class Socket {
     if (param === 'heartbeat') {
       this.ws.send(param)
     } else {
+      if (param.command != 'getState') {
         console.log(param)
+      }
       this.ws.send(JSON.stringify(param))
     }
   }

src/store/modules/operator.js

@@ -5,7 +5,7 @@ export const useOperatorStore = defineStore({
   state: () => {
     return {
       // 是否开始消毒
-      disinfectStatus: false,
+      disinfectStatus: 0,
       estimatedRemainingTimeS: 0,
       disinfection_id: '',
       drainingWorkState: 0,

src/store/modules/websocket.js

@@ -33,9 +33,8 @@ export const useWebSocketStore = defineStore({
       const operatorStore = useOperatorStore()
       init.connect()
       init.ws.onmessage = function (ev) {
-        console.log(JSON.parse(ev.data))
         const { ackcode, messageId } = JSON.parse(ev.data)
-
+        console.log(JSON.parse(ev.data))
         switch (messageId) {
           case 'getState':
             // 初始化完毕
@@ -103,9 +102,7 @@ export const useWebSocketStore = defineStore({
 
             userStore.updatePermission(permissionLevel)
             settingStore.updateInitLoading()
-            operatorStore.updateDisinfectStatus(
-              disinfectionWorkState == 0 ? false : true,
-            )
+            operatorStore.updateDisinfectStatus(disinfectionWorkState)
             operatorStore.updateEstimatedRemainingTimeS(estimatedRemainingTimeS)
             operatorStore.updateDisinfectionId(disinfection_id)
             // 将sensor_data中的数据更新到store中