From 48a90956e8a25b4e747c67f22280f353ebdd6a54 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 7 Jul 2025 22:46:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20form=E8=A1=A8=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formula/FormulaConfig.vue        | 121 +++++++++++----------
 src/components/formula/HomeFormulaConfig.vue    | 100 +++++++++---------
 src/components/formula/RunFormulaConfig.vue     | 134 +++++++++++++-----------
 src/components/formula/SettingFormulaConfig.vue | 107 ++++++++++---------
 src/components/home/HomeSetting.vue             |  39 ++-----
 src/components/home/config.vue                  |  12 ++-
 src/views/home/chart.vue                        |  25 ++---
 src/views/seal/index.vue                        |  44 ++++----
 8 files changed, 293 insertions(+), 289 deletions(-)

diff --git a/src/components/formula/FormulaConfig.vue b/src/components/formula/FormulaConfig.vue
index f685f48..b0ddf46 100644
--- a/src/components/formula/FormulaConfig.vue
+++ b/src/components/formula/FormulaConfig.vue
@@ -210,65 +210,74 @@ const validateName = (rule: any, value: any, callback: any) => {
         label-position="right"
         :size="size"
         inline
+        style="overflow: hidden"
       >
-        <el-form-item
-          label="配方名称"
-          style="width: 100%"
-          prop="name"
-          :rules="[
-            {
-              required: true,
-              validator: (rule, value, callback) => validateName(rule, value, callback),
-              trigger: 'blur',
-            },
-          ]"
-        >
-          <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_formula_page)"
-          :key="item.setting_id"
-          :label="item.name_ch"
-          style="width: 50%"
-          :prop="item.setting_id"
-          :rules="[
-            {
-              required: true,
-              validator: (rule, value, callback) => validatePass(rule, value, callback, item),
-              trigger: 'blur',
-            },
-          ]"
-        >
-          <template v-if="item.val_type === 'int'">
-            <ft-input v-model="formData[item.setting_id]" style="width: 100%" layout-name="number">
-              <template v-if="labelUnitMap[item.setting_id]" #append>
-                {{ labelUnitMap[item.setting_id] }}
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item
+              label="配方名称"
+              style="width: 100%"
+              prop="name"
+              :rules="[
+                {
+                  required: true,
+                  validator: (rule, value, callback) => validateName(rule, value, callback),
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <ft-input v-model="formData.name" name="name" placeholder="配方名称" />
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-for="item in formulaConfigList.filter(data => data.is_visible_in_formula_page)"
+            :key="item.setting_id"
+            :span="12"
+          >
+            <el-form-item
+              :label="item.name_ch"
+              style="width: 100%"
+              :prop="item.setting_id"
+              :rules="[
+                {
+                  required: true,
+                  validator: (rule, value, callback) => validatePass(rule, value, callback, item),
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <template v-if="item.val_type === 'int'">
+                <ft-input v-model="formData[item.setting_id]" style="width: 100%" layout-name="number">
+                  <template v-if="labelUnitMap[item.setting_id]" #append>
+                    {{ labelUnitMap[item.setting_id] }}
+                  </template>
+                </ft-input>
               </template>
-            </ft-input>
-          </template>
-          <template v-if="item.val_type === 'float'">
-            <ft-input v-model="formData[item.setting_id]" layout-name="number" style="width: 100%">
-              <template v-if="labelUnitMap[item.setting_id]" #append>
-                {{ labelUnitMap[item.setting_id] }}
+              <template v-if="item.val_type === 'float'">
+                <ft-input v-model="formData[item.setting_id]" layout-name="number" style="width: 100%">
+                  <template v-if="labelUnitMap[item.setting_id]" #append>
+                    {{ labelUnitMap[item.setting_id] }}
+                  </template>
+                </ft-input>
               </template>
-            </ft-input>
-          </template>
-          <template v-else-if="item.val_type === 'enum'">
-            <el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
-              <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
-            </el-select>
-          </template>
-          <template v-else-if="item.val_type === 'boolean'">
-            <el-radio-group v-model="formData[item.setting_id]">
-              <el-radio :label="true">
-                是
-              </el-radio>
-              <el-radio :label="false">
-                否
-              </el-radio>
-            </el-radio-group>
-          </template>
-        </el-form-item>
+              <template v-else-if="item.val_type === 'enum'">
+                <el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
+                  <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
+                </el-select>
+              </template>
+              <template v-else-if="item.val_type === 'boolean'">
+                <el-radio-group v-model="formData[item.setting_id]">
+                  <el-radio :label="true">
+                    是
+                  </el-radio>
+                  <el-radio :label="false">
+                    否
+                  </el-radio>
+                </el-radio-group>
+              </template>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div class="default-btn">
         <el-button type="primary" class="config-btn" @click="handleSubmit">
diff --git a/src/components/formula/HomeFormulaConfig.vue b/src/components/formula/HomeFormulaConfig.vue
index 480919d..fb8ccd9 100644
--- a/src/components/formula/HomeFormulaConfig.vue
+++ b/src/components/formula/HomeFormulaConfig.vue
@@ -45,56 +45,60 @@ const size = 'default'
 <template>
   <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="默认" />
-      </el-form-item>
-      <el-form-item
-        v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
-        :key="item.setting_id"
-        :label="item.name_ch"
-        style="width: 50%"
-        :prop="item.setting_id"
-      >
-        <template v-if="item.val_type === 'int'">
-          <ft-input
-            v-model.number="formData[item.setting_id]"
-            style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-          >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+      <el-row class="form-row" :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="配方名称" style="width: 100%">
+            <ft-input v-model="formData.name" name="name" placeholder="默认" />
+          </el-form-item>
+        </el-col>
+        <el-col
+          v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
+          :key="item.setting_id"
+          :span="12"
+        >
+          <el-form-item :label="item.name_ch" :prop="item.setting_id">
+            <template v-if="item.val_type === 'int'">
+              <ft-input
+                v-model.number="formData[item.setting_id]"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-if="item.val_type === 'float'">
-          <ft-input
-            v-model.number="formData[item.setting_id]"
-            style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-          >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+            <template v-if="item.val_type === 'float'">
+              <ft-input
+                v-model.number="formData[item.setting_id]"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-else-if="item.val_type === 'enum'">
-          <el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
-            <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
-          </el-select>
-        </template>
-        <template v-else-if="item.val_type === 'boolean'">
-          <el-radio-group v-model="formData[item.setting_id]">
-            <el-radio :label="true">
-              是
-            </el-radio>
-            <el-radio :label="false">
-              否
-            </el-radio>
-          </el-radio-group>
-        </template>
-      </el-form-item>
+            <template v-else-if="item.val_type === 'enum'">
+              <el-select v-model="formData[item.setting_id]" style="width: 100%" placeholder="请选择" readonly>
+                <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
+              </el-select>
+            </template>
+            <template v-else-if="item.val_type === 'boolean'">
+              <el-radio-group v-model="formData[item.setting_id]">
+                <el-radio :label="true">
+                  是
+                </el-radio>
+                <el-radio :label="false">
+                  否
+                </el-radio>
+              </el-radio-group>
+            </template>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
diff --git a/src/components/formula/RunFormulaConfig.vue b/src/components/formula/RunFormulaConfig.vue
index aa931fe..1b5395b 100644
--- a/src/components/formula/RunFormulaConfig.vue
+++ b/src/components/formula/RunFormulaConfig.vue
@@ -61,70 +61,84 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 
 <template>
   <div class="formula-form">
-    <el-form ref="runtimeFormRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
-      <el-form-item
-        v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
-        :key="item.setting_id"
-        :label="item.name_ch"
-        style="width: 50%"
-        :prop="item.setting_id"
-        :rules="[
-          {
-            required: true,
-            validator: (rule, value, callback) => validatePass(rule, value, callback, item),
-            trigger: 'blur',
-          },
-        ]"
-      >
-        <template v-if="item.val_type === 'int'">
-          <ft-input
-            v-model="formData[item.setting_id]"
+    <el-form
+      ref="runtimeFormRef"
+      :model="formData"
+      label-width="auto"
+      label-position="right"
+      :size="size"
+      inline
+      style="overflow: hidden"
+    >
+      <el-row :gutter="20">
+        <el-col
+          v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
+          :key="item.setting_id"
+          :span="12"
+        >
+          <el-form-item
+            :label="item.name_ch"
             style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-            :disabled="!item.is_editable"
+            :prop="item.setting_id"
+            :rules="[
+              {
+                required: true,
+                validator: (rule, value, callback) => validatePass(rule, value, callback, item),
+                trigger: 'blur',
+              },
+            ]"
           >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+            <template v-if="item.val_type === 'int'">
