1.新增报警管理部分图表

2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图

src/views/integratedManage/stateManage/components/stateTrend.vue

@@ -0,0 +1,214 @@
+
+<template>
+    <div class="chart-container">
+        <!--组件温度（℃）  图表内容区域 -->
+        <div ref="chartRef" class="chart-content"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+
+// 图表DOM引用
+const chartRef = ref(null);
+// 图表实例
+let chartInstance = null;
+
+// 初始化图表
+const initChart = () => {
+    if (chartRef.value && !chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+    }
+    const option = {
+   tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+         // 坐标轴指示器，坐标轴触发有效
+         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      }
+   },
+   legend: {
+      show: true,
+      left: '8%',
+      icon: 'square', 
+      itemWidth: 12,
+      itemHeight: 12,
+      textStyle: {
+         color: '#4E5969'
+      }
+   },
+   xAxis: {
+      type: 'category',
+      axisTick: {
+         show: false
+      },
+      axisLabel: {
+         textStyle: {
+            color: '#4E5969'
+         }
+      },
+      axisLine: {
+         lineStyle: {
+            color: '#EAEBF0'
+         }
+      },
+      data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18']
+   },
+   yAxis: {
+      type: 'value',
+      max: 150,
+      interval: 50,
+      axisLabel: {
+         textStyle: {
+            color: '#4E5969'
+         }
+      },
+      splitLine: {
+         show: true,
+         lineStyle: {
+            color: '#EAEBF0',
+            type: 'dashed'
+         }
+      }
+   },
+   series: [
+      {
+         name: '正常',
+         data: [20, 10, 50, 80, 70, 10, 30],
+         type: 'bar',
+         stack: 'one',
+         color: '#7339F5',
+         itemStyle: {
+            // borderWidth: 1,
+            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+            barBorderRadius: 8
+         },
+         barWidth: '20',
+      },
+      {
+         name: '中断',
+         data: [80, 30, 50, 80, 70, 10, 30],
+         type: 'bar',
+         stack: 'one', //堆叠
+         color: '#FF8A00',
+         itemStyle: {
+            borderWidth: 1,
+            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+            barBorderRadius: 8
+         },
+      },
+      {
+         name: '异常',
+         data: [50, 30, 50, 80, 70, 10, 30],
+         type: 'bar',
+         stack: 'one', //堆叠
+         color: '#DE4848',
+         itemStyle: {
+            borderWidth: 1,
+            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+            barBorderRadius: 8
+         },
+         barWidth: '12',
+      }
+   ]
+};
+
+    chartInstance.setOption(option);
+};
+
+// 响应窗口大小变化
+const handleResize = () => {
+    if (chartInstance) {
+        chartInstance.resize();
+    }
+};
+
+// 生命周期钩子
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+        window.removeEventListener('resize', handleResize);
+        if (chartInstance) {
+            chartInstance.dispose();
+            chartInstance = null;
+        }
+    };
+});
+
+
+</script>
+
+<style scoped>
+.chart-container {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 400px;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.chart-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+
+
+.chart-content {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 350px;
+    }
+}
+
+@media (max-width: 480px) {
+    .chart-container {
+        height: 300px;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .chart-actions {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .chart-actions button {
+        margin: 0;
+        flex: 1;
+        margin-right: 5px;
+    }
+
+    .chart-actions button:last-child {
+        margin-right: 0;
+    }
+}
+</style>