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

Feat/layout style

See merge request !18

src/request/api/bagMonitor.js

+import request from "../index.js";
+export function getMonitorRealtime(params) {
+  return request({
+    url: "/api/duster/monitor/chamber",
+    method: "get",
+    params,
+  });
+}
+
+export function getMonitorToday(params) {
+  return request({
+    url: "/api/duster/monitor/curve",
+    method: "get",
+    params,
+  });
+}
+
+export function getMonitorList(params) {
+  return request({
+    url: "/api/duster/monitor/list",
+    method: "get",
+    params,
+  });
+}

src/utils/chart.js

@@ -132,6 +132,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
     top: "3%",
     containLabel: true,
   },
+  // x轴的文字去除年月日
   xAxis: {
     type: "category",
     boundaryGap: false,
@@ -145,6 +146,9 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
       fontSize: 12,
       interval: "auto",
       rotate: 0,
+      formatter: function (value) {
+        return value.split(' ')[1];
+      }
     },
     axisTick: {
       show: false,
@@ -154,7 +158,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
   yAxis: {
     type: "value",
     min: 0,
-    max: 600,
+    // max: 600,
     interval: 200,
     axisLabel: {
       color: "rgba(0,0,0,0.6)",

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

@@ -46,6 +46,7 @@
                   <span class="label">描述：</span>
                   <div class="value">
                     <span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span>
+                   <span class="value-item" v-if="spot.description.length === 0">暂无</span>
                   </div>
                  
                 </div>

src/views/dustMonitoring/bag-monitoring.vue

@@ -2,57 +2,71 @@
   <div class="page-container bag-monitoring-container">
     <div class="header">
       <div class="select-container">
-        <span>检测仪器11</span>
+        <span>检测仪器</span>
         <el-select v-model="selectedDevice" placeholder="1#布袋检测仪">
-          <el-option label="1#布袋检测仪" value="1"></el-option>
+          <el-option
+            v-for="item in deviceList"
+            :key="item.deviceNo"
+            :label="item.deviceName"
+            :value="item.deviceNo"
+          ></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 class="chart-wrapper no-data" v-if="chartData.xData.length === 0">
+        <div class="no-data-text">暂无数据</div>
+      </div>
+    </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.compartNo }}</div>
+          <div>反吹: {{ currentData.blowBack }}</div>
         </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 class="data-item">
             <div>DI3: {{ currentData.di3 }}</div>
             <div>排: {{ currentData.row }}</div>
-            <div>实时值: {{ currentData.realValue }}</div>
+            <div>实时值: {{ currentData.realData }}</div>
           </div>
           <div class="data-item">
             <div>基线值: {{ currentData.baseline }}</div>
             <div>Delay: {{ currentData.delay }}</div>
-            <div>totaltime: {{ currentData.totaltime }}</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>next:{{ currentData.next }}</div>
+            <div>valve:{{ currentData.valveNo }}</div>
+            <div>DI_TIME={{ currentData.diTime }}</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 class="data-box second-box">
+          <div>时间:{{ secondaryData.time }}, 仓室: {{ secondaryData.chamber }}, 反吹: {{ secondaryData.backwash }}, 谷值: {{ secondaryData.valleyValue }}, 仓室状态阀门{{ secondaryData.status }}False{{ secondaryData.falseVal }}</div>
+        </div> -->
     </div>
-    
-    <div class="data-table">
 
+    <div class="data-table">
       <div class="time-controls">
         <el-button @click="navigateBackward">
           <el-icon><ArrowLeftBold />向前</el-icon>
@@ -71,363 +85,451 @@
         <thead>
           <tr>
             <th>名称</th>
-            <th v-for="i in 20" :key="i">{{ i }}仓</th>
+            <th v-for="(value, index) in tableData" :key="index">
+              {{ value.compartName }}
+            </th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>峰值_R</td>
-            <td v-for="(value, index) in peakValuesR" :key="'r'+index">{{ value }}</td>
+            <td v-for="(value, index) in tableData" :key="'r' + index">
+              {{ value.peakValueR || "-" }}
+            </td>
           </tr>
           <tr>
             <td>峰值_H</td>
-            <td v-for="(value, index) in peakValuesH" :key="'h'+index">{{ value }}</td>
+            <td v-for="(value, index) in tableData" :key="'h' + index">
+              {{ value.peakValueH || "-" }}
+            </td>
           </tr>
           <tr>
             <td>状态</td>
-            <td v-for="(value, index) in statusValues" :key="'s'+index" :class="{ 'error': value === '故障' }">{{ value }}</td>
+            <td
+              v-for="(value, index) in tableData"
+              :key="'s' + index"
+              :class="{ error: value.status === 1 }"
+            >
+              {{ value.status === 1 ? "故障" : "正常" }}
+            </td>
           </tr>
           <tr>
             <td>反吹中</td>
-            <td v-for="(value, index) in backwashValues" :key="'b'+index">{{ value }}</td>
+            <td v-for="(value, index) in tableData" :key="'b' + index">
+              {{ value.blowBack || "-" }}
+            </td>
           </tr>
           <tr>
             <td>谷值</td>
-            <td v-for="(value, index) in valleyValues" :key="'v'+index">{{ value }}</td>
+            <td v-for="(value, index) in tableData" :key="'v' + index">
+              {{ value.valleyValue || "-" }}
+            </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'
+import { ref, reactive, onMounted, onBeforeUnmount, watch } from "vue";
+import * as echarts from "echarts";
+import moment from "moment";
+import { ArrowRightBold, ArrowLeftBold } from "@element-plus/icons-vue";
+import { getBagMonitoringChartOption } from "@/utils/chart.js";
+import {
+  getMonitorToday,
+  getMonitorList,
+  getMonitorRealtime,
+} from "@/request/api/bagMonitor";
+import { useRoute } from "vue-router";
+
+// 获取路由参数
+const route = useRoute();
 
 // 设备选择
-const selectedDevice = ref('1')
+const selectedDevice = ref(null);
 
-const isPanelOpen = ref(true)
+const isPanelOpen = ref(true);
 
 // 图表相关
-const chartRef = ref(null)
-let chartInstance = null
-let updateTimer = null // 定时器引用
+const chartRef = ref(null);
+let chartInstance = null;
+let updateTimer = null; // 定时器引用
+
+let lastTimePoint = null;
+// 控制是否获取实时设备状态数据
+let showRealtimeDeviceStatus = true;
 
-// 时间导航相关
-let isRealTimeMode = true
-let lastTimePoint = null
+// 从路由参数获取dusterNo
+const dusterNo = ref(
+  route.params.dusterNo || route.query.dusterNo || "ZH-ZL-1GL-001"
+); // 默认值作为fallback
 
 // 图表数据
 const chartData = reactive({
   xData: [],
-  seriesData: []
-})
+  seriesData: [],
+});
+const deviceList = ref([]);
+const currentTime = ref(null);
 
 // 当前数据面板
