feat(*): 布袋除尘页面开发

src/router/index.js

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

src/utils/chart.js

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

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

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