Compare commits

..

2 Commits

Author SHA1 Message Date
stt
5580d0618e Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern 2025-11-14 09:34:42 +08:00
stt
c1ebcfed6f 指标越限程度联调 2025-11-14 09:34:39 +08:00
6 changed files with 196 additions and 104 deletions

View File

@@ -70,6 +70,14 @@ export function limitExtentData(data: any) {
data: data
})
}
// 指标日趋势图数据
export function limitExtentDayData(data: any) {
return request({
url: '/harmonic-boot/limitRateDetailD/limitExtentDayData',
method: 'post',
data: data
})
}

View File

@@ -12,12 +12,20 @@
ref="chartRef"
class="tall"
:options="echartList"
:style="{ width: prop.width, height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)` }"
:style="{
width: prop.width,
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
}"
@chart-click="handleChartClick"
/>
<el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%">
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false" :wp="wp" />
<waveFormAnalysis
v-loading="loading"
v-if="isWaveCharts"
ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false"
:wp="wp"
/>
</el-dialog>
</div>
</template>
@@ -27,10 +35,11 @@ import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { analyseWave } from '@/api/common'
const prop = defineProps({
w: { type: String },
@@ -79,7 +88,10 @@ const loading = ref(false)
const wp = ref({})
const OverLimitDetailsRef = ref()
const boxoList: any = ref({})
const waveFormAnalysisRef: any = ref(null)
const data = reactive({
name: '事件个数',
gs: 0,
@@ -93,7 +105,7 @@ const tableStore: any = new TableStore({
showPage: false,
column: [],
beforeSearchFun: () => {
beforeSearchFun: () => {
// 尝试从缓存获取时间值
let beginTime, endTime
@@ -419,7 +431,6 @@ onMounted(() => {
// 点击事件处理函数
const handleChartClick = (params: any) => {
if (params.seriesName === '可容忍事件') {
// 处理可容忍事件点击
ElMessage.info(`点击了可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
@@ -432,9 +443,30 @@ const handleChartClick = (params: any) => {
}
// 可容忍事件点击处理函数
const handleTolerableEventClick = (params: any) => {
console.log('可容忍事件详情:', params)
const handleTolerableEventClick = async (row: any) => {
console.log('可容忍事件详情:', row)
isWaveCharts.value = true
loading.value = true
isWaveCharts.value = true
await analyseWave(row.id)
.then(res => {
row.loading1 = false
if (res != undefined) {
boxoList.value = row
boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
boxoList.value.systemType = 'WX'
wp.value = res.data
}
loading.value = false
})
.catch(() => {
row.loading1 = false
loading.value = false
})
nextTick(() => {
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
})
}
// 不可容忍事件点击处理函数

View File

@@ -1,11 +1,9 @@
<template>
<!-- 指标日趋势图 -->
<el-dialog draggable title="指标日趋势图" v-model="dialogVisible" append-to-body width="70%">
<my-echart
class="tall"
:options="echartList"
style="width: 98%; height: 320px"
/>
<el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
<div :style="pageHeight">
<my-echart class="tall" :options="echartList" style="width: 98%" />
</div>
</el-dialog>
</template>
@@ -13,6 +11,9 @@
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import { mainHeight } from '@/utils/layout'
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
const prop = defineProps({
width: { type: String },
height: { type: String },
@@ -20,70 +21,130 @@ const prop = defineProps({
timeValue: { type: Object }
})
const pageHeight = ref(mainHeight(332))
const dialogVisible: any = ref(false)
const dialogTitle = ref('')
const config = useConfig()
const echartList = ref({
title: {
text: '指标日趋势图',
},
xAxis: {
type: 'category',
data: [
'00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
],
axisLabel: {
interval: 1
}
},
yAxis: {
type: 'value',
name: '数值'
},
grid: {
left: '10px',
right: '20px',
containLabel: true
},
options: {
series: [
{
name: '指标值',
type: 'line',
showSymbol: true,
smooth: true,
data: [
10, 12, 15, 18, 22, 28,
35, 45, 60, 75, 88, 95,
100, 98, 90, 80, 70, 60,
50, 40, 30, 25, 20, 15
],
itemStyle: {
normal: {
color: config.layout.elementUiPrimary[0]
const dialogText = ref('')
const echartList = ref()
const init = () => {
echartList.value = {
title: {
text: dialogText.value,
textStyle: {
fontSize: 14,
rich: {
lineName: {
color: '#333',
fontSize: 14
},
timeLabel: {
color: '#333',
fontSize: 14,
padding: [0, 0, 0, 10]
},
name: {
color: '#333',
fontSize: 14,
padding: [0, 0, 0, 10]
}
},
areaStyle: {
opacity: 0.3
}
}
]
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value',
name: '数值'
},
grid: {
left: '1%',
right: '45px',
bottom: '40px',
top: '15%',
containLabel: true
},
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100
}
],
options: {
series: []
}
}
})
}
const initData = async (row: any) => {
limitExtentDayData({ code: row.code, lineId: row.lineId, time: row.time }).then(res => {
if (res.data && res.data.length > 0) {
// 重新初始化图表
init()
onMounted(() => {
})
// 从第一条数据中提取时间作为x轴数据
const firstItem = res.data[0]
const xAxisData = firstItem.time.split(',')
// 定义相位颜色映射
const phaseColors: any = {
A: '#DAA520',
B: '#2E8B57',
C: '#A52a2a'
}
// 处理每条相位数据
const seriesData = res.data.map((item: any) => {
const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
return {
name: `${item.phasic}`,
type: 'line',
showSymbol: true,
smooth: true,
data: values,
itemStyle: {
normal: {
// 根据相位设置对应颜色
color: phaseColors[item.phasic] || config.layout.elementUiPrimary[0]
}
}
}
})
// 更新图表配置
echartList.value.xAxis.data = xAxisData
echartList.value.options.series = seriesData
}
})
}
onMounted(() => {})
const open = async (row: any) => {
dialogVisible.value = true
dialogTitle.value = row.name + '日趋势图'
dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
nextTick(() => {
initData(row)
})
}
defineExpose({ open })

View File

@@ -66,34 +66,6 @@ const fullscreen = computed(() => {
const echartList = ref()
// const echartList = ref({
// title: {
// text: '指标越限严重度'
// },
// xAxis: {
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
// },
// yAxis: {
// name: '%', // 给X轴加单位
// interval: 20
// },
// grid: {
// left: '10px',
// right: '20px'
// },
// options: {
// series: [
// {
// type: 'bar',
// name: '越限占比',
// data: [0, 7.5, 36, 0, 80],
// barMaxWidth: 30
// }
// ]
// }
// })
const dailyTrendChartRef = ref()
const tableStore: any = new TableStore({
url: '/harmonic-boot/limitRateDetailD/limitExtentData',
@@ -122,7 +94,7 @@ const tableStore: any = new TableStore({
minWidth: '60',
render: 'customTemplate',
customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
return `<span style='cursor: pointer;text-decoration: underline;'>${row.maxValue}</span>`
}
},
{
@@ -138,12 +110,32 @@ const tableStore: any = new TableStore({
{
title: '发生日期',
field: 'time',
minWidth: '100'
minWidth: '60',
render: 'customTemplate',
customTemplate: (row: any) => {
if (
row.time !== null &&
row.time !== undefined &&
row.time !== ''
) {
return `<span>${row.time}</span>`
} else {
return `<span>/</span>`
}
}
},
{
title: '越限最高监测点',
field: 'lineName',
minWidth: '90'
minWidth: '90',
render: 'customTemplate',
customTemplate: (row: any) => {
if (row.lineName !== null && row.lineName !== undefined && row.lineName !== '') {
return `<span>${row.lineName}</span>`
} else {
return `<span>/</span>`
}
}
}
],
beforeSearchFun: () => {
@@ -166,12 +158,12 @@ const tableStore: any = new TableStore({
// 定义 x 轴标签顺序
const xAxisLabels = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
// 根据指标名称顺序提取对应的 maxValue 数据
// 根据指标名称顺序提取对应的 extent 数据
const chartData = xAxisLabels.map(label => {
// 在表格数据中查找对应指标名称的数据项
const item = tableStore.table.data.find((row: any) => row.name === label)
// 如果找到对应项,则返回 maxValue 值,否则返回 0
return item ? parseFloat(item.maxValue) || 0 : 0
// 如果找到对应项,则返回 extent 值,否则返回 0
return item ? item.extent || 0 : 0
})
echartList.value = {
title: {
@@ -183,8 +175,8 @@ const tableStore: any = new TableStore({
},
yAxis: {
name: '%', // 给X轴加单位
interval: 20
name: '%' // 给X轴加单位
// interval: 20
},
grid: {
left: '10px',
@@ -211,8 +203,7 @@ provide('tableStore', tableStore)
// 点击行
const cellClickEvent = ({ row, column }: any) => {
if (column.field != 'name') {
console.log(row)
if (column.field == 'maxValue' && row.lineId) {
dailyTrendChartRef.value.open(row)
}
}

View File

@@ -1,5 +1,5 @@
<template>
<el-dialog draggable title="谐波电压/电流含有率" v-model="dialogVisible" append-to-body width="70%">
<el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
<!-- 总体指标占比详情谐波含有率 -->
<div>
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">

View File

@@ -11,7 +11,7 @@
<Table
ref="tableRef"
@cell-click="cellClickEvent"
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -50 : 56}px )`"
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
></Table>
<!-- 指标越限详情 -->
<OverLimitDetails ref="OverLimitDetailsRef" />