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 14:22:30 +08:00
parent 2de28c0067
commit f2d02ff7f5
2 changed files with 320 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/cockpit/transientDetails/index.vue
View File

@@ -113,8 +113,10 @@ const tableStore: any = new TableStore({
column: [],
beforeSearchFun: () => {
// tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime
// tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime
if (prop.timeValue && Array.isArray(prop.timeValue)) {
tableStore.table.params.searchBeginTime = prop.timeValue[0]
tableStore.table.params.searchEndTime = prop.timeValue[1]
}
},
loadCallback: () => {
@@ -142,7 +144,9 @@ onMounted(() => {
if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
}
if (fullscreen.value) {
TableHeaderRef.value.setInterval(3)
}
tableStore.index()
})
})
@@ -152,20 +156,24 @@ watch(
tableStore.index()
}
)
// watch(
// () => prop.timeValue,
// (newVal, oldVal) => {
// // 当外部时间值变化时，更新表格的时间参数
// if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
// tableStore.table.params.searchBeginTime = newVal[0]
// tableStore.table.params.searchEndTime = newVal[1]
// tableStore.index()
// }
// },
// {
// deep: true
// }
// )
watch(
() => prop.timeValue,
// (newVal, oldVal) => {
// // 当外部时间值变化时，更新表格的时间参数
// if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
// tableStore.table.params.searchBeginTime = newVal[0]
// tableStore.table.params.searchEndTime = newVal[1]
// tableStore.index()
// }
// },
val => {
tableStore.index()
},
{
deep: true
}
)
// 电压暂降点击事件
const descentClick = () => {

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

@@ -24,11 +24,8 @@
import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({
w: { type: [String, Number] },
@@ -41,9 +38,6 @@ const prop = defineProps({
const headerHeight = ref(57)
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
@@ -68,150 +62,152 @@ const fullscreen = computed(() => {
const config = useConfig()
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 += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
}
return tips
}
},
title: {
text: '暂态事件概率分布',
x: 'center'
},
const echartList = ref({})
visualMap: {
max: 20,
show: false,
inRange: {
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
}
},
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
}
}
},
series: [
{
type: 'bar3D',
data: [
[0, 0, 1],
[0, 1, 1],
[0.2, 1]
],
shading: 'realistic',
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
// 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 += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
// }
// return tips
// }
// },
// title: {
// text: '暂态事件概率分布',
// x: 'center'
// },
itemStyle: {
opacity: 1
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}
]
}
})
// visualMap: {
// max: 20,
// show: false,
// inRange: {
// color: ['#313695', '#00BB00', '#ff8000', '#a50026']
// }
// },
// 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
// }
// }
// },
// series: [
// {
// type: 'bar3D',
// 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'
// }
// }
// }
// ]
// }
// })
const echartList1 = ref({
title: {
text: '越限时间概率分布'
@@ -341,8 +337,15 @@ const echartList1 = ref({
]
}
})
const processDataForChart = (rawData: any[]) => {
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
const chartData = rawData.map(item => [item.x, item.y, item.z]);
return chartData;
};
const tableStore: any = new TableStore({
url: '/user-boot/dept/deptTree',
url: '/cs-harmonic-boot/csevent/getEventCoords',
method: 'POST',
showPage: false,
column: [],
@@ -351,7 +354,143 @@ const tableStore: any = new TableStore({
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
},
loadCallback: () => {
tableStore.table.data = []
const processedData = processDataForChart(tableStore.table.data || []);
echartList.value = {
options: {
xAxis: null,
yAxis: null,
dataZoom: null,
backgroundColor: '#fff',
tooltip: {
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,'333455')
var tips = ''
tips += '持续时间: ' + params.value[1] + '</br>'
tips += '特征幅值: ' + params.seriesName + '</br>'
tips += '事件次数: ' + params.value[2] + '</br>'
return tips
}
},
title: {
text: '暂态事件概率分布',
x: 'center'
},
visualMap: {
max: 500, // 根据实际数据调整最大值
show: false,
inRange: {
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
}
},
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
}
}
},
series: [
{
type: 'bar3D',
data: processedData, // 使用处理后的数据
shading: 'realistic',
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
opacity: 1
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}
]
}
}
}
})