<template>
|
<div>
|
<div class="manhole-check-title">
|
<div style="margin-left:30px;padding-top:8px">
|
<img src="~@/assets/img/home/manhole_icon.png" style="margin-top:0px" height="13px" width="15px">
|
<span style="color:white">智能井盖监测</span>
|
</div>
|
</div>
|
<div id="manhole-check-body" class="manhole-check-body">
|
<div id="mainPan" style="padding:20px;height:150px">
|
<el-row id="rowPan" class="centerPic" style="height:150px" :gutter="5">
|
<el-col :span="7">
|
<el-row style="height:50%;">
|
<el-col :span="24">
|
<div class="nodeal">
|
<el-row>
|
<el-col :span="24">
|
<span style="color:white;">未处理</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="padding-top:10px" :span="24">
|
<span style="color:white;">0个</span>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<div class="dealed">
|
<el-row>
|
<el-col :span="24">
|
<span style="color:white;">已处理</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="padding-top:10px" :span="24">
|
<span style="color:white;">0个</span>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col style="margin-top:40px;text-align:center" :span="10">
|
<el-row>
|
<el-col :span="24">
|
<span style="color:white;font-size:17px">设备总数(个)</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="padding-top:10px" :span="24">
|
<span style="color:white;font-size:17px">{{this.$store.state.home.homeStreetlightList.length}}</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="7">
|
<el-row style="height:50%;">
|
<el-col :span="24">
|
<div class="warningLv1">
|
<el-row>
|
<el-col :span="24">
|
<span style="color:white;">一级告警</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="padding-top:10px" :span="24">
|
<span style="color:white;">0个</span>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<div class="warningLv2">
|
<el-row>
|
<el-col :span="24">
|
<span style="color:white;">二级告警</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="padding-top:10px" :span="24">
|
<span style="color:white;">0个</span>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
<el-row>
|
|
</el-row>
|
</div>
|
<div class="manhole-check-bottom"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
}
|
},
|
components: {
|
|
},
|
activated () {
|
this.init()
|
},
|
|
methods: {
|
init () {
|
var h = window.innerHeight || document.body.clientHeight
|
var manholeBodyH = document.getElementById('manhole-check-body')
|
var mainPan = document.getElementById('mainPan')
|
var rowPan = document.getElementById('rowPan')
|
var num = (h - 425) / 3
|
manholeBodyH.style.height = num + 'px'
|
mainPan.style.height = num + 'px'
|
rowPan.style.height = (num - 40) + 'px'
|
},
|
getdomheight (dom) {
|
return dom.offsetHeight
|
}
|
}
|
}
|
</script>
|
<style>
|
.manhole-check-title {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_title.png);
|
background-size: 100% 30px;
|
}
|
.manhole-check-body {
|
height: 120px;
|
width: 100%;
|
background: url(~@/assets/img/content_charts_body.png);
|
background-size: 100% 100%
|
}
|
.manhole-check-bottom {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_bottom.png);
|
background-size: 100% 30px;
|
}
|
.centerPic {
|
background:url(~@/assets/img/home/manhole/center.png);
|
background-size: 100% 100%
|
}
|
.nodeal {
|
background:url(~@/assets/img/home/manhole/nodeal.png);
|
background-size: 100% 105%;
|
height: 100%;
|
width: 100%;
|
padding-top: 30px;
|
padding-left: 0px;
|
text-align: center;
|
}
|
.dealed {
|
background:url(~@/assets/img/home/manhole/dealed.png);
|
background-size: 100% 105%;
|
height: 100%;
|
width: 100%;
|
margin-top: 15px;
|
margin-left: 20px;
|
padding-top: 30px;
|
padding-left: 0px;
|
text-align: center;
|
}
|
.warningLv1 {
|
background:url(~@/assets/img/home/manhole/warningLv1.png);
|
background-size: 100% 105%;
|
height: 70px;
|
width: 100%;
|
padding-top: 30px;
|
padding-left: 0px;
|
text-align: center;
|
}
|
.warningLv2 {
|
background:url(~@/assets/img/home/manhole/warningLv2.png);
|
background-size: 100% 105%;
|
height: 70px;
|
width: 100%;
|
margin-top: 10px;
|
margin-left: -15px;
|
padding-top: 30px;
|
padding-left: 0px;
|
text-align: center;
|
}
|
</style>
|
