修改地图切换接线图逻辑

src/views/SagTraceResult_WX/components/bdMap.vue

@@ -7,8 +7,8 @@
       </div>
 
       <div class="div">
-        <img src="@/assets/txycyzj.gif" alt="" />
-        <span>暂降监测点</span>
+        <img src="@/assets/img/txzcwzj.png" alt="" />
+        <span>监测点</span>
       </div>
     </div>
     <div class="bmSelect">
@@ -70,7 +70,7 @@
             v-for="path in areaLineInfo"
             :key="path.lineId"
             :icon="path.icon"
-            @click="markerClick(path)"
+            @click="pointClick(path)"
           ></bm-marker>
         </div>
         <bm-marker
@@ -81,75 +81,6 @@
             :show="infoWindowPoint.show"
             @close="infoWindowPoint.show = false"
           >
-            <el-descriptions
-              :title="infoWindowPoint.lineName"
-              style="min-width: 250px"
-              :column="1"
-              border
-              v-if="infoWindowPoint.lineId"
-              label-width="90px"
-            >
-              <el-descriptions-item label="供电区域">{{
-                infoWindowPoint.gdName
-              }}</el-descriptions-item>
-              <el-descriptions-item label="上级电站">{{
-                infoWindowPoint.stationName
-              }}</el-descriptions-item>
-              <el-descriptions-item label="上级母线">{{
-                infoWindowPoint.busBarName
-              }}</el-descriptions-item>
-              <el-descriptions-item label="暂降次数">{{
-                infoWindowPoint.eventCount
-              }}</el-descriptions-item>
-              <el-descriptions-item
-                label="用户"
-                v-if="infoWindowPoint.objName == null"
-                >/</el-descriptions-item
-              >
-              <template v-else>
-                <el-descriptions-item label="用户">
-                  <div class="descriptionsBox">
-                    <div
-                      v-for="(value, index) in infoWindowPoint.objName.split(
-                        ';'
-                      )"
-                      style="white-space: nowrap"
-                    >
-                      {{ value }}
-                    </div>
-                  </div></el-descriptions-item
-                >
-              </template>
-            </el-descriptions>
-            <el-descriptions
-              :title="infoWindowPoint.stationName"
-              :column="1"
-              v-else
-              style="min-width: 250px"
-              border
-            >
-              <!-- <el-descriptions-item
-                :label="index == 0 ? '母线' : ''"
-                v-for="(value, index) in infoWindowPoint.lineEventDetails"
-              >
-                {{ value.busBarName + `-` + value.lineName }}
-              </el-descriptions-item> -->
-
-              <el-descriptions-item label="母线"
-                ><div class="descriptionsBox">
-                  <div
-                    v-for="(value, index) in infoWindowPoint.lineEventDetails"
-                    style="white-space: nowrap"
-                  >
-                    {{ value.busBarName + `-` + value.lineName }}
-                  </div>
-                </div></el-descriptions-item
-              >
-
-              <el-descriptions-item label="暂降次数">{{
-                infoWindowPoint.eventCount
-              }}</el-descriptions-item>
-            </el-descriptions>
           </bm-info-window>
         </bm-marker>
       </baidu-map>
@@ -157,10 +88,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
+import { ref, reactive, nextTick, onMounted } from "vue";
 import { substationCount } from "@/api/statistics/index";
 import { useStore } from "vuex";
 // import { BmlMarkerClusterer } from "vue-baidu-map-3x";
+const emit = defineEmits(["pointClick"]);
 const store = useStore();
 const mapRef = ref<any>(null); // 地图容器的ref
 const mapInstance: any = ref(null); // 百度地图实例
