Merge branch 'master' of http://192.168.1.22:3000/Web/bigscreenWeb

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,13 +150,36 @@ 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;
+  // 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);
@@ -251,14 +211,13 @@ const init = () => {
         r * Math.sin((2 * Math.PI * i) / item.lineEventDetails.length);
       // 监测点图标
       val.icon = {
-          url: "",
+        url: new URL("@/assets/img/txzcwzj.png", import.meta.url).href,
         size: {
           width: 40,
           height: 40,
         },
       };
 
-        val.icon.url = new URL("@/assets/txycyzj.gif", import.meta.url).href;
       polyline.value.push([
         {
           lng: item.lng,
@@ -276,11 +235,11 @@ const init = () => {
 
   siteList.value = list;
 
-    zoom.value = 12;
+  // 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;
+      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>