From 5f529f2f065ddba0b96816b8aa0aae8f4175ceac Mon Sep 17 00:00:00 2001
From: Asoka <iiloli@88.com>
Date: Tue, 10 Jun 2025 10:30:13 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B3=B5=E9=80=9F=E7=AD=96=E7=95=A5ui?=
 =?UTF-8?q?=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/feeding-config-form.vue        | 164 ++++++++++++++----
 src/views/admin/feedingconfig/index.vue       |   6 +-
 2 files changed, 138 insertions(+), 32 deletions(-)

diff --git a/src/views/admin/feedingconfig/components/feeding-config-form.vue b/src/views/admin/feedingconfig/components/feeding-config-form.vue
index 31703b2..cd41234 100644
--- a/src/views/admin/feedingconfig/components/feeding-config-form.vue
+++ b/src/views/admin/feedingconfig/components/feeding-config-form.vue
@@ -29,52 +29,72 @@
               <el-input v-model="formData.configName" clearable placeholder="请输入策略名称" />
             </el-form-item>
             <el-form-item label="总理论时长" prop="totalTheoryTime" required>
-              <el-input-number v-model="formData.totalTheoryTime" :min="0" style="width:100%" />
-              <template #append>min</template>
+              <div style="display: flex; align-items: center; width: 100%;">
+                <el-input-number v-model="formData.totalTheoryTime" disabled style="flex: 1;" />
+                <span style="margin-left: 8px; white-space: nowrap;">分钟</span>
+              </div>
             </el-form-item>
             <div class="sub-group">
               <div class="sub-title">校准</div>
               <el-form-item label="校准阶段时长" prop="calibrateDuration" required>
-                <el-input-number v-model="formData.calibrateDuration" :min="0" style="width:100%" />
-                <template #append>s</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.calibrateDuration" :min="0" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">秒</span>
+                </div>
               </el-form-item>
               <el-form-item label="校准阶段补料占总量百分比" prop="calibrateVolumePercent" required>
-                <el-input-number v-model="formData.calibrateVolumePercent" :min="0" :max="100" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.calibrateVolumePercent" :min="0" :max="100" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
               <el-form-item label="校准理论速度" prop="calibrateTheorySpeed" required>
-                <el-input-number v-model="formData.calibrateTheorySpeed" :min="0" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.calibrateTheorySpeed" :min="0" style="flex: 1;" disabled />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
             </div>
             <div class="sub-group">
               <div class="sub-title">高速</div>
               <el-form-item label="高速阶段泵速百分比" prop="highSpeedPercent" required>
-                <el-input-number v-model="formData.highSpeedPercent" :min="0" :max="100" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.highSpeedPercent" :min="0" :max="100" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
               <el-form-item label="高速阶段补料占总量百分比" prop="highSpeedVolumePercent" required>
-                <el-input-number v-model="formData.highSpeedVolumePercent" :min="0" :max="100" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.highSpeedVolumePercent" :min="0" :max="100" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
               <el-form-item label="高速理论时长" prop="highSpeedTheoryTime" required>
-                <el-input-number v-model="formData.highSpeedTheoryTime" :min="0" style="width:100%" />
-                <template #append>min</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.highSpeedTheoryTime" :min="0" style="flex: 1;" disabled />
+                  <span style="margin-left: 8px; white-space: nowrap;">分钟</span>
+                </div>
               </el-form-item>
             </div>
             <div class="sub-group">
               <div class="sub-title">低速</div>
               <el-form-item label="低速阶段泵速百分比" prop="lowSpeedPercent" required>
-                <el-input-number v-model="formData.lowSpeedPercent" :min="0" :max="100" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.lowSpeedPercent" :min="0" :max="100" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
               <el-form-item label="低速阶段补料占总量百分比" prop="lowSpeedVolumePercent" required>
-                <el-input-number v-model="formData.lowSpeedVolumePercent" :min="0" :max="100" style="width:100%" />
-                <template #append>%</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.lowSpeedVolumePercent" :min="0" :max="100" style="flex: 1;" />
+                  <span style="margin-left: 8px; white-space: nowrap;">%</span>
+                </div>
               </el-form-item>
               <el-form-item label="低速理论时长" prop="lowSpeedTheoryTime" required>
-                <el-input-number v-model="formData.lowSpeedTheoryTime" :min="0" style="width:100%" />
-                <template #append>min</template>
+                <div style="display: flex; align-items: center; width: 100%;">
+                  <el-input-number v-model="formData.lowSpeedTheoryTime" :min="0" style="flex: 1;" disabled />
+                  <span style="margin-left: 8px; white-space: nowrap;">分钟</span>
+                </div>
               </el-form-item>
             </div>
           </el-card>
@@ -84,20 +104,28 @@
           <el-card shadow="hover" class="group-card">
             <div class="section-title">监控</div>
             <el-form-item label="环控间隔时间" prop="intervalTime" required>
-              <el-input-number v-model="formData.intervalTime" :min="0" style="width:100%" />
-              <template #append>s</template>
+              <div style="display: flex; align-items: center; width: 100%;">
+                <el-input-number v-model="formData.intervalTime" :min="0" style="flex: 1;" />
+                <span style="margin-left: 8px; white-space: nowrap;">秒</span>
+              </div>
             </el-form-item>
             <el-form-item label="补料超量百分比" prop="excessPercentage" required>
-              <el-input-number v-model="formData.excessPercentage" :min="0" style="width:100%" />
-              <template #append>%</template>
+              <div style="display: flex; align-items: center; width: 100%;">
+                <el-input-number v-model="formData.excessPercentage" :min="0" style="flex: 1;" />
+                <span style="margin-left: 8px; white-space: nowrap;">%</span>
+              </div>
             </el-form-item>
             <el-form-item label="超时时间" prop="timeOutSeconds" required>
