Compare commits
2 Commits
0c71b2ac32
...
f1439e0464
| Author | SHA1 | Date | |
|---|---|---|---|
|
f1439e0464 | ||
|
|
29c88b56dc |
@@ -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 + '</br/>'
|
||||
// tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
// }
|
||||
// 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]);
|
||||
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
||||
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
||||
|
||||
return chartData;
|
||||
};
|
||||
return chartData
|
||||
}
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/cs-harmonic-boot/csevent/getEventCoords',
|
||||
@@ -354,7 +212,49 @@ 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: {
|
||||
@@ -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] + '</br>'
|
||||
tips += '特征幅值: ' + params.seriesName + '</br>'
|
||||
tips += '事件次数: ' + params.value[2] + '</br>'
|
||||
return tips
|
||||
}
|
||||
console.log(params, '99000')
|
||||
var tips = ''
|
||||
|
||||
tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
|
||||
tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
|
||||
tips += '事件次数: ' + params.value[2] + '</br>'
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<el-card class="bottom-container " style="min-height: 230px;">
|
||||
<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 class="tableBox">
|
||||
<Table ref="tableRef" height="100%"></Table>
|
||||
@@ -125,6 +125,10 @@ provide('tableRef', tableRef)
|
||||
const pageHeight = mainHeight(40)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const reset = () => {
|
||||
tableRef.value.reset()
|
||||
}
|
||||
|
||||
const iframeSrc = ref('')
|
||||
|
||||
// 监听 props 变化
|
||||
|
||||
Reference in New Issue
Block a user