<template>
|
<div>
|
<div class="wifi-info-title">
|
<div style="margin-left:30px;padding-top:8px">
|
<img src="~@/assets/img/home/wifi_icon.png" style="margin-top:0px" height="13px" width="15px">
|
<span style="color:white">公共WIFI信息</span>
|
</div>
|
</div>
|
<div id="wifi-info-body" class="wifi-info-body">
|
<el-row style="padding-top:20px;padding-left:10px;height:50%;">
|
<el-col class="onlineCount" :span="5">
|
</el-col>
|
<el-col :span="7">
|
<el-row>
|
<el-col class="fontLocation" style="margin-top:15px" :span="24">
|
<span style="color:white;font-size:12px">在线</span>
|
<span style="color:white;font-size:20px">{{brightnessNum}}</span>
|
<span style="color:white">台</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col class="totalFlow" :span="5">
|
|
</el-col>
|
<el-col :span="7">
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:20px">{{brightnessNum * 33}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:12px">总流量(Mb)</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row style="padding-top:10px;padding-left:10px;height:50%;">
|
<el-col class="userCount" :span="5">
|
|
</el-col>
|
<el-col :span="7">
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:20px">{{this.$store.state.home.homeStreetlightList.length * 3}}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:12px">累计用户(人)</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col class="avgFlow" :span="5">
|
|
</el-col>
|
<el-col :span="7">
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:20px">91</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="fontLocation" :span="24">
|
<span style="color:white;font-size:12px">人均流量(Mb)</span>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="wifi-info-bottom"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
brightnessNum: 0
|
}
|
},
|
computed: {
|
streetlightList () {
|
return this.$store.state.home.homeStreetlightList
|
}
|
},
|
watch: {
|
streetlightList (curVal, oldVal) {
|
this.brightnessNum = 0
|
var streetlightList = curVal
|
for (var i = 0; i < streetlightList.length; i++) {
|
if (streetlightList[i].light !== 0) {
|
this.brightnessNum++
|
}
|
}
|
}
|
},
|
components: {},
|
activated () {
|
this.init()
|
},
|
|
methods: {
|
init () {
|
var h = document.body.clientHeight
|
var wifiInfoBodyH = document.getElementById('wifi-info-body')
|
var num = (h - 425) / 3
|
wifiInfoBodyH.style.height = num + 'px'
|
},
|
getdomheight (dom) {
|
return dom.offsetHeight
|
}
|
}
|
}
|
</script>
|
<style>
|
.wifi-info-title {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_title.png);
|
background-size: 100% 30px;
|
}
|
.wifi-info-body {
|
height: 110px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_body.png);
|
background-size: 100% 100%;
|
}
|
.wifi-info-bottom {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_bottom.png);
|
background-size: 100% 30px;
|
}
|
.onlineCount {
|
height: 75%;
|
background-image: url(~@/assets/img/home/basePageWifi/device.png);
|
background-size: 100% 100%
|
}
|
.totalFlow {
|
height: 75%;
|
background-image: url(~@/assets/img/home/basePageWifi/flow.png);
|
background-size: 100% 100%
|
}
|
.avgFlow {
|
height: 75%;
|
background-image: url(~@/assets/img/home/basePageWifi/avgFlow.png);
|
background-size: 100% 100%
|
}
|
.userCount {
|
height: 75%;
|
background-image: url(~@/assets/img/home/basePageWifi/user.png);
|
background-size: 100% 100%
|
}
|
.fontLocation {
|
text-align: center;
|
padding-left: 5px;
|
padding-top: 5px;
|
}
|
.small-font {
|
font-size:1vw;
|
-webkit-transform-origin-x: 0;
|
-webkit-transform: scale(0.80);
|
color: white;
|
}
|
</style>
|
