Merge branch 'feat/layout-style' into 'dev'

Feat/layout style

See merge request !8

src/router/index.js

@@ -2,13 +2,12 @@ import { createWebHistory, createRouter } from 'vue-router'
 
 import Dashboard from '../views/dashboard/index.vue'
 import DustOverview from '../views/dustOverview/index.vue'
-import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
-import User from '../views/user.vue'
 import Layout from '../layout/index.vue'
 import Login from '../views/login/index.vue'
 import equipmentManagement from '../views/equipmentManagement/index.vue'
 import dustMonitoring from '../views/dustMonitoring/index.vue'
+import bagMonitoring from '../views/dustMonitoring/bag-monitoring.vue'
 
 import myAgency from '@/views/closeManage/myAgency.vue';
 import myDone from '@/views/closeManage/myDone.vue';
@@ -37,6 +36,11 @@ const routes = [
             component: dustMonitoring,
             meta: { title: '除尘器监控' },
           },
+          {
+            path: '/bag-monitor',
+            component: bagMonitoring,
+            meta: { title: 'BME布袋监测' },
+          },
           {
             path: '/alerts',
             component: AboutView,

src/utils/chart.js

@@ -57,4 +57,95 @@ export const getLineOption = (xData = [], seriesData = []) => ({
         smooth: true,
       },
     ],
-  });
+  });
\ No newline at end of file
+
+// 布袋监测图表配置
+export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      lineStyle: {
+        color: '#6E7079',
+        width: 1
+      }
+    }
+  },
+  grid: {
+    left: '20',
+    right: '20',
+    bottom: '30',
+    top: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLine: {
+      lineStyle: {
+        color: '#E9ECF2'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(0,0,0,0.6)',
+      fontSize: 12,
+      interval: 'auto',
+      rotate: 0
+    },
+    axisTick: {
+      show: false
+    },
+    data: xData
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 600,
+    interval: 200,
+    axisLabel: {
+      color: 'rgba(0,0,0,0.6)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#E9ECF2',
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '监测值',
+      type: 'line',
+      smooth: false,
+      symbol: 'none',
+      sampling: 'average',
+      itemStyle: {
+        color: '#7B68EE'
+      },
+      lineStyle: {
+        width: 1
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(123, 104, 238, 0.4)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(123, 104, 238, 0.1)'
+            }
+          ]
+        }
+      },
+      data: seriesData,
+    }
+  ]
+});
\ No newline at end of file

src/views/dashboard/components/map-svg.vue