+              <ft-input
+                v-model="formData[item.setting_id]"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+                :disabled="!item.is_editable"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-if="item.val_type === 'float'">
-          <ft-input
-            v-model.number="formData[item.setting_id]"
-            style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-            :disabled="!item.is_editable"
-          >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+            <template v-if="item.val_type === 'float'">
+              <ft-input
+                v-model.number="formData[item.setting_id]"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+                :disabled="!item.is_editable"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-else-if="item.val_type === 'enum'">
-          <el-select
-            v-model="formData[item.setting_id]"
-            v-prevent-keyboard
-            style="width: 100%"
-            placeholder="请选择"
-            :disabled="!item.is_editable"
-            readonly
-          >
-            <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
-          </el-select>
-        </template>
-        <template v-else-if="item.val_type === 'boolean'">
-          <el-radio-group v-model="formData[item.setting_id]" :disabled="!item.is_editable">
-            <el-radio :label="true">
-              是
-            </el-radio>
-            <el-radio :label="false">
-              否
-            </el-radio>
-          </el-radio-group>
-        </template>
-      </el-form-item>
+            <template v-else-if="item.val_type === 'enum'">
+              <el-select
+                v-model="formData[item.setting_id]"
+                v-prevent-keyboard
+                style="width: 100%"
+                placeholder="请选择"
+                :disabled="!item.is_editable"
+                readonly
+              >
+                <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
+              </el-select>
+            </template>
+            <template v-else-if="item.val_type === 'boolean'">
+              <el-radio-group v-model="formData[item.setting_id]" :disabled="!item.is_editable">
+                <el-radio :label="true">
+                  是
+                </el-radio>
+                <el-radio :label="false">
+                  否
+                </el-radio>
+              </el-radio-group>
+            </template>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
diff --git a/src/components/formula/SettingFormulaConfig.vue b/src/components/formula/SettingFormulaConfig.vue
index 42890c0..14ef234 100644
--- a/src/components/formula/SettingFormulaConfig.vue
+++ b/src/components/formula/SettingFormulaConfig.vue
@@ -90,61 +90,68 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
       label-position="right"
       :size="size"
       inline
