fix: form表单优化

src/components/formula/FormulaConfig.vue

@@ -210,7 +210,10 @@ const validateName = (rule: any, value: any, callback: any) => {
         label-position="right"
         :size="size"
         inline
+        style="overflow: hidden"
       >
+        <el-row :gutter="20">
+          <el-col :span="24">
             <el-form-item
               label="配方名称"
               style="width: 100%"
@@ -225,11 +228,15 @@ const validateName = (rule: any, value: any, callback: any) => {
             >
               <ft-input v-model="formData.name" name="name" placeholder="配方名称" />
             </el-form-item>
-        <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: 50%"
+              style="width: 100%"
               :prop="item.setting_id"
               :rules="[
                 {
@@ -269,6 +276,8 @@ const validateName = (rule: any, value: any, callback: any) => {
                 </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">

src/components/formula/HomeFormulaConfig.vue

@@ -45,16 +45,18 @@ 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%">
+      <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-form-item
+        </el-col>
+        <el-col
           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"
+          :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]"
@@ -95,6 +97,8 @@ const size = 'default'
               </el-radio-group>
             </template>
           </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>

src/components/formula/RunFormulaConfig.vue

@@ -61,12 +61,24 @@ 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
+    <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: 50%"
+            style="width: 100%"
             :prop="item.setting_id"
             :rules="[
               {
@@ -125,6 +137,8 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
               </el-radio-group>
             </template>
           </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>

src/components/formula/SettingFormulaConfig.vue

@@ -90,12 +90,17 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
       label-position="right"
       :size="size"
       inline
+      style="overflow: hidden"
     >
-      <el-form-item
+      <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: 50%"
+            style="width: 100%"
             :prop="item.setting_id"
             :rules="[
               {
@@ -145,6 +150,8 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
               </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">

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>

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"

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>

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,18 +263,20 @@ 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;
     justify-content: center;
     align-items: center;
-      gap: 1rem;
+    gap: 5px;
+    height: 50px;
+    img {
+      height: 50%;
+    }
     .title-text {
       font-size: 20px;
     }
@@ -285,7 +288,6 @@ function handleConfirm(value: string) {
       font-weight: bold;
     }
   }
-  }
   .seal-right-btn {
     //height: 30vh;
     grid-row: 2 / 4;