联调实时数据表格

src/api/index.ts

@@ -78,6 +78,13 @@ export function targetList(params: any) {
         params: params
     })
 }
+// 云平台
+export function eleEpdChooseTree_ypt() {
+    return http.request({
+        url: '/cs-system-boot/csDictData/eleEpdChooseTree',
+        method: 'GET'
+    })
+}
 // 无锡指标列表
 export function eleEpdChooseTree_wx() {
     return http.request({

src/components/mt-edit/components/layout/header-panel/index.vue

@@ -55,12 +55,12 @@
                 </el-button>
                 <el-divider direction="vertical"></el-divider>
                 <el-button-group>
-                    <el-button text circle size="small" @click="onImportClick" :disabled="useData.keyName ==''">
+                    <el-button text circle size="small" @click="onImportClick" :disabled="useData.keyName == ''">
                         <el-icon title="导入数据模型" :size="20">
                             <svg-analysis name="import-json"></svg-analysis>
                         </el-icon>
                     </el-button>
-                    <el-button text circle size="small" @click="onExportClick" :disabled="useData.keyName ==''">
+                    <el-button text circle size="small" @click="onExportClick" :disabled="useData.keyName == ''">
                         <el-icon title="导出数据模型" :size="20">
                             <svg-analysis name="export-json"></svg-analysis>
                         </el-icon>

src/components/mt-edit/components/layout/left-aside-list/index.vue

@@ -22,7 +22,7 @@
                     </el-icon>
                 </el-tooltip>
                 <el-tooltip content="删除" placement="top">
-                    <el-icon @click.stop="del(scope.$index,scope.row)" style="margin-left: 5px; cursor: pointer">
+                    <el-icon @click.stop="del(scope.$index, scope.row)" style="margin-left: 5px; cursor: pointer">
                         <Delete />
                     </el-icon>
                 </el-tooltip>
@@ -205,7 +205,7 @@ const onAddClick = () => {
 }
 
 // 删除功能，传索引行数
-function del(index: number,row: any) {
+function del(index: number, row: any) {
     ElMessageBox.confirm('确定删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -214,7 +214,7 @@ function del(index: number,row: any) {
         .then(() => {
             // splice方法，传两个参数：第几行开始，删除多少条（如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素）
             dataTrees.value.splice(index, 1)
-              useData.placeKid(row.kId)
+            useData.placeKid(row.kId)
             ElMessage({
                 type: 'success',
                 message: '删除成功'

src/components/mt-edit/components/layout/main-panel/index.vue

@@ -1420,11 +1420,10 @@ watch(
 
         time.value = setTimeout(() => {
             console.log('🚀 ~ globalStore:', globalStore)
-            if(useData.keyName==''){
+            if (useData.keyName == '') {
                 ElMessage.warning('请选择图纸！')
             }
 
-
             const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
             // const data_model: any = {
             //   canvasCfg: globalStore.canvasCfg,

src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue

@@ -42,13 +42,13 @@
         </el-form>
     </div>
     <!-- 无锡监测点 指标 -->
-    <div v-if="useData.graphicDisplay == 'wx'">
+    <div v-if="useData.graphicDisplay == 'wx' || useData.graphicDisplay == 'ypt'">
         <el-form label-width="60px" label-position="left">
             <el-form-item label="监测点" size="small" class="mt-10px">
                 <div>
                     <el-cascader
                         :key="cascaderKey"
-                        :options="treeData_wx"
+                        :options="useData.graphicDisplay == 'ypt' ? treeData : treeData_wx"
                         :props="{ value: 'id', label: 'name', children: 'children' }"
                         clearable
                         placeholder="请选择"
@@ -105,7 +105,7 @@ import { ElForm, ElFormItem, ElTreeSelect } from 'element-plus'
 import { computed, ref, watch, onMounted, reactive, nextTick, watchEffect } from 'vue'
 import type { IDoneJson } from '@/components/mt-edit/store/types'
 import { globalStore } from '@/components/mt-edit/store/global'
-import { lineTree, targetList, eleEpdChooseTree_wx } from '@/api/index'
+import { lineTree, targetList, eleEpdChooseTree_wx, eleEpdChooseTree_ypt } from '@/api/index'
 import { useDataStore } from '@/stores/menuList'
 import { lineTree_wx } from '@/api/index_wx'
 import { templateRef } from '@vueuse/core'
@@ -190,6 +190,11 @@ watch(
                     if (item_title.value == '绑定指标' && deptIds.value) {
                         indexList()
                     }
+                    // if (useData.graphicDisplay == 'ypt') {
+                    //     if (deptIds.value) {
+                    //         indexList()
+                    //     }
+                    // }
                 })
             }
         })
@@ -262,6 +267,10 @@ const fetchData = async () => {
     try {
         const response = await lineTree({})
         treeData.value = buildLevel3Tree(response.data) // 转换数据格式并赋值给 transformedData
+        if (useData.graphicDisplay == 'ypt') {
+            const res = await eleEpdChooseTree_ypt()
+            treeIndexs.value = res.data // 转换数据格式并赋值给 transformedData
+        }
     } catch (error) {
         console.error('Error fetching data:', error)
     }
@@ -334,6 +343,12 @@ const handleDeptChange = (deptId: []) => {
                 indexList()
             }
         }
+
+        // if (useData.graphicDisplay == 'ypt') {
+        //     if (deptId) {
+        //         indexList()
+        //     }
+        // }
     })
 }
 // 给每一个元件绑定下拉框数据

src/components/mt-edit/components/render-core/index.vue

@@ -68,7 +68,12 @@
             @set-intention="val => renderCoreEmits('setIntention', val)"
             @line-mouse-up="onLineMouseUp"
             v-on="renderCoreProps.preivewMode ? eventToVOn(item, externalMethod) : {}"
-            @click="() => renderCoreProps.onElementClick && item.lineId && renderCoreProps.onElementClick(item.lineId)"
+            @click="
+                () =>
+                    renderCoreProps.onElementClick &&
+                    item.lineId &&
+                    renderCoreProps.onElementClick(item.lineId, item.lineName)
+            "
         ></render-item>
     </mt-dzr>
 </template>
@@ -130,7 +135,7 @@ type RenderCoreProps = {
     preivewMode?: boolean
     lineAppendEnable?: boolean
     showPopover?: boolean
-    onElementClick?: (elementId: string) => void
+    onElementClick?: (elementId: string, lineName?: string) => void
 }
 const renderCoreProps = withDefaults(defineProps<RenderCoreProps>(), {
     doneJson: () => [],

src/components/mt-edit/index.vue

@@ -320,9 +320,13 @@ const onSaveClick = () => {
 const useData = useDataStore()
 const onSaveAll = async () => {
     let data: any = await useData.dataTree.map((item, ind) => {
+        let pathList = JSON.parse(item.path)
+        pathList.canvasCfg.lineList = pathList.json.filter(k => k.lineId != '' && k.lineId != null).map(k => k.lineId)
+        item.path = JSON.stringify(pathList)
         item.sort = ind
         return item
     })
+    console.log('🚀 ~ onSaveAll ~ data:', data)
 
     let form = new FormData()
     let blob = new Blob([JSON.stringify(data)], {

src/components/mt-edit/utils/index.ts

@@ -817,6 +817,7 @@ export const eventToVOn = (item: IDoneJson, externalMethod: (kid?: string) => vo
                 code_str += event.jump_to
             }
         }
+
         if (!Object.prototype.hasOwnProperty.call(event_obj, event.type)) {
             event_obj[event.type] = code_str
         } else {

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

@@ -0,0 +1,262 @@
+<template>
+    <div class="container">
+        <!-- 使用 v-for 遍历四个角落 -->
+        <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 label="指标数据">
+                        <div style="height: 200px; overflow-y: auto">
+                            <div
+                                v-for="item in props.steadyState?.filter(k => k.lineId === corner.elementId)"
+                                :key="item.id"
+                            >
+                                {{ item.statisticalName.replace(/\//g, '_') }}:
+                                {{ item.value === 3.1415926 ? '/' : item.value + item.unit }}
+                            </div>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+            <span class="close-btn" @click="closeCorner(corner.id)">
+                <Close />
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+
+// 定义 emits
+const emit = defineEmits(['lineListChange'])
+
+// 定义接收的 props
+const props = defineProps<{
+    steadyState?: any[]
+}>()
+
+// 定义四个角落的数据
+const corners = ref([
+    {
+        id: 'topLeft',
+        title: '左上',
+        className: 'top-left',
+        show: false,
+        data: [] as { label: string; value: string }[],
+        elementId: '' // 记录该角落对应的元素ID
+    },
+    {
+        id: 'topRight',
+        title: '右上',
+        className: 'top-right',
+        show: false,
+        data: [] as { label: string; value: string }[],
+        elementId: ''
+    }
+])
+
+const displayOrder = ref<number[]>([])
+
+// 截取名称的最后一部分作为标题
+const extractTitleFromLineName = (lineName: string): string => {
+    if (!lineName) return '未知监测点'
+
+    // 按照 "/" 分割字符串，取最后一部分
+    const parts = lineName.split('/')
+    return parts.length > 0 ? parts[parts.length - 1].trim() : lineName
+}
+
+// 更新指定角落数据的函数
+const updateCornerData = (cornerIndex: number, elementId: string, lineName: string) => {
+    // 更新标题为传入的 lineName 的最后一部分
+    corners.value[cornerIndex].title = extractTitleFromLineName(lineName)
+
+    // 格式化数据（只保留稳态指标一项）
+    corners.value[cornerIndex].data = [
+        {
+            label: '稳态指标',
+            value: '正在加载...'
+        }
+    ]
+
+    // 记录该角落对应的元素ID
+    corners.value[cornerIndex].elementId = elementId
+    corners.value[cornerIndex].show = true
+}
+
+// 显示下一个角落的函数
+const showNextCorner = (elementId: string, lineName: string) => {
+    // 检查该元素ID是否已经显示过
+    const existingCornerIndex = corners.value.findIndex(corner => corner.elementId === elementId && corner.show)
+
+    if (existingCornerIndex !== -1) {
+        // 如果该元素已经显示过，更新标题
+        corners.value[existingCornerIndex].title = extractTitleFromLineName(lineName)
+        return
+    }
+
+    // 查找一个未显示的角落
+    const availableCornerIndex = corners.value.findIndex(corner => !corner.show)
+
+    if (availableCornerIndex !== -1) {
+        // 有空闲角落，显示在该角落
+        updateCornerData(availableCornerIndex, elementId, lineName)
+
+        // 记录显示顺序
+        displayOrder.value.push(availableCornerIndex)
+    } else {
+        // 没有空闲角落，按顺序替换角落
+        // 获取需要替换的角落索引（循环替换）
+        const replaceIndex = displayOrder.value.shift() || 0
+        updateCornerData(replaceIndex, elementId, lineName)
+        // 将替换的索引重新加入队列末尾
+        displayOrder.value.push(replaceIndex)
+    }
+
+    // updateLineList()
+}
+const timer = ref<any>(null)
+// 更新 lineList，根据 corners 的 show 状态来维护
+const updateLineList = () => {
+    const newLineList = corners.value.filter(corner => corner.show && corner.elementId).map(corner => corner.elementId)
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+    if (newLineList.length > 0) {
+        emit('lineListChange', newLineList)
+        timer.value = setInterval(
+            () => {
+                emit('lineListChange', newLineList)
+            },
+            3 * 60 * 1000
+        )
+    }
+}
+
+// 关闭指定角落的函数
+const closeCorner = (id: string) => {
+    const cornerIndex = corners.value.findIndex(c => c.id === id)
+    if (cornerIndex !== -1) {
+        corners.value[cornerIndex].show = false
+        corners.value[cornerIndex].elementId = '' // 清空元素ID记录
+
+        // 从显示顺序中移除该角落索引
+        const orderIndex = displayOrder.value.indexOf(cornerIndex)
+        if (orderIndex !== -1) {
+            displayOrder.value.splice(orderIndex, 1)
+        }
+    }
+}
+
+// 关闭所有角落的函数
+const closeAllCorners = () => {
+    corners.value.forEach(corner => {
+        corner.show = false
+        corner.elementId = ''
+    })
+    displayOrder.value = []
+
+    updateLineList()
+}
+
+// 监听 corners 的变化，特别是 show 状态的变化
+watch(
+    () => 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({
+    showNextCorner,
+    closeCorner,
+    closeAllCorners
+})
+</script>
+
+<style scoped lang="less">
+.corner {
+    width: 260px;
+    position: absolute;
+}
+
+.top-left {
+    top: 10px;
+    left: 10px;
+}
+
+.top-right {
+    top: 10px;
+    right: 10px;
+}
+
+.bottom-left {
+    top: 170px;
+    left: 10px;
+}
+
+.bottom-right {
+    top: 170px;
+    right: 10px;
+}
+
+.content {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    font-size: 16px;
+    padding: 8px;
+    border-bottom: 1px solid #ccc;
+
+    background-color: #fff;
+}
+
+.data-item {
+    display: flex;
+    margin-bottom: 4px;
+    font-size: 14px;
+}
+
+.label {
+    width: 55px;
+    flex-shrink: 0;
+}
+
+.value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 关闭按钮样式 */
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 14px;
+    color: #000;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.indicator {
+    display: flex;
+}
+</style>

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

@@ -42,9 +42,10 @@
                 @drag-canvas-mouse-move="dragCanvasMouseMove"
                 @drag-canvas-mouse-up="dragCanvasMouseUp"
             ></drag-canvas>
-            <!-- </el-scrollbar> -->
         </div>
     </div>
+    <!-- 弹框 -->
+    <iframeDia :steadyState="dataList" ref="iframeDiaRef" @lineListChange="indicator"></iframeDia>
 </template>
 
 <script setup lang="ts">
@@ -59,43 +60,12 @@ import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue'
 import { useDataStore } from '@/stores/menuList'
 import { globalStore } from '../mt-edit/store/global'
 import type { IDoneJsonEventList } from '../mt-edit/store/types'
-
+import IframeDia from './iframeDia.vue'
 import MQTT from '@/utils/mqtt'
-import { log } from 'console'
+const iframeDiaRef = ref<any>(null)
 
-const tableData = [
-    {
-        date: '2023-05-03 13:33:44:853',
-        name: '1#主变分支I',
-        address: '发生暂降，特征幅值:39.87%,持续时间:10.019s'
-    },
-    {
-        date: '2023-05-02 13:31:50:155',
-        name: '1#主变分支I',
-        address: '发生暂降，特征幅值:39.95%,持续时间:5.02s'
-    }
-    // {
-    //     date: '2016-05-04',
-    //     name: '110kV杨镇变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // },
-    // {
-    //     date: '2016-05-01',
-    //     name: '110kV加工区变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // },
-    // {
-    //     date: '2016-05-01',
-    //     name: '110kV加工区变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // }
-]
+const dataList = ref([])
 
-const showDetail = ref(false)
-
-const showDetailClick = () => {
-    showDetail.value = !showDetail.value
-}
 // 节流函数实现 (替代lodash，减少依赖)
 const throttle = (func: (...args: any[]) => void, wait: number) => {
     let lastTime = 0
@@ -189,11 +159,6 @@ const canvasStyle = computed(() => ({
     marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px'
 }))
 
-const onScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => {
-    scroll_info.left = scrollLeft
-    scroll_info.top = scrollTop
-}
-
 // 鼠标按下事件 - 开始拖拽
 const onMouseDown = (e: MouseEvent) => {
     if (mtPreviewProps.canDrag && e.button === 0) {
@@ -362,66 +327,37 @@ onMounted(async () => {
     if (mtPreviewProps.exportJson) {
         await setImportJson(mtPreviewProps.exportJson)
     }
-    await sendTableData()
-    if (useData.graphicDisplay == 'zl') {
-        // // 治理项目连接mqtt
-        await setMqtt()
-    }
-    // window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面
+
+    // 连接mqtt
+    await setMqtt()
+    // await sendTableData()
 })
 
-// 无锡大屏通过iframe传过来的数据
-// let keyList = [
-//     '5f99b9ba4e563439ec8490a0c598da8d',
-//     '401a696fe9918bb4cce7d9393d0d5df7',
-//     '74203b186428c1684aa450ad05257b06'
-// ]
-// 无锡大屏通过iframe传过来的数据  lineId
+// mqtt推过来的  lineId
 let keyList = ref<any>([])
 
-// 闪烁点 lineId
-let list = ref<any>([])
-
-// 最大点闪烁点lineId
-let listMax = ref<any>([])
-
-// 初始颜色
-let sendColor = ref<any>('')
-// 最大监测点颜色
-let sendMaxColor = ref<any>('')
-
-// 背景色
-let backgroundPointId = ref<any>([])
-let backgroundPointColor = ref<any>('')
-
-// let list = [
-//     'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
-//     'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
-//     // 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH',
-//     'c53cccb8c65201c192d8c57fbdb4d993-LH9I0qD86s'
-// ]
+// 实时数据表格
+const tableData = ref()
 
 const sendTableData = () => {
     try {
-        // 确保只传输可序列化的数据
-        const cleanData = tableData.map(item => ({
-            name: item.name,
-            date: item.date,
-            address: item.address
-        }))
-
-        // 只发送 useData 中需要的可序列化数据
-        const serializableUseData = {
-            display: useData.display,
-            loading: useData.loading
-            // 添加其他需要的简单属性
+        // 类型检查，确保 tableData.value 是数组
+        if (!Array.isArray(tableData.value)) {
+            console.warn('tableData is not an array, current value:', tableData.value)
+            return
         }
 
+        // 确保只传输可序列化的数据
+        const cleanData = tableData.value.map(item => ({
+            name: item.name,
+            date: item.timeId,
+            address: item.eventDesc
+        }))
+
         window.parent.postMessage(
             {
                 action: 'securityDetailData',
                 data: cleanData
-                // data1: serializableUseData
             },
             '*'
         )
@@ -430,21 +366,10 @@ const sendTableData = () => {
     }
 }
 
-let message = [
-    { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
-    { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' }
-    // { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' }
-]
-
-// 传输设备相关的连接线ID列表
-let list_sys = ref<any>([])
-
 let transmissionDeviceIds: string[] = []
 
 let eventListAll = ref<any>([])
 
-let flagValue = ref('')
-
 const receiveMessage = () => {
     // 在 iframe 内的页面中
     window.addEventListener('message', function (event) {
@@ -453,62 +378,52 @@ const receiveMessage = () => {
 
         const { type, payload } = event.data
 
-        if (type === 'ANALYSIS_KEYS') {
+        if (type === 'RESET_EVENT') {
+            // 处理复位事件
+            handleResetEvent()
+        } else if (type === 'ANALYSIS_KEYS') {
+            // 处理 ANALYSIS_KEYS 消息
             // 在处理新数据前，先清理现有的动态文字
             if (savedExportJson.value) {
                 savedExportJson.value.json =
                     savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || []
                 done_json.value = done_json.value.filter(item => !item.id?.startsWith('auto-text-'))
             }
-            // console.log('payload1111', payload)
-            // 处理接收到的 keyList 数据
-            keyList.value = payload.eventList
-            list.value = payload.eventList
-            sendColor.value = payload.color
-            // 点击行的全部数据
-            if (payload.eventListAll) {
-                eventListAll.value = payload.eventListAll
-                // 在数据接收后重新更新文本
-                setTimeout(() => {
-                    if (savedExportJson.value) {
-                        addTextNextToTransport()
 
-                        setImportJson(savedExportJson.value)
-                    }
-                }, 100)
-            } else {
-                eventListAll.value = []
-            }
-            if (payload.maxColor) {
-                sendMaxColor.value = payload.maxColor
-            } else {
-                sendMaxColor.value = ''
-            }
-            if (payload.maxResponsibilityMonitorId) {
-                listMax.value = payload.maxResponsibilityMonitorId
-            } else {
-                listMax.value = []
-            }
-            if (payload.backgroundPointId) {
-                backgroundPointId.value = payload.backgroundPointId
-            } else {
-                backgroundPointId.value = []
-            }
-            if (payload.backgroundPointColor) {
-                backgroundPointColor.value = payload.backgroundPointColor
-            } else {
-                backgroundPointColor.value = ''
-            }
-            if (payload.flagValue) {
-                flagValue.value = payload.flagValue
-            } else {
-                flagValue.value = ''
-            }
+            init()
+        }
+        // 对于其他类型的消息，我们仍然调用 init()
+        else if (type) {
+            init()
         }
-        init()
     })
 }
 
+// 复位事件处理函数
+const handleResetEvent = () => {
+    //  清空或重置 表格数据
+    // if (tableData.value && Array.isArray(tableData.value)) {
+    //     tableData.value = []
+    // } else {
+    //     // 确保 tableData 是一个空数组
+    //     tableData.value = []
+    // }
+
+    // 接线图数据
+    keyList.value = []
+
+    setTimeout(() => {
+        // 表格数据
+        sendTableData()
+        // 接线图数据
+        if (savedExportJson.value) {
+            setImportJson(savedExportJson.value)
+        }
+    }, 100)
+
+    console.log('执行复位操作完成')
+}
+
 //根据 lineId 查找传输设备 ID 的函数
 const findTransmissionDeviceIdsByKeyList = (array: any) => {
     if (!savedExportJson.value?.json) return []
@@ -583,65 +498,12 @@ const setImportJson = (exportJson: IExportJson) => {
         setTimeout(() => {
             done_json.value.forEach(item => {
                 //报警设备闪烁
-                if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
-                    // item.props.fill.val = '#fcfc57'
-                    item.props.fill.val = sendColor.value
+                if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) {
+                    item.props.fill.val = 'red'
                     item.common_animations.val = 'flash'
-                    if (findTransmissionDeviceIdsByKeyList(listMax.value).includes(item.id)) {
-                        item.props.fill.val = sendMaxColor.value
-                        item.common_animations.val = 'flash'
-                    }
-
-                    // 查找与该设备连接的线
-                    const connectedLines = searchDevicesConnect([item.id!])
-                    // console.log('该设备连接的线:', connectedLines)
-
-                    // 通过连接的线找到开关，再找到开关连接的所有线
-                    const allRelatedLines: string[] = [...connectedLines]
-
-                    for (const lineId of connectedLines) {
-                        // 通过线找到连接的开关
-                        const switchId = findSwitchByLineEndpoint(lineId)
-                        if (switchId) {
-                            // console.log('找到连接的开关:', switchId)
-
-                            // 找到开关连接的所有线
-                            const switchLines = findLinesBySwitchId(switchId)
-                            // console.log('开关连接的线:', switchLines)
-
-                            // 合并所有相关的线
-                            switchLines.forEach(line => {
-                                if (!allRelatedLines.includes(line)) {
-                                    allRelatedLines.push(line)
-                                }
-                            })
-                        }
-                    }
-
-                    //console.log('所有相关的线:', allRelatedLines)
-
-                    // 高亮显示所有相关的线
-                    //只有当 flagValue 不等于 '2' 时才高亮显示所有相关的线
-                    if (flagValue.value !== '2') {
-                        highlightLines(allRelatedLines)
-                    }
                 } else {
                     item.common_animations.val = ''
                 }
-
-                if (findTransmissionDeviceIdsByKeyList(backgroundPointId.value).includes(item.id)) {
-                    item.props.fill.val = backgroundPointColor.value
-                    item.common_animations.val = 'flash'
-                }
-
-                // 报警设备连线电流
-                // if (list_sys.value.includes(item.id)) {
-                //     item.props.ani_type.val = 'electricity'
-                //     item.props.ani_color.val = '#d0e20a'
-                // }
-                // if(item.id=='sys-line-vertical-v9oPMlvQL1'){
-                //      item.props.ani_color.val = '#8c0ae2'
-                // }
             })
         }, 1000)
     }
@@ -649,7 +511,7 @@ const setImportJson = (exportJson: IExportJson) => {
     if (!useData.loading) {
         if (exportJson == null) {
             setDoneJson(useData.dataTree[0].kId)
-            publish(useData.dataTree[0].id)
+            publish(useData.dataTree[0])
         } else {
             executeOperations()
         }
@@ -662,7 +524,7 @@ const setImportJson = (exportJson: IExportJson) => {
                     // 当loading变为true时执行操作
                     if (exportJson == null) {
                         setDoneJson(useData.dataTree[0].kId)
-                        publish(useData.dataTree[0].id)
+                        publish(useData.dataTree[0])
                     } else {
                         executeOperations()
                     }
@@ -676,80 +538,6 @@ const setImportJson = (exportJson: IExportJson) => {
     return true
 }
 
-// 根据线的起点或终点查找连接的开关
-const findSwitchByLineEndpoint = (lineId: string): string | null => {
-    if (!savedExportJson.value?.json) return null
-
-    const line = savedExportJson.value.json.find(item => item.id === lineId)
-    if (!line || !line.props?.bind_anchors) return null
-
-    const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
-    if (!bindAnchors) return null
-
-    // 查找起点连接的开关
-    const startId = bindAnchors.start?.id
-    if (startId) {
-        const startElement = savedExportJson.value.json.find(item => item.id === startId)
-        if (startElement && startElement.title?.includes('开关')) {
-            return startElement.id!
-        }
-    }
-
-    // 如果起点不是开关，查找终点连接的开关
-    const endId = bindAnchors.end?.id
-    if (endId) {
-        const endElement = savedExportJson.value.json.find(item => item.id === endId)
-        if (endElement && endElement.title?.includes('开关')) {
-            return endElement.id!
-        }
-    }
-
-    return null
-}
-
-// 根据开关ID查找所有连接的线
-const findLinesBySwitchId = (switchId: string): string[] => {
-    if (!savedExportJson.value?.json) return []
-
-    const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
-
-    const connectedLines: string[] = []
-
-    for (const line of lineElements) {
-        const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
-        if (!bindAnchors) continue
-
-        const startId = bindAnchors.start?.id
-        const endId = bindAnchors.end?.id
-
-        if (startId === switchId || endId === switchId) {
-            connectedLines.push(line.id!)
-        }
-    }
-
-    // console.log('连接的线:', connectedLines)
-
-    return connectedLines
-}
-
-// 高亮显示连线的函数
-const highlightLines = (lineIds: string[]) => {
-    lineIds.forEach(id => {
-        const line = done_json.value.find(item => item.id === id)
-        if (line) {
-            line.props.ani_type.val = 'electricity'
-            line.props.ani_color.val = '#d0e20a'
-
-            // 置顶显示 - 将连线元素移到数组末尾（因为渲染顺序是按数组顺序）
-            const index = done_json.value.findIndex(item => item.id === id)
-            if (index !== -1) {
-                const [item] = done_json.value.splice(index, 1)
-                done_json.value.push(item)
-            }
-        }
-    })
-}
-
 // 添加一个新的 ref 来存储当前点击的设备ID
 const currentClickedElementId = ref<string | null>(null)
 
@@ -759,22 +547,24 @@ let storedSelectedId = ''
 storedSelectedId = localStorage.getItem('selectedId') || ''
 
 // 当前点击的元素lineId   通过mt-edit/render-core/index.vue传过来的click事件
-const handleElementClick = (elementId: string) => {
+const handleElementClick = (elementId: string, lineName: string) => {
+    iframeDiaRef.value.showNextCorner(elementId, lineName)
     // 保存当前点击的设备ID
-    currentClickedElementId.value = elementId
-    const item = done_json.value.find(item => item.lineId === elementId)
-    if (item && item.events && item.events.some(event => event.type === 'click')) {
-        // 发送设备ID到父级iframe
-        window.parent.postMessage(
-            {
-                action: 'coreClick',
-                coreId: elementId.toString(), // 确保是字符串
-                selectedId: storedSelectedId // 新增的字段
-                // elementData: item // 可以发送整个元素数据
-            },
-            '*'
-        )
-    }
+    // 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')) {
+    //     // 发送设备ID到父级iframe
+    //     window.parent.postMessage(
+    //         {
+    //             action: 'coreClick',
+    //             coreId: elementId.toString(), // 确保是字符串
+    //             selectedId: storedSelectedId // 新增的字段
+    //             // elementData: item // 可以发送整个元素数据
+    //         },
+    //         '*'
+    //     )
+    // }
 }
 const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
     // 确保 savedExportJson.value 存在
@@ -844,95 +634,6 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
     return connectedLineIds
 }
 
-// 添加针对传输设备旁边添加文字的方法
-const addTextNextToTransport = () => {
-    // 确保 savedExportJson.value 存在后再进行操作
-    if (!savedExportJson.value) {
-        console.warn('savedExportJson.value is undefined')
-        return []
-    }
-    let transportDevices = []
-    // 查找传输设备图元并添加文字图元
-    transportDevices =
-        savedExportJson.value.json?.filter(item =>
-            findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)
-        ) || []
-
-    // 为每个传输设备添加旁边的文字图元
-    const textElementsToAdd: IExportDoneJson[] = []
-    const idsToRemove: string[] = []
-
-    transportDevices.forEach((device, index) => {
-        // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
-        const expectedIdPrefix = `auto-text-${device.id}-`
-
-        // 查找所有与当前设备关联的现有文本图元
-        const existingTextElements =
-            savedExportJson.value?.json?.filter(item => item.id?.startsWith(expectedIdPrefix)) || []
-
-        // 将这些旧图元的 ID 添加到待删除列表
-        idsToRemove.push(...existingTextElements.map(item => item.id!))
-
-        // 获取对应的消息文本
-        const deviceMessage =
-            eventListAll.value[0].find((m: any) => m.monitorId === device.lineId)?.responsibilityData || 0
-
-        // 创建新的文本图元
-        const textElement: IExportDoneJson = {
-            id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
-            title: '动态文字',
-            type: 'vue',
-            tag: 'text-vue',
-            props: {
-                // text: deviceMessage.toFixed(1) + '%',
-                text: '占比:' + Math.floor(deviceMessage * 10) / 10 + '%',
-                fontFamily: '黑体',
-                fontSize: 14,
-                fill: 'red',
-                vertical: false
-            },
-            common_animations: {
-                val: '',
-                delay: 'delay-0s',
-                speed: 'slow',
-                repeat: 'infinite'
-            },
-            binfo: {
-                left: (device.binfo?.left || 0) + (device.binfo?.width / 2 || 0) + 10,
-                //top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20),
-                top: (device.binfo?.top || 0) + (device.binfo?.height || 0) - 10,
-                width: 200,
-                height: 50,
-                angle: 0
-            },
-            resize: true,
-            rotate: true,
-            lock: false,
-            active: false,
-            hide: false,
-            UIDName: '',
-            UIDNames: [],
-            events: []
-        }
-        textElementsToAdd.push(textElement)
-    })
-
-    // 从 savedExportJson.value.json 中移除旧的文本图元
-    if (savedExportJson.value.json) {
-        done_json.value = savedExportJson.value.json.filter(item => !idsToRemove.includes(item.id!))
-    }
-
-    // 合并原始图元和新增的文字图元
-    const updatedJson = [...done_json.value, ...textElementsToAdd]
-
-    // 更新 savedExportJson.value
-    if (savedExportJson.value) {
-        savedExportJson.value.json = updatedJson
-    }
-
-    return updatedJson
-}
-
 // 预览时候绑定指标等的点击事件
 const setDoneJson = async (kId: string) => {
     const filteredItems = useData.dataTree.filter(item => item.kId == kId)
@@ -970,26 +671,6 @@ const init = async () => {
         // 调用函数获取传输设备 ID
         transmissionDeviceIds = findTransmissionDeviceIdsByKeyList(keyList.value)
 
-        //传入参数: transmissionDeviceIds - 一个包含传输设备ID的数组
-        // 功能: 查找与这些传输设备相关的连接线（包括直接连接和间接连接的线）
-        list_sys.value = searchDevicesConnect(transmissionDeviceIds)
-
-        // 将结果赋值给 savedExportJson.value
-        // if (savedExportJson.value) {
-        //     // 创建一个新的对象，避免直接修改原始对象
-        //     savedExportJson.value = {
-        //         ...savedExportJson.value,
-        //         json: updatedDoneJson
-        //     }
-        // } else {
-        //     // 如果 savedExportJson.value 不存在，创建一个新的对象
-        //     savedExportJson.value = {
-        //         canvasCfg: canvas_cfg.value,
-        //         gridCfg: grid_cfg.value,
-        //         json: updatedDoneJson
-        //     }
-        // }
-
         // 重新设置导入的JSON以触发界面更新
         setImportJson(savedExportJson.value)
     }, 100)
@@ -999,51 +680,84 @@ const timer = ref()
 // 连接mqtt
 const mqttClient = ref()
 const setMqtt = async () => {
-    mqttClient.value = new MQTT('/zl/rtData/#')
+    mqttClient.value = new MQTT('/zl/TemperData/#')
 
     // 设置消息接收回调
     try {
         await mqttClient.value.init()
 
         // 订阅主题
-        await mqttClient.value.subscribe('/zl/rtData/#')
+        await mqttClient.value.subscribe('/zl/TemperData/#') //实时数据
+        await mqttClient.value.subscribe('/zl/csConfigRtData/#') //指标
 
         // 设置消息接收回调
         mqttClient.value.onMessage((subscribe: string, message: any) => {
             const msg: any = uint8ArrayToObject(message)
-            console.log('🚀 ~ 接受消息:', msg)
-            setTimeout(() => {
-                done_json.value.forEach(item => {
-                    msg.forEach((msgValue: any) => {
-                        if (item.id == msgValue.id) {
-                            item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31'
-                        }
-                    })
-                })
-            }, 100)
+            // console.log('🚀 ~ setMqtt ~ msg:', msg)
+            if (subscribe.split('/')[2] === 'csConfigRtData') {
+                // 指标数据
+                dataList.value = JSON.parse(msg.message)
+                //console.log('🚀 ~ setMqtt ~ dataList:', dataList.value)
+                //  keyList.value = JSON.parse(list.path).canvasCfg.lineList
+            }
+            if (subscribe.split('/')[2] === 'TemperData') {
+                // 表格数据
+                tableData.value = []
+                tableData.value = JSON.parse(msg.message)
+                //console.log('🚀 ~ setMqtt ~ tableData:', tableData.value)
+                // 闪烁点
+                // if (Array.isArray(tableData.value) && tableData.value.length > 0) {
+                //     // 提取所有的 id 并去重（使用 Set 方式，性能更好）
+                //     const uniqueIds = [
+                //         ...new Set(
+                //             tableData.value
+                //                 .filter(item => item.id) // 确保 id 存在
+                //                 .map(item => item.id) // 提取 id
+                //         )
+                //     ]
+
+                //     keyList.value = uniqueIds
+                //     console.log('提取的唯一ID列表:', keyList.value)
+                // }
+                sendTableData()
+            }
         })
     } catch (error) {
         console.error('MQTT 初始化失败:', error)
     }
 }
-const publish = async (id: string) => {
-    if (useData.graphicDisplay != 'zl') return //质量项目进入
+const publish = async (list: any) => {
+    console.log('🚀 ~ publish ~ list:', JSON.parse(list.path).canvasCfg.lineList)
     if (mqttClient.value) {
-        await mqttClient.value.subscribe('zl/askRtData/' + id)
         // 发送消息
-        await mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+        await mqttClient.value.publish(
+            '/zl/askCSConfigWarnData/' + storedSelectedId,
+            `[${JSON.parse(list.path).canvasCfg.lineList}]`
+        )
         if (timer.value) {
             clearInterval(timer.value)
             timer.value = null
         }
         timer.value = setInterval(
             () => {
-                mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+                mqttClient.value.publish(
+                    '/zl/askCSConfigWarnData/' + storedSelectedId,
+                    `[${JSON.parse(list.path).canvasCfg.lineList}]`
+                )
             },
             3 * 60 * 1000
         )
     }
 }
+// 绑定指标
+const indicator = async (ids: string[]) => {
+    if (mqttClient.value) {
+        // await mqttClient.value.subscribe('zl/askCSConfigRtData/' + useData.dataTree[0].id)
+        // 发送消息
+        await mqttClient.value.publish('/zl/askCSConfigRtData/' + storedSelectedId, `[${ids}]`)
+    }
+}
+
 onUnmounted(() => {
     if (timer.value) {
         clearInterval(timer.value)
@@ -1152,4 +866,13 @@ defineExpose({
     /* background-color: #303b54; */
     background-color: #5aa1ff29;
 }
+/* .aaaa{
+    position: absolute;
+    right: 0;
+    top: 0px;
+    z-index: 111123;
+    height: 100px;
+    width: 100px;
+    background-color: #ccc;
+} */
 </style>

src/utils/mqtt.ts

@@ -52,11 +52,11 @@ class MQTT {
         }
 
         try {
-            // const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
-            const mqttUrl =
-                localStorage.getItem('MQTTZUTAI') == 'null'
-                    ? 'ws://192.168.1.103:8083/mqtt'
-                    : localStorage.getItem('MQTTZUTAI')
+            const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
+            // const mqttUrl =
+            //     localStorage.getItem('MQTTZUTAI') == 'null'
+            //         ? 'ws://192.168.1.103:8083/mqtt'
+            //         : localStorage.getItem('MQTTZUTAI')
             console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
             this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
             this.setupEventListeners()

src/utils/request.ts

@@ -19,11 +19,10 @@ class HttpRequest {
         instance.interceptors.request.use(
             config => {
                 // 添加全局的loading..
-                config.headers['Authorization'] =
-                    'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
-
                 // config.headers['Authorization'] =
-                //     'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
+                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
+                config.headers['Authorization'] =
+                    'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
                 // 请求头携带token
                 return config
             },