谐波频谱
This commit is contained in:
仲么了
9
src/api/harmonic-boot/inHarm.ts
Normal file
9
src/api/harmonic-boot/inHarm.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getHarmInHarmData(data: any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/inHarm/getHarmInHarmData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -9,7 +9,10 @@ import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
|
||||
const config = useConfig()
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options'])
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const color = [
|
||||
export let color = [
|
||||
'#07CCCA',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
|
||||
@@ -1,158 +1,102 @@
|
||||
<template>
|
||||
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||
<el-form :inline='true'>
|
||||
<el-form-item label='日期'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标">
|
||||
<el-radio-group v-model="formData.harmState">
|
||||
<el-radio-button :label="0">谐波电压含有率</el-radio-button>
|
||||
<el-radio-button :label="1">谐波电流幅值</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type='primary' @click='init'>查询</el-button>
|
||||
<el-button type="primary" @click="init">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1;' class='mt10'>
|
||||
<my-echart :options='options' />
|
||||
<vxe-table :data="analysisData" v-bind="defaultAttribute">
|
||||
<vxe-column field="name" title="指标" width="140px"></vxe-column>
|
||||
<vxe-column
|
||||
:field="index.toString()"
|
||||
:title="item + 1 + '次'"
|
||||
v-for="(item, index) in 49"
|
||||
width="80px"
|
||||
></vxe-column>
|
||||
</vxe-table>
|
||||
<div style="flex: 1" class="mt10">
|
||||
<my-echart :options="options" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
lineIndex: monitoringPoint.state.lineId,
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
id: monitoringPoint.state.lineId,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
harmState: 0
|
||||
})
|
||||
const analysisData = ref<any>([])
|
||||
const options = ref({})
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.lineIndex = monitoringPoint.state.lineId
|
||||
formData.startTime = datePickerRef.value.timeValue[0]
|
||||
formData.endTime = datePickerRef.value.timeValue[1]
|
||||
getProbabilityDistribution(formData).then(
|
||||
(res: any) => {
|
||||
let data = res.data
|
||||
let sisttime = data.sisttime
|
||||
let persisttime = data.persisttime
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
getHarmInHarmData(formData).then((res: any) => {
|
||||
analysisData.value = []
|
||||
if (formData.harmState === 1) {
|
||||
analysisData.value.push(
|
||||
{
|
||||
name: '谐波电流幅值(A)',
|
||||
originData: res.data.harmInHarmValue.map((item: number) => item.toFixed(3)),
|
||||
...res.data.harmInHarmValue.map((item: number) => item.toFixed(3))
|
||||
},
|
||||
{
|
||||
name: '国标限值(A)',
|
||||
originData: res.data.harmInOverLimit,
|
||||
...res.data.harmInOverLimit
|
||||
}
|
||||
)
|
||||
} else {
|
||||
analysisData.value.push(
|
||||
{
|
||||
name: '谐波电压含有率(%)',
|
||||
originData: res.data.harmInHarmValue.map((item: number) => item.toFixed(3)),
|
||||
...res.data.harmInHarmValue.map((item: number) => item.toFixed(3))
|
||||
},
|
||||
{
|
||||
name: '国标限值(%)',
|
||||
originData: res.data.harmInOverLimit,
|
||||
...res.data.harmInOverLimit
|
||||
}
|
||||
)
|
||||
}
|
||||
options.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
title: {
|
||||
text: '持续时间的概率分布函数',
|
||||
x: 'center'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '暂降幅值',
|
||||
nameGap: 10,
|
||||
nameTextStyle: {
|
||||
fontSize: 12
|
||||
data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
|
||||
},
|
||||
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '概率分布',
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
series: analysisData.value.map((item: any) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.originData,
|
||||
type: 'bar'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '占比',
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '概率分布',
|
||||
type: 'line',
|
||||
data: sisttime,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: persisttime,
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
}
|
||||
],
|
||||
}),
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
@@ -160,14 +104,9 @@ const init = () => {
|
||||
nextTick(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user