feat(*): 除尘器总览页面开发

src/views/dustOverview/components/addDustCollectorDialog.vue

+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="新增除尘器"
+    width="460px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div class="add-dust-form">
+      <div class="form-item">
+        <div class="selector-wrap">
+          <el-select v-model="formData.dustType" placeholder="除尘器选择" style="width: 238px">
+            <el-option
+              v-for="item in dustTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button type="primary" size="default" @click="selectDustType">选择</el-button>
+        </div>
+      </div>
+
+      <div class="form-content">
+        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
+          <el-form-item label="除尘器名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入" />
+          </el-form-item>
+          
+          <el-form-item label="除尘器编号" prop="code">
+            <el-input v-model="formData.code" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="所属工序" prop="process">
+            <el-select v-model="formData.process" placeholder="工序选择">
+              <el-option
+                v-for="item in processOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="仓室数量" prop="chamberCount">
+            <el-input v-model.number="formData.chamberCount" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="电磁阀数量" prop="valveCount">
+            <el-input v-model.number="formData.valveCount" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="合理压差范围" prop="pressureRange">
+            <div class="range-input">
+              <el-input v-model.number="formData.pressureMin" placeholder="请输入" />
+              <span class="separator">～</span>
+              <el-input v-model.number="formData.pressureMax" placeholder="请输入" />
+            </div>
+          </el-form-item>
+
+          <el-form-item label="服务器IP" prop="serverIp">
+            <el-input v-model="formData.serverIp" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="form-footer">
+
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="submitForm">确认</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'save']);
+
+const formRef = ref(null);
+
+const dustTypeOptions = [
+  { value: 1, label: '除尘器类型1' },
+  { value: 2, label: '除尘器类型2' },
+  { value: 3, label: '除尘器类型3' }
+];
+
+const processOptions = [
+  { value: 1, label: '转炉' },
+  { value: 2, label: '炼铁' }
+];
+
+const formData = reactive({
+  dustType: '',
+  name: '',
+  code: '',
+  process: '',
+  chamberCount: null,
+  valveCount: null,
+  pressureMin: null,
+  pressureMax: null,
+  serverIp: ''
+});
+
+const rules = {
+  name: [{ required: true, message: '请输入除尘器名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入除尘器编号', trigger: 'blur' }],
+  process: [{ required: true, message: '请选择所属工序', trigger: 'change' }],
+  chamberCount: [
+    { required: true, message: '请输入仓室数量', trigger: 'blur' },
+    { type: 'number', min: 1, message: '仓室数量必须大于0', trigger: 'blur' }
+  ],
+  valveCount: [
+    { required: true, message: '请输入电磁阀数量', trigger: 'blur' },
+    { type: 'number', min: 1, message: '电磁阀数量必须大于0', trigger: 'blur' }
+  ],
+  pressureMin: [
+    { required: true, message: '请输入最小压差', trigger: 'blur' },
+    { type: 'number', message: '必须为数字', trigger: 'blur' }
+  ],
+  pressureMax: [
+    { required: true, message: '请输入最大压差', trigger: 'blur' },
+    { type: 'number', message: '必须为数字', trigger: 'blur' }
+  ],
+  serverIp: [
+    { required: true, message: '请输入服务器IP', trigger: 'blur' },
+    { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: 'blur' }
+  ]
+};
+
+const selectDustType = () => {
+  // 这里可以根据选择的除尘器类型预填充表单数据
+  // 如果有预设模板数据，可以在这里设置
+  console.log('Selected dust type:', formData.dustType);
+};
+
+const submitForm = () => {
+  if (!formRef.value) return;
+  formRef.value.validate((valid) => {
+    if (valid) {
+      // 组装压差范围
+      const pressureRange = `${formData.pressureMin}～${formData.pressureMax}`;
+      
+      // 准备提交的数据
+      const submitData = {
+        dustType: formData.dustType,
+        deviceName: formData.name,
+        deviceNo: formData.code,
+        process: formData.process,
+        healthScore: formData.chamberCount, // 仓室数量保存在healthScore
+        health2Score: formData.valveCount, // 电磁阀数量保存在health2Score
+        lastAlarmTime: pressureRange, // 合理压差范围保存在lastAlarmTime字段
+        serverIp: formData.serverIp,
+        // 生成默认的状态矩阵
+        status: generateDefaultStatus(formData.chamberCount)
+      };
+      
+      // 发送数据到父组件处理保存逻辑
+      emit('save', submitData);
+      emit('update:modelValue', false);
+    } else {
+      console.error('Form validation failed');
+      return false;
+    }
+  });
+};
+
+const cancel = () => {
+  // 重置表单状态和数据
+  formRef.value.resetFields();
+  formData.dustType = '';
+  formData.name = '';
+  formData.code = '';
+  formData.process = '';
+  formData.chamberCount = null;
+  formData.valveCount = null;
+  emit('update:modelValue', false);
+};
+
+// 生成默认的状态矩阵
+const generateDefaultStatus = (totalChambers) => {
+  // 默认状态：正常（status=1），每排最多5个仓室
+  const rows = Math.ceil(totalChambers / 5);
+  const result = [];
+  
+  let chamberIndex = 1;
+  for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+    const row = [];
+    const chambersInRow = Math.min(5, totalChambers - rowIndex * 5);
+    
+    for (let i = 0; i < chambersInRow; i++) {
+      row.push({
+        index: chamberIndex++,
+        status: 1, // 正常状态
+        count: 1  // 默认阀门数量
+      });
+    }
+    
+    result.push(row);
+  }
+  
+  return result;
+};
+</script>
+
+<style lang="scss" scoped>
+.add-dust-form {
+  .form-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 0 0 0 50px;
+    box-sizing: border-box;
+    
+    .number-badge {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: #f8cd4e;
+      color: #000;
+      border-radius: 4px;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    
+    .selector-wrap {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 1;
+    }
+  }
+  
+  .form-content {
+    padding: 0 30px;
+    
+    .range-input {
+      display: flex;
+      align-items: center;
+      
+      .separator {
+        margin: 0 5px;
+        color: #606266;
+      }
+    }
+  }
+  
+  .form-footer {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    
+    .el-button {
+      width: 120px;
+    }
+  }
+}
+
+:deep(.el-form-item__label) {
+  font-size: 14px;
+  color: #606266;
+}
+
+:deep(.el-input) {
+  width: 100%;
+}
+
+:deep(.el-select) {
+  width: 100%;
+}
+</style> 
\ No newline at end of file

