fix: 传感器优化

src/components/home/Environment.vue

@@ -11,7 +11,7 @@ import { onMounted } from 'vue'
  * @props {object} envParams - 环境参数对象
  * @props {string} lineColor - 线条颜色（默认值：red）
  */
-defineProps({
+const props = defineProps({
   envParams: {
     type: Object,
     default: () => ({
@@ -28,6 +28,7 @@ defineProps({
     default: 'red',
   },
 })
+console.log(props.envParams)
 
 /**
  * 图片资源映射对象
@@ -37,9 +38,15 @@ defineProps({
  * @property {string} env2 - 探头2图标路径
  */
 const imgs: Record<string, any> = {
-  inside: homeInside,
-  env1: homeProbe1,
-  env2: homeProbe2,
+  Internal: homeInside,
+  WiredExtSensor: homeProbe1,
+  WirelessExtSensor: homeProbe2,
+}
+
+const titles = {
+  Internal: '仓内',
+  WiredExtSensor: '外接传感器',
+  WirelessExtSensor: '无线传感器',
 }
 
 /**
@@ -52,9 +59,11 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="box">
     <div class="title">
-    <img :src="imgs[envParams.type]"> {{ envParams.title }}
+      <img :src="imgs[envParams.type] || homeInside"> {{ titles[envParams.type] }}
     </div>
+    <div style="display: flex; flex-direction: column; justify-content: flex-end">
       <div class="env-row odd">
         <div class="env-row-label">
           温度
@@ -87,12 +96,20 @@ onMounted(() => {
           {{ !envParams.h2o2 || envParams.h2o2 === -1 ? '--' : roundNumber(envParams.h2o2, 2) }}ppm
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+.box {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 0;
+}
 div {
-  //font-family: 思源黑体;
-  font-size: 18px;
+  font-size: 15px;
   font-weight: normal;
   line-height: normal;
   letter-spacing: 0.06em;
@@ -101,21 +118,14 @@ div {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 26px;
-  padding: 1rem;
-}
-.title-line {
-  height: 1vw;
-  position: absolute;
-  width: 100%;
-  border-radius: 10px 10px 0 0;
-  margin: -2.12rem;
+  font-size: 20px;
+  padding: 10px;
 }
 .env-row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  height: 7.8vh;
-  padding: 7px;
+  //height: 7.8vh;
+  padding: 10px;
   .env-row-label {
     display: flex;
     align-items: center;

src/views/home/index.vue

@@ -8,7 +8,7 @@ import HomeSetting from 'components/home/HomeSetting.vue'
 import { useDeviceStore } from 'stores/deviceStore'
 import { useHomeStore } from 'stores/homeStore'
 import { useLiquidStore } from 'stores/liquidStore'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { roundNumber } from '@/libs/utils'
@@ -22,55 +22,28 @@ const liquidStore = useLiquidStore()
 const formulaStore = useFormulaStore()
 const systemStore = useSystemStore()
 const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0])
-const initEnv1 = {
-  type: 'env1',
-  title: '探头1',
-}
-// const initEnv2 = {
-//   type: 'env2',
-//   title: '探头2',
-// }
-const probe1Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[1] || initEnv1)
-const probe2Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[2])
 const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData)
 const liquidTotal = ref<number>(liquidStore.liquidTotal)
 const formulaInfo = ref()
 const loading = ref(false)
 
+onMounted(() => {
   watchEffect(() => {
     formulaInfo.value = formulaStore.currentSelectedFormulaInfo
     liquidTotal.value = liquidStore.liquidTotal
     liquidInfo.value = liquidStore.liquidStateData
     loading.value = systemStore.loading
     if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
+      styles.value = computedStyle()
       console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
       environmentParams.value = {
         ...homeStore.h2O2SensorData[0],
         title: '仓内',
         type: 'inside',
       }
-    if (homeStore.h2O2SensorData.length === 2) {
-      probe1Params.value = {
-        ...homeStore.h2O2SensorData[1],
-        title: '探头1',
-        type: 'env1',
-      }
-    }
-
-    if (homeStore.h2O2SensorData.length === 3) {
-      probe1Params.value = {
-        ...homeStore.h2O2SensorData[1],
-        title: '探头1',
-        type: 'env1',
-      }
-      probe2Params.value = {
-        ...homeStore.h2O2SensorData[2],
-        title: '探头2',
-        type: 'env2',
-      }
-    }
     }
   })
+})
 
 // 当前消毒液余量百分比
 const nowLiquidProgress = computed(() => {
@@ -84,13 +57,108 @@ const nowLiquidProgress = computed(() => {
 const nowLiquid = computed(() => {
   return roundNumber(liquidInfo.value.nowLiquid, 0)
 })
+
+const styles = ref<any>({
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateRows: 'repeat(2, 1fr)',
+})
+
+const computedStyle = () => {
+  console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
+  if (deviceStore.isLowCost) {
+    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)',
+      }
+    }
+  }
+  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)',
+      }
+    }
+  }
+}
 </script>
 
 <template>
   <div v-loading="loading" class="home">
     <div v-if="route.path === '/home'" class="home-grid-container">
-      <div class="home-left">
-        <el-card v-if="!deviceStore.isLowCost" class="card">
+      <div class="home-left" :style="styles">
+        <el-card
+          v-if="!deviceStore.isLowCost"
+          class="card"
+          :class="{
+            'card-center-1': !deviceStore.isLowCost && homeStore.h2O2SensorData.length === 2,
+            'card-center-2': !deviceStore.isLowCost && homeStore.h2O2SensorData.length === 4,
+          }"
+        >
           <template #default>
             <!-- <div class="title-line" /> -->
             <div class="card-title-name">
@@ -106,14 +174,16 @@ const nowLiquid = computed(() => {
             </div>
           </template>
         </el-card>
-        <el-card class="card" :class="{ 'card-center': deviceStore.isLowCost }">
-          <Environment :env-params="environmentParams" />
-        </el-card>
-        <el-card class="card">
-          <Environment :env-params="probe1Params" />
-        </el-card>
-        <el-card class="card">
-          <Environment :env-params="probe2Params" />
+        <el-card
+          v-for="(item, index) in homeStore.h2O2SensorData"
+          :key="item.sensorId"
+          class="card"
+          :class="{
+            'card-center-1': index === 0 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 3,
+            'card-center-2': index === 0 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 5,
+          }"
+        >
+          <Environment :env-params="item" />
         </el-card>
       </div>
       <div class="home-grid-item home-right">
@@ -151,13 +221,12 @@ $input-height: 3rem;
 .home-left {
   height: 100%;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
   gap: 10px;
 
   .card {
     text-align: center;
     width: 100%;
+    height: 100%;
     border: 1px solid rgb(225, 225, 225);
     position: relative;
     border-radius: 10px 10px 10px 10px;
@@ -177,7 +246,7 @@ $input-height: 3rem;
       display: flex;
       align-items: center;
       gap: 10px;
-      font-size: 26px;
+      font-size: 20px;
       padding: 1rem;
     }
 
@@ -209,8 +278,16 @@ $input-height: 3rem;
 .el-button {
   background-color: #2892f3 !important;
 }
-.card-center {
+.card-center-1 {
   grid-column: 1 / -1; // 占据整行
   justify-self: center; // 横向居中
 }
+.card-center-2 {
+  grid-column: 1 / 3; // 占据整行
+  justify-self: center; // 横向居中
+}
+
+:deep(.el-card__body) {
+  height: 100%;
+}
 </style>