116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
|
<!--智能预警统计-->
|
||
|
|
<template>
|
||
|
|
<div class="warning-statistics">
|
||
|
|
<div class="warning-total-info">
|
||
|
|
<div class="warning-data">
|
||
|
|
<div class="warning-icon"></div>
|
||
|
|
<div class="_title">报警总数</div>
|
||
|
|
<div class="_value">
|
||
|
|
<Number :num="286"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<peak-third-level-label :title="warningTypeTitle"/>
|
||
|
|
|
||
|
|
<div class="warning-type-pie">
|
||
|
|
<div class="_bg"></div>
|
||
|
|
<peak-warning-type-chart :data-source="warningTypeDataSource"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import WarningTypeChart from "@/components/charts/WarningTypeChart";
|
||
|
|
import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
|
||
|
|
import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "PeakWarningStatistics",
|
||
|
|
components: {PeakThirdLevelLabel, PeakWarningTypeChart, WarningTypeChart},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
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 {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
.flex-column;
|
||
|
|
|
||
|
|
.warning-total-info {
|
||
|
|
height: 60px;
|
||
|
|
.flex-row;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
.warning-data {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(1, 120, 198, 0.30);
|
||
|
|
.flex-row;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.warning-icon {
|
||
|
|
width: 60px;
|
||
|
|
height: 40px;
|
||
|
|
.bg("~/assets/peakCoalImages/right/warning-icon.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
._title {
|
||
|
|
font-family: MicrosoftYaHei;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #6AC4FF;
|
||
|
|
letter-spacing: 2.26px;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
._value {
|
||
|
|
font-family: YouSheBiaoTiHei;
|
||
|
|
font-size:20px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
letter-spacing: 5.64px;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning-type-pie {
|
||
|
|
flex: 1;
|
||
|
|
height: 0;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
._bg {
|
||
|
|
position: absolute;
|
||
|
|
left: 26px;
|
||
|
|
top: 24px;
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|