Merge branch 'dev' of https://app.bmetech.com/liuzhaohui/dctomproject into dev

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.9.0",
     "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",

src/css/elementUiSelf.css

@@ -4,11 +4,11 @@
     --table-item-border-color: #ebeef5;
 }
 .el-input {
-    --el-input-width: 220px !important;
+    /* --el-input-width: 220px !important; */
 }
 
 .el-select {
-    --el-select-width: 220px !important;
+    /* --el-select-width: 220px !important; */
 }
 
 .el-form-item__label {

src/router/index.js

@@ -2,12 +2,15 @@ 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 CollectorList from '../views/collectorList/collectorList.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';
 const routes = [
@@ -32,8 +35,18 @@ const routes = [
           },
           {
             path: '/monitor',
-            component: AboutView,
+            component: dustMonitoring,
             meta: { title: '除尘器监控' },
+          },
+           {
+            path: '/collectorList',
+            component: CollectorList,
+            meta: { title: '布袋周期' },
+          },
+          {
+            path: '/bag-monitor',
+            component: bagMonitoring,
+            meta: { title: 'BME布袋监测' },
           },
           {
             path: '/alerts',

src/utils/chart.js

 import { color } from "echarts";
 
 export const getLineOption = (xData = [], seriesData = []) => ({
-    tooltip: {
-      trigger: 'axis',
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '15%',
-      top: '5%',
-      containLabel: true,
-    },
-    legend: {
-      data: ['健康度指数（%）'],
-      bottom: '0%',
-      icon:"circle",
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 10,
-    },
-    xAxis: {
-      type: 'category',
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#E9ECF2',
-        },
+  tooltip: {
+    trigger: "axis",
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "15%",
+    top: "5%",
+    containLabel: true,
+  },
+  legend: {
+    data: ["健康度指数（%）"],
+    bottom: "0%",
+    icon: "circle",
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 10,
+  },
+  xAxis: {
+    type: "category",
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#E9ECF2",
       },
-      axisLabel: {
-        color: 'rgba(0,0,0,0.6)',
+    },
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    data: xData,
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+        type: "dashed",
       },
-      data: xData,
+    },
+  },
+  series: [
+    {
+      name: "健康度指数（%）",
+      type: "line",
+      color: "#399DFA",
+      data: seriesData,
+      smooth: true,
+    },
+  ],
+});
 
+export const getDustLineOption = (xData = [], seriesData = []) => ({
+  tooltip: {
+    trigger: "axis",
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "15%",
+    top: "5%",
+    containLabel: true,
+  },
+  legend: {
+    data: ["健康度指数（%）"],
+    bottom: "0%",
+    icon: "circle",
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 10,
+  },
+  xAxis: {
+    type: "category",
+    axisTick: {
+      show: false,
     },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        color: 'rgba(0,0,0,0.6)',
+    axisLine: {
+      lineStyle: {
+        color: "#E9ECF2",
       },
-      splitLine: {
-        lineStyle: {
-          color: '#E9ECF2',
-          type: 'dashed',
-        },
+    },
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    data: xData,
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+        type: "dashed",
       },
+    },
+  },
+  series: [
+    {
+      name: "",
+      type: "line",
+      color: "#399DFA",
+      data: seriesData,
+      smooth: true,
+    },
+  ],
+});
 
+// 布袋监测图表配置
+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}",
     },
-    series: [
-      {
-        name: '健康度指数（%）',
-        type: 'line',
-        color: '#399DFA',
-        data: seriesData,
-        smooth: true,
+    splitLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+        type: "dashed",
       },
-    ],
-  });
+    },
+  },
\ No newline at end of file
+  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,
+    },
+  ],
+});

src/views/collectorList/collectorList.vue

