From 1fb159fa0c50ca2fe9cd0fffa0a03b02f96f23f8 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Wed, 2 Jul 2025 20:18:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E5=92=8C=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E7=AD=89=E6=A0=B9=E6=8D=AE=E8=AE=BE=E5=A4=87=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=90=8C=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.vue                             |   8 +-
 src/components/formula/FormulaTable.vue |  28 ++---
 src/components/liquid/ScaleRuler.vue    |  33 +++---
 src/router/routes.ts                    |  23 ++--
 src/stores/deviceStore.ts               |   9 +-
 src/stores/systemStore.ts               |  19 ++--
 src/views/home/index.vue                | 195 +++++++++++++++++---------------
 7 files changed, 164 insertions(+), 151 deletions(-)

diff --git a/src/app.vue b/src/app.vue
index 7d966fb..9157bb7 100644
--- a/src/app.vue
+++ b/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'
@@ -73,7 +73,7 @@ const getFormualDefaultData = async () => {
 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)
 
     // 初始化数据流程
@@ -167,7 +167,7 @@ const initLiquidConfig = async () => {
   </router-view>
 </template>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .main-content {
   width: 100%;
   height: 100%;
@@ -202,7 +202,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;
 }
diff --git a/src/components/formula/FormulaTable.vue b/src/components/formula/FormulaTable.vue
index 35ab981..c41620a 100644
--- a/src/components/formula/FormulaTable.vue
+++ b/src/components/formula/FormulaTable.vue
@@ -48,13 +48,11 @@ const initFormulaList = () => {
     formulaStore.initFormulaList()
   }
 }
-watch(selectedIndex, () => {
-
-})
+watch(selectedIndex, () => {})
 const selectRecipe = (item: Formula.FormulaItem, index: number) => {
-  selectedIndex.value = selectedIndex.value === index ? null : index
+  selectedIndex.value = index
   formulaStore.updateSelectedIndex(index)
-  console.log('selectedIndex--', selectedIndex)
+  console.log('selectedIndex--', selectedIndex.value)
   item = convertValuesToInt(item) as Formula.FormulaItem
   formulaStore.updateSelectedFormulaData(item)
 }
