修改gis,解决分辨率问题

public/config.js

 
-export const ExternalSERVEICE='http://218.69.97.198:8001'
-export const WithinSERVEICE='http://192.168.1.252:8001'
-// export const ExternalSERVEICE='http://localhost:5013'
-// export const WithinSERVEICE='http://localhost:5013'
+// export const ExternalSERVEICE='http://218.69.97.198:8001'
+// export const WithinSERVEICE='http://192.168.1.252:8001'
+export const ExternalSERVEICE='http://localhost:5013'
+export const WithinSERVEICE='http://localhost:5013'
 export const CURRLOGO="LOGO_gangyi.png"
 

src/App.vue

@@ -8,14 +8,14 @@
         padding: 0;
         width: 100%;
         height:100%;
-        overflow: hidden;
+        overflow:hidden;
         text-align: left;
         min-height: 100vh;
         max-width: 100vw;
         /* display: flex;
         flex-direction: column; */
     }
-
+ /*
     ::-webkit-scrollbar {
         width: 0 !important;
     }
@@ -23,8 +23,8 @@
         width: 0 !important;
         height: 0;
     }
-    ::-webkit-scrollbar {
-        /*隐藏滚轮*/
+   ::-webkit-scrollbar {
+        隐藏滚轮
         display: none;
-    }
+    }*/
 </style>

src/main.js

 import { createApp } from 'vue'
-import './style/style.css'
-import './style/index.less'
+ import './style/style.css'
+ import './style/index.less'
 import './assets/css/main.css'
+//import { detectZoom } from '@/plugins/screen';
 
 // 引入Element Plus
 import ElementPlus from 'element-plus'
@@ -29,24 +30,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 
 app.component('Notification', Notification)
- 
-// app.config.globalProperties.$notify = (message, type = 'info') => {
-//   // 创建一个通知实例
-//   const NotificationConstructor = app.component('Notification')
-//   const notificationInstance = new NotificationConstructor({
-//     el: document.createElement('div'),
-//     propsData: { message, type }
-//   })
-  
-//   // 添加到文档体中
-//   document.body.appendChild(notificationInstance.$el)
-  
-//   // 自动关闭逻辑（例如：2秒后关闭）
-//   setTimeout(() => {
-//     notificationInstance.$el.remove()
-//     notificationInstance.$destroy()
-//   }, 2000)
-// }
 
 app.config.globalProperties.http = http;
 

src/router/index.js

@@ -5,12 +5,22 @@ import HomePage from '@/views/home.vue'
 import AboutPage from '@/components/About.vue'
 import store from '@/store'
 //import nProgress from 'nprogress'
+import screenDisplay from '@/views/Gis/screenDisplay.vue'
+import iframe from '@/views/iframe.vue'
 
 // 定义路由规则
 const routes = [
     {
         path: '/',
         component: HomePage
+    },    
+    {
+        path: '/screenDisplay',
+        component: screenDisplay
+    },{
+        path:'/iframe',
+        name: 'iframe',
+        component: iframe
     },
     {
         path: '/Login',

src/views/Gis/screenDisplay.vue

 <script setup>
+
 import screenDisplay from '../../components/screenDisplay.vue'
+import { detectZoom } from '../../plugins/screen';
+const m = detectZoom();
+if( window.screen.height * window.devicePixelRatio == 1080) {
+    document.body.style.zoom = 100 / Number(m);
+}
+var height = window.screen.height;
+console.log(height);
+if( window.screen.height * window.devicePixelRatio >= 1600) {
+  document.body.style.zoom = 132 / Number(m);
+}
 </script>
 
 <template>
   <main>
     <screenDisplay />
   </main>
-</template>
+</template>
\ No newline at end of file
+
+<style>
+body, div, p, img, span, table, tr, td {
+  margin: 0;
+  padding: 0;
+}
+html, body {
+  font-family: "Microsoft YaHei";
+  font-size: 16px;
+}
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#app {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+.mypopup .leaflet-popup-content-wrapper {
+  border-radius: 0;
+  border: #fff solid 1px;
+}
+.mypopup {
+  padding: 5px 20px;
+  color: #ffffff !important;
+  text-shadow: 1px 1px 1px #333;
+  font-size: 15px;
+  font-weight: bold;
+  border: #fff solid 1px;
+}
+.mypopup1 {
+  width: 160px;
+  text-align: center;
+  background-color: rgba(96, 232, 96, .5);
+  box-shadow: inset 0 0 20px rgb(62, 127, 245);
+}
+.mypopup2 {
+  width: 160px;
+  text-align: center;
+  background-color: rgba(255, 255, 255, .5);
+  box-shadow: inset 0 0 20px rgb(62, 127, 245);
+}
+.amap-marker-label {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media (min-width: 2000px) {
+  html,
+  body {
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 2200px) {
+  html,
+  body {
+    font-size: 17px;
+  }
+  .content {
+    min-height: 1125px !important;
+  }
+}
+
+@media (min-width: 2400px) {
+  html,
+  body {
+    font-size: 18px;
+  }
+  .content {
+    min-height: 1350px !important;
+  }
+  .rightLayer4Block {
+    height:26% !important;
+    margin-top:28% !important;
+  }
+  .rightLayer3Block {
+    margin-top: 12% !important;
+  }
+  .titleStyle p {
+    padding: 0.5% 5% 0 5% !important;
+  }
+}
+
+@media (min-width: 2600px) {
+  html,
+  body {
+    font-size: 19px !important;
+  }
+  .content {
+    min-height: 1463px;
+  }
+  .rightLayer4Block {
+    height:26% !important;
+    margin-top:30% !important;
+  }
+}
+
+@media (min-width: 2800px) {
+  html,
+  body {
+    font-size: 20px !important;
+  }
+  .content {
+    min-height: 1575px !important;
+  }
+  .rightLayer4Block {
+    height:26% !important;
+    margin-top:30% !important;
+  }
+}
+
+@media (min-width: 3000px) {
+  html,
+  body {
+    font-size: 26px !important;
+  }
+  .content {
+    min-height: 1688px !important;
+  }
+  .rightLayer4Block {
+    height:26% !important;
+    margin-top:30% !important;
+  }
+}
+@media (min-width: 3100px) {
+  html,
+  body {
+    font-size: 26px !important;
+  }
+  .content {
+    min-height: 1688px !important;
+  }
+}
+</style>

src/views/home.vue

@@ -479,7 +479,7 @@ export default defineComponent({
     }
 
     function openMap(){
-        const routePath = '/GisHome'; // 要导航到的路由路径
+        const routePath = '/iframe'; // 要导航到的路由路径
       // 打开新窗口并导航到指定路由
         window.open(
             `${routePath}`,

src/views/iframe.vue

+<template>
+ <div class="iframeBlock">
+  <iframe
+src="/screenDisplay"
+frameborder="0"
+ allowfullscreen>
+   </iframe>
+ </div>
+   </template>
+   
+   <style>
+   iframe, div {
+   margin: 0;
+   padding: 0;
+   }
+   iframe {
+width: 100%;
+height: 100vh;
+   overflow: hidden;
+   }
+   html, body .iframeBlock {
+   overflow: hidden;
+   }
+   </style>
\ No newline at end of file