From f2d02ff7f5c1f7dfac66fc73ca8197397b5a9763 Mon Sep 17 00:00:00 2001 From: stt Date: Tue, 25 Nov 2025 14:22:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E6=80=81=E4=BA=8B=E4=BB=B6=E6=98=8E?= =?UTF-8?q?=E7=BB=86=E9=A1=B5=E9=9D=A2=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cockpit/transientDetails/index.vue | 54 ++- .../cockpit/transientDistribution/index.vue | 439 ++++++++++++------ 2 files changed, 320 insertions(+), 173 deletions(-) diff --git a/src/components/cockpit/transientDetails/index.vue b/src/components/cockpit/transientDetails/index.vue index 7cd3087..de99130 100644 --- a/src/components/cockpit/transientDetails/index.vue +++ b/src/components/cockpit/transientDetails/index.vue @@ -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: () => { @@ -138,13 +140,15 @@ const setBackground = (value: string) => { provide('tableStore', tableStore) onMounted(() => { - nextTick(() => { - if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') { - TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }]) - } - TableHeaderRef.value.setInterval(3) - tableStore.index() - }) + nextTick(() => { + if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') { + TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }]) + } + if (fullscreen.value) { + TableHeaderRef.value.setInterval(3) + } + tableStore.index() + }) }) watch( () => prop.timeKey, @@ -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 = () => { diff --git a/src/components/cockpit/transientDistribution/index.vue b/src/components/cockpit/transientDistribution/index.vue index 808efa9..b954df7 100644 --- a/src/components/cockpit/transientDistribution/index.vue +++ b/src/components/cockpit/transientDistribution/index.vue @@ -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 + '
' - tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '
' - } - 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 + '
' +// tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '
' +// } +// 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] + '
' + tips += '特征幅值: ' + params.seriesName + '
' + tips += '事件次数: ' + params.value[2] + '
' + 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' + } + } + } + ] + } + } } })