谐波频谱

src/api/harmonic-boot/inHarm.ts

@@ -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
+    })
+}

src/components/echarts/MyEchart.vue

@@ -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'])

src/components/echarts/color.ts

@@ -1,4 +1,4 @@
-export const color = [
+export let color = [
     '#07CCCA',
     '#00BFF5',
     '#FFBF00',

src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue

@@ -1,173 +1,112 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
+    <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline='true'>
+        <el-form :inline="true">
-            <el-form-item label='日期'>
+            <el-form-item label="日期">
-                <DatePicker ref='datePickerRef'></DatePicker>
+                <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'>
+        <vxe-table :data="analysisData" v-bind="defaultAttribute">
-            <my-echart :options='options' />
+            <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,
+    id: monitoringPoint.state.lineId,
-    startTime: '',
+    searchBeginTime: '',
-    endTime: ''
+    searchEndTime: '',
+    harmState: 0
 })
+const analysisData = ref<any>([])
 const options = ref({})
 
 const init = () => {
     loading.value = true
-    formData.lineIndex = monitoringPoint.state.lineId
+    formData.id = monitoringPoint.state.lineId
-    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
-    formData.endTime = datePickerRef.value.timeValue[1]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
-    getProbabilityDistribution(formData).then(
+    getHarmInHarmData(formData).then((res: any) => {
-        (res: any) => {
+        analysisData.value = []
-            let data = res.data
+        if (formData.harmState === 1) {
-            let sisttime = data.sisttime
+            analysisData.value.push(
-            let persisttime = data.persisttime
+                {
-            options.value = {
+                    name: '谐波电流幅值(A)',
-                backgroundColor: '#fff', //背景色,
+                    originData: res.data.harmInHarmValue.map((item: number) => item.toFixed(3)),
-                title: {
+                    ...res.data.harmInHarmValue.map((item: number) => item.toFixed(3))
-                    text: '持续时间的概率分布函数',
-                    x: 'center'
                 },
-                legend: {
+                {
-                    show: true,
+                    name: '国标限值(A)',
-                    left: 10,
+                    originData: res.data.harmInOverLimit,
-                    data: ['概率分布', '占比'],
+                    ...res.data.harmInOverLimit
-
-                    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: [
-                    {
-                        type: 'category',
-                        name: '暂降幅值',
-                        nameGap: 10,
-                        nameTextStyle: {
-                            fontSize: 12
-                        },
-                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '概率分布',
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLabel: {
-                            formatter: '{value}%'
-                        },
-                        axisLine: {
-                            show: true
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                // 使用深浅的间隔色
-                                type: 'dashed',
-                                opacity: 0.5
-                            }
-                        }
-                    },
-                    {
-                        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
                 }
-            }
+            )
-            nextTick(() => {
+        } else {
-                loading.value = false
+            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 = {
+            xAxis: {
+                type: 'category',
+                data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: analysisData.value.map((item: any) => {
+                return {
+                    name: item.name,
+                    data: item.originData,
+                    type: 'bar'
+                }
+            }),
+            options: {
+                dataZoom: null
+            }
+        }
+        nextTick(() => {
+            loading.value = false
+        })
+    })
 }
-
-
 onMounted(() => {
     init()
 })
-
 </script>
-<style></style>