<template>
|
<div>
|
<div class="atmo-data-title">
|
<div style="margin-left:30px;padding-top:8px">
|
<img src="~@/assets/img/home/atmo_data_icon.png" style="margin-top:0px" height="13px" width="15px">
|
<span style="color:white">大气数据信息</span>
|
</div>
|
</div>
|
<div id="atmo-data-body" class="atmo-data-body">
|
<div style="text-align:center;padding:10px;margin-top:0px;height:30px">
|
<span style="color:white;font-size:18px">路灯实时数据收集</span>
|
</div>
|
<el-carousel
|
@change="((pre, next) => {setList(pre, next)})"
|
direction="vertical"
|
:height="tableHeight">
|
<el-carousel-item v-for="item in pageNum" :key="item">
|
<div id="amtoDataTable">
|
<table class="amtoDataTable">
|
<thead>
|
<tr>
|
<td>序列号</td>
|
<td>温度</td>
|
<td>湿度</td>
|
<td>pm2.5</td>
|
<td>pm10</td>
|
<td>甲醛</td>
|
<td>CO2</td>
|
<td>风速</td>
|
<td>光照强度</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in list" :key="index">
|
<td>{{item.streetlightName}}</td>
|
<td>{{item.temperature}}C°</td>
|
<td>{{item.humidity}}%rh</td>
|
<td>{{item.pm25}}ppm</td>
|
<td>{{item.pm10}}ppm</td>
|
<td>{{item.ech2o}}ug/m3</td>
|
<td>{{item.eco2}}ug/m3</td>
|
<td>{{item.windSpeed}}m/s</td>
|
<td>{{item.brightness}}Lux</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="atmo-data-bottom">
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
test: false,
|
tableItemNum: 3,
|
pageNum: 0,
|
tableHeight: '150px',
|
list: [],
|
allList: []
|
}
|
},
|
components: {
|
|
},
|
activated () {
|
this.getNewList()
|
},
|
methods: {
|
init () {
|
var h = window.innerHeight || document.body.clientHeight
|
var atmoBodyH = document.getElementById('atmo-data-body')
|
var num = h - 700 - 2
|
atmoBodyH.style.height = num + 'px'
|
this.tableHeight = (h - 626 - 45) + 'px'
|
this.tableItemNum = parseInt((h - 626 - 45) / 45)
|
this.list = this.getPartOfList(this.allList, 0, this.tableItemNum)
|
this.pageNum = Math.ceil(this.allList.length / this.tableItemNum)
|
},
|
getdomheight (dom) {
|
return dom.offsetHeight
|
},
|
getPartOfList (list, start, end) {
|
var slist = []
|
for (var i = 0; i < list.length; i++) {
|
if (i >= start) {
|
if (i < end) {
|
slist.push(list[i])
|
}
|
}
|
}
|
return slist
|
},
|
setList (cur, pre) {
|
this.list = this.getPartOfList(this.allList, cur * this.tableItemNum, (cur + 1) * this.tableItemNum)
|
},
|
openAtmo () {
|
alert(1)
|
},
|
getNewList () {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polesensor/newList'),
|
method: 'get'
|
}).then(({ data }) => {
|
this.allList = data.list
|
this.init()
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.atmo-data-title {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_title.png);
|
background-size: 100% 30px;
|
}
|
.atmo-data-body {
|
margin-top: 0px;
|
height: 100px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_body.png);
|
background-size: 100% 100%;
|
}
|
.atmo-data-bottom {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_bottom.png);
|
background-size: 100% 30px;
|
}
|
.amtoDataTable {
|
margin: 0px;
|
padding: 10px;
|
margin-top: 0px;
|
padding-top:0px;
|
width: 100%;
|
overflow: hidden;
|
background-color: rgba(0, 0, 0, 0);
|
border-collapse: separate;
|
border-spacing: 0px 10px;
|
}
|
.amtoDataTable tr {
|
background-color: #022440;
|
color:white;
|
text-align: center;
|
}
|
</style>
|
