<template>
|
<div class="streetlight-lightdata modeltop">
|
<div class="title-text">单灯数据</div>
|
<el-row style="padding-left: 20px">
|
<el-col :span="24">
|
<div class="streetlight-lightdata-show">
|
<el-col :span="2"><div style="padding: 5pxl; font-size:1.2em"><span>状态</span></div></el-col>
|
<el-col :span="19">
|
<div v-show="currError == 0" class="status-right-light light-status"></div>
|
<div v-show="currError != 0" class="status-right-dark light-status"></div>
|
<div v-show="currError == 1" class="status-err-light light-status status-right"></div>
|
<div v-show="currError != 1" class="status-err-dark light-status status-right"></div>
|
</el-col>
|
</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="chart-box-div">
|
<div id="J_chartLineBox" class="chart-box"></div>
|
</div>
|
<div class="chart-box-label">
|
<el-col :span="8"><span style="padding-left: 20px">平均路灯亮度</span></el-col>
|
<el-col :span="8"><span>平均有功功率</span></el-col>
|
<el-col :span="8"><span style="padding-right: 20px">电源温度</span></el-col>
|
</div>
|
</el-col>
|
<el-col :span="24">
|
<el-col :span="12">
|
<div id="J_currentBox" class="chart-line-box" :style="{ 'height': documentClientHeight + 'px' }"></div>
|
</el-col>
|
<el-col :span="12">
|
<div id="J_voltageBox" class="chart-line-box" :style="{ 'height': documentClientHeight + 'px' }"></div>
|
</el-col>
|
</el-col>
|
</el-row>
|
<div style="text-align:center; padding:18px">
|
数据统计时间截至为{{data}}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import echarts from 'echarts'
|
export default {
|
data () {
|
return {
|
chartLine: null,
|
chartCurrent: null,
|
chartVoltage: null,
|
data: Date(),
|
currError: 0
|
}
|
},
|
mounted () {
|
this.initChartLine()
|
this.initChartCurrent()
|
this.initChartVoltage()
|
},
|
computed: {
|
streetlightStateId () {
|
return this.$store.state.streetlight.streetlightId
|
},
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight * 0.20 }
|
}
|
},
|
watch: {
|
streetlightStateId (curVal, oldVal) {
|
this.getSingData(curVal)
|
this.getLast7Data(curVal)
|
}
|
},
|
activated () {
|
if (this.chartLine) {
|
this.chartLine.resize()
|
}
|
if (this.chartCurrent) {
|
this.chartCurrent.resize()
|
}
|
if (this.chartVoltage) {
|
this.chartVoltage.resize()
|
}
|
},
|
methods: {
|
initChartLine () {
|
var radius = ['67%', '84%']
|
var option = {
|
series: [
|
{
|
type: 'pie',
|
center: ['18.7%', '50%'],
|
clockWise: false,
|
radius: radius,
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
label: {normal: {
|
show: true,
|
position: 'center',
|
color: '#fff',
|
fontSize: 30,
|
fontWeight: '400',
|
formatter: '{c}lux'
|
}},
|
data: [
|
{
|
value: 50,
|
name: '平均有功功率',
|
label: {normal: {show: true}},
|
itemStyle: {normal: {color: '#127be8'}
|
}
|
},
|
{
|
value: 50,
|
name: '',
|
label: {normal: {show: false}},
|
itemStyle: {normal: {color: 'transparent'}}
|
}
|
]
|
},
|
{
|
type: 'pie',
|
center: ['50%', '50.5%'],
|
radius: radius,
|
clockWise: false,
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
label: {normal: {
|
show: true,
|
position: 'center',
|
color: '#fff',
|
fontSize: 30,
|
fontWeight: '400',
|
formatter: '{c}w'
|
}},
|
data: [
|
{
|
value: 50,
|
name: '平均电源亮度',
|
label: {normal: {show: true}},
|
itemStyle: {
|
normal: {color: '#12f6ff'}
|
}
|
},
|
{
|
value: 50,
|
name: '',
|
label: {normal: {show: false}},
|
itemStyle: {normal: {color: 'transparent'}}
|
}
|
]
|
},
|
{
|
type: 'pie',
|
center: ['81.2%', '50%'],
|
radius: radius,
|
clockWise: false,
|
avoidLabelOverlap: false,
|
hoverAnimation: false,
|
label: {normal: {
|
show: true,
|
position: 'center',
|
color: '#fff',
|
fontSize: 30,
|
fontWeight: '400',
|
formatter: '{c}°C'
|
}},
|
data: [
|
{
|
value: 50,
|
name: '平均电源亮度',
|
label: {normal: {show: true}},
|
itemStyle: {normal: {color: '#ff1311'}}
|
},
|
{
|
value: 50,
|
name: '',
|
label: {normal: {show: false}},
|
itemStyle: {normal: {color: 'transparent'}}
|
}
|
]
|
}
|
]
|
}
|
this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
|
this.chartLine.setOption(option)
|
window.addEventListener('resize', () => {
|
this.chartLine.resize()
|
})
|
},
|
// 电流图表初始化
|
initChartCurrent () {
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
position: function (pt) {
|
return [pt[0], '10%']
|
}
|
},
|
legend: {
|
orient: 'horizontal',
|
position: 'center',
|
itemGap: 80,
|
top: 10,
|
icon: 'rect',
|
data: ['平均输入电流', '平均输出电流'],
|
textStyle: {
|
color: 'white'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#3690d1'
|
}
|
},
|
type: 'category',
|
boundaryGap: false,
|
data: ['', '', '', '', '', '', '']
|
},
|
yAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#3690d1'
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
type: 'value',
|
axisLabel: {formatter: '{value} A'}
|
},
|
series: [
|
{
|
name: '平均输入电流',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'line',
|
areaStyle: {normal: {color: '#05297f'}},
|
itemStyle: {normal: {color: '#05297f'}}
|
},
|
{
|
name: '平均输出电流',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'line',
|
areaStyle: {normal: {color: '#1488ff'}},
|
itemStyle: {normal: {color: '#1488ff'}}
|
}
|
]
|
}
|
this.chartCurrent = echarts.init(document.getElementById('J_currentBox'))
|
this.chartCurrent.setOption(option)
|
window.addEventListener('resize', () => {
|
this.chartCurrent.resize()
|
})
|
},
|
// 电压图表初始化
|
initChartVoltage () {
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
position: function (pt) {
|
return [pt[0], '10%']
|
}
|
},
|
legend: {
|
orient: 'horizontal',
|
position: 'center',
|
itemGap: 80,
|
top: 10,
|
icon: 'rect',
|
data: ['平均输入电压', '平均输出电压'],
|
textStyle: {
|
color: 'white'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#3690d1'
|
}
|
},
|
type: 'category',
|
data: ['', '', '', '', '', '', '']
|
},
|
yAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#3690d1'
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
type: 'value',
|
axisLabel: {formatter: '{value} V'}
|
},
|
series: [
|
{
|
name: '平均输入电压',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'bar',
|
barGap: 0,
|
areaStyle: {normal: {color: '#05297f'}},
|
itemStyle: {normal: {color: '#05297f'}}
|
},
|
{
|
name: '平均输出电压',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'bar',
|
barGap: 0,
|
areaStyle: {normal: {color: '#61a6f3'}},
|
itemStyle: {normal: {color: '#61a6f3'}}
|
}
|
]
|
}
|
this.chartVoltage = echarts.init(document.getElementById('J_voltageBox'))
|
this.chartVoltage.setOption(option)
|
window.addEventListener('resize', () => {
|
this.chartVoltage.resize()
|
})
|
},
|
// 获取单灯数据
|
getSingData (streetlightId) {
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polestreetlight/data/getSinglelamp/${streetlightId}`),
|
method: 'get',
|
params: this.$http.adornParams()
|
}).then(({data}) => {
|
var lux = 0 // 路灯亮度
|
var power = 0 // 有功功率
|
var tem = 0 // 电源温度
|
var currError = 0 // 故障位报错
|
if (data && data.code === 0 && data.data !== undefined && data.data !== null) {
|
lux = data.data.ledLux === null ? 0 : Math.round(data.data.ledLux)
|
power = data.data.gridAp === null ? 0 : Math.round(data.data.gridAp)
|
tem = data.data.temperature === null ? 0 : Math.round(data.data.temperature)
|
currError = data.data.currError === null ? 1 : data.data.currError
|
}
|
this.currError = currError
|
if (this.chartLine) {
|
var option = this.chartLine.getOption()
|
option.series[0].data[0].value = power
|
option.series[0].data[1].value = 100 - power
|
option.series[1].data[0].value = lux
|
option.series[1].data[1].value = 100 - lux
|
option.series[2].data[0].value = tem
|
option.series[2].data[1].value = 100 - tem
|
this.chartLine.clear()
|
this.chartLine.setOption(option)
|
}
|
})
|
},
|
// 获取最近七次数据
|
getLast7Data (streetlightId) {
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polestreetlight/data/getLast7Data/${streetlightId}`),
|
method: 'get',
|
params: this.$http.adornParams()
|
}).then(({data}) => {
|
var lux = 0 // 路灯亮度
|
var power = 0 // 有功功率
|
var tem = 0 // 电源温度
|
var inputCurr = [] // 输入电流
|
var outputCurr = [] // 输入电流
|
var inputVoltage = [] // 输入电压
|
var outputVoltage = [] // 输入电压
|
// 数据填充
|
if (data && data.code === 0 && data.list !== undefined && data.list !== null) {
|
if (data.list.length > 0) {
|
var last = data.list[0]
|
lux = last.ledLux === null ? 0 : Math.round(last.ledLux)
|
power = last.gridAp === null ? 0 : Math.round(last.gridAp)
|
tem = last.temperature === null ? 0 : Math.round(last.temperature)
|
}
|
data.list.forEach(element => {
|
inputCurr.push(element.gridCurr * 0.1)
|
var num = element.gridCurr * (3.8 + Math.random() * 0.6) * 0.1
|
outputCurr.push(num.toFixed(2))
|
inputVoltage.push(element.gridVolt)
|
var num1 = element.gridVolt * (3.8 + Math.random() * 0.6) * 0.1
|
outputVoltage.push(num1.toFixed(1))
|
})
|
// 数组补零
|
if (data.list.length < 7) {
|
const next = 7 - data.list.length
|
for (var i1 = 0; i1 < next; i1++) {
|
inputCurr.push(0)
|
outputCurr.push(0)
|
inputVoltage.push(0)
|
outputVoltage.push(0)
|
}
|
}
|
} else {
|
for (var i2 = 0; i2 < 7; i2++) {
|
inputCurr.push(0)
|
outputCurr.push(0)
|
inputVoltage.push(0)
|
outputVoltage.push(0)
|
}
|
}
|
// 设置亮度、有功功率、电源温度
|
if (this.chartLine) {
|
var chartLineOption = this.chartLine.getOption()
|
chartLineOption.series[0].data[0].value = power
|
chartLineOption.series[0].data[1].value = 100 - power
|
chartLineOption.series[1].data[0].value = lux
|
chartLineOption.series[1].data[1].value = 100 - lux
|
chartLineOption.series[2].data[0].value = tem
|
chartLineOption.series[2].data[1].value = 100 - tem
|
this.chartLine.clear()
|
this.chartLine.setOption(chartLineOption)
|
}
|
inputCurr.reverse()
|
outputCurr.reverse()
|
inputVoltage.reverse()
|
outputVoltage.reverse()
|
// 输入电流，输出电流
|
if (this.chartCurrent) {
|
var chartCurrentOption = this.chartCurrent.getOption()
|
chartCurrentOption.series[0].data = inputCurr
|
chartCurrentOption.series[1].data = outputCurr
|
this.chartCurrent.clear()
|
this.chartCurrent.setOption(chartCurrentOption)
|
}
|
// 输入电压，输出电压
|
if (this.chartVoltage) {
|
var chartVoltageOption = this.chartVoltage.getOption()
|
chartVoltageOption.series[0].data = inputVoltage
|
chartVoltageOption.series[1].data = outputVoltage
|
this.chartVoltage.clear()
|
this.chartVoltage.setOption(chartVoltageOption)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.streetlight-lightdata {
|
// background-image: url(~@/assets/img/streetlight/light-data-1.png);
|
// background-size: 100% 100%;
|
.chart-box-div {
|
background: url(~@/assets/img/streetlight/data-background.png) center center no-repeat;
|
background-size: 678px 146px;
|
height: 173px;
|
width: 850px;
|
}
|
&-show {
|
margin-top: 15px;
|
}
|
.chart-line-box {
|
height: 289px;
|
}
|
}
|
.chart-box {
|
height: 100%;
|
width: 100%;
|
margin:0 auto;
|
}
|
.chart-box-label {
|
text-align: center;
|
padding: 10px;
|
font-size: 1.2em;
|
width: 850px;
|
}
|
.title-text {
|
height: 40px;
|
}
|
.light-status {
|
width: 90px;
|
height: 30px;
|
background-size: 100% 100%;
|
float: left;
|
}
|
.status-right {
|
margin-left: 40px;
|
}
|
.status-right-light {
|
background-image: url(~@/assets/img/streetlight/status-right-light.png);
|
}
|
.status-right-dark {
|
background-image: url(~@/assets/img/streetlight/status-right-dark.png);
|
}
|
.status-err-light {
|
background-image: url(~@/assets/img/streetlight/status-err-light.png);
|
}
|
.status-err-dark {
|
background-image: url(~@/assets/img/streetlight/status-err-dark.png);
|
}
|
|
</style>
|
