From 5236b5ba213242d0e43db6b5e80310fa31bcaf8c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 23 Dec 2021 14:44:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=B6=85=E9=93=BE=E6=8E=A5=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/index.vue        |  1 +
 .../components/canvas/components/TextAttr.vue |  3 +-
 .../canvas/custom-component/Picture.vue       | 20 +++++--
 .../canvas/custom-component/component-list.js |  1 +
 frontend/src/components/canvas/utils/utils.js | 19 +++++++
 frontend/src/views/panel/edit/index.vue       | 52 ++++---------------
 frontend/src/views/panel/list/PanelList.vue   | 11 +---
 7 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 8c67a62a75..70d0ec478e 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/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>
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index f6b8dd6f00..30d6284ad0 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -224,7 +224,8 @@ export default {
         'borderWidth',
         'borderRadius',
         'opacity',
-        'borderColor'
+        'borderColor',
+        'hyperlinks'
       ],
       // 过滤组件显示的属性
       'custom': [
diff --git a/frontend/src/components/canvas/custom-component/Picture.vue b/frontend/src/components/canvas/custom-component/Picture.vue
index c4fa54cd48..f990025ad8 100644
--- a/frontend/src/components/canvas/custom-component/Picture.vue
+++ b/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
-    propValue: {
-      type: String,
+    element: {
+      type: Object,
       require: true
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'preview'
+    }
+  },
+  computed: {
+    showLink() {
+      return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
     }
   }
 }
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index dc30f2f34f..ab36a8611e 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/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,
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 24aa4bd627..6b39797de7 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/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)
+    }
+  })
+}
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index ff2fa96334..a29fc85b2c 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/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 componentList, { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import {deepCopy, panelInit} from '@/components/canvas/utils/utils'
+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 => {
-          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)
-        })
+        panelInit(componentDatas)
         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) : []
-          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))
-          })
+          panelInit(componentDatas)
           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
-          if (_this.canvasStyleData.auxiliaryMatrix) {
-            component.x = _this.dropComponentInfo.x
-            component.y = _this.dropComponentInfo.y
-            component.sizex = _this.dropComponentInfo.sizex
-            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
-          }
+          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
           this.$store.commit('addComponent', {
             component: component
           })
-
           this.$store.commit('recordSnapshot', 'handleFileChange')
         }
 
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 918ea08dd8..016da5f01f 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/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 => {
-            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)
-          })
+          panelInit(componentDatas)
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           const temp = JSON.parse(response.data.panelStyle)
           temp.refreshTime = (temp.refreshTime || 5)