<template>
|
<div>
|
<div class='energy-save-title'>
|
<div style='margin-left:30px;padding-top:8px'>
|
<img src='~@/assets/img/home/energy_save_icon.png' style='margin-top:0px' height='13px' width='15px'>
|
<span style='color:white'>光照强度数据</span>
|
</div>
|
</div>
|
<div id='energy-save-body' class='energy-save-body'>
|
<div style='padding:5px' id='chartBody'></div>
|
</div>
|
<div class='energy-save-bottom'></div>
|
</div>
|
</template>
|
|
<script>
|
import echarts from 'echarts'
|
export default {
|
data () {
|
return {
|
echartDataList: [],
|
streetlightList: [],
|
streetlightIdList: [],
|
tempList: [],
|
humiList: [],
|
brightnessList: [],
|
timeList: [],
|
idCount: 1,
|
cycleCount: 1,
|
streetlightId: '169'
|
}
|
},
|
activated () {
|
this.init()
|
},
|
methods: {
|
init () {
|
var h = document.body.clientHeight
|
var energyBodyH = document.getElementById('energy-save-body')
|
var chartBodyH = document.getElementById('chartBody')
|
var num = h - 735
|
// if (num > 250) {
|
// energyBodyH.style.height = num + 'px'
|
// } else {
|
// energyBodyH.style.height = 400 + 'px'
|
// }
|
energyBodyH.style.height = num + 'px'
|
chartBodyH.style.height = num + 'px'
|
this.getStreetlightList()
|
},
|
getStreetlightList () {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polesensor/getPoleList'),
|
method: 'get'
|
}).then(({ data }) => {
|
this.streetlightList = data.poleList
|
this.streetlightList.map(item => {
|
this.streetlightIdList.push(item.streetlightId)
|
})
|
this.getCountData(this.streetlightIdList[0])
|
})
|
},
|
// 获取图标数据
|
getCountData () {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polesensor/getDataList'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.streetlightId,
|
count: 7,
|
type: 'count'
|
})
|
}).then(({ data }) => {
|
this.echartDataList = data.list
|
if (data.list.length === 0) {
|
if (this.cycleCount > 3) {
|
return
|
} else {
|
this.getCountData(this.streetlightIdList[this.idCount++])
|
this.cycleCount++
|
}
|
}
|
// 将List载入tempList等，并且画图
|
this.getListAndDraw()
|
})
|
},
|
getListAndDraw () {
|
var list = this.echartDataList
|
|
this.tempList = []
|
this.humiList = []
|
this.brightnessList = []
|
this.timeList = []
|
|
let _this = this
|
|
list.forEach(function (item, index) {
|
_this.tempList.unshift(item.temperature)
|
_this.humiList.unshift(item.humidity)
|
_this.brightnessList.unshift(item.brightness)
|
_this.timeList.unshift(item.createTime)
|
})
|
this.drwaLightLevelChart()
|
},
|
drwaLightLevelChart () {
|
var option = {
|
animationDuration: 1500,
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
},
|
data: this.timeList
|
},
|
yAxis: {
|
type: 'value',
|
name: 'Lux',
|
nameTextStyle: {
|
color: 'white'
|
},
|
splitLine: {
|
// 坐标轴在 grid 区域中的分隔线
|
show: false
|
},
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
}
|
},
|
series: [
|
{
|
symbolSize: 10,
|
data: this.brightnessList,
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#6974E7' },
|
{ offset: 0.5, color: '#225081' },
|
{ offset: 0.7, color: '#143251' },
|
{ offset: 1, color: '#143251' }
|
])
|
}
|
}, // 填充区域样式
|
type: 'line',
|
smooth: true,
|
itemStyle: {
|
normal: {
|
color: '#32B3FF',
|
lineStyle: {
|
color: '#32B3FF',
|
width: 2
|
}
|
}
|
}
|
}
|
]
|
}
|
var lightLevelChart = echarts.init(document.getElementById('chartBody'))
|
lightLevelChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
<style>
|
.energy-save-title {
|
height: 30px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_title.png);
|
background-size: 100% 30px;
|
}
|
.energy-save-body {
|
height: 200px;
|
width: 100%;
|
background-image: url(~@/assets/img/content_charts_body.png);
|
background-size: 100% 100%;
|
}
|
.energy-save-bottom {
|
height: 30px;
|
width: 100%;
|
bottom: 0px;
|
background-image: url(~@/assets/img/content_charts_bottom.png);
|
background-size: 100% 30px;
|
}
|
</style>
|
