|
@@ -18,7 +18,7 @@
|
|
|
</div>
|
|
|
<div class="arrMsg">
|
|
|
<span style="padding-right: 20px">{{item.value}}</span>
|
|
|
- <span style="width: 20%;color: #c3c3c3">{{item.tes}}</span>
|
|
|
+ <span style="width: 20%;color: #c3c3c3">{{item.unit}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,124 +88,165 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- nbqData: []
|
|
|
+ nbqData: [],
|
|
|
+ echartsData: [],
|
|
|
+ pvTitle: [],
|
|
|
+ startTimer: null,
|
|
|
+ echartTimer: null,
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ echartHeight() {
|
|
|
+ return {
|
|
|
+ 'height': document.documentElement.clientHeight-30 + 'px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
- this.nbqData = [
|
|
|
- {
|
|
|
- name: '交流电压',
|
|
|
- value: 0,
|
|
|
- tes: 'V'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '交流电流',
|
|
|
- value: 0,
|
|
|
- tes: 'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '直流电压',
|
|
|
- value: 0,
|
|
|
- tes: 'V'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '直流电流',
|
|
|
- value: 0,
|
|
|
- tes: 'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '并网功率',
|
|
|
- value: 0,
|
|
|
- tes: 'KW'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '电网频率',
|
|
|
- value: 0,
|
|
|
- tes: 'Hz'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '功率因数',
|
|
|
- value: 0,
|
|
|
- tes: ''
|
|
|
- },
|
|
|
- {
|
|
|
- name: '日发电量',
|
|
|
- value: 0,
|
|
|
- tes: 'Kwh'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '月发电量',
|
|
|
- value: 0,
|
|
|
- tes: 'Kwh'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '年发电量',
|
|
|
- value: 0,
|
|
|
- tes: 'Kwh'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '累计发电量',
|
|
|
- value: 0,
|
|
|
- tes: 'Kwh'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '逆变器温度',
|
|
|
- value: 0,
|
|
|
- tes: '℃'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '效率',
|
|
|
- value: 0,
|
|
|
- tes: '%'
|
|
|
- },
|
|
|
- ]
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
opened() {
|
|
|
- this.$nextTick(() =>{
|
|
|
- this.getEcharts()
|
|
|
+ this.getPvStationInfoData()
|
|
|
+ },
|
|
|
+ // 获取光伏详情配置
|
|
|
+ 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
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- closed(){},
|
|
|
// 获取曲线数据
|
|
|
- getEcharts() {
|
|
|
- let series = [
|
|
|
- {
|
|
|
- name: 'Email',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Union Ads',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Video Ads',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Direct',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Search Engine',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
+ 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 xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
- let legend = ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
|
+ 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',
|
|
@@ -227,13 +268,13 @@ export default {
|
|
|
data: xAxis
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '万千瓦时(Wkw/h)'
|
|
|
+ type: 'value'
|
|
|
},
|
|
|
series: series
|
|
|
};
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
let dom = document.getElementById(name);
|
|
|
+ dom.removeAttribute("_echarts_instance_")
|
|
|
let myChart = echarts.init(dom, 'dark');
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
@@ -339,6 +380,7 @@ export default {
|
|
|
background:#232d38;
|
|
|
border-radius: 10px;
|
|
|
margin-top: 10px;
|
|
|
+ height: 60%;
|
|
|
.pvRightBotTitle{
|
|
|
text-align: center;
|
|
|
height: 20px;
|
|
@@ -352,7 +394,7 @@ export default {
|
|
|
}
|
|
|
.pvRightBotEchart{
|
|
|
width: 100%;
|
|
|
- height: 375px;
|
|
|
+ height: calc(100% - 70px);
|
|
|
}
|
|
|
}
|
|
|
}
|