布袋周期页面开发

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

@@ -4,6 +4,7 @@ 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'
@@ -33,6 +34,11 @@ const routes = [
             path: '/monitor',
             component: AboutView,
             meta: { title: '除尘器监控' },
+          },
+           {
+            path: '/collectorList',
+            component: CollectorList,
+            meta: { title: '布袋周期' },
           },
           {
             path: '/alerts',

src/utils/chart.js

@@ -2,59 +2,114 @@ 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,
     },
   ],
-  });
\ No newline at end of file
+});

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>