From 21c61424b76d507d57e241b238703c516d1a0d8a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 5 Aug 2024 15:18:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E4=BA=8B=E4=BB=B6=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/ComponentWrapper.vue               | 19 +++++++
 .../data-visualization/canvas/DePreview.vue   | 22 ++++++--
 .../custom-component/common/CommonAttr.vue    |  3 +-
 .../custom-component/common/CommonEvent.vue   | 52 ++++++++++++++++---
 .../src/custom-component/component-list.ts    | 27 ++++++++--
 5 files changed, 107 insertions(+), 16 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index f08905b9cf..c79e97a3b9 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -207,6 +207,24 @@ const onPointClick = param => {
   emits('onPointClick', param)
 }
 
+const onWrapperClick = () => {
+  if (['Picture,ScrollText'].includes(config.value.component)) {
+    // doWrapperClick
+    if (config.value.events && config.value.events.checked) {
+      if (config.value.events.type === 'displayChange') {
+        // 打开弹框区域
+        nextTick(() => {
+          dvMainStore.popAreaActiveSwitch()
+        })
+      } else if (config.value.events.type === 'jump') {
+        window.open(config.value.events.jump.value, '_blank')
+      } else if (config.value.events.type === 'refresh') {
+        useEmitt().emitter.emit('componentRefresh')
+      }
+    }
+  }
+}
+
 const deepScale = computed(() => scale.value / 100)
 </script>
 
@@ -247,6 +265,7 @@ const deepScale = computed(() => scale.value / 100)
         class="wrapper-inner-adaptor"
         :style="slotStyle"
         :class="{ 'pop-wrapper-inner': popActive }"
+        @click="onWrapperClick"
       >
         <component
           :is="findComponent(config['component'])"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 3681470ec6..2acd6a6679 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -157,11 +157,19 @@ watch(
 useEmitt({
   name: 'tabCanvasChange-' + canvasId.value,
   callback: function () {
-    console.log('tabCanvasChange--' + canvasId.value)
     restore()
   }
 })
 
+useEmitt({
+  name: 'componentRefresh',
+  callback: function () {
+    if (isMainCanvas(canvasId.value)) {
+      refreshDataV()
+    }
+  }
+})
+
 const resetLayout = () => {
   if (downloadStatus.value) {
     return
@@ -228,14 +236,18 @@ const initRefreshTimer = () => {
       }
     }
     refreshTimer.value = setInterval(() => {
-      searchCount.value++
-      if (isMainCanvas(canvasId.value)) {
-        refreshOtherComponent(dvInfo.value.id, dvInfo.value.type)
-      }
+      refreshDataV()
     }, refreshTime)
   }
 }
 
+const refreshDataV = () => {
+  searchCount.value++
+  if (isMainCanvas(canvasId.value)) {
+    refreshOtherComponent(dvInfo.value.id, dvInfo.value.type)
+  }
+}
+
 const initWatermark = (waterDomId = 'preview-canvas-main') => {
   if (dvInfo.value.watermarkInfo && isMainCanvas(canvasId.value)) {
     if (userInfo.value && userInfo.value.model !== 'lose') {
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 4044854748..bb8b6e746b 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -95,8 +95,7 @@ const colorPickerWidth = computed(() => {
 
 // 暂时关闭
 const eventsShow = computed(() => {
-  return false
-  // return !dashboardActive.value && ['Picture'].includes(element.value.component)
+  return !dashboardActive.value && ['Picture'].includes(element.value.component)
 })
 
 const backgroundCustomShow = computed(() => {
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
index 6f40d96a09..697c4d58b7 100644
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue'
-import { ElFormItem } from 'element-plus-secondary'
+import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import Icon from '../../components/icon-custom/src/Icon.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 
@@ -16,6 +17,8 @@ const props = withDefaults(
 )
 const { themes, element } = toRefs(props)
 
+const curSupportEvents = ['jump', 'showHidden', 'refreshDataV']
+
 const eventsInfo = computed(() => {
   return element.value.events
 })
@@ -23,6 +26,10 @@ const eventsInfo = computed(() => {
 const onEventChange = () => {
   snapshotStore.recordSnapshotCache('renderChart')
 }
+
+const onJumpValueChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
 </script>
 
 <template>
@@ -36,17 +43,50 @@ const onEventChange = () => {
           @change="onEventChange"
           >开启事件绑定</el-checkbox
         >
+        <el-tooltip class="item" :effect="themes" placement="top">
+          <template #content>
+            <div>事件绑定需要退出编辑模式才开生效</div>
+          </template>
+          <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+            <Icon name="icon_info_outlined" />
+          </el-icon>
+        </el-tooltip>
       </el-form-item>
 
       <el-form-item class="form-item" :class="'form-item-' + themes" style="margin-bottom: 8px">
-        <el-radio-group
-          :effect="themes"
+        <el-select
           v-model="eventsInfo.type"
-          class="radio-span"
+          :disabled="!eventsInfo.checked"
+          :effect="themes"
           @change="onEventChange"
+          size="small"
         >
-          <el-radio label="displayChange" :effect="themes"> 开启弹框区 </el-radio>
-        </el-radio-group>
+          <el-option
+            v-for="typeInfo in eventsInfo.typeList"
+            v-show="curSupportEvents.includes(typeInfo.key)"
+            size="small"
+            :effect="themes"
+            :key="typeInfo.key"
+            :label="typeInfo.label"
+            :value="typeInfo.key"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-if="eventsInfo.type === 'jump'"
+        class="form-item"
+        :class="'form-item-' + themes"
+        style="margin-bottom: 8px"
+      >
+        <el-input
+          v-model="eventsInfo.jump.value"
+          :effect="themes"
+          :disabled="!eventsInfo.checked"
+          clearable
+          :placeholder="'请输入跳转地址'"
+          @change="onJumpValueChange"
+        />
       </el-form-item>
     </el-form>
   </el-row>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index a79e40b905..0d6da72970 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -10,11 +10,32 @@ export const commonStyle = {
 
 export const BASE_EVENTS = {
   checked: false,
-  type: 'displayChange', // openHidden  jump
+  showTips: false,
+  type: 'jump', // openHidden  jump
+  typeList: [
+    { key: 'jump', label: '跳转' },
+    { key: 'download', label: '下载' },
+    { key: 'share', label: '分享' },
+    { key: 'showHidden', label: '弹框区域' },
+    { key: 'refreshDataV', label: '刷新' },
+    { key: 'refreshView', label: '刷新图表' }
+  ],
   jump: {
-    value: null
+    value: 'https://'
   },
-  displayChange: {
+  download: {
+    value: true
+  },
+  share: {
+    value: true
+  },
+  showHidden: {
+    value: true
+  },
+  refreshDataV: {
+    value: true
+  },
+  refreshView: {
     value: true, // 事件当前值 false
     target: 'all'
   }