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

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

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

@@ -0,0 +1,201 @@
+<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: 'item',
+            formatter: function(params) {
+                // 定义名称映射关系
+                const nameMap = {
+                    '提示信息': '设备正常',
+                    '一般告警': '设备中断',
+                    '重要告警': '设备异常'
+                };
+                // 使用ECharts提供的百分比值
+                const percentage = params.percent.toFixed(1);
+                // 返回格式化后的文本
+                return `${nameMap[params.name]}: ${params.value}台 (${percentage}%)`;
+            }
+        },
+        grid: {
+            left: '0%',
+            right: '20%',
+            bottom: '0%',
+            top: '0%',
+            containLabel: true
+        },
+        legend: {
+            top: 'middle',
+            orient: 'vertical',
+            right: '5%', // 调整图例位置，使其更靠近左侧
+            itemWidth: 15,
+            itemHeight: 15,
+            formatter: function(name) {
+                // 定义名称映射关系
+                const nameMap = {
+                    '提示信息': '设备正常',
+                    '一般告警': '设备中断',
+                    '重要告警': '设备异常'
+                };
+                // 定义数值映射关系
+                const valueMap = {
+                    '提示信息': 28,
+                    '一般告警': 45,
+                    '重要告警': 55
+                };
+                // 返回格式化后的文本
+                return `${nameMap[name] || name}(${valueMap[name]})`;
+            }
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['40%', '70%'],
+                label: {
+                    show: false
+                },
+                labelLine: {
+                    show: true
+                },
+                color: [
+                    '#43CF7C', // 设备正常
+                    '#00B3FF', // 设备中断
+                    '#FB3E7A', // 设备异常
+                ],
+                data: [
+                    { value: 28, name: '提示信息' },
+                    { value: 45, name: '一般告警' },
+                    { value: 55, name: '重要告警' },
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+
+    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: 150px;
+    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;
+    }
+}
+
+.model {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+</style>