<template>
<el-dialog width="80%" @opened="opened()" @closed="closed()" :show-close="false" custom-class="my-info-dialog">
<template #title>
<div style="margin-top: -10px; color: #ffffff">光伏详情</div>
</template>
<div class="pvDetail" v-loading="loading">
<div class="pvLeftDetail">
<div class="commonSty titleFont">
<span>光伏板号:</span>
<span style="width: 38%;color: #c3c3c3">{{windturbine.id}}</span>
</div>
<div class="commonSty titleFont">
<span>逆变器状态</span>
</div>
<div v-for="(item, index) in nbqData" :key="index" class="commonSty arrSty">
<div class="arrName">
<span>{{item.name}}</span>
</div>
<div class="arrMsg">
<span style="padding-right: 20px">{{item.value}}</span>
<span style="width: 20%;color: #c3c3c3">{{item.unit}}</span>
</div>
</div>
</div>
<div class="pvRightDetail">
<div class="pvRightDetail_top">
<div class="pvRightTopTitle">
<span>光伏板</span>
<span>汇流箱</span>
<span>逆变器</span>
<span>电网</span>
</div>
<div class="pvRightBotImg">
<div class="img1">
<img src="../assets/img/PV/pv_pic.png" alt="">
</div>
<div class="imgCom">
<img src="../assets/img/PV/pv_arrow_pic.png" alt="">
</div>
<div class="img2">
<img src="../assets/img/PV/pv_box_pic.png" alt="">
</div>
<div class="imgCom">
<img src="../assets/img/PV/pv_arrow_pic.png" alt="">
</div>
<div class="img3">
<img src="../assets/img/PV/pv_nb_pic.png" alt="">
</div>
<div class="imgCom">
<img src="../assets/img/PV/pv_arrow_pic.png" alt="">
</div>
<div>
<img src="../assets/img/PV/pv_elec_pic.png" alt="">
</div>
</div>
</div>
<div class="pvRightDetail_bot">
<div class="pvRightBotTitle">
<span>功率曲线</span>
</div>
<div class="pvRightBotEchart" id="pvEchart"></div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import api from "api/index";
import * as echarts from "echarts";
export default {
props: {
windturbine: {
type: Object,
default: () => {
return {}
},
},
},
watch: {
windturbine: {
handler: function (json) {
if (json) {
// this.initData();
}
},
},
},
data() {
return {
nbqData: [],
echartsData: [],
pvTitle: [],
startTimer: null,
echartTimer: null,
loading: false
};
},
computed: {
echartHeight() {
return {
'height': document.documentElement.clientHeight-30 + 'px'
}
}
},
created() {
},
methods: {
opened() {
this.getPvStationInfoData()
this.loading = true
},
// 获取光伏详情配置
getPvStationInfoData() {
let that = this
that.echartsData = []
api.getStationInfoData().then(datas =>{
if (datas && datas.data) {
console.log(datas)
for(let i in datas.data) {
if (that.windturbine.station === i) {
this.startTimer = setInterval(() =>{
that.getPvStationData(datas.data[i].codeInfos)
}, 3000)
this.echartTimer = setInterval(() =>{
that.getEcharts(datas.data[i].codeInfos)
}, 10000)
}
}
}
})
},
// 获取光伏详情配置数据
getPvStationData(list) {
console.log('list', list)
console.log('windturbine', this.windturbine)
let code = []
list.forEach(it =>{
code.push(it.code)
})
let params = {
id: this.windturbine.id,
codes: code.join(',')
}
api.getAllPvStationData(params).then(datas =>{
if (datas && datas.data) {
list.forEach(it =>{
if (it.code) {
let codeFv = it.code.split(',')
if (codeFv.length === 1) {
for(let i in datas.data) {
if (it.code === i) {
it.value = datas.data[i].value.toFixed(2)
}
}
} else if (codeFv.length > 1) {
for(let j =0; j<codeFv.length; j++) {
let codeVal = 0
for(let i in datas.data) {
if (codeFv[j] === i) {
codeVal += datas.data[i].value
}
}
it.value = codeVal.toFixed(2)
}
}
} else {
it.value = 0.00
}
})
this.nbqData = list
}
})
},
// 获取曲线数据
getEcharts(data) {
let end = new Date().getTime()
for(let i =0; i<data.length; i++) {
let it = data[i]
if (it.type) {
let params = {
id: this.windturbine.id,
code: it.code,
startTime: end - 8*60*60*1000,
endTime: end,
interval: 60
}
api.getAllPvHistoryData(params).then(datas =>{
let obj = {
name: it.name,
type: it.type,
series: datas.data
}
this.echartsData.push(obj)
if (this.echartsData.length === 3) {
this.changeDataFormat(this.echartsData)
}
})
}
}
},
changeDataFormat(datas) {
let series = []
let xAxis = []
let legend = []
console.log('datas', datas)
datas.forEach((it, index) =>{
legend.push(it.name)
if (index === 0) {
it.series.forEach(ic =>{
let time = this.getTime(new Date(ic.ts))
xAxis.push(time)
})
}
let oneSeries = []
it.series.forEach(iv =>{
oneSeries.push(iv.value)
})
let seriesObj = {
name: it.name,
type: 'line',
data: oneSeries.map(ib => {
return ib.toFixed(2)
}),
symbol: 'none'
}
series.push(seriesObj)
})
console.log('series', series)
console.log('xAxis', xAxis)
console.log('legend', legend)
this.getglobalLine('pvEchart', xAxis, legend, series)
},
getTime(date){
var h = date.getHours();
h=h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second=date.getSeconds();
second=second < 10 ? ('0' + second) : second;
return h + ':' + minute + ':' + second;
},
closed(){
clearInterval(this.startTimer);
clearInterval(this.echartTimer);
this.startTimer = null
this.echartTimer = null
},
getglobalLine(name, xAxis, legend, series) {
let option = {
backgroundColor: '#232d38',
tooltip: {
trigger: 'axis'
},
legend: {
data: legend
},
grid: {
left: '5%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: series
};
// 基于准备好的dom，初始化echarts实例
let dom = document.getElementById(name);
dom.removeAttribute("_echarts_instance_")
let myChart = echarts.init(dom, 'dark');
myChart.setOption(option);
this.loading = false
window.addEventListener("resize", function () {
myChart.resize()
})
},
}
};
</script>
<style lang="less" scoped>
.pvDetail {
background-color: black;
margin-top: -30px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: -30px;
border-bottom: 20px solid rgb(36, 36, 36);
display: flex;
padding: 5px 10px;
.pvLeftDetail{
width: 20%;
.commonSty{
height: 40px;
background:#232d38;
border-radius: 10px;
margin-top: 10px;
span{
color: #fff;
position: relative;
top: 8px;
left: 16px;
}
}
.titleFont{
width: calc(100% - 20px);
font-size: 16px;
display: flex;
padding-right: 20px;
justify-content: space-between;
}
.arrSty{
display: flex;
justify-content: space-between;
span{
font-size: 14px;
}
.arrName{
width: 40%;
span{
color: #c3c3c3;
}
}
.arrMsg{
width: 60%;
display: flex;
justify-content: end;
padding-right: 20px;
span{
display: inline-block;
}
}
}
}
.pvRightDetail{
width: calc(80% - 10px);
padding-left: 10px;
.pvRightDetail_top{
background:#232d38;
border-radius: 10px;
margin-top: 10px;
.pvRightTopTitle{
display: flex;
justify-content: space-around;
height: 30px;
color: #253443;
border-bottom: 1px solid #5c5b5b;
padding: 5px 0;
margin-bottom: 10px;
span{
color: #fff;
margin-top: 3px;
}
}
.pvRightBotImg{
display: flex;
justify-content: space-around;
padding: 50px 0;
.img1{
margin-top: 40px;
}
.img2{
margin-top: 35px;
}
.img3{
margin-top: 20px;
}
.imgCom{
margin-top: 50px;
}
}
}
.pvRightDetail_bot{
background:#232d38;
border-radius: 10px;
margin-top: 10px;
height: 60%;
.pvRightBotTitle{
text-align: center;
height: 20px;
color: #253443;
border-bottom: 1px solid #5c5b5b;
padding: 10px 0;
margin-bottom: 10px;
span{
color: #fff;
}
}
.pvRightBotEchart{
width: 100%;
// height: calc(100% - 70px);
height: 380px;
}
}
}
}
</style>
<style lang="less">
.my-info-dialog{
margin-top: 10vh !important;
}
</style>