tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
liu.tao3 1 year ago
parent 11da896fd1 e2494c0bad
commit d21059992c
6 changed files with 88 additions and 35 deletions
Show Stats Download Patch File Download Diff File

1
data-room-ui/package.json
Unescape Escape View File

@ -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",

9
data-room-ui/packages/BasicComponents/Numbers/index.vue
Unescape Escape View File

@ -40,13 +40,16 @@ export default {
// 通过表达式计算得来的值
getDataByExpression (config) {
// 如果表达式是由其他组件的值构成的
if (this.config.expressionCodes && this.config.expressionCodes.length) {
// eslint-disable-next-line no-new-func
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)
// 同时将计算得来的值保存到公共的数据存储的地方
this.updateComputedDatas({ code: config.code, name: config.name, data: config.customize.title })
// this.changeChartConfig(config)
// this.changeChartConfig(config)
}
},
dataFormatting (config, data) {

7
data-room-ui/packages/BasicComponents/Texts/index.vue
Unescape Escape View File

@ -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
}

29
data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
Unescape Escape View File

@ -131,10 +131,9 @@ import icons from 'data-room-ui/assets/images/alignIcon/export'
import IconSvg from 'data-room-ui/SvgIcon'
import {
showSize,
dataURLtoBlob,
translateBlobToBase64
compressImage
} 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)
// 压缩到500KB,这里的500就是要压缩的大小,可自定义
const imgRes = await imageConversion.compressAccurately(url, {
size: 200, // 图片大小压缩到100kb
width: 1280, // 宽度压缩到1280
height: 720 // 高度压缩到720
})
const base64 = await translateBlobToBase64(imgRes)
pageInfo.coverPicture = base64.result
// const newData = compressImage(dataUrl, 800)
// console.log(111, newData)
// const url = dataURLtoBlob(dataUrl)
// // 压缩到500KB,这里的500就是要压缩的大小,可自定义
// const imgRes = await imageConversion.compressAccurately(url, {
// size: 200, // 图片大小压缩到100kb
// width: 1280, // 宽度压缩到1280
// height: 720 // 高度压缩到720
// })
// 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
}

35
data-room-ui/packages/BizComponent/index.vue
Unescape Escape View File

@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
import {
showSize,
dataURLtoBlob,
translateBlobToBase64
compressImage
// 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(
url,
{
size: 200, // 图片大小压缩到100kb
width: 1280, // 宽度压缩到1280
height: 720 // 高度压缩到720
}
).then((res) => {
translateBlobToBase64(res, (e) => {
this.form.coverPicture = e.result
})
})
// imageConversion.compressAccurately(
// url,
// {
// size: 200, // 图片大小压缩到100kb
// width: 1280, // 宽度压缩到1280
// height: 720 // 高度压缩到720
// }
// ).then((res) => {
// translateBlobToBase64(res, (e) => {
// 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
}

42
data-room-ui/packages/js/utils/compressImg.js
Unescape Escape View File

@ -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'))
}
})
}

Write Preview
Loading…
Cancel
Save