修改地图切换接线图逻辑

src/views/SagTraceResult_WX/components/plan.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="plan">
-    <bdMap v-show="store.state.showMap" width="100%" height="100%"></bdMap>
+    <bdMap
+      v-show="store.state.showMap"
+      width="100%"
+      height="100%"
+      @pointClick="pointClick"
+    ></bdMap>
 
     <!-- 添加加载事件监听 -->
     <iframe
@@ -13,13 +18,17 @@
       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 { useStore } from "vuex";
+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;
@@ -45,32 +54,37 @@ watch(
   },
   { immediate: true, deep: true }
 );
+// 点击监测点传入 接线图id
+const pointClick = (row: any) => {
+  setUrl(row.pictureId, row.pictureName);
+};
 
 onMounted(() => {
-  // store.dispatch("setStateKey", { key: "showMap", value: false });
   // 监听来自 eventStatistics 组件的消息
   window.addEventListener("message", handleMessage);
   getActive({}).then((res: any) => {
     if (res.code == "A0000") {
       //   window.location.origin
-      iframeSrc.value =
-        window.location.origin +
-        // "http://192.168.1.128:4001" +
-        `/zutai/?id=${res.data.id}&&name=${encodeURIComponent(
-          res.data.name
-        )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
+      setUrl(res.data.id, res.data.name);
     }
   });
-  // 子页面
-  const iframe = document.getElementById("iframeLeft");
-  if (iframe) {
-    // 监听 iframe 加载完成事件
-    iframe.addEventListener("load", function () {
-      // 通知父页面：我已加载完毕
-      store.dispatch("setStateKey", { key: "iframeLoad", value: true });
-    });
-  }
 });
+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(() => {
   // 清理事件监听器
@@ -79,6 +93,7 @@ onUnmounted(() => {
 
 // iframe 加载完成回调  添加加载事件监听
 const onIframeLoad = () => {
+  store.dispatch("setStateKey", { key: "iframeLoad", value: true });
   // console.log("iframe 加载完成");
   // 通知 securityDetail.vue 组件 iframe 已加载完成
   window.postMessage(
@@ -116,6 +131,11 @@ const sendKeysToIframe = (keyList: string[]) => {
     ); // 在生产环境中应该指定具体的域名而不是 '*'
   }
 };
+// 返回地图
+const backButton = () => {
+  window.removeEventListener("message", handleMessage);
+  store.dispatch("setStateKey", { key: "showMap", value: true });
+};
 </script>
 <style lang="scss" scoped>
 .plan {
@@ -123,4 +143,10 @@ const sendKeysToIframe = (keyList: string[]) => {
   height: 990px;
   padding: 5px;
 }
+.backButton {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+}
 </style>