+      style="overflow: hidden"
     >
-      <el-form-item
-        v-for="item in formulaConfigList.filter(data => data.is_visible_in_setting_page)"
-        :key="item.setting_id"
-        :label="item.name_ch"
-        style="width: 50%"
-        :prop="item.setting_id"
-        :rules="[
-          {
-            required: true,
-            validator: (rule, value, callback) => validatePass(rule, value, callback, item),
-            trigger: 'blur',
-          },
-        ]"
-      >
-        <template v-if="item.val_type === 'int'">
-          <ft-input
-            v-model="formData[item.setting_id]"
-            layout-name="number"
+      <el-row :gutter="20">
+        <el-col
+          v-for="item in formulaConfigList.filter(data => data.is_visible_in_setting_page)"
+          :key="item.setting_id"
+          :span="12"
+        >
+          <el-form-item
+            :label="item.name_ch"
             style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-            :disabled="!props.editable"
+            :prop="item.setting_id"
+            :rules="[
+              {
+                required: true,
+                validator: (rule, value, callback) => validatePass(rule, value, callback, item),
+                trigger: 'blur',
+              },
+            ]"
           >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+            <template v-if="item.val_type === 'int'">
+              <ft-input
+                v-model="formData[item.setting_id]"
+                layout-name="number"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+                :disabled="!props.editable"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-if="item.val_type === 'float'">
-          <ft-input
-            v-model="formData[item.setting_id]"
-            layout-name="number"
-            style="width: 100%"
-            :name="item.setting_id"
-            :controls="false"
-            :disabled="!props.editable"
-          >
-            <template v-if="labelUnitMap[item.setting_id]" #append>
-              {{ labelUnitMap[item.setting_id] }}
+            <template v-if="item.val_type === 'float'">
+              <ft-input
+                v-model="formData[item.setting_id]"
+                layout-name="number"
+                style="width: 100%"
+                :name="item.setting_id"
+                :controls="false"
+                :disabled="!props.editable"
+              >
+                <template v-if="labelUnitMap[item.setting_id]" #append>
+                  {{ labelUnitMap[item.setting_id] }}
+                </template>
+              </ft-input>
             </template>
-          </ft-input>
-        </template>
-        <template v-else-if="item.val_type === 'enum'">
-          <el-select
-            v-model="formData[item.setting_id]"
-            v-prevent-keyboard
-            style="width: 100%"
-            placeholder="请选择"
-            readonly
-          >
-            <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
-          </el-select>
-        </template>
-      </el-form-item>
+            <template v-else-if="item.val_type === 'enum'">
+              <el-select
+                v-model="formData[item.setting_id]"
+                v-prevent-keyboard
+                style="width: 100%"
+                placeholder="请选择"
+                readonly
+              >
+                <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
+              </el-select>
+            </template>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <div class="default-btn">
       <el-button v-if="editable" type="primary" @click="handleSubmit">
diff --git a/src/components/home/HomeSetting.vue b/src/components/home/HomeSetting.vue
index 648cdb8..9355be0 100644
--- a/src/components/home/HomeSetting.vue
+++ b/src/components/home/HomeSetting.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { syncSendCmd } from 'apis/system'
-import BtButton from 'components/common/BTButton/index.vue'
 import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue'
 import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
 import Config from 'components/home/config.vue'
