feat(*): 除尘器总览问题修复

src/components/commonTable/index.vue

@@ -4,6 +4,7 @@
       ref="tableRef"
       :data="currentPageData"
       v-bind="$attrs"
+      :resizable="false"
       border
       :height="tableHeight"
     >
@@ -221,6 +222,8 @@ watch(
   width: 100% !important;
 }
 
+.el-table__header th { user-select: none; }
+
 .el-table {
   // 设置表头样式
   th.el-table__cell {

src/views/dustMonitoring/bag-monitoring.vue

@@ -92,7 +92,7 @@
         </thead>
         <tbody>
           <tr>
-            <td>峰值_R</td>
+            <td>峰值{{currentData.row}}排_R</td>
             <td v-for="(value, index) in tableData" :key="'r' + index">
               {{ value.peakValueR || "-" }}
             </td>

src/views/dustMonitoring/index.vue

@@ -120,7 +120,7 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import * as echarts from "echarts";
 import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
@@ -128,6 +128,7 @@ import moment from "moment";
 import warnCom from "./components/warn.vue";
 import healthyCom from "./components/healthyProgress.vue";
 import { getLineOption2, getGaugeOption } from "@/utils/chart";
+
 const userStore = useUsersStore();
 const form = reactive({
   dusterNo: "",
@@ -136,23 +137,8 @@ const form = reactive({
     new Date(),
   ],
 });
-const option = {
-  xAxis: {
-    type: "category",
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-  },
-  yAxis: {
-    type: "value",
-  },
-  series: [
-    {
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: "line",
-      smooth: true,
-    },
-  ],
-};
 const router = useRouter();
+const route = useRoute();
 const chartInstance = reactive({});
 const chartData = reactive([{}, {}, {}]);
 const initChart = (instance, option, domEl) => {
@@ -278,7 +264,7 @@ const getDusterNameEnum = () => {
     .then((res) => {
       dusterList.value = (res && res.data) || [];
       // 判断除尘器名称是否有值
-      form.dusterNo = dusterList.value[0].dusterNo;
+      form.dusterNo = route.query.dusterNo || dusterList.value[0].dusterNo;
     })
     .catch(() => {
       dusterList.value = [];

src/views/dustOverview/components/addDustCollectorDialog.vue

 <template>
-  <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="460px" :close-on-click-modal="false"
-    :close-on-press-escape="false" @update:model-value="$emit('update:modelValue', $event)">
+  <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false"
+    :close-on-press-escape="false" @update:model-value="cancel">
     <div class="add-dust-form">
       <div class="form-item">
         <div class="selector-wrap">
@@ -14,7 +14,7 @@
       </div>
 
       <div class="form-content">
-        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
+        <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules">
           <el-form-item label="除尘器名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入" />
           </el-form-item>
@@ -38,7 +38,7 @@
             <el-input v-model.number="formData.valveCount" placeholder="请输入" />
           </el-form-item>
 
-          <el-form-item label="合理压差范围">
+          <el-form-item label="合理压差范围" required>
             <div class="range-input">
               <el-form-item prop="pressureMin" class="coordinate-item">
                 <el-input v-model.number="formData.pressureMin" placeholder="请输入" />
@@ -119,26 +119,12 @@ const formData = reactive({
   coordinateY: null
 });
 
-// 监听editData变化，初始化表单数据
-watch(() => props.editData, (newVal) => {
-  if (newVal) {
-    formData.name = newVal.deviceName;
-    formData.code = newVal.deviceNo;
-    formData.process = newVal.productionLineId;
-    formData.chamberCount = Number(newVal.compartNum);
-    formData.valveCount = Number(newVal.valveNum);
-    formData.pressureMin = Number(newVal.pressureDiffLow);
-    formData.pressureMax = Number(newVal.pressureDiffHigh);
-    formData.serverIp = newVal.serviceIp;
-    formData.coordinateX = Number(newVal.x);
-    formData.coordinateY = Number(newVal.y);
-  }
-}, { immediate: true });
+
 
 const rules = {
   name: [{ required: true, message: '请输入除尘器名称', trigger: 'blur' }],
   code: [{ required: true, message: '请输入除尘器编号', trigger: 'blur' }],
-  process: [{ required: true, message: '请选择所属工序', trigger: 'change' }],
+  process: [{ required: true, message: '请选择所属工序', trigger: 'blur' }],
   chamberCount: [
     { required: true, message: '请输入仓室数量', trigger: 'blur' },
     { type: 'number', min: 1, message: '仓室数量必须大于0', trigger: 'blur' }
@@ -149,7 +135,7 @@ const rules = {
   ],
   pressureMin: [
     { required: true, message: '请输入最小压差', trigger: 'blur' },
-    { type: 'number', min: 1, message: '最小压差必须大于0', trigger: 'blur' },
+    { type: 'number', min: 0, message: '最小压差不能小于0', trigger: 'blur' },
     {
       validator: (rule, value, callback) => {
         if (value && formData.pressureMax && value >= formData.pressureMax) {
@@ -163,7 +149,7 @@ const rules = {
   ],
   pressureMax: [
     { required: true, message: '请输入最大压差', trigger: 'blur' },
-    { type: 'number', min: 0, message: '最大压差必须大于0', trigger: 'blur' },
+    { type: 'number', min: 0, message: '最大压差不能小于0', trigger: 'blur' },
     {
       validator: (rule, value, callback) => {
         if (value && formData.pressureMin && value <= formData.pressureMin) {
@@ -236,7 +222,6 @@ const productionLine = () => {
 onMounted(() => {
   productionLine();
   initDustOptions();
-
 });
 
 const selectDustType = () => {
@@ -270,7 +255,6 @@ const submitForm = () => {
       if (props.editData) {
         submitData.id = props.editData.id;
       }
-
       // 发送数据到父组件处理保存逻辑
       emit('save', submitData);
       // emit('update:modelValue', false);
@@ -279,10 +263,8 @@ const submitForm = () => {
     }
   });
 };
-
-const cancel = () => {
+const resetForm = () => {
   // 重置表单状态和数据
-  formRef.value.resetFields();
   formData.dustType = '';
   formData.name = '';
   formData.code = '';
@@ -294,9 +276,38 @@ const cancel = () => {
   formData.serverIp = '';
   formData.coordinateX = null;
   formData.coordinateY = null;
-  emit('update:modelValue', false);
+}
+
+const cancel = () => {
+  resetForm();
+  formRef.value.resetFields();
+  emit('cancel', {});
 };
 
+// 监听editData变化，初始化表单数据
+watch(() => props.editData, (newVal) => {
+  if (newVal) {
+    formData.name = newVal.deviceName;
+    formData.code = newVal.deviceNo;
+    formData.process = newVal.productionLineId;
+    formData.chamberCount = Number(newVal.compartNum);
+    formData.valveCount = Number(newVal.valveNum);
+    formData.pressureMin = Number(newVal.pressureDiffLow);
+    formData.pressureMax = Number(newVal.pressureDiffHigh);
+    formData.serverIp = newVal.serviceIp;
+    formData.coordinateX = Number(newVal.x);
+    formData.coordinateY = Number(newVal.y);
+  } else {
+    resetForm();
+  }
+}, { immediate: true });
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal === false) {
+    resetForm();
+  }
+}, { immediate: true });
+
 </script>
 
 <style lang="scss" scoped>
@@ -343,7 +354,7 @@ const cancel = () => {
   }
 
   .form-footer {
-    margin-top: 20px;
+    margin-top: 30px;
     display: flex;
     justify-content: center;
 

src/views/dustOverview/components/roomSettingDialog.vue

@@ -48,6 +48,7 @@
         style="width: 100%"
         size="small"
         border
+        :resizable="false"
       >
         <el-table-column prop="compartPositionRow" label="排" width="180">
           <template #default="{ row }">

src/views/dustOverview/components/valveSettingDialog.vue

@@ -5,7 +5,7 @@
     width="800px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    @update:model-value="$emit('update:modelValue', $event)"
+    @update:model-value="cancel"
   >
     <div class="valve-setting">
       <div class="setting-row">
@@ -37,6 +37,7 @@
             :min="0"
             controls-position="right"
             style="width: 120px"
+            @change="handleValveNumChange"
             :class="{ 'is-error': errorMessage }"
           />
         </div>
@@ -47,6 +48,7 @@
             :min="0"
             controls-position="right"
             style="width: 120px"
+            @change="handleBagNumChange"
           />
         </div>
       </div>
@@ -57,14 +59,14 @@
         {{ errorMessage }}
       </div>
       
-      <div>
+      <!-- <div>
         <el-button 
           type="primary" 
           class="save-btn" 
           @click="handleSave"
           :disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null"
         >设置</el-button>
-      </div>
+      </div> -->
     </div>
 
     <!-- 分布表格 -->
@@ -93,7 +95,7 @@
 
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+        <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="handleConfirm" :disabled="!!errorMessage">
           保存
         </el-button>
@@ -119,7 +121,7 @@ const emit = defineEmits(["update:modelValue", "confirm"]);
 const valveForm = ref({
   total: 0,
   rows: 0,
-  frontCompartNo: 0,
+  frontCompartNo: null,
   valveNum: 0,
   bagNum: 0
 });
@@ -174,14 +176,25 @@ const initializeState = () => {
   }
 };
 
+const resetForm = () => {
+  statusData.value = [];
+  valveForm.value.frontCompartNo = null;
+  valveForm.value.valveNum = 0;
+  valveForm.value.bagNum = 0;
+}
+
 const getAllocation = (params) => {
   getValveAllocation(params).then(res => {
-    if (res.code === 1 && res.data.valveList.length > 0) {
-      statusData.value = res.data.valveList;
-      valveForm.value.frontCompartNo = statusData.value[0].frontCompartNo;
-      valveForm.value.valveNum = statusData.value[0].valveNum;
-      valveForm.value.bagNum = statusData.value[0].bagNum;
-    }
+    if (res.code === 1) {
+      if (res.data.valveList.length > 0) {
+        statusData.value = res.data.valveList;
+        valveForm.value.frontCompartNo = statusData.value[0].frontCompartNo;
+        valveForm.value.valveNum = statusData.value[0].valveNum;
+        valveForm.value.bagNum = statusData.value[0].bagNum;
+      } else {
+        resetForm();
+      }
+    } 
   })
 }
 
@@ -197,6 +210,45 @@ const handleRoomChange = (roomIndex) => {
   }
 };
 
+// 监听电磁阀数量变化
+const handleValveNumChange = () => {
+  // 验证是否超出限制
+  const validation = validateValveCount.value;
+  if (!validation.valid) {
+    errorMessage.value = validation.message;
+    return;
+  }
+
+  // 保存当前选中仓室的电磁阀分布数量
+  const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
+  if (selectedRoom) {
+    selectedRoom.valveNum = valveForm.value.valveNum;
+    selectedRoom.bagNum = valveForm.value.bagNum;
+    // 更新错误信息
+    errorMessage.value = "";
+  }
+}
+
+// 监听布袋数量变化
+const handleBagNumChange = () => {
+  // 验证是否超出限制
+  const validation = validateValveCount.value;
+  if (!validation.valid) {
+    errorMessage.value = validation.message;
+    return;
+  }
+
+  // 保存当前选中仓室的电磁阀分布数量
+  const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
+  if (selectedRoom) {
+    selectedRoom.valveNum = valveForm.value.valveNum;
+    selectedRoom.bagNum = valveForm.value.bagNum;
+    // 更新错误信息
+    errorMessage.value = "";
+  }
+}
+
+
 watch(() => props.modelValue, (newVal) => {
   if (newVal) {
     initializeState();
@@ -251,7 +303,6 @@ const handleSave = () => {
 
 const handleConfirm = () => {
   // 最终确认时再次验证总数是否符合要求
-  console.log(statusData.value);
   const totalValves = statusData.value.reduce((sum, cell) => sum + cell.valveNum, 0);
   if (totalValves > valveForm.value.total) {
     errorMessage.value = `电磁阀总数超出限制 ${totalValves - valveForm.value.total} 个，请调整后再提交`;
@@ -261,6 +312,11 @@ const handleConfirm = () => {
   emit("confirm", statusData.value);
   // emit("update:modelValue", false);
 };
+
+const cancel = () => {
+  resetForm();
+  emit("update:modelValue", false);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -334,6 +390,7 @@ const handleConfirm = () => {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-height: 152px;
   padding: 12px;
   background: #f5f7fa;
   border-radius: 4px;

src/views/dustOverview/index.vue

@@ -159,6 +159,7 @@
       v-model="isAddDustCollectorVisible"
       :edit-data="currentEditingDustCollector"
       @save="handleSaveDustCollector"
+      @cancel="handleCancel"
     />
   </div>
 </template>
@@ -284,19 +285,10 @@ const filterProductionLine = (query) => {
   }
 };
 
-const getStatusType = (status) => {
-  const statusMap = {
-    正常运行: "success",
-    轻微异常: "warning",
-    故障: "danger",
-  };
-  return statusMap[status] || "info";
-};
-
 const getHealthScoreColor = (score) => {
   // 去除百分号
   const value = parseInt(score.replace("%", ""));
-  if (value >= 90) return "#67C23A";
+  if (value == 100) return "#67C23A";
   if (value >= 70) return "#E6A23C";
   return "#F56C6C";
 };
@@ -306,7 +298,12 @@ const getIndex = (index) => {
 };
 
 const handleView = (row) => {
-  console.log("查看详情", row);
+  router.push({
+    path: "/monitor",
+    query: {
+      dusterNo: row.deviceNo,
+    },
+  });
 };
 
 const handleEdit = (row) => {
@@ -401,6 +398,10 @@ const setValveInfo = (data) => {
   });
 };
 
+const handleCancel = () => {
+  isAddDustCollectorVisible.value = false;
+  currentEditingDustCollector.value = null;
+};
 // 保存新增或编辑除尘器
 const handleSaveDustCollector = (data) => {
   if (data.id) {
@@ -425,6 +426,7 @@ const handleSaveDustCollector = (data) => {
       .then((res) => {
         if (res.code == 1) {
           ElMessage.success("新增除尘器成功");
+          currentEditingDustCollector.value = null;
           isAddDustCollectorVisible.value = false;
           refreshData();
         } else {
@@ -749,4 +751,14 @@ onBeforeUnmount(() => {});
     }
   }
 }
+
+:deep(.el-table) {
+  .el-table__column-resize-proxy {
+    display: none !important;
+  }
+  
+  .el-table__header th {
+    user-select: none;
+  }
+}
 </style>