feat: 重大告警组件

src/views/screen/components/MajorAlert.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="major-alert-wrap">
+        <SeamlessScroll
+            v-model="state.scroll"
+            :list="state.list"
+            :single-height="state.defaultOption.singleHeight"
+            :step="state.defaultOption.step"
+            :limit-scroll-num="state.defaultOption.limitScrollNum"
+            :hover="state.defaultOption.hover"
+            :single-wait-time="state.defaultOption.singleWaitTime"
+        >
+            <div
+                v-for="(item, index) in state.list"
+                :key="index"
+                class="warning"
+            >
+                <iconifyIconOffline
+                    :icon="WarnIcon"
+                    class="warn-icon"
+                />
+                <span>{{ item }}</span>
+            </div>
+        </SeamlessScroll>
+    </div>
+</template>
+
+<script setup>
+import { reactive, inject } from 'vue';
+import SeamlessScroll from './common/seamless-scroll/seamless-scroll.vue';
+import WarnIcon from '@iconify-icons/ep/warn-triangle-filled';
+
+const currentOrg = inject('currentOrg');
+const state = reactive({
+    list: [],
+    scroll: true,
+    defaultOption: {
+        singleHeight: 40,
+        step: 0.5,
+        limitScrollNum: 1,
+        hover: false,
+        singleWaitTime: 5000,
+    },
+});
+
+const getMajorAlertData = () => {
+    console.log('执行请求MajorAlert');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            if (currentOrg.value.id === 'all') {
+                resolve([
+                    '重大事件告警：系统all服务器 IP为1.1.1.1 节点宕机',
+                    '重大事件告警：系统all服务器 IP为2.2.2.2 节点宕机',
+                    '重大事件告警：系统all服务器 IP为3.3.3.3 节点宕机',
+                ]);
+            } else {
+                resolve([
+                    '重大事件告警：系统org服务器 IP为1.1.1.1 节点宕机',
+                    '重大事件告警：系统org服务器 IP为2.2.2.2 节点宕机',
+                    '重大事件告警：系统org服务器 IP为3.3.3.3 节点宕机',
+                ]);
+            }
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getMajorAlertData().then((res) => {
+        state.list = res;
+    });
+};
+
+defineExpose({
+    name: 'MajorAlert',
+    init: initFN,
+});
+</script>
+
+<style lang="scss" scoped>
+.major-alert-wrap {
+    position: relative;
+    margin: 0 auto -15px;
+    color: rgb(252, 87, 77);
+    width: 700px;
+    height: 40px;
+    font-size: 18px;
+    overflow: hidden;
+    background: linear-gradient(to right, rgba (255, 255, 255, 0), rgba(67, 128, 229, 0.3), rgba(0, 0, 0, 0.5) 100%);
+
+    .warning {
+        position: relative;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .warn-icon {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            margin-right: 5px;
+        }
+    }
+}
+</style>

src/views/screen/components/MajorSystemHealthStatus.vue

@@ -13,9 +13,10 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, inject } from 'vue';
 import { cptColor } from '../config';
 
+const currentOrg = inject('currentOrg');
 const list = ref();
 
 const setOptions = () => {
@@ -128,6 +129,7 @@ const getMajorSystemHealthStatusData = () => {
     console.log('执行请求MajorSystemHealthStatus');
     return new Promise((resolve) => {
         setTimeout(() => {
+            if (currentOrg.value.id === 'all') {
                 resolve([
                     {
                         name: '重要系统',
@@ -146,6 +148,22 @@ const getMajorSystemHealthStatusData = () => {
                         value: 95,
                     },
                 ]);
+            } else {
+                resolve([
+                    {
+                        name: '重要系统',
+                        value: 55,
+                    },
+                    {
+                        name: '核心平台',
+                        value: 75,
+                    },
+                    {
+                        name: '关键网络',
+                        value: 85,
+                    },
+                ]);
+            }
         }, 1000);
     });
 };

src/views/screen/index.vue

@@ -31,7 +31,27 @@
                     </ItemWrap>
                 </div>
 
-                <div class="content_center"></div>
+                <div class="content_center">
+                    <template
+                        v-for="item in layoutData.center"
+                        :key="item.componentName"
+                    >
+                        <MajorAlert
+                            v-if="item.componentName === 'MajorAlert'"
+                            :ref="(el) => setRef(el, item.componentName)"
+                        />
+                        <ItemWrap
+                            v-else
+                            :class="[getComponentClass(item.componentName)]"
+                            :title="item.title"
+                        >
+                            <component
+                                :is="item.component"
+                                :ref="(el) => setRef(el, item.componentName)"
+                            />
+                        </ItemWrap>
+                    </template>
+                </div>
 
                 <div class="content_right"></div>
             </div>
@@ -46,6 +66,7 @@ import Headers from './components/Headers.vue';
 import ItemWrap from './components/common/item-wrap';
 import AccessStatus from './components/AccessStatus.vue';
 import MajorSystemHealthStatus from './components/MajorSystemHealthStatus.vue';
+import MajorAlert from './components/MajorAlert.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -86,6 +107,9 @@ const getComponent = (componentName) => {
         case 'MajorSystemHealthStatus':
             component = shallowRef(MajorSystemHealthStatus);
             break;
+        case 'MajorAlert':
+            component = shallowRef(MajorAlert);
+            break;
     }
     return component;
 };
@@ -113,7 +137,7 @@ const getLayout = (id) => {
                             { title: '综合看板', componentName: 'AccessStatus' },
                             { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
                         ],
-                        center: [],
+                        center: [{ title: '重要告警', componentName: 'MajorAlert' }],
                         right: [],
                     };
                     break;
@@ -123,7 +147,7 @@ const getLayout = (id) => {
                             { title: '综合看板', componentName: 'AccessStatus' },
                             { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' },
                         ],
-                        center: [],
+                        center: [{ title: '重要告警', componentName: 'MajorAlert' }],
                         right: [],
                     };
                     break;