布袋周期页面开发合并

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/router/index.js

@@ -3,6 +3,8 @@ import { createWebHistory, createRouter } from 'vue-router'
 import Dashboard from '../views/dashboard/index.vue'
 import DustOverview from '../views/dustOverview/index.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'
@@ -35,6 +37,11 @@ const routes = [
             path: '/monitor',
             component: dustMonitoring,
             meta: { title: '除尘器监控' },
+          },
+           {
+            path: '/collectorList',
+            component: CollectorList,
+            meta: { title: '布袋周期' },
           },
           {
             path: '/bag-monitor',

src/utils/chart.js

@@ -2,133 +2,188 @@ import { color } from "echarts";
 
 export const getLineOption = (xData = [], seriesData = []) => ({
   tooltip: {
-      trigger: 'axis',
+    trigger: "axis",
   },
   grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '15%',
-      top: '5%',
+    left: "3%",
+    right: "4%",
+    bottom: "15%",
+    top: "5%",
     containLabel: true,
   },
   legend: {
-      data: ['健康度指数（%）'],
-      bottom: '0%',
-      icon:"circle",
+    data: ["健康度指数（%）"],
+    bottom: "0%",
+    icon: "circle",
     itemWidth: 10,
     itemHeight: 10,
     itemGap: 10,
   },
   xAxis: {
-      type: 'category',
+    type: "category",
     axisTick: {
       show: false,
     },
     axisLine: {
       lineStyle: {
-          color: '#E9ECF2',
+        color: "#E9ECF2",
       },
     },
     axisLabel: {
-        color: 'rgba(0,0,0,0.6)',
+      color: "rgba(0,0,0,0.6)",
     },
     data: xData,
-
   },
   yAxis: {
-      type: 'value',
+    type: "value",
     axisLabel: {
-        color: 'rgba(0,0,0,0.6)',
+      color: "rgba(0,0,0,0.6)",
     },
     splitLine: {
       lineStyle: {
-          color: '#E9ECF2',
-          type: 'dashed',
+        color: "#E9ECF2",
+        type: "dashed",
+      },
     },
   },
+  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,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+      },
+    },
+    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',
+      name: "",
+      type: "line",
+      color: "#399DFA",
       data: seriesData,
       smooth: true,
     },
   ],
-  });
+});
 
 // 布袋监测图表配置
 export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
   tooltip: {
-    trigger: 'axis',
+    trigger: "axis",
     axisPointer: {
-      type: 'line',
+      type: "line",
       lineStyle: {
-        color: '#6E7079',
-        width: 1
-      }
-    }
+        color: "#6E7079",
+        width: 1,
+      },
+    },
   },
   grid: {
-    left: '20',
-    right: '20',
-    bottom: '30',
-    top: '3%',
-    containLabel: true
+    left: "20",
+    right: "20",
+    bottom: "30",
+    top: "3%",
+    containLabel: true,
   },
   xAxis: {
-    type: 'category',
+    type: "category",
     boundaryGap: false,
     axisLine: {
       lineStyle: {
-        color: '#E9ECF2'
-      }
+        color: "#E9ECF2",
+      },
     },
     axisLabel: {
-      color: 'rgba(0,0,0,0.6)',
+      color: "rgba(0,0,0,0.6)",
       fontSize: 12,
-      interval: 'auto',
-      rotate: 0
+      interval: "auto",
+      rotate: 0,
     },
     axisTick: {
-      show: false
+      show: false,
     },
-    data: xData
+    data: xData,
   },
   yAxis: {
-    type: 'value',
+    type: "value",
     min: 0,
     max: 600,
     interval: 200,
     axisLabel: {
-      color: 'rgba(0,0,0,0.6)',
-      formatter: '{value}'
+      color: "rgba(0,0,0,0.6)",
+      formatter: "{value}",
     },
     splitLine: {
       lineStyle: {
-        color: '#E9ECF2',
-        type: 'dashed'
-      }
-    }
+        color: "#E9ECF2",
+        type: "dashed",
+      },
+    },
   },
   series: [
     {
-      name: '监测值',
-      type: 'line',
+      name: "监测值",
+      type: "line",
       smooth: false,
-      symbol: 'none',
-      sampling: 'average',
+      symbol: "none",
+      sampling: "average",
       itemStyle: {
-        color: '#7B68EE'
+        color: "#7B68EE",
       },
       lineStyle: {
-        width: 1
+        width: 1,
       },
       areaStyle: {
         color: {
-          type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
@@ -136,16 +191,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
           colorStops: [
             {
               offset: 0,
-              color: 'rgba(123, 104, 238, 0.4)'
+              color: "rgba(123, 104, 238, 0.4)",
             },
             {
               offset: 1,
-              color: 'rgba(123, 104, 238, 0.1)'
-            }
-          ]
-        }
+              color: "rgba(123, 104, 238, 0.1)",
+            },
+          ],
+        },
       },
       data: seriesData,
-    }
-  ]
+    },
+  ],
 });

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>