admin-govern/src/views/pqs/cockpit/realTimeData/index.vue

<template>
    <div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
        <!-- 实时数据 -->
        <!-- 添加加载事件监听 -->
        <div class="dataBox" :style="{ height: prop.height || pageHeight.height }" >
            <div
                class="iframe-container"
                :style="{
                    boxShadow: `var(--el-box-shadow-light)`
                }"
                style="position: relative;"
            >
                <iframe
                    :src="iframeSrc"
                    width="100%"
                    height="100%"
                    frameborder="0"
                    scrolling="no"
                    id="iframeLeft"
                    @load="onIframeLoad"
                ></iframe>
                <IframeDia
                style="position: absolute; top: 0px; right: 0px; left: 0px"
              />
            </div>

            <el-card class="bottom-container " style="min-height: 230px;">
                <div class="buttonBox">
                    <el-button type="primary" icon="el-icon-Aim">复位</el-button>
                </div>
                <div class="tableBox">
                    <Table ref="tableRef"  height="100%"></Table>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, provide } from 'vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
import IframeDia from './iframeDia.vue'
// import { getActive } from "@/api/manage_wx/index";

// const props = defineProps<{
//     project: { id: string; name: string } | null
// }>()

const prop = defineProps({
    width: { type: String },
    height: { type: String },
    timeKey: { type: String },
    timeValue: { type: Object }
})

const tableStore: any = new TableStore({
    url: '/user-boot/role/selectRoleDetail?id=0',
    method: 'POST',

    showPage: false,
    exportName: '主要监测点列表',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            title: '时间',
            field: 'whetherToGovern',
            minWidth: '70'
        },
        {
            title: '监测点名',
            field: 'name',
            minWidth: '90'

            // render: 'customTemplate',
            // customTemplate: (row: any) => {
            //     return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
            // }
        },

        { title: '事件描述', field: 'question', minWidth: '200' }
    ],
    beforeSearchFun: () => {
        // tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
        //     tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
    },
    loadCallback: () => {
        tableStore.table.data = [
            {
                name: '10kV1#电动机',
                type: '电动机',
                whetherToGovern: '2025-01-01 15:00:00',
                question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
            },
            {
                name: '10kV2#(治理后)',
                type: '电焊机',
                whetherToGovern: '2025-05-01 16:00:00',
                question: '所有指标均合格'
            },
            {
                name: '380V电焊机(治理前)',
                type: '电焊机',
                whetherToGovern: '2025-06-01 15:00:00',
                question: '5次谐波电流、电压不平衡度超标'
            },
            {
                name: '380V水泵机',
                type: '电动机',
                whetherToGovern: '2025-08-01 15:00:00',
                question: '所有指标均合格'
            }
        ]
    }
})
const tableRef = ref()
provide('tableRef', tableRef)
const pageHeight = mainHeight(40)
provide('tableStore', tableStore)

const iframeSrc = ref('')

// 监听 props 变化
// watch(
//     () => props.project,
//     newVal => {
//         if (newVal && newVal.id && newVal.name) {
//             //   window.location.origin
//             //   iframeSrc.value =
//             //     "http://192.168.1.179:4001" +
//             //     `/zutai/?id=${newVal.id}&&name=${encodeURIComponent(
//             //       newVal.name
//             //     )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
//             iframeSrc.value =
//                 'http://192.168.1.179:4001' +
//                 `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true&&display=true#/preview_YPT`

//             // console.log("更新 iframeSrc:", iframeSrc.value);
//         }
//     },
//     { immediate: true, deep: true }
// )

onMounted(() => {
    iframeSrc.value =
        'http://192.168.1.179:4001' +
        `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`

    tableStore.index()

    // 监听来自 eventStatistics 组件的消息
    window.addEventListener('message', handleMessage)

    //   getActive({}).then((res: any) => {
    //     if (res.code == "A0000") {
    //       //   window.location.origin
    //       iframeSrc.value =
    //         "http://192.168.1.179:4001" +
    //         `/zutai/?id=${res.data.id}&&name=${encodeURIComponent(
    //           res.data.name
    //         )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
    //     }
    //   });
})

onUnmounted(() => {
    // 清理事件监听器
    window.removeEventListener('message', handleMessage)
})

// iframe 加载完成回调  添加加载事件监听
const onIframeLoad = () => {
    // console.log("iframe 加载完成");
    // 通知 securityDetail.vue 组件 iframe 已加载完成
    window.postMessage(
        {
            type: 'IFRAME_LOADED',
            data: { loaded: true }
        },
        '*'
    )
}

// 处理来自 eventStatistics 组件的消息
const handleMessage = (event: MessageEvent) => {
    // 验证消息来源（在生产环境中应该验证 origin）
    // if (event.origin !== 'trusted-origin') return;

    const { type, payload } = event.data

    if (type === 'SEND_KEYS_TO_IFRAME') {
        // 将数据转发给 iframe
        sendKeysToIframe(payload)
    }
}

// 向 iframe 发送 keyList 数据
const sendKeysToIframe = (keyList: string[]) => {
    const iframe = document.getElementById('iframeLeft') as HTMLIFrameElement
    if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage(
            {
                type: 'ANALYSIS_KEYS',
                payload: keyList
            },
            '*'
        ) // 在生产环境中应该指定具体的域名而不是 '*'
    }
}
</script>
<style lang="scss" scoped>
.dataBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.iframe-container {
    flex: 3.5;
}
:deep(.el-card__body) {
    display: flex;
    padding: 10px;
    height: 100%;
    .buttonBox {
        display: flex; 
        width: 150px;
        align-items: center;
        justify-content: center;
    }
    .tableBox {
        flex: 1;
        width: 100%;
    }
}
</style>