环境监测大屏 适配/linechart-resize

src/views/environmentalScreen/index.vue

@@ -361,7 +361,8 @@ export default {
     margin-top: -12px;
     .env-main-left,
     .env-main-right{
-      width: 458px;
+      max-width: 24%;
+      flex: 1;
       height: calc(100vh - 138px);
       overflow: hidden;
     }
@@ -415,11 +416,13 @@ export default {
     .screen-env-list{
       flex-wrap: wrap;
       justify-content: space-between;
+      height: calc(100% - 38px);
       padding: 0 44px 0 4px;
       li{
         flex: none;
         width: calc(100%/2 - 44px);
-        margin: 15px 0 0 40px;
+        margin: 20px 0 20px 40px;
+        height: calc(100%/2 - 40px);
         .msg-list-svg{
           font-size: 40px;
           margin-left: 20px;
@@ -435,16 +438,18 @@ export default {
       padding: 0 44px;
       font-size: 14px;
       color: #339CFF;
-      margin-top: -3px;
+      height: calc(100% - 38px);
       .leakage-list{
+        height: calc(100% - 26px);
         text-align: left;
         li{
           position: relative;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 8px;
-          padding: 9px 30px;
+          height: calc(100%/4 - 14px);
+          margin-bottom: 14px;
+          padding: 0 30px;
           border: 1px solid #3581CC;
           background-color: #02255F;
           border-radius: 2px;
@@ -503,7 +508,7 @@ export default {
     .state-list{
       display: flex;
       justify-content: flex-end;
-      margin-bottom: 6px;
+      margin-bottom: 10px;
       font-size: 14px;
       color: #339CFF;
       span{
@@ -550,7 +555,9 @@ export default {
             border: 1px solid #3581CC;
             margin-bottom: 10px;
             img{
-              object-fit: cover;
+              display: block;
+              // height: 100%;
+              // object-fit: contain;
             }
           }
           .env-device-text{
@@ -606,7 +613,7 @@ export default {
     .env-3d{
       position: relative;
       width: 100%;
-      height: calc(100vh - (100%/2) - 14px);
+      height: calc(100% - (100%/3) - 8px);
       margin-bottom: 20px;
       background: url('~@/assets/images/largeScreen/bg.png') no-repeat center -130px;
       // background-size: 100% 100%;
@@ -624,9 +631,11 @@ export default {
         justify-content: space-between;
         padding: 0;
         width: 165px;
+        height: 200px;
         li{
           width: 100%;
           margin: 20px 0 0 0;
+          height: calc(100%/2 - 20px);
         }
       }
     }

src/views/environmentalScreen/module/lineChart.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="height:84%">
-    <div :id="className" style="height:100%" />
-  </div>
+  <div :id="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -15,6 +15,14 @@ export default {
     chartData: {
       type: Object,
       required: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: 'calc(100% - 38px)'
     }
   },
   data() {