+<template>
+  <div class="page-container collectorList">
+    <div class="content-box">
+      <div class="search">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="仓室">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入仓室名称"
+              style="width: 200px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="除尘器名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 200px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="更换时间">
+            <el-date-picker
+              v-model="formInline.date"
+              type="datetimerange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :teleported="false"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="default" class="default-btn" @click="onSubmit"
+              >重置</el-button
+            >
+            <el-button type="primary" class="search-btn" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button type="success" class="add-btn" @click="openDialog()"
+              >更换周期分析</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-box">
+        <common-table
+          :data="tableData.list"
+          :columns="tableColumns"
+          :default-page-size="10"
+          @pagination-change="handlePaginationChange"
+          :pagination-texts="{
+            total: '共',
+            sizeChange: '条/页',
+            prev: '前一页',
+            next: '后一页',
+            jumper: '跳至',
+          }"
+        >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
+          <template #deviceName="{ row }">
+            <span class="health-score" @dblclick="openDialog(row.deviceName)">{{
+              row.deviceName
+            }}</span>
+          </template>
+          <!-- <template #operation="{ row }">
+            <span class="view-btn" @click="handleView(row)">详情</span>
+            <span class="edit-btn" @click="handleEdit(row)">编辑</span>
+          </template> -->
+        </common-table>
+      </div>
+    </div>
+
+    <!-- 除尘器曲线 -->
+    <el-dialog
+      class="dustListDialog"
+      v-model="dustLineisShow"
+      title="仓室数量设置"
+      width="1000px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="input-group">
+        <span>仓室编号：</span>
+        <el-select
+          v-model="selectDustNo"
+          @change="changeDust"
+          style="width: 120px"
+        >
+          <el-option
+            v-for="i in dustList.list"
+            :key="i"
+            :label="`${i.deviceName}`"
+            :value="i.deviceNo"
+          />
+        </el-select>
+      </div>
+      <div class="echartBox">
+        <chartLine :dustLineInfo="dustLineInfo.list"></chartLine>
+      </div>
+      <!-- <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dustLine = false">取消</el-button>
+          <el-button type="primary" @click="handleRoomSettingConfirm">
+            确认
+          </el-button>
+        </span>
+      </template> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
+import CommonTable from "@/components/commonTable/index.vue";
+import chartLine from "./components/chart-line.vue";
+
+const formInline = ref({
+  compart: "",
+  dusterName: "",
+  date: "",
+});
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const dustLineisShow = ref(false);
+
+const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
+  {
+    prop: "deviceName",
+    label: "除尘器名称",
+    width: "8%",
+  },
+  {
+    prop: "compart",
+    label: "仓室",
+    width: "8%",
+  },
+  {
+    prop: "position",
+    label: "布袋位置（排/列）",
+    width: "8%",
+  },
+  {
+    prop: "changeDateRemind",
+    label: "布袋更换提醒时间",
+    width: "8%",
+  },
+  {
+    prop: "changeDate",
+    label: "更换时间",
+    width: "8%",
+  },
+  {
+    prop: "changePeo",
+    label: "更换人",
+    width: "8%",
+  },
+  {
+    prop: "ownerdeviceName",
+    label: "所属除尘器",
+    width: "8%",
+  },
+  {
+    prop: "lastAlarmTime",
+    label: "布袋更换提醒时间",
+    width: "10%",
+  },
+  {
+    prop: "changeRound",
+    label: "更换周期(与上次更换比)",
+    width: "6%",
+  },
+]);
+
+const tableData = reactive({
+  list: [
+    {
+      deviceName: "1#除尘器",
+      compart: "1234567890",
+      position: "转炉",
+      changeDateRemind: "xx",
+      changeDate: "xx",
+      changePeo: "xx",
+      ownerdeviceName: "xx",
+      lastAlarmTime: "xx",
+      changeRound: "xx",
+    },
+  ],
+});
+
+const selectDustNo = ref("");
+
+const dustList = reactive({
+  list: [],
+});
+
+const getHealthScoreColor = (score) => {
+  const value = parseInt(score);
+  if (value >= 90) return "#67C23A";
+  if (value >= 70) return "#E6A23C";
+  return "#F56C6C";
+};
+
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
+
+const handleView = (row) => {
+  console.log("查看详情", row);
+};
+
+const handleEdit = (row) => {
+  console.log("编辑", row);
+};
+
+const handlePaginationChange = (pagination) => {
+  currentPage.value = pagination.currentPage;
+  pageSize.value = pagination.pageSize;
+  console.log("分页变化", pagination);
+};
+
+const onSubmit = () => {
+  console.log("submit!", formInline.value);
+};
+
+const dustLineInfo = reactive({ list: [{}] });
+
+const openDialog = (deviceName) => {
+  changeDust(deviceName);
+  dustLineisShow.value = true;
+};
+
+const getDustList = () => {
+  return [
+    {
+      deviceName: "1#除尘器",
+      deviceNo: "11111",
+    },
+    {
+      deviceName: "2#除尘器",
+      deviceNo: "22222",
+    },
+    {
+      deviceName: "3#除尘器",
+      deviceNo: "333333",
+    },
+  ];
+};
+
+const getDustListInfo = () => {
+  return [
+    { time: "1", value: "20" },
+    { time: "2", value: "30" },
+    { time: "4", value: "40" },
+    { time: "8", value: "45" },
+    { time: "10", value: "15" },
+    { time: "周期", value: "20" },
+  ];
+};
+
+const changeDust = (deviceName) => {
+  dustList.list = getDustList();
+  if (deviceName) {
+    dustList.list.forEach((i) => {
+      if (i.deviceName == deviceName) {
+        selectDustNo.value = i.deviceNo;
+      }
+    });
+  } else {
+    selectDustNo.value = dustList.list[0].deviceNo || "";
+  }
+  let list = getDustListInfo();
+  dustLineInfo.list = list;
+};
+
+onMounted(async () => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.collectorList {
+  width: 100%;
+  height: calc(100% - 14px);
+  box-sizing: border-box;
+  :deep(.el-input--small) {
+    width: 100%;
+  }
+  .content-box {
+    margin-top: 24px;
+    .search {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .table-box {
+      width: 100%;
+      height: calc(100vh - 400px);
+    }
+  }
+
+  .default-btn {
+    width: 85px;
+  }
+  .search-btn {
+    width: 85px;
+    background: #2182a0;
+    border: 1px solid #2182a0;
+  }
+  .add-btn {
+    width: 85px;
+  }
+
+  .health-score {
+    color: #027ffc;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+  }
+
+  .status-matrix {
+    width: fit-content;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .matrix-row {
+      display: flex;
+      gap: 6px;
+      justify-content: flex-start;
+    }
+
+    .status-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+      }
+    }
+
+    .status-normal {
+      background-color: #67c23a; // 绿色
+    }
+
+    .status-warning {
+      background-color: #e6a23c; // 橙色
+    }
+
+    .status-error {
+      background-color: #f56c6c; // 红色
+    }
+  }
+
+  .view-btn {
+    margin-right: 8px;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+
+  .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;
+  }
+
+  :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;
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+
+  .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;
+
+      .cell-index {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 8px;
+      }
+
+      .cell-value {
+        :deep(.el-input-number) {
+          width: 100px;
+        }
+      }
+    }
+  }
+
+  .readonly-value {
+    font-size: 14px;
+    color: #606266;
+    line-height: 32px;
+    padding: 0 12px;
+  }
+
+  .distribution-warning {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+
+    &.warning-more {
+      color: #e6a23c;
+      background-color: #fdf6ec;
+    }
+
+    &.warning-less {
+      color: #f56c6c;
+      background-color: #fef0f0;
+    }
+  }
+
+  .dustListDialog {
+    .echartBox {
+      margin: 0 auto;
+      width: 950px;
+      height: 450px;
+      > div {
+        width: 950px;
+        height: 450px;
+      }
+    }
+  }
+}
+</style>

