From 70989cc779c19719ba3267eb01e263c2e8220c19 Mon Sep 17 00:00:00 2001
From: wanghui <wangh@ydool.com>
Date: Wed, 24 Jul 2024 14:58:07 +0800
Subject: [PATCH] 11

---
 src/assets/css/common.css |  2 +-
 src/components/header.vue | 56 +++++++++++++++++++++------------------
 src/view/analyze.vue      |  1 +
 src/view/education.vue    |  1 +
 src/view/guide.vue        |  4 +++
 src/view/home.vue         | 23 +++++++++++++++-
 src/view/hygiene.vue      |  1 +
 src/view/sy.vue           |  1 +
 src/view/sy_map.vue       | 36 ++++++++++++++++++++-----
 src/view/sy_table.vue     |  1 +
 src/view/work.vue         |  1 +
 src/view/yl.vue           |  1 +
 12 files changed, 93 insertions(+), 35 deletions(-)

diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 42b5abc..7d00ca7 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -64,5 +64,5 @@ body {
   height: 1080px !important;
   overflow: hidden;
   position: absolute;
-  z-index: 101;
+  z-index: -1;
 }
\ No newline at end of file
diff --git a/src/components/header.vue b/src/components/header.vue
index 59cfdc3..9dc570e 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,39 +1,39 @@
 <template>
-  <div class="header">
-    <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
-    <!-- <div class="time">
+
+  <teleport to="body">
+    <div class="header_content" style="position: absolute;z-index: 999;width: 1920px;">
+      <div class="header">
+        <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
+        <!-- <div class="time">
       <div id="date-display"></div>
       <div id="clock" style="margin-top: 4px">加载中...</div>
     </div> -->
 
-    <div class="header-menu">
-      <div class="header-menu-item header-menu-left">
-        <div
-          :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
-          v-for="item in data.urlLeft.slice(0, 4)"
-          :key="item.name"
-        >
-          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
-        </div>
-      </div>
-      <div class="header-menu-item header-menu-right">
-        <div
-          :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
-          v-for="item in data.urlLeft.slice(4, 8)"
-          :key="item.name"
-        >
-          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        <div class="header-menu">
+          <div class="header-menu-item header-menu-left">
+            <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 4)"
+              :key="item.name">
+              <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="header-menu-item header-menu-right">
+            <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(4, 8)"
+              :key="item.name">
+              <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+            </div>
+          </div>
         </div>
+        <img src="../assets/RightLine.gif" class="rightLineClass" />
+        <img src="../assets/RightLine.gif" class="leftLineClass" />
       </div>
     </div>
