弹框修改

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

@@ -1,12 +1,19 @@
 <template>
     <div class="container">
         <!-- 使用 v-for 遍历四个角落 -->
-        <div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
+        <div v-for="corner in corners" v-show="corner.show" :key="corner.id" :class="['corner', corner.className]">
             <div class="content">
                 <div class="title">{{ corner.title }}</div>
                 <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">
+                    <el-descriptions-item label="指标数据">
-                        <div v-html="item.value"></div>
+                        <div style="max-height: 120px; overflow-y: auto">
+                            <div
+                                v-for="item in props.steadyState?.filter(k => k.lineId === corner.elementId)"
+                                :key="item.id"
+                            >
+                                {{ item.statisticalName }}: {{ item.value === 3.1415926 ? '/' : item.value }}
+                            </div>
+                        </div>
                     </el-descriptions-item>
                 </el-descriptions>
             </div>
@@ -18,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { Close } from '@element-plus/icons-vue'
 
 // 定义 emits
@@ -28,63 +35,7 @@ const emit = defineEmits<{
 
 // 定义接收的 props
 const props = defineProps<{
-    eventList?: []
+    steadyState?: any[]
-    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'
-        }
-    ]
 }>()
 
 // 定义四个角落的数据
@@ -110,41 +61,7 @@ const corners = ref([
 const displayOrder = ref<number[]>([])
 const lineList = ref<string[]>([]) // 缓存打开的lineId
 
-// 处理稳态指标数据
+// 截取名称的最后一部分作为标题
-const processSteadyStateData = (cornerIndex: number, elementId: string) => {
-    nextTick(() => {
-        if (!props.steadyState || props.steadyState.length == 0) {
-            if (corners.value[cornerIndex].data.length > 0) {
-                corners.value[cornerIndex].data[0].value = '暂无稳态指标数据'
-            }
-            return
-        }
-
-        let str = ``
-        props.steadyState
-            .filter(item => item.lineId === elementId)
-            .forEach(item => {
-                if (item.value == 3.1415926) {
-                    str += `<div>${item.statisticalName}：/</div>`
-                } else {
-                    str += `<div>${item.statisticalName}：${item.value}</div>`
-                }
-            })
-
-        if (str) {
-            if (corners.value[cornerIndex].data.length > 0) {
-                corners.value[cornerIndex].data[0].value =
-                    `<div style="max-height: 100px;overflow-y: auto;">${str}</div>`
-            }
-        } else {
-            if (corners.value[cornerIndex].data.length > 0) {
-                corners.value[cornerIndex].data[0].value = '暂无稳态指标数据'
-            }
-        }
-    })
-}
-
-// 截取线路名称的最后一部分作为标题
 const extractTitleFromLineName = (lineName: string): string => {
     if (!lineName) return '未知监测点'
 
@@ -169,9 +86,6 @@ const updateCornerData = (cornerIndex: number, elementId: string, lineName: stri
     // 记录该角落对应的元素ID
     corners.value[cornerIndex].elementId = elementId
     corners.value[cornerIndex].show = true
-
-    // 处理稳态指标数据
-    processSteadyStateData(cornerIndex, elementId)
 }
 
 // 显示下一个角落的函数
@@ -204,25 +118,25 @@ const showNextCorner = (elementId: string, lineName: string) => {
     }
 
     // 更新 lineList，去重并触发事件
-    updateLineList(elementId)
+    // updateLineList()
 }
 
-// 更新 lineList，去重并触发事件
+// 更新 lineList，根据 corners 的 show 状态来维护
-const updateLineList = (elementId: string) => {
+const updateLineList = () => {
-    // 检查是否已存在
+    // 根据 corners 中 show 为 true 的项来构建 lineList
-    if (!lineList.value.includes(elementId)) {
+    const newLineList = corners.value.filter(corner => corner.show && corner.elementId).map(corner => corner.elementId)
-        lineList.value.push(elementId)
+
-        // 触发事件，传递更新后的 lineList
+    // 更新 lineList
-        emit('lineListChange', [...lineList.value])
+    lineList.value = newLineList
-    }
+
+    // 触发事件，传递更新后的 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记录
 
@@ -232,13 +146,8 @@ const closeCorner = (id: string) => {
             displayOrder.value.splice(orderIndex, 1)
         }
 
-        // 从 lineList 中移除对应的 elementId
+        // 更新 lineList
-        const lineIndex = lineList.value.indexOf(elementId)
+        // updateLineList()
-        if (lineIndex !== -1) {
-            lineList.value.splice(lineIndex, 1)
-            // 触发事件，传递更新后的 lineList
-            emit('lineListChange', [...lineList.value])
-        }
     }
 }
 
@@ -249,16 +158,24 @@ const closeAllCorners = () => {
         corner.elementId = ''
     })
     displayOrder.value = []
-    lineList.value = [] // 清空 lineList
+
-    // 触发事件，传递清空后的 lineList
+    // 更新 lineList
-    emit('lineListChange', [])
+    updateLineList()
 }
 
-onMounted(() => {
+// 监听 corners 的变化，特别是 show 状态的变化
-    nextTick(() => {
+watch(
-        showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
+    () => corners.value.map(corner => ({ id: corner.id, show: corner.show, elementId: corner.elementId })),
-    })
+    (newCorners, oldCorners) => {
-})
+        // 检查是否有 show 状态的变化
+        const showStateChanged = newCorners.some((corner, index) => corner.show !== oldCorners[index]?.show)
+
+        if (showStateChanged) {
+            updateLineList()
+        }
+    },
+    { deep: true }
+)
 
 // 暴露方法给父组件使用
 defineExpose({
@@ -269,9 +186,8 @@ defineExpose({
 </script>
 
 <style scoped lang="less">
-
 .corner {
-    width: 240px;
+    width: 260px;
     background-color: #2b2d3a90;
     position: absolute;
     color: 000;

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

@@ -44,7 +44,7 @@
             ></drag-canvas>
         </div>
         <!-- 弹框 -->
-        <iframeDia :steadyState="dataList" ref="iframeDiaRef"></iframeDia>
+        <iframeDia :steadyState="dataList" ref="iframeDiaRef" @lineListChange="indicator"></iframeDia>
     </div>
 </template>
 
@@ -704,9 +704,9 @@ storedSelectedId = localStorage.getItem('selectedId') || ''
 
 // 当前点击的元素lineId   通过mt-edit/render-core/index.vue传过来的click事件
 const handleElementClick = (elementId: string, lineName: string) => {
-    iframeDiaRef.value .showNextCorner(elementId, lineName)
+    iframeDiaRef.value.showNextCorner(elementId, lineName)
     // 保存当前点击的设备ID
-    indicator(['00B78D0171091', '00B78D0171092'])
+    // indicator(['00B78D0171091', '00B78D0171092'])
     // currentClickedElementId.value = elementId
     // const item = done_json.value.find(item => item.lineId === elementId)
     // if (item && item.events && item.events.some(event => event.type === 'click')) {
@@ -869,8 +869,7 @@ const setMqtt = async () => {
         // 设置消息接收回调
         mqttClient.value.onMessage((subscribe: string, message: any) => {
             const msg: any = uint8ArrayToObject(message)
-            console.log('🚀 ~ 接受消息:', subscribe, msg)
+            if (subscribe.split('/')[2] === 'csConfigRtData') {
-            if (subscribe.split('/')[2] === 'askCSConfigRtData') {
                 // 指标数据
                 dataList.value = JSON.parse(msg.message)
             }