Merge pull request #3758 from dataease/pr@dev@refactor_pic-storage

refactor(仪表板): 图片组件默认存储在服务器

frontend/src/components/canvas/DeCanvas.vue

@@ -8,7 +8,7 @@
     @mouseup="deselectCurComponent"
     @scroll="canvasScroll"
   >
-    <slot name="optBar" />
+    <slot name="optBar"/>
     <de-editor
       :ref="editorRefName"
       :canvas-style-data="canvasStyleData"
@@ -96,7 +96,7 @@ import { mapState } from 'vuex'
 import DeEditor from '@/components/canvas/components/editor/DeEditor'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import bus from '@/utils/bus'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 import componentList, {
   BASE_MOBILE_STYLE,
@@ -115,6 +115,7 @@ import ButtonResetDialog from '@/views/panel/filter/ButtonResetDialog'
 import FilterDialog from '@/views/panel/filter/FilterDialog'
 import { userLoginInfo } from '@/api/systemInfo/userLogin'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
 
 export default {
   components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor },
@@ -149,6 +150,7 @@ export default {
   },
   data() {
     return {
+      maxImageSize: 15000000,
       // 需要展示属性设置的组件类型
       showAttrComponent: [
         'custom',
@@ -429,50 +431,50 @@ export default {
     goFile() {
       this.$refs.files.click()
     },
+    sizeMessage() {
+      this.$notify({
+        message: this.$t('panel.image_size_tips'),
+        position: 'top-left'
+      })
+    },
     handleFileChange(e) {
       const _this = this
       const file = e.target.files[0]
       if (!file.type.includes('image')) {
-        toast('只能插入图片')
+        toast(this.$t('panel.image_size_tips'))
         return
       }
-      const reader = new FileReader()
+      if (file.size > this.maxImageSize) {
-      reader.onload = (res) => {
+        this.sizeMessage()
-        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
       }
-
+      uploadFileResult(file, (fileUrl) => {
-      reader.readAsDataURL(file)
+        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

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -137,7 +137,7 @@
           :target="curComponent.hyperlinks.openMode "
           :href="curComponent.hyperlinks.content "
         >
-          <i class="icon iconfont icon-com-jump" />
+          <i class="icon iconfont icon-com-jump"/>
         </a>
       </span>
 
@@ -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()
+      if (file.size > this.maxImageSize) {
-      reader.onload = (res) => {
+        this.sizeMessage()
-        const fileResult = res.target.result
-        this.curComponent.propValue = fileResult
-        this.$store.commit('recordSnapshot', 'handleFileChange')
       }
-
+      uploadFileResult(file, (fileUrl) => {
-      reader.readAsDataURL(file)
+        this.curComponent.propValue = fileUrl
+        this.$store.commit('recordSnapshot', 'handleFileChange')
+      })
     },
     boardSet() {
       this.boardSetVisible = true

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',

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: '存在未保存的儀表板',

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: '存在未保存的仪表板',

frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue

@@ -45,7 +45,7 @@
           :on-remove="handleRemove"
           :file-list="fileList"
         >
-          <i class="el-icon-plus" />
+          <i class="el-icon-plus"/>
         </el-upload>
         <el-dialog
           top="25vh"
@@ -87,10 +87,9 @@
 <script>
 
 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;
 }