fix: 消毒图标30秒更新一次

src/app.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { useDeviceStore } from 'stores/deviceStore'
 import { useHomeStore } from 'stores/homeStore'
 import { useLiquidStore } from 'stores/liquidStore'
@@ -10,6 +10,7 @@ import { sendCmd, subscribeEvent } from '@/apis/system'
 import { useDebugStore } from './stores/debugStore'
 import { useFormulaStore } from './stores/formulaStore'
 import { useSealStore } from './stores/sealStore'
+
 /**
  * 应用初始化组件
  * @description 负责系统初始化流程控制，包括设备信息获取、数据同步及进度展示
@@ -40,26 +41,34 @@ onBeforeMount(async () => {
 })
 // 监听设备的主动上报数据，并根据上报类型 保存到对应的store
 subscribeEvent('stateUpdate', (data) => {
-  if (data.fromClass === 'AirLeakDetectTest') { // 气密性测试
+  if (data.fromClass === 'AirLeakDetectTest') {
+    // 气密性测试
     sealStore.updateSealInfo(data.rely)
   }
-  else if (data.fromClass === 'AddLiquidService') { // 加液服务
+  else if (data.fromClass === 'AddLiquidService') {
+    // 加液服务
     liquidStore.updateAddLiquidWorkState(data.rely)
   }
-  else if (data.fromClass === 'DrainLiquidService') { // 排液服务
+  else if (data.fromClass === 'DrainLiquidService') {
+    // 排液服务
     liquidStore.updateDrainLiquidWorkState(data.rely)
   }
-  else if (data.fromClass === 'DisinfectionCtrlServiceExt') { // 消毒状态上报
+  else if (data.fromClass === 'DisinfectionCtrlServiceExt') {
+    // 消毒状态上报
     homeStore.updateHomeDisinfectionState(data.rely)
   }
-  else if (data.fromClass === 'FrontEndRealtimeDisplayContentMgr') { // 首页传感器状态上报
+  else if (data.fromClass === 'H2O2SensorMgr') {
+    console.log(data.rely)
+    // 首页传感器状态上报
     homeStore.updateHomeData(data.rely)
   }
-  else if (data.fromClass === 'AppCore') { // 应用事件上报
+  else if (data.fromClass === 'AppCore') {
+    // 应用事件上报
     deviceStateStore.setDeviceState(data.rely)
     systemStore.insertLogs(data.rely.appEvents)
   }
-  else if (data.fromClass === 'TestPageCtrlService') { // 测试页面状态上报
+  else if (data.fromClass === 'TestPageCtrlService') {
+    // 测试页面状态上报
     debugStore.updateDebugPageState(data.rely)
   }
 })
@@ -71,7 +80,7 @@ subscribeEvent('stateUpdate', (data) => {
 const startProgress = () => {
   timer = setInterval(async () => {
     // 生成随机进度增长（1-9%）
-    const randomStep = Math.floor((Math.random() * 9) + 1)
+    const randomStep = Math.floor(Math.random() * 9 + 1)
     progress.value = Math.min(progress.value + randomStep, 100)
     const deviceInfo: Device.DeviceInfo = await initDeviceInfo()
     if (deviceInfo.deviceType === deviceType.LargeSpaceDM_B) {
@@ -155,7 +164,7 @@ const initLiquidConfig = async () => {
   </router-view>
 </template>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .main-content {
   width: 100%;
   height: 100%;
@@ -190,7 +199,7 @@ img {
 
 .progress-bar {
   height: 100%;
-  background: linear-gradient(90deg,  #1989FA, #096ae0);
+  background: linear-gradient(90deg, #1989fa, #096ae0);
   border-radius: 30px;
   transition: width 0.3s ease;
 }

src/components/home/HomeOperation.vue

@@ -56,8 +56,7 @@ watchEffect(() => {
 /**
  * @hook 生命周期钩子 - 组件挂载完成时执行
  */
