diff --git a/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue b/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue
index 14f4e430..b9b05a2b 100644
--- a/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue
+++ b/data-room-ui/packages/BigScreenComponentMag/SideMenu.vue
@@ -36,7 +36,7 @@ export default {
       activeType: 'component'
     }
   },
-  mounted () {
+  created () {
     const type = this.$route?.query?.type
     if (type) {
       this.activeType = type
diff --git a/data-room-ui/packages/BigScreenComponentMag/index.vue b/data-room-ui/packages/BigScreenComponentMag/index.vue
index db781d76..0d1f741f 100644
--- a/data-room-ui/packages/BigScreenComponentMag/index.vue
+++ b/data-room-ui/packages/BigScreenComponentMag/index.vue
@@ -18,7 +18,7 @@ export default {
   components: { SideMenu, MenuContent },
   data () {
     return {
-      catalogInfo: 'component'
+      catalogInfo: ''
     }
   },
   mounted () {},
diff --git a/data-room-ui/packages/BizComponent/index.vue b/data-room-ui/packages/BizComponent/index.vue
index eee0fb4c..cae14090 100644
--- a/data-room-ui/packages/BizComponent/index.vue
+++ b/data-room-ui/packages/BizComponent/index.vue
@@ -13,7 +13,10 @@
         </div>
       </div>
       <div class="right-btn-wrap">
-        <CusBtn>
+        <CusBtn
+          :loading="loading"
+          @click.native="createdImg()"
+        >
           生成图片
         </CusBtn>
         <CusBtn
@@ -104,6 +107,7 @@
   </div>
 </template>
 <script>
+import { toJpeg, toPng } from 'html-to-image'
 import CusBtn from 'packages/BigScreenDesign/BtnLoading'
 // import MonacoEditor from 'packages/MonacoEditor'
 import BizComponentPreview from './Preview'
@@ -115,6 +119,13 @@ import 'codemirror/theme/material-darker.css'
 import 'codemirror/addon/selection/active-line.js'
 import 'codemirror/mode/vue/vue.js'
 
+import {
+  showSize,
+  dataURLtoBlob,
+  translateBlobToBase64
+} from 'packages/js/utils/compressImg'
+import * as imageConversion from 'image-conversion'
+
 export default {
   name: 'BizComponentDesign',
   components: {
@@ -228,13 +239,64 @@ export default {
     },
     save () {
       this.loading = true
-      updateBizComponent(this.form).then(() => {
-        this.$message.success('保存成功')
-      }).catch(() => {
-        this.$message.error('保存失败')
-      }).finally(() => {
-        this.loading = false
-      })
+      const node = document.querySelector('.bs-preview-inner')
+      toJpeg(node, { quality: 0.2 })
+        .then((dataUrl) => {
+          const that = this
+          if (showSize(dataUrl) > 200) {
+            const url = dataURLtoBlob(dataUrl)
+            // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+            imageConversion
+              .compressAccurately(url, {
+                size: 200, // 图片大小压缩到100kb
+                width: 1280, // 宽度压缩到1280
+                height: 720 // 高度压缩到720
+              })
+              .then((res) => {
+                translateBlobToBase64(res, function (e) {
+                  this.form.coverPicture = e.result
+                  updateBizComponent(this.form)
+                    .then((res) => {
+                      that.$message.success('保存成功')
+                    })
+                    .finally(() => {
+                      that.loading = false
+                    })
+                })
+              })
+          } else {
+            this.form.coverPicture = dataUrl
+            updateBizComponent(this.form)
+              .then(() => {
+                this.$message.success('保存成功')
+              })
+              .finally(() => {
+                this.loading = false
+              })
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    createdImg () {
+      this.loading = true
+      const node = document.querySelector('.bs-preview-inner')
+      toPng(node)
+        .then((dataUrl) => {
+          const link = document.createElement('a')
+          link.download = `${this.form.name}.png`
+          link.href = dataUrl
+          link.click()
+          link.addEventListener('click', () => {
+            link.remove()
+          })
+          this.loading = false
+        })
+        .catch(() => {
+          this.$message.warning('出现未知错误，请重试')
+          this.loading = false
+        })
     }
   }
 }
diff --git a/data-room-ui/packages/ComponentList/index.vue b/data-room-ui/packages/ComponentList/index.vue
index 0dbd5ddb..f0d059bb 100644
--- a/data-room-ui/packages/ComponentList/index.vue
+++ b/data-room-ui/packages/ComponentList/index.vue
@@ -279,12 +279,8 @@ export default {
       this.$refs.CatalogEditForm.formVisible = true
     },
     // 获取分组列表
-    getCatalogList () {
-      get(`/bigScreen/type/list/${this.catalogType}`)
-        .then((data) => {
-          this.catalogList = data
-        })
-        .catch(() => {})
+    async getCatalogList () {
+      this.catalogList = await get(`/bigScreen/type/list/${this.catalogType}`)
     },
     getDataList () {
       this.loading = true