src/views/collectorList/components/chart-line.vue

+<template>
+  <div ref="chartDustRef" class="chart-line"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
+import * as echarts from "echarts";
+import { getDustLineOption } from "@/utils/chart";
+
+const props = defineProps({
+  // 表格数据
+  dustLineInfo: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+const chartDustRef = ref(null);
+let chartInstance = null;
+
+const initChart = () => {
+  if (chartDustRef.value) {
+    let xData = [];
+    let seriesData = [];
+    if (props.dustLineInfo) {
+      props.dustLineInfo.forEach((i) => {
+        xData.push(i.time);
+        seriesData.push(i.value);
+      });
+    }
+    chartInstance = echarts.init(chartDustRef.value);
+    const option = getDustLineOption(xData, seriesData);
+    nextTick(() => {
+      // DOM 更新完成后执行
+      chartInstance.setOption(option);
+    });
+  }
+};
+
+watch(
+  () => props.dustLineInfo,
+  () => {
+    initChart();
+    console.log("props.dustLineInfo", props.dustLineInfo);
+
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", () => {
+    chartInstance?.resize();
+  });
+});
+
+onBeforeUnmount(() => {
+  chartInstance?.dispose();
+});
+</script>
+
+<style lang="scss"  scoped>
+.chart-line {
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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 @click="navigateBackward">
+          <el-icon><ArrowLeftBold />向前</el-icon>
+        </el-button>
+        <el-button @click="navigateForward">
+          <el-icon><ArrowRightBold />向后</el-icon>
+        </el-button>
+        <span class="time-label">间隔</span>
+        <el-input v-model="timeInterval" class="time-input"></el-input>
+        <span class="time-unit">分钟</span>
+
+        <el-button @click="reset">重置</el-button>
+      </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">{{ 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 // 定时器引用
+
+// 时间导航相关
+let isRealTimeMode = true
+let lastTimePoint = 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)
+  
+  isRealTimeMode = true
+}
+
+// 停止实时更新
+const stopRealTimeUpdates = () => {
+  if (updateTimer) {
+    clearInterval(updateTimer)
+    updateTimer = null
+  }
+  
+  isRealTimeMode = false
+}
+
+// 向前导航（查看更早的数据）
+const navigateBackward = () => {
+  // 关闭实时更新
+  stopRealTimeUpdates()
+  // 获取时间间隔（分钟）
+  const interval = parseInt(timeInterval.value) || 10
+  const intervalMs = interval * 60 * 1000
+  
+  // 如果是第一次点击，以当前最后一条数据的时间为参考
+  if (lastTimePoint === null && chartData.xData.length > 0) {
+    const lastTimeString = chartData.xData[chartData.xData.length - 1]
+    const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
+    const now = new Date()
+    lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
+  } else if (lastTimePoint === null) {
+    // 如果没有数据，使用当前时间
+    lastTimePoint = new Date()
+  }
+  
+  // 计算新的时间范围
+  const endTime = new Date(lastTimePoint.getTime() - intervalMs)
+  lastTimePoint = endTime
+  
+  // 重新生成数据
+  generateHistoricalData(endTime, interval)
+}
+
+// 向后导航（查看更近的数据）
+const navigateForward = () => {
+  // 关闭实时更新
+  stopRealTimeUpdates()
+  
+  // 获取时间间隔（分钟）
+  const interval = parseInt(timeInterval.value) || 10
+  const intervalMs = interval * 60 * 1000
+  
+  // 如果是第一次点击，以当前最后一条数据的时间为参考
+  if (lastTimePoint === null && chartData.xData.length > 0) {
+    const lastTimeString = chartData.xData[chartData.xData.length - 1]
+    const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
+    const now = new Date()
+    lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
+  } else if (lastTimePoint === null) {
+    // 如果没有数据，使用当前时间
+    lastTimePoint = new Date()
+  }
+  
+  // 计算新的时间范围
+  const endTime = new Date(lastTimePoint.getTime() + intervalMs)
+  
+  // // 如果新的结束时间超过当前时间，则切换回实时模式
+  const now = new Date()
+  if (endTime > now) {
+    lastTimePoint = null
+    // startRealTimeUpdates()
+    return
+  }
+  
+  lastTimePoint = endTime
+  
+  // 重新生成数据
+  generateHistoricalData(endTime, interval)
+}
+
+const reset = () => {
+  // 清空现有数据
+  chartData.xData = []
+  chartData.seriesData = []
+  lastTimePoint = null
+  // 重新生成当前时间往前300秒的数据
+
+  const now = new Date()
+  generateHistoricalData(now, 5)
+  
+  // 开启实时更新
+  startRealTimeUpdate()
+}
+
+// 开启实时更新（重置用）
+const startRealTimeUpdate = () => {
+  // 确保之前的定时器已清除
+  stopRealTimeUpdates()
+  
+  // 初始化实时模式标志
+  isRealTimeMode = true
+  
+  // 启动定时更新
+  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 generateHistoricalData = (endTime, intervalMinutes) => {
+  // 清空现有数据
+  chartData.xData = []
+  chartData.seriesData = []
+  
+  // 计算开始时间（结束时间减去间隔）
+  const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000)
+  
+  // 生成数据点（每秒一个）
+  for (let time = new Date(startTime); time <= endTime; time = new Date(time.getTime() + 1000)) {
+    chartData.xData.push(formatTime(time))
+    chartData.seriesData.push(generateRandomValue())
+  }
+  
+  // 更新图表
+  updateChart()
+}
+
+// 更新数据面板
+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() % 1 === 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-bottom: 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/dustMonitoring/index.vue

