fix: 增加无线传感器显示

src/components/home/Environment.vue

@@ -44,7 +44,7 @@ const imgs: Record<string, any> = {
 }
 
 const titles: Record<string, any> = {
-  Internal: '仓内',
+  Internal: '仓内传感器',
   WiredExtSensor: '外接传感器',
   WirelessExtSensor: '无线传感器',
 }
@@ -60,7 +60,13 @@ onMounted(() => {
 <template>
   <div class="box">
     <div class="title">
-      <img :src="imgs[envParams.type] || homeInside" alt=""> {{ titles[envParams.type] }}
+      <div style="width: 100%; display: flex; align-items: center">
+        <img :src="imgs[envParams.type] || homeInside" alt="" style="margin-right: 10px"> {{ titles[envParams.type] }}
+      </div>
+
+      <el-tag v-if="!envParams.online" type="danger">
+        离线
+      </el-tag>
     </div>
     <div style="display: flex; flex-direction: column; justify-content: flex-end">
       <div class="env-row odd">
@@ -120,6 +126,7 @@ div {
 .title {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 10px;
   font-size: 20px;
   padding: 10px;

src/components/home/HomeFormula.vue

@@ -23,21 +23,21 @@ watchEffect(() => {
     </div>
     <div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">
       <span>速率</span>
-      <span style="color: #31CB7A">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
+      <span style="color: #31cb7a">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.home-right-title{
+.home-right-title {
   background: #fff;
-  width: 90%;
+  width: 100%;
   border-radius: 10px;
   margin: 10px auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   font-size: 1.5rem;
-  .title-formula{
+  .title-formula {
     display: flex;
     align-items: center;
     gap: 5px;
@@ -45,13 +45,13 @@ watchEffect(() => {
     font-size: 1.5rem;
     flex-wrap: nowrap;
   }
-  .title-formula{
+  .title-formula {
     flex: 1 1 auto;
     min-width: 0;
     white-space: normal;
     word-break: break-word;
   }
-  .title-spend{
+  .title-spend {
     justify-self: end;
     display: flex;
     align-items: center;

src/libs/countdownTimer.ts

@@ -16,11 +16,11 @@ class CountdownTimer {
   private formatTime(seconds: number): string {
     const hours = Math.floor(seconds / 3600)
     const minutes = Math.floor((seconds % 3600) / 60)
-    const secs = seconds % 60
+    // const secs = seconds % 60
     const timeStr = [
       hours.toString().padStart(2, '0'),
       minutes.toString().padStart(2, '0'),
-      secs.toString().padStart(2, '0'),
+      // secs.toString().padStart(2, '0'),
     ].join(':')
     return timeStr
   }

src/stores/homeStore.ts

@@ -5,18 +5,100 @@ import { computed, ref } from 'vue'
 
 import { DEVICE_STATES } from '@/libs/utils'
 
+const deviceTypeMap = {
+  LargeSpaceDM: 'DT600N', // 大空间
+  SmallSpaceDM: 'DT300N', // 小空间
+  PipeDM: 'DT300W', // 管道式
+  DrawBarDM: 'DT100N', // 拉杆箱
+  LargeSpaceDM_B: 'DT600B', // 大空间标准（低成本）
+}
+
 // 传感器数据初始值
-const h2O2Data: Home.DisplayrelyMgrParams[] = [
-  {
-    type: 'inside',
-    title: '仓内',
-    temp: 0,
-    rh: 0,
-    rs: 0,
-    h2o2: 0,
-    chartId: 'inside',
-  },
-]
+const h2O2Data: Home.DisplayrelyMgrParams[] = [deviceTypeMap.PipeDM, deviceTypeMap.DrawBarDM].includes(__DEVICE_TYPE__)
+  ? [
+      {
+        type: 'Internal',
+        online: true,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+    ]
+  : [
+      {
+        type: 'Internal',
+        online: true,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WiredExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WiredExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        online: false,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+    ]
 
 // 消毒状态初始值
 const initDisinfectState = {

src/types/home.d.ts

@@ -8,8 +8,9 @@ declare namespace Home {
     type: string // 传感器类型 Internal, WiredExSensor
   }
   interface DisplayrelyMgrParams extends DisplayrelyMgr {
-    title: string
-    chartId: string
+    title?: string
+    chartId?: string
+    online?: boolean
   }
   interface DisplayrelyMgrs {
     internalSensorNum: number // 内置传感器数量

src/views/home/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import homeLiquid from 'assets/images/home/home-liquid.svg'
 import Environment from 'components/home/Environment.vue'
 import HomeFormula from 'components/home/HomeFormula.vue'
 import HomeLogLevel from 'components/home/HomeLogLevel.vue'
@@ -64,85 +63,18 @@ const styles = ref<any>({
 })
 
 const computedStyle = () => {
-  // console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
-  if (__DEVICE_TYPE__ === deviceStore.deviceTypeMap.LargeSpaceDM_B) {
-    if (homeStore.h2O2SensorData.length === 1) {
-      return {
-        gridTemplateColumns: 'repeat(1, 1fr)',
-        gridTemplateRows: 'repeat(1, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 2) {
-      return {
-        gridTemplateColumns: 'repeat(1, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 3) {
-      return {
-        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-        gridTemplateRows: 'repeat(2, 1fr)',
-        justifyContent: 'center',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 4) {
-      return {
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 5) {
-      return {
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-        justifyContent: 'center',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 6) {
-      return {
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
+  if (
+    deviceType.value === deviceStore.deviceTypeMap.PipeDM
+    || deviceType.value === deviceStore.deviceTypeMap.DrawBarDM
+  ) {
+    return {
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gridTemplateRows: 'repeat(2, 1fr)',
     }
   }
-  else {
-    if (homeStore.h2O2SensorData.length === 1) {
-      return {
-        gridTemplateColumns: 'repeat(1, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 2) {
-      return {
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 3) {
-      return {
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 4) {
-      return {
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 5) {
-      return {
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-        justifyContent: 'center',
-      }
-    }
-    if (homeStore.h2O2SensorData.length === 6) {
-      return {
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gridTemplateRows: 'repeat(3, 1fr)',
-      }
-    }
+  return {
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridTemplateRows: 'repeat(2, 1fr)',
   }
 }
 const deviceType = computed(() => {
@@ -155,43 +87,13 @@ const deviceType = computed(() => {
     <div v-if="route.path === '/home'" class="home-grid-container">
       <div class="home-left" :style="styles">
         <el-card
-          v-if="deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B"
-          class="card"
-          :class="{
-            'card-center-1':
-              deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B && homeStore.h2O2SensorData.length === 2,
-            'card-center-2':
-              deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B && homeStore.h2O2SensorData.length === 4,
-          }"
-        >
-          <template #default>
-            <!-- <div class="title-line" /> -->
-            <div class="card-title-name">
-              <img :src="homeLiquid"> 消毒液
-            </div>
-            <div class="card-progress">
-              <div class="card-progress-content">
-                <el-progress :text-inside="true" :stroke-width="35" :percentage="nowLiquidProgress" />
-              </div>
-            </div>
-            <div class="card-num-g">
-              {{ nowLiquid }}（g）
-            </div>
-          </template>
-        </el-card>
-        <el-card
           v-for="(item, index) in homeStore.h2O2SensorData"
           :key="item.sensorId"
           class="card"
           :class="{
             'card-center-1':
               index === 0
-              && deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B
-              && homeStore.h2O2SensorData.length === 3,
-            'card-center-2':
-              index === 0
-              && deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B
-              && homeStore.h2O2SensorData.length === 5,
+              && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM),
           }"
         >
           <Environment :env-params="item" />
@@ -201,7 +103,22 @@ const deviceType = computed(() => {
         <!-- 正在进行的配方 -->
         <div class="top">
           <HomeFormula />
+
+          <div v-if="deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B" style="margin-top: 20px">
+            <div class="card-progress">
+              <!--              <div class="card-title-name"> -->
+              <!--                <img :src="homeLiquid"> -->
+              <!--              </div> -->
+              <div class="card-progress-content">
+                <el-progress size="small" :text-inside="true" :stroke-width="25" :percentage="nowLiquidProgress" />
+              </div>
+            </div>
+            <div class="card-num-g">
+              消毒液剩余:{{ nowLiquid }}（g）
+            </div>
+          </div>
         </div>
+
         <div class="middle">
           <!-- 选择消毒的等级 -->
           <HomeLogLevel v-if="formulaStore.isDefaultFormula" />
@@ -266,26 +183,11 @@ $input-height: 3rem;
       font-size: 20px;
       padding: 1rem;
     }
-
-    .card-progress {
-      display: flex;
-      justify-content: center;
-      margin-top: 3rem;
-
-      .card-progress-content {
-        width: 92%;
-      }
-    }
-
-    .card-num-g {
-      margin-top: 3.5vw;
-      font-size: 26px;
-      font-weight: bold;
-    }
   }
 }
 
 .home-right {
+  padding: 10px;
   background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
   border-radius: 10px;
   box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
@@ -313,4 +215,26 @@ $input-height: 3rem;
 :deep(.el-card__body) {
   height: 100%;
 }
+
+.card-progress {
+  margin-top: 10px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .card-title-name {
+    margin-right: 10px;
+  }
+
+  .card-progress-content {
+    width: 100%;
+  }
+}
+.card-num-g {
+  text-align: center;
+  font-size: 15px;
+  color: #3f4349;
+  font-weight: bold;
+  margin-top: 10px;
+}
 </style>