持续时间概率分布
This commit is contained in:
仲么了
@@ -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>
|
||||
|
||||
@@ -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' >
|
||||
<ITICquxianfenxi />
|
||||
<el-tab-pane label='ITIC曲线分析' name='1'>
|
||||
<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' >
|
||||
<Dianyazanjiangbiaojimidu v-if='activeName === "3"' />
|
||||
<el-tab-pane label='电压暂降表及密度' name='3'>
|
||||
<Dianyazanjiangbiaojimidu v-if='activeName === "3"' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='暂降分布统计' name='4' >
|
||||
<Zanjiangfenbutongji />
|
||||
<el-tab-pane label='暂降分布统计' name='4'>
|
||||
<Zanjiangfenbutongji v-if='activeName === "4"' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='暂降幅值概率分布' name='5' >
|
||||
<Zanjiangfuzhigailvfenbu />
|
||||
<el-tab-pane label='暂降幅值概率分布' name='5'>
|
||||
<Zanjiangfuzhigailvfenbu v-if='activeName === "5"' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='持续时间概率分布' name='6' >
|
||||
<Chixushijiangailvfenbu />
|
||||
<el-tab-pane label='持续时间概率分布' name='6'>
|
||||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user