feat: 告警趋势图

src/views/screen/components/AlarmTrend.vue

@@ -0,0 +1,168 @@
+<template>
+    <v-chart
+        v-if="JSON.stringify(option) != '{}'"
+        :option="option"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { keyColor, colorEnum } from '../config';
+
+const colorArrar = Object.keys(colorEnum);
+const timeList = ref([
+    '00:00',
+    '01:00',
+    '02:00',
+    '03:00',
+    '04:00',
+    '05:00',
+    '06:00',
+    '07:00',
+    '08:00',
+    '09:00',
+    '10:00',
+    '11:00',
+    '12:00',
+    '13:00',
+    '14:00',
+    '15:00',
+    '16:00',
+    '17:00',
+    '18:00',
+    '19:00',
+    '20:00',
+    '21:00',
+    '22:00',
+    '23:00',
+]);
+const option = ref({});
+let list = [];
+
+const setOptions = () => {
+    option.value = {
+        xAxis: {
+            type: 'category',
+            data: timeList.value,
+            boundaryGap: false,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(31, 99, 163, 0.2)',
+                },
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(31, 99, 163, 0.1)',
+                },
+            },
+            axisLabel: {
+                color: '#7eb7fd',
+                fontWeight: 'bold',
+            },
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(31, 99, 163, 0.2)',
+                },
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(31, 99, 163, 0.1)',
+                },
+            },
+            axisLabel: {
+                color: '#7eb7fd',
+                fontWeight: 'bold',
+            },
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 0, 0, 0.6)',
+            borderColor: 'rgba(147, 235, 248, 0.8)',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        grid: {
+            show: true,
+            left: '20px',
+            right: '20px',
+            bottom: '25px',
+            top: '35px',
+            containLabel: true,
+            borderColor: '#1f63a3',
+        },
+        legend: {
+            show: true,
+            icon: 'circle',
+            right: 'center',
+            top: 5,
+            left: 'center',
+            itemWidth: 12,
+            textStyle: {
+                color: 'rgb(85, 185, 216)',
+            },
+            data: list.map((item) => item.name),
+        },
+        series: list.map((item) => {
+            return {
+                name: item.name,
+                type: 'line',
+                data: item.value,
+                symbol: 'none',
+                smooth: true,
+                color: keyColor(item.prop, 0.7),
+            };
+        }),
+    };
+};
+
+const getAlarmTrendData = () => {
+    console.log('执行请求AlarmTrend');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve([
+                {
+                    name: '子系统数',
+                    value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
+                },
+                {
+                    name: '数据库',
+                    value: [39, 2, 25, 8, 44, 19, 31, 12, 16, 43, 7, 26, 1, 37, 20, 5, 33, 48, 10, 36, 17, 50, 30, 15],
+                },
+                {
+                    name: '主机',
+                    value: [8, 22, 35, 1, 39, 16, 44, 10, 24, 4, 18, 32, 26, 47, 6, 3, 40, 21, 14, 33, 13, 49, 28, 42],
+                },
+                {
+                    name: '存储',
+                    value: [12, 5, 23, 41, 34, 7, 19, 29, 48, 2, 36, 15, 27, 3, 45, 20, 38, 11, 30, 46, 9, 25, 14, 50],
+                },
+            ]);
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getAlarmTrendData().then((result) => {
+        list = result.map((item, index) => {
+            return {
+                ...item,
+                prop: colorArrar[index],
+            };
+        });
+        setOptions();
+    });
+};
+
+defineExpose({
+    name: 'AlarmTrend',
+    init: initFN,
+});
+</script>

src/views/screen/index.vue

@@ -83,6 +83,7 @@ import AccessSituation from './components/AccessSituation.vue';
 import AlarmDynamic from './components/AlarmDynamic.vue';
 import AccessUsageStatus from './components/AccessUsageStatus.vue';
 import ResourceType from './components/ResourceType.vue';
+import AlarmTrend from './components/AlarmTrend.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -138,6 +139,9 @@ const getComponent = (componentName) => {
         case 'ResourceType':
             component = shallowRef(ResourceType);
             break;
+        case 'AlarmTrend':
+            component = shallowRef(AlarmTrend);
+            break;
     }
     return component;
 };
@@ -158,6 +162,7 @@ const getComponentClass = computed(() => (componentName) => {
             className = 'content_cb-item';
             break;
         case 'ResourceType':
+        case 'AlarmTrend':
             className = 'content_lr-item';
             break;
     }
@@ -180,7 +185,10 @@ const getLayout = (id) => {
                             { title: 'IT资源接入情况', componentName: 'AccessSituation' },
                             { title: '实时告警动态', componentName: 'AlarmDynamic' },
                         ],
-                        right: [{ title: '资源类型', componentName: 'ResourceType' }],
+                        right: [
+                            { title: '资源类型', componentName: 'ResourceType' },
+                            { title: '告警趋势图', componentName: 'AlarmTrend' },
+                        ],
                     };
                     break;
                 case 'org1':
@@ -194,7 +202,10 @@ const getLayout = (id) => {
                             { title: '实时告警动态', componentName: 'AlarmDynamic' },
                             { title: '各资源接入及使用情况', componentName: 'AccessUsageStatus' },
                         ],
-                        right: [{ title: '资源类型', componentName: 'ResourceType' }],
+                        right: [
+                            { title: '资源类型', componentName: 'ResourceType' },
+                            { title: '告警趋势图', componentName: 'AlarmTrend' },
+                        ],
                     };
                     break;
             }