Merge branch 'master' of https://github.com/gcpaas/DataRoom

data-room-ui/package.json

@@ -64,7 +64,6 @@
     "es6-promise": "4.2.8",
     "gc-vue-draggable-resizable": "^1.0.1",
     "html-to-image": "1.11.11",
-    "image-conversion": "^2.1.1",
     "insert-css": "^2.0.0",
     "jquery": "^3.6.4",
     "lodash": "4.17.21",

data-room-ui/packages/BasicComponents/Numbers/index.vue

@@ -40,13 +40,16 @@ export default {
     // 通过表达式计算得来的值
     getDataByExpression (config) {
       // 如果表达式是由其他组件的值构成的
-      if (this.config.expressionCodes && this.config.expressionCodes.length) {
+      const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0
-      // eslint-disable-next-line no-new-func
+      const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0
+      const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0
+      if (len && len === len1 + len2) {
+        // eslint-disable-next-line no-new-func
         const result = new Function('dataset', 'computedDatas', this.config.expression)
         config.customize.title = result(this.dataset, this.computedDatas)
         // 同时将计算得来的值保存到公共的数据存储的地方
         this.updateComputedDatas({ code: config.code, name: config.name, data: config.customize.title })
-      // this.changeChartConfig(config)
+        // this.changeChartConfig(config)
       }
     },
     dataFormatting (config, data) {

data-room-ui/packages/BasicComponents/Texts/index.vue

@@ -40,7 +40,10 @@ export default {
     // 通过表达式计算得来的值
     getDataByExpression (config) {
       // 如果表达式是由其他组件的值构成的
-      if (this.config.expressionCodes && this.config.expressionCodes.length) {
+      const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0
+      const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0
+      const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0
+      if (len && len === len1 + len2) {
       // eslint-disable-next-line no-new-func
         const result = new Function('dataset', 'computedDatas', this.config.expression)
         config.customize.title = result(this.dataset, this.computedDatas)
@@ -53,7 +56,7 @@ export default {
       // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
       if (config.dataSource.businessKey) {
         config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
-        config.option.data =  data && data.data && data.data.length ? data.data :[]
+        config.option.data = data && data.data && data.data.length ? data.data : []
       }
       return config
     }

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -131,10 +131,9 @@ import icons from 'data-room-ui/assets/images/alignIcon/export'
 import IconSvg from 'data-room-ui/SvgIcon'
 import {
   showSize,
-  dataURLtoBlob,
+  compressImage
-  translateBlobToBase64
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 export default {
   name: 'PageTopSetting',
   components: {
@@ -449,15 +448,21 @@ export default {
           }
           if (dataUrl) {
             if (showSize(dataUrl) > 200) {
-              const url = dataURLtoBlob(dataUrl)
+              // const newData = compressImage(dataUrl, 800)
-              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+              // console.log(111, newData)
-              const imgRes = await imageConversion.compressAccurately(url, {
+              // const url = dataURLtoBlob(dataUrl)
-                size: 200, // 图片大小压缩到100kb
+              // // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-                width: 1280, // 宽度压缩到1280
+              // const imgRes = await imageConversion.compressAccurately(url, {
-                height: 720 // 高度压缩到720
+              //   size: 200, // 图片大小压缩到100kb
-              })
+              //   width: 1280, // 宽度压缩到1280
-              const base64 = await translateBlobToBase64(imgRes)
+              //   height: 720 // 高度压缩到720
-              pageInfo.coverPicture = base64.result
+              // })
+              // const base64 = await translateBlobToBase64(imgRes)
+              // pageInfo.coverPicture = base64.result
+              this.$message.info('由于封面图片过大，进行压缩中')
+              const compressCoverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
+              console.log(showSize(compressCoverPicture))
+              pageInfo.coverPicture = compressCoverPicture
             } else {
               pageInfo.coverPicture = dataUrl
             }

data-room-ui/packages/BizComponent/index.vue

@@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
 
 import {
   showSize,
-  dataURLtoBlob,
+  compressImage
-  translateBlobToBase64
+  // dataURLtoBlob,
+  // translateBlobToBase64
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 
 export default {
   name: 'BizComponentDesign',
@@ -354,20 +355,22 @@ export default {
       }
       if (dataUrl) {
         if (showSize(dataUrl) > 200) {
-          const url = dataURLtoBlob(dataUrl)
+          // const url = dataURLtoBlob(dataUrl)
           // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-          imageConversion.compressAccurately(
+          // imageConversion.compressAccurately(
-            url,
+          //   url,
-            {
+          //   {
-              size: 200, // 图片大小压缩到100kb
+          //     size: 200, // 图片大小压缩到100kb
-              width: 1280, // 宽度压缩到1280
+          //     width: 1280, // 宽度压缩到1280
-              height: 720 // 高度压缩到720
+          //     height: 720 // 高度压缩到720
-            }
+          //   }
-          ).then((res) => {
+          // ).then((res) => {
-            translateBlobToBase64(res, (e) => {
+          //   translateBlobToBase64(res, (e) => {
-              this.form.coverPicture = e.result
+          //     this.form.coverPicture = e.result
-            })
+          //   })
-          })
+          // })
+          this.$message.info('由于封面图片过大，进行压缩中')
+          this.form.coverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
         } else {
           this.form.coverPicture = dataUrl
         }

data-room-ui/packages/js/utils/compressImg.js

@@ -19,7 +19,7 @@ export function showSize (base64url) {
     // 判断后两位是否为00，如果是则删除00
     return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
   }
-  return size
+  return Number(size)
 }
 
 export function dataURLtoFile (dataurl, filename) {
@@ -58,3 +58,43 @@ export function translateBlobToBase64 (blob, callback) {
   reader.readAsDataURL(blob)
   // 读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
 }
+
+// 压缩方法
+export function compressImage (base64, { width: w = 1280, height: h = 720, size = 200, quality = 1 }) {
+  return new Promise((resolve, reject) => {
+    const newImage = new Image()
+    newImage.src = base64
+    newImage.setAttribute('crossOrigin', 'Anonymous')
+    let imgWidth, imgHeight
+    newImage.onload = function () {
+      imgWidth = 1280
+      imgHeight = 720
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (Math.max(imgWidth, imgHeight) > w) {
+        if (imgWidth > imgHeight) {
+          canvas.width = w
+          canvas.height = w * imgHeight / imgWidth
+        } else {
+          canvas.height = w
+          canvas.width = w * imgWidth / imgHeight
+        }
+      } else {
+        canvas.width = imgWidth
+        canvas.height = imgHeight
+        quality = 1
+      }
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
+      let compressedBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
+      if (showSize(compressedBase64) > Number(size)) {
+        compressedBase64 = canvas.toDataURL('image/jpeg', quality - 0.2 > 0.4 ? quality - 0.2 : 0.4)
+      }
+      resolve(compressedBase64)
+    }
+    newImage.onerror = function () {
+      reject(new Error('Failed to load image'))
+    }
+  })
+}