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

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

@@ -24,11 +24,8 @@
import { ref, onMounted, provide, reactive, watch } from 'vue' import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
@@ -41,9 +38,6 @@ const prop = defineProps({
const headerHeight = ref(57) const headerHeight = ref(57)
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => { const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height headerHeight.value = height
@@ -68,150 +62,152 @@ const fullscreen = computed(() => {
const config = useConfig() 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 += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
}
return tips
}
},
title: {
text: '暂态事件概率分布',
x: 'center'
},
visualMap: { // const echartList = ref({
max: 20, // options: {
show: false, // xAxis: null,
inRange: { // yAxis: null,
color: ['#313695', '#00BB00', '#ff8000', '#a50026'] // dataZoom: null,
} // backgroundColor: '#fff',
}, // tooltip: {
xAxis3D: { // // trigger: 'axis'
type: 'category', // textStyle: {
name: '特征幅值', // color: '#fff',
data: [ // fontStyle: 'normal',
'0-10%', // opacity: 0.35,
'10%-20%', // fontSize: 14
'20%-30%', // },
'30%-40%', // backgroundColor: 'rgba(0,0,0,0.55)',
'40%-50%', // borderWidth: 0,
'50%-60%', // formatter: function (params: any) {
'60%-70%', // console.log(params)
'70%-80%', // var tips = ''
'80%-90%', // for (var i = 0; i < params.length; i++) {
'90%-100%' // tips += params[i].name + '</br/>'
], // tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
axisLine: { // }
lineStyle: { // return tips
color: '#111' // }
} // },
}, // title: {
axisLabel: { // text: '暂态事件概率分布',
color: '#111' // x: 'center'
} // },
},
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: { // visualMap: {
opacity: 1 // max: 20,
}, // show: false,
emphasis: { // inRange: {
label: { // color: ['#313695', '#00BB00', '#ff8000', '#a50026']
textStyle: { // }
fontSize: 20, // },
color: '#900' // xAxis3D: {
} // type: 'category',
}, // name: '特征幅值',
itemStyle: { // data: [
color: '#900' // '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({ const echartList1 = ref({
title: { title: {
text: '越限时间概率分布' 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({ const tableStore: any = new TableStore({
url: '/user-boot/dept/deptTree', url: '/cs-harmonic-boot/csevent/getEventCoords',
method: 'POST', method: 'POST',
showPage: false, showPage: false,
column: [], column: [],
@@ -351,7 +354,143 @@ 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: () => {
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'
}
}
}
]
}
}
} }
}) })