diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 90a1ebd90..05fedcb33 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -307,9 +307,8 @@
       border-right: unset !important;
     }
     .editor-core{
-      height: auto !important;
+      height: 0 !important;
       flex: 1;
-      overflow: hidden;
     }
     .ql-container.ql-snow {
       border: unset !important
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/snapshotProgress.scss b/nezha-fronted/src/assets/css/components/common/popBox/snapshotProgress.scss
new file mode 100644
index 000000000..3584d3cc1
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/popBox/snapshotProgress.scss
@@ -0,0 +1,79 @@
+.nz-dialog.snapshot-dialog{
+  .el-dialog__header{
+    padding: 15px;
+    padding-right: 40px;
+    border-bottom: 1px solid $--border-color-light;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    .el-dialog__title{
+      font-family: Roboto-Medium;
+      font-size: 16px;
+      color: $--color-text-primary;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+  }
+  .el-dialog__body{
+    padding: 20px;
+    padding-bottom: 30px;
+    .snapshot-name,.snapshot-time{
+      font-family: Roboto-Regular;
+      font-size: 14px;
+      color: $--color-text-regular;
+      letter-spacing: 0;
+      font-weight: 400;
+    }
+    .el-progress-bar{
+      margin-top: 20px;
+      overflow: hidden;
+      position: relative;
+      .el-progress-bar__outer{
+        height: 20px;
+        border-radius: 0;
+        background-color: $--background-color-2;
+        border: 1px solid $--border-color-light;
+        box-sizing: border-box;
+        overflow: unset;
+        .el-progress-bar__inner{
+          transition: width 0.3s linear;
+          border-radius: 0;
+          background-color:#3B92F1;
+          height: 18px;
+          // height: 20px;
+          // position: absolute;
+          // left: -1px;
+          // top: -1px;
+        }
+      }
+    }
+    .snapshot-elapsed{
+      font-family: Roboto-Black;
+      font-size: 12px;
+      color: $--color-text-regular;
+      letter-spacing: 0;
+      line-height: 17px;
+      font-weight: 400;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 2px;
+    }
+    .snapshot-msg{
+      font-family: Roboto-Regular;
+      font-size: 14px;
+      color: $--color-text-regular;
+      letter-spacing: 0;
+      line-height: 16px;
+      font-weight: 400;
+      margin-top: 20px;
+    }
+  }
+  .el-dialog__footer{
+    padding: 12px 20px;
+    border-top: 1px solid $--border-color-light;
+    .el-message-box__btns{
+      padding: 0;
+    }
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 134b5a21b..3136fcffe 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -26,6 +26,7 @@
 @import './common/popBox/selectPanel.scss';
 @import './common/popBox/selectDashboard.scss';
 @import './common/popBox/selectWalk.scss';
+@import './common/popBox/snapshotProgress.scss';
 @import './common/project/popData/Info.scss';
 @import './common/project/L5/popData/common.scss';
 @import './common/project/L5/CanvasContextMenu.scss';
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 3ad324907..9d5b5dc0d 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1282,7 +1282,7 @@ li {
 }
 .import-failContent-dialog{
   .el-dialog__header{
-    padding: 14px;
+    padding: 15px;
     border-bottom: 1px solid $--border-color-light;
   }
   .el-dialog__body{
diff --git a/nezha-fronted/src/components/chart/richTextEditor.vue b/nezha-fronted/src/components/chart/richTextEditor.vue
index 969e1b4a3..9a70ad7db 100644
--- a/nezha-fronted/src/components/chart/richTextEditor.vue
+++ b/nezha-fronted/src/components/chart/richTextEditor.vue
@@ -44,6 +44,7 @@ export default {
             ['image'] // 上传图片
           ]
         },
+        bounds: '.rich-text-editor',
         placeholder: this.placeholder
       },
       maxLength: 0, // 记录最大长度
diff --git a/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue b/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue
new file mode 100644
index 000000000..67c14d354
--- /dev/null
+++ b/nezha-fronted/src/components/common/snapshotProgress/snapshotProgress.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <el-dialog
+      class="nz-dialog snapshot-dialog"
+      width="472px"
+      :title="$t('overall.snapshoot')"
+      destroy-on-close
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+      @close="closeDialog"
+    >
+    <div>
+      <p class="snapshot-name">{{$t('overall.name')}}：{{showPanel.name}}</p>
+      <p class="snapshot-time">{{$t('overall.time')}}：{{searchTime[0]}}—{{searchTime[1]}}</p>
+      <el-progress :percentage="process" :stroke-width="20" :show-text="false" stroke-linecap="butt"></el-progress>
+      <p class="snapshot-elapsed">
+        <span>{{$t('dashboard.elapsedTime')}}：{{secondFormatter(elapsedTime)}}</span>
+        <span v-if="total!=undefined">{{done}}/{{total}}</span>
+      </p>
+      <p class="snapshot-msg">{{$t('dashboard.snapshotTip1')}}{{$t('dashboard.snapshotTip2')}}</p>
+    </div>
+    <div slot="footer">
+      <div class="el-message-box__btns">
+        <button :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button--small nz-btn-style-normal" @click="startTimer">
+          <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
+        </button>
+        <button class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
+          <span>{{$t('overall.close')}}</span>
+        </button>
+      </div>
+    </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+
+function create (f) {
+  const blob = new Blob(['(' + f + ')()'])
+  const url = window.URL.createObjectURL(blob)
+  const worker = new Worker(url)
+  return worker
+}
+const createWorker = (callback, time) => {
+  const pollingWorker = create(`function (e) {
+    setInterval(function () {
+      this.postMessage(null)
+    }, ${time})
+  }`)
+  pollingWorker.onmessage = callback
+  return pollingWorker
+}
+const stopWorker = (vm) => {
+  try {
+    vm && vm.terminate()
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+export default {
+  name: 'snapshotProgress',
+  props: {
+    showPanel: {
+      type: Object
+    },
+    searchTime: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    snapshotVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      visible: this.snapshotVisible, // 弹窗显示隐藏
+      timer: null, // 获取运行时间定时器
+      task: null, // 获取任务进度定时器
+      elapsedTime: 0, // 运行时间
+      tid: undefined, // 任务id
+      total: undefined,
+      done: undefined,
+      process: 0
+    }
+  },
+  methods: {
+    async startTimer () {
+      this.prevent_opt.import = true
+
+      // 定时获取运行时间
+      this.timer = createWorker(() => {
+        this.elapsedTime += 100
+      }, 100)
+
+      const vars = this.$store.getters.getVariablesArr.map(item => {
+        return {
+          name: item.name,
+          value: item.checked.join('|')
+        }
+      })
+      const params = {
+        format: 'html',
+        panelId: this.showPanel.id,
+        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0])),
+        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[1])),
+        vars: vars
+      }
+      // 创建任务
+      const res = await this.$post('/visual/panel/snapshot/task', params)
+      if (res.code === 200) {
+        this.tid = res.data.tid
+        this.getResult()
+      }
+    },
+    // 任务进度查询
+    getResult () {
+      this.task = setInterval(async () => {
+        if (this.process < 100) {
+          try {
+            const res = await this.$get('/visual/panel/snapshot/result/' + this.tid)
+            this.total = res.data.taskId.total
+            this.done = res.data.taskId.done
+            this.process = parseFloat(res.data.taskId.process)
+          } catch (error) {}
+        } else {
+          this.downloadSnapshot()
+          this.tid = undefined
+          this.clearTimer()
+        }
+      }, 300)
+    },
+    // 导出快照
+    downloadSnapshot () {
+      this.$get('/visual/panel/snapshot/download/' + this.tid, {}, 'blob').then(res => {
+        const self = this
+        const fileName = this.showPanel.name
+        if (res.type == 'application/json') {
+          const reader = new FileReader() // 创建一个FileReader实例
+          reader.readAsText(res, 'utf-8') // 读取文件,结果用字符串形式表示
+          reader.onload = function () { // 读取完成后,**获取reader.result**
+            const { msg } = JSON.parse(reader.result)
+            self.$message.error(msg) // 弹出错误提示
+          }
+          return
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName + '.html')
+        } else {
+          const blob = new Blob([res])
+          const link = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 下载链接
+          link.href = href
+          link.download = fileName + '.html' // 下载后文件名
+          document.body.appendChild(link)
+          link.click() // 点击下载
+          document.body.removeChild(link) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }
+        this.prevent_opt.import = false
+        this.$emit('update:snapshotVisible', false)
+      }, () => {
+        this.$message.error('123')
+      })
+    },
+    // 关闭定时器 取消任务
+    clearTimer () {
+      stopWorker(this.timer)
+      clearInterval(this.task)
+    },
+    // 关闭弹窗
+    closeDialog () {
+      this.$emit('update:snapshotVisible', false)
+    },
+    // 秒转为时-分-秒
+    secondFormatter (millisecond) {
+      // if (millisecond >= 1000) {
+      const secondTime = parseInt(millisecond / 1000)
+      let time = parseInt(secondTime) + 's'
+      if (secondTime > 60) {
+        const second = parseInt(secondTime % 60)
+        let min = parseInt(secondTime / 60)
+        time = min + 'min ' + second + 's'
+
+        if (min > 60) {
+          min = parseInt(secondTime / 60 % 60)
+          const hour = parseInt((secondTime / 60) / 60)
+          time = hour + 'h ' + min + 'min ' + second + 's'
+        }
+      }
+      return time
+      // } else {
+      // return millisecond + 'ms'
+      // }
+    }
+  },
+  beforeDestroy () {
+    this.clearTimer()
+    if (this.tid) {
+      this.$get('/visual/panel/snapshot/cancel/' + this.tid)
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 4fa4adf80..77dabbace 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -142,6 +142,8 @@
     <transition name="right-box">
       <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" @reload="panelReload" @reloadForDel="panelReloadForDel" ></panel-box>
     </transition>
+
+    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
   </div>
 </template>
 
@@ -162,6 +164,7 @@ import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
 import * as echarts from 'echarts'
 import panelVariables from '@/components/common/panel/panelVariables'
+import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
 // import FileSaver from 'file-saver'
 // import chartData from './testData'
 export default {
@@ -309,7 +312,8 @@ export default {
       // 查看模式
       mode: '',
       variables: [],
-      variablesInit: false // 判断variables 是否加载完成
+      variablesInit: false, // 判断variables 是否加载完成
+      snapshotVisible: false
     }
   },
   components: {
@@ -319,7 +323,8 @@ export default {
     selectDashboard,
     chartTempBox,
     chartRightBox,
-    panelVariables // 处理panel变量的组件
+    panelVariables, // 处理panel变量的组件
+    snapshotProgress // 快照进度
   },
   computed: {
     chartRightBoxShow () {
@@ -994,7 +999,8 @@ export default {
       if (type === 'PDF') {
         this.htmlToPdf()
       } else {
-        this.exportToHtml(this.showPanel.name)
+        // this.exportToHtml(this.showPanel.name)
+        this.snapshotVisible = true
       }
     },
     // 切换查看模式