feat(数据大屏): 组件支持事件设置

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'])"

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') {

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(() => {

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>

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