@@ -84,15 +82,11 @@ const onStartFormula = (item: Formula.FormulaItem) => {
 }
 
 const deleteRecipe = (item: Formula.FormulaItem) => {
-  ElMessageBox.confirm(
-    '请确认是否删除?',
-    '删除',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
+  ElMessageBox.confirm('请确认是否删除?', '删除', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
     if (item.formula_id) {
       const delParams = {
         className: 'SettingMgrService',
@@ -143,7 +137,6 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 
 <style scoped>
 .recipe-management {
-
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 5px;
@@ -155,7 +148,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
   list-style: none;
   padding: 0;
   margin: 0;
-  .formula-name{
+  .formula-name {
     font-size: 1.2rem;
     color: var(--el-text-color-regular);
     width: 10rem;
@@ -188,7 +181,8 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
   align-items: center;
 }
 
-.view-button, .delete-button {
+.view-button,
+.delete-button {
   font-size: 1rem;
   border: none;
   padding: 4px 8px;
diff --git a/src/components/liquid/ScaleRuler.vue b/src/components/liquid/ScaleRuler.vue
index 062d4bd..d9c0f86 100644
--- a/src/components/liquid/ScaleRuler.vue
+++ b/src/components/liquid/ScaleRuler.vue
@@ -2,16 +2,27 @@
 import { computed, ref, watch } from 'vue'
 
 // 接收外部传入的最大刻度值参数，比如 3000、5000 等
-const props = defineProps<{
+// const props = defineProps({
+//   maxScale: {
+//     type: number
+//     default: 2500
+//   },
+//   rulerHeight: {
+//     type: number
+//     default: 0
+//   }
+// })
+
+const props = defineProps({
   maxScale: {
-    type: number
-    default: 2500
-  } // 最大刻度，如 3000、5000
+    type: Number,
+    default: 2500,
+  },
   rulerHeight: {
-    type: number
-    default: 0
-  }
-}>()
+    type: Number,
+    default: 0,
+  },
+})
 
 // 基础配置，可根据需求调整
 const baseInterval = 300 // 大刻度间隔（显示文字的刻度间隔）
@@ -59,11 +70,7 @@ const rulerWidth = (mark) => {
         width: `${rulerWidth(mark)}%`,
       }"
     >
-      <div
-        v-if="mark.showText"
-        class="mark-text"
-        :style="{ transform: 'translateX(-120%) translateY(-50%)' }"
-      >
+      <div v-if="mark.showText" class="mark-text" :style="{ transform: 'translateX(-120%) translateY(-50%)' }">
         <div>{{ mark.value }}g</div>
       </div>
     </div>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 4202930..5d522d9 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -27,15 +27,18 @@ const authRoutes = ref<RouteRecordRaw[]>([
       icon: n_disinfect,
       activeIcon: s_disinfect,
     },
-    children: [{
-      path: 'config',
-      name: 'config',
-      component: () => import('@/components/home/Config.vue'),
-    }, {
-      path: 'chart',
-      name: 'chart',
-      component: () => import('views/home/chart.vue'),
-    }],
+    children: [
+      {
+        path: 'config',
+        name: 'config',
+        component: () => import('components/home/config.vue'),
+      },
+      {
+        path: 'chart',
+        name: 'chart',
+        component: () => import('views/home/chart.vue'),
+      },
+    ],
   },
   {
     path: '/liquid',
@@ -111,7 +114,7 @@ watchEffect(() => {
     const deviceStore = useDeviceStore()
     if (deviceStore.isLowCost) {
       authRoutes.value = authRoutes.value.filter((item) => {
-        return item.name !== 'seal'
+        return item.name !== 'seal' && item.name !== 'liquid'
       })
     }
   }, 2000)
diff --git a/src/stores/deviceStore.ts b/src/stores/deviceStore.ts
index 721c380..3e7982f 100644
--- a/src/stores/deviceStore.ts
+++ b/src/stores/deviceStore.ts
@@ -40,12 +40,9 @@ export const useDeviceStore = defineStore('device', () => {
 
   const updateDeviceInfo = (info: Device.DeviceInfo) => {
     deviceInfo.value = info
-    if (info.projectType === 'DT600B') {
-      isLowCost.value = true
-    }
-    else {
-      isLowCost.value = false
-    }
+    isLowCost.value = info.projectType === 'DT600B'
+    // isLowCost.value = true
+    console.log(isLowCost.value)
   }
 
   /**
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index 49b652a..e668373 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -11,16 +11,19 @@ export const useSystemStore = defineStore('system', () => {
 
   const loginForm = ref({
     name: import.meta.env.FT_NODE_ENV !== 'prod' ? 'admin' : '',
-    pwd: import.meta.env.FT_NODE_ENV !== 'prod' ? '9973' : '',
+    pwd: import.meta.env.FT_NODE_ENV !== 'prod' ? '123' : '',
   })
 
-  const languages = [{
-    name: '中文',
-    value: 'zh-cn',
-  }, {
-    name: 'English',
-    value: 'en',
-  }]
+  const languages = [
+    {
+      name: '中文',
+      value: 'zh-cn',
+    },
+    // {
+    //   name: 'English',
+    //   value: 'en',
+    // },
+  ]
 
   const menuExpand = true
   const isDebug = import.meta.env.FT_NODE_ENV !== 'prod'
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 81ab8e6..3fcf6de 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -5,6 +5,7 @@ import HomeFormula from 'components/home/HomeFormula.vue'
 import HomeLogLevel from 'components/home/HomeLogLevel.vue'
 import HomeOperation from 'components/home/HomeOperation.vue'
 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'
@@ -16,6 +17,7 @@ import { useSystemStore } from '@/stores/systemStore'
 
 const route = useRoute()
 const homeStore = useHomeStore()
+const deviceStore = useDeviceStore()
 const liquidStore = useLiquidStore()
 const formulaStore = useFormulaStore()
 const systemStore = useSystemStore()
@@ -69,7 +71,7 @@ const nowLiquidProgress = computed(() => {
   if (!liquidInfo.value.nowLiquid) {
     return 0
   }
-  const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0)
+  const nl = roundNumber(Number((liquidInfo.value.nowLiquid / liquidTotal.value) * 100), 0)
   return nl
 })
 
@@ -82,34 +84,32 @@ const nowLiquid = computed(() => {
 <template>
   <div v-loading="loading" class="home">
     <div v-if="route.path === '/home'" class="home-grid-container">
-      <div class="home-grid-item merged-cell">
-        <div class="home-left">
-          <el-card class="card">
-            <template #default>
-              <!-- <div class="title-line" /> -->
-              <div class="card-title-name">
-                <img :src="homeLiquid">  {{ $t('message.disinfectant') }}
+      <div class="home-left">
+        <el-card v-if="!deviceStore.isLowCost" class="card">
+          <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 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 class="card">
-            <Environment :env-params="environmentParams" line-color="#ffb380" />
-          </el-card>
-          <el-card class="card">
-            <Environment :env-params="probe1Params" line-color="#80ffb3" />
-          </el-card>
-          <el-card class="card">
-            <Environment :env-params="probe2Params" line-color="#cc99ff" />
-          </el-card>
-        </div>
+            </div>
+            <div class="card-num-g">
+              {{ nowLiquid }}（g）
+            </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>
       </div>
       <div class="home-grid-item home-right">
         <!-- 正在进行的配方 -->
@@ -129,74 +129,83 @@ const nowLiquid = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-  $input-height: 3rem;
-  .home{
-    width: 100%;
-    height: 100%;
-  }
-  .home-grid-container {
+$input-height: 3rem;
+.home {
+  width: 100%;
+  height: 100%;
+}
+
+.home-grid-container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 10px;
+}
+
+.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%;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-  }
-  .home-merged-cell {
-    grid-column: 1 / 2;
-    background-color: #ff6b6b;
-  }
-  .home-left {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-    gap: 20px;
-    .card {
-      text-align: center;
-      height: 40vh;
-      width: 30.5vw;
-      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%);
-      .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: 26px;
-        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;
+    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%);
+
+    .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: 26px;
+      padding: 1rem;
+    }
+
+    .card-progress {
+      display: flex;
+      justify-content: center;
+      margin-top: 3rem;
+
+      .card-progress-content {
+        width: 92%;
       }
     }
-  }
 
-  .home-right{
-    width: 32.8vw;
-    background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
-    position: relative;
-    border-radius: 10px;
-    box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
-  }
-  .el-button {
-    background-color: #2892F3 !important;
+    .card-num-g {
+      margin-top: 3.5vw;
+      font-size: 26px;
+      font-weight: bold;
+    }
   }
+}
+
+.home-right {
+  background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
+  position: relative;
+  border-radius: 10px;
+  box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
+}
+
+.el-button {
+  background-color: #2892f3 !important;
+}
+.card-center {
+  grid-column: 1 / -1; // 占据整行
+  justify-self: center; // 横向居中
+}
 </style>