561 lines
15 KiB
Vue
561 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<back :pageNameFlag="pageNameFlag" :pageName='pageName'></back>
|
|
<view class="spectrum-block">
|
|
<view class="line-block">
|
|
{{lineInfo.lineName}}
|
|
</view>
|
|
<view class="tab-block">
|
|
<view class="tab-click" v-if="tabNum==1">
|
|
谐波电压频谱
|
|
</view>
|
|
<view class="tab" v-else @click='changeTab(1)'>
|
|
谐波电压频谱
|
|
</view>
|
|
<view class="tab-click" v-if="tabNum==2">
|
|
谐波电流频谱
|
|
</view>
|
|
<view class="tab" v-else @click='changeTab(2)'>
|
|
谐波电流频谱
|
|
</view>
|
|
</view>
|
|
<swiper :style="{height:scrollHeight}" :current="current" @change="changeTabBySwiper" duration="300" skip-hidden-item-layout="true">
|
|
<swiper-item>
|
|
<view class="echarts-block" :style="{height:scrollHeight}">
|
|
<view class="canvasView" :style="{height:picHeight}">
|
|
<mpvue-echarts class="ec-canvas" canvasId="line" ref="lineChart" :style="{height:picHeight}"/>
|
|
</view>
|
|
<view class="legend-block">
|
|
<view class="legend-block-left">
|
|
<view class="legend-block-left-color">
|
|
|
|
</view>
|
|
<view class="legend-block-left-text">
|
|
国际限值(%)
|
|
</view>
|
|
</view>
|
|
<view class="legend-block-right">
|
|
<view class="legend-block-right-color">
|
|
|
|
</view>
|
|
<view class="legend-block-right-text">
|
|
谐波电压含有率(%)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="echarts-block" :style="{height:scrollHeight}">
|
|
<view class="canvasView" :style="{height:picHeight}">
|
|
<mpvue-echarts class="ec-canvas" canvasId="line2" ref="lineChart2" :style="{height:picHeight}"/>
|
|
</view>
|
|
<view class="legend-block">
|
|
<view class="legend-block-left">
|
|
<view class="legend-block-left-color">
|
|
|
|
</view>
|
|
<view class="legend-block-left-text">
|
|
国际限值(%)
|
|
</view>
|
|
</view>
|
|
<view class="legend-block-right">
|
|
<view class="legend-block-right-color">
|
|
|
|
</view>
|
|
<view class="legend-block-right-text">
|
|
谐波电流幅值(A)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import back from '../../components/back.vue';
|
|
import * as echarts from '@/components/echarts/echarts.simple.min.js';
|
|
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
lineInfo: {
|
|
// lineName: '测试监测点',
|
|
// lineIndex:2161
|
|
},
|
|
pageNameFlag: 1,
|
|
pageName: '谐波频谱',
|
|
scrollHeight: '',
|
|
tabNum: 1,
|
|
option:{},
|
|
winWidth:0,
|
|
current:0,
|
|
picHeight:''
|
|
}
|
|
},
|
|
methods: {
|
|
scrollH() {
|
|
var that = this;
|
|
var sys = uni.getSystemInfoSync();
|
|
var winWidth = sys.windowWidth;
|
|
var winrate = 750 / winWidth;
|
|
var winHeight = sys.windowHeight;
|
|
var statusBarHeight = sys.statusBarHeight;
|
|
that.scrollHeight = parseInt((winHeight - statusBarHeight) * winrate - 254) + 'rpx';
|
|
},
|
|
changeTab(tabNum) {
|
|
this.tabNum = tabNum;
|
|
this.current=tabNum-1;
|
|
},
|
|
changeTabBySwiper(e){
|
|
this.tabNum=e.detail.current+1;
|
|
this.current=e.detail.current;
|
|
},
|
|
getHarmRateV() {
|
|
var that = this;
|
|
uni.request({
|
|
url: that.serverUrl+'/realtimeinfo/getHarmRateV',
|
|
method:'POST',
|
|
data: {
|
|
lineIndex:that.lineInfo.lineIndex
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
sslVerify:false,
|
|
success: (res) => {
|
|
if(res.data.resultCode=='10000'){
|
|
var list1=[];
|
|
var list2=[];
|
|
var result = res.data.data;
|
|
list1.push(result.harmRateV.v2);
|
|
list1.push(result.harmRateV.v3);
|
|
list1.push(result.harmRateV.v4);
|
|
list1.push(result.harmRateV.v5);
|
|
list1.push(result.harmRateV.v6);
|
|
list1.push(result.harmRateV.v7);
|
|
list1.push(result.harmRateV.v8);
|
|
list1.push(result.harmRateV.v9);
|
|
list1.push(result.harmRateV.v10);
|
|
list1.push(result.harmRateV.v11);
|
|
list1.push(result.harmRateV.v12);
|
|
list1.push(result.harmRateV.v13);
|
|
list1.push(result.harmRateV.v14);
|
|
list1.push(result.harmRateV.v15);
|
|
list1.push(result.harmRateV.v16);
|
|
list1.push(result.harmRateV.v17);
|
|
list1.push(result.harmRateV.v18);
|
|
list1.push(result.harmRateV.v19);
|
|
list1.push(result.harmRateV.v20);
|
|
list1.push(result.harmRateV.v21);
|
|
list1.push(result.harmRateV.v22);
|
|
list1.push(result.harmRateV.v23);
|
|
list1.push(result.harmRateV.v24);
|
|
list1.push(result.harmRateV.v25);
|
|
list2.push(result.vharm.uharm2);
|
|
list2.push(result.vharm.uharm3);
|
|
list2.push(result.vharm.uharm4);
|
|
list2.push(result.vharm.uharm5);
|
|
list2.push(result.vharm.uharm6);
|
|
list2.push(result.vharm.uharm7);
|
|
list2.push(result.vharm.uharm8);
|
|
list2.push(result.vharm.uharm9);
|
|
list2.push(result.vharm.uharm10);
|
|
list2.push(result.vharm.uharm11);
|
|
list2.push(result.vharm.uharm12);
|
|
list2.push(result.vharm.uharm13);
|
|
list2.push(result.vharm.uharm14);
|
|
list2.push(result.vharm.uharm15);
|
|
list2.push(result.vharm.uharm16);
|
|
list2.push(result.vharm.uharm17);
|
|
list2.push(result.vharm.uharm18);
|
|
list2.push(result.vharm.uharm19);
|
|
list2.push(result.vharm.uharm20);
|
|
list2.push(result.vharm.uharm21);
|
|
list2.push(result.vharm.uharm22);
|
|
list2.push(result.vharm.uharm23);
|
|
list2.push(result.vharm.uharm24);
|
|
list2.push(result.vharm.uharm25);
|
|
that.drawVoltage(list1,list2);
|
|
}else{
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '查询失败，请重试',
|
|
confirmText:'重试',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.getHarmRateV();
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
fail() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '网络或服务器异常，请稍后再试',
|
|
showCancel:false,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
drawVoltage(list1, list2) {
|
|
var that = this ;
|
|
that.option={
|
|
// title: {
|
|
// text: 'Wheater Statistics'
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'axis',
|
|
// axisPointer: {
|
|
// type: 'shadow'
|
|
// }
|
|
// },
|
|
// legend: {
|
|
// // data:['国际限值(%)','谐波电压含有率(%)']
|
|
// data: [{
|
|
// name: '国际限值(%)',
|
|
// icon: 'triangle',
|
|
// // 设置文本为红色
|
|
// textStyle: {
|
|
// color: 'red'
|
|
// }
|
|
// },
|
|
// {
|
|
// name: '谐波电压含有率(%)',
|
|
// icon: 'triangle',
|
|
// // 设置文本为红色
|
|
// textStyle: {
|
|
// color: 'red'
|
|
// }
|
|
// }]
|
|
// },
|
|
// grid: {
|
|
// top:200
|
|
// },
|
|
// toolbox: {
|
|
|
|
// },
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '谐波电压含有率(%)',
|
|
nameGap:30,
|
|
nameLocation:'center',
|
|
axisLabel: {
|
|
formatter: function (value, index) {
|
|
return value.toFixed(2)
|
|
},
|
|
margin:10
|
|
}
|
|
},
|
|
yAxis: [{
|
|
name:'(次)',
|
|
nameLocation:'start',
|
|
type: 'category',
|
|
inverse: true,
|
|
data: ['2', '3','4', '5','6', '7','8', '9','10', '11','12', '13','14', '15','16', '17','18', '19','20', '21','21', '23','24', '25'],
|
|
},{
|
|
show:false,
|
|
type: 'category',
|
|
inverse: true,
|
|
data: ['2', '3','4', '5','6', '7','8', '9','10', '11','12', '13','14', '15','16', '17','18', '19','20', '21','21', '23','24', '25'],
|
|
}],
|
|
series: [{
|
|
name: '国际限值(%)',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position:'right'
|
|
}
|
|
},
|
|
data: list2,
|
|
yAxisIndex:0,
|
|
itemStyle:{
|
|
color:'#DAA520',
|
|
position:'top'
|
|
},
|
|
barWidth:'90%',
|
|
},
|
|
{
|
|
name: '谐波电压含有率(%)',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textBorderColor: '#333',
|
|
textBorderWidth: 2,
|
|
position:'right'
|
|
}
|
|
},
|
|
data: list1,
|
|
yAxisIndex:1,
|
|
itemStyle:{
|
|
color:'#2E8B57'
|
|
},
|
|
barWidth:'65%'
|
|
}
|
|
]
|
|
}
|
|
var sys = uni.getSystemInfoSync();
|
|
var winWidth = sys.windowWidth;
|
|
var winHeight = sys.windowHeight;
|
|
var winrate = 750 / winWidth;
|
|
var picHeight = winHeight-400/winrate;
|
|
that.picHeight =(picHeight*winrate)+'rpx'
|
|
let canvas = that.$refs.lineChart.canvas
|
|
echarts.setCanvasCreator(() => canvas);
|
|
let lineChart = echarts.init(canvas, null, {
|
|
width: winWidth,
|
|
height: picHeight
|
|
})
|
|
canvas.setChart(lineChart)
|
|
lineChart.setOption(that.option)
|
|
that.$refs.lineChart.setChart(lineChart)
|
|
},
|
|
getHarmRateI() {
|
|
var that = this;
|
|
uni.request({
|
|
url: that.serverUrl+'/realtimeinfo/getHarmRateI',
|
|
method:'POST',
|
|
data: {
|
|
lineIndex:that.lineInfo.lineIndex
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
sslVerify:false,
|
|
success: (res) => {
|
|
if(res.data.resultCode=='10000'){
|
|
var list1=[];
|
|
var list2=[];
|
|
var result = res.data.data;
|
|
list1.push(result.harmRateI.i2);
|
|
list1.push(result.harmRateI.i3);
|
|
list1.push(result.harmRateI.i4);
|
|
list1.push(result.harmRateI.i5);
|
|
list1.push(result.harmRateI.i6);
|
|
list1.push(result.harmRateI.i7);
|
|
list1.push(result.harmRateI.i8);
|
|
list1.push(result.harmRateI.i9);
|
|
list1.push(result.harmRateI.i10);
|
|
list1.push(result.harmRateI.i11);
|
|
list1.push(result.harmRateI.i12);
|
|
list1.push(result.harmRateI.i13);
|
|
list1.push(result.harmRateI.i14);
|
|
list1.push(result.harmRateI.i15);
|
|
list1.push(result.harmRateI.i16);
|
|
list1.push(result.harmRateI.i17);
|
|
list1.push(result.harmRateI.i18);
|
|
list1.push(result.harmRateI.i19);
|
|
list1.push(result.harmRateI.i20);
|
|
list1.push(result.harmRateI.i21);
|
|
list1.push(result.harmRateI.i22);
|
|
list1.push(result.harmRateI.i23);
|
|
list1.push(result.harmRateI.i24);
|
|
list1.push(result.harmRateI.i25);
|
|
list2.push(result.iharm.iharm2);
|
|
list2.push(result.iharm.iharm3);
|
|
list2.push(result.iharm.iharm4);
|
|
list2.push(result.iharm.iharm5);
|
|
list2.push(result.iharm.iharm6);
|
|
list2.push(result.iharm.iharm7);
|
|
list2.push(result.iharm.iharm8);
|
|
list2.push(result.iharm.iharm9);
|
|
list2.push(result.iharm.iharm10);
|
|
list2.push(result.iharm.iharm11);
|
|
list2.push(result.iharm.iharm12);
|
|
list2.push(result.iharm.iharm13);
|
|
list2.push(result.iharm.iharm14);
|
|
list2.push(result.iharm.iharm15);
|
|
list2.push(result.iharm.iharm16);
|
|
list2.push(result.iharm.iharm17);
|
|
list2.push(result.iharm.iharm18);
|
|
list2.push(result.iharm.iharm19);
|
|
list2.push(result.iharm.iharm20);
|
|
list2.push(result.iharm.iharm21);
|
|
list2.push(result.iharm.iharm22);
|
|
list2.push(result.iharm.iharm23);
|
|
list2.push(result.iharm.iharm24);
|
|
list2.push(result.iharm.iharm25);
|
|
that.drawCurrent(list1,list2);
|
|
}else{
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '查询失败，请重试',
|
|
confirmText:'重试',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.getHarmRateI();
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
fail() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '网络或服务器异常，请稍后再试',
|
|
showCancel:false,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
drawCurrent(list1, list2) {
|
|
var that = this ;
|
|
that.option={
|
|
// title: {
|
|
// text: 'Wheater Statistics'
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'axis',
|
|
// axisPointer: {
|
|
// type: 'shadow'
|
|
// }
|
|
// },
|
|
// legend: {
|
|
// // data:['国际限值(%)','谐波电压含有率(%)']
|
|
// data: [{
|
|
// name: '国际限值(%)',
|
|
// icon: 'triangle',
|
|
// // 设置文本为红色
|
|
// textStyle: {
|
|
// color: 'red'
|
|
// }
|
|
// },
|
|
// {
|
|
// name: '谐波电压含有率(%)',
|
|
// icon: 'triangle',
|
|
// // 设置文本为红色
|
|
// textStyle: {
|
|
// color: 'red'
|
|
// }
|
|
// }]
|
|
// },
|
|
// grid: {
|
|
// top:200
|
|
// },
|
|
// toolbox: {
|
|
|
|
// },
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '谐波电流幅值(A)',
|
|
nameGap:30,
|
|
nameLocation:'center',
|
|
axisLabel: {
|
|
formatter: function (value, index) {
|
|
return value.toFixed(2)
|
|
},
|
|
margin:10
|
|
}
|
|
},
|
|
yAxis: [{
|
|
name:'(次)',
|
|
nameLocation:'start',
|
|
type: 'category',
|
|
inverse: true,
|
|
data: ['2', '3','4', '5','6', '7','8', '9','10', '11','12', '13','14', '15','16', '17','18', '19','20', '21','21', '23','24', '25'],
|
|
},{
|
|
show:false,
|
|
type: 'category',
|
|
inverse: true,
|
|
data: ['2', '3','4', '5','6', '7','8', '9','10', '11','12', '13','14', '15','16', '17','18', '19','20', '21','21', '23','24', '25'],
|
|
}],
|
|
series: [{
|
|
name: '国际限值(%)',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position:'right'
|
|
}
|
|
},
|
|
data: list2,
|
|
yAxisIndex:0,
|
|
itemStyle:{
|
|
color:'#DAA520',
|
|
position:'top'
|
|
},
|
|
barWidth:'90%',
|
|
},
|
|
{
|
|
name: '谐波电流含有率(%)',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textBorderColor: '#333',
|
|
textBorderWidth: 2,
|
|
position:'right'
|
|
}
|
|
},
|
|
data: list1,
|
|
yAxisIndex:1,
|
|
itemStyle:{
|
|
color:'#2E8B57'
|
|
},
|
|
barWidth:'65%'
|
|
}
|
|
]
|
|
}
|
|
var sys = uni.getSystemInfoSync();
|
|
var winWidth = sys.windowWidth;
|
|
var winHeight = sys.windowHeight;
|
|
var winrate = 750 / winWidth;
|
|
var picHeight = winHeight-400/winrate;
|
|
that.picHeight =(picHeight*winrate)+'rpx'
|
|
let canvas = that.$refs.lineChart2.canvas
|
|
echarts.setCanvasCreator(() => canvas);
|
|
let lineChart2 = echarts.init(canvas, null, {
|
|
width: winWidth,
|
|
height: picHeight
|
|
})
|
|
canvas.setChart(lineChart2)
|
|
lineChart2.setOption(that.option)
|
|
that.$refs.lineChart2.setChart(lineChart2)
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
var that = this;
|
|
that.lineInfo = JSON.parse(e.lineInfo)
|
|
that.scrollH();
|
|
},
|
|
onReady() {
|
|
var that = this;
|
|
that.getHarmRateV();
|
|
that.getHarmRateI();
|
|
},
|
|
components: {
|
|
back,
|
|
mpvueEcharts
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("spectrum.css");
|
|
</style>
|