@@ -177,8 +109,8 @@ const infoWindowPoint = ref<any>({
   show: false,
 });
 const center = ref({
-  lng: 120.12,
-  lat: 31.55,
+  lng: 120.124367,
+  lat: 31.555421,
 });
 const value = ref("");
 const handler = async ({ BMap, map }: any) => {
@@ -198,14 +130,19 @@ const markerClick = (e: any) => {
   zoom.value = 15;
   infoWindowPoint.value = e;
   infoWindowPoint.value.show = true;
-  center.value.lng = 116.404367;
-  center.value.lat = 39.915421;
+  center.value.lng = 120.124367;
+  center.value.lat = 31.555421;
 
   setTimeout(() => {
     center.value.lng = e.lng;
     center.value.lat = e.lat + 0.01;
   }, 0);
 };
+// 点击监测点
+const pointClick = (e: any) => {
+  emit("pointClick", e);
+  store.dispatch("setStateKey", { key: "showMap", value: false });
+};
 
 const init = () => {
   loading.value = true;
@@ -213,74 +150,96 @@ const init = () => {
   polyline.value = [];
   dataList.value = [];
   areaLineInfo.value = [];
-  substationCount({
-    deptId: store.state.deptId,
-    type: store.state.timeType,
-    startTime: store.state.timeValue[0],
-    endTime: store.state.timeValue[1],
-  }).then((res: any) => {
-    dataList.value = res.data;
-    let data = dataList.value;
-    let r = 0.0035;
-    let list = data.filter((item: any) => item.latitude != 0);
-    list.forEach((item: any) => {
-      // 变电站图标
-      item.icon = {
-        url: new URL("@/assets/jcd.png", import.meta.url).href,
+  // substationCount({
+  //   deptId: store.state.deptId,
+  //   type: store.state.timeType,
+  //   startTime: store.state.timeValue[0],
+  //   endTime: store.state.timeValue[1],
+  // }).then((res: any) => {
+  // dataList.value = res.data;
+  dataList.value = [
+    {
+      stationId: 156,
+      stationName: "110kV北京电视台变",
+      gdName: "检修分公司",
+      longitude: 120.33,
+      latitude: 31.52,
+      lineCount: 1,
+      eventCount: 1,
+      lineEventDetails: [
+        {
+          gdName: "检修分公司",
+          pictureId: "5debb8bd0ce26527675eedffd74a3198",
+          pictureName: "无锡线上",
+        },
+        {
+          gdName: "检修分公司",
+          pictureId: "35b1301833e3fdfc872b1a27a17c7245",
+          pictureName: "无锡修改1011--工程部",
+        },
+      ],
+    },
+  ];
+  let data = dataList.value;
+  let r = 0.0035;
+  let list = data.filter((item: any) => item.latitude != 0);
+  list.forEach((item: any) => {
+    // 变电站图标
+    item.icon = {
+      url: new URL("@/assets/jcd.png", import.meta.url).href,
+      size: {
+        width: 40,
+        height: 40,
+      },
+    };
+    if (
+      item.lineEventDetails?.length > 10 &&
+      item.lineEventDetails?.length < 100
+    ) {
+      r = 0.0055;
+    } else if (item.lineEventDetails.length >= 100) {
+      r = 0.01055;
+    }
+    item.lng = item.longitude;
+    item.lat = item.latitude;
+    item.lineEventDetails.forEach((val: any, i: number) => {
+      val.lng =
+        item.longitude +
+        r * Math.cos((2 * Math.PI * i) / item.lineEventDetails.length);
+      val.lat =
+        item.latitude +
+        r * Math.sin((2 * Math.PI * i) / item.lineEventDetails.length);
+      // 监测点图标
+      val.icon = {
+        url: new URL("@/assets/img/txzcwzj.png", import.meta.url).href,
         size: {
           width: 40,
           height: 40,
         },
       };
-      if (
-        item.lineEventDetails?.length > 10 &&
-        item.lineEventDetails?.length < 100
-      ) {
-        r = 0.0055;
-      } else if (item.lineEventDetails.length >= 100) {
-        r = 0.01055;
-      }
-      item.lng = item.longitude;
-      item.lat = item.latitude;
-      item.lineEventDetails.forEach((val: any, i: number) => {
-        val.lng =
-          item.longitude +
-          r * Math.cos((2 * Math.PI * i) / item.lineEventDetails.length);
-        val.lat =
-          item.latitude +
-          r * Math.sin((2 * Math.PI * i) / item.lineEventDetails.length);
-        // 监测点图标
-        val.icon = {
-          url: "",
-          size: {
-            width: 40,
-            height: 40,
-          },
-        };
 
-        val.icon.url = new URL("@/assets/txycyzj.gif", import.meta.url).href;
-        polyline.value.push([
-          {
-            lng: item.lng,
-            lat: item.lat,
-          },
-          {
-            lng: val.lng,
-            lat: val.lat,
-          },
-        ]);
-      });
-
-      areaLineInfo.value.push(...item.lineEventDetails);
+      polyline.value.push([
+        {
+          lng: item.lng,
+          lat: item.lat,
+        },
+        {
+          lng: val.lng,
+          lat: val.lat,
+        },
+      ]);
     });
 
-    siteList.value = list;
-
-    zoom.value = 12;
-    setTimeout(() => {
-      loading.value = false;
-    }, 0);
+    areaLineInfo.value.push(...item.lineEventDetails);
   });
+
+  siteList.value = list;
+
+  // zoom.value = 12;
+  setTimeout(() => {
+    loading.value = false;
+  }, 0);
+  // });
 };
 const moveenFlag = ref(true);
 
@@ -364,20 +323,26 @@ const setIcon = (e: string) => {
   moveenFlag.value = false;
   siteList.value.forEach((item: any) => {
     if (item.stationName == e) {
-      // center.value.lng = item.lng;
-      // center.value.lat = item.lat + 0.01;
-      infoWindowPoint.value = item;
-      infoWindowPoint.value.show = true;
-      zoom.value = 15;
+      center.value.lng = 120.124367;
+      center.value.lat = 31.555421;
+      setTimeout(() => {
+        center.value.lng = item.lng;
+        center.value.lat = item.lat + 0.01;
+        infoWindowPoint.value = item;
+        infoWindowPoint.value.show = true;
+        zoom.value = 15;
+      }, 0);
     }
   });
   setTimeout(() => {
     moveenFlag.value = true;
   }, 1500);
 };
+onMounted(() => {
+  init();
+});
 
 defineExpose({
-  init,
   setIcon,
 });
 </script>
@@ -390,7 +355,7 @@ defineExpose({
   height: 600px;
 }
 .bm-view {
-  width: 99%;
+  width: 100%;
   height: 980px;
 }
 .iconBox {
@@ -458,15 +423,37 @@ defineExpose({
 /* .BMap_pop div {
   background-color: #343849c7 !important;
 } */
-
+.BMap_top,
+.BMap_bottom {
+  background-color: #343849c7 !important;
+}
+/* .BMap_pop div:nth-child(1) {
+    background-color: #343849c7 !important;
+} */
+.BMap_pop > div:nth-child(1) > div,
+.BMap_pop > div:nth-child(3) > div,
+.BMap_pop > div:nth-child(5) > div,
+.BMap_pop > div:nth-child(7) > div {
+  background-color: #343849c7 !important;
+}
+.BMap_pop > div:nth-child(8) > img {
+  display: none;
+}
+.BMap_pop > div:nth-child(8) {
+  /* 设置边框宽度和颜色，上边框为可见颜色，其他边框为透明 */
+  width: 0 !important;
+  height: 0 !important;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-top: 20px solid #343849c7; /* 倒三角的颜色 */
+  transform: translateX(-26px) translateY(24px);
+  /* 可选：添加阴影增强视觉效果 */
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
+}
 .bmSelect {
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 2000;
 }
-.bm-view {
-  border: 0;
-  background-color: transparent;
-}
 </style>

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>