fix: enm screen css调整

src/config/route.js

@@ -76,7 +76,7 @@ const routes = [
         "meta": {
           "title": "驾驶舱2",
           "icon": "el-icon-position",
-          "perms": ["bigScreen"],
+          "perms": ["bigScreen2"],
           "fullpage": true,
         },
         "component": "bigScreen/index_enm"

src/views/bigScreen/index_enm.vue

@@ -141,18 +141,6 @@ export default {
       resizeTimeout: null,
       engine: null,
       loadedPercent: 0,
-      chart1: null,
-      chart2: null,
-      chart3: null,
-      chart4: null,
-      chart5: null,
-      chart6: null,
-      chart1Option: {},
-      chart2Option: {},
-      chart3Option: {},
-      chart4Option: {},
-      chart5Option: {},
-      chart6Option: {},
     }
   },
   mounted() {
@@ -191,7 +179,6 @@ export default {
       // 获取窗口的总高度
       var windowHeight = window.innerHeight;
       var windowWidth = window.innerWidth;
-      var chartsHeight = window.innerWidth*1.8;
       // 获取目标元素
       var left_main = document.getElementsByClassName('left_main')[0];
       var left_other = document.getElementsByClassName('left_other')[0];
@@ -206,24 +193,34 @@ export default {
         right_main.style.width = '20%';
         left_other.style.position = 'absolute';
         left_other.style.width = '20%';
-        left_other.style.height = (windowHeight - 220) + 'px';;
         right_other.style.position =  'absolute';
         right_other.style.width = '20%';
-        right_other.style.height = (windowHeight - 220) + 'px';;
+        model.style.height = (windowHeight - 40) + 'px';
-        model.style.height = (windowHeight - 60) + 'px';
+        var chartHeight = (windowHeight-350)/3 + 'px';
+        var charts = document.getElementsByClassName('chart')
+        for(var i=0;i<charts.length;i++){
+          var chart = charts[i]
+          chart.style.height = chartHeight;
+        }
+
       }
       else {
+        var chartHeight = windowWidth*0.6;
         left_main.style.position = 'static';
         left_main.style.width = '100%';
         right_main.style.position = 'static';
         right_main.style.width = '100%';
         left_other.style.position = 'static';
         left_other.style.width = '100%';
-        left_other.style.height = chartsHeight + 'px';
         right_other.style.position = 'static';
         right_other.style.width = '100%';
-        right_other.style.height = chartsHeight + 'px';
+        model.style.height = chartHeight;
-        model.style.height = windowWidth*0.6;;
+        var charts = document.getElementsByClassName('chart')
+        for(var i=0;i<charts.length;i++){
+          var chart = charts[i]
+          chart.style.height = chartHeight;
+        }
+
       }
       if(this.engine != null){
         this.engine.resize();
@@ -254,7 +251,8 @@ export default {
         backgroundColor: '',
         tooltip: {},
         legend: {
-          data: ['销量']
+          data: ['销量'],
+          top: 0
         },
         xAxis: {
           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
@@ -268,10 +266,10 @@ export default {
           }
         ],
         grid: { // 让图表占满容器
-          top: "10%",
+          top: "5%",
           left: "12%",
           right: "0px",
-          bottom: "20%"
+          bottom: "15%"
         }
       };
       }
@@ -454,13 +452,13 @@ export default {
 </script>
 <style scoped>
 .dashboard {
-  background-color: black;
+  background-color: #33334d;
   /* background-color: #0b2e4a; */
   font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 header {
-  height: 60px;
+  height: 50px;
   /* 调整头部高度 */
   background-image: url('/public/img/header_bg.png');
   /* 替换为实际的背景图片路径 */
@@ -499,7 +497,7 @@ header {
 .left_main,
 .right_main {
   position: absolute;
-  top: 60px;
+  top: 30px;
   width: 20%;
 }
 
@@ -510,10 +508,8 @@ header {
 .left_other,
 .right_other {
   position: absolute;
-  top: 220px;
+  top: 190px;
-  display: flex;
   width: 20%;
-  flex-direction: column;
 }
 
 .right_other {
@@ -522,7 +518,6 @@ header {
 
 
 .panel {
-  flex: 1;
   padding: 4px 8px;
   overflow: auto;
   background: linear-gradient(#99fffe, #99fffe) left -3px top 0, linear-gradient(#99fffe, #99fffe) left -3px top -3px, linear-gradient(#99fffe, #99fffe) right -3px top 0, linear-gradient(#99fffe, #99fffe) right -3px top -3px, linear-gradient(#99fffe, #99fffe) left -3px bottom 0, linear-gradient(#99fffe, #99fffe) left -3px bottom -3px, linear-gradient(#99fffe, #99fffe) right -3px bottom 0, linear-gradient(#99fffe, #99fffe) right -3px bottom -3px;