From 6919b3ffca121f8e5c75f339267664f231463484 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 15 Nov 2022 16:14:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=AD=98?= =?UTF-8?q?=E5=82=A8=E5=9C=A8=E6=9C=8D=E5=8A=A1=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/canvas/DeCanvas.vue | 80 ++++++++++--------- .../canvas/components/editor/EditBar.vue | 25 +++--- frontend/src/lang/en.js | 2 + frontend/src/lang/tw.js | 2 + frontend/src/lang/zh.js | 2 + .../panelStyle/BackgroundSelector.vue | 17 ++-- 6 files changed, 71 insertions(+), 57 deletions(-) diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue index 9f7dbc68d8..0cffaf824a 100644 --- a/frontend/src/components/canvas/DeCanvas.vue +++ b/frontend/src/components/canvas/DeCanvas.vue @@ -8,7 +8,7 @@ @mouseup="deselectCurComponent" @scroll="canvasScroll" > - + { - const fileResult = res.target.result - const img = new Image() - img.onload = () => { - const component = { - ...commonAttr, - id: generateID(), - component: 'Picture', - type: 'picture-add', - label: '图片', - icon: '', - hyperlinks: HYPERLINKS, - mobileStyle: BASE_MOBILE_STYLE, - propValue: fileResult, - commonBackground: deepCopy(COMMON_BACKGROUND), - style: { - ...PIC_STYLE - } - } - component.auxiliaryMatrix = false - component.style.top = _this.dropComponentInfo.shadowStyle.y - component.style.left = _this.dropComponentInfo.shadowStyle.x - component.style.width = _this.dropComponentInfo.shadowStyle.width - component.style.height = _this.dropComponentInfo.shadowStyle.height - component['canvasId'] = this.canvasId - component['canvasPid'] = this.canvasPid - this.$store.commit('addComponent', { - component: component - }) - this.$store.commit('recordSnapshot', 'handleFileChange') - } - - img.src = fileResult + if (file.size > this.maxImageSize) { + this.sizeMessage() } - - reader.readAsDataURL(file) + uploadFileResult(file, (fileUrl) => { + const component = { + ...commonAttr, + id: generateID(), + component: 'Picture', + type: 'picture-add', + label: '图片', + icon: '', + hyperlinks: HYPERLINKS, + mobileStyle: BASE_MOBILE_STYLE, + propValue: imgUrlTrans(fileUrl), + commonBackground: deepCopy(COMMON_BACKGROUND), + style: { + ...PIC_STYLE + } + } + component.auxiliaryMatrix = false + component.style.top = _this.dropComponentInfo.shadowStyle.y + component.style.left = _this.dropComponentInfo.shadowStyle.x + component.style.width = _this.dropComponentInfo.shadowStyle.width + component.style.height = _this.dropComponentInfo.shadowStyle.height + component['canvasId'] = this.canvasId + component['canvasPid'] = this.canvasPid + this.$store.commit('addComponent', { + component: component + }) + this.$store.commit('recordSnapshot', 'handleFileChange') + }) }, clearCurrentInfo() { this.currentWidget = null diff --git a/frontend/src/components/canvas/components/editor/EditBar.vue b/frontend/src/components/canvas/components/editor/EditBar.vue index c3ae7549bc..517648f870 100644 --- a/frontend/src/components/canvas/components/editor/EditBar.vue +++ b/frontend/src/components/canvas/components/editor/EditBar.vue @@ -137,7 +137,7 @@ :target="curComponent.hyperlinks.openMode " :href="curComponent.hyperlinks.content " > - + @@ -191,6 +191,7 @@ import FieldsList from '@/components/canvas/components/editor/FieldsList' import LinkJumpSet from '@/views/panel/linkJumpSet' import Background from '@/views/background/index' import MapLayerController from '@/views/chart/components/map/MapLayerController' +import { uploadFileResult } from '@/api/staticResource/staticResource' export default { components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController }, @@ -240,6 +241,7 @@ export default { }, data() { return { + maxImageSize: 15000000, boardSetVisible: false, linkJumpSetVisible: false, linkJumpSetViewId: null, @@ -493,20 +495,25 @@ export default { // ignore e.preventDefault() }, + sizeMessage() { + this.$notify({ + message: this.$t('panel.image_size_tips'), + position: 'top-left' + }) + }, handleFileChange(e) { const file = e.target.files[0] if (!file.type.includes('image')) { - toast('只能插入图片') + toast(this.$t('panel.image_size_tips')) return } - const reader = new FileReader() - reader.onload = (res) => { - const fileResult = res.target.result - this.curComponent.propValue = fileResult - this.$store.commit('recordSnapshot', 'handleFileChange') + if (file.size > this.maxImageSize) { + this.sizeMessage() } - - reader.readAsDataURL(file) + uploadFileResult(file, (fileUrl) => { + this.curComponent.propValue = fileUrl + this.$store.commit('recordSnapshot', 'handleFileChange') + }) }, boardSet() { this.boardSetVisible = true diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index e5e7effdc3..863e8c6aec 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1865,6 +1865,8 @@ export default { sure_bt: 'Confirm' }, panel: { + image_size_tips: 'Please do not exceed 15M in the picture', + image_add_tips: 'Only pictures can be inserted', watermark: 'Watermark', panel_get_data_error: 'Failed to obtain panel information. The panel may have been deleted. Please check the panel status', panel_no_save_tips: 'There are unsaved panel', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 9cded7a035..15d447be85 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1865,6 +1865,8 @@ export default { sure_bt: '確定' }, panel: { + image_size_tips: '圖片請不要大於15M', + image_add_tips: '只能插入圖片', watermark: '水印', panel_get_data_error: '獲取儀表板信息失敗，儀表板可能已經被刪除，請檢查儀表板狀態', panel_no_save_tips: '存在未保存的儀表板', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 09686cb9b5..533defbed1 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1865,6 +1865,8 @@ export default { sure_bt: '确定' }, panel: { + image_size_tips: '图片请不要大于15M', + image_add_tips: '只能插入图片', watermark: '水印', panel_get_data_error: '获取仪表板信息失败，仪表板可能已经被删除，请检查仪表板状态', panel_no_save_tips: '存在未保存的仪表板', diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue index d9a08df6d4..e286b2d41c 100644 --- a/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue +++ b/frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue @@ -45,7 +45,7 @@ :on-remove="handleRemove" :file-list="fileList" > - + import { mapState } from 'vuex' -import { deepCopy } from '@/components/canvas/utils/utils' +import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils' import { COLOR_PANEL } from '@/views/chart/chart/chart' import { uploadFileResult } from '@/api/staticResource/staticResource' -import { imgUrlTrans } from '@/components/canvas/utils/utils' export default { name: 'BackgroundSelector', @@ -163,13 +162,13 @@ export default { uploadFileResult(file, (fileUrl) => { _this.$store.commit('canvasChange') _this.panel.imageUrl = fileUrl - _this.fileList = [{ url: this.panel.imageUrl }] + _this.fileList = [{ url: imgUrlTrans(this.panel.imageUrl) }] _this.commitStyle() }) }, sizeMessage() { this.$notify({ - message: '背景图片请不要大于15M', + message: this.$t('panel.image_size_tips'), position: 'top-left' }) } @@ -238,22 +237,22 @@ span { z-index: 1004; } -.custom-item{ +.custom-item { width: 70px; } -.re-update-span{ +.re-update-span { cursor: pointer; color: #3370FF; size: 14px; - line-height:22px; + line-height: 22px; font-weight: 400; } .image-hint { color: #8F959E; size: 14px; - line-height:22px; + line-height: 22px; font-weight: 400; }