From 8136ae4b563d2e241e20de3b57abb0d4477dd0c3 Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Sun, 25 Jun 2023 17:10:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E5=90=8E=EF=BC=8C=E8=AF=B7=E6=B1=82=E5=88=97=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E4=B8=8E=E5=B7=A6=E4=BE=A7tab=E4=B8=8D=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BigScreenComponentMag/SideMenu.vue        |  2 +-
 .../packages/BigScreenComponentMag/index.vue  |  2 +-
 data-room-ui/packages/BizComponent/index.vue  | 78 +++++++++++++++++--
 data-room-ui/packages/ComponentList/index.vue |  8 +-
 4 files changed, 74 insertions(+), 16 deletions(-)

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