From 29c88b56dc968183a63bbd8e753e2c9e3ceb96d6 Mon Sep 17 00:00:00 2001 From: stt Date: Tue, 25 Nov 2025 15:39:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E6=80=81=E4=BA=8B=E4=BB=B6=E6=A6=82?= =?UTF-8?q?=E7=8E=87=E5=88=86=E5=B8=83=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cockpit/transientDistribution/index.vue | 497 +++++++----------- src/views/pqs/cockpit/realTimeData/index.vue | 6 +- 2 files changed, 209 insertions(+), 294 deletions(-) diff --git a/src/components/cockpit/transientDistribution/index.vue b/src/components/cockpit/transientDistribution/index.vue index b954df7..6b49714 100644 --- a/src/components/cockpit/transientDistribution/index.vue +++ b/src/components/cockpit/transientDistribution/index.vue @@ -64,285 +64,143 @@ const config = useConfig() const echartList = ref({}) -// const echartList = 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 + '
' -// tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '
' -// } -// return tips -// } -// }, -// title: { -// text: '暂态事件概率分布', -// x: 'center' -// }, +const echartList1 = ref({}) -// visualMap: { -// max: 20, -// show: false, -// inRange: { -// color: ['#313695', '#00BB00', '#ff8000', '#a50026'] +// const echartList1 = ref({ +// title: { +// text: '越限时间概率分布' +// }, + +// xAxis: { +// // name: '时间', +// // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'] +// type: 'time', +// axisLabel: { +// formatter: { +// day: '{MM}-{dd}', +// month: '{MM}', +// year: '{yyyy}' // } -// }, -// xAxis3D: { -// type: 'category', -// name: '特征幅值', -// data: [ -// '0-10%', -// '10%-20%', -// '20%-30%', -// '30%-40%', -// '40%-50%', -// '50%-60%', -// '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 -// } -// } -// }, +// } +// }, + +// yAxis: { +// name: '次' // 给X轴加单位 +// }, +// grid: { +// left: '10px', +// right: '20px' +// }, +// options: { // series: [ // { -// type: 'bar3D', +// type: 'line', +// showSymbol: false, +// // smooth: true, +// name: '电压中断', +// color: '#FF9100', // data: [ -// [0, 0, 1], -// [0, 1, 1], -// [0.2, 1] -// ], -// shading: 'realistic', -// label: { -// show: false, -// textStyle: { -// fontSize: 16, -// borderWidth: 1 -// } -// }, - -// itemStyle: { -// opacity: 1 -// }, -// emphasis: { -// label: { -// textStyle: { -// fontSize: 20, -// color: '#900' -// } -// }, -// itemStyle: { -// color: '#900' -// } -// } +// ['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 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[]) => { - // 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z] - const chartData = rawData.map(item => [item.x, item.y, item.z]); - - return chartData; -}; + // 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z] + const chartData = rawData.map(item => [item.x, item.y, item.z]) + + return chartData +} const tableStore: any = new TableStore({ 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] }, 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 = { options: { xAxis: null, @@ -372,20 +272,21 @@ const tableStore: any = new TableStore({ backgroundColor: 'rgba(0,0,0,0.55)', borderWidth: 0, formatter: function (params: any) { - console.log(params,'333455') - var tips = '' - tips += '持续时间: ' + params.value[1] + '
' - tips += '特征幅值: ' + params.seriesName + '
' - tips += '事件次数: ' + params.value[2] + '
' - return tips - } + console.log(params, '99000') + var tips = '' + + tips += '持续时间: ' + yLabels[params.value[1]] + '
' + tips += '特征幅值: ' + xLabels[params.value[0]] + '
' + tips += '事件次数: ' + params.value[2] + '
' + return tips + } }, title: { text: '暂态事件概率分布', x: 'center' }, visualMap: { - max: 500, // 根据实际数据调整最大值 + max: 500, show: false, inRange: { color: ['#313695', '#00BB00', '#ff8000', '#a50026'] @@ -394,18 +295,7 @@ const tableStore: any = new TableStore({ xAxis3D: { type: 'category', name: '特征幅值', - data: [ - '0-10%', - '10%-20%', - '20%-30%', - '30%-40%', - '40%-50%', - '50%-60%', - '60%-70%', - '70%-80%', - '80%-90%', - '90%-100%' - ], + data: xLabels, axisLine: { lineStyle: { color: '#111' @@ -418,7 +308,7 @@ const tableStore: any = new TableStore({ yAxis3D: { type: 'category', name: '持续时间', - data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'], + data: yLabels, nameTextStyle: { color: '#111' }, @@ -464,7 +354,7 @@ const tableStore: any = new TableStore({ series: [ { type: 'bar3D', - data: processedData, // 使用处理后的数据 + data: processedData, shading: 'realistic', label: { 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 + } } }) diff --git a/src/views/pqs/cockpit/realTimeData/index.vue b/src/views/pqs/cockpit/realTimeData/index.vue index 83f6e7c..ef617a9 100644 --- a/src/views/pqs/cockpit/realTimeData/index.vue +++ b/src/views/pqs/cockpit/realTimeData/index.vue @@ -26,7 +26,7 @@
- 复位 + 复位
@@ -125,6 +125,10 @@ provide('tableRef', tableRef) const pageHeight = mainHeight(40) provide('tableStore', tableStore) +const reset = () => { + tableRef.value.reset() +} + const iframeSrc = ref('') // 监听 props 变化