@@ -234,6 +234,7 @@ onBeforeUnmount(() => {
 
   &.active {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    z-index: 100;
   }
 
   .pulse {
@@ -284,7 +285,7 @@ onBeforeUnmount(() => {
     padding: 12px;
     color: #fff;
     pointer-events: none;
-    z-index: 3;
+    z-index: 999;
 
     .text-status-normal {
       color: #00ff9d !important;

src/views/dustMonitoring/bag-monitoring.vue

+<template>
+  <div class="page-container bag-monitoring-container">
+    <div class="header">
+      <div class="select-container">
+        <span>检测仪器11</span>
+        <el-select v-model="selectedDevice" placeholder="1#布袋检测仪">
+          <el-option label="1#布袋检测仪" value="1"></el-option>
+        </el-select>
+      </div>
+      <div class="title">BME布袋监测</div>
+    </div>
+    
+    <div class="chart-container">
+      <div class="chart-wrapper" ref="chartRef"></div>
+      
+      <div class="data-panel" :class="{ 'collapsed': !isPanelOpen }">
+        <div class="panel-toggle" :class="{ 'collapsed-icon': !isPanelOpen, 'expanded-icon': isPanelOpen }" @click="togglePanel">
+          <el-icon v-if="isPanelOpen"><ArrowRightBold /></el-icon>
+          <el-icon v-if="!isPanelOpen"><ArrowLeftBold /></el-icon>
+        </div>
+        <div class="data-box">
+          <div class="data-item">
+            <div>时间: {{ currentData.time }}</div>
+            <div>仓室: {{ currentData.chamber }}</div>
+            <div>反吹: {{ currentData.backwash }}</div>
+          </div>
+          <div class="data-item">
+            <div>DI3: {{ currentData.di3 }}</div>
+            <div>排: {{ currentData.row }}</div>
+            <div>实时值: {{ currentData.realValue }}</div>
+          </div>
+          <div class="data-item">
+            <div>基线值: {{ currentData.baseline }}</div>
+            <div>Delay: {{ currentData.delay }}</div>
+            <div>totaltime: {{ currentData.totaltime }}</div>
+          </div>
+          <div class="data-item">
+            <div>{{ currentData.next }}</div>
+            <div>valve:{{ currentData.valve }}</div>
+            <div>DI_TIME={{ currentData.di_time }}</div>
+          </div>
+          <div class="data-item">
+            <div>false:{{ currentData.false }}</div>
+            <div>peak={{ currentData.peak }}</div>
+          </div>
+        </div>
+        
+        <div class="data-box second-box">
+          <div>时间:{{ secondaryData.time }}, 仓室: {{ secondaryData.chamber }}, 反吹: {{ secondaryData.backwash }}, 谷值: {{ secondaryData.valleyValue }}, 仓室状态阀门{{ secondaryData.status }}False{{ secondaryData.falseVal }}</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="data-table">
+
+      <div class="time-controls">
+        <el-button>
+          <i class="el-icon-back"></i>
+        </el-button>
+        <el-button>
+          <i class="el-icon-right"></i>
+        </el-button>
+        <span class="time-label">间隔</span>
+        <el-input v-model="timeInterval" class="time-input"></el-input>
+        <span class="time-unit">分钟</span>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            <th>名称</th>
+            <th v-for="i in 20" :key="i">{{ i }}仓</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>峰值_R</td>
+            <td v-for="(value, index) in peakValuesR" :key="'r'+index">{{ value }}</td>
+          </tr>
+          <tr>
+            <td>峰值_H</td>
+            <td v-for="(value, index) in peakValuesH" :key="'h'+index">{{ value }}</td>
+          </tr>
+          <tr>
+            <td>状态</td>
+            <td v-for="(value, index) in statusValues" :key="'s'+index" :class="{ 'error': value === '故障' }">{{ value }}</td>
+          </tr>
+          <tr>
+            <td>反吹中</td>
+            <td v-for="(value, index) in backwashValues" :key="'b'+index" :class="{ 'highlight': index === 1 }">{{ value }}</td>
+          </tr>
+          <tr>
+            <td>谷值</td>
+            <td v-for="(value, index) in valleyValues" :key="'v'+index">{{ value }}</td>
+          </tr>
+        </tbody>
+      </table>
+      
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts'
+import { ArrowRightBold, ArrowLeftBold } from '@element-plus/icons-vue'
+import { getBagMonitoringChartOption } from '@/utils/chart.js'
+
+// 设备选择
+const selectedDevice = ref('1')
+
+const isPanelOpen = ref(true)
+
+// 图表相关
+const chartRef = ref(null)
+let chartInstance = null
+let updateTimer = null // 定时器引用
+
+// 图表数据
+const chartData = reactive({
+  xData: [],
+  seriesData: []
+})
+
+// 当前数据面板
+const currentData = reactive({
+  time: '641',
+  chamber: '5',
+  backwash: '0',
+  di3: '0, 0,',
+  row: '1,',
+  realValue: '18.87,',
+  baseline: '10,',
+  delay: '0,',
+  totaltime: '1837',
+  next: 'next:765,',
+  valve: '5',
+  di_time: '1848',
+  false: '0:0,',
+  peak: '4, 1, 46'
+})
+
+// 次要数据面板
+const secondaryData = reactive({
+  time: '784',
+  chamber: '6',
+  backwash: '0',
+  valleyValue: '3',
+  status: '212',
+  falseVal: '0'
+})
+
+// 表格数据
+const peakValuesR = [0, 0, -30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+const peakValuesH = [30, 56, 60, 70, 18, 56, 18, 41, 41, 0, 41, 41, 41, 41, 41, 41, 500, 41, 31, 41]
+const statusValues = Array(20).fill('正常')
+statusValues[2] = '故障'
+statusValues[16] = '故障'
+
+const backwashValues = [0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+const valleyValues = [-8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -9, 0, 0, 0, 0, 0]
+
+// 时间控制
+const timeInterval = ref('10')
+
+const togglePanel = () => {
+  isPanelOpen.value = !isPanelOpen.value
+}
+
+// 格式化时间为 HH:MM:SS 格式
+const formatTime = (date) => {
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+  return `${hours}:${minutes}:${seconds}`
+}
+
+// 初始化图表
+const initChart = () => {
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  // 初始化图表数据
+  initChartData()
+  
+  chartInstance = echarts.init(chartRef.value)
+  updateChart()
+  
+  // 启动定时更新
+  startRealTimeUpdates()
+}
+
+// 初始化图表数据
+const initChartData = () => {
+  const now = new Date()
+  chartData.xData = []
+  chartData.seriesData = []
+  
+  // 创建初始数据点，从5分钟前开始
+  for (let i = 300; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 1000)
+    chartData.xData.push(formatTime(time))
+    chartData.seriesData.push(generateRandomValue())
+  }
+}
+
+// 生成一个介于 20-300 之间的随机值，模拟实时数据
+const generateRandomValue = () => {
+  // 有10%的概率生成峰值
+  if (Math.random() < 0.1) {
+    return Math.floor(Math.random() * 200) + 200 // 200-400之间的峰值
+  }
+  return Math.floor(Math.random() * 130) + 20 // 20-150之间的基础值
+}
+
+// 更新图表
+const updateChart = () => {
+  if (chartInstance) {
+    chartInstance.setOption(getBagMonitoringChartOption(chartData.xData, chartData.seriesData))
+  }
+}
+
+// 启动实时更新
+const startRealTimeUpdates = () => {
+  if (updateTimer) {
+    clearInterval(updateTimer)
+  }
+  
+  updateTimer = setInterval(() => {
+    // 添加新数据点
+    const now = new Date()
+    chartData.xData.push(formatTime(now))
+    chartData.seriesData.push(generateRandomValue())
+    
+    // 移除最旧的数据点以保持固定长度
+    if (chartData.xData.length > 31) { // 保持30秒的数据
+      chartData.xData.shift()
+      chartData.seriesData.shift()
+    }
+    
+    // 更新图表
+    updateChart()
+    updateDataPanels()
+  }, 1000)
+}
+
+// 更新数据面板
+const updateDataPanels = () => {
+  // 随机更新当前数据面板的实时值
+  currentData.realValue = (Math.random() * 30 + 10).toFixed(2) + ','
+  // 更新时间显示
+  const now = new Date()
+  currentData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
+  
+  // 每10秒更新一次次要数据面板
+  if (now.getSeconds() % 10 === 0) {
+    secondaryData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
+    secondaryData.valleyValue = Math.floor(Math.random() * 10).toString()
+  }
+}
+
+// 监听窗口大小变化，调整图表大小
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  // 清除定时器
+  if (updateTimer) {
+    clearInterval(updateTimer)
+    updateTimer = null
+  }
+  // 销毁图表实例
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.bag-monitoring-container {
+  width: 100%;
+  height: calc(100% - 14px);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  
+  .header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    
+    .select-container {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 400px;
+      display: flex;
+      align-items: center;
+      z-index: 99;
+      
+      span {
+        display: block;
+        width: 110px;
+        margin-right: 10px;
+      }
+      
+      .device-number {
+        background: #fcf0c2;
+        padding: 2px 8px;
+        margin-left: 10px;
+        border-radius: 4px;
+      }
+    }
+    
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #409EFF;
+    }
+  }
+  
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 350px);
+    background-color: #fff;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    
+    .chart-wrapper {
+      flex: 1;
+      width: 100%;
+    }
+    
+    .data-panel {
+      position: absolute;
+      top: 80px;
+      right: 25px;
+      width: 320px;
+      z-index: 10;
+      transition: transform 0.3s ease-in-out;
+      
+      &.collapsed {
+        transform: translateX(345px);
+      }
+      
+      .panel-toggle {
+        position: absolute;
+        width: 25px;
+        height: 30px;
+        background: #fff;
+        top: 1px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+
+      .collapsed-icon {
+        left: -23px;
+      }
+      .expanded-icon {
+        right: -23px;
+      }
+      
+      .data-box {
+        padding: 10px;
+        background-color: rgba(255, 255, 255, 0.9);
+        border-radius: 4px;
+        border: 1px solid #ebeef5;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: 10px;
+        
+        .data-item {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 5px;
+          font-size: 14px;
+          
+          div {
+            flex: 1;
+          }
+        }
+      }
+      
+      .second-box {
+        font-size: 12px;
+      }
+    }
+  }
+  
+  .data-table {
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 10px 0;
+    box-sizing: border-box;
+    
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      
+      th, td {
+        border: 1px solid #EBEEF5;
+        text-align: center;
+        padding: 8px;
+        font-size: 14px;
+      }
+      
+      th {
+        background-color: #F5F7FA;
+        color: #606266;
+      }
+      
+      .error {
+        color: #F56C6C;
+      }
+      
+      .highlight {
+        background-color: #FCF8E3;
+        position: relative;
+        
+        &::after {
+          content: "";
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          background-color: #E6A23C;
+          border-radius: 50%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1;
+        }
+      }
+    }
+    
+    .time-controls {
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      
+      .time-label, .time-unit {
+        margin: 0 5px;
+      }
+      
+      .time-input {
+        width: 60px;
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file

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 () => {});