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

指标越限概率分布联调

Browse Source
This commit is contained in:
stt
2025-11-19 14:07:26 +08:00
parent 7a68a4114b
commit 05e0287407
3 changed files with 374 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/harmonic-boot/cockpit/cockpit.ts
View File

@@ -97,4 +97,23 @@ export function fittingData(data: any) {
})
}
//指标越限时间概率分布
export function limitTimeProbabilityData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'post',
data: data
})
}
//指标越限程度概率分布
export function limitProbabilityData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitProbabilityData',
method: 'post',
data: data
})
}

390
src/components/cockpit/indicatorDistribution/index.vue
View File

@@ -3,9 +3,9 @@
<!--指标越限概率分布 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen">
<template v-slot:select>
<el-form-item>
<el-select size="small" v-model="tableStore.table.params.searchValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item label="监测点">
<el-select size="small" v-model="tableStore.table.params.lineId">
<el-option v-for="item in options" :key="item.lineId" :label="item.name" :value="item.lineId" />
</el-select>
</el-form-item>
</template>
@@ -35,9 +35,9 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { limitProbabilityData } from '@/api/harmonic-boot/cockpit/cockpit'
const prop = defineProps({
w: { type: [String, Number] },
@@ -48,12 +48,7 @@ const prop = defineProps({
timeValue: { type: Object }
})
const options = [
{
value: '1',
label: '35V进线'
}
]
const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
const headerHeight = ref(57)
@@ -216,9 +211,59 @@ const fullscreen = computed(() => {
// }
// })
var yAxisData = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
const echartList = ref()
const echartList = ref({
const echartList1 = ref()
const probabilityData = ref()
// 越限程度概率分布
const initProbabilityData = () => {
if (!tableStore.table.params.lineId && options.value?.length > 0) {
tableStore.table.params.lineId = options.value[0].lineId
}
const params = {
searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1],
lineId: tableStore.table.params.lineId
}
limitProbabilityData(params).then((res: any) => {
probabilityData.value = res.data
// 处理接口返回的数据，转换为图表所需格式
if (res.data && Array.isArray(res.data)) {
// 定义指标类型顺序
const indicatorOrder = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相电压不平衡度', '频率偏差']
// 按照指定顺序排序数据
const sortedData = [...res.data].sort((a, b) => {
return indicatorOrder.indexOf(a.indexName) - indicatorOrder.indexOf(b.indexName)
})
// 构造 series 数据
const seriesData: any = []
let maxValue: any = 0 // 用于存储数据中的最大值
// 遍历每个越限程度区间（0-20%, 20-40%, 40-60%, 60-80%, 80-100%）
for (let xIndex = 0; xIndex < 5; xIndex++) {
// 遍历每个指标类型
sortedData.forEach((item, yIndex) => {
// 从 extentGrades 中获取对应区间的值
const extentGrade = item.extentGrades[xIndex]
const value = extentGrade ? (Object.values(extentGrade)[0] as number) : 0
seriesData.push([xIndex, yIndex, value])
// 更新最大值
if (value > maxValue) {
maxValue = value
}
})
}
// 计算 z 轴最大值（最大值加 5）
const zAxisMax = Math.ceil(maxValue) + 5
// 构造 yAxis 数据（指标类型名称）
const yAxisData = sortedData.map(item => item.indexName)
echartList.value = {
options: {
backgroundColor: '#fff',
tooltip: {
@@ -231,14 +276,11 @@ const echartList = ref({
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter: function (params: any) {
console.log(params, '33344')
var yIndex = params.value[1] //获取y轴索引
var tips = ''
// tips += '指标类型: ' + params.name + '</br>'
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
tips += '越限程度: ' + params.seriesName + '</br>'
// tips += '越限占比: ' + params.value + '%</br>'
tips += '越限占比: ' + params.value[2] + '%</br>'
tips += '越限次数: ' + params.value[2] + '</br>'
return tips
}
},
@@ -250,28 +292,19 @@ const echartList = ref({
fontWeight: 'normal'
}
},
// 移除或隐藏 visualMap 组件
visualMap: {
max: 100,
show: true,
show: false, // 设置为 false 隐藏右侧颜色条
min: 0,
// max: 100,
max: zAxisMax, // 使用计算出的最大值加5
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
color: ['#313695', '#00BB00', '#ff8000', '#d73027', '#a50026']
}
// calculable: true,
// orient: 'horizontal',
// left: 'center',
// bottom: '5%'
},
// 添加 legend 配置并设置为不显示
legend: {
show: false // 隐藏图例
},
xAxis3D: {
type: 'category',
@@ -297,7 +330,6 @@ const echartList = ref({
name: '指标类型',
nameLocation: 'middle',
nameGap: 30,
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
data: yAxisData,
nameTextStyle: {
color: '#111'
@@ -322,7 +354,7 @@ const echartList = ref({
},
zAxis3D: {
type: 'value',
name: '越限占比(%)',
name: '越限次数',
nameLocation: 'middle',
nameGap: 30,
nameTextStyle: {
@@ -337,7 +369,8 @@ const echartList = ref({
color: '#111'
},
min: 0,
max: 100
max: zAxisMax // 使用计算出的最大值加5
// max: 100
},
grid3D: {
viewControl: {
@@ -362,14 +395,7 @@ const echartList = ref({
{
type: 'bar3D',
name: '0-20%',
data: [
// [xIndex, yIndex, value]
[0, 0, 5], // 闪变 - 0-20%
[0, 1, 10], // 谐波电压 - 0-20%
[0, 2, 8], // 谐波电流 - 0-20%
[0, 3, 15], // 电压偏差 - 0-20%
[0, 4, 12] // 三相不平衡 - 0-20%
],
data: seriesData.filter((item: any) => item[0] === 0),
shading: 'realistic',
label: {
show: false
@@ -393,18 +419,7 @@ const echartList = ref({
{
type: 'bar3D',
name: '20-40%',
// data: chartData.map(function (item) {
// return {
// value: [item[1], item[0], item[2]]
// };
// }),
data: [
[1, 0, 10], // 闪变 - 20-40%
[1, 1, 20], // 谐波电压 - 20-40%
[1, 2, 15], // 谐波电流 - 20-40%
[1, 3, 25], // 电压偏差 - 20-40%
[1, 4, 18] // 三相不平衡 - 20-40%
],
data: seriesData.filter((item: any) => item[0] === 1),
shading: 'realistic',
label: {
show: false
@@ -428,13 +443,7 @@ const echartList = ref({
{
type: 'bar3D',
name: '40-60%',
data: [
[2, 0, 15], // 闪变 - 40-60%
[2, 1, 25], // 谐波电压 - 40-60%
[2, 2, 30], // 谐波电流 - 40-60%
[2, 3, 35], // 电压偏差 - 40-60%
[2, 4, 28] // 三相不平衡 - 40-60%
],
data: seriesData.filter((item: any) => item[0] === 2),
shading: 'realistic',
label: {
show: false
@@ -458,13 +467,7 @@ const echartList = ref({
{
type: 'bar3D',
name: '60-80%',
data: [
[3, 0, 20], // 闪变 - 60-80%
[3, 1, 30], // 谐波电压 - 60-80%
[3, 2, 35], // 谐波电流 - 60-80%
[3, 3, 40], // 电压偏差 - 60-80%
[3, 4, 35] // 三相不平衡 - 60-80%
],
data: seriesData.filter((item: any) => item[0] === 3),
shading: 'realistic',
label: {
show: false
@@ -488,13 +491,7 @@ const echartList = ref({
{
type: 'bar3D',
name: '80-100%',
data: [
[4, 0, 25], // 闪变 - 80-100%
[4, 1, 35], // 谐波电压 - 80-100%
[4, 2, 40], // 谐波电流 - 80-100%
[4, 3, 45], // 电压偏差 - 80-100%
[4, 4, 42] // 三相不平衡 - 80-100%
],
data: seriesData.filter((item: any) => item[0] === 4),
shading: 'realistic',
label: {
show: false
@@ -517,215 +514,62 @@ const echartList = ref({
}
]
}
})
const echartList1 = ref({
title: {
text: '越限时间概率分布'
},
xAxis: {
// name: '时间',
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
yAxis: {
name: '次' // 给X轴加单位
},
grid: {
left: '10px',
right: '20px'
},
options: {
series: [
{
type: 'line',
showSymbol: false,
// smooth: true,
name: '闪变',
data: [
['2025-10-16 07:00:00', 10],
['2025-10-16 07:15:00', 10],
['2025-10-16 07:30:00', 10],
['2025-10-16 07:45:00', 10],
['2025-10-16 08:00:00', 30],
['2025-10-16 08:15:00', 50],
['2025-10-16 08:30:00', 60],
['2025-10-16 08:45:00', 70],
['2025-10-16 09:00:00', 100],
['2025-10-16 09:15:00', 120],
['2025-10-16 09:30:00', 130],
['2025-10-16 09:45:00', 140],
['2025-10-16 10:00:00', 160],
['2025-10-16 10:15:00', 160],
['2025-10-16 10:30:00', 130],
['2025-10-16 10:45:00', 120],
['2025-10-16 11:00:00', 140],
['2025-10-16 11:15:00', 80],
['2025-10-16 11:30:00', 70],
['2025-10-16 11:45:00', 90],
['2025-10-16 12:00:00', 60],
['2025-10-16 12:15:00', 60],
['2025-10-16 12:30:00', 60],
['2025-10-16 12:45:00', 60]
]
},
{
type: 'line',
showSymbol: false,
// smooth: true,
name: '谐波电压',
data: [
['2025-10-16 07:00:00', 1],
['2025-10-16 07:15:00', 1],
['2025-10-16 07:30:00', 1],
['2025-10-16 07:45:00', 1],
['2025-10-16 08:00:00', 3],
['2025-10-16 08:15:00', 5],
['2025-10-16 08:30:00', 6],
['2025-10-16 08:45:00', 7],
['2025-10-16 09:00:00', 10],
['2025-10-16 09:15:00', 12],
['2025-10-16 09:30:00', 13],
['2025-10-16 09:45:00', 14],
['2025-10-16 10:00:00', 16],
['2025-10-16 10:15:00', 16],
['2025-10-16 10:30:00', 13],
['2025-10-16 10:45:00', 12],
['2025-10-16 11:00:00', 14],
['2025-10-16 11:15:00', 8],
['2025-10-16 11:30:00', 7],
['2025-10-16 11:45:00', 9],
['2025-10-16 12:00:00', 6],
['2025-10-16 12:15:00', 6],
['2025-10-16 12:30:00', 6],
['2025-10-16 12:45:00', 6]
]
},
{
type: 'line',
showSymbol: false,
// smooth: true,
name: '谐波电流',
data: [
['2025-10-16 07:00:00', 19],
['2025-10-16 07:15:00', 19],
['2025-10-16 07:30:00', 19],
['2025-10-16 07:45:00', 19],
['2025-10-16 08:00:00', 39],
['2025-10-16 08:15:00', 59],
['2025-10-16 08:30:00', 69],
['2025-10-16 08:45:00', 79],
['2025-10-16 09:00:00', 109],
['2025-10-16 09:15:00', 129],
['2025-10-16 09:30:00', 139],
['2025-10-16 09:45:00', 149],
['2025-10-16 10:00:00', 169],
['2025-10-16 10:15:00', 169],
['2025-10-16 10:30:00', 139],
['2025-10-16 10:45:00', 129],
['2025-10-16 11:00:00', 149],
['2025-10-16 11:15:00', 89],
['2025-10-16 11:30:00', 79],
['2025-10-16 11:45:00', 99],
['2025-10-16 12:00:00', 69],
['2025-10-16 12:15:00', 69],
['2025-10-16 12:30:00', 69],
['2025-10-16 12:45:00', 69]
]
},
{
type: 'line',
showSymbol: false,
// smooth: true,
name: '电压偏差',
data: [
['2025-10-16 07:00:00', 12],
['2025-10-16 07:15:00', 12],
['2025-10-16 07:30:00', 12],
['2025-10-16 07:45:00', 12],
['2025-10-16 08:00:00', 32],
['2025-10-16 08:15:00', 52],
['2025-10-16 08:30:00', 62],
['2025-10-16 08:45:00', 72],
['2025-10-16 09:00:00', 112],
['2025-10-16 09:15:00', 122],
['2025-10-16 09:30:00', 122],
['2025-10-16 09:45:00', 152],
['2025-10-16 10:00:00', 122],
['2025-10-16 10:15:00', 112],
['2025-10-16 10:30:00', 132],
['2025-10-16 10:45:00', 122],
['2025-10-16 11:00:00', 142],
['2025-10-16 11:15:00', 82],
['2025-10-16 11:30:00', 72],
['2025-10-16 11:45:00', 92],
['2025-10-16 12:00:00', 62],
['2025-10-16 12:15:00', 62],
['2025-10-16 12:30:00', 62],
['2025-10-16 12:45:00', 62]
]
},
{
type: 'line',
showSymbol: false,
// smooth: true,
name: '三相不平衡',
data: [
['2025-10-16 07:00:00', 10],
['2025-10-16 07:15:00', 10],
['2025-10-16 07:30:00', 10],
['2025-10-16 07:45:00', 10],
['2025-10-16 08:00:00', 30],
['2025-10-16 08:15:00', 50],
['2025-10-16 08:30:00', 60],
['2025-10-16 08:45:00', 70],
['2025-10-16 09:00:00', 100],
['2025-10-16 09:15:00', 120],
['2025-10-16 09:30:00', 130],
['2025-10-16 09:45:00', 140],
['2025-10-16 10:00:00', 160],
['2025-10-16 10:15:00', 160],
['2025-10-16 10:30:00', 130],
['2025-10-16 10:45:00', 120],
['2025-10-16 11:00:00', 140],
['2025-10-16 11:15:00', 80],
['2025-10-16 11:30:00', 70],
['2025-10-16 11:45:00', 90],
['2025-10-16 12:00:00', 60],
['2025-10-16 12:15:00', 60],
['2025-10-16 12:30:00', 60],
['2025-10-16 12:45:00', 60]
]
}
]
}
})
}
const tableStore: any = new TableStore({
url: '/user-boot/dept/deptTree',
url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
if (!tableStore.table.params.lineId && options.value?.length > 0) {
tableStore.table.params.lineId = options.value[0].lineId
}
},
loadCallback: () => {
tableStore.table.data = []
// 处理返回的数据，将其转换为图表所需格式
const indexNames: any = [...new Set(tableStore.table.data.map((item: any) => item.indexName))]
const timePeriods = [...new Set(tableStore.table.data.map((item: any) => item.timePeriod))]
// 构建系列数据
const seriesData = indexNames.map((indexName: string) => {
const dataIndex = tableStore.table.data.filter((item: any) => item.indexName === indexName)
return {
name: indexName,
type: 'line',
data: dataIndex.map((item: any) => [item.timePeriod, item.times])
}
})
const tableRef = ref()
tableStore.table.params.searchValue = '1'
provide('tableRef', tableRef)
echartList1.value = {
title: {
text: '越限时间概率分布'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: indexNames
},
xAxis: {
type: 'category',
name: '时间段',
data: timePeriods
},
yAxis: {
type: 'value'
// name: '次数'
},
series: seriesData
}
initProbabilityData()
}
})
provide('tableStore', tableStore)

8
src/views/pqs/cockpit/homePage/index.vue
View File

@@ -71,6 +71,7 @@ import { queryActivatePage, queryByPagePath } from '@/api/system-boot/csstatisti
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
import { useRouter, useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import {cslineList} from '@/api/harmonic-boot/cockpit/cockpit'
const { push } = useRouter()
const datePickerRef = ref()
const router = useRouter()
@@ -246,10 +247,17 @@ const handleDatePickerChange = (value: any) => {
}
}
// 监测点列表
const initCSlineList = async () => {
const res = await cslineList({})
window.localStorage.setItem('lineIdList', JSON.stringify(res.data))
}
// 生命周期钩子
onMounted(() => {
// initRowHeight()
fetchLayoutData()
initCSlineList()
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize)