feat: 告警级别统计

src/views/screen/components/AlarmStatistics.vue

@@ -0,0 +1,127 @@
+<template>
+    <v-chart
+        v-if="JSON.stringify(option) != '{}'"
+        :option="option"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { keyColor } from '../config';
+
+const option = ref({});
+let list = [];
+let totalNum = 0;
+
+const setOptions = () => {
+    option.value = {
+        title: {
+            top: 'center',
+            left: '31.5%',
+            text: ['{name|总数}', `{value|${totalNum}}`].join('\n'),
+            textStyle: {
+                textAlign: 'center',
+                rich: {
+                    name: {
+                        fontSize: 14,
+                        color: 'rgba(255,255,255,0.6)',
+                    },
+                    value: {
+                        fontSize: 24,
+                        fontWeight: 'bold',
+                        color: '#fff',
+                        lineHeight: 20,
+                        padding: [12, 0, 0, 0],
+                    },
+                },
+            },
+        },
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.6)',
+            borderColor: 'rgba(147,235,248,0.8)',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        legend: {
+            show: true,
+            orient: 'vertical',
+            icon: 'circle',
+            right: 20,
+            top: 'center',
+            itemGap: 20,
+            textStyle: {
+                color: 'rgb(85,185,216)',
+            },
+            formatter: (b) => `${b}:${list.find((item) => item.name === b).value}`,
+        },
+        series: [
+            {
+                name: '告警统计',
+                type: 'pie',
+                radius: ['40%', '80%'],
+                center: ['35%', '50%'],
+                label: {
+                    show: false,
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    borderRadius: 6,
+                },
+                labelLine: {
+                    show: false,
+                },
+                tooltip: {
+                    show: true,
+                },
+                data: [
+                    ...list.map((item) => ({
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            color: keyColor[item.prop],
+                        },
+                    })),
+                ],
+            },
+        ],
+    };
+};
+
+const getAlarmStatisticsData = () => {
+    console.log('执行请求AlarmStatistics');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                critical: 17,
+                major: 12,
+                warning: 3,
+                info: 2,
+            });
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getAlarmStatisticsData().then((result) => {
+        let dataList = [];
+        for (const key in result) {
+            dataList.push({
+                name: key,
+                value: result[key],
+                prop: key,
+            });
+            totalNum += result[key];
+        }
+        list = dataList;
+        setOptions();
+    });
+};
+
+defineExpose({
+    name: 'AlarmStatistics',
+    init: initFN,
+});
+</script>

src/views/screen/index.vue

@@ -84,6 +84,7 @@ import AlarmDynamic from './components/AlarmDynamic.vue';
 import AccessUsageStatus from './components/AccessUsageStatus.vue';
 import ResourceType from './components/ResourceType.vue';
 import AlarmTrend from './components/AlarmTrend.vue';
+import AlarmStatistics from './components/AlarmStatistics.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -142,6 +143,9 @@ const getComponent = (componentName) => {
         case 'AlarmTrend':
             component = shallowRef(AlarmTrend);
             break;
+        case 'AlarmStatistics':
+            component = shallowRef(AlarmStatistics);
+            break;
     }
     return component;
 };
@@ -163,6 +167,7 @@ const getComponentClass = computed(() => (componentName) => {
             break;
         case 'ResourceType':
         case 'AlarmTrend':
+        case 'AlarmStatistics':
             className = 'content_lr-item';
             break;
     }
@@ -188,14 +193,16 @@ const getLayout = (id) => {
                         right: [
                             { title: '资源类型', componentName: 'ResourceType' },
                             { title: '告警趋势图', componentName: 'AlarmTrend' },
+                            { title: '告警级别统计', componentName: 'AlarmStatistics' },
                         ],
                     };
                     break;
                 case 'org1':
                     layoutDataValue = {
                         left: [
-                            { title: '综合看板', componentName: 'AccessStatus' },
+                            { title: '告警级别统计', componentName: 'AlarmStatistics' },
-                            { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
+                            { title: '告警趋势图', componentName: 'AlarmTrend' },
+                            { title: '资源类型', componentName: 'ResourceType' },
                         ],
                         center: [
                             { title: '重要告警', componentName: 'MajorAlert' },
@@ -203,8 +210,8 @@ const getLayout = (id) => {
                             { title: '各资源接入及使用情况', componentName: 'AccessUsageStatus' },
                         ],
                         right: [
-                            { title: '资源类型', componentName: 'ResourceType' },
+                            { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
-                            { title: '告警趋势图', componentName: 'AlarmTrend' },
+                            { title: '综合看板', componentName: 'AccessStatus' },
                         ],
                     };
                     break;