-              <el-input-number v-model="formData.timeOutSeconds" :min="0" style="width:100%" />
-              <template #append>s</template>
+              <div style="display: flex; align-items: center; width: 100%;">
+                <el-input-number v-model="formData.timeOutSeconds" :min="0" style="flex: 1;" />
+                <span style="margin-left: 8px; white-space: nowrap;">秒</span>
+              </div>
             </el-form-item>
             <el-form-item label="终点百分比" prop="terminalVolumePercent" required>
-              <el-input-number v-model="formData.terminalVolumePercent" :min="0" :max="100" style="width:100%" />
-              <template #append>%</template>
+              <div style="display: flex; align-items: center; width: 100%;">
+                <el-input-number v-model="formData.terminalVolumePercent" :min="0" :max="100" style="flex: 1;" />
+                <span style="margin-left: 8px; white-space: nowrap;">%</span>
+              </div>
             </el-form-item>
             <div class="sub-group">
               <div class="sub-title">抖动</div>
@@ -236,6 +264,49 @@ watch(
   }
 )
 
+watch(
+  () => [formData.calibrateVolumePercent, formData.calibrateDuration],
+  ([volume, duration]) => {
+    if (duration > 0) {
+      formData.calibrateTheorySpeed = Number((volume / duration * 60).toFixed(2))
+    } else {
+      formData.calibrateTheorySpeed = 0
+    }
+  }
+)
+
+// 新增：高速理论时长自动计算
+watch(
+  () => [formData.highSpeedVolumePercent, formData.highSpeedPercent],
+  ([volume, percent]) => {
+    if (percent > 0) {
+      formData.highSpeedTheoryTime = Number((volume / percent).toFixed(2))
+    } else {
+      formData.highSpeedTheoryTime = 0
+    }
+  }
+)
+
+// 新增：低速理论时长自动计算
+watch(
+  () => [formData.lowSpeedVolumePercent, formData.lowSpeedPercent],
+  ([volume, percent]) => {
+    if (percent > 0) {
+      formData.lowSpeedTheoryTime = Number((volume / percent).toFixed(2))
+    } else {
+      formData.lowSpeedTheoryTime = 0
+    }
+  }
+)
+
+// 新增：总理论时长自动计算
+watch(
+  () => [formData.calibrateDuration, formData.highSpeedTheoryTime, formData.lowSpeedTheoryTime],
+  ([calibrateDuration, highSpeedTheoryTime, lowSpeedTheoryTime]) => {
+    formData.totalTheoryTime = Number(((calibrateDuration / 60) + highSpeedTheoryTime + lowSpeedTheoryTime).toFixed(2))
+  }
+)
+
 function resetForm() {
   formRef.value?.resetFields()
   Object.assign(formData, {
@@ -295,6 +366,14 @@ async function open(row?: any) {
 
 async function handleSubmit() {
   if (!formRef.value) return
+
+  // 新增：补料占总量百分比之和校验
+  const sum = Number(formData.calibrateVolumePercent) + Number(formData.highSpeedVolumePercent) + Number(formData.lowSpeedVolumePercent)
+  if (sum !== 100) {
+    ElMessage.warning('补料占总量百分比之和必须等于100！')
+    return
+  }
+
   await formRef.value.validate(async (valid: boolean) => {
     if (!valid) return
     loading.value = true
@@ -335,7 +414,7 @@ defineExpose({ open })
 
 <style scoped>
 .group-card {
-  margin-bottom: 24px;
+  margin-bottom: 15px;
   border-radius: 10px;
   box-shadow: 0 2px 12px #f0f1f2;
   background: #fff;
@@ -369,4 +448,31 @@ defineExpose({ open })
     margin-bottom: 16px;
   }
 }
+.ant-card::before, .ant-card::after,
+.el-card::before, .el-card::after {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 针对所有 input、select、textarea */
+form input,
+form select,
+form textarea {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* 针对常见UI库的表单项容器 */
+.ant-input, .el-input__inner, .n-input__input {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* 针对分组容器 */
+.ant-card, .el-card, .card, .fieldset, .form-group {
+  border: none !important;
+  box-shadow: none !important;
+}
 </style>
diff --git a/src/views/admin/feedingconfig/index.vue b/src/views/admin/feedingconfig/index.vue
index e9e32fb..1aaae75 100644
--- a/src/views/admin/feedingconfig/index.vue
+++ b/src/views/admin/feedingconfig/index.vue
@@ -53,7 +53,7 @@
             <el-tag type="info" v-else>三段式</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="feedTime" label="补料时长(s)" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="feedTime" label="补料时长" min-width="100" show-overflow-tooltip />
         <el-table-column prop="calibrateDuration" label="校准阶段时长/s" min-width="120" show-overflow-tooltip />
         <el-table-column prop="calibrateVolumePercent" label="校准阶段补料占总量百分比/%" min-width="180" show-overflow-tooltip />
         <el-table-column prop="highSpeedPercent" label="高速阶段泵速比例/%" min-width="140" show-overflow-tooltip />
@@ -101,7 +101,7 @@
       </div>
     </el-card>
 
-    <feeding-config-form ref="formRef" @success="handleSuccess" :model-value="false" title="补料配置" />
+    <feeding-config-form ref="formRef" @success="handleSuccess" :model-value="false" title="泵速策略" />
   </MyLayout>
 </template>
 
@@ -198,7 +198,7 @@ const handleEdit = (row: FeedingConfigGetPageOutput) => {
 }
 
 const handleDelete = (row: FeedingConfigGetPageOutput) => {
-  ElMessageBox.confirm('确认要删除该策略吗？', '提示', {
+  ElMessageBox.confirm('确认要删除该泵速策略吗？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'