谐波监测点目录搭建

2024-02-28 14:36:55 +08:00
parent 4615b48ee4
commit 279db34690
15 changed files with 896 additions and 1846 deletions
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
@@ -0,0 +1,173 @@
+<template>
+    <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>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
+    </div>
+</template>
+<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'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+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
+            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: [
+                    {
+                        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(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+
+onMounted(() => {
+    init()
+})
+
+</script>
+<style></style>