@@ -191,15 +190,9 @@ const onCloseRuntime = () => {
     </div>
     <template #footer>
       <div class="config-btn">
-        <BtButton
-          button-text="关闭"
-          border-radius="5px"
-          width="7rem"
-          text-size="1.5rem"
-          text-color="#1989fa"
-          height="3rem"
-          @click="onCloseConfig"
-        />
+        <el-button @click="onCloseConfig">
+          关闭
+        </el-button>
       </div>
     </template>
   </ft-dialog>
@@ -212,26 +205,12 @@ const onCloseRuntime = () => {
     </div>
     <template #footer>
       <div class="config-btn">
-        <BtButton
-          button-text="关闭"
-          border-radius="5px"
-          width="7rem"
-          text-size="1.5rem"
-          text-color="#1989fa"
-          height="3rem"
-          @click="onCloseRuntime"
-        />
-        <BtButton
-          v-if="!deviceState"
-          bg-color="#1989fa"
-          button-text="确认"
-          border-radius="5px"
-          width="7rem"
-          text-size="1.5rem"
-          text-color="#ffffff"
-          height="3rem"
-          @click="onSave"
-        />
+        <el-button @click="onCloseRuntime">
+          关闭
+        </el-button>
+        <el-button v-if="!deviceState" type="primary" @click="onSave">
+          确认
+        </el-button>
       </div>
     </template>
   </ft-dialog>
diff --git a/src/components/home/config.vue b/src/components/home/config.vue
index b47e71a..adb6bb2 100644
--- a/src/components/home/config.vue
+++ b/src/components/home/config.vue
@@ -102,23 +102,25 @@ const onDefaultFormula = () => {
 <template>
   <div class="main-content">
     <div>
-      <bt-button type="primary" button-text="选择配方" width="12vw" height="5vh" @click="onChooseFormula">
+      <el-button type="primary" @click="onChooseFormula">
         <template #icon>
           <el-icon>
             <Plus />
           </el-icon>
         </template>
-      </bt-button>
-      <bt-button button-text="默认配置" height="5vh" width="12vw" @click="onDefaultFormula">
+        选择配方
+      </el-button>
+      <el-button @click="onDefaultFormula">
         <template #icon>
           <el-icon>
             <Operation />
           </el-icon>
         </template>
-      </bt-button>
+        默认配置
+      </el-button>
     </div>
     <div class="formula-config">
-      <HomeFormulaConfig/>
+      <HomeFormulaConfig />
     </div>
     <SelectModal
       v-if="isModalOpen"
diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue
index 1ba2249..1970751 100644
--- a/src/views/home/chart.vue
+++ b/src/views/home/chart.vue
@@ -222,25 +222,12 @@ const formatSeconds = (seconds: number) => {
       </div>
       <template #footer>
         <div class="config-btn">
-          <BtButton
-            button-text="关闭"
-            border-radius="5px"
-            width="7rem"
-            text-size="1.5rem"
-            text-color="#1989fa"
-            height="3rem"
-            @click="onClose"
-          />
-          <BtButton
-            bg-color="#1989fa"
-            button-text="确认"
-            border-radius="5px"
-            width="7rem"
-            text-size="1.5rem"
-            text-color="#ffffff"
-            height="3rem"
-            @click="onSave"
-          />
+          <el-button @click="onClose">
+            关闭
+          </el-button>
+          <el-button type="primary" @click="onSave">
+            确认
+          </el-button>
         </div>
       </template>
     </ft-dialog>
diff --git a/src/views/seal/index.vue b/src/views/seal/index.vue
index 8de5ca3..398870e 100644
--- a/src/views/seal/index.vue
+++ b/src/views/seal/index.vue
@@ -165,6 +165,7 @@ function handleConfirm(value: string) {
           </template>
         </bt-button>
         <bt-button
+          style="margin: 0"
           :button-text="stopText"
           bg-color="#FF6767"
           text-color="#FFFFFF"
@@ -262,28 +263,29 @@ function handleConfirm(value: string) {
 
 .seal-right {
   background: $gradient-color;
-  display: grid;
-  grid-template-rows: repeat(3, 1fr);
-  gap: 20px;
-  .left-title {
-    //padding-top: 3.5vw;
-    padding-left: 2.5vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  .title-text-test {
     display: flex;
-    .title-text-test {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1rem;
-      .title-text {
-        font-size: 20px;
-      }
-      .title-text-kpa {
-        color: #409eff;
-      }
-      .title-kpa-pl {
-        padding-left: 5px;
-        font-weight: bold;
-      }
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    height: 50px;
+    img {
+      height: 50%;
+    }
+    .title-text {
+      font-size: 20px;
+    }
+    .title-text-kpa {
+      color: #409eff;
+    }
+    .title-kpa-pl {
+      padding-left: 5px;
+      font-weight: bold;
     }
   }
   .seal-right-btn {