gx

src/components/header.vue

@@ -2,7 +2,7 @@
   <teleport to="body">
     <div
       class="header_content"
-      style="position: absolute; z-index: 999; width: 1920px"
+      style="position: absolute; z-index: 9999; width: 1920px"
     >
       <div class="header">
         <div class="headerGo" @click="to('/guide')"></div>

src/view/dialog/dialogMapDp.vue

@@ -150,10 +150,11 @@ const emit = defineEmits(["close", "handle"]);
 const handleRowClick = (row, column, event) => {
   // row 是当前行的数据
   console.log(row);
-  router.push({
-    path: `/home/index/person`,
-    query: {nm: row.nm, identNo: row.identNo,type:'map'},
-  });
+  emit("openMessage", {nm: row.nm, identNo: row.identNo});
+  // router.push({
+  //   path: `/home/index/person`,
+  //   query: {nm: row.nm, identNo: row.identNo,type:'map'},
+  // });
 };
 // 详情弹框
 const dialogShow = ref();

src/view/home.vue

@@ -5,17 +5,17 @@
           <img class="title" src="../assets/img_07.png" alt="" />
         </div> -->
       <Header />
-      <!-- <keep-alive include="首页地图">
+  
         <router-view />
-      </keep-alive> -->
+  
       <!-- <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </router-view> -->
-      <keep-alive :max="1" :include="['首页地图']">
+      <!-- <keep-alive :max="1" :include="['首页地图']">
         <router-view />
-      </keep-alive>
+      </keep-alive> -->
     </div>
   </div>
 </template>

src/view/person/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="person-container">
-    <a @click="back()" class="page_back"><i class="el-icon-arrow-left" title="返回"></i>返回</a>
-
     <div class="person-content">
       <div class="person-side">
         <div class="my-label">
@@ -221,10 +219,20 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, onMounted, watch } from "vue";
 import Dialog from "@/view/dialog/dialog.vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
+const jump = ref("");
+const props = defineProps({
+  message: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(["backMap"]);
 const router = useRouter();
 const routers = useRoute();
 const data = ref([
@@ -392,11 +400,6 @@ const tableType = reactive({
 const onClickTag = (item) => {
   dialogShow.value = true;
 };
-const back = () =>{
-    //  sessionStorage.setItem('return',true);
-     window.location.href = 'javascript:history.back(-1)';
-}
-
 const paginationDialog = reactive({
   current: 1,
   pageSize: 5,
@@ -409,6 +412,7 @@ const close = (pagination) => {
 const handlePagination = (pagination) => {
   dialogShow.value = false;
 };
+//地图过来接口
 const getData = (nm, identNo) => {
   http
     .get(`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${identNo}`)
@@ -463,18 +467,28 @@ const getData = (nm, identNo) => {
 //       }
 //     });
 // };
-const back=()=>{
-  router.back()
-}
-onMounted(() => {
-  // console.log(routers.query);
-  if (routers.query.type == "map") {
-    getData(routers.query.nm, routers.query.identNo);
+const back = () => {
+  if (jump.value == "detail") {
+    router.back();
   } else {
-    // getData2(routers.query.nm, routers.query.identNo);
+    emit("closeDetail");
+  }
+};
+watch(
+  () => props.message,
+  (newValue, oldValue) => {
+    getData(props.message.nm, props.message.identNo);
+    jump.value = "map";
+  }
+);
+onMounted(() => {
+  if (routers.query.type) {
     baseInfo.value.nm = routers.query.nm;
     baseInfo.value.dz = routers.query.dz;
     baseInfo.value.identNo = routers.query.identNo;
+    jump.value = "detail";
+  } else {
+    jump.value = "map";
   }
 });
 </script>

src/view/sy_mapcopy.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="module">
     <teleport to="body">
-      <div id="map" style="width: 100vw; height: 100vh"></div>
+      <div id="map" style="width: 100vw; height: 100vh" v-show="openD"></div>
       <div class="left" style="width: 517px">
         <div class="lyx">
           <div class="title">
@@ -159,12 +159,20 @@
         :pagination="pagination"
         @close="close"
         @handle="handlePagination"
+        @openMessage="openMessage"
       >
         <template #jzzt="{ currentCol, currentData }">
           <div v-if="currentData.jzzt == 1">居住</div>
           <div v-else>未居住</div>
         </template>
       </Dialog>
+      <personDetail
+        class="detail"
+        style="width: 1920px; height: 1080px"
+        v-show="!openD"
+        :message="message"
+        @closeDetail="closeDetail"
+      ></personDetail>
     </teleport>
   </div>
 </template>
@@ -179,7 +187,7 @@ import {
   defineProps,
   watch,
   nextTick,
-  onActivated
+  onActivated,
 } from "vue";
 import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
@@ -187,6 +195,7 @@ import initializeMap from "@/utils/mapInitializer.js";
 import http from "@/utils/request.js";
 import mapTown from "@/assets/json/ly.json";
 // import xkz from "@/assets/json/xkz.json";
+import personDetail from "./person/index.vue";
 import cssj from "@/assets/json/cssj.json";
 import j0 from "@/assets/images/map/j0.png";
 import j1 from "@/assets/images/map/j1.png";
@@ -216,6 +225,9 @@ import xcbg from "@/assets/images/map/xcbg.png";
 import AED from "@/assets/images/map/AED.png";
 import Dialog from "./dialog/dialogMapDp.vue";
 //--------定义参数-------
+//是否打开人物详情
+const openD = ref(true);
+const message = ref({});
 //存放渲染的地块及图标的数组
 const jdm_arr = ref([]); //街道名
 const jdm_number_arr = ref([]); //街道名(+数量)
@@ -1771,6 +1783,19 @@ const handlePagination = (current) => {
   }
   person_detail(age);
 };
+//打开人物详情页面
+const openMessage = (e) => {
+  message.value = e;
+  openD.value = false;
+  reset_font2();
+  //监听实现人物详情动态缩放
+  window.addEventListener('resize', reset_font2);
+};
+//关闭人物详情页面
+const closeDetail = () => {
+  openD.value = true;
+  window.removeEventListener('resize',   reset_font2);
+};
 //获取人口详情接口
 const person_detail = (age) => {
   http
@@ -2862,6 +2887,17 @@ const reset_font = () => {
       "scale(" + width / 1920 + "," + height / 1080 + ")";
   }
 };
+const reset_font2 = () => {
+  console.log(111111);
+  
+  let width = document.documentElement.clientWidth || document.body.clientWidth;
+  let height =
+    document.documentElement.clientHeight || document.body.clientHeight;
+
+  document.querySelector(".detail").style.transformOrigin = "top left";
+  document.querySelector(".detail").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+};
 onMounted(() => {
   // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
   reset_font();
@@ -2869,6 +2905,7 @@ onMounted(() => {
   getData();
   getDataBq();
   BMAP();
+  
 });
 </script>
 
@@ -3483,4 +3520,7 @@ onMounted(() => {
 :deep(.el-table .el-table__row) {
   border-bottom: none;
 }
+.detail {
+  z-index: 9998;
+}
 </style>