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

refactor(仪表板): 图片组件默认存储在服务器
2022-11-15 16:52:35 +08:00 · 2022-11-15 16:52:35 +08:00 · 6de92c6216
commit 6de92c6216
parent 9802ce0258 6919b3ffca
6 changed files with 71 additions and 57 deletions
--- a/frontend/src/components/canvas/DeCanvas.vue
+++ b/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()
-      reader.onload = (res) => {
-        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
--- 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 "
        >
-          <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()
-      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
--- 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',
--- 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: '存在未保存的儀表板',
--- 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: '存在未保存的仪表板',
--- 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"
        >
-          <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;
 }