bigscreenWeb/src/views/SagTraceResult_WX/components/plan.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>