优化首页

src/app.vue

@@ -1,9 +1,47 @@
 <script setup lang='ts'>
+import { sendCmd } from '@/apis/system'
+import { useHomeStore } from 'stores/homeStore'
 import { onMounted } from 'vue'
 
+const homeStore = useHomeStore()
 onMounted(async () => {
-  console.log('--------1----------')
+  setInterval(() => {
+    initData()
+  }, 1000)
 })
+
+const initData = async () => {
+  const envParams = {
+    fnName: 'readH2O2SensorData',
+    className: 'FrontEndRealtimeDisplayContentMgr',
+    params: {},
+  }
+  const resData = await sendCmd(envParams)
+  if (resData.rely && resData.rely.val.length) {
+    homeStore.updateHomeData(resData.rely.val)
+  }
+
+  const liquidParams = {
+    fnName: 'getState',
+    className: 'AddLiquidService',
+    params: {},
+  }
+  const liquidData = await sendCmd(liquidParams)
+  if (liquidData.rely) {
+    homeStore.updateHomeLiquid(liquidData.rely)
+  }
+
+  const deviceParams = {
+    className: 'AppCore',
+    fnName: 'getState',
+    params: {},
+  }
+  // 当前设备状态
+  const deviceData = await sendCmd(deviceParams)
+  if (deviceData.rely) {
+    homeStore.setDeviceState(deviceData.rely)
+  }
+}
 </script>
 
 <template>

src/components/formula/FormulaConfig.vue

@@ -3,7 +3,6 @@ import { useFormulaStore } from '@/stores/formulaStore'
 import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
 import { onMounted, ref, watch } from 'vue'
 
-const slots = defineSlots()
 const formulaStore = useFormulaStore()
 const logLevelList = ref(formulaStore.logEnums)
 const formData = ref<Formula.FormulaItem>(formulaStore.currentSelectedFormulaInfo || formulaStore.initFormulaInfo)
