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