放大

src/views/threeViolations/homePage/index.vue

 <template>
   <!-- 外层排版-->
   <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }">
-  <div class="page-homepage" id="homePage" style="">
+  <div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style="">
     <div class="echarts_nav" id="echarts_nav">
       <div class="iconTable"  v-for="item in gsList" :key="item.id" @click="bindGsid(item)">
         <div  class="dv-border-box-10 nav_border" 
@@ -218,6 +218,22 @@ export default {
         this.postYgcz();//员工持证
       }
     },
+    height(value){
+      // setTimeout(() => {
+           
+      //     this.fxpcChart.resize();
+      //     this.yhclChart.resize();
+      //     this.yjylChart.resize();
+      //     this.yhzlChart.resize();
+      //     this.rfxpcChart.resize();
+      //     this.lzglChart.resize();
+      //     this.ygzcChart.resize();
+      //     this.$nextTick(() => {
+      //         this.height=document.getElementById('homePageBody').parentNode.clientHeight;
+      //         this.carHeight=this.height*0.4-60+'px';
+      //     })
+      //   }, 50);
+    }
   },
   activated() {
     console.log('activated')
@@ -228,7 +244,9 @@ export default {
         this.height=document.getElementById('homePageBody').parentNode.clientHeight;
         this.carHeight=this.height*0.4-60+'px';
     })
- 
+    window.addEventListener('resize',function (params) {
+      
+    })
     this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
     this.yhclChart = echarts.init(document.getElementById('yhclChart'))
     this.yjylChart = echarts.init(document.getElementById('yjylChart'));
@@ -293,6 +311,42 @@ doQueryWithFile({}).then(res => {
     }
   },
   methods: {
+    handleDoubleClick(){
+        this.fullScreen(document.getElementById('homePage'));
+        setTimeout(() => {
+          this.fxpcChart.resize();
+          this.yhclChart.resize();
+          this.yjylChart.resize();
+          this.yhzlChart.resize();
+          this.rfxpcChart.resize();
+          this.lzglChart.resize();
+          this.ygzcChart.resize();
+          this.$nextTick(() => {
+              this.height=document.getElementById('homePageBody').parentNode.clientHeight;
+              this.carHeight=this.height*0.4-60+'px';
+          })
+        }, 50);
+       
+    },
+    fullScreen(element) {
+        const elem = element || document.documentElement;
+        if (elem.webkitRequestFullScreen) {
+            elem.webkitRequestFullScreen();
+        } else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        } else if (elem.requestFullScreen) {
+            elem.requestFullscreen();
+        } else if (elem.msExitFullscreen) {
+            elem.msExitFullscreen();
+        } else if (elem.msRequestFullscreen) {
+            elem.msRequestFullscreen();
+        } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
+            var wscript = new ActiveXObject("WScript.Shell");
+            if (wscript !== null) {
+                wscript.SendKeys("{F11}");
+            }
+        }
+    },
     bindGsid(item){
       this.queryParams1.gsid=item.id
     },