<template>
|
<!-- 报警信息 -->
|
<div class="panel">
|
<div class="panel-header">
|
报警信息
|
</div>
|
<!-- <line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart> -->
|
<div class="flex panel-body" style="flex-wrap: wrap;">
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_厕所.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">48小时未用水</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.no48AmountTotal }}</span></div>
|
</div>
|
</div>
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_水质.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">阀门关闭报警</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.valveTotal }}</span></div>
|
</div>
|
</div>
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_巡检.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">信号强度报警</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.magnetismTotal }}</span></div>
|
</div>
|
</div>
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_工单.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">电池电压报警</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.voltTotal }}</span></div>
|
</div>
|
</div>
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_人.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">小流量报警</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.smallAmountTotal }}</span></div>
|
</div>
|
</div>
|
<div class="info-items flex-item">
|
<div class="info-img"><img src="../../../image/screen/image_站点.png" alt=""></div>
|
<div>
|
<div class="item-label" style="white-space: nowrap">长流水报警</div>
|
<div class="item-value"><span class="item-num">{{ alarmInfo.longTermAmountTotal }}</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
// import lineChart from '@/cpx_sewage/components/echarts/lineChart'
|
import { getScAlarm } from '@/api/largeScreen'
|
export default {
|
name: 'RightMiddle',
|
components: {
|
// mainEcharts,
|
// lineChart
|
},
|
data() {
|
return {
|
datetiems: [], // 时间段
|
yAxisProcessingCapacity: [],
|
yAxisPowerConsumption: [],
|
yAxisElectricityConsumption: [],
|
chartData: {
|
time: [],
|
Data: [
|
{
|
data: [],
|
type: 'line',
|
name: '处理量(m³)',
|
connectNulls: true
|
},
|
{
|
data: [],
|
type: 'line',
|
name: '用电量(kW·h)',
|
connectNulls: true
|
},
|
{
|
data: [],
|
type: 'line',
|
name: '吨水电耗量(kW·h/m³)',
|
connectNulls: true
|
}
|
],
|
config: {
|
name: ['处理量(m³)', '用电量(kW·h)', '吨水电耗量(kW·h/m³)'],
|
color: ['#5470c6', '#91cc75', '#fac858'],
|
textStyleColor: '#fff',
|
XlineColor: '#022C5A',
|
YlineColor: '#022C5A'
|
}
|
},
|
alarmInfo: {}
|
}
|
},
|
mounted() {
|
this.getScAlarm()
|
},
|
methods: {
|
last30days() {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
this.datetiems = [this.formatDate(start), this.formatDate(end)]
|
this.pageDataStatistical()
|
},
|
// 处理日期
|
formatDate(date) {
|
let m = date.getMonth() + 1
|
if (m < 10) m = '0' + m
|
let d = date.getDate()
|
if (d < 10) d = '0' + d
|
return date.getFullYear() + '-' + m + '-' + d
|
},
|
// 获取报警信息
|
getScAlarm() {
|
getScAlarm({orgTag:'dy'})
|
.then((res) => {
|
console.log('res',res)
|
if(res.succ==1){
|
this.alarmInfo = res
|
}else{
|
this.$message({
|
type: 'error',
|
message: res.message
|
})
|
}
|
|
})
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss" scoped>
|
// @import url(../index.scss);
|
// 标题
|
.info-title {
|
height: 4.4vh;
|
background: url('../../../image/screen/bg_title.png') no-repeat;
|
display: flex;
|
align-items: center;
|
color: #fff;
|
font-family: 'screen-font';
|
margin-bottom: 2%;
|
.info-title-text {
|
padding-left: 2vw;
|
font-size: 1rem;
|
}
|
}
|
.info-items{
|
// width: 1.36rem;
|
width: 2.04rem;
|
margin-bottom: .2rem;
|
display: flex;
|
// border: 1px solid #ddd;
|
// justify-content: space-between;
|
align-items: center;
|
.info-img {
|
width: .6rem;
|
height: .6rem;
|
line-height: .6rem;
|
img{
|
width: 100%;
|
}
|
}
|
.item-label {
|
width: .64rem;
|
font-size: .14rem;
|
color: #fff;
|
}
|
.item-value {
|
font-size: .1rem;
|
color: #fff;
|
}
|
.item-num {
|
font-family: 'screen-font';
|
font-size: .20rem;
|
}
|
}
|
</style>
|
