运行参数修改

src/components/formula/HomeFormulaConfig.vue

@@ -49,7 +49,7 @@ const size = 'default'
   <div class="formula-form">
     <el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline>
       <el-form-item label="配方名称" style="width: 93%">
-        <ft-input v-model="formData.name" name="name" placeholder="配方名称" />
+        <ft-input v-model="formData.name" name="name" placeholder="默认" />
       </el-form-item>
       <el-form-item
         v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
@@ -133,6 +133,9 @@ const size = 'default'
   margin-right: 0;
   align-items: center;
 }
+:deep(.el-select__wrapper) {
+  height: 42px;
+}
 :deep(.el-input-group__append) {
   font-size: 12px;
   padding: 0 1vw;

src/components/formula/RunFormulaConfig.vue

@@ -2,19 +2,19 @@
 import { formulaNameMap } from 'libs/constant'
 import { inject, onMounted, ref, watchEffect } from 'vue'
 
-import { convertValuesToInt, convertValuesToString } from '@/libs/utils'
+import { convertValuesToString } from '@/libs/utils'
 import { useFormulaStore } from '@/stores/formulaStore'
 
 const formulaStore = useFormulaStore()
 const runtimeFormRef = ref()
-const saveFormData = () => {
-  runtimeFormRef.value.validate((valid: any) => {
+const saveFormData = async () => {
+  const valid = await runtimeFormRef.value.validate
   if (valid) {
     return convertValuesToString(formData.value, 'name')
   }
   return null
-  })
 }
+defineExpose({ saveFormData })
 /**
  * 注册孙子组件方法的注入函数
  */
@@ -34,8 +34,9 @@ const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
 /**
  * 监听事件
  */
-watchEffect(() => {
-  formData.value = convertValuesToInt(formulaStore.getRealtimeConfig())
+watchEffect(async () => {
+  formData.value = (await formulaStore.getRealtimeConfig()).rely
+  console.log(formData.value)
 })
 /**
  * 配方配置列表
@@ -153,6 +154,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   text-align: left;
   height: 40px;
 }
+:deep(.el-select__wrapper) {
+  height: 42px;
+}
 :deep(.el-form-item) {
   margin-right: 0;
   align-items: center;

src/components/home/HomeFormula.vue

@@ -14,11 +14,11 @@ watchEffect(() => {
 <template>
   <div class="home-right-title">
     <div>
-      <div v-if="formulaInfo && formulaInfo.name" class="title-formula">
+      <div class="title-formula">
         <el-icon style="color: #31cb7a; font-size: 1.5rem">
           <SuccessFilled />
         </el-icon>
-        <div>{{ formulaInfo.name }}</div>
+        <div>{{ formulaInfo.name || '默认' }}</div>
       </div>
     </div>
     <div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">

src/components/home/HomeSetting.vue

@@ -111,14 +111,13 @@ const onShowChart = () => {
  * @desc 处理表单数据保存逻辑，区分消毒中与非消毒状态
  */
 const onSave = async () => {
-  const formData = runtimeRef.value?.getFormData()
+  const formData = await runtimeRef.value?.saveFormData()
   if (!formData) {
     return
   }
-  formulaStore.updateSelectedFormula(cloneDeep(formData)) // 更新选中配方
-  // 消毒中时更新实时配置
-  const res = formulaStore.getRealtimeConfig()
-  const diff = compareJSON(res, formData)
+  // 消毒中更新实时配置
+  const res = await formulaStore.getRealtimeConfig()
+  const diff = compareJSON(res.rely, formData)
   const diffKeys = Object.keys(diff)
   if (diffKeys.length) {
     await Promise.all(
@@ -128,7 +127,6 @@ const onSave = async () => {
     )
     FtMessage.success('修改成功')
   }
-  onCloseRuntime() // 关闭对话框
 }
 /**
  * @function 确认压力选择

src/stores/formulaStore.ts

@@ -100,7 +100,7 @@ export const useFormulaStore = defineStore('formula', () => {
         updateLogLevels(item)
       }
     })
-    formulaMap.name = '默认配置'
+    formulaMap.name = ''
     return formulaMap as Formula.FormulaItem
   }
 

src/views/home/chart.vue

@@ -2,12 +2,12 @@
 import { syncSendCmd } from 'apis/system'
 import homeFinish from 'assets/images/home/home-finish.svg'
 import homeSettingSvg from 'assets/images/home/home-setting.svg'
-import Config from 'components/home/config.vue'
+import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
 import HomeFormula from 'components/home/HomeFormula.vue'
 import LineChart from 'components/home/LineChart.vue'
 import { stopTimer } from 'libs/countdownTimer'
-import { deviceStateMap } from 'libs/utils'
-import { cloneDeep } from 'lodash'
+import { FtMessage } from 'libs/message'
+import { compareJSON, deviceStateMap } from 'libs/utils'
 import { computed, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -56,11 +56,24 @@ const onFinishDisinfect = async () => {
     }
   })
 }
-
-const onSave = () => {
-  const formData = configRef.value?.getFormData()
-  formulaStore.updateSelectedFormula(cloneDeep(formData))
-  onClose()
+const chartRef = ref()
+const onSave = async () => {
+  const formData = await chartRef.value?.saveFormData()
+  if (!formData) {
+    return
+  }
+  // 消毒中更新实时配置
+  const res = await formulaStore.getRealtimeConfig()
+  const diff = compareJSON(res.rely, formData)
+  const diffKeys = Object.keys(diff)
+  if (diffKeys.length) {
+    await Promise.all(
+      diffKeys.map(async (key) => {
+        await formulaStore.setRealtimeConfig(key, diff[key].newVal)
+      }),
+    )
+    FtMessage.success('修改成功')
+  }
 }
 
 const goHome = () => {
@@ -127,22 +140,6 @@ onUnmounted(() => {
       <div v-if="formulaInfo && formulaInfo.name" class="line-chart-formula">
         <HomeFormula style="background: #e0f0ff" />
       </div>
-      <div class="line-chart-set">
-        <bt-button
-          v-if="!isDeviceIdle"
-          button-text="运行参数"
-          text-size="24px"
-          border-radius="5px"
-          height="3.5rem"
-          text-color="#1989fa"
-          padding="0.8vw"
-          @click="onDisinfectConfig"
-        >
-          <template #icon>
-            <img :src="homeSettingSvg" width="15" alt="">
-          </template>
-        </bt-button>
-      </div>
     </div>
     <div
       v-loading="chartLoading"
@@ -175,9 +172,9 @@ onUnmounted(() => {
           bg-color="#FF6767"
           text-color="#FFFFFF"
           width="15vw"
-          height="7vh"
+          height="3.5rem"
           text-size="24px"
-          border-radius="12px"
+          border-radius="5px"
           @click="onFinishDisinfect"
         >
           <template #icon>
@@ -185,20 +182,32 @@ onUnmounted(() => {
           </template>
         </bt-button>
         <bt-button
+          v-if="!isDeviceIdle"
+          button-text="运行参数"
+          text-size="24px"
+          border-radius="5px"
+          height="3.5rem"
+          text-color="#1989fa"
+          padding="0.8vw"
+          @click="onDisinfectConfig"
+        >
+          <template #icon>
+            <img :src="homeSettingSvg" width="15" alt="">
+          </template>
+        </bt-button>
+        <bt-button
           button-text="返回"
           width="10vw"
           height="7vh"
           text-color="#1989fa"
           text-size="24px"
-          border-radius="12px"
+          border-radius="5px"
           @click="goHome"
         />
       </div>
     </div>
     <ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw" :ok-handle="onSave" @cancel="onClose">
-      <div>
-        <Config ref="configRef" />
-      </div>
+      <RunFormulaConfig ref="chartRef" />
     </ft-dialog>
   </main>
 </template>