-onMounted(async () => {
-})
+onMounted(async () => {})
 
 /**
  * @function 开始消毒操作
@@ -75,6 +74,8 @@ const onStartDisinfect = () => {
   })
 }
 
+let poll = null
+
 const doStartDisinfect = async () => {
   // 校验设备状态
   const statusName = getDeviceStatus()
@@ -97,6 +98,9 @@ const doStartDisinfect = async () => {
       }
       await sendCmd(startParams)
     }
+    // 开启定时器, 30秒保存一次数据
+    poll = setInterval(async () => {}, 1000 * 30)
+    console.log(poll)
   }
   finally {
     systemStore.updateLoading(false)
@@ -177,12 +181,8 @@ const operationState = computed(() => {
   <!-- 开始消毒时显示剩余时间或状态 -->
   <div v-if="!operationState" class="home-remain-time">
     <div class="home-remaini-label">
-      <span v-if="disinfectionState.state === 'disinfection'">
-        预计剩余时间:
-      </span>
-      <span v-else>
-        消毒状态：
-      </span>
+      <span v-if="disinfectionState.state === 'disinfection'"> 预计剩余时间: </span>
+      <span v-else> 消毒状态： </span>
     </div>
     <div v-if="disinfectionState.state === 'disinfection'" class="home-remaini-value">
       {{ curStateRemainTimeS }}
@@ -203,7 +203,7 @@ const operationState = computed(() => {
   width: 27vw;
   height: 8vh;
   border-radius: 12px;
-  color: #FFFFFF;
+  color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -211,14 +211,14 @@ const operationState = computed(() => {
   gap: 10px;
 }
 .home-start {
-  background: #31CB7A;
+  background: #31cb7a;
 }
 
 .home-end {
-  background: #FF6767;
+  background: #ff6767;
 }
 .home-remain-time {
-  background: #F6FAFE;
+  background: #f6fafe;
   margin-top: 6rem;
   margin-left: 1rem;
   margin-right: 1rem;
@@ -230,7 +230,7 @@ const operationState = computed(() => {
   font-size: 24px;
   gap: 10px;
   .home-remaini-value {
-    color: #2892F3;
+    color: #2892f3;
   }
 }
 </style>

src/components/home/LineChart.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { formatDateTime } from 'libs/utils'
 import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
-  envData: Home.DisplayrelyMgrParams
+  envData: any
 }>()
 
 const titles = {
@@ -11,6 +12,7 @@ const titles = {
   WiredExtSensor: '外接传感器',
   WirelessExtSensor: '无线传感器',
 }
+
 watch(
   () => props.envData,
   (newValue) => {
@@ -23,7 +25,7 @@ watch(
     }
     const option = {
       title: {
-        text: titles[newValue?.[0]?.type || ''] || '',
+        text: titles[newValue?.type || ''] || '',
       },
       tooltip: {
         trigger: 'axis',
@@ -40,6 +42,7 @@ watch(
       xAxis: {
         type: 'category',
         boundaryGap: false,
+        data: newValue.data.map(item => formatDateTime('HH:mm:ss', item.timestamp)),
       },
       yAxis: {
         type: 'value',
@@ -48,7 +51,7 @@ watch(
         {
           name: '温度',
           type: 'line',
-          data: newValue.map(item => item.temp.toFixed(2)),
+          data: newValue.data.map(item => item.temp.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -59,7 +62,7 @@ watch(
         {
           name: '湿度',
           type: 'line',
-          data: newValue.map(item => item.rh.toFixed(2)),
+          data: newValue.data.map(item => item.rh.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -70,7 +73,7 @@ watch(
         {
           name: 'H2O2浓度',
           type: 'line',
-          data: newValue.map(item => item.h2o2.toFixed(2)),
+          data: newValue.data.map(item => item.h2o2.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -81,7 +84,7 @@ watch(
         {
           name: 'H2O2饱和度',
           type: 'line',
-          data: newValue.map(item => item.rs.toFixed(2)),
+          data: newValue.data.map(item => item.rs.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {

src/stores/homeStore.ts

@@ -50,10 +50,8 @@ export const useHomeStore = defineStore('home', () => {
    * @param {Home.DisplayrelyMgr[]} data - 当前设备所有环境数据（仓内、探头）
    * @desc 更新环境传感器数据（温度、湿度、过氧化氢浓度等）
    */
-  const updateHomeData = (data: Home.DisplayrelyMgrs) => {
-    const sensordata = data.sensordata
-    if (sensordata && sensordata.length) {
-      sensordata.forEach((item, index) => {
+  const updateHomeData = (data: Home.DisplayrelyMgr[]) => {
+    data.forEach((item, index) => {
       if (allData.value[index]) {
         allData.value[index].data.push(item)
         // data中的数据只保留最后30条
@@ -72,7 +70,6 @@ export const useHomeStore = defineStore('home', () => {
       }
     })
   }
-  }
 
   const updatePressureConfig = (data: Home.ParssureData) => {
     pressureConfig.value = data || PARSSURE_DATA

src/views/home/chart.vue

@@ -8,7 +8,7 @@ import LineChart from 'components/home/LineChart.vue'
 import { stopTimer } from 'libs/countdownTimer'
 import { deviceStateMap } from 'libs/utils'
 import { cloneDeep } from 'lodash'
-import { provide, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useFormulaStore } from '@/stores/formulaStore'
@@ -77,6 +77,55 @@ const goHome = () => {
 const onClose = () => {
   disinfectFormulaVisible.value = false
 }
+
+const chartList = ref<any[]>([])
+const operationState = computed(() => {
+  return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
+})
+
+let poll = null
+
+const getData = async () => {
+  const res = await syncSendCmd({
+    className: 'DisinfectionCtrlServiceExt',
+    fnName: 'getState',
+  })
+  console.log(res.rely.startTimestamp)
+  const data = await syncSendCmd({
+    className: 'H2O2SensorMgr',
+    fnName: 'getH2O2SensorList',
+  })
+  chartList.value = data.rely
+  for (let i = 0; i < chartList.value.length; i++) {
+    const item: any = chartList.value[i]
+    const list = await syncSendCmd({
+      className: 'H2O2SensorMgr',
+      fnName: 'getH2O2DataRecordList',
+      params: {
+        type: item.type,
+        id: item.id,
+        since: res.rely?.startTimestamp,
+        interval: 30,
+        before: 0,
+      },
+    })
+    chartList.value[i].data = list.rely
+  }
+  console.log(chartList.value)
+}
+onMounted(async () => {
+  await getData()
+  poll = setInterval(() => {
+    if (!operationState.value) {
+      clearInterval(poll)
+    }
+    getData()
+  }, 1000 * 30)
+})
+
+onUnmounted(() => {
+  clearInterval(poll)
+})
 </script>
 
 <template>
@@ -102,12 +151,9 @@ const onClose = () => {
         </bt-button>
       </div>
     </div>
-    <div
-      class="line-chart-content"
-      :style="{ 'grid-template-columns': `repeat(${homeStore.h2O2SensorData.length},1fr)` }"
-    >
-      <div v-for="(item, index) in homeStore.allData" :key="index">
-        <LineChart :env-data="item.data" />
+    <div class="line-chart-content" :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }">
+      <div v-for="(item, index) in chartList" :key="index">
+        <LineChart :env-data="item" />
       </div>
     </div>
     <div class="line-chart-bottom">