@@ -14,7 +13,6 @@ const softKeyboardRef = ref()
 const focusedInput = ref<string | null>(null)
 
 onMounted(() => {
-  console.log('$slots---', slots)
   // 离开输入框焦点时 关闭软键盘
   document.addEventListener('click', (e: any) => {
     if (softKeyboardRef.value && !e.target?.name) {
@@ -78,10 +76,10 @@ const openKeyboardType = (labelName: string) => {
   <div class="formula-form">
     <el-form :model="formData" label-width="200px" label-position="left">
       <el-form-item label="配方名称">
-        <el-input v-model="formData.name" name="name" v-prevent-keyboard class="formdata-input" @focus="openKeyboard" placeholder="配方名称" />
+        <el-input v-model="formData.name" v-prevent-keyboard name="name" class="formdata-input" @focus="openKeyboard" placeholder="配方名称" />
       </el-form-item>
       <el-form-item label="喷射蠕动泵转速">
-        <el-input-number v-model.number="formData.injection_pump_speed"  name="injection_pump_speed" v-prevent-keyboard :min="0" :max="40" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.injection_pump_speed" v-prevent-keyboard name="injection_pump_speed" :min="0" :max="40" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">g/min</span>
       </el-form-item>
       <el-form-item label="空气阀配置">
@@ -90,40 +88,44 @@ const openKeyboardType = (labelName: string) => {
         </el-select>
       </el-form-item>
       <el-form-item label="消毒继续过氧化氢浓度">
-        <el-input-number v-model.number="formData.continued_gs" name="continued_gs" v-prevent-keyboard :min="0" :max="800" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.continued_gs" v-prevent-keyboard name="continued_gs" :min="0" :max="800" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">ppm</span>
       </el-form-item>
       <el-form-item label="消毒停止过氧化氢浓度">
-        <el-input-number v-model.number="formData.stoped_gs" name="stoped_gs" v-prevent-keyboard :min="0" :max="800" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.stoped_gs" v-prevent-keyboard name="stoped_gs" :min="0" :max="800" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">ppm</span>
       </el-form-item>
       <el-form-item label="消毒继续相对湿度">
-        <el-input-number v-model.number="formData.continued_humi" name="continued_humi" v-prevent-keyboard :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.continued_humi" v-prevent-keyboard name="continued_humi" :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">%RH</span>
       </el-form-item>
       <el-form-item label="消毒停止相对湿度">
-        <el-input-number v-model.number="formData.stoped_humi" name="stoped_humi" v-prevent-keyboard :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.stoped_humi" v-prevent-keyboard name="stoped_humi" :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">%RH</span>
       </el-form-item>
       <el-form-item label="消毒继续过氧化氢相对饱和度">
-        <el-input-number v-model.number="formData.continued_satur" name="continued_satur" v-prevent-keyboard :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.continued_satur" v-prevent-keyboard name="continued_satur" :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">%RS</span>
       </el-form-item>
       <el-form-item label="消毒停止过氧化氢相对饱和度">
-        <el-input-number v-model.number="formData.stoped_satur" name="stoped_satur" v-prevent-keyboard :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
+        <el-input-number v-model.number="formData.stoped_satur" v-prevent-keyboard name="stoped_satur" :min="0" :max="100" @focus="openKeyboard" :controls="false" class="formdata-input" placeholder="请输入" />
         <span class="el-form-item__suffix">%RS</span>
       </el-form-item>
       <el-form-item label="Log等级">
         <!-- <el-input v-model.number="formData.loglevel" class="formdata-input" placeholder="请输入" /> -->
         <el-select v-model="formData.loglevel" class="formdata-input">
-          <el-option v-for="item in logLevelList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+          <el-option v-for="item in logLevelList" :key="item.value" :label="item.name" :value="item.value" />
         </el-select>
       </el-form-item>
       <div class="formula-form-btn">
         <slot name="formulaBtn">
           <div class="default-btn">
-            <el-button type="primary" @click="handleSubmit">确定</el-button>
-            <el-button @click="handleCancel">取消</el-button>
+            <el-button type="primary" @click="handleSubmit">
+              确定
+            </el-button>
+            <el-button @click="handleCancel">
+              取消
+            </el-button>
           </div>
         </slot>
       </div>

src/router/index.ts

@@ -9,7 +9,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
-  if (!getToken()) {
+  if (getToken()) {
     next()
   }
   else {

src/stores/formulaStore.ts

@@ -20,7 +20,7 @@ const defaultFormulaInfo = {
   stoped_gs: 300, // 消毒停止过氧化氢浓度
   stoped_humi: 85, // 消毒停止相对湿度
   stoped_satur: 85, // 消毒停止过氧化氢相对饱和度
-  name: '配方', // 配方名称
+  name: '', // 配方名称
   formula_id: '01', // 配方ID
 }
 

src/stores/homeStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-const h2O2SensorData: Home.DisplayrelyMgrParams[] = [{
+const h2O2Data: Home.DisplayrelyMgrParams[] = [{
   type: 'inside',
   title: '仓内',
   temp: '20',
@@ -23,46 +24,56 @@ const h2O2SensorData: Home.DisplayrelyMgrParams[] = [{
   h2o2: '20',
 }]
 
-const liquidData: Home.LiquidData = {
+const liquidItem: Home.LiquidData = {
   nowLiquid: 0,
   workState: 'idle',
   workStateDisplay: '空闲',
 }
 
-export const useHomeStore = defineStore('home', {
-  state: () => ({
-    h2O2SensorData,
-    liquidData,
-  }),
-  actions: {
-    updateHomeData(data: Home.DisplayrelyMgr[]) {
-      if (data && data.length) {
-        data.forEach((item, index) => {
-          this.h2O2SensorData[index] = {
-            ...this.h2O2SensorData[index],
-            ...item,
-          }
-        })
-      }
-    },
+export const useHomeStore = defineStore('home', () => {
+  const h2O2SensorData = ref(h2O2Data)
+  const liquidData = ref(liquidItem)
+
+  const updateHomeData = (data: Home.DisplayrelyMgr[]) => {
+    if (data && data.length) {
+      data.forEach((item, index) => {
+        h2O2SensorData.value[index] = {
+          ...h2O2SensorData.value[index],
+          ...item,
+        }
+      })
+    }
+  }
 
-    updateHomeLiquid(liquidData: Home.LiquidData) {
-      this.liquidData = liquidData
-    },
+  const updateHomeLiquid = (liquidInfo: Home.LiquidData) => {
+    liquidData.value = liquidInfo
+  }
 
-    startDisinfect() {
-      // 是否进行设备的初始化  return false
-      // 是否选择了配方 return false
-      // 未选择配方时，是否配置了默认值 return false
-      // 检查消毒液余量是否满足此次消毒 return false
-      // 检查压力是否正常 return false
-      // 是否选择了消毒级别 return false
-      /* 调用开始消毒指令
-      *className: "DisinfectionCtrlService",
-      *fnName: "start",
-      **/
-      return true
-    },
-  },
-  persist: false,
+  const startDisinfect = () => {
+    // 是否进行设备的初始化  return false
+    // 是否选择了配方 return false
+    // 未选择配方时，是否配置了默认值 return false
+    // 检查消毒液余量是否满足此次消毒 return false
+    // 检查压力是否正常 return false
+    // 是否选择了消毒级别 return false
+    /* 调用开始消毒指令
+    *className: "DisinfectionCtrlService",
+    *fnName: "start",
+    **/
+    return true
+  }
+
+  const deviceStete = ref()
+  const setDeviceState = (deviceInfo: Device.State) => {
+    deviceStete.value = deviceInfo
+  }
+  return {
+    h2O2SensorData,
+    liquidData,
+    deviceStete,
+    updateHomeData,
+    updateHomeLiquid,
+    startDisinfect,
+    setDeviceState,
+  }
 })

src/types/device.d.ts

@@ -0,0 +1,7 @@
+declare namespace Device {
+  interface State {
+    appEvents: Array
+    loginUser: User.LoginUsr
+    state: string
+  }
+}

src/types/user.d.ts

@@ -24,4 +24,10 @@ declare namespace User {
     name: string
     pwd: string
   }
+
+  interface LoginUsr {
+    isLogin: boolean
+    name: string
+    roleType: string
+  }
 }

src/views/home/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { sendCmd } from '@/apis/system'
 import { useFormulaStore } from '@/stores/formulaStore'
 import homeChart from 'assets/images/home/home-chart.svg'
 import homeFinish from 'assets/images/home/home-finish.svg'
@@ -16,12 +15,12 @@ import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
 const route = useRoute()
-const formulaStore = useFormulaStore()
 const homeStore = useHomeStore()
-const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.$state.h2O2SensorData[0])
-const probe1Params = ref<Home.DisplayrelyMgrParams>(homeStore.$state.h2O2SensorData[1])
-const probe2Params = ref<Home.DisplayrelyMgrParams>(homeStore.$state.h2O2SensorData[2])
-const liquidInfo = ref<Home.LiquidData>(homeStore.$state.liquidData)
+const formulaStore = useFormulaStore()
+const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0])
+const probe1Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[1])
+const probe2Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[2])
+const liquidInfo = ref<Home.LiquidData>(homeStore.liquidData)
 const deviceState = ref(1)
 const isModalOpen = ref(false)
 const formulaInfo = ref()
@@ -38,13 +37,10 @@ const options = ref([{
 const selectedValue = ref()
 
 onMounted(() => {
-  formulaInfo.value = formulaStore.currentSelectedFormulaInfo
-  setInterval(() => {
-    initData()
-  }, 1000)
+  formulaInfo.value = formulaStore.currentSelectedFormulaInfo || formulaStore.initFormulaInfo
 })
 
-watch(() => homeStore.$state.h2O2SensorData, (newVal) => {
+watch(() => homeStore.h2O2SensorData, (newVal) => {
   if (newVal && newVal.length) {
     environmentParams.value = newVal[0]
   }
@@ -54,29 +50,6 @@ watch(() => formulaStore.currentSelectedFormulaInfo, (newVal) => {
   formulaInfo.value = newVal
 })
 
-const initData = async () => {
-  const envParams = {
-    fnName: 'readH2O2SensorData',
-    className: 'FrontEndRealtimeDisplayContentMgr',
-    params: {},
-  }
-  const resData = await sendCmd(envParams)
-  if (resData.rely && resData.rely.val.length) {
-    homeStore.updateHomeData(resData.rely.val)
-  }
-
-  const liquidParams = {
-    fnName: 'getState',
-    className: 'AddLiquidService',
-    params: {},
-  }
-  const liquidData = await sendCmd(liquidParams)
-  if (liquidData.rely) {
-    homeStore.updateHomeLiquid(liquidData.rely)
-    liquidInfo.value = liquidData.rely
-  }
-}
-
 // 开始消毒
 const onStartDisinfect = () => {
   const isStart = homeStore.startDisinfect()
@@ -118,7 +91,7 @@ const onShowChart = () => {
 
 <template>
   <div class="home">
-    <div  v-if="route.path === '/home'" class="home-grid-container">
+    <div v-if="route.path === '/home'" class="home-grid-container">
       <div class="home-grid-item merged-cell">
         <div class="home-left">
           <div class="item1">
@@ -131,7 +104,9 @@ const onShowChart = () => {
                 <el-progress :text-inside="true" :stroke-width="26" :percentage="liquidInfo.nowLiquid" />
               </div>
             </div>
-            <div class="item1-num-g">{{ liquidInfo.nowLiquid }}（g）</div>
+            <div class="item1-num-g">
+              {{ liquidInfo.nowLiquid }}（g）
+            </div>
           </div>
           <div class="item2">
             <div class="title" />
@@ -157,9 +132,9 @@ const onShowChart = () => {
               <div>{{ formulaInfo.name }}</div>
             </div>
           </div>
-          <div class="title-spend">
+          <div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">
             <span>速率</span>
-            <span style="color: #31CB7A">50</span>g/分钟
+            <span style="color: #31CB7A">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
           </div>
         </div>
         <div class="home-right-level">
@@ -197,25 +172,35 @@ const onShowChart = () => {
           </div>
         </div>
         <div class="home-remain-time">
-          <div class="home-remaini-label">预计剩余时间:   </div>
-          <div class="home-remaini-value">10:00:20</div>
+          <div class="home-remaini-label">
+            预计剩余时间:
+          </div>
+          <div class="home-remaini-value">
+            10:00:20
+          </div>
         </div>
         <div class="home-start-opt">
           <div class="home-opt-flex">
             <FtButton size="large" @click="onShowChart">
               <div class="home-chart">
                 <div><img :src="homeChart" style="width: 20px"></div>
-                <div class="home-chart-text">图表数据</div>
+                <div class="home-chart-text">
+                  图表数据
+                </div>
               </div>
             </FtButton>
             <FtButton @click="onDisinfectConfig">
               <div v-if="deviceState === 1" class="home-chart">
                 <div><img :src="homeSetting" style="width: 20px"></div>
-                <div class="home-chart-text">消毒设置</div>
+                <div class="home-chart-text">
+                  消毒设置
+                </div>
               </div>
               <div v-else class="home-chart">
                 <div><img :src="homeRunSvg" style="width: 20px"></div>
-                <div class="home-chart-text">运行参数</div>
+                <div class="home-chart-text">
+                  运行参数
+                </div>
               </div>
             </FtButton>
           </div>

src/views/login/index.vue

@@ -66,7 +66,7 @@ const loginHandle = async () => {
           密码
         </div>
         <el-form-item>
-          <el-input v-model="sys.loginForm.pwd" v-prevent-keyboard size="large" placeholder="请输入密码" type="password">
+          <el-input v-model="sys.loginForm.pwd"  size="large" placeholder="请输入密码" type="password">
             <template #prepend>
               <img class="input-icon" :src="password" alt="">
             </template>
@@ -74,7 +74,7 @@ const loginHandle = async () => {
         </el-form-item>
         <el-form-item>
           <ft-button type="primary" style="width: 100%; margin: 20px 0 0;" :click-handle="loginHandle">
-            <div style="height:7vh; display: flex;">
+            <div class="login-btn">
               登录
             </div>
           </ft-button>
@@ -118,4 +118,9 @@ const loginHandle = async () => {
   color: #2C3E59;
   margin-bottom: 10px;
 }
+.login-btn{
+  height: 2.5vh;
+  display: flex;
+  align-items: center;
+}
 </style>