<template>
<div id="App">
<el-row :gutter="20" class="statistics">
<el-col :span="6"
><div class="grid-content bg-purple-info1">
<div>处理告警信息数量</div>
<div class="num">{{ infoList[0].value1 }}</div>
<div
class="last-num"
:style="{
color: fontColor(infoList[0]),
}"
>
上一周期数据为{{ infoList[0].value2 }}
</div>
</div></el-col
>
<el-col :span="6"
><div class="grid-content bg-purple-info2">
<div>执行告警策略次数</div>
<div class="num">{{ infoList[1].value1 }}</div>
<div
class="last-num"
:style="{
color: fontColor(infoList[1]),
}"
>
上一周期数据为{{ infoList[1].value2 }}
</div>
</div></el-col
>
<el-col :span="6"
><div class="grid-content bg-purple-info3">
<div>告警触发告警次数</div>
<div class="num">{{ infoList[2].value1 }}</div>
<div
class="last-num"
:style="{
color: fontColor(infoList[2]),
}"
>
上一周期数据为{{ infoList[2].value2 }}
</div>
</div></el-col
>
<el-col :span="6"
><div class="grid-content bg-purple-info4">
<div>告警触发通知次数</div>
<div class="num">{{ infoList[3].value1 }}</div>
<div
class="last-num"
:style="{
color: fontColor(infoList[3]),
}"
>
上一周期数据为{{ infoList[3].value2 }}
</div>
</div></el-col
>
</el-row>
<el-row :gutter="20">
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
infoList: [
{
title1: "处理告警信息数量",
value1: 10,
title2: "上一周期数据为",
value2: 20,
},
{
title1: "执行告警策略次数",
value1: 11,
title2: "上一周期数据为",
value2: 21,
},
{
title1: "告警触发告警次数",
value1: 30,
title2: "上一周期数据为",
value2: 20,
},
{
title1: "告警触发通知次数",
value1: 50,
title2: "上一周期数据为",
value2: 60,
},
],
};
},
computed: {
fontColor() {
return function (item) {
return item.value1 - item.value2 > 0 ? "green" : "red";
};
},
},
};
</script>
<style lang="scss">
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple {
background: #d3dce6;
}
$class-new-list: #4a3 #45b #463 #45a7;
.statistics {
@each $color in $class-new-list {
$i: index($class-new-list, $color);
.bg-purple-info#{$i} {
border-left: 5px solid $color;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 25px 20px;
.num {
font-weight: bold;
}
}
}
}
.grid-content {
border-radius: 4px;
min-height: 36px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
