优化样式问题

src/components/common/CascadingSelectModal/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { FtMessage } from 'libs/message'
 import { useHomeStore } from 'stores/homeStore'
 import { defineEmits, defineProps, onBeforeMount, onMounted, ref, toRefs, watchEffect } from 'vue'
 
@@ -87,7 +88,12 @@ const selectOption = (option: System.Option) => {
 }
 
 const confirmSelection = () => {
+  if (tempSelectedLeftValue.value !== 'constantPressure' && !tempSelectedRightValue.value) {
+    FtMessage.warning('请选择压力值')
+    return
+  }
   tempSelectedValue.value = [tempSelectedLeftValue.value, `${tempSelectedRightValue.value}`]
+
   emits('confirm', tempSelectedValue.value)
 }
 

src/components/common/SoftKeyboard/index.vue

@@ -41,8 +41,8 @@ onMounted(() => {
 const isOpen = ref(false)
 watchEffect(() => {
   // 在焦点内二次点击时不触发EventListener，做一下延迟处理
-  console.log('deviceStete.deviceType--11-', deviceStete.deviceType)
-  if (!deviceStete.deviceType) {
+  console.log('deviceStete.deviceType--11-', deviceStete.isLowCost)
+  if (!deviceStete.isLowCost) {
     setTimeout(() => {
       isOpen.value = props.isVisible
     }, 100)
@@ -51,8 +51,8 @@ watchEffect(() => {
 })
 
 watch(() => props.isVisible, (newVal) => {
-  console.log('deviceStete.deviceType--2-', deviceStete.deviceType)
-  if (!deviceStete.deviceType) {
+  console.log('deviceStete.deviceType--2-', deviceStete.isLowCost)
+  if (!deviceStete.isLowCost) {
     isOpen.value = newVal
   }
 })

src/components/formula/FormulaConfig.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
   type: string
 }>()
 
-const nameLength = 10
+const nameLeng = 10
 
 const formulaStore = useFormulaStore()
 
@@ -138,7 +138,6 @@ watchEffect(() => {
  * @param {string | number} newVal - 新的输入值
  */
 watch(inputValue, (newVal: string | number) => {
-  console.log('inputValue-----------', inputValue)
   if (focusedInput.value) {
     if (focusedInput.value !== 'name') {
       newVal = Number(newVal)
@@ -148,19 +147,15 @@ watch(inputValue, (newVal: string | number) => {
       formData.value[focusedInput.value] = newVal
     }
     else {
-      if (formData.value.name && formData.value.name.length > nameLength) {
-        inputValue.value = formData.value.name
+      if (newVal && newVal.toString().length > nameLeng) {
+        inputValue.value = formData.value[focusedInput.value]
+        return
       }
+      formData.value[focusedInput.value] = newVal
     }
   }
 })
 
-// watch(formData, (newVal) => {
-//   if (newVal && newVal.length > nameLength) {
-//     formData.value.name = newVal.name.slice(0, nameLength)
-//   }
-// }, { deep: true })
-
 /**
  * 获取当前表单数据，将值转换为字符串格式
  * @returns {Record<string, string>} 转换后的表单数据
@@ -372,6 +367,7 @@ const openKeyboardType = (labelName: string) => {
             v-prevent-keyboard
             name="name"
             placeholder="配方名称"
+            maxlength="10"
             :disabled="type === 'home'"
             class="formdata-input-home"
             @focus="openKeyboard"

src/components/formula/FormulaTable.vue

@@ -50,6 +50,8 @@ const onStartFormula = (item: Formula.FormulaItem) => {
       }
       syncSendCmd(params).then((res) => {
         if (res.ackcode === 0) {
+          // 把选择执行的配方同步至运行参数
+          formulaStore.updateSelectedFormulaDataByList(item)
           FtMessage.success('已开始消毒')
         }
       })

src/components/home/HomeSetting.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { FtMessage } from '@/libs/message'
+import { useDeviceStore } from '@/stores/deviceStore'
 import { useFormulaStore } from '@/stores/formulaStore'
 import { useHomeStore } from '@/stores/homeStore'
 import { sendCmd, syncSendCmd } from 'apis/system'
@@ -26,6 +27,7 @@ provide<(methods: Home.GrandsonMethods) => void>('registerGrandsonMethods', (met
 // 状态管理
 const router = useRouter()
 const formulaStore = useFormulaStore()
+const deviceStore = useDeviceStore()
 const homeStore = useHomeStore()
 
 // 组件状态
@@ -210,12 +212,19 @@ const handleCancel = () => {
 const onClose = () => {
   disinfectFormulaVisible.value = false
 }
+
+const settingWidth = computed(() => {
+  if (deviceStore.isLowCost) {
+    return '13rem'
+  }
+  return '7.5rem'
+})
 </script>
 
 <template>
   <div class="home-start-opt">
     <div class="home-opt-flex">
-      <div>
+      <div v-if="!deviceStore.isLowCost">
         <BtButton
           button-text="压力控制"
           text-size="1.3rem"
@@ -231,7 +240,7 @@ const onClose = () => {
           button-text="查看图表"
           text-size="1.3rem"
           border-radius="5px"
-          width="7.5rem"
+          :width="settingWidth"
           height="3rem"
           text-color="#1989fa"
           :disabled="deviceState"
@@ -244,7 +253,7 @@ const onClose = () => {
           button-text="消毒设置"
           text-size="1.3rem"
           border-radius="5px"
-          width="7.5rem"
+          :width="settingWidth"
           text-color="#1989fa"
           height="3rem"
           @click="onDisinfectConfig"
@@ -254,7 +263,7 @@ const onClose = () => {
           button-text="运行参数"
           text-size="1rem"
           border-radius="5px"
-          width="7rem"
+          :width="settingWidth"
           text-color="#1989fa"
           height="3rem"
           @click="onDisinfectConfig"

src/components/setting/Device.vue

@@ -4,8 +4,18 @@ import { ref } from 'vue'
 
 const deviceStore = useDeviceStore()
 const deviceInfo = ref(deviceStore.deviceInfo)
-const screenWidth = ref(window.screen.width)
-const screenHeight = ref(window.screen.height)
+const screenInfo = {
+  width: window.innerWidth, // 屏幕宽度（逻辑像素）
+  height: window.innerHeight, // 屏幕高度（逻辑像素）
+  availWidth: window.screen.availWidth, // 可用宽度（排除任务栏等）
+  availHeight: window.screen.availHeight, // 可用高度
+  pixelRatio: window.devicePixelRatio, // 设备像素比（物理像素/逻辑像素）
+  colorDepth: window.screen.colorDepth, // 颜色深度
+}
+const width = Math.floor(screenInfo.width * screenInfo.pixelRatio)
+const height = Math.floor(screenInfo.height * screenInfo.pixelRatio)
+const screenWidth = ref(width)
+const screenHeight = ref(height)
 </script>
 
 <template>

src/components/setting/History.vue

@@ -106,6 +106,7 @@ const onClose = () => {
         @click="onExportHistory"
       />
       <bt-button
+        type="primary"
         button-text="删除"
         @click="onDelHistory"
       />

src/components/setting/HistoryDetail.vue

@@ -54,7 +54,7 @@ const tableColumns = computed(() => {
         :key="column.prop"
         :prop="column.prop"
         :label="column.label"
-        width="150"
+        width="200"
         :min-width="column.minWidth"
       />
     </el-table>

src/components/setting/User.vue

@@ -89,7 +89,7 @@ const handleSelectionChange = (users: User.UserItem[]) => {
     <div class="user-table">
       <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column prop="name" label="用户名" />
-        <el-table-column prop="detail" label="操作" width="150" align="center">
+        <el-table-column prop="detail" label="操作" width="250" align="center">
           <template #default="scoped">
             <div class="user-opera">
               <el-link type="primary" @click="updatePwd(scoped.row)">
@@ -129,5 +129,6 @@ const handleSelectionChange = (users: User.UserItem[]) => {
 .user-opera{
   display: flex;
   gap: 10px;
+  justify-content: center;
 }
 </style>

src/layouts/default.vue

@@ -41,7 +41,7 @@ const sealInfo = ref(sealStore.sealInfo)
 const websocketConnected = ref(systemStore.websocketConnected)
 let touchStartTime = 0
 let touchCount = 0
-const deviceType = ref()
+const isLowCost = ref()
 
 onMounted(() => {
   // 连续3次点击任意地方，全屏显示
@@ -99,7 +99,7 @@ watchEffect(() => {
   // 密封测试状态
   sealInfo.value = sealStore.sealInfo
   showDeviceStateName()
-  deviceType.value = deviceStore.deviceType
+  isLowCost.value = deviceStore.isLowCost
 })
 
 onUnmounted(() => {
@@ -153,7 +153,7 @@ const toggleLanguage = () => {
           </div>
         </div>
         <div class="user">
-          <span v-if="deviceType">
+          <span v-if="isLowCost">
             <img v-if="websocketConnected" width="20" :src="WifiConnSvg" alt="" />
             <img v-else :src="WifiUnconnSvg" width="20" alt="" />
           </span>
@@ -201,12 +201,20 @@ const toggleLanguage = () => {
   box-sizing: border-box;
   height: 100%;
   background: #fff;
-  .header, .footer {
+  .header {
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+  }
+  .footer {
     height: 50px;
     width: 100%;
     display: flex;
     align-items: center;
     padding: 10px 15px;
+    position: sticky;
   }
   .header {
     color: #393F46;

src/router/routes.ts

@@ -13,8 +13,10 @@ import s_formula from 'assets/images/menuIcon/s-formula.svg'
 import s_liquid from 'assets/images/menuIcon/s-liquid.svg'
 import s_seal from 'assets/images/menuIcon/s-seal.svg'
 import s_setting from 'assets/images/menuIcon/s-setting.svg'
+import { useDeviceStore } from 'stores/deviceStore'
+import { ref, watchEffect } from 'vue'
 
-const authRoutes: RouteRecordRaw[] = [
+const authRoutes = ref<RouteRecordRaw[]>([
   {
     path: '/home',
     name: 'home',
@@ -102,7 +104,18 @@ const authRoutes: RouteRecordRaw[] = [
       activeIcon: s_setting,
     },
   },
-]
+])
+
+watchEffect(() => {
+  setTimeout(() => {
+    const deviceStore = useDeviceStore()
+    if (deviceStore.isLowCost) {
+      authRoutes.value = authRoutes.value.filter((item) => {
+        return item.name !== 'seal'
+      })
+    }
+  }, 2000)
+})
 
 const routes: RouteRecordRaw[] = [
   {
@@ -114,7 +127,7 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: () => import('../layouts/default.vue'),
     redirect: '/home',
-    children: authRoutes,
+    children: authRoutes.value,
   },
 ]
 

src/stores/deviceStore.ts

@@ -27,23 +27,24 @@ const deviceTypeMap = {
   SmallSpaceDM: 'DT300N', // 小空间
   PipeDM: 'DT300W', // 管道式
   DrawBarDM: 'DT100N', // 拉杆箱
-  LargeSpaceDM_B: 'DT600B', // 大空间标准
+  LargeSpaceDM_B: 'DT600B', // 大空间标准（低成本）
 }
 
 export const useDeviceStore = defineStore('device', () => {
   const deviceInfo = ref<Device.DeviceInfo>(initDeviceInfo)
   // 使用deviceType区分是什么消毒机。低成本消毒机部署在移动pad，不显示软件键盘的开关。 拉杆消毒机是上位机显示软键盘
   // 暂时使用 deviceType ： ture 表示 为低成本。
-  const deviceType = ref(true)
+  const isLowCost = ref(true)
   const deviceStete = ref<Device.State>(initState) // 设备状态
 
   const updateDeviceInfo = (info: Device.DeviceInfo) => {
     deviceInfo.value = info
-    if (info.projectType === 'SmallSpaceDM') {
-      deviceType.value = true
+    console.log('info.projectType--', info.projectType)
+    if (info.projectType === 'DT600B') {
+      isLowCost.value = true
     }
     else {
-      deviceType.value = false
+      isLowCost.value = false
     }
   }
 
@@ -67,7 +68,7 @@ export const useDeviceStore = defineStore('device', () => {
   return {
     deviceTypeMap,
     deviceInfo,
-    deviceType,
+    isLowCost,
     deviceStete,
     updateDeviceInfo,
     setDeviceState,

src/stores/homeStore.ts

@@ -37,7 +37,7 @@ export const useHomeStore = defineStore('home', () => {
   const curStateRemainTime = ref<string>()
   const disinfectionState = ref<Home.DisinfectState>(initDisinfectState) // 当前设备消毒状态
   let renderTimer: any
-  const defaultIntensityValue = ref(0)
+  const defaultIntensityValue = ref(10)
   const defaultIntensityTypeValue = ref()
 
   /**

src/views/audit/index.vue

@@ -138,8 +138,8 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
   .audit-pagination{
     height: 12%;
     display: flex;
-    justify-content: end;
     align-items: center;
+    float: right;
   }
 }
 </style>

src/views/debug/index.vue

@@ -2,16 +2,17 @@
 import { sendCmd } from 'apis/system'
 import { roundNumber } from 'libs/utils'
 import { useHomeStore } from 'stores/homeStore'
-import { ref, watch } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 const homeStore = useHomeStore()
 const h2O2SensorData = ref<Home.DisplayrelyMgrParams[]>(homeStore.h2O2SensorData)
 
-watch(() => homeStore.h2O2SensorData, (newVal) => {
-  if (newVal && newVal.length) {
-    h2O2SensorData.value = newVal
+watchEffect(() => {
+  const hdData = homeStore.h2O2SensorData
+  if (hdData && hdData.length) {
+    h2O2SensorData.value = [...hdData]
   }
-}, { deep: true })
+})
 
 // 加液
 const onAddLiquid = async () => {
@@ -85,22 +86,24 @@ const onBottomState = () => {}
   <div class="dashboard-container">
     <main class="main-content">
       <!-- 上下布局  -->
-      <section>
-        <div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh">
-          <div class="debug-label" style="text-align: center;">
-            {{ index === 0 ? '仓内环境' : item.title }}
-          </div>
-          <div>
-            <span>温度</span>
-            <span class="debug-text">{{ roundNumber(item.temp, 2) }}</span>°C
-          </div>
-          <div>
-            <span>湿度</span>
-            <span class="debug-text">{{ roundNumber(item.rh, 2) }}</span>
-          </div>
-          <div>
-            <span>过氧化氢浓度</span>
-            <span class="debug-text">{{ roundNumber(item.h2o2, 2) }}</span>PPM
+      <section class="debug-env">
+        <div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh">
+          <div class="debug-env-content">
+            <div class="debug-label env-content-p" style="text-align: center;width: 8rem">
+              {{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
+            </div>
+            <div class="env-content-p">
+              <span>温度</span>
+              <span class="debug-text">{{ roundNumber(item.temp, 2) }}</span>°C
+            </div>
+            <div class="env-content-p">
+              <span>湿度</span>
+              <span class="debug-text">{{ roundNumber(item.rh, 2) }}</span>
+            </div>
+            <div class="env-content-p">
+              <span>H202浓度</span>
+              <span class="debug-text">{{ roundNumber(item.h2o2, 2) }}</span>PPM
+            </div>
           </div>
         </div>
       </section>
@@ -267,7 +270,7 @@ const onBottomState = () => {}
     height: $main-container-height;
     overflow: hidden;
     background: $gradient-color;
-    padding-top: 50px;
+    padding-top: 4vh;
     padding-left: 30px;
     font-size: 20px;
     .debug-upper{
@@ -286,11 +289,23 @@ const onBottomState = () => {}
       }
     }
   }
-
+  .debug-env {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
   .debug-left-lh{
     display: flex;
     gap: 1rem;
     height: $lineHeight;
+    .debug-env-content{
+      display: flex;
+      .env-content-p{
+        padding: 5px;
+      }
+    }
+  }
+  .env-lh{
+    height: 10vh;
   }
   .debug-bw{
     width: 8vw;

src/views/home/index.vue

@@ -65,6 +65,9 @@ watchEffect(() => {
 
 // 当前消毒液余量百分比
 const nowLiquidProgress = computed(() => {
+  if (!liquidInfo.value.nowLiquid) {
+    return 0
+  }
   const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0)
   return nl
 })

src/views/seal/index.vue

@@ -340,7 +340,7 @@ const stopDisabled = computed(() => {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   .left-title{
-    padding-top: 3.5vw;
+    //padding-top: 3.5vw;
     padding-left: 2.5vw;
     display: flex;
     height: 25vh;

src/views/setting/index.vue

@@ -100,7 +100,6 @@ const selectItem = (menuCode: string) => {
     width: 100%; /* 占满父容器 */
     background: #fff;
     // border: 1px solid #eee;
-    border-radius: 12px;
     overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
   }
   .menu-item {