<template>
|
<div>
|
<el-table
|
:data='AmtoDataTable'
|
style='width: 100%;margin-top:0px'
|
border='true'>
|
<el-table-column
|
:label='ac'
|
align='center'
|
>
|
<el-table-column
|
prop='eco2'
|
label='CO2(ppm)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='ech2o'
|
label='甲醛(μg/m³)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='brightness'
|
label='光照'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='pm25'
|
label='PM2.5(μg/m³)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='pm10'
|
label='PM10(μg/m³)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='temperature'
|
label='附近温度(C°)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='humidity'
|
label='附近温度(%)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='windSpeed'
|
label='风速(m/s)'
|
align='center'>
|
</el-table-column>
|
<el-table-column
|
prop='createTime'
|
label='更新时间'
|
align='center'>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
<el-carousel style="margin-top:20px" :interval="a" type="card" height="200px">
|
<el-carousel-item>
|
<div id="container1" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container2" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container3" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container4" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container5" style="height: 400px"></div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<el-carousel style="margin-top:30px" height="400px" trigger="click" :interval="b">
|
<el-carousel-item>
|
<div id="container6" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container7" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div id="container8" style="height: 400px"></div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<pm25-charts></pm25-charts>
|
</el-carousel-item>
|
<el-carousel-item>
|
|
</el-carousel-item>
|
</el-carousel>
|
|
</div>
|
</template>
|
|
<script>
|
import pm25Charts from './pm25-charts'
|
export default {
|
data () {
|
return {
|
streetlightId: 0,
|
AmtoDataTable: [],
|
a: 1500,
|
b: 5000,
|
show2: false,
|
ac: '最新大气数据',
|
time: 7 * 24
|
}
|
},
|
components: {
|
pm25Charts
|
},
|
computed: {
|
weatherStreetlightId () {
|
return this.$store.state.weather.streetlightIdOfWeather
|
},
|
weatherPm25List () {
|
return this.$store.state.weather.pm25List
|
}
|
},
|
watch: {
|
weatherStreetlightId (curVal, oldVal) {
|
this.streetlightId = curVal
|
this.getWeatherData()
|
},
|
weatherPm25List (curVal, oldVal) {
|
alert(curVal)
|
}
|
},
|
activated () {
|
this.getWeatherData()
|
},
|
methods: {
|
getWeatherData () {
|
this.AmtoDataTable = []
|
this.$http({
|
url: this.$http.adornUrl('/pole/polesensor/getInfo'),
|
method: 'get',
|
params: this.$http.adornParams({
|
PoleId: this.streetlightId,
|
count: this.time
|
})
|
}).then(({ data }) => {
|
if (data.list.length === 0) {
|
this.$message({
|
type: 'error',
|
message: '该灯杆暂无大气数据',
|
duration: '1000'
|
})
|
}
|
this.AmtoDataTable = data.list.splice(0, 1)
|
})
|
}
|
}
|
}
|
</script>
|
<!
|
<style>
|
.el-carousel__item:nth-child(2n) {
|
background-color: rgba(0,0,0,0.3);
|
}
|
|
.el-carousel__item:nth-child(2n+1) {
|
background-color: rgba(0,0,0,0.3);
|
}
|
</style>
|
