全屏模式修改样式

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "1.0.202407230851",
+  "version": "1.0.202407231321",
   "description": "金鸡湖现代服务业品牌管理系统",
   "author": "若依",
   "license": "MIT",

src/assets/styles/public.scss

@@ -1337,7 +1337,8 @@
       flex-direction: column;
       justify-content: space-between;
       .dataCloudMap-left-top {
-        height: 50%;
+        // height: 50%;
+        flex: 1;
         background-color: #fff;
         border-radius: 10px;
         padding: 10px 20px;
@@ -1490,7 +1491,8 @@
       }
       // 行业纵深情况
       .dataCloudMap-left-bottom {
-        height: 49%;
+        // height: 49%;
+        margin-top: 10px;
         background-color: #fff;
         border-radius: 10px;
         padding: 10px 20px;
@@ -1653,7 +1655,7 @@
             }
             .card-items {
               margin-bottom: 10px;
-              padding: 5px 10px;
+              padding: 7px 10px;
               background-color: #F6F9FD;
               display: flex;
               justify-content: space-between;
@@ -1892,7 +1894,7 @@
           margin-top: 15px;
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
-          grid-gap: 10px;
+          grid-gap: 15px;
           // flex: 1;
           // display: flex;
           // flex-wrap: wrap;

src/views/dataCloudMap/index.vue

@@ -75,7 +75,7 @@
             <div class="rightBtn" @click="industryBtn">查看更多数据>></div>
           </div>
           <section>
-            <el-table v-loading="loadingOne" class="dataMap-two-table" :data="tableOneData" :row-class-name="tableRowClassName" :height="isFullscreen ? 420 : 330" :header-cell-style="{background:'#E8F3FC'}">  <!-- :max-height="tabHeader" -->
+            <el-table v-loading="loadingOne" class="dataMap-two-table" :data="tableOneData" :row-class-name="tableRowClassName" :header-cell-style="{background:'#E8F3FC'}">  <!-- :max-height="tabHeader" -->
               <el-table-column label="行业大类" prop="bigType" width="320" align="center"/>
               <el-table-column label="全年营收" prop="revenue" width="130" align="center">
                 <template slot-scope="scope">
@@ -484,32 +484,6 @@ export default {
           speedUp:"0.89",
           proportion:"11",
         },
-        {
-          bigType:"科学研究和技术服务业",
-          revenue:"506.63",
-          yuan:"201",
-          speedUp:"0.89",
-          proportion:"11",
-        },{
-          bigType:"科学研究和技术服务业",
-          revenue:"506.63",
-          yuan:"201",
-          speedUp:"0.89",
-          proportion:"11",
-        },
-        {
-          bigType:"科学研究和技术服务业",
-          revenue:"506.63",
-          yuan:"201",
-          speedUp:"0.89",
-          proportion:"11",
-        },{
-          bigType:"科学研究和技术服务业",
-          revenue:"506.63",
-          yuan:"201",
-          speedUp:"0.89",
-          proportion:"11",
-        },
         {
           bigType:"科学研究和技术服务业",
           revenue:"506.63",
@@ -545,11 +519,18 @@ export default {
     this.screenFull();
     // this.init()
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.KeyDown);
+    this.destroy()
+  },
   methods:{
     change() {
       this.isFullscreen = screenfull.isFullscreen;
       // this.myChart.setOption(this.option)
-      this.myChart &&  this.myChart.resize()
+      window.onresize = this.myChart.resize;
+      // setTimeout(()=>{
+        // this.myChart && this.myChart.resize()
+      // },200)
       // this.myChart.clear()
       
     },
@@ -559,21 +540,20 @@ export default {
         screenfull.on('change', this.change)
       }
     },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    },
     KeyDown(event) {
       if (event.keyCode === 122) {
         event.preventDefault();
-        this.isScreenFull();
-      }
-    },
-    isScreenFull(){
+        // this.isScreenFull();
         if (!screenfull.isEnabled) {
-        // 浏览器不支持全屏
-        return false;
-      } else {
-        this.$nextTick(()=>{
-          screenfull.toggle();
-          this.initEchart();
-        }) 
+          this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
+          return false
+        }
+        screenfull.toggle()
       }
     },
     // 获取荣誉情况