From 178054426d3a2afe88bb56bdd4b09136e29f07e1 Mon Sep 17 00:00:00 2001 From: stt Date: Fri, 5 Dec 2025 11:25:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mt-preview-ypt/iframeDia.vue | 166 ++++++-------------- 1 file changed, 52 insertions(+), 114 deletions(-) diff --git a/src/components/mt-preview-ypt/iframeDia.vue b/src/components/mt-preview-ypt/iframeDia.vue index 58fb02e..455352d 100644 --- a/src/components/mt-preview-ypt/iframeDia.vue +++ b/src/components/mt-preview-ypt/iframeDia.vue @@ -4,7 +4,6 @@
{{ corner.title }}
- {{ corner.data }}
@@ -22,6 +21,11 @@ import { ref, onMounted, nextTick } from 'vue' import { Close } from '@element-plus/icons-vue' +// 定义 emits +const emit = defineEmits<{ + (e: 'lineListChange', lineList: string[]): void +}>() + // 定义接收的 props const props = defineProps<{ eventList?: [] @@ -83,63 +87,6 @@ const props = defineProps<{ ] }>() -// const steadyState = [ -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx', -// lineId: '00B78D0171091', -// phaseType: 'Pq_RmsU', -// statisticalName: '统计数据 / 相电压总有效值 / A / 平均值', -// target: '统计数据$Pq_RmsU$A', -// value: 45, -// valueType: 'A' -// }, -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx', -// lineId: '00B78D0171091', -// phaseType: 'Pq_RmsU', -// statisticalName: '统计数据 / 相电压总有效值 / A / CP95', -// target: '统计数据$Pq_RmsU$A', -// value: 3.1415926, -// valueType: 'A' -// }, -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx', -// lineId: '00B78D0171091', -// phaseType: 'Pq_RmsU', -// statisticalName: '统计数据 / 相电压总有效值 / A / 最大值', -// target: '统计数据$Pq_RmsU$A', -// value: 3.1415926, -// valueType: 'A' -// }, -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx', -// lineId: '00B78D0171091', -// phaseType: 'Pq_RmsU', -// statisticalName: '统计数据 / 相电压总有效值 / A / 最小值', -// target: '统计数据$Pq_RmsU$A', -// value: 3.1415926, -// valueType: 'A' -// }, -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-zOXUxFQ6Vt', -// lineId: '00B78D0171092', -// phaseType: 'Pq_RmsLU', -// statisticalName: '统计数据 / 线电压总有效值 / BC / 平均值', -// target: '统计数据$Pq_RmsLU$BC', -// value: 3.1415926, -// valueType: 'BC' -// }, -// { -// id: 'c53cccb8c65201c192d8c57fbdb4d993-zOXUxFQ6Vt', -// lineId: '00B78D0171092', -// phaseType: 'Pq_RmsLU', -// statisticalName: '统计数据 / 线电压总有效值 / BC / CP95', -// target: '统计数据$Pq_RmsLU$BC', -// value: 3.1415926, -// valueType: 'BC' -// } -// ] - // 定义四个角落的数据 const corners = ref([ { @@ -161,6 +108,7 @@ const corners = ref([ ]) const displayOrder = ref([]) +const lineList = ref([]) // 缓存打开的lineId // 处理稳态指标数据 const processSteadyStateData = (cornerIndex: number, elementId: string) => { @@ -237,21 +185,21 @@ const showNextCorner = (elementId: string, lineName: string) => { return } - // 确保 props.eventList 是数组并且过滤掉 null/undefined 元素 - if (!Array.isArray(props.eventList)) { - console.warn('props.eventList 不是数组格式:', props.eventList) - return - } + // // 确保 props.eventList 是数组并且过滤掉 null/undefined 元素 + // if (!Array.isArray(props.eventList)) { + // console.warn('props.eventList 不是数组格式:', props.eventList) + // return + // } - // 过滤掉 null 和 undefined 元素，然后查找匹配项 - const validItems = props.eventList.filter(item => item !== null && item !== undefined) - const dataItem = validItems.find(item => item.lineId === elementId) + // // 过滤掉 null 和 undefined 元素，然后查找匹配项 + // const validItems = props.eventList.filter(item => item !== null && item !== undefined) + // const dataItem = validItems.find(item => item.lineId === elementId) - // 如果没有找到匹配的数据项，则不更新数据 - if (!dataItem) { - console.warn('未找到匹配的数据项:', elementId) - return - } + // // 如果没有找到匹配的数据项，则不更新数据 + // if (!dataItem) { + // console.warn('未找到匹配的数据项:', elementId) + // return + // } // 查找一个未显示的角落 const availableCornerIndex = corners.value.findIndex(corner => !corner.show) @@ -270,12 +218,27 @@ const showNextCorner = (elementId: string, lineName: string) => { // 将替换的索引重新加入队列末尾 displayOrder.value.push(replaceIndex) } + + // 更新 lineList，去重并触发事件 + updateLineList(elementId) +} + +// 更新 lineList，去重并触发事件 +const updateLineList = (elementId: string) => { + // 检查是否已存在 + if (!lineList.value.includes(elementId)) { + lineList.value.push(elementId) + // 触发事件，传递更新后的 lineList + emit('lineListChange', [...lineList.value]) + } } // 关闭指定角落的函数 const closeCorner = (id: string) => { const cornerIndex = corners.value.findIndex(c => c.id === id) if (cornerIndex !== -1) { + const elementId = corners.value[cornerIndex].elementId + corners.value[cornerIndex].show = false corners.value[cornerIndex].elementId = '' // 清空元素ID记录 @@ -284,6 +247,14 @@ const closeCorner = (id: string) => { if (orderIndex !== -1) { displayOrder.value.splice(orderIndex, 1) } + + // 从 lineList 中移除对应的 elementId + const lineIndex = lineList.value.indexOf(elementId) + if (lineIndex !== -1) { + lineList.value.splice(lineIndex, 1) + // 触发事件，传递更新后的 lineList + emit('lineListChange', [...lineList.value]) + } } } @@ -294,13 +265,15 @@ const closeAllCorners = () => { corner.elementId = '' }) displayOrder.value = [] + lineList.value = [] // 清空 lineList + // 触发事件，传递清空后的 lineList + emit('lineListChange', []) } onMounted(() => { - // nextTick(() => { - // showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1') - // }) - + nextTick(() => { + showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1') + }) }) // 暴露方法给父组件使用 @@ -311,42 +284,7 @@ defineExpose({ }) - - - + \ No newline at end of file