-    <img src="../assets/RightLine.gif" class="rightLineClass" />
-    <img src="../assets/RightLine.gif" class="leftLineClass" />
-  </div>
+     
+  </teleport>
 </template>
 
 <script setup>
 import { ref, reactive, toRefs, onMounted, inject, nextTick, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter, useRoute } from "vue-router"; 
 const updateClock = () => {
   //获取当前时间
   const now = new Date();
@@ -102,8 +102,7 @@ const data = reactive({
     },
   ],
   nowTab: "/home/index",
-});
-
+}); 
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
@@ -241,6 +240,7 @@ onMounted(() => {
     right: -70px;
     bottom: -50px;
   }
+
   .leftLineClass {
     position: absolute;
     transform: scaleX(-1);
@@ -248,4 +248,8 @@ onMounted(() => {
     bottom: -50px;
   }
 }
+
+.header_content{
+  background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
+}
 </style>
diff --git a/src/view/analyze.vue b/src/view/analyze.vue
index 3fb3b3c..0b25980 100644
--- a/src/view/analyze.vue
+++ b/src/view/analyze.vue
@@ -828,6 +828,7 @@ onBeforeUnmount(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {
diff --git a/src/view/education.vue b/src/view/education.vue
index c944bdc..bdeb937 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -756,6 +756,7 @@ onMounted(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {
diff --git a/src/view/guide.vue b/src/view/guide.vue
index e6123ff..66449ac 100644
--- a/src/view/guide.vue
+++ b/src/view/guide.vue
@@ -351,9 +351,12 @@ body {
   height: 100%;
   transform-style: preserve-3d;
   transition: transform 0.1s ease-in-out;
+  // background-color: skyblue;
 }
 
 .image-wall {
+  // background-color: skyblue;
+  z-index: 99;
   width: 80%;
   height: 80%;
   position: absolute;
@@ -571,4 +574,5 @@ body {
     }
   }
 }
+ 
 </style>
diff --git a/src/view/home.vue b/src/view/home.vue
index f06d75d..fb2ee8b 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -19,9 +19,23 @@ const reset_font = () => {
   let width = document.documentElement.clientWidth || document.body.clientWidth;
   let height =
     document.documentElement.clientHeight || document.body.clientHeight;
+
+  console.log(width, height)
+
   document.querySelector("#m").style.transformOrigin = "top left";
   document.querySelector("#m").style.transform =
     "scale(" + width / 1920 + "," + height / 1080 + ")";
+
+  document.querySelector(".header_content").style.transformOrigin = "top left";
+  document.querySelector(".header_content").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+
+  document.querySelector(".left").style.transformOrigin = "bottom left";
+  document.querySelector(".left").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+  document.querySelector(".right").style.transformOrigin = "bottom right";
+  document.querySelector(".right").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
 onMounted(() => {
   reset_font();
@@ -43,28 +57,33 @@ window.addEventListener("resize", function () {
   // width: 100vw;
   // overflow: hidden;
 }
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   // color: #ccffff;
 }
+
 html {
   width: 100%;
   height: 100%;
 }
+
 body {
   width: 100%;
   height: 100%;
 }
+
 #m {
   width: 100%;
   height: 100%;
   overflow: hidden;
   // position: absolute;
-  z-index: 101;
+  z-index: -1;
 
 }
+
 #emap {
   width: 100%;
   height: 980px;
@@ -73,6 +92,7 @@ body {
   left: 0;
   z-index: 100;
 }
+
 #container {
   width: 100%;
   height: 100%;
@@ -81,6 +101,7 @@ body {
   position: relative;
   overflow: hidden;
 }
+
 .main {
   * {
     pointer-events: all;
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index b26a53e..cc792e1 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -407,6 +407,7 @@ const getData = async () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {
diff --git a/src/view/sy.vue b/src/view/sy.vue
index 10f738b..adfef5e 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -1833,6 +1833,7 @@ onBeforeMount(async () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {
diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue
index a54199e..aa6e38f 100644
--- a/src/view/sy_map.vue
+++ b/src/view/sy_map.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="module">
-    <div id="map" style="width: 100%; height: 100%"></div>
-    <div class="left">
+    <teleport to="body">
+      <div id="map" style="width: 100vw; height: 100vh; "></div>
+      <div class="left" style="width: 517px;">
       <div class="lyx">
         <div class="title">
           <div class="title_name">{{ title_choose }}</div>
@@ -39,7 +40,7 @@
         </div>
       </div>
     </div>
-    <div class="right">
+    <div class="right"  style="width: 517px;" >
       <div class="jbggfwq">
         <div class="title">
           <div class="title_name">基本公共服务圈</div>
@@ -84,7 +85,10 @@
         </div>
       </div>
     </div>
+    </teleport>  
+
   </div>
+
 </template>
 <script setup>
 import {
@@ -321,9 +325,10 @@ const xkzCenter = reactive([
 var map = null;
 const initMap = () => {
   map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
+  map.setMapType(BMAP_SATELLITE_MAP);
   map.enableScrollWheelZoom(true);
-  map.setMapType(BMAP_EARTH_MAP);
   goMapCenter([119.178783, 29.034583], 12);
+
   //加载乡镇信息
   loadTown();
   //渲染地块
@@ -368,14 +373,30 @@ const addPolygonCounty = () => {
         fillOpacity: 0.7,
         name: item.name,
       });
+
       map.addOverlay(polygon);
+      polygon.addEventListener("click", () => {
+        console.log(item.name);
+        let jdCenter = [];
+        if (item.name == "溪口镇") {
+          title_choose.value = '龙游县'
+          title_choose.value = title_choose.value + `>${item.name}`;
+          console.log(title_choose.value);
+          loadCs();
+          addPolygonCountyCs();
+          mapTownCount.map((item) => {
+            if (item.name == "溪口镇") {
+              jdCenter = item.center;
+            }
+          });
+          goMapCenter(jdCenter, 14);
+        }
+      });
     }
   });
-  // mapTownCount.map((item) => {
-  //   createCustomOverlayJd(item);
-  // });
 };
 //添加街道名
+ 
 const addJd = () => {
   mapTownCount.map((item) => {
     createCustomOverlayJd(item);
@@ -1559,6 +1580,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  margin-top: 112px;
 }
 
 #id {
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index 64d9a0a..d1ca2c8 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -316,6 +316,7 @@ const rowState = (row) => {
 .module {
   width: 100%;
   display: flex;
+  margin-top: 112px;
   .displayFlex {
     height: 100%;
     display: flex;
diff --git a/src/view/work.vue b/src/view/work.vue
index 67ca937..18d435a 100644
--- a/src/view/work.vue
+++ b/src/view/work.vue
@@ -495,6 +495,7 @@ onBeforeUnmount(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {
diff --git a/src/view/yl.vue b/src/view/yl.vue
index a317a72..e4d782c 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -703,6 +703,7 @@ const getData = () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {