首页页面布局编写

src/views/workflow/compontents/AlarmItemsChart.vue

@@ -0,0 +1,55 @@
+<template>
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let myChart = null;
+
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      xAxis: { type: 'category', data: ['强制报警', '撞击闯入', '手动报警', '电子围栏'] },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [50, 30, 65, 45],
+        type: 'bar',
+        itemStyle: {
+          // 柱状图渐变色
+          color: new echarts.graphic.LinearGradient(
+            0, 0, 0, 1,
+            [{ offset: 0, color: '#ff6b6b' }, { offset: 1, color: '#ffcccc' }]
+          ),
+        },
+      }],
+    };
+    myChart.setOption(option);
+  }
+};
+
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/workflow/compontents/AlarmOverviewChart.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let myChart = null;
+
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      series: [{
+        type: 'pie',
+        radius: ['50%', '70%'], // 环形内外半径
+        data: [{ value: 6, name: '今日报警' }, { value: 6, name: '今日处理' }],
+        color: ['#ff4d4f', '#36cbcb'], // 红、绿配色
+        label: {
+          position: 'center',
+          formatter: '6/6\n今日报警/处理', // 中心文字
+          textStyle: { align: 'center' },
+        },
+      }],
+    };
+    myChart.setOption(option);
+  }
+};
+
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/workflow/compontents/DeviceFrequencyChart.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 用ref绑定DOM，代替原id选择器 -->
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 200px;"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'; // 引入ECharts
+
+const chartRef = ref(null); // 绑定图表容器DOM
+let myChart = null; // 存储ECharts实例
+
+// 初始化图表
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [30, 20, 40, 32, 45, 48],
+        type: 'line',
+        areaStyle: {}, // 开启面积填充
+        itemStyle: { color: '#409eff' },
+      }],
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    };
+    myChart.setOption(option);
+  }
+};
+
+// 窗口resize时，图表自适应
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  // 组件销毁时，移除事件 + 销毁图表（防止内存泄漏）
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>