153 lines
3.9 KiB
Vue
153 lines
3.9 KiB
Vue
<template>
|
||
<div class="plan">
|
||
<bdMap
|
||
v-show="store.state.showMap"
|
||
width="100%"
|
||
height="100%"
|
||
@pointClick="pointClick"
|
||
></bdMap>
|
||
|
||
<!-- 添加加载事件监听 -->
|
||
<iframe
|
||
v-if="!store.state.showMap"
|
||
:src="iframeSrc"
|
||
width="100%"
|
||
height="100%"
|
||
frameborder="0"
|
||
scrolling="no"
|
||
id="iframeLeft"
|
||
@load="onIframeLoad"
|
||
></iframe>
|
||
<el-button class="backButton" @click="backButton" size="small" :icon="Back"
|
||
>返回</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||
import { getActive } from "@/api/manage_wx/index";
|
||
import { Back } from "@element-plus/icons-vue";
|
||
import bdMap from "./bdMap.vue";
|
||
import { useStore } from "vuex";
|
||
const store = useStore();
|
||
const props = defineProps<{
|
||
project: { id: string; name: string } | null;
|
||
}>();
|
||
|
||
const iframeSrc = ref("");
|
||
|
||
// 监听 props 变化
|
||
watch(
|
||
() => props.project,
|
||
(newVal) => {
|
||
if (newVal && newVal.id && newVal.name) {
|
||
// window.location.origin
|
||
iframeSrc.value =
|
||
window.location.origin +
|
||
// "http://192.168.1.128:4001" +
|
||
`/zutai/?id=${newVal.id}&&name=${encodeURIComponent(
|
||
newVal.name
|
||
)}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
|
||
|
||
// console.log("更新 iframeSrc:", iframeSrc.value);
|
||
}
|
||
},
|
||
{ immediate: true, deep: true }
|
||
);
|
||
// 点击监测点传入 接线图id
|
||
const pointClick = (row: any) => {
|
||
setUrl(row.pictureId, row.pictureName);
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 监听来自 eventStatistics 组件的消息
|
||
window.addEventListener("message", handleMessage);
|
||
getActive({}).then((res: any) => {
|
||
if (res.code == "A0000") {
|
||
// window.location.origin
|
||
setUrl(res.data.id, res.data.name);
|
||
}
|
||
});
|
||
});
|
||
const setUrl = (url: string, nam: string) => {
|
||
iframeSrc.value =
|
||
// window.location.origin +
|
||
"http://192.168.1.179:4001" +
|
||
`/zutai/?id=${url}&&name=${encodeURIComponent(
|
||
nam
|
||
)}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
|
||
// const iframe = document.getElementById("iframeLeft");
|
||
// if (iframe) {
|
||
// // 监听 iframe 加载完成事件
|
||
// iframe.addEventListener("load", function () {
|
||
// // 通知父页面：我已加载完毕
|
||
// store.dispatch("setStateKey", { key: "iframeLoad", value: true });
|
||
// });
|
||
// }
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
// 清理事件监听器
|
||
window.removeEventListener("message", handleMessage);
|
||
});
|
||
|
||
// iframe 加载完成回调 添加加载事件监听
|
||
const onIframeLoad = () => {
|
||
store.dispatch("setStateKey", { key: "iframeLoad", value: true });
|
||
// 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,
|
||
},
|
||
"*"
|
||
); // 在生产环境中应该指定具体的域名而不是 '*'
|
||
}
|
||
};
|
||
// 返回地图
|
||
const backButton = () => {
|
||
window.removeEventListener("message", handleMessage);
|
||
store.dispatch("setStateKey", { key: "showMap", value: true });
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.plan {
|
||
width: 100%;
|
||
height: 990px;
|
||
padding: 5px;
|
||
}
|
||
.backButton {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
z-index: 1;
|
||
}
|
||
</style>
|