fix:首页传感器别名

src/components/home/Environment.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { syncSendCmd } from 'apis/system'
 import homeInside from 'assets/images/home/home-inside.svg'
 import homeProbe1 from 'assets/images/home/home-probe1.svg'
 import homeProbe2 from 'assets/images/home/home-probe2.svg'
-import { roundNumber } from 'libs/utils'
-import { onMounted } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 /**
  * 环境参数展示组件
@@ -21,6 +21,7 @@ const props = defineProps({
       rh: 0, // 相对湿度
       rs: 0, // 相对饱和度
       h2o2: 0, // 过氧化氢浓度
+      aliasName: '',
     }),
   },
   lineColor: {
@@ -28,7 +29,15 @@ const props = defineProps({
     default: 'red',
   },
 })
-console.log(props.envParams)
+
+const aliasName = ref(props.envParams.aliasName)
+
+watch(
+  () => props.envParams,
+  () => {
+    aliasName.value = props.envParams.aliasName
+  },
+)
 
 /**
  * 图片资源映射对象
@@ -55,6 +64,19 @@ const titles: Record<string, any> = {
 onMounted(() => {
   // 可扩展初始化操作
 })
+
+const changeNameHandle = () => {
+  const params = {
+    className: 'H2O2SensorMgr',
+    fnName: 'setH2O2SensorAliasName',
+    params: {
+      type: 'Internal',
+      id: 1,
+      aliasName: aliasName.value,
+    },
+  }
+  syncSendCmd(params)
+}
 </script>
 
 <template>
@@ -70,6 +92,14 @@ onMounted(() => {
       </el-tag>
     </div>
     <div style="display: flex; flex-direction: column; justify-content: flex-end">
+      <div class="env-row">
+        <div class="env-row-label">
+          备注
+        </div>
+        <div class="env-row-value">
+          <el-input v-model="aliasName" @blur="changeNameHandle" />
+        </div>
+      </div>
       <div class="env-row odd">
         <div class="env-row-label">
           温度
@@ -119,17 +149,17 @@ onMounted(() => {
   padding: 10px 0;
 }
 div {
-  font-size: 15px;
-  font-weight: normal;
-  line-height: normal;
-  letter-spacing: 0.06em;
+  //font-size: 15px;
+  //font-weight: normal;
+  //line-height: normal;
+  //letter-spacing: 1px;
 }
 .title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  font-size: 20px;
+  font-size: 18px;
   padding: 10px;
 }
 .env-row {
@@ -148,7 +178,10 @@ div {
     align-items: center;
     justify-self: end;
     justify-content: center;
-    padding-right: 10px;
+    .el-input {
+      width: 100px;
+    }
+    //padding-right: 10px;
   }
 }
 .odd {

src/components/home/HomeSetting.vue

@@ -158,7 +158,7 @@ const onCloseRuntime = () => {
 </script>
 
 <template>
-  <el-button type="primary" @click="onShowChart">
+  <el-button v-if="!deviceState" type="primary" @click="onShowChart">
     查看图表
   </el-button>
   <el-button v-if="deviceState" style="margin: 0" @click="onDisinfectConfig()">

src/stores/homeStore.ts

@@ -51,6 +51,33 @@ const h2O2Data: Home.DisplayrelyMgrParams[] = [deviceTypeMap.PipeDM, deviceTypeM
         rs: -1,
         h2o2: -1,
       },
+      {
+        type: 'WirelessExtSensor',
+        isOnline: false,
+        sensorId: 4,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        isOnline: false,
+        sensorId: 5,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
+      {
+        type: 'WirelessExtSensor',
+        isOnline: false,
+        sensorId: 6,
+        temp: -1,
+        rh: -1,
+        rs: -1,
+        h2o2: -1,
+      },
     ]
   : [
       {

src/views/home/index.vue

@@ -90,19 +90,28 @@ const deviceType = computed(() => {
 <template>
   <div class="home">
     <div v-if="route.path === '/home'" class="home-grid-container">
-      <div class="home-left" :style="styles">
-        <el-card
-          v-for="(item, index) in homeStore.h2O2SensorData"
-          :key="item.sensorId"
-          class="card"
-          :class="{
-            'card-center-1':
-              index === 0
-              && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM),
-          }"
-        >
-          <Environment :env-params="item" />
-        </el-card>
+      <div class="home-left">
+        <div class="left-box">
+          <el-card
+            v-for="item in homeStore.h2O2SensorData.filter(item => item.type !== 'WirelessExtSensor')"
+            :key="item.sensorId"
+            class="card"
+            :class="{
+              'card-one': [deviceStore.deviceTypeMap.PipeDM, deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
+            }"
+          >
+            <Environment :env-params="item" />
+          </el-card>
+        </div>
+        <div class="left-box">
+          <el-card
+            v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')"
+            :key="item.sensorId"
+            class="card"
+          >
+            <Environment :env-params="item" />
+          </el-card>
+        </div>
       </div>
       <div class="home-grid-item home-right">
         <!-- 正在进行的配方 -->
@@ -170,35 +179,47 @@ $input-height: 3rem;
 
 .home-left {
   height: 100%;
+  width: 100%;
   display: grid;
-  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;
-    background: #ffffff;
-    background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
-    background: rgba(147, 203, 255, 0.1);
-
-    .title-line {
-      height: 1vw;
-      background-color: #b3d9ff;
-      position: absolute;
-      width: 100%;
-      border-radius: 10px 10px 0 0;
-      margin: -2.12rem;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(1, 1fr);
+  gap: 20px;
+  .left-box {
+    display: flex; // 使用 Flexbox 布局
+    flex-direction: row; // 子元素水平排列（默认值）
+    align-items: flex-start; // 子元素顶部对齐
+    overflow-x: auto; // 横向滚动支持
+    width: 100%; // 父容器宽度占满
+    gap: 10px; // 子元素之间的间距（可选）
+    .card-one {
+      width: 100% !important;
     }
+    .card {
+      flex: 0 0 auto;
+      width: calc(100% / 3 - 10px);
+      height: 100%;
+      min-width: 200px;
+      border: 1px solid rgb(225, 225, 225);
+      border-radius: 10px;
+      background: rgba(147, 203, 255, 0.1);
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
 
-    .card-title-name {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 20px;
-      padding: 1rem;
+      .title-line {
+        height: 1vw;
+        background-color: #b3d9ff;
+        position: absolute;
+        width: 100%;
+        border-radius: 10px 10px 0 0;
+        margin: -2.12rem;
+      }
+
+      .card-title-name {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 20px;
+        padding: 1rem;
+      }
     }
   }
 }