样式修改

src/components/mt-preview-ypt/iframeDia.vue

@@ -4,7 +4,6 @@
         <div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
             <div class="content">
                 <div class="title">{{ corner.title }}</div>
-                {{ corner.data }}
                 <el-descriptions :column="1" size="small" label-width="70px" border>
                     <el-descriptions-item v-for="(item, index) in corner.data" :key="index" :label="item.label">
                         <div v-html="item.value"></div>
@@ -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<number[]>([])
+const lineList = ref<string[]>([]) // 缓存打开的lineId
 
 // 处理稳态指标数据
 const processSteadyStateData = (cornerIndex: number, elementId: string) => {
@@ -237,21 +185,21 @@ const showNextCorner = (elementId: string, lineName: string) => {
         return
     }
 
-    // 确保 props.eventList 是数组并且过滤掉 null/undefined 元素
+    // // 确保 props.eventList 是数组并且过滤掉 null/undefined 元素
-    if (!Array.isArray(props.eventList)) {
+    // if (!Array.isArray(props.eventList)) {
-        console.warn('props.eventList 不是数组格式:', props.eventList)
+    //     console.warn('props.eventList 不是数组格式:', props.eventList)
-        return
+    //     return
-    }
+    // }
 
-    // 过滤掉 null 和 undefined 元素，然后查找匹配项
+    // // 过滤掉 null 和 undefined 元素，然后查找匹配项
-    const validItems = props.eventList.filter(item => item !== null && item !== undefined)
+    // const validItems = props.eventList.filter(item => item !== null && item !== undefined)
-    const dataItem = validItems.find(item => item.lineId === elementId)
+    // const dataItem = validItems.find(item => item.lineId === elementId)
 
-    // 如果没有找到匹配的数据项，则不更新数据
+    // // 如果没有找到匹配的数据项，则不更新数据
-    if (!dataItem) {
+    // if (!dataItem) {
-        console.warn('未找到匹配的数据项:', elementId)
+    //     console.warn('未找到匹配的数据项:', elementId)
-        return
+    //     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(() => {
+    nextTick(() => {
-    //     showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
+        showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
-    // })
+    })
-    
 })
 
 // 暴露方法给父组件使用
@@ -311,42 +284,7 @@ defineExpose({
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
-/* 走马灯样式 - 支持逐条显示 */
-.simple-marquee {
-    width: 230px;
-    height: 24px;
-    overflow: hidden;
-    position: relative;
-    white-space: nowrap;
-}
-
-.marquee-content {
-    display: inline-block;
-    padding-left: 100%;
-    animation: marquee-single var(--marquee-duration, 25s) linear infinite;
-    line-height: 24px;
-    text-decoration: underline;
-    text-decoration-color: #4877f6;
-}
-
-@keyframes marquee-single {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
-}
-
-/* 鼠标悬停时暂停动画 */
-.simple-marquee:hover .marquee-content {
-    animation-play-state: paused;
-    cursor: pointer;
-}
-</style>
-
-<style scoped lang="scss">
 .container {
     position: relative;
 }
@@ -376,7 +314,7 @@ defineExpose({
 
 .top-right {
     top: 10px;
-    right: 0px;
+    right: 10px;
 }
 
 .bottom-left {
@@ -429,7 +367,7 @@ defineExpose({
     top: 10px;
     right: 10px;
     width: 14px;
-    color: white;
+    color: #000;
     font-size: 14px;
     font-weight: bold;
     cursor: pointer;