From 501fb44af61df8ee28bbe4fbdafae24b4277278c Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 21 Jan 2025 10:46:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E6=97=B6=E5=91=8A=E8=AD=A6?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/screen/components/AlarmDynamic.vue | 227 +++++++++++++++++++
 src/views/screen/index.vue                   |   9 +
 2 files changed, 236 insertions(+)
 create mode 100644 src/views/screen/components/AlarmDynamic.vue

diff --git a/src/views/screen/components/AlarmDynamic.vue b/src/views/screen/components/AlarmDynamic.vue
new file mode 100644
index 0000000..3fefc05
--- /dev/null
+++ b/src/views/screen/components/AlarmDynamic.vue
@@ -0,0 +1,227 @@
+<template>
+    <div class="left_bottom_item inner_header">
+        <div class="inner_right">
+            <div class="flex w-[100%] h-[20px]">
+                <div class="info w-[20%]">
+                    <span>告警级别</span>
+                </div>
+                <div class="info w-[20%]">
+                    <span>告警资源</span>
+                </div>
+                <div class="info w-[35%]">
+                    <span>告警标题</span>
+                </div>
+                <div class="info w-[25%]">
+                    <span>告警内容</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="left_bottom_wrap beautify-scroll-def">
+        <component
+            :is="SeamlessScroll"
+            v-if="state.list.length >= 5"
+            v-model="state.scroll"
+            :list="state.list"
+            :single-height="state.defaultOption.singleHeight"
+            :step="state.defaultOption.step"
+            :hover="state.defaultOption.hover"
+        >
+            <renderList />
+        </component>
+        <renderList v-else />
+    </div>
+</template>
+
+<script setup lang="jsx">
+import { reactive } from 'vue';
+import SeamlessScroll from './common/seamless-scroll/seamless-scroll.vue';
+import { keyColor } from '../config';
+
+const state = reactive({
+    list: [],
+    scroll: true,
+    defaultOption: {
+        singleHeight: 0,
+        step: 0.3,
+        hover: true,
+    },
+});
+
+const renderList = () => {
+    return (
+        <ul class="left_bottom screen-scroll-ul">
+            {state.list.map((item, index) => (
+                <li
+                    key={index}
+                    class="left_bottom_item border"
+                >
+                    <div class="inner_right">
+                        <div class="flex w-[100%] h-[20px]">
+                            <div class="info w-[20%]">
+                                <span
+                                    class="text-level"
+                                    style={`color: ${keyColor(item.severity)}`}
+                                >
+                                    {item.severity}
+                                </span>
+                            </div>
+
+                            <div class="info w-[20%]">
+                                <span
+                                    class="truncate"
+                                    title={item.instance}
+                                >
+                                    {item.instance}
+                                </span>
+                            </div>
+
+                            <div class="info w-[35%]">
+                                <span
+                                    class="truncate"
+                                    title={item.summary}
+                                >
+                                    {item.summary}
+                                </span>
+                            </div>
+
+                            <div class="info w-[25%]">
+                                <span
+                                    class="truncate"
+                                    title={item.description}
+                                >
+                                    {item.description}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+const getAlarmDynamicData = () => {
+    console.log('执行请求AlarmDynamic');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve([
+                {
+                    description: '节点已宕机超过2分钟',
+                    instance: '1.1.1.1:9000',
+                    severity: 'critical',
+                    summary: 'IP为1.1.1.1:9000节点宕机',
+                },
+                {
+                    description: '节点已宕机超过2分钟',
+                    instance: '1.1.1.1:9000',
+                    severity: 'info',
+                    summary: 'IP为1.1.1.1:9000节点宕机',
+                },
+                {
+                    description: '节点已宕机超过2分钟',
+                    instance: '1.1.1.1:9000',
+                    severity: 'major',
+                    summary: 'IP为1.1.1.1:9000节点宕机',
+                },
+                {
+                    description: '节点已宕机超过2分钟',
+                    instance: '1.1.1.1:9000',
+                    severity: 'critical',
+                    summary: 'IP为1.1.1.1:9000节点宕机',
+                },
+                {
+                    description: '节点已宕机超过2分钟',
+                    instance: '1.1.1.1:9000',
+                    severity: 'critical',
+                    summary: 'IP为1.1.1.1:9000节点宕机',
+                },
+            ]);
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getAlarmDynamicData().then((res) => {
+        state.list = res;
+    });
+};
+
+defineExpose({
+    name: 'AlarmDynamic',
+    init: initFN,
+});
+</script>
+
+<style lang="scss">
+.screen-wrapper {
+    .left_bottom_wrap {
+        overflow: hidden;
+        width: 100%;
+        height: calc(100% - 70px);
+    }
+
+    .left_bottom {
+        width: 100%;
+        height: 100%;
+    }
+
+    .left_bottom_item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 18px 8px;
+        font-size: 14px;
+    }
+
+    .left_bottom_item.border {
+        border-bottom: 1px dashed #6f6f6f;
+    }
+
+    .info {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #b3b3b3;
+        padding: 0 5px;
+
+        .text-level {
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+            padding: 8px 15px;
+            border-radius: 5px;
+            border-width: 1px;
+            border-style: solid;
+        }
+    }
+
+    .inner_right {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex-shrink: 0;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .dibu {
+            height: 1px;
+            width: 100%;
+            border: 1px solid #fff;
+        }
+    }
+
+    .inner_header {
+        background: rgba(67, 128, 229, 0.1);
+
+        .info {
+            font-size: 16px;
+            font-weight: bold;
+            color: rgb(39, 175, 254);
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index e0b6c19..67f0c20 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -68,6 +68,7 @@ import AccessStatus from './components/AccessStatus.vue';
 import MajorSystemHealthStatus from './components/MajorSystemHealthStatus.vue';
 import MajorAlert from './components/MajorAlert.vue';
 import AccessSituation from './components/AccessSituation.vue';
+import AlarmDynamic from './components/AlarmDynamic.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -114,6 +115,9 @@ const getComponent = (componentName) => {
         case 'AccessSituation':
             component = shallowRef(AccessSituation);
             break;
+        case 'AlarmDynamic':
+            component = shallowRef(AlarmDynamic);
+            break;
     }
     return component;
 };
@@ -129,6 +133,9 @@ const getComponentClass = computed(() => (componentName) => {
         case 'AccessSituation':
             className = 'content_ct-item';
             break;
+        case 'AlarmDynamic':
+            className = 'content_cb-item';
+            break;
     }
     return className;
 });
@@ -147,6 +154,7 @@ const getLayout = (id) => {
                         center: [
                             { title: '重要告警', componentName: 'MajorAlert' },
                             { title: 'IT资源接入情况', componentName: 'AccessSituation' },
+                            { title: '实时告警动态', componentName: 'AlarmDynamic' },
                         ],
                         right: [],
                     };
@@ -160,6 +168,7 @@ const getLayout = (id) => {
                         center: [
                             { title: '重要告警', componentName: 'MajorAlert' },
                             { title: 'IT资源接入情况', componentName: 'AccessSituation' },
+                            { title: '实时告警动态', componentName: 'AlarmDynamic' },
                         ],
                         right: [],
                     };