pms 保养 配置弹出框 样式

src/views/pms/device/DevicePerson.vue

@@ -128,26 +128,6 @@
           </el-table-column>
           <el-table-column label="所在部门" align="center" prop="deptName" />
           <el-table-column label="责任人" align="center" prop="responsibleNames" />
-          <el-table-column
-            label="创建时间"
-            align="center"
-            prop="createTime"
-            :formatter="dateFormatter"
-            width="180px"
-          />
-          <!-- <el-table-column label="操作" align="center" min-width="120px">
-             <template #default="scope">
-
-              <el-button
-                link
-                type="primary"
-                @click="openForm('update', scope.row.id)"
-                v-hasPermi="['rq:iot-device:update']"
-              >
-                编辑
-              </el-button>
-            </template>
-          </el-table-column> -->
         </el-table>
         <!-- 分页 -->
         <Pagination

src/views/pms/iotmainworkorder/IotMainWorkOrder.vue

@@ -243,166 +243,208 @@
     :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
     width="600px"
   >
+    <!-- 使用header插槽自定义标题 -->
+    <template #header>
+      <span>设备 <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong> 保养项配置</span>
+    </template>
     <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
-      <!-- 里程配置 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="上次保养里程数(KM)"
-        prop="lastRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟公里数 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="推迟公里数(KM)"
-        prop="delayKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 运行时间配置 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="上次保养运行时间(H)"
-        prop="lastRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟时长 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="推迟时长(H)"
-        prop="delayDuration"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayDuration"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 自然日期配置 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="上次保养自然日期(D)"
-        prop="lastNaturalDate"
-      >
-        <el-date-picker
-          v-model="configDialog.form.lastNaturalDate"
-          type="date"
-          placeholder="选择日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟自然日期 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="推迟自然日期(D)"
-        prop="delayNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayNaturalDate"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 保养规则周期值 + 提前量 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期(KM)"
-        prop="nextRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期-提前量(KM)"
-        prop="kiloCycleLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.kiloCycleLead"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期(H)"
-        prop="nextRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期-提前量(H)"
-        prop="timePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.timePeriodLead"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期(D)"
-        prop="nextNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextNaturalDate"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期-提前量(D)"
-        prop="naturalDatePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.naturalDatePeriodLead"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
+      <div class="form-group">
+        <div class="group-title">基础保养记录</div>
+        <!-- 里程配置 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="上次保养里程数(KM)"
+          prop="lastRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟公里数 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="推迟公里数(KM)"
+          prop="delayKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <!-- 运行时间配置 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="上次保养运行时间(H)"
+          prop="lastRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟时长 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="推迟时长(H)"
+          prop="delayDuration"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayDuration"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <!-- 自然日期配置 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="上次保养自然日期"
+          prop="lastNaturalDate"
+        >
+          <el-date-picker
+            v-model="configDialog.form.lastNaturalDate"
+            type="date"
+            placeholder="选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟自然日期 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="推迟自然日期(D)"
+          prop="delayNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayNaturalDate"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.mileageRule === 0">
+        <div class="group-title">运行里程规则配置</div>
+        <!-- 保养规则周期值 + 提前量 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期(KM)"
+          prop="nextRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期-提前量(KM)"
+          prop="kiloCycleLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.kiloCycleLead"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.runningTimeRule === 0">
+        <div class="group-title">运行时间规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期(H)"
+          prop="nextRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期-提前量(H)"
+          prop="timePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.timePeriodLead"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.naturalDateRule === 0">
+        <div class="group-title">自然日规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期(D)"
+          prop="nextNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextNaturalDate"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期-提前量(D)"
+          prop="naturalDatePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.naturalDatePeriodLead"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
       <el-button @click="configDialog.visible = false">取消</el-button>
