Merge pull request #1202 from dataease/pr@dev@refactor_panel

feat:仪表编辑状态，自动隐藏顶部餐单栏

frontend/src/layout/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <licbar />
-    <topbar />
+    <topbar v-if="componentName!=='PanelEdit'" />
 
-    <de-container style="padding-top: 56px;">
+    <de-container :style="mainStyle">
       <de-aside-container v-if="!sidebar.hide" class="le-aside-container">
         <sidebar class="sidebar-container" />
       </de-aside-container>
 
-      <de-main-container class="la-main-container">
+      <de-main-container class="la-main-container" :class="{'full-height':fullHeightFlag}">
         <app-main />
       </de-main-container>
     </de-container>
@@ -29,6 +29,8 @@ import ResizeMixin from './mixin/ResizeHandler'
 import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import bus from '@/utils/bus'
+
 export default {
   name: 'Layout',
   components: {
@@ -41,6 +43,11 @@ export default {
     DeAsideContainer
   },
   mixins: [ResizeMixin],
+  data() {
+    return {
+      componentName: 'PanelMain'
+    }
+  },
   computed: {
     sidebar() {
       return this.$store.state.app.sidebar
@@ -54,6 +61,20 @@ export default {
     showSettings() {
       return this.$store.state.settings.showSettings
     },
+    fullHeightFlag() {
+      return this.componentName === 'PanelEdit'
+    },
+    mainStyle() {
+      if (this.fullHeightFlag) {
+        return {
+          'height': '100vh!important'
+        }
+      } else {
+        return {
+          'paddingTop': '56px'
+        }
+      }
+    },
     classObj() {
       return {
         // hideSidebar: !this.sidebar.opened,
@@ -63,6 +84,11 @@ export default {
       }
     }
   },
+  mounted() {
+    bus.$on('PanelSwitchComponent', (c) => {
+      this.componentName = c.name
+    })
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@@ -127,4 +153,7 @@ export default {
         background-color: var(--SiderBG) !important;
       }
   }
+  .full-height {
+    height: 100vh !important;
+  }
 </style>

frontend/src/views/panel/edit/index.vue

@@ -850,14 +850,14 @@ export default {
 
 <style scoped>
   .ms-aside-container {
-    height: calc(100vh - 91px);
+    height: calc(100vh - 35px);
     max-width: 60px;
     border: none;
     width: 60px;
   }
 
   .ms-main-container {
-    height: calc(100vh - 91px);
+    height: calc(100vh - 35px);
   }
 
   .de-header {
@@ -891,7 +891,7 @@ export default {
 .leftPanel {
   width: 100%;
   max-width: 300px;
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   position: fixed;
   top: 91px;
   left: 60px;
@@ -918,13 +918,13 @@ export default {
 }
 
 .this_canvas{
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   overflow-x: hidden;
   overflow-y: auto;
   background-size:100% 100% !important;
 }
 .el-main{
-  height: calc(100vh - 91px);
+  height: calc(100vh - 35px);
   padding: 0!important;
   overflow: auto;
   position: relative;

frontend/src/views/panel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
-    <de-main-container>
+    <de-main-container :class="{'full-height':componentName==='PanelEdit'}">
       <panel-main v-show="componentName==='PanelMain'" ref="panel_main" />
       <chart-edit v-if="componentName==='ChartEdit'" :param="param" />
       <panel-edit v-if="componentName==='PanelEdit'" />
@@ -103,4 +103,7 @@ export default {
     padding: 0;
   }
 
+  .full-height {
+    height: 100vh !important;
+  }
 </style>