src/views/dustOverview/components/roomSettingDialog.vue

+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="仓室数量设置"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @open="initializeState"
+  >
+    <el-form :model="roomForm" label-width="120px">
+      <el-form-item label="仓室数量">
+        <el-input
+          v-model="roomForm.totalRooms"
+          controls-position="right"
+          style="width: 150px"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="仓室分几排">
+        <el-input-number
+          v-model="roomForm.rows"
+          :min="1"
+          :max="20"
+          controls-position="right"
+          @change="handleRowsChange"
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 分布表格 -->
+    <div class="distribution-table">
+      <div class="table-title">
+        仓室数量分布
+        <div
+          v-if="distributionDiff !== 0"
+          :class="[
+            'distribution-warning',
+            distributionDiff > 0 ? 'warning-less' : 'warning-less',
+          ]"
+        >
+          当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量
+          {{ Math.abs(distributionDiff) }} 个，请修改。
+        </div>
+      </div>
+      <el-table
+        :data="distributionData"
+        style="width: 100%"
+        size="small"
+        border
+      >
+        <el-table-column prop="row" label="排" width="180" />
+        <el-table-column prop="count" label="仓数量">
+          <template #default="{ row }">
+            <el-input-number
+              v-model="row.count"
+              :min="1"
+              :max="50"
+              controls-position="right"
+              size="small"
+              @change="handleDistributionChange"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+        <el-button type="primary" @click="handleConfirm" :disabled="distributionDiff !== 0">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  modelValue: Boolean,
+  totalRooms: {
+    type: Number,
+    required: true
+  },
+  initialDistribution: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const roomForm = ref({
+  totalRooms: 0,
+  rows: 0
+});
+
+const distributionData = ref([]);
+
+const initializeState = () => {
+  if (props.modelValue) {
+    roomForm.value.totalRooms = props.totalRooms;
+    
+    if (props.initialDistribution && props.initialDistribution.length > 0) {
+      roomForm.value.rows = props.initialDistribution.length;
+      distributionData.value = props.initialDistribution.map((row, index) => ({
+        row: `第${index + 1}排`,
+        count: row.length
+      }));
+    } else {
+      roomForm.value.rows = 0;
+      distributionData.value = [];
+    }
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    initializeState();
+  }
+}, { immediate: true });
+
+const distributionDiff = computed(() => {
+  const total = distributionData.value.reduce(
+    (sum, item) => sum + item.count,
+    0
+  );
+  return total - roomForm.value.totalRooms;
+});
+
+const handleRowsChange = (value) => {
+  const total = roomForm.value.totalRooms;
+  if (!total || !value) return;
+
+  // 计算每行的基础数量（向下取整）和余数
+  const baseValue = Math.floor(total / value);
+  const remainder = total % value;
+
+  // 生成分布数据
+  distributionData.value = Array.from({ length: value }, (_, index) => {
+    return {
+      row: `第${index + 1}排`,
+      count: index < remainder ? baseValue + 1 : baseValue
+    };
+  });
+};
+
+const handleDistributionChange = () => {
+  // 分布数量变化时不需要特殊处理，distributionDiff会自动计算
+};
+
+const handleConfirm = () => {
+  if (distributionDiff.value === 0) {
+    emit("confirm", distributionData.value);
+    emit("update:modelValue", false);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.distribution-table {
+  margin-top: 20px;
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+}
+
+.table-title {
+  font-size: 14px;
+  color: #2182a0;
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.distribution-warning {
+  display: inline-block;
+  font-size: 13px;
+  margin-left: 12px;
+  padding: 1px 8px;
+  box-sizing: border-box;
+  border-radius: 4px;
+
+  &.warning-more {
+    color: #e6a23c;
+    background-color: #fdf6ec;
+  }
+
+  &.warning-less {
+    color: #f56c6c;
+    background-color: #fef0f0;
+  }
+}
+
+:deep(.el-input-number.el-input-number--small) {
+  width: 130px;
+}
+
+:deep(.distribution-table .el-table--border .el-table__cell) {
+  border-right: 1px solid #ebeef5 !important;
+}
+</style> 
\ No newline at end of file

src/views/dustOverview/components/valveSettingDialog.vue

+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="电磁阀数量设置"
+    width="800px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @open="initializeState"
+  >
+    <div class="valve-setting">
+      <div class="setting-row">
+        <div class="input-group">
+          <span>电磁阀总数量：</span>
+          <el-input v-model="valveForm.total" style="width: 120px" disabled />
+        </div>
+        <el-button type="primary" @click="handleAverageDistribute"
+          >平均分布生成</el-button
+        >
+      </div>
+      <div class="table-title">仓室脉冲阀数量分布</div>
+      <div class="setting-row">
+        <div class="input-group">
+          <span>仓室编号：</span>
+          <el-select v-model="valveForm.roomNo" style="width: 120px" @change="handleRoomChange">
+            <el-option
+              v-for="cell in statusData"
+              :key="cell.index"
+              :label="`${cell.index}仓`"
+              :value="cell.index"
+            />
+          </el-select>
+        </div>
+        <div class="input-group">
+          <span>电磁阀分布数量：</span>
+          <el-input-number
+            v-model="valveForm.valveCount"
+            :min="1"
+            controls-position="right"
+            style="width: 120px"
+            :class="{ 'is-error': errorMessage }"
+          />
+        </div>
+        <div class="input-group">
+          <span>布阀数量：</span>
+          <el-input-number
+            v-model="valveForm.distribution"
+            :min="1"
+            controls-position="right"
+            style="width: 120px"
+          />
+        </div>
+      </div>
+      
+      <!-- 错误提示 -->
+      <div v-if="errorMessage" class="error-message">
+        <i class="el-icon-warning"></i>
+        {{ errorMessage }}
+      </div>
+      
+      <div>
+        <el-button 
+          type="primary" 
+          class="save-btn" 
+          @click="handleSave"
+          :disabled="!!errorMessage || valveForm.valveCount === null || valveForm.distribution === null"
+        >保存</el-button>
+      </div>
+    </div>
+
+    <!-- 分布表格 -->
+    <div class="distribution-table">
+      <div class="table-title">
+        仓室脉冲阀数量分布
+        <span class="valve-count-info">
+          (当前分配: {{ currentTotalValves }}/{{ valveForm.total }})
+        </span>
+      </div>
+      <div class="valve-distribution-grid">
+        <div class="valve-row">
+          <div
+            v-for="(cell, colIndex) in statusData"
+            :key="colIndex"
+            class="valve-cell"
+            :class="{ 'active-cell': cell.index === valveForm.roomNo }"
+            @click="valveForm.roomNo = cell.index; handleRoomChange(cell.index)"
+          >
+            <div class="cell-index">{{ cell.index }}仓</div>
+            <div class="cell-value">{{ cell.count }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+        <el-button type="primary" @click="handleConfirm" :disabled="!!errorMessage">
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch, computed } from "vue";
+
+const props = defineProps({
+  modelValue: Boolean,
+  totalValves: {
+    type: Number,
+    required: true
+  },
+  statusData: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const valveForm = ref({
+  total: 0,
+  rows: 0,
+  roomNo: 0,
+  valveCount: 0,
+  distribution: 0
+});
+
+const statusData = ref([]);
+const errorMessage = ref("");
+
+// 计算当前已分配的电磁阀总数量
+const currentTotalValves = computed(() => {
+  return statusData.value.reduce((sum, cell) => sum + cell.count, 0);
+});
+
+// 计算当前修改后的总数量
+const projectedTotalValves = computed(() => {
+  // 找到当前修改的仓室
+  const selectedRoom = statusData.value.find(cell => cell.index === valveForm.value.roomNo);
+  if (!selectedRoom) return currentTotalValves.value;
+  
+  // 计算替换后的总数
+  const diff = valveForm.value.valveCount - selectedRoom.count;
+  return currentTotalValves.value + diff;
+});
+
+// 验证是否超过总数限制
+const validateValveCount = computed(() => {
+  if (projectedTotalValves.value > valveForm.value.total) {
+    return {
+      valid: false,
+      message: `超出电磁阀总数限制，当前配置后总数为 ${projectedTotalValves.value}，超出限制 ${projectedTotalValves.value - valveForm.value.total} 个`
+    };
+  }
+  return { valid: true, message: "" };
+});
+
+const initializeState = () => {
+  if (props.modelValue) {
+    valveForm.value.total = props.totalValves;
+    statusData.value = [...props.statusData]; // 深拷贝状态数据
+    errorMessage.value = "";
+    
+    // 如果有数据，默认选中第一个仓室
+    if (statusData.value.length > 0) {
+      valveForm.value.roomNo = statusData.value[0].index;
+      valveForm.value.valveCount = statusData.value[0].count;
+      valveForm.value.distribution = statusData.value[0].count; // 默认布阀数量等于电磁阀数量
+    }
+  }
+};
+
+// 当选中的仓室改变时，更新电磁阀分布数量
+const handleRoomChange = (roomIndex) => {
+  const selectedRoom = statusData.value.find(cell => cell.index === roomIndex);
+  if (selectedRoom) {
+    valveForm.value.valveCount = selectedRoom.count;
+    valveForm.value.distribution = selectedRoom.count;
+    errorMessage.value = "";
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    initializeState();
+  }
+}, { immediate: true });
+
+// 监听阀门数量变化，实时验证
+watch(() => valveForm.value.valveCount, () => {
+  const validation = validateValveCount.value;
+  errorMessage.value = validation.valid ? "" : validation.message;
+});
+
+const handleAverageDistribute = () => {
+  if (!statusData.value || statusData.value.length === 0) return;
+
+  const total = Number(valveForm.value.total) || 0;
+  const totalRooms = statusData.value.length;
+  
+  if (totalRooms === 0 || total === 0) return;
+
+  // 计算基础平均值（向下取整）和余数
+  const baseValue = Math.floor(total / totalRooms);
+  const remainder = total % totalRooms;
+
+  // 平均分配阀数量 多余的阀数量分配到前面的仓室
+  statusData.value.forEach((cell, index) => {
+    cell.count = baseValue + (index < remainder ? 1 : 0);
+  });
+  
+  // 更新当前选中仓室的值
+  handleRoomChange(valveForm.value.roomNo);
+  errorMessage.value = ""; // 重置错误信息
+};
+
+const handleSave = () => {
+  // 验证是否超出限制
+  const validation = validateValveCount.value;
+  console.log(valveForm.value.valveCount);
+  if (!validation.valid) {
+    errorMessage.value = validation.message;
+    return;
+  }
+
+  // 保存当前选中仓室的电磁阀分布数量
+  const selectedRoom = statusData.value.find(cell => cell.index === valveForm.value.roomNo);
+  if (selectedRoom) {
+    selectedRoom.count = valveForm.value.valveCount;
+    
+    // 更新错误信息
+    errorMessage.value = "";
+  }
+};
+
+const handleConfirm = () => {
+  // 最终确认时再次验证总数是否符合要求
+  const totalValves = statusData.value.reduce((sum, cell) => sum + cell.count, 0);
+  if (totalValves > valveForm.value.total) {
+    errorMessage.value = `电磁阀总数超出限制 ${totalValves - valveForm.value.total} 个，请调整后再提交`;
+    return;
+  }
+  
+  emit("confirm", statusData.value);
+  emit("update:modelValue", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.valve-setting {
+  .setting-row {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        white-space: nowrap;
+        color: #606266;
+      }
+    }
+  }
+  .save-btn {
+    display: block;
+    width: 120px;
+    margin: 0 auto;
+  }
+}
+
+.error-message {
+  color: #F56C6C;
+  background-color: #FEF0F0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  margin: 10px 0;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  
+  i {
+    margin-right: 8px;
+    font-size: 16px;
+  }
+}
+
+.distribution-table {
+  margin-top: 20px;
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+}
+
+.table-title {
+  font-size: 14px;
+  color: #2182a0;
+  margin-bottom: 16px;
+  font-weight: 500;
+  
+  .valve-count-info {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 8px;
+  }
+}
+
+.valve-distribution-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 4px;
+
+  .valve-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .valve-cell {
+    width: 41px;
+    background: white;
+    padding: 4px;
+    border-radius: 4px;
+    text-align: center;
+    border: 1px solid #dcdfe6;
+    transition: all 0.3s;
+    cursor: pointer;
+    
+    &.active-cell {
+      box-shadow: 0 0 10px 0 rgba(64, 158, 255, 0.8);
+      transform: scale(1.05);
+    }
+
+    .cell-index {
+      font-size: 12px;
+      color: #909399;
+      margin-bottom: 8px;
+    }
+
+    .cell-value {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
+:deep(.is-error) {
+  .el-input__inner {
+    border-color: #F56C6C;
+  }
+  
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    border-color: #F56C6C;
+  }
+}
+</style> 
\ No newline at end of file

src/views/dustOverview/index.vue

@@ -60,7 +60,7 @@
             <el-button type="primary" class="search-btn" @click="onSubmit"
               >查询</el-button
             >
-            <el-button type="success" class="add-btn" @click="onSubmit"
+            <el-button type="success" class="add-btn" @click="handleAddDustCollector"
               >新增</el-button
             >
           </el-form-item>
@@ -128,168 +128,36 @@
       </div>
     </div>
 
-    <!-- 仓室数量设置弹窗 -->
-    <el-dialog
+    <!-- 使用新的仓室数量设置弹窗组件 -->
+    <RoomSettingDialog
       v-model="roomSettingVisible"
-      title="仓室数量设置"
-      width="500px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-    >
-      <el-form :model="roomForm" label-width="120px">
-        <el-form-item label="仓室数量">
-          <!-- <span class="readonly-value">{{ roomForm.totalRooms }}</span> -->
-          <el-input
-            v-model="roomForm.totalRooms"
-            controls-position="right"
-            style="width: 150px"
-            disabled
-          />
-        </el-form-item>
-        <el-form-item label="仓室分几排">
-          <el-input-number
-            v-model="roomForm.rows"
-            :min="1"
-            :max="20"
-            controls-position="right"
-            @change="handleRowsChange"
-          />
-        </el-form-item>
-      </el-form>
-
-      <!-- 分布表格 -->
-      <div class="distribution-table">
-        <div class="table-title">
-          仓室数量分布
-          <div
-            v-if="distributionDiff !== 0"
-            :class="[
-              'distribution-warning',
-              distributionDiff > 0 ? 'warning-less' : 'warning-less',
-            ]"
-          >
-            当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量
-            {{ Math.abs(distributionDiff) }} 个，请修改。
-          </div>
-        </div>
-        <el-table
-          :data="distributionData"
-          style="width: 100%"
-          size="small"
-          border
-        >
-          <el-table-column prop="row" label="排" width="180" />
-          <el-table-column prop="count" label="仓数量">
-            <template #default="{ row }">
-              <el-input-number
-                v-model="row.count"
-                :min="1"
-                :max="50"
-                controls-position="right"
-                size="small"
-                @change="handleDistributionChange"
-              />
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
+      :total-rooms="currentEditingRow?.healthScore || 0"
+      :initial-distribution="currentEditingRow?.status || []"
+      @confirm="handleRoomSettingConfirm"
+    />
 
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="roomSettingVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleRoomSettingConfirm">
-            确认
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-    <!-- 电磁阀数量设置弹窗 -->
-    <el-dialog
+    <!-- 使用新的电磁阀数量设置弹窗组件 -->
+    <ValveSettingDialog
       v-model="valveSettingVisible"
-      title="电磁阀数量设置"
-      width="800px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-    >
-      <div class="valve-setting">
-        <div class="setting-row">
-          <div class="input-group">
-            <span>电磁阀总数量：</span>
-            <el-input v-model="valveForm.total" style="width: 120px" disabled />
-          </div>
-          <el-button type="primary" @click="handleAverageDistribute"
-            >平均分布生成</el-button
-          >
-        </div>
-        <div class="table-title">仓室脉冲阀数量分布</div>
-        <div class="setting-row">
-          <div class="input-group">
-            <span>仓室编号：</span>
-            <el-select v-model="valveForm.roomNo" style="width: 120px">
-              <el-option
-                v-for="i in roomForm.rows"
-                :key="i"
-                :label="`${i}`"
-                :value="i"
-              />
-            </el-select>
-          </div>
-          <div class="input-group">
-            <span>电磁阀分布数量：</span>
-            <el-input-number
-              v-model="valveForm.valveCount"
-              :min="1"
-              controls-position="right"
-              style="width: 120px"
-            />
-          </div>
-          <div class="input-group">
-            <span>布阀数量：</span>
-            <el-input-number
-              v-model="valveForm.distribution"
-              :min="1"
-              controls-position="right"
-              style="width: 120px"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- 分布表格 -->
-      <div class="distribution-table">
-        <div class="table-title">仓室脉冲阀数量分布</div>
-        <div class="valve-distribution-grid">
-          <div class="valve-row">
-            <div
-              v-for="(cell, colIndex) in currentEditingRow?.status"
-              :key="colIndex"
-              class="valve-cell"
-            >
-              <div class="cell-index">{{ cell.index }}仓</div>
-              <div class="cell-value">
-                {{ currentEditingRow.status[colIndex].count }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="valveSettingVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleValveSettingConfirm">
-            保存
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
+      :total-valves="valveForm.total"
+      :status-data="currentEditingRow?.status || []"
+      @confirm="handleValveSettingConfirm"
+    />
+
+    <!-- 使用新增除尘器弹窗组件 -->
+    <AddDustCollectorDialog
+      v-model="isAddDustCollectorVisible"
+      @save="handleSaveDustCollector"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed } from "vue";
 import CommonTable from "@/components/commonTable/index.vue";
+import RoomSettingDialog from "./components/roomSettingDialog.vue";
+import ValveSettingDialog from "./components/valveSettingDialog.vue";
+import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
 
 const formInline = ref({
   deviceName: "",
@@ -614,135 +482,121 @@ const onSubmit = () => {
 
 // 仓室设置相关
 const roomSettingVisible = ref(false);
-const roomForm = ref({
-  totalRooms: 0,
-  rows: 0,
-});
 const currentEditingRow = ref(null);
 
-// 分布数据
-const distributionData = ref([]);
-
-// 计算分布差异
-const distributionDiff = computed(() => {
-  const total = distributionData.value.reduce(
-    (sum, item) => sum + item.count,
-    0
-  );
-  return total - roomForm.value.totalRooms;
+// 电磁阀设置相关
+const valveSettingVisible = ref(false);
+const valveForm = ref({
+  total: 120,
 });
 
-// 处理行数变化
-const handleRowsChange = (value) => {
-  const total = roomForm.value.totalRooms;
-  if (!total || !value) return;
-
-  // 计算每行的基础数量（向下取整）和余数
-  const baseValue = Math.floor(total / value);
-  const remainder = total % value;
-
-  // 生成分布数据
-  distributionData.value = Array.from({ length: value }, (_, index) => {
-    const isLast = index === value - 1;
-    const count = isLast
-      ? baseValue + remainder // 最后一项加上余数
-      : baseValue;
-
-    return {
-      row: `第${index + 1}排`,
-      count,
-    };
-  });
-};
-
-// 处理分布数量变化
-const handleDistributionChange = () => {
-  // 移除自动更新总数的逻辑，保持总数不变
-  // const total = distributionData.value.reduce(
-  //   (sum, item) => sum + item.count,
-  //   0
-  // );
-  // roomForm.value.totalRooms = total;
-};
+// 新增除尘器相关
+const isAddDustCollectorVisible = ref(false);
 
 // 修改打开弹窗的处理函数
 const handleHealthScoreClick = (row) => {
-  currentEditingRow.value = row;
-  console.log(currentEditingRow.value.status);
-  roomForm.value.totalRooms = row.healthScore;
-  roomForm.value.rows = row.status.length;
-  // 初始化分布数据
-  distributionData.value = row.status.map((item, index) => {
-    return {
-      row: `第${index + 1}排`,
-      count: item.length,
-    };
-  });
+  currentEditingRow.value = JSON.parse(JSON.stringify(row));
   roomSettingVisible.value = true;
 };
 
 // 确认设置
-const handleRoomSettingConfirm = () => {
+const handleRoomSettingConfirm = (distributionData) => {
   if (currentEditingRow.value) {
-    currentEditingRow.value.healthScore = roomForm.value.totalRooms;
-    // 这里可以添加更新状态矩阵的逻辑
+    // 创建新的状态矩阵
+    const newStatus = [];
+    let chamberIndex = 1;
+
+    // 根据分布数据重新生成状态矩阵
+    distributionData.forEach((rowData, rowIndex) => {
+      const rowArray = [];
+      
+      // 获取当前行中应该有多少个仓室
+      const rowCount = rowData.count;
+      
+      for (let i = 0; i < rowCount; i++) {
+        // 尝试获取原始数据或创建新数据
+        let existingRoom = null;
+        
+        if (currentEditingRow.value.status[rowIndex] && 
+            currentEditingRow.value.status[rowIndex][i]) {
+          existingRoom = {...currentEditingRow.value.status[rowIndex][i]};
+        }
+        
+        rowArray.push(existingRoom || {
+          index: chamberIndex,
+          status: 1, // 默认状态正常
+          count: 1  // 默认阀门数量
+        });
+        
+        chamberIndex++;
+      }
+      
+      newStatus.push(rowArray);
+    });
+    
+    // 更新行的状态矩阵和总数
+    currentEditingRow.value.status = newStatus;
+    currentEditingRow.value.healthScore = chamberIndex - 1; // 总仓室数
   }
-  roomSettingVisible.value = false;
 };
 
-// 电磁阀设置相关
-const valveSettingVisible = ref(false);
-const valveForm = ref({
-  total: 120,
-  roomNo: 1,
-  valveCount: 5,
-  distribution: 30,
-});
-
 // 点击电磁阀数量时打开弹窗
 const handleHealth2ScoreClick = (row) => {
+  // 创建一个扁平化的状态数组用于电磁阀设置
   currentEditingRow.value = JSON.parse(JSON.stringify(row));
-  currentEditingRow.value.status = currentEditingRow.value.status.flat();
+  const flattenedStatus = row.status.flat().map(item => ({...item}));
+  currentEditingRow.value.status = flattenedStatus;
   valveForm.value.total = row.health2Score;
   valveSettingVisible.value = true;
 };
 
-// 平均分布生成
-const handleAverageDistribute = () => {
-  if (!currentEditingRow.value?.status) return;
-
-  const status = currentEditingRow.value.status;
-  const total = Number(valveForm.value.total) || 0;
-
-  // 计算总仓室数
-  const totalRooms = status.reduce((sum, row) => sum + row.length, 0);
-  if (totalRooms === 0 || total === 0) return;
-
-  // 计算基础平均值（向下取整）和余数
-  const baseValue = Math.floor(total / totalRooms);
-  const remainder = total % totalRooms;
-
-  // 先将所有仓室设置为基础值
-  status.forEach((row, rowIndex) => {
-    row.forEach((_, colIndex) => {
-      currentEditingRow.value.status[rowIndex][colIndex] = baseValue;
-    });
-  });
-
-  // 如果有余数，将其加到最后一个仓室
-  if (remainder > 0) {
-    const lastRow = status.length - 1;
-    const lastCol = status[lastRow].length - 1;
-    currentEditingRow.value.status[lastRow][lastCol] += remainder;
+// 确认电磁阀设置
+const handleValveSettingConfirm = (updatedStatusData) => {
+  if (currentEditingRow.value && updatedStatusData) {
+    // 更新总数
+    const originalRow = tableData.find(item => item === currentEditingRow.value);
+    if (originalRow) {
+      originalRow.health2Score = valveForm.value.total;
+      
+      // 更新各个仓室的电磁阀数量
+      const flatStatusMap = new Map();
+      updatedStatusData.forEach(cell => {
+        flatStatusMap.set(cell.index, cell.count);
+      });
+      
+      // 将更新后的数量应用到原始的2D结构中
+      originalRow.status.forEach(row => {
+        row.forEach(chamber => {
+          if (flatStatusMap.has(chamber.index)) {
+            chamber.count = flatStatusMap.get(chamber.index);
+          }
+        });
+      });
+    }
   }
+  valveSettingVisible.value = false;
 };
 
-// 确认设置
-const handleValveSettingConfirm = () => {
-  if (currentEditingRow.value) {
-    currentEditingRow.value.health2Score = valveForm.value.total;
-  }
-  valveSettingVisible.value = false;
+// 打开新增除尘器弹窗
+const handleAddDustCollector = () => {
+  isAddDustCollectorVisible.value = true;
+};
+
+// 保存新增除尘器
+const handleSaveDustCollector = (data) => {
+  console.log("保存新增除尘器数据:", data);
+  // 添加到表格数据中
+  tableData.push({
+    ...data,
+    alarmCount: "100%", // 设置默认健康度
+    location: "", // 可以根据需要设置默认位置
+  });
+  
+  // 这里可以调用API进行保存
+  // await api.addDustCollector(data);
+  
+  // 关闭弹窗
+  isAddDustCollectorVisible.value = false;
 };
 
 onMounted(async () => {});