-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 currentData = ref({
+  realtime: "",
+  time: "",
+  compartNo: "",
+  blowBack: "",
+  di3: "",
+  row: "",
+  realData: "",
+  baseline: "",
+  delay: "",
+  totalTime: "",
+  next: "",
+  valveNo: "",
+  diTime: "",
+  peak: "",
+});
 
 // 表格数据
-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 tableData = ref([
+  {
+    compartName: "默认",
+    peakValueR: 0,
+    peakValueH: 0,
+    status: 0,
+    blowBack: 0,
+    valleyValue: 0,
+  },
+]);
 
 // 时间控制
-const timeInterval = ref('10')
+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}`
-}
+  isPanelOpen.value = !isPanelOpen.value;
+};
 
 // 初始化图表
 const initChart = () => {
   if (chartInstance) {
-    chartInstance.dispose()
+    chartInstance.dispose();
   }
-  
+
   // 初始化图表数据
-  initChartData()
-  
-  chartInstance = echarts.init(chartRef.value)
-  // updateChart()
-  
-  // 启动定时更新
-  startRealTimeUpdates()
-}
+  initChartData();
+};
 
 // 初始化图表数据
 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())
+  if (!dusterNo.value || !selectedDevice.value) {
+    console.warn("缺少dusterNo或deviceNo，无法获取数据");
+    return;
   }
-}
 
-// 生成一个介于 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 startTime = moment()
+    .subtract(5, "minutes")
+    .format("YYYY-MM-DD HH:mm:ss");
+  const endTime = moment().format("YYYY-MM-DD HH:mm:ss");
+  chartData.xData = [];
+  chartData.seriesData = [];
+  getMonitorToday({
+    dusterNo: dusterNo.value,
+    deviceNo: selectedDevice.value,
+    startTime: startTime,
+    endTime: endTime,
+  })
+    .then((res) => {
+      // 将data中的date和realData数据添加到chartData中，要求大数据量下速度快
+      if (res.data && res.data.length > 0) {
+        res.data.forEach((item) => {
+          chartData.xData.push(item.date);
+          chartData.seriesData.push(item.realData);
+        });
+        // 当前时间
+        currentTime.value = res.data[res.data.length - 1].date;
+        chartInstance = echarts.init(chartRef.value);
+        // 启动定时更新
+        startRealTimeUpdates();
+      } else {
+        console.warn("未获取到初始数据");
+      }
+    })
+    .catch((err) => {
+      console.error("获取初始数据失败:", err);
+    });
+};
 
 // 更新图表
 const updateChart = () => {
   if (chartInstance) {
-    chartInstance.setOption(getBagMonitoringChartOption(chartData.xData, chartData.seriesData))
+    chartInstance.setOption(
+      getBagMonitoringChartOption(chartData.xData, chartData.seriesData)
+    );
   }
-}
+};
 
 // 启动实时更新
 const startRealTimeUpdates = () => {
   if (updateTimer) {
-    clearInterval(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()
+    updateFunction();
+  }, 1000);
+
+  showRealtimeDeviceStatus = true;
+};
+
+// 更新函数
+const updateFunction = () => {
+  if (!dusterNo.value || !selectedDevice.value) return;
+
+  // 从API获取实时数据
+  if (showRealtimeDeviceStatus) {
+    getMonitorRealtime({
+      dusterNo: dusterNo.value,
+      deviceNo: selectedDevice.value,
+    })
+      .then((res) => {
+        if (res.data) {
+          // 更新数据面板
+          if (res.data.realtimeCompart) {
+            tableData.value = res.data.realtimeCompart;
+          }
+          if (res.data.realtimePanel) {
+            currentData.value = res.data.realtimePanel;
+          }
+        }
+      })
+      .catch((err) => {
+        console.error("获取实时数据失败:", err);
+      });
+  }
+
+  // 结束时间往后推一秒
+  let endTime = moment(new Date(currentTime.value))
+    .add(1, "seconds")
+    .format("YYYY-MM-DD HH:mm:ss");
+  getMonitorToday({
+    dusterNo: dusterNo.value,
+    deviceNo: selectedDevice.value,
+    startTime: currentTime.value,
+    endTime: endTime,
+  }).then((res) => {
+    if (res.data && res.data.length > 0) {
+      const item = res.data[res.data.length - 1];
+      chartData.xData.push(item.date);
+      chartData.seriesData.push(item.realData || 0);
+
+      // 移除最旧的数据点以保持固定长度
+      if (chartData.xData.length > 301) {
+        // 保持300秒的数据
+        chartData.xData.shift();
+        chartData.seriesData.shift();
+      }
+      currentTime.value = endTime;
+      // 更新图表
+      updateChart();
     }
-    
-    // 更新图表
-    updateChart()
-    updateDataPanels()
-  }, 1000)
-  
-  isRealTimeMode = true
-}
+  });
+};
 
 // 停止实时更新
 const stopRealTimeUpdates = () => {
   if (updateTimer) {
-    clearInterval(updateTimer)
-    updateTimer = null
+    clearInterval(updateTimer);
+    updateTimer = null;
   }
-  
-  isRealTimeMode = false
-}
+
+  showRealtimeDeviceStatus = false;
+};
 
 // 向前导航（查看更早的数据）
 const navigateBackward = () => {
-  // 关闭实时更新
-  stopRealTimeUpdates()
+  // 不完全关闭轮询，只禁用实时设备状态获取
+  showRealtimeDeviceStatus = false;
+
   // 获取时间间隔（分钟）
-  const interval = parseInt(timeInterval.value) || 10
-  const intervalMs = interval * 60 * 1000
-  
+  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)
+    const lastTimeString = chartData.xData[chartData.xData.length - 1];
+    lastTimePoint = new Date(lastTimeString);
   } else if (lastTimePoint === null) {
     // 如果没有数据，使用当前时间
-    lastTimePoint = new Date()
+    lastTimePoint = new Date();
   }
-  
+
   // 计算新的时间范围
-  const endTime = new Date(lastTimePoint.getTime() - intervalMs)
-  lastTimePoint = endTime
-  
+  const endTime = new Date(lastTimePoint.getTime() - intervalMs);
+  lastTimePoint = endTime;
+
   // 重新生成数据
-  generateHistoricalData(endTime, interval)
-}
+  generateHistoricalData(endTime, interval);
+};
 
 // 向后导航（查看更近的数据）
 const navigateForward = () => {
-  // 关闭实时更新
-  stopRealTimeUpdates()
-  
+  // 不完全关闭轮询，只禁用实时设备状态获取
+  showRealtimeDeviceStatus = false;
+
   // 获取时间间隔（分钟）
-  const interval = parseInt(timeInterval.value) || 10
-  const intervalMs = interval * 60 * 1000
-  
+  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)
+    const lastTimeString = chartData.xData[chartData.xData.length - 1];
+    lastTimePoint = new Date(lastTimeString);
   } else if (lastTimePoint === null) {
     // 如果没有数据，使用当前时间
-    lastTimePoint = new Date()
+    lastTimePoint = new Date();
   }
-  
+
   // 计算新的时间范围
-  const endTime = new Date(lastTimePoint.getTime() + intervalMs)
-  
-  // // 如果新的结束时间超过当前时间，则切换回实时模式
-  const now = new Date()
+  const endTime = new Date(lastTimePoint.getTime() + intervalMs);
+
+  // 如果新的结束时间超过当前时间，则切换回实时模式
+  const now = moment();
   if (endTime > now) {
-    lastTimePoint = null
-    // startRealTimeUpdates()
-    return
+    lastTimePoint = null;
+    showRealtimeDeviceStatus = true;
+    return;
   }
-  
-  lastTimePoint = endTime
-  
+
+  lastTimePoint = endTime;
+
   // 重新生成数据
-  generateHistoricalData(endTime, interval)
-}
+  generateHistoricalData(endTime, interval);
+};
 
 const reset = () => {
   // 清空现有数据
-  chartData.xData = []
-  chartData.seriesData = []
-  lastTimePoint = null
+  chartData.xData = [];
+  chartData.seriesData = [];
+  lastTimePoint = null;
+  // 恢复实时设备状态获取
+  showRealtimeDeviceStatus = true;
   // 重新生成当前时间往前300秒的数据
 
-  const now = new Date()
-  generateHistoricalData(now, 5)
-  
+  const now = new Date();
+
+  generateHistoricalData(now, 5);
+
   // 开启实时更新
-  startRealTimeUpdate()
-}
+  startRealTimeUpdate();
+};
 
 // 开启实时更新（重置用）
 const startRealTimeUpdate = () => {
   // 确保之前的定时器已清除
-  stopRealTimeUpdates()
-  
-  // 初始化实时模式标志
-  isRealTimeMode = true
-  
+  stopRealTimeUpdates();
   // 启动定时更新
   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)
-}
+    updateFunction();
+  }, 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()
-}
+  if (!dusterNo.value || !selectedDevice.value) return;
 
-// 更新数据面板
-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()
-  }
-}
+  // 清空现有数据
+  chartData.xData = [];
+  chartData.seriesData = [];
+  const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000);
+  const startTimeStr = moment(startTime).format("YYYY-MM-DD HH:mm:ss");
+  const endTimeStr = moment(endTime).format("YYYY-MM-DD HH:mm:ss");
+
+  // 从API获取历史数据
+  getMonitorToday({
+    dusterNo: dusterNo.value,
+    deviceNo: selectedDevice.value,
+    startTime: startTimeStr,
+    endTime: endTimeStr,
+  })
+    .then((res) => {
+      if (res.data && res.data.length > 0) {
+        res.data.forEach((item) => {
+          chartData.xData.push(item.date);
+          chartData.seriesData.push(item.realData);
+        });
+        // 更新图表
+        updateChart();
+      }
+    })
+    .catch((err) => {
+      console.error("获取历史数据失败:", err);
+    });
+};
 
 // 监听窗口大小变化，调整图表大小
 const handleResize = () => {
   if (chartInstance) {
-    chartInstance.resize()
+    chartInstance.resize();
   }
-}
+};
+
+const getDeviceList = () => {
+  if (!dusterNo.value) return;
+
+  getMonitorList({
+    dusterNo: dusterNo.value,
+  }).then((res) => {
+    deviceList.value = res.data.devices || [];
+    if (deviceList.value.length > 0) {
+      selectedDevice.value = deviceList.value[0].deviceNo;
+      tableData.value = Array.from(
+        { length: res.data.compartCount },
+        (item, index) => ({
+          compartName: `${index + 1}仓`,
+          peakValueR: 0,
+          peakValueH: 0,
+          status: 0,
+          blowBack: 0,
+        })
+      );
+    }
+    initChart();
+  });
+};
+
+// 监听dusterNo变化
+watch(dusterNo, (newVal) => {
+  if (newVal) {
+    // 重新获取设备列表
+    getDeviceList();
+  }
+});
 
 onMounted(() => {
-  initChart()
-  window.addEventListener('resize', handleResize)
-})
+  console.log("dusterNo", route);
+  if (dusterNo.value) {
+    getDeviceList();
+  }
+
+  window.addEventListener("resize", handleResize);
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
+  window.removeEventListener("resize", handleResize);
   // 清除定时器
   if (updateTimer) {
-    clearInterval(updateTimer)
-    updateTimer = null
+    clearInterval(updateTimer);
+    updateTimer = null;
   }
   // 销毁图表实例
   if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
+    chartInstance.dispose();
+    chartInstance = null;
   }
-})
+});
 </script>
 
 <style scoped lang="scss">
@@ -435,15 +537,16 @@ onBeforeUnmount(() => {
   width: 100%;
   height: calc(100% - 14px);
   box-sizing: border-box;
-  overflow-x: hidden;
-  
+  // overflow-x: hidden;
+  position: relative;
+
   .header {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 10px;
-    
+    margin-bottom: 16px;
+
     .select-container {
       position: absolute;
       left: 0;
@@ -452,28 +555,28 @@ onBeforeUnmount(() => {
       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;
+        border-radius: 6px;
       }
     }
-    
+
     .title {
       font-size: 18px;
       font-weight: bold;
-      color: #409EFF;
+      color: #409eff;
     }
   }
-  
+
   .chart-container {
     width: 100%;
     height: calc(100% - 350px);
@@ -481,106 +584,127 @@ onBeforeUnmount(() => {
     border-radius: 4px;
     display: flex;
     flex-direction: column;
-    
+    position: relative;
+
     .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;
+      .no-data-text {
+        width: 100%;
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
-        cursor: pointer;
+        font-size: 14px;
+        color: #999;
+        background-color: #f5f7fa;
         border-radius: 4px;
       }
+    }
+    .no-data {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+    }
+  }
 
-      .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;
-          }
+  .data-panel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 320px;
+    z-index: 100;
+    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;
-      }
+    }
+
+    .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;
+
+      th,
+      td {
+        border: 1px solid #ebeef5;
         text-align: center;
         padding: 8px;
         font-size: 14px;
       }
-      
+
       th {
-        background-color: #F5F7FA;
+        background-color: #f5f7fa;
         color: #606266;
       }
-      
+
       .error {
-        color: #F56C6C;
+        color: #f56c6c;
       }
-      
+
       .highlight {
-        background-color: #FCF8E3;
+        background-color: #fcf8e3;
         position: relative;
-        
+
         &::after {
           content: "";
           position: absolute;
           width: 16px;
           height: 16px;
-          background-color: #E6A23C;
+          background-color: #e6a23c;
           border-radius: 50%;
           top: 50%;
           left: 50%;
@@ -589,17 +713,18 @@ onBeforeUnmount(() => {
         }
       }
     }
-    
+
     .time-controls {
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      
-      .time-label, .time-unit {
+
+      .time-label,
+      .time-unit {
         margin: 0 5px;
       }
-      
+
       .time-input {
         width: 60px;
       }
@@ -607,4 +732,3 @@ onBeforeUnmount(() => {
   }
 }
 </style>
-  
\ No newline at end of file

src/views/dustMonitoring/components/healthyProgress.vue

@@ -9,7 +9,7 @@
         class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern diagonal-pattern-animation"
       ></div>
       <div class="justify-between items-center mb-2 healthy-text-position">
-        <span class="font-semibold">健康度</span>
+        <span class="font-semibold">健康度:</span>
         <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
       </div>
     </div>

src/views/dustMonitoring/components/warn.vue

 <template>
   <div class="title layout1">
-    <span class="warn-title">{{ title }}：</span>
-    <span class="jump-icon">>></span>
+    <span class="warn-title">告警：</span>
+    <!-- <span class="jump-icon">>></span> -->
   </div>
   <div class="content">
     <div class="item" v-for="item in listInfo" :key="item">
@@ -45,12 +45,15 @@ const props = defineProps({
         width: 100%;
         display: flex;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         padding: 4px 0px 4px 2px;
-        box-shadow: rgba(53,58,62,0.08) 0px 1px 10px 0px,rgba(53,58,62,0.08) 0px 2px 4px 0px;
+        box-shadow: rgba(53,58,62,0.04) 0px 1px 10px 0px,rgba(53,58,62,0.04) 0px 2px 4px 0px;
+        font-size: 14px;
+        color: #333;
         img {
           width: 20px;
           height: auto;
+          margin-right: 10px;
         }
     }
 }

src/views/dustMonitoring/index.vue

@@ -75,6 +75,7 @@
                   :class="item.healthStatus == 1 ? 'health' : 'warn'"
                   v-for="item in detailObj.compartHealthList[0]"
                   :key="item"
+                  @click="handleStatusDotClick()"
                 ></div>
               </div>
               <div class="part">
@@ -119,6 +120,7 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
+import { useRouter } from "vue-router";
 import * as echarts from "echarts";
 import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
@@ -150,6 +152,7 @@ const option = {
     },
   ],
 };
+const router = useRouter();
 const chartInstance = reactive({});
 const chartData = reactive([{}, {}, {}]);
 const initChart = (instance, option, domEl) => {
@@ -548,6 +551,14 @@ const dusterName = computed(() => {
   return dusterList.value.find((item) => item.dusterNo == form.dusterNo)
     ?.dusterName;
 });
+const handleStatusDotClick = () => {
+  router.push({
+    path: "/bag-monitor",
+    query: {
+      dusterNo: form.dusterNo,
+    }
+  });
+};
 </script>
 <style lang="scss" scoped>
 $borderColor: #bbbdc391;
@@ -592,7 +603,7 @@ $borderColor: #bbbdc391;
 
   .part1 {
     width: 100%;
-    height: 6vh;
+    height: 5vh;
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
@@ -607,7 +618,7 @@ $borderColor: #bbbdc391;
   .part2 {
     margin-top: 10px;
     width: 100%;
-    height: calc(57vh - 10px);
+    height: calc(58vh - 10px);
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);

src/views/dustOverview/components/valveSettingDialog.vue

@@ -345,7 +345,7 @@ const handleConfirm = () => {
   }
 
   .valve-cell {
-    width: 41px;
+    min-width: 41px;
     background: white;
     padding: 4px 8px;
     border-radius: 4px;
@@ -368,7 +368,7 @@ const handleConfirm = () => {
     .cell-value {
       display: flex;
       justify-content: center;
-      align-items: end;
+      align-items: baseline;
       font-size: 16px;
       color: #606266;
       span {

src/views/dustOverview/index.vue

@@ -102,14 +102,15 @@
           <template #compartHealthList="{ row }">
             <div class="status-matrix" v-if="row.compartHealthList.length > 0">
               <div
-                v-for="(row, rowIndex) in row.compartHealthList"
+                v-for="(childRow, rowIndex) in row.compartHealthList"
                 :key="rowIndex"
                 class="matrix-row"
               >
                 <div
-                  v-for="(status, colIndex) in row"
+                  v-for="(status, colIndex) in childRow"
                   :key="colIndex"
                   class="status-dot"
+                  @click="handleStatusDotClick(row, colIndex)"
                   :class="{
                     'status-normal': status.healthStatus === 1,
                     'status-warning': status.healthStatus === 2,
@@ -175,6 +176,7 @@ import {
   postAddCompartAllocation,
   postAddValveInfo,
 } from "@/request/api/dustOverview";
+import { useRouter } from "vue-router";
 import { getToken } from "@/utils/auth";
 import CommonTable from "@/components/commonTable/index.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
@@ -182,6 +184,8 @@ import RoomSettingDialog from "./components/roomSettingDialog.vue";
 import ValveSettingDialog from "./components/valveSettingDialog.vue";
 import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
 
+const router = useRouter();
+
 const formInline = ref({
   deviceName: "",
   region: "all",
@@ -357,6 +361,15 @@ const handleValveNumClick = (row) => {
   }
 };
 
+const handleStatusDotClick = (row, colIndex) => {
+  router.push({
+    path: "/bag-monitor",
+    query: {
+      dusterNo: row.deviceNo,
+    }
+  });
+};
+
 // 确认电磁阀设置
 const handleValveSettingConfirm = (updatedStatusData) => {
   const list = updatedStatusData.map((item) => {