Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

告警数据统计

Browse Source
This commit is contained in:
仲么了
2024-03-01 15:11:16 +08:00
parent df68b7bcd2
commit cc515b627e
5 changed files with 444 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/harmonic-boot/normLimit.ts Normal file
View File

@@ -0,0 +1,16 @@
import request from '@/utils/request'
export function getHistoryTableData(data:any) {
return request({
url: '/harmonic-boot/normLimit/getHistoryTableData',
method: 'post',
data: data
})
}
export function getHistoryLineData(data:any) {
return request({
url: '/harmonic-boot/harmonic/getHistoryLineData',
method: 'post',
data: data
})
}

16
src/components/secondSheet/index.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="second-sheet">
<slot></slot>
</div>
</template>
<!-- 注意：父元素要有定位属性 -->
<style lang="scss">
.second-sheet {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
</style>

559
src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue
View File

@@ -1,173 +1,430 @@
<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%; position: relative" v-loading="loading">
<el-form :inline="true">
<el-form-item label="多监测点">
<el-checkbox v-model="checked" @change="checkChange" />
</el-form-item>
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="指标类型:">
<el-select
v-model="formData.condition"
multiple
collapse-tags
:multiple-limit="5"
filterable
placeholder="请选择指标"
@change="conditionChange"
>
<el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="谐波次数:" v-if="showXieBoCiShu">
<el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
<el-option
v-for="item in harmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
<el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
<el-option
v-for="item in inharmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</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' />
<div style="flex: 1; overflow: hidden" class="mt10">
<vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
<vxe-column field="subName" title="变电站" min-width="120px"></vxe-column>
<vxe-column field="lineName" title="监测点名称" min-width="120px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="120px"></vxe-column>
<vxe-column field="phaseType" title="相别" min-width="100px"></vxe-column>
<vxe-column field="scale" title="电压等级" min-width="100px"></vxe-column>
<vxe-column field="timeId" title="时间" min-width="130px"></vxe-column>
<vxe-column field="unit" title="单位" min-width="100px"></vxe-column>
<vxe-column field="maxData" title="最大值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 3, '最大值')"
:style="{ color: scope.row.statisticalType === 3 ? '#cc0000' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.maxData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="minData" title="最小值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 2, '最小值')"
:style="{ color: scope.row.statisticalType === 2 ? '#cc0000' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.minData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="avgData" title="平均值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 1, '平均值')"
:style="{ color: scope.row.statisticalType === 1 ? '#cc0000' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.avgData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="cp95Data" title="CP95值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 4, 'CP95值')"
:style="{ color: scope.row.statisticalType === 4 ? '#cc0000' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.cp95Data }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
</vxe-table>
<SecondSheet v-if="options" style="background: #fff; z-index: 10">
<el-button
style="position: absolute; right: 0; top: 0; cursor: pointer; z-index: 3"
type="primary"
size="small"
@click="close"
>
返回
</el-button>
<MyEChart :options="options"></MyEChart>
</SecondSheet>
</div>
</div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-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 { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
import { getHistoryTableData, getHistoryLineData } from '@/api/harmonic-boot/normLimit'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
lineIndex: monitoringPoint.state.lineId,
startTime: '',
endTime: ''
const checked = ref(monitoringPoint.state.showCheckBox)
const formData = reactive<{
lineId: string[]
searchBeginTime: string
searchEndTime: string
condition: string[]
harmonic: number
inHarmonic: number
}>({
lineId: [],
searchBeginTime: '',
searchEndTime: '',
condition: ['10', '11', '12'],
harmonic: 2,
inHarmonic: 1
})
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
})
}
)
}
const tableData = ref([])
const showXieBoCiShu = ref(false)
const showJianXieBoCiShu = ref(false)
const options = ref<any>(null)
onMounted(() => {
init()
})
const init = () => {
loading.value = true
formData.lineId = checked.value ? monitoringPoint.state.lineIds : [monitoringPoint.state.lineId]
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getHistoryTableData(formData).then((res: any) => {
tableData.value = res.data.map((item: any) => {
return {
...item,
maxData: item.maxData.toFixed(2),
minData: item.minData.toFixed(2),
avgData: item.avgData.toFixed(2),
cp95Data: item.cp95Data.toFixed(2)
}
})
nextTick(() => {
loading.value = false
})
})
}
const checkChange = () => {
if (checked.value) {
monitoringPoint.setShowCheckBox(true)
} else {
monitoringPoint.setShowCheckBox(false)
init()
}
}
const close = () => {
console.log('====================================')
console.log(2123123)
console.log('====================================')
options.value = null
}
const showCharts = (row: any, valueType: number, name: string) => {
getHistoryLineData({
lineId: row.lineId,
number: row.number,
phaseType: row.phaseType,
searchTime: row.timeId,
targetCode: row.targetCode,
valueType
}).then(res => {
options.value = {
title: {
text: row.subName + ' ' + row.lineName + ' ' + row.targetName + ' ' + row.phaseType + '相' + name
},
legend: {
show: false
},
xAxis: {
type: 'category',
name: '时间',
data: res.data[0]?.value.map((item: any[]) => item[0])
},
yAxis: {
name: '%',
type: 'value'
},
series: [
{
name: name,
data: res.data[0]?.value.map((item: any[]) => item[1]),
type: 'line'
}
],
options: {
grid: {
top: '50px',
left: '40px',
right: '60px',
bottom: '10px',
containLabel: true
},
dataZoom: null
}
}
})
}
const conditionChange = () => {
//判断一个指标时
if (formData.condition.length == 1) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断2个指标时
if (formData.condition.length == 2) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
(formData.condition.includes('45') && formData.condition.includes('46')) ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断3个指标时
if (formData.condition.length == 3) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断4个指标时
if (formData.condition.length == 4) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断5个指标时
if (formData.condition.length == 5) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
formData.condition.includes('47') ||
formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断无指标时
if (formData.condition.length == 0) {
showJianXieBoCiShu.value = false
showXieBoCiShu.value = false
}
}
</script>
<style></style>

6
src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
View File

@@ -39,12 +39,12 @@
<Shishishuju />
</el-tab-pane>
</el-tabs>
<div
<!-- <div
class="monitoring-point"
v-if="!monitoringPoint.state.showCheckBox && monitoringPoint.state.lineName"
>
当前位置：{{ monitoringPoint.state.lineName }}
</div>
</div> -->
</div>
</pane>
</splitpanes>
@@ -75,7 +75,7 @@ const pointTree = ref()
const size = ref(0)
const isReload = ref(false)
const height = mainHeight(40)
const activeName = ref('4')
const activeName = ref('5')
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
View File

@@ -12,7 +12,7 @@
v-model="formData.condition"
multiple
collapse-tags
:multiple-limit="checked ? 3 : 1"
:multiple-limit="5"
filterable
placeholder="请选择指标"
@change="conditionChange"