+<template>
+  <div class="top-box">
+    <el-form
+      :model="form"
+      label-width="auto"
+      :inline="true"
+      class="demo-form-inline"
+    >
+      <el-form-item label="除尘器名称">
+        <el-select
+          v-model="form.dustName"
+          placeholder="请选择除尘器"
+          style="width: 240px"
+        >
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分析时间">
+        <el-date-picker
+          v-model="form.dateValue"
+          type="datetimerange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="YYYY-MM-DD HH:mm:ss"
+          date-format="YYYY/MM/DD ddd"
+          time-format="A hh:mm:ss"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+  <div class="layout1">
+    <div class="left-box">
+      <div class="part1">
+        <div class="chart-box" v-for="(item, index) in chartData" :key="item">
+          <div :id="'chart' + index" class="chart-item"></div>
+        </div>
+      </div>
+      <div class="warn-info"></div>
+    </div>
+    <div class="right-box">
+      <div class="part1"></div>
+      <div class="part2">
+        <div class="dust-title">2号窑尾除尘器</div>
+        <div class="dust-info">
+          <div class="info-item" v-for="item in dustInfo" :key="item.label">
+            <span class="lable">{{ item.label }}</span>
+            <span class="value">{{ item.value }}</span>
+            <span class="unit">{{ item.unit }}</span>
+          </div>
+        </div>
+        <div class="indicator-box">
+          <div class="indicator-item" id="indicatorOne"></div>
+          <div class="indicator-item" id="indicatorTwo"></div>
+        </div>
+        <div class="position-info">
+          <div class="left">
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+            <div class="part">
+              <div class="point warn" v-for="item in 6" :key="item"></div>
+            </div>
+          </div>
+        </div>
+        <div class="other-info">
+          <div>
+            <span>反吹仓室：</span>
+            <span>3#仓-1排</span>
+          </div>
+          <div>
+            <span>泄露仓室：</span>
+            <span>5#仓、10#仓、13#仓</span>
+          </div>
+          <div>
+            <span>故障仓室：</span>
+            <span>5#仓、10#仓、13#仓</span>
+          </div>
+        </div>
+      </div>
+      <div class="warn-info"></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import * as echarts from "echarts";
+const form = reactive({
+  dustName: "",
+  dateValue: [],
+});
+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 chartInstance = reactive([]);
+const chartData = reactive([{}, {}, {}]);
+const initChart = () => {
+  chartData.forEach((item, index) => {
+    if (chartInstance[index] && chartInstance[index].dispose) {
+      chartInstance[index].dispose();
+    }
+    chartInstance[index] = echarts.init(
+      document.getElementById("chart" + index)
+    );
+    chartInstance[index].setOption(option);
+  });
+};
+const dustInfo = reactive([
+  { label: "压差", value: "0.0", unit: "KPa" },
+  { label: "粉尘浓度", value: "0.0", unit: "mg/m3" },
+  { label: "电磁阀数量", value: "0.0", unit: "KPa" },
+  { label: "仓室数量", value: "0.0", unit: "KPa" },
+  { label: "布袋检测仪数量", value: "0.0", unit: "KPa" },
+  { label: "脉冲检测仪数量", value: "0.0", unit: "KPa" },
+]);
+const option2 = {
+  series: [
+    {
+      type: "gauge",
+      startAngle: 260,
+      endAngle: 300,
+      center: ["50%", "75%"],
+      radius: "90%",
+      min: 0,
+      max: 1,
+      splitNumber: 8,
+      axisLine: {
+        lineStyle: {
+          width: 3,
+          color: [
+            [0.25, "#FF6E76"],
+            [0.8, "#67c23a"],
+            [1, "#FF6E76"],
+          ],
+        },
+      },
+      pointer: {
+        icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+        length: "12%",
+        width: 20,
+        offsetCenter: [0, "-60%"],
+        itemStyle: {
+          color: "auto",
+        },
+      },
+      axisTick: {
+        length: 0,
+        lineStyle: {
+          color: "auto",
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 0,
+        lineStyle: {
+          color: "auto",
+          width: 5,
+        },
+      },
+      axisLabel: {
+        color: "#464646",
+        fontSize: 20,
+        distance: -60,
+        rotate: "tangential",
+        show: false,
+      },
+      title: {
+        offsetCenter: [0, "50%"],
+        fontSize: 12,
+      },
+      detail: {
+        fontSize: 20,
+        offsetCenter: [0, 0],
+        valueAnimation: true,
+        formatter: function (value) {
+          return Math.round(value * 100) + "";
+        },
+        color: "inherit",
+      },
+      data: [
+        {
+          value: 0.7,
+          name: "压差",
+        },
+      ],
+    },
+  ],
+};
+const indicatorOneInstance = ref();
+const indicatorTwoInstance = ref();
+const indicatorFun = (target, domId, option) => {
+  if (target.value && target.dispose) {
+    target.value.dispose();
+  }
+  target.value = echarts.init(document.getElementById(domId));
+  target.value.setOption(option);
+};
+
+onMounted(() => {
+  initChart();
+  indicatorFun(indicatorOneInstance, "indicatorOne", option2);
+  indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
+});
+</script>
+<style lang="scss" scoped>
+$borderColor: #bbbdc3;
+.top-box {
+}
+.left-box {
+  width: 45%;
+  .part1 {
+    border-radius: 15px;
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    height: 70vh;
+    .chart-box {
+      width: 100%;
+      height: 31%;
+      .chart-item {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.right-box {
+  width: 45%;
+  .part1 {
+    width: 100%;
+    height: 10vh;
+    border-radius: 15px;
+    background-color: #fff;
+  }
+  .part2 {
+    margin-top: 20px;
+    width: 100%;
+    height: calc(60vh - 20px);
+    border-radius: 15px;
+    background-color: #fff;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 20px 0;
+    box-sizing: border-box;
+    .dust-title {
+      text-align: center;
+      font-size: 20px;
+      font-weight: 600;
+      padding-bottom: 20px;
+      border-bottom: 1px solid $borderColor;
+    }
+    .dust-info {
+      padding: 20px 20px;
+      border-bottom: 1px solid $borderColor;
+    }
+    .info-item {
+      padding: 3px 0;
+      span {
+        display: inline-block;
+      }
+      .lable {
+        width: 40%;
+      }
+      .value {
+        width: 50%;
+      }
+      .unit {
+        width: 10%;
+      }
+    }
+    .indicator-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .indicator-item {
+        width: 50%;
+        height: 200px;
+      }
+    }
+    .position-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 40px 20px 20px 20px;
+      .left,
+      .right {
+        padding: 5px;
+        width: 48%;
+        flex-wrap: wrap;
+        // box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
+        box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px 0px;
+        // box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
+      }
+      .part {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+      .point {
+        width: 20px;
+        margin: 1% 3%;
+        border-radius: 50%;
+        display: inline-block;
+        cursor: pointer;
+      }
+      .point::after {
+        content: "";
+        display: block;
+        padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
+      }
+      .warn {
+        background-color: rgb(217, 10, 10);
+      }
+      .health {
+        background-color: #67c23a;
+      }
+    }
+    .other-info {
+      padding: 20px;
+      border-top: 1px solid $borderColor;
+    }
+  }
+}
+.warn-info {
+  margin-top: 10px;
+  height: 15vh;
+  border-radius: 15px;
+  background-color: #fff;
+}
+.layout1 {
+  display: flex;
+  justify-content: space-between;
+}
+.layout2 {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+</style>

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

src/views/equipmentManagement/index.vue

 <template>
   <div class="equipment-management">
-    <div class="search-box">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="工序：">
-          <el-select
-            v-model="formInline.region"
-            placeholder="请选择工序"
-            clearable
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="除尘器名称：">
-          <el-input
-            v-model="formInline.user"
-            placeholder="请选择除尘器名称"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="设备名称：">
-          <el-input
-            v-model="formInline.user"
-            placeholder="请输入设备名称"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="设备类型：">
-          <el-select
-            v-model="formInline.region"
-            placeholder="请选择设备类型"
-            clearable
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit">搜索</el-button>
-          <el-button type="primary" @click="onSubmit">重置</el-button>
-          <el-button type="primary" @click="onSubmit">导出</el-button>
-          <el-button type="primary" @click="onSubmit">导入</el-button>
-          <el-button type="primary" @click="onSubmit">模板下载</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="table-box">
-      <el-table :data="tableData" style="width: 100%" border >
-        <el-table-column prop="date" label="Date" width="180" align="center"/>
-        <el-table-column prop="name" label="Name" width="180" align="center"/>
-        <el-table-column prop="address" label="Address" align="center"/>
-        <el-table-column label="操作" align="center">
-          <template #default>
-            <el-button link type="primary" size="small" @click="setParams">参数设置</el-button>
+    <div class="content-box">
+      <div class="search">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="工序">
+            <el-select
+              v-model="formInline.region"
+              placeholder="请选择工序"
+              style="width: 120px"
+              clearable
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="除尘器名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 240px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="设备名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 240px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="设备类型">
+            <el-select
+              v-model="formInline.region"
+              placeholder="请选择工序"
+              style="width: 120px"
+              clearable
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="default" class="default-btn" @click="onSubmit"
+              >重置</el-button
+            >
+            <el-button type="primary" class="search-btn" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >导入</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >导出</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >模板下载</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-box">
+        <common-table
+          :data="tableData"
+          :columns="tableColumns"
+          :default-page-size="10"
+          @pagination-change="handlePaginationChange"
+          :pagination-texts="{
+            total: '共',
+            sizeChange: '条/页',
+            prev: '前一页',
+            next: '后一页',
+            jumper: '跳至',
+          }"
+        >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
+
+          <template #operation="{ row }">
+            <el-button type="primary" link @click="setParams(row)">
+              参数设置
+            </el-button>
           </template>
-        </el-table-column>
-      </el-table>
+        </common-table>
+      </div>
     </div>
-    <div class="page-box"></div>
-    <setParamsDialog v-model:dialogVisible="dialogVisible" @close="closeDialog"></setParamsDialog>
+    <setParamsDialog
+      v-model:dialogVisible="dialogVisible"
+      @close="closeDialog"
+    ></setParamsDialog>
   </div>
 </template>
 <script setup>
 import { ref, reactive } from "vue";
 import setParamsDialog from "./components/paramsSetings.vue";
-import '@/css/elementUiSelf.css'
+import CommonTable from "@/components/commonTable/index.vue";
+import "@/css/elementUiSelf.css";
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
 
 const formInline = reactive({
   user: "",
@@ -97,13 +144,65 @@ const tableData = [
     address: "No. 189, Grove St, Los Angeles",
   },
 ];
+const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
+  {
+    prop: "deviceName",
+    label: "除尘器名称",
+    width: "15%",
+  },
+  {
+    prop: "deviceName",
+    label: "除尘器编号",
+    width: "15%",
+  },
+  {
+    prop: "process",
+    label: "所属工序",
+    width: "5%",
+  },
+  {
+    prop: "healthScore",
+    label: "设备名称",
+    width: "5%",
+  },
+  {
+    prop: "health2Score",
+    label: "设备类型",
+    width: "5%",
+  },
+  {
+    prop: "status",
+    label: "信号名称",
+    width: "25%",
+  },
+  {
+    prop: "alarmCount",
+    label: "信号编码",
+    width: "5%",
+  },
+  {
+    prop: "lastAlarmTime",
+    label: "安装位置",
+    width: "10%",
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    width: "10%",
+  },
+]);
 const dialogVisible = ref(false);
 const setParams = () => {
   dialogVisible.value = true;
-}
+};
 const closeDialog = (val) => {
   dialogVisible.value = val;
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -111,9 +210,19 @@ const closeDialog = (val) => {
   background: #fff;
   height: 100vh;
   overflow: hidden;
-    padding: 20px;
-
-  .search-box {
+  padding: 20px;
+  .content-box {
+    margin-top: 24px;
+    .search {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .table-box {
+      width: 100%;
+      height: calc(100vh - 400px);
+    }
   }
 }
 </style>