wenhongquan 3 年之前
父节点
当前提交
1d2781dd84

+ 41 - 20
index.html

@@ -120,8 +120,10 @@
                     doc.write(wrap.innerHTML);
                 }
             }
+            var index = 0;
 
             function refreshRem() {
+                var docEl = doc.documentElement;
                 var width = docEl.getBoundingClientRect().width;
                 if (width / dpr > 5760) {
                     width = 5760 * dpr;
@@ -129,26 +131,45 @@
                 var rem = width / 10;
                 docEl.style.fontSize = rem + 'px';
                 flexible.rem = win.rem = rem;
-            }
+                var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
+                var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
+                console.log(t)
+                if (t != 1 && !isMac) { // 如果进行了缩放,也就是不是1
+                    setTimeout(() => {
+                        document.body.style.zoom = -0.6 * t + 1.55; // 就去修改页面的缩放比例,这个公式我自己算的,不准确,勉强。
+                    }, 3 * 1000)
+                } else {
+                    document.body.style.zoom = "normal";
+                }
 
-            // win.addEventListener(
-            //     'resize',
-            //     function() {
-            //         clearTimeout(tid);
-            //         tid = setTimeout(refreshRem, 300);
-            //     },
-            //     false,
-            // );
-            // win.addEventListener(
-            //     'pageshow',
-            //     function(e) {
-            //         if (e.persisted) {
-            //             clearTimeout(tid);
-            //             tid = setTimeout(refreshRem, 300);
-            //         }
-            //     },
-            //     false,
-            // );
+
+            }
+            // window.onresize = () => {
+
+            //     // refreshRem()
+            // }
+
+            win.addEventListener(
+                'resize',
+                function() {
+                    // debugger
+                    clearTimeout(tid);
+                    tid = setTimeout(refreshRem, 300);
+
+
+                },
+                false,
+            );
+            win.addEventListener(
+                'pageshow',
+                function(e) {
+                    if (e.persisted) {
+                        clearTimeout(tid);
+                        tid = setTimeout(refreshRem, 300);
+                    }
+                },
+                false,
+            );
 
             if (doc.readyState === 'complete') {
                 doc.body.style.fontSize = 12 * dpr + 'px';
@@ -187,7 +208,7 @@
 <body style="position: fixed;background-color: #112692;
     width: 100%;
     height: 100%;">
-    <div id="app"></div>
+    <div id="app" style="height: 100%;"></div>
     <script type="module" src="/src/main.ts"></script>
 </body>
 

+ 8 - 1
src/components/MapView/index.tsx

@@ -22,6 +22,7 @@ import icon_sys_up from '@/assets/icons/syslink/up.png';
 import icon_sys_down from '@/assets/icons/syslink/down.png';
 
 
+
 let ispro = process.env.NODE_ENV === 'production';
 export default defineComponent({
   props: {
@@ -98,11 +99,17 @@ export default defineComponent({
       });
       map["tipcontentRef"] = tipcontentRef.value;
       ctx.emit('update:map', map);
+       window.onresize = () => {
+         map.resize();
+       };
     });
+   
     
     return () => (
       <>
-        <div id="map" style={{ height: '100%' }} ref={mapRef} />{' '}
+        <div id="map" style={{ height: '100%',width:'100%',position: "absolute",
+    top: 0,
+    left: 0 }} ref={mapRef} />{' '}
         <div
           class={
             'othersystem ' +

+ 1 - 1
src/components/MarkerMap/index.scss

@@ -36,7 +36,7 @@
 }
 
 .task-map-container {
-    height: 100vh;
+    height: 100%;
     .maptip {
         display: none;
         position: absolute;

+ 4 - 3
src/layout/BaseLayout/index.scss

@@ -1,6 +1,6 @@
 @import '../../styles/utils.scss';
 .base-layout-container {
-    height: 100vh;
+    height: 100%;
     background-image: url('../../assets/bg.png');
     background-repeat: no-repeat;
     background-size: cover;
@@ -12,7 +12,7 @@
         &.display {
             visibility: visible!important;
             width: 100%;
-            height: 100vh;
+            height: 100%;
             z-index: 10;
         }
     }
@@ -25,6 +25,7 @@
         background-image: url('../../assets/header@2x.png');
         background-repeat: no-repeat;
         background-size: contain;
+        // background-position: center;
         position: fixed;
         top: 0;
         z-index: 1;
@@ -55,7 +56,7 @@
     main {
         display: flex;
         flex-direction: column;
-        min-height: calc(100vh);
+        min-height: calc(100%);
         position: relative;
         .el-button--small {
             min-height: px2rem(32px * 4);

+ 1 - 1
src/layout/BaseLayout/index.tsx

@@ -219,7 +219,7 @@ export default defineComponent({
     return () => (
       <section class="base-layout-container">
         <iframe
-          style={{ visibility: 'hidden', height: '100vh', width: '100%' }}
+          style={{ visibility: 'hidden', height: '100%', width: '100%' }}
           class={clsx('dahua-content', {
             ['display']: daHuaStore.dahuaUserVisible,
           })}

+ 39 - 3
src/views/IncidentDetail/index.scss

@@ -157,7 +157,7 @@
         flex: 1;
         position: absolute;
         width: 100%;
-        height: 100vh;
+        height: 100%;
         .detail-left,
         .detail-right {
             position: absolute;
@@ -177,7 +177,7 @@
             right: px2rem(30px * 2);
             width: px2rem(939px * 2);
             flex-direction: column;
-            max-height: 100%;
+            max-height: px2rem(900px * 2);
             // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
         }
         .echarts {
@@ -969,4 +969,40 @@
                 }
             }
         }
-    }
+    }
+    
+    // @media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
+    // (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
+    // (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
+    //      :root {
+    //         font-size: 10px;
+    //     }
+    // }
+    // @media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
+    // (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
+    // (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
+    //      :root {
+    //         font-size: 13px;
+    //     }
+    // }
+    // @media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
+    // (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
+    // (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
+    //      :root {
+    //         font-size: 12px;
+    //     }
+    // }
+    // @media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
+    // (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
+    // (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
+    //      :root {
+    //         font-size: 10px;
+    //     }
+    // }
+    // @media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
+    // (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
+    // (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
+    //      :root {
+    //         font-size: 9px;
+    //     }
+    // }