feat: 实时告警动态
parent
2e02ffae0a
commit
501fb44af6
@ -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>
|
||||||
Loading…
Reference in New Issue