117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<!--智能预警统计-->
|
|
<template>
|
|
<div class="warning-statistics">
|
|
<secondary-title :title="title"/>
|
|
<div class="warning-statistics-info">
|
|
<div class="warning-total-info">
|
|
<div class="warning-data">
|
|
<div class="warning-icon"></div>
|
|
<div class="_title">报警总数</div>
|
|
<div class="_value">234</div>
|
|
</div>
|
|
</div>
|
|
|
|
<third-level-label :title="warningTypeTitle"/>
|
|
|
|
<div class="warning-type-pie">
|
|
<warning-type-chart :data-source="warningTypeDataSource"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WarningTypeChart from "@/components/charts/WarningTypeChart";
|
|
|
|
export default {
|
|
name: "WarningStatistics",
|
|
components: {WarningTypeChart},
|
|
data() {
|
|
return {
|
|
title: '智能预警统计',
|
|
warningTypeTitle: '报警类型分布',
|
|
warningTypeDataSource: [
|
|
{
|
|
name: '断电掉线',
|
|
value: 214,
|
|
rate: '38%'
|
|
},
|
|
{
|
|
name: '区域入侵',
|
|
value: 342,
|
|
rate: '32%'
|
|
},
|
|
{
|
|
name: '污染超标',
|
|
value: 12,
|
|
rate: '30%'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.warning-statistics {
|
|
margin-top: 43px;
|
|
height: 784px;
|
|
width: 100%;
|
|
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
|
|
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
|
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
|
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
|
.flex-column;
|
|
|
|
.warning-statistics-info {
|
|
flex: 1;
|
|
height: 0;
|
|
padding: 0 50px;
|
|
.flex-column;
|
|
|
|
.warning-total-info {
|
|
height: 238px;
|
|
.flex-row;
|
|
|
|
.warning-data {
|
|
width: 100%;
|
|
height: 152px;
|
|
background: rgba(1, 120, 198, 0.30);
|
|
.flex-row;
|
|
justify-content: space-around;
|
|
|
|
.warning-icon {
|
|
width: 194px;
|
|
height: 114px;
|
|
background: url("assets/peakCoalImages/right/warning-icon.png") no-repeat;
|
|
}
|
|
|
|
._title {
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 34.3px;
|
|
color: #6AC4FF;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
._value {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 85.76px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5.64px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warning-type-pie {
|
|
flex: 1;
|
|
height: 0;
|
|
background: url("assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 20px center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|