diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 51e798ecfa..cc572f9541 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -72,6 +72,12 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/preview',
+    component: () => import('@/views/panel/preview/index'),
+    hidden: true
+  },
+
   {
     path: '/',
     component: Layout,
diff --git a/frontend/src/views/panel/DrawingBoard/index.vue b/frontend/src/views/panel/DrawingBoard/index.vue
index f4ab3f04c5..cfdd29507e 100644
--- a/frontend/src/views/panel/DrawingBoard/index.vue
+++ b/frontend/src/views/panel/DrawingBoard/index.vue
@@ -5,6 +5,7 @@
         v-for="item in panelDetails.panelDesigns"
         v-show="item.keepFlag"
         :key="item.id"
+        :disabled="status"
         :panel-design="item"
         :parent="true"
         @newStyle="newStyle"
@@ -28,6 +29,12 @@ import bus from '@/utils/bus'
 export default {
   name: 'DrawingBoard',
   components: { ChartComponent, VueDragResizeRotate },
+  props: {
+    status: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       panelDetails: {
@@ -135,7 +142,7 @@ export default {
       return true
     },
     preViewShow() {
-
+      this.$router.replace('/preview')
     },
     savePanel() {
       post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 84f44f8b70..ca432acad4 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -23,7 +23,7 @@
           </el-tooltip>
 
           <el-tooltip content="预览">
-            <el-button class="el-icon-view" size="mini" circle @click="save" />
+            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
           </el-tooltip>
 
         </span>
@@ -134,7 +134,7 @@ export default {
   },
   beforeDestroy() {
     const elx = this.$refs.rightPanel
-    elx.remove()
+    elx && elx.remove()
   },
   methods: {
     save() {
@@ -168,6 +168,9 @@ export default {
     },
     saveDrawing() {
       bus.$emit('panel-drawing-save')
+    },
+    preViewShow() {
+      bus.$emit('panel-drawing-preview')
     }
 
   }
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index efda5802ed..0d1c0af13a 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -7,7 +7,9 @@
       </div>
       <div style="position: relative;margin-left: 5px;">
         <div v-for="o in 4" :key="o" class="item">
-          <el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
+          <div draggable>
+            <el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
+          </div>
         </div>
       </div>
 
diff --git a/frontend/src/views/panel/preview/index.vue b/frontend/src/views/panel/preview/index.vue
new file mode 100644
index 0000000000..f0b033395f
--- /dev/null
+++ b/frontend/src/views/panel/preview/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-container>
+    <!-- <de-header>Header</de-header> -->
+    <el-header class="de-header">
+      <el-row class="panel-design-head">
+        <span style="float: left;line-height: 35px; color: gray">
+
+          <span>名称：测试仪表板</span>
+
+        </span>
+        <span style="float: right;line-height: 35px;">
+
+          <el-tooltip content="返回目录">
+            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
+          </el-tooltip>
+
+        </span>
+      </el-row>
+    </el-header>
+    <de-container>
+
+      <de-main-container class="ms-main-container">
+        <drawing-board :disabled="true" />
+      </de-main-container>
+    </de-container>
+  </el-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DrawingBoard from '../DrawingBoard'
+export default {
+  components: {
+    DeMainContainer,
+    DeContainer,
+    DrawingBoard
+
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  methods: {
+
+    toDir() {
+      this.$router.replace('/panel/index')
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 91px);
+    padding: 15px;
+    min-width: 60px;
+    max-width: 60px;
+    border: none;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 91px);
+  }
+
+  .de-header {
+    height: 35px !important;
+    border-bottom: 1px solid #E6E6E6;
+  }
+
+  .showLeftPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.leftPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.leftPanel {
+  width: 100%;
+  max-width: 260px;
+  height: calc(100vh - 91px);
+  position: fixed;
+  top: 91px;
+  left: 60px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .leftPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .leftPanel {
+    transform: translate(0);
+  }
+
+}
+
+</style>