feat(*): 优化布袋切换问题及除尘器名称展示

src/views/dustMonitoring/bag-monitoring.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <div class="select-container">
         <span>检测仪器</span>
-        <el-select v-model="selectedDevice" placeholder="1#布袋检测仪">
+        <el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange">
           <el-option
             v-for="item in deviceList"
             :key="item.deviceNo"
@@ -12,7 +12,7 @@
           ></el-option>
         </el-select>
       </div>
-      <div class="title">BME布袋监测</div>
+      <div class="title">BME布袋监测 - {{ dusterName }}</div>
     </div>
 
     <div class="chart-container">
@@ -175,8 +175,11 @@ let showRealtimeDeviceStatus = true;
 
 // 从路由参数获取dusterNo
 const dusterNo = ref(
-  route.params.dusterNo || route.query.dusterNo || "ZH-ZL-1GL-001"
+  route.params.dusterNo || route.query.dusterNo || ""
 ); // 默认值作为fallback
+const dusterName = ref(
+  route.params.dusterName || route.query.dusterName || ""
+);
 
 // 图表数据
 const chartData = reactive({
@@ -223,6 +226,11 @@ const togglePanel = () => {
   isPanelOpen.value = !isPanelOpen.value;
 };
 
+const handleDeviceChange = (value) => {
+  console.log("value", value);
+  initChart();
+};
+
 // 初始化图表
 const initChart = () => {
   if (chartInstance) {
@@ -733,6 +741,18 @@ onBeforeUnmount(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      
+      .el-button {
+        background-color: #2182a0;
+        border-color: #2182a0;
+        color: #fff;
+        
+        &:hover {
+          background-color: #1a6980;
+          border-color: #1a6980;
+        }
+      }
+
       .time-desc {
         font-size: 14px;
         color: #606266;
@@ -749,9 +769,10 @@ onBeforeUnmount(() => {
       }
       .time-label,
       .time-unit {
+        font-size: 14px;
         margin: 0 5px;
+        margin-right: 10px;
       }
-
       .time-input {
         width: 60px;
       }

src/views/dustMonitoring/index.vue

@@ -542,6 +542,8 @@ const handleStatusDotClick = () => {
     path: "/bag-monitor",
     query: {
       dusterNo: form.dusterNo,
+      dusterName: dusterName.value,
+
     }
   });
 };

src/views/dustOverview/index.vue

@@ -363,6 +363,7 @@ const handleStatusDotClick = (row, colIndex) => {
     path: "/bag-monitor",
     query: {
       dusterNo: row.deviceNo,
+      dusterName: row.deviceName,
     }
   });
 };