@@ -900,4 +942,31 @@ onMounted(async () => {
   overflow: hidden; /* 隐藏溢出的内容 */
   transition: max-height 0.3s ease; /* 平滑过渡效果 */
 }
+
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+  padding-left: 10px; /* 保持左侧间距 */
+}
+
+/* 分组容器样式 */
+.form-group {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px 15px 10px;
+  margin-bottom: 18px;
+  transition: border-color 0.2s;
+}
+
+/* 分组标题样式 */
+.group-title {
+  position: absolute;
+  top: -10px;
+  left: 20px;
+  background: white;
+  padding: 0 8px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

src/views/pms/iotmainworkorder/IotMainWorkOrderAdd.vue

@@ -248,6 +248,10 @@
     :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
     width="600px"
   >
+    <!-- 使用header插槽自定义标题 -->
+    <template #header>
+      <span>设备 <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong> 保养项配置</span>
+    </template>
     <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
       <!-- 里程配置 -->
       <el-form-item
@@ -969,4 +973,31 @@ const handleDelete = async (str: string) => {
   overflow: hidden; /* 隐藏溢出的内容 */
   transition: max-height 0.3s ease; /* 平滑过渡效果 */
 }
+
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+  padding-left: 10px; /* 保持左侧间距 */
+}
+
+/* 分组容器样式 */
+.form-group {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px 15px 10px;
+  margin-bottom: 18px;
+  transition: border-color 0.2s;
+}
+
+/* 分组标题样式 */
+.group-title {
+  position: absolute;
+  top: -10px;
+  left: 20px;
+  background: white;
+  padding: 0 8px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

src/views/pms/iotmainworkorder/IotMainWorkOrderDetail.vue

@@ -247,168 +247,211 @@
     :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
     width="600px"
   >
+    <!-- 使用header插槽自定义标题 -->
+    <template #header>
+      <span>设备 <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong> 保养项配置</span>
+    </template>
     <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
-      <!-- 里程配置 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="上次保养里程数(KM)"
-        prop="lastRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟公里数 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="推迟公里数(KM)"
-        prop="delayKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 运行时间配置 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="上次保养运行时间(H)"
-        prop="lastRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟时长 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="推迟时长(H)"
-        prop="delayDuration"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayDuration"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 自然日期配置 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="上次保养自然日期(D)"
-        prop="lastNaturalDate"
-      >
-        <el-date-picker
-          v-model="configDialog.form.lastNaturalDate"
-          type="date"
-          placeholder="选择日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 推迟自然日期 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="推迟自然日期(D)"
-        prop="delayNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.delayNaturalDate"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <!-- 保养规则周期值 + 提前量 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期(KM)"
-        prop="nextRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期-提前量(KM)"
-        prop="kiloCycleLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.kiloCycleLead"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期(H)"
-        prop="nextRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期-提前量(H)"
-        prop="timePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.timePeriodLead"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期(D)"
-        prop="nextNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextNaturalDate"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期-提前量(D)"
-        prop="naturalDatePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.naturalDatePeriodLead"
-          :min="0"
-          controls-position="right"
-          :disabled="true"
-        />
-      </el-form-item>
+      <div class="form-group">
+        <div class="group-title">基础保养记录</div>
+        <!-- 里程配置 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="上次保养里程数(KM)"
+          prop="lastRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟公里数 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="推迟公里数(KM)"
+          prop="delayKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 运行时间配置 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="上次保养运行时间(H)"
+          prop="lastRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟时长 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="推迟时长(H)"
+          prop="delayDuration"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayDuration"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 自然日期配置 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="上次保养自然日期"
+          prop="lastNaturalDate"
+        >
+          <el-date-picker
+            v-model="configDialog.form.lastNaturalDate"
+            type="date"
+            placeholder="选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <!-- 推迟自然日期 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="推迟自然日期(D)"
+          prop="delayNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.delayNaturalDate"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.mileageRule === 0">
+        <div class="group-title">运行里程规则配置</div>
+        <!-- 保养规则周期值 + 提前量 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期(KM)"
+          prop="nextRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期-提前量(KM)"
+          prop="kiloCycleLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.kiloCycleLead"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.runningTimeRule === 0">
+        <div class="group-title">运行时间规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期(H)"
+          prop="nextRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期-提前量(H)"
+          prop="timePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.timePeriodLead"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.naturalDateRule === 0">
+        <div class="group-title">自然日规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期(D)"
+          prop="nextNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextNaturalDate"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期-提前量(D)"
+          prop="naturalDatePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.naturalDatePeriodLead"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
       <el-button @click="configDialog.visible = false">取消</el-button>
@@ -874,4 +917,31 @@ onMounted(async () => {
   overflow: hidden; /* 隐藏溢出的内容 */
   transition: max-height 0.3s ease; /* 平滑过渡效果 */
 }
+
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+  padding-left: 10px; /* 保持左侧间距 */
+}
+
+/* 分组容器样式 */
+.form-group {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px 15px 10px;
+  margin-bottom: 18px;
+  transition: border-color 0.2s;
+}
+
+/* 分组标题样式 */
+.group-title {
+  position: absolute;
+  top: -10px;
+  left: 20px;
+  background: white;
+  padding: 0 8px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

src/views/pms/maintenance/IotMaintenancePlan.vue

@@ -10,35 +10,22 @@
     >
       <div class="base-expandable-content">
         <el-row>
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="计划名称" prop="name">
               <el-input type="text" v-model="formData.name" />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="计划编号" prop="serialNumber">
               <el-input type="text" v-model="formData.serialNumber" disabled/>
             </el-form-item>
           </el-col>
+          <!--
           <el-col :span="8">
             <el-form-item label="设备责任人" prop="devicePersons">
               <el-input type="text" v-model="formData.devicePersons"  disabled/>
             </el-form-item>
-          </el-col>
-          <!--
-          <el-col :span="8" >
-            <el-form-item label="责任人" prop="responsiblePerson" >
-              <el-select v-model="formData.responsiblePerson" filterable clearable style="width: 100%">
-                <el-option
-                  v-for="item in deptUsers"
-                  :key="item.id"
-                  :label="item.nickname"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          -->
+          </el-col> -->
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
               <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
@@ -174,118 +161,154 @@
     :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
     width="600px"
   >
+    <!-- 使用header插槽自定义标题 -->
+    <template #header>
+      <span>设备 <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong> 保养项配置</span>
+    </template>
     <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
-      <!-- 里程配置 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="上次保养里程数(KM)"
-        prop="lastRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 运行时间配置 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="上次保养运行时间(H)"
-        prop="lastRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <!-- 自然日期配置 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="上次保养自然日期(D)"
-        prop="lastNaturalDate"
-      >
-        <el-date-picker
-          v-model="configDialog.form.lastNaturalDate"
-          type="date"
-          placeholder="选择日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <!-- 保养规则周期值 + 提前量 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期(KM)"
-        prop="nextRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期-提前量(KM)"
-        prop="kiloCycleLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.kiloCycleLead"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期(H)"
-        prop="nextRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期-提前量(H)"
-        prop="timePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.timePeriodLead"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期(D)"
-        prop="nextNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextNaturalDate"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期-提前量(D)"
-        prop="naturalDatePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.naturalDatePeriodLead"
-          :min="0"
-          controls-position="right"
-        />
-      </el-form-item>
+      <div class="form-group">
+        <div class="group-title">基础保养记录</div>
+        <!-- 里程配置 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="上次保养里程数(KM)"
+          prop="lastRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <!-- 运行时间配置 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="上次保养运行时间(H)"
+          prop="lastRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <!-- 自然日期配置 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="上次保养自然日期"
+          prop="lastNaturalDate"
+        >
+          <el-date-picker
+            v-model="configDialog.form.lastNaturalDate"
+            type="date"
+            placeholder="选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 60%"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.mileageRule === 0">
+        <div class="group-title">运行里程规则配置</div>
+        <!-- 保养规则周期值 + 提前量 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期(KM)"
+          prop="nextRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningKilometers"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期-提前量(KM)"
+          prop="kiloCycleLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.kiloCycleLead"
+            :precision="2"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.runningTimeRule === 0">
+        <div class="group-title">运行时间规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期(H)"
+          prop="nextRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningTime"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期-提前量(H)"
+          prop="timePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.timePeriodLead"
+            :precision="1"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.naturalDateRule === 0">
+        <div class="group-title">自然日规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期(D)"
+          prop="nextNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextNaturalDate"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期-提前量(D)"
+          prop="naturalDatePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.naturalDatePeriodLead"
+            :min="0"
+            controls-position="right"
+            :controls="false"
+            style="width: 60%"
+          />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
       <el-button @click="configDialog.visible = false">取消</el-button>
@@ -835,4 +858,31 @@ const handleDelete = async (str: string) => {
   overflow: hidden; /* 隐藏溢出的内容 */
   transition: max-height 0.3s ease; /* 平滑过渡效果 */
 }
+
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+  padding-left: 10px; /* 保持左侧间距 */
+}
+
+/* 分组容器样式 */
+.form-group {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px 15px 10px;
+  margin-bottom: 18px;
+  transition: border-color 0.2s;
+}
+
+/* 分组标题样式 */
+.group-title {
+  position: absolute;
+  top: -10px;
+  left: 20px;
+  background: white;
+  padding: 0 8px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

src/views/pms/maintenance/IotMaintenancePlanDetail.vue

@@ -10,16 +10,17 @@
     >
       <div class="base-expandable-content">
         <el-row>
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="计划名称" prop="name">
               <el-input type="text" v-model="formData.name" disabled/>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="计划编号" prop="serialNumber">
               <el-input type="text" v-model="formData.serialNumber" disabled/>
             </el-form-item>
           </el-col>
+          <!--
           <el-col :span="8">
             <el-form-item label="责任人" prop="responsiblePerson">
               <el-select v-model="formData.responsiblePerson" filterable clearable style="width: 100%" disabled>
@@ -31,7 +32,7 @@
                 />
               </el-select>
             </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
               <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" disabled/>
@@ -42,23 +43,6 @@
     </el-form>
   </ContentWrap>
   <ContentWrap>
-    <!--
-    <ContentWrap>
-       搜索工作栏
-      <el-form
-        class="-mb-15px"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <el-form-item>
-          <el-button @click="openForm" type="warning">
-            <Icon icon="ep:plus" class="mr-5px" /> 新增设备</el-button>
-        </el-form-item>
-      </el-form>
-    </ContentWrap> -->
-
     <!-- 列表 -->
     <ContentWrap>
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
@@ -168,130 +152,164 @@
   <!-- 新增配置对话框 -->
   <el-dialog
     v-model="configDialog.visible"
-    :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
+    :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养项配置`"
     width="600px"
   >
+    <!-- 使用header插槽自定义标题 -->
+    <template #header>
+      <span>设备 <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong> 保养项配置</span>
+    </template>
     <el-form :model="configDialog.form" label-width="200px" :rules="configFormRules" ref="configFormRef">
-      <!-- 里程配置 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="上次保养里程数(KM)"
-        prop="lastRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <!-- 运行时间配置 -->
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="上次保养运行时间(H)"
-        prop="lastRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.lastRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <!-- 自然日期配置 -->
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="上次保养自然日期(D)"
-        prop="lastNaturalDate"
-      >
-        <el-date-picker
-          v-model="configDialog.form.lastNaturalDate"
-          type="date"
-          placeholder="选择日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          disabled
-        />
-      </el-form-item>
-      <!-- 保养规则周期值 + 提前量 -->
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期(KM)"
-        prop="nextRunningKilometers"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningKilometers"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.mileageRule === 0"
-        label="运行里程周期-提前量(KM)"
-        prop="kiloCycleLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.kiloCycleLead"
-          :precision="2"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期(H)"
-        prop="nextRunningTime"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextRunningTime"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.runningTimeRule === 0"
-        label="运行时间周期-提前量(H)"
-        prop="timePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.timePeriodLead"
-          :precision="1"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期(D)"
-        prop="nextNaturalDate"
-      >
-        <el-input-number
-          v-model="configDialog.form.nextNaturalDate"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="configDialog.current?.naturalDateRule === 0"
-        label="自然日周期-提前量(D)"
-        prop="naturalDatePeriodLead"
-      >
-        <el-input-number
-          v-model="configDialog.form.naturalDatePeriodLead"
-          :min="0"
-          controls-position="right"
-          disabled
-        />
-      </el-form-item>
+      <div class="form-group">
+        <div class="group-title">基础保养记录</div>
+        <!-- 里程配置 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="上次保养里程数(KM)"
+          prop="lastRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningKilometers"
+            :precision="2"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+        <!-- 运行时间配置 -->
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="上次保养运行时间(H)"
+          prop="lastRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.lastRunningTime"
+            :precision="1"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+        <!-- 自然日期配置 -->
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="上次保养自然日期"
+          prop="lastNaturalDate"
+        >
+          <el-date-picker
+            v-model="configDialog.form.lastNaturalDate"
+            type="date"
+            placeholder="选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.mileageRule === 0">
+        <div class="group-title">运行里程规则配置</div>
+        <!-- 保养规则周期值 + 提前量 -->
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期(KM)"
+          prop="nextRunningKilometers"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningKilometers"
+            :precision="2"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.mileageRule === 0"
+          label="运行里程周期-提前量(KM)"
+          prop="kiloCycleLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.kiloCycleLead"
+            :precision="2"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.runningTimeRule === 0">
+        <div class="group-title">运行时间规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期(H)"
+          prop="nextRunningTime"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextRunningTime"
+            :precision="1"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.runningTimeRule === 0"
+          label="运行时间周期-提前量(H)"
+          prop="timePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.timePeriodLead"
+            :precision="1"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+      </div>
+
+      <div class="form-group" v-if="configDialog.current?.naturalDateRule === 0">
+        <div class="group-title">自然日规则配置</div>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期(D)"
+          prop="nextNaturalDate"
+        >
+          <el-input-number
+            v-model="configDialog.form.nextNaturalDate"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="configDialog.current?.naturalDateRule === 0"
+          label="自然日周期-提前量(D)"
+          prop="naturalDatePeriodLead"
+        >
+          <el-input-number
+            v-model="configDialog.form.naturalDatePeriodLead"
+            :min="0"
+            :controls="false"
+            controls-position="right"
+            style="width: 60%"
+            disabled
+          />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
       <el-button @click="configDialog.visible = false">取消</el-button>
@@ -742,4 +760,31 @@ const handleDelete = async (str: string) => {
   overflow: hidden; /* 隐藏溢出的内容 */
   transition: max-height 0.3s ease; /* 平滑过渡效果 */
 }
+
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+  padding-left: 10px; /* 保持左侧间距 */
+}
+
+/* 分组容器样式 */
+.form-group {
+  position: relative;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px 15px 10px;
+  margin-bottom: 18px;
+  transition: border-color 0.2s;
+}
+
+/* 分组标题样式 */
+.group-title {
+  position: absolute;
+  top: -10px;
+  left: 20px;
+  background: white;
+  padding: 0 8px;
+  color: #606266;
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>