feat:

优化逻辑和样式

src/page/main/forewarning/indicator-config/modules/add-form.vue

@@ -24,14 +24,32 @@
         </el-form-item>
         <div class="duration">
           <el-form-item label="持续时间" prop="time">
+            <el-input v-model="state.form.time" placeholder="请输入持续时间" @input="inputNum">
+              <template #prepend>
                 <span>当预警持续</span>
-            <el-input v-model="state.form.time" placeholder="请输入持续时间" @input="inputNum"></el-input>
-          </el-form-item>
-          <el-form-item label="" class="no-el-label">
+              </template>
+              <template #append>
                 <el-select v-model="state.form.unit" placeholder="请选择">
-              <el-option v-for="(value, key) in unitOptions" :key="key" :label="value.label" :value="key"> </el-option>
+                  <el-option v-for="(value, key) in unitOptions" :key="key" :label="value.label" :value="key">
+                  </el-option>
                 </el-select>
-            <span>时产生报警</span>
+              </template>
+            </el-input>
+            <span class="duration-append">
+              <span> 时产生报警 </span>
+              <el-popover
+                :width="300"
+                title=""
+                content="大于等于0的正整数，等于0时代表直接报警"
+                trigger="hover"
+                placement="top-start">
+                <template #reference>
+                  <bg-icon
+                    style="font-size: 12px; color: #a9b1c7; margin-left: 8px; vertical-align: middle"
+                    icon="#bg-ic-s-circle-tips"></bg-icon>
+                </template>
+              </el-popover>
+            </span>
           </el-form-item>
         </div>
         <el-form-item label="检查周期" prop="inspection_cycle">
@@ -108,6 +126,8 @@ const inputNum = () => {
   let { max } = unitOptions[state.form.unit];
   if (time > +max) {
     state.form.time = max;
+    ElMessage.closeAll();
+    ElMessage.error(`最大值：${max}`);
   }
 };
 // 检查周期下拉数据
@@ -169,27 +189,44 @@ defineExpose({
         margin-top: 0;
       }
     }
+
     .duration {
+      flex: 1;
       display: flex;
       align-items: center;
-      gap: 8px;
-      :deep(.el-form-item__content) {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        > .el-input {
+      :deep(.el-form-item) {
+        flex: 1;
+        .el-input {
+          margin-right: 8px;
           flex: 1;
-          width: 80px;
         }
+        .el-input-group__prepend {
+          width: 102px;
+          border-radius: 4px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
         }
-      .no-el-label {
-        :deep(.el-form-item__content) {
-          margin-left: 0 !important;
-          .el-select {
+        .el-input-group__append {
           width: 80px;
+          border-radius: 4px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
         }
       }
+      //   :deep(.el-form-item__content) {
+      //     display: flex;
+      //     align-items: center;
+      //     gap: 8px;
+      //     > .el-input {
+      //       flex: 1;
+      //       width: 80px;
+      //     }
+      //   }
     }
+    .duration-append {
+      display: flex;
+      align-items: center;
+      color: #404a62;
     }
     :deep(.el-switch__inner) {
       .is-hide {