fix: 编辑仪表盘 全屏预览问题

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -148,6 +148,7 @@ export default {
 
 <style lang="scss" scoped>
   .bg {
+    height: 100vh!important;
     min-width: 800px;
     min-height: 600px;
     width: 100%;

frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width: 100%;height: 100vh;">
     <span style="line-height: 35px; position: absolute; top:10px;right: 20px;z-index:100000">
-      <el-button size="mini" @click="toDir">
+      <el-button size="mini" @click="close">
         关闭
       </el-button>
     </span>
@@ -18,9 +18,8 @@ export default {
   components: { Preview },
 
   methods: {
-    toDir() {
-      this.$router.replace('/panel/index')
-      bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
+    close() {
+      bus.$emit('previewFullScreenClose')
     }
   }
 }

frontend/src/components/canvas/components/Toolbar.vue

@@ -221,8 +221,7 @@ export default {
     },
 
     clickPreview() {
-      // 编辑时临时保存 当前修改的画布
-      this.$router.replace('/PreviewFullScreen')
+      this.$emit('previewFullScreen')
     }
   }
 }

frontend/src/styles/index.scss

@@ -99,6 +99,22 @@ div:focus {
     }
 }
 
+.preview-dialog {
+  padding: 0px!important;
+  .el-dialog--center{
+    padding: 0px!important;
+  }
+
+  .el-dialog__header{
+    display:none!important;
+
+  }
+  .el-dialog__body{
+    padding: 0px!important;
+    height: 100vh!important;
+  }
+}
+
 .de-search-header {
     .el-tabs__header{
         display: none !important;;

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

@@ -8,7 +8,7 @@
       </el-col>
       <!--横向工具栏-->
       <el-col :span="16">
-        <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
+        <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
       </el-col>
     </el-header>
     <de-container>
@@ -110,6 +110,15 @@
         </span>
       </div>
     </el-dialog>
+
+    <el-dialog
+      v-if="previewVisible"
+      :visible.sync="previewVisible"
+      :fullscreen="true"
+      custom-class="preview-dialog"
+    >
+      <PreviewFullScreen />
+    </el-dialog>
   </el-row>
 </template>
 
@@ -130,6 +139,7 @@ import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
 import { get } from '@/api/panel/panel'
+import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -149,7 +159,8 @@ export default {
     Editor,
     Toolbar,
     FilterDialog,
-    SubjectSetting
+    SubjectSetting,
+    PreviewFullScreen
   },
   data() {
     return {
@@ -164,7 +175,8 @@ export default {
       filterVisible: false,
       currentWidget: null,
       currentFilterCom: null,
-      subjectVisible: false
+      subjectVisible: false,
+      previewVisible: false
     }
   },
 
@@ -211,6 +223,10 @@ export default {
     bus.$on('component-dialog-edit', () => {
       this.eidtDialog()
     })
+
+    bus.$on('previewFullScreenClose', () => {
+      this.previewVisible = false
+    })
   },
   beforeDestroy() {
     const elx = this.$refs.rightPanel
@@ -375,7 +391,11 @@ export default {
       debugger
       this.show = false
       // this.beforeDestroy()
+    },
+    previewFullScreen() {
+      this.previewVisible = true
     }
+
   }
 }
 </script>