Merge pull request #1505 from dataease/pr@dev@feat_panel-picture

feat: 图片支持超链接设置

frontend/src/components/canvas/components/Editor/index.vue

@@ -105,6 +105,7 @@
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
         :active="item === curComponent"
+        :edit-mode="'edit'"
         :h="getShapeStyleIntDeDrag(item.style,'height')"
       />
     </de-drag>

frontend/src/components/canvas/components/TextAttr.vue

@@ -224,7 +224,8 @@ export default {
         'borderWidth',
         'borderRadius',
         'opacity',
-        'borderColor'
+        'borderColor',
+        'hyperlinks'
       ],
       // 过滤组件显示的属性
       'custom': [

frontend/src/components/canvas/custom-component/Picture.vue

@@ -1,16 +1,28 @@
 <template>
   <div style="overflow: hidden;width: 100%;height: 100%;">
-    <img :src="propValue">
+    <img v-if="!showLink" :src="element.propValue">
+    <a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
+      <img :src="element.propValue">
+    </a>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    // eslint-disable-next-line vue/require-default-prop
+    element: {
-    propValue: {
+      type: Object,
-      type: String,
       require: true
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'preview'
+    }
+  },
+  computed: {
+    showLink() {
+      return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
     }
   }
 }

frontend/src/components/canvas/custom-component/component-list.js

@@ -332,6 +332,7 @@ const list = [
     icon: 'iconfont icon-picture',
     defaultClass: 'text-filter',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 400,
       height: 200,

frontend/src/components/canvas/utils/utils.js

@@ -1,3 +1,5 @@
+import { BASE_MOBILE_STYLE, HYPERLINKS } from '@/components/canvas/custom-component/component-list'
+
 export function deepCopy(target) {
   if (typeof target === 'object') {
     const result = Array.isArray(target) ? [] : {}
@@ -55,3 +57,20 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
   mainSource.mobileStyle.sizex = mobileSource.sizex
   mainSource.mobileStyle.sizey = mobileSource.sizey
 }
+
+export function panelInit(componentDatas) {
+  componentDatas.forEach(item => {
+    item.filters = (item.filters || [])
+    item.linkageFilters = (item.linkageFilters || [])
+    item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
+    item.x = (item.x || 1)
+    item.y = (item.y || 1)
+    item.sizex = (item.sizex || 5)
+    item.sizey = (item.sizey || 5)
+    item.mobileSelected = (item.mobileSelected || false)
+    item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
+    if (item.type === 'picture-add') {
+      item.hyperlinks = (item.hyperlinks || HYPERLINKS)
+    }
+  })
+}

frontend/src/views/panel/edit/index.vue

@@ -220,8 +220,8 @@ import ViewSelect from '../ViewSelect'
 import SubjectSetting from '../SubjectSetting'
 import bus from '@/utils/bus'
 import Editor from '@/components/canvas/components/Editor/index'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy, panelInit} from '@/components/canvas/utils/utils'
-import componentList, { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import componentList, { BASE_MOBILE_STYLE ,HYPERLINKS} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
@@ -474,15 +474,7 @@ export default {
       const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
       if (componentDataTemp && canvasStyleDataTemp) {
         const componentDatas = JSON.parse(componentDataTemp)
-        componentDatas.forEach(item => {
+        panelInit(componentDatas)
-          item.filters = (item.filters || [])
-          item.linkageFilters = (item.linkageFilters || [])
-          item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
-          item.x = (item.x || 1)
-          item.y = (item.y || 1)
-          item.sizex = (item.sizex || 5)
-          item.sizey = (item.sizey || 5)
-        })
         this.$store.commit('setComponentData', this.resetID(componentDatas))
         const temp = JSON.parse(canvasStyleDataTemp)
         temp.refreshTime = (temp.refreshTime || 5)
@@ -496,25 +488,12 @@ export default {
       } else if (panelId) {
         findOne(panelId).then(response => {
           const componentDatas = JSON.parse(response.data.panelData)
-          const mobileComponentData = response.data.panelDataMobile ? JSON.parse(response.data.panelDataMobile) : []
+          panelInit(componentDatas)
-          componentDatas.forEach(item => {
-            item.filters = (item.filters || [])
-            item.linkageFilters = (item.linkageFilters || [])
-            item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
-            item.x = (item.x || 1)
-            item.y = (item.y || 1)
-            item.sizex = (item.sizex || 5)
-            item.sizey = (item.sizey || 5)
-            item.mobileSelected = (item.mobileSelected || false)
-            item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
-          })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
-          this.$store.commit('setMobileComponentData', this.resetID(mobileComponentData))
           const panelStyle = JSON.parse(response.data.panelStyle)
           panelStyle.refreshTime = (panelStyle.refreshTime || 5)
           panelStyle.refreshViewLoading = (panelStyle.refreshViewLoading || false)
           panelStyle.refreshUnit = (panelStyle.refreshUnit || 'minute')
-
           this.$store.commit('setCanvasStyle', panelStyle)
           this.$store.commit('recordSnapshot', 'init')// 记录快照
           // 刷新联动信息
@@ -784,31 +763,20 @@ export default {
             type: 'picture-add',
             label: '图片',
             icon: '',
+            hyperlinks: HYPERLINKS,
             propValue: fileResult,
             style: {
               ...commonStyle
             }
           }
-          component.auxiliaryMatrix = _this.canvasStyleData.auxiliaryMatrix
+          component.auxiliaryMatrix = false
-          if (_this.canvasStyleData.auxiliaryMatrix) {
+          component.style.top = _this.dropComponentInfo.shadowStyle.y
-            component.x = _this.dropComponentInfo.x
+          component.style.left = _this.dropComponentInfo.shadowStyle.x
-            component.y = _this.dropComponentInfo.y
+          component.style.width = _this.dropComponentInfo.shadowStyle.width
-            component.sizex = _this.dropComponentInfo.sizex
+          component.style.height = _this.dropComponentInfo.shadowStyle.height
-            component.sizey = _this.dropComponentInfo.sizey
-            component.style.left = (_this.dropComponentInfo.x - 1) * _this.curCanvasScale.matrixStyleOriginWidth
-            component.style.top = (_this.dropComponentInfo.y - 1) * _this.curCanvasScale.matrixStyleOriginHeight
-            component.style.width = _this.dropComponentInfo.sizex * _this.curCanvasScale.matrixStyleOriginWidth
-            component.style.height = _this.dropComponentInfo.sizey * _this.curCanvasScale.matrixStyleOriginHeight
-          } else {
-            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
-          }
           this.$store.commit('addComponent', {
             component: component
           })
-
           this.$store.commit('recordSnapshot', 'handleFileChange')
         }
 

frontend/src/views/panel/list/PanelList.vue

@@ -235,6 +235,7 @@ import {
 } from '@/views/panel/panel'
 import TreeSelector from '@/components/TreeSelector'
 import { queryAuthModel } from '@/api/authModel/authModel'
+import { panelInit } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'PanelList',
@@ -647,15 +648,7 @@ export default {
         // 加载视图数据
         findOne(data.id).then(response => {
           const componentDatas = JSON.parse(response.data.panelData)
-          componentDatas.forEach(item => {
+          panelInit(componentDatas)
-            item.filters = (item.filters || [])
-            item.linkageFilters = (item.linkageFilters || [])
-            item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
-            item.x = (item.x || 1)
-            item.y = (item.y || 1)
-            item.sizex = (item.sizex || 5)
-            item.sizey = (item.sizey || 5)
-          })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           const temp = JSON.parse(response.data.panelStyle)
           temp.refreshTime = (temp.refreshTime || 5)