376 lines
8.2 KiB
Vue
376 lines
8.2 KiB
Vue
<template>
|
|
<view>
|
|
<div class="header-form">
|
|
<uni-data-select
|
|
v-model="parity"
|
|
:localdata="parityOption"
|
|
@change="initEcharts"
|
|
style="flex: 1"
|
|
:clear="false"
|
|
></uni-data-select>
|
|
<!-- <uni-data-checkbox v-model="dataRadio" :localdata="dataOptions" @change="initEcharts"></uni-data-checkbox> -->
|
|
<uni-data-select
|
|
v-model="dataRadio"
|
|
:localdata="dataOptions"
|
|
@change="initEcharts"
|
|
style="flex: 2; margin-left: 20rpx"
|
|
:clear="false"
|
|
></uni-data-select>
|
|
</div>
|
|
<view class="charts-box">
|
|
<!-- <view class="data-time">{{ time }}</view> -->
|
|
<!-- <qiun-data-charts type="bar" :ontouch="true" :opts="opts" :chartData="chartData" /> -->
|
|
<view style="width: 100%; height: 100%"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
export default {
|
|
props: {
|
|
basicData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
dataTime: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
parityOption: [
|
|
{
|
|
text: '奇次',
|
|
value: 2,
|
|
},
|
|
{
|
|
text: '偶次',
|
|
value: 1,
|
|
},
|
|
],
|
|
parity: 2,
|
|
time: '',
|
|
dataOptions: [],
|
|
dataRadio: 0,
|
|
renderData: {
|
|
电网侧: {
|
|
Apf_HarmI: {},
|
|
Apf_HarmUR: {},
|
|
},
|
|
负载侧: {
|
|
Apf_HarmI: {},
|
|
Apf_HarmUR: {},
|
|
},
|
|
},
|
|
chartData: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
option: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
confine: true,
|
|
},
|
|
color: [
|
|
'#1890FF',
|
|
'#91CB74',
|
|
'#FAC858',
|
|
'#EE6666',
|
|
'#73C0DE',
|
|
'#3CA272',
|
|
'#FC8452',
|
|
'#9A60B4',
|
|
'#ea7ccc',
|
|
],
|
|
legend: {
|
|
data: ['电网侧', '负载侧'],
|
|
left: 0,
|
|
},
|
|
grid: {
|
|
left: 10,
|
|
right: 10,
|
|
bottom: 15,
|
|
top: 30,
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'value',
|
|
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
minInterval: 0.5,
|
|
position: 'top', // 设置 x 轴在顶部
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: [],
|
|
splitLine: { show: true },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999999',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#666666',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '电网侧',
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
color: '#666',
|
|
show: true,
|
|
position: 'right',
|
|
fontSize: '8px',
|
|
|
|
},
|
|
},
|
|
barGap: '10%',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '负载侧',
|
|
type: 'bar',
|
|
barCateGoryGap:20,
|
|
label: {
|
|
normal: {
|
|
color: '#666',
|
|
show: true,
|
|
position: 'right',
|
|
fontSize: '8px',
|
|
},
|
|
},
|
|
|
|
data: [],
|
|
},
|
|
],
|
|
},
|
|
opts: {
|
|
// enableScroll: true,
|
|
dataLabel: false,
|
|
color: [
|
|
'#1890FF',
|
|
'#91CB74',
|
|
'#FAC858',
|
|
'#EE6666',
|
|
'#73C0DE',
|
|
'#3CA272',
|
|
'#FC8452',
|
|
'#9A60B4',
|
|
'#ea7ccc',
|
|
],
|
|
padding: [0, 20, 0, 0],
|
|
legend: {
|
|
position: 'top',
|
|
float: 'left',
|
|
},
|
|
xAxis: {
|
|
// disableGrid: true,
|
|
boundaryGap: 'justify',
|
|
itemCount: 8,
|
|
// scrollShow: true,
|
|
data: [
|
|
{
|
|
min: 0,
|
|
},
|
|
],
|
|
min: 0,
|
|
// max: 10,
|
|
|
|
position: 'top',
|
|
formatter: (value, index, opts) => {
|
|
console.log(123, value, index, opts)
|
|
},
|
|
},
|
|
yAxis: {},
|
|
extra: {
|
|
bar: {
|
|
type: 'group',
|
|
width: 30,
|
|
meterBorde: 1,
|
|
meterFillColor: '#FFFFFF',
|
|
activeBgColor: '#000000',
|
|
activeBgOpacity: 0.08,
|
|
barBorderCircle: true,
|
|
seriesGap: 2,
|
|
categoryGap: 6,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
},
|
|
watch: {
|
|
basicData: {
|
|
handler(newVal, oldVal) {
|
|
console.log(this.basicData)
|
|
let basicData = JSON.parse(JSON.stringify(this.basicData))
|
|
// this.dataRadio = 0
|
|
this.renderData = {
|
|
电网侧: {
|
|
Apf_HarmI: {},
|
|
Apf_HarmUR: {},
|
|
},
|
|
负载侧: {
|
|
Apf_HarmI: {},
|
|
Apf_HarmUR: {},
|
|
},
|
|
}
|
|
let arr = [
|
|
{
|
|
name: '电网侧',
|
|
key: 'Apf_HarmI_Sys',
|
|
},
|
|
{
|
|
name: '电网侧',
|
|
key: 'Apf_HarmUR_Sys',
|
|
},
|
|
{
|
|
name: '负载侧',
|
|
key: 'Apf_HarmI_Load',
|
|
},
|
|
{
|
|
name: '负载侧',
|
|
key: 'Apf_HarmUR_Load',
|
|
},
|
|
]
|
|
basicData.forEach((item) => {
|
|
let have = arr.find((item2) => {
|
|
return item.statisticalName.indexOf(item2.key) > -1
|
|
})
|
|
if (!have) return
|
|
let name1 = have['name']
|
|
let name2 = have.key.split('_')[0] + '_' + have.key.split('_')[1]
|
|
if (this.renderData[name1][name2][item.phase]) {
|
|
this.renderData[name1][name2][item.phase][item.statisticalName] = item.statisticalData || 0
|
|
} else {
|
|
this.renderData[name1][name2][item.phase] = {
|
|
[item.statisticalName]: item.statisticalData || 0,
|
|
}
|
|
}
|
|
})
|
|
console.log(this.renderData)
|
|
let dataOptions = []
|
|
let type = [
|
|
{
|
|
name: '谐波电流幅值序列',
|
|
key: 'Apf_HarmI',
|
|
},
|
|
{
|
|
name: '谐波电压含有率序列',
|
|
key: 'Apf_HarmUR',
|
|
},
|
|
]
|
|
Object.keys(this.renderData['电网侧']['Apf_HarmI']).forEach((item, index) => {
|
|
type.forEach((item2) => {
|
|
dataOptions.push({
|
|
text: item + '相' + item2.name,
|
|
pointer: item2.key + '_' + item,
|
|
value: dataOptions.length,
|
|
})
|
|
})
|
|
})
|
|
this.dataOptions = dataOptions
|
|
console.log(dataOptions)
|
|
this.initEcharts()
|
|
|
|
this.time = this.$util.parseTime(this.dataTime - 8 * 60 * 60)
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
async init() {
|
|
// chart 图表实例不能存在data里
|
|
const chart = await this.$refs.chartRef.init(echarts)
|
|
chart.setOption(this.option)
|
|
},
|
|
initEcharts() {
|
|
setTimeout(() => {
|
|
if(this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]] == undefined) return
|
|
let obj = JSON.parse(
|
|
JSON.stringify(
|
|
this.renderData['电网侧']['Apf_HarmI'][Object.keys(this.renderData['电网侧']['Apf_HarmI'])[0]],
|
|
),
|
|
)
|
|
let key = this.dataOptions[this.dataRadio].pointer.split('_')
|
|
console.log(key)
|
|
let name1 = key[0] + '_' + key[1]
|
|
let name2 = key[2]
|
|
this.chartData = {
|
|
categories: Object.keys(obj)
|
|
.map((item) => {
|
|
// Apf_HarmI_Sys_36(A) 匹配36
|
|
return Number(item.match(/\d+/)[0])
|
|
})
|
|
.filter((item) => {
|
|
return item % 2 === this.parity - 1
|
|
}),
|
|
series: [
|
|
{
|
|
name: '电网侧',
|
|
data: Object.values(this.renderData['电网侧'][name1][name2]).filter((item, index) => {
|
|
return index % 2 === this.parity - 1
|
|
}),
|
|
},
|
|
{
|
|
name: '负载侧',
|
|
data: Object.values(this.renderData['负载侧'][name1][name2]).filter((item, index) => {
|
|
return index % 2 === this.parity - 1
|
|
}),
|
|
},
|
|
],
|
|
}
|
|
// /传值到echart
|
|
this.option.yAxis[0].data = Object.keys(obj)
|
|
.map((item) => {
|
|
// Apf_HarmI_Sys_36(A) 匹配36
|
|
return Number(item.match(/\d+/)[0])
|
|
})
|
|
.filter((item) => {
|
|
return item % 2 === this.parity - 1
|
|
}).reverse()
|
|
this.option.series[0].data = Object.values(this.renderData['电网侧'][name1][name2]).filter(
|
|
(item, index) => {
|
|
return index % 2 === this.parity - 1
|
|
},
|
|
).reverse().map(item=>item.toFixed(2))
|
|
this.option.series[1].data = Object.values(this.renderData['负载侧'][name1][name2]).filter(
|
|
(item, index) => {
|
|
return index % 2 === this.parity - 1
|
|
},
|
|
).reverse().map(item=>item.toFixed(2))
|
|
this.init()
|
|
}, 100)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.charts-box {
|
|
margin-top: 20rpx;
|
|
height: 100vh;
|
|
.data-time {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
margin-top: 18rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.header-form {
|
|
display: flex;
|
|
}
|
|
</style>
|