持续时间概率分布

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue

@@ -1,10 +1,172 @@
 <template>
-    <div class='default-main'>
+    <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 { ref } from 'vue'
+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 '@/views/pms/voltageSags/monitoringPoint/online/store'
+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.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>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue

@@ -1,22 +1,22 @@
 <template>
     <el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
-        <el-tab-pane label='ITIC曲线分析' name='1' >
+        <el-tab-pane label='ITIC曲线分析' name='1'>
-            <ITICquxianfenxi />
+            <ITICquxianfenxi v-if='activeName === "1"' />
         </el-tab-pane>
-        <el-tab-pane label='SEMI F47 分析' name='2' >
+        <el-tab-pane label='SEMI F47 分析' name='2'>
             <SEMIF47fenxi v-if='activeName === "2"' />
         </el-tab-pane>
-        <el-tab-pane label='电压暂降表及密度' name='3' >
+        <el-tab-pane label='电压暂降表及密度' name='3'>
             <Dianyazanjiangbiaojimidu v-if='activeName === "3"' />
         </el-tab-pane>
-        <el-tab-pane label='暂降分布统计' name='4' >
+        <el-tab-pane label='暂降分布统计' name='4'>
-            <Zanjiangfenbutongji />
+            <Zanjiangfenbutongji v-if='activeName === "4"' />
         </el-tab-pane>
-        <el-tab-pane label='暂降幅值概率分布' name='5' >
+        <el-tab-pane label='暂降幅值概率分布' name='5'>
-            <Zanjiangfuzhigailvfenbu />
+            <Zanjiangfuzhigailvfenbu v-if='activeName === "5"' />
         </el-tab-pane>
-        <el-tab-pane label='持续时间概率分布' name='6' >
+        <el-tab-pane label='持续时间概率分布' name='6'>
-            <Chixushijiangailvfenbu />
+            <Chixushijiangailvfenbu v-if='activeName === "6"' />
         </el-tab-pane>
     </el-tabs>
 </template>
@@ -30,18 +30,20 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
 import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
 import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
 
-const activeName = ref('5')
+const activeName = ref('6')
 const height = mainHeight(84)
 
 </script>
 <style lang='scss'>
 .event-statistics {
-    .el-tabs__header.is-left{
+    .el-tabs__header.is-left {
         margin-right: 0;
     }
-    .el-tabs__content{
+
+    .el-tabs__content {
         height: 100%;
-        .el-tab-pane{
+
+        .el-tab-pane {
             height: 100%;
         }
     }