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-25 15:39:17 +08:00
parent f916721b6a
commit 29c88b56dc
2 changed files with 209 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

497
src/components/cockpit/transientDistribution/index.vue
View File

@@ -64,285 +64,143 @@ const config = useConfig()
const echartList = ref({}) const echartList = ref({})
// const echartList = ref({ const echartList1 = ref({})
// options: {
// xAxis: null,
// yAxis: null,
// dataZoom: null,
// backgroundColor: '#fff',
// tooltip: {
// // trigger: 'axis'
// textStyle: {
// color: '#fff',
// fontStyle: 'normal',
// opacity: 0.35,
// fontSize: 14
// },
// backgroundColor: 'rgba(0,0,0,0.55)',
// borderWidth: 0,
// formatter: function (params: any) {
// console.log(params)
// var tips = ''
// for (var i = 0; i < params.length; i++) {
// tips += params[i].name + '</br/>'
// tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
// }
// return tips
// }
// },
// title: {
// text: '暂态事件概率分布',
// x: 'center'
// },
// visualMap: { // const echartList1 = ref({
// max: 20, // title: {
// show: false, // text: '越限时间概率分布'
// inRange: { // },
// color: ['#313695', '#00BB00', '#ff8000', '#a50026']
// xAxis: {
// // name: '时间',
// // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
// type: 'time',
// axisLabel: {
// formatter: {
// day: '{MM}-{dd}',
// month: '{MM}',
// year: '{yyyy}'
// } // }
// }, // }
// xAxis3D: { // },
// type: 'category',
// name: '特征幅值', // yAxis: {
// data: [ // name: '次' // 给X轴加单位
// '0-10%', // },
// '10%-20%', // grid: {
// '20%-30%', // left: '10px',
// '30%-40%', // right: '20px'
// '40%-50%', // },
// '50%-60%', // options: {
// '60%-70%',
// '70%-80%',
// '80%-90%',
// '90%-100%'
// ],
// axisLine: {
// lineStyle: {
// color: '#111'
// }
// },
// axisLabel: {
// color: '#111'
// }
// },
// yAxis3D: {
// type: 'category',
// name: '持续时间',
// data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
// nameTextStyle: {
// color: '#111'
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#111'
// }
// },
// axisLabel: {
// color: '#111'
// },
// splitLine: {
// lineStyle: {
// // 使用深浅的间隔色
// color: ['#111'],
// type: 'dashed',
// opacity: 0.5
// }
// }
// },
// zAxis3D: {
// type: 'value',
// splitNumber: 10,
// minInterval: 10,
// name: '暂态事件次数'
// },
// grid3D: {
// viewControl: {
// projection: 'perspective',
// distance: 250
// },
// boxWidth: 200,
// boxDepth: 80,
// light: {
// main: {
// intensity: 1.2
// },
// ambient: {
// intensity: 0.3
// }
// }
// },
// series: [ // series: [
// { // {
// type: 'bar3D', // type: 'line',
// showSymbol: false,
// // smooth: true,
// name: '电压中断',
// color: '#FF9100',
// data: [ // data: [
// [0, 0, 1], // ['2025-10-16 07:00:00', 10],
// [0, 1, 1], // ['2025-10-16 07:15:00', 10],
// [0.2, 1] // ['2025-10-16 07:30:00', 10],
// ], // ['2025-10-16 07:45:00', 10],
// shading: 'realistic', // ['2025-10-16 08:00:00', 30],
// label: { // ['2025-10-16 08:15:00', 50],
// show: false, // ['2025-10-16 08:30:00', 60],
// textStyle: { // ['2025-10-16 08:45:00', 70],
// fontSize: 16, // ['2025-10-16 09:00:00', 100],
// borderWidth: 1 // ['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],
// itemStyle: { // ['2025-10-16 10:15:00', 160],
// opacity: 1 // ['2025-10-16 10:30:00', 130],
// }, // ['2025-10-16 10:45:00', 120],
// emphasis: { // ['2025-10-16 11:00:00', 140],
// label: { // ['2025-10-16 11:15:00', 80],
// textStyle: { // ['2025-10-16 11:30:00', 70],
// fontSize: 20, // ['2025-10-16 11:45:00', 90],
// color: '#900' // ['2025-10-16 12:00:00', 60],
// } // ['2025-10-16 12:15:00', 60],
// }, // ['2025-10-16 12:30:00', 60],
// itemStyle: { // ['2025-10-16 12:45:00', 60]
// color: '#900' // ]
// } // },
// } // {
// type: 'line',
// showSymbol: false,
// // smooth: true,
// color: '#FFBF00',
// 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: '电压暂升',
// color: config.layout.elementUiPrimary[0],
// 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]
// ]
// } // }
// ] // ]
// } // }
// }) // })
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: '电压中断',
color: '#FF9100',
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,
color: '#FFBF00',
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: '电压暂升',
color: config.layout.elementUiPrimary[0],
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]
]
}
]
}
})
const processDataForChart = (rawData: any[]) => { const processDataForChart = (rawData: any[]) => {
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z] // 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
const chartData = rawData.map(item => [item.x, item.y, item.z]); const chartData = rawData.map(item => [item.x, item.y, item.z])
return chartData; return chartData
}; }
const tableStore: any = new TableStore({ const tableStore: any = new TableStore({
url: '/cs-harmonic-boot/csevent/getEventCoords', url: '/cs-harmonic-boot/csevent/getEventCoords',
@@ -354,8 +212,50 @@ const tableStore: any = new TableStore({
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1] tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
const processedData = processDataForChart(tableStore.table.data || []); const processedData = processDataForChart(tableStore.table.data.innerList || [])
const trendList = tableStore.table.data.trendList || []
const xlist = tableStore.table.data.xlist || []
// 处理趋势图数据
const seriesData = [
{
name: '电压中断',
type: 'line',
showSymbol: false,
color: '#FF9100',
data: trendList[0]?.map((value: number, index: number) => [xlist[index], value]) || []
},
{
name: '电压暂降',
type: 'line',
showSymbol: false,
color: '#FFBF00',
data: trendList[1]?.map((value: number, index: number) => [xlist[index], value]) || []
},
{
name: '电压暂升',
type: 'line',
showSymbol: false,
color: config.layout.elementUiPrimary[0],
data: trendList[2]?.map((value: number, index: number) => [xlist[index], value]) || []
}
]
// 获取x轴和y轴的标签值
const xLabels = [
'0-10%',
'10%-20%',
'20%-30%',
'30%-40%',
'40%-50%',
'50%-60%',
'60%-70%',
'70%-80%',
'80%-90%',
'90%-100%'
]
const yLabels = ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s']
echartList.value = { echartList.value = {
options: { options: {
xAxis: null, xAxis: null,
@@ -372,20 +272,21 @@ const tableStore: any = new TableStore({
backgroundColor: 'rgba(0,0,0,0.55)', backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0, borderWidth: 0,
formatter: function (params: any) { formatter: function (params: any) {
console.log(params,'333455') console.log(params, '99000')
var tips = '' var tips = ''
tips += '持续时间: ' + params.value[1] + '</br>'
tips += '特征幅值: ' + params.seriesName + '</br>' tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
tips += '事件次数: ' + params.value[2] + '</br>' tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
return tips tips += '事件次数: ' + params.value[2] + '</br>'
} return tips
}
}, },
title: { title: {
text: '暂态事件概率分布', text: '暂态事件概率分布',
x: 'center' x: 'center'
}, },
visualMap: { visualMap: {
max: 500, // 根据实际数据调整最大值 max: 500,
show: false, show: false,
inRange: { inRange: {
color: ['#313695', '#00BB00', '#ff8000', '#a50026'] color: ['#313695', '#00BB00', '#ff8000', '#a50026']
@@ -394,18 +295,7 @@ const tableStore: any = new TableStore({
xAxis3D: { xAxis3D: {
type: 'category', type: 'category',
name: '特征幅值', name: '特征幅值',
data: [ data: xLabels,
'0-10%',
'10%-20%',
'20%-30%',
'30%-40%',
'40%-50%',
'50%-60%',
'60%-70%',
'70%-80%',
'80%-90%',
'90%-100%'
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#111' color: '#111'
@@ -418,7 +308,7 @@ const tableStore: any = new TableStore({
yAxis3D: { yAxis3D: {
type: 'category', type: 'category',
name: '持续时间', name: '持续时间',
data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'], data: yLabels,
nameTextStyle: { nameTextStyle: {
color: '#111' color: '#111'
}, },
@@ -464,7 +354,7 @@ const tableStore: any = new TableStore({
series: [ series: [
{ {
type: 'bar3D', type: 'bar3D',
data: processedData, // 使用处理后的数据 data: processedData,
shading: 'realistic', shading: 'realistic',
label: { label: {
show: false, show: false,
@@ -491,6 +381,27 @@ const tableStore: any = new TableStore({
] ]
} }
} }
echartList1.value = {
title: {
text: '越限时间概率分布'
},
xAxis: {
type: 'category',
data: xlist,
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
name: '次'
},
grid: {
left: '10px',
right: '20px'
},
series: seriesData
}
} }
}) })

6
src/views/pqs/cockpit/realTimeData/index.vue
View File

@@ -26,7 +26,7 @@
<el-card class="bottom-container " style="min-height: 230px;"> <el-card class="bottom-container " style="min-height: 230px;">
<div class="buttonBox"> <div class="buttonBox">
<el-button type="primary" icon="el-icon-Aim">复位</el-button> <el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
</div> </div>
<div class="tableBox"> <div class="tableBox">
<Table ref="tableRef" height="100%"></Table> <Table ref="tableRef" height="100%"></Table>
@@ -125,6 +125,10 @@ provide('tableRef', tableRef)
const pageHeight = mainHeight(40) const pageHeight = mainHeight(40)
provide('tableStore', tableStore) provide('tableStore', tableStore)
const reset = () => {
tableRef.value.reset()
}
const iframeSrc = ref('') const iframeSrc = ref('')
// 监听 props 变化 // 监听 props 变化