some style

src/components/Operator.vue

@@ -70,7 +70,7 @@
           {{
             operatorStore.estimatedRemainingTimeS == 0
               ? '已结束'
-              : `${operatorStore.estimatedRemainingTimeS} S`
+              : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
           }}
         </div>
       </div>
@@ -93,6 +93,7 @@ import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useOperatorStore, useWebSocketStore } from '@/store'
 import { startDisinfectionJSON, getStateJSON } from '@/mock/command'
 import { showSuccessToast, showFailToast } from 'vant'
+import { time_To_hhmmss } from '@/utils'
 
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()

src/components/Progress.vue

@@ -7,7 +7,7 @@
           {{
             operatorStore.estimatedRemainingTimeS == 0
               ? '已结束'
-              : `${operatorStore.estimatedRemainingTimeS} S`
+              : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
           }}
         </p>
         <!-- <div class="progress_bg">
@@ -30,7 +30,7 @@
         >
           停止消毒
         </div>
-        <div
+        <!-- <div
           :class="
             operatorStore.disinfectStatus == 1 ? 'btn active ml' : 'btn ml'
           "
@@ -43,7 +43,7 @@
           @click="continueDisinfect"
         >
           继续消毒
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="echarts_wrap">
@@ -80,6 +80,7 @@
 
 <script setup>
 import { useOperatorStore, useWebSocketStore, useEchartsStore } from '@/store'
+import { time_To_hhmmss } from '@/utils'
 import {
   stopDisinfectionJSON,
   getStateJSON,
@@ -247,6 +248,9 @@ const timer = ref(null)
 const binCharts = ref(null)
 const envir1Charts = ref(null)
 const envir2Charts = ref(null)
+
+const time1 = ref(null)
+const time2 = ref(null)
 onMounted(() => {
   timer.value = setInterval(() => {
     webSocketStore.sendCommandMsg(getStateJSON)
@@ -267,7 +271,136 @@ onMounted(() => {
     envir2Charts.value.setOption(envir2Option.value)
   }
 
-  setInterval(() => {
+  time1.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 * 20)
+
+  time2.value = setTimeout(() => {
     binCharts.value?.setOption({
       tooltip: {
         trigger: 'axis',
@@ -394,12 +527,14 @@ onMounted(() => {
         },
       ],
     })
-  }, 1000 * 30)
+  })
 })
 
 // 监听到store中的数据变化动态更改options
 onUnmounted(() => {
   timer.value = null
+  time1.value = null
+  time2.value = null
 })
 
 const pauseDisinfect = () => {

src/components/Setting/components/Device.vue

@@ -105,6 +105,20 @@
       </p>
       <div class="btn" @click="setMaxHumidityVal">设置</div>
     </div>
+    <div class="row_wrap" style="margin-bottom: 20px">
+      <p class="title">预热时间(s)</p>
+      <p class="num">
+        <van-field
+          :formatter="formatter8"
+          type="number"
+          v-model="pre_heat_time_s"
+          :clickable="true"
+          readonly
+          @touchstart.stop="pre_heat_time_sShow = true"
+        />
+      </p>
+      <div class="btn" @click="setHeat_timeVal">设置</div>
+    </div>
     <van-number-keyboard
       v-model="addLiquidConfigVal"
       :show="addLiquidConfigValShow"
@@ -147,6 +161,11 @@
       :maxlength="3"
       @blur="max_humidityShow = false"
     />
+    <van-number-keyboard
+      v-model="pre_heat_time_s"
+      :show="pre_heat_time_sShow"
+      @blur="pre_heat_time_sShow = false"
+    />
   </div>
 </template>
 
@@ -168,8 +187,10 @@ const {
   addLiquidConfigVal,
   sprayLiquidConfigVal,
   allSettingList,
+  pre_heat_time_s,
 } = storeToRefs(settingStore)
 
+const pre_heat_time_sShow = ref(false)
 const addLiquidConfigValShow = ref(false)
 const sprayLiquidConfigValShow = ref(false)
 const stoped_gsShow = ref(false)
@@ -281,6 +302,21 @@ const formatter7 = value => {
   return value
 }
 
+const formatter8 = value => {
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'pre_heat_time_s',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value
+}
+
 const setAddliquidVal = () => {
   const val = parseInt(addLiquidConfigVal.value)
   settingStore.changeAddLiquidConfigVal(val)
@@ -323,6 +359,13 @@ const setMaxHumidityVal = () => {
   showSuccessToast('设置成功')
 }
 
+const setHeat_timeVal = () => {
+  const val = parseInt(pre_heat_time_s.value)
+  settingStore.updatePre_heat_time_s(val)
+  webSocketStore.sendCommandMsg(setSettingValJSON('pre_heat_time_s', val))
+  showSuccessToast('设置成功')
+}
+
 const setSprayLiquidVal = () => {
   const val = parseInt(sprayLiquidConfigVal.value)
   settingStore.changeSprayLiquidConfigVal(val)
@@ -342,6 +385,7 @@ const setSprayLiquidVal = () => {
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(1, 1fr);
   row-gap: 20px;
+  padding-bottom: 20px;
   .row_wrap {
     width: 726px;
     height: 80px;

src/components/Test.vue

@@ -27,7 +27,8 @@
         <p>P</p>
       </div>
       <div class="btn_wrap">
-        <div class="open" @click="setAddLiquidConfig(1)">打开</div>
+        <div class="open" @click="setAddLiquidConfig(1)">正转</div>
+        <div class="open" @click="setAddLiquidConfig(5)">反转</div>
         <div
           class="open"
           @click="setAddLiquidConfig(3)"
@@ -64,7 +65,8 @@
         <p>P</p>
       </div>
       <div class="btn_wrap">
-        <div class="open" @click="setAddLiquidConfig(2)">打开</div>
+        <div class="open" @click="setAddLiquidConfig(2)">正转</div>
+        <div class="open" @click="setAddLiquidConfig(6)">反转</div>
         <div
           class="open"
           @click="setAddLiquidConfig(4)"
@@ -289,6 +291,14 @@ const setAddLiquidConfig = flag => {
     )
   } else if (flag == 3) {
     websocketStore.sendCommandMsg(addLiquidCtrlJSON(1, 0, addLiquidPower.value))
+  } else if (flag == 5) {
+    websocketStore.sendCommandMsg(
+      addLiquidCtrlJSON(1, '-' + addLiquidVal.value, addLiquidPower.value),
+    )
+  } else if (flag == 6) {
+    websocketStore.sendCommandMsg(
+      addLiquidCtrlJSON(2, '-' + addLiquidVal2.value, addLiquidPower2.value),
+    )
   } else {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(2, 0, addLiquidPower2.value),
@@ -396,9 +406,10 @@ const changeDraughtStatus = flag => {
   column-gap: 20px;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(5, 1fr);
+  padding-bottom: 20px;
   .common_set {
     width: 580px;
-    height: 80px;
+    height: 73px;
     box-sizing: border-box;
     border-radius: 14px;
     background: #f6f6f6;

src/mock/command.js

@@ -29,7 +29,7 @@ export const chpasswdJSON = (userId, newpasswd, passwd) => {
 export const shutdownJSON = {
   command: 'shutdown',
   messageId: 'shutdown',
-  delayms: 60 * 5,
+  delayms: 1000 * 5,
 }
 
 // 开始消毒

src/store/modules/setting.js

@@ -16,6 +16,7 @@ export const useSettingStore = defineStore({
       max_humidity: 0,
       continued_satur: 0,
       stoped_satur: 0,
+      pre_heat_time_s: 0,
       continued_gs: 0,
       stoped_gs: 0,
       // 首屏初始化
@@ -27,6 +28,9 @@ export const useSettingStore = defineStore({
   },
   // actions
   actions: {
+    updatePre_heat_time_s(pre_heat_time_s) {
+      this.pre_heat_time_s = pre_heat_time_s
+    },
     updateDeviceIp(deviceIp) {
       this.deviceIp = deviceIp
     },
@@ -61,6 +65,10 @@ export const useSettingStore = defineStore({
       const max_humidityObj = allSettingList.filter(
         item => item.name == 'max_humidity',
       )[0]
+      const pre_heat_time_sOBj = allSettingList.filter(
+        item => item.name == 'pre_heat_time_s',
+      )[0]
+      this.pre_heat_time_s = pre_heat_time_sOBj.val
       this.max_humidity = max_humidityObj.val
       this.continued_satur = continued_saturObj.val
       this.stoped_satur = stoped_saturObj.val

src/utils/index.js

@@ -27,3 +27,30 @@ function resolveData(obj, time, newData, key) {
   }
   localStorage.setItem(key, JSON.stringify(obj))
 }
+
+export const time_To_hhmmss = seconds => {
+  var hh
+  var mm
+  var ss
+  //传入的时间为空或小于0
+  if (seconds == null || seconds < 0) {
+    return
+  }
+  //得到小时
+  hh = (seconds / 3600) | 0
+  seconds = parseInt(seconds) - hh * 3600
+  if (parseInt(hh) < 10) {
+    hh = '0' + hh
+  }
+  //得到分
+  mm = (seconds / 60) | 0
+  //得到秒
+  ss = parseInt(seconds) - mm * 60
+  if (parseInt(mm) < 10) {
+    mm = '0' + mm
+  }
+  if (ss < 10) {
+    ss = '0' + ss
+  }
+  return hh + ':' + mm + ':' + ss
+}