From 918b8be1c43477371a34e66c1c76d744e79f01c9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 8 Jul 2024 18:09:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/RealTimeTreeGather.vue | 11 ++++
 .../canvas/ComponentWrapper.vue               | 11 ++--
 .../canvas/ContextMenuDetails.vue             | 13 ++++-
 .../custom-component/common/CommonAttr.vue    | 14 +++++
 .../custom-component/common/CommonEvent.vue   | 56 +++++++++++++++++++
 .../src/custom-component/component-list.ts    | 15 ++++-
 .../custom-component/picture/Component.vue    | 13 ++++-
 .../store/modules/data-visualization/event.ts | 11 +++-
 8 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
 create mode 100644 core/core-frontend/src/custom-component/common/CommonEvent.vue

diff --git a/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue b/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
new file mode 100644
index 0000000000..0a8d203dd1
--- /dev/null
+++ b/core/core-frontend/src/components/data-visualization/RealTimeTreeGather.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>
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 a7a7520bb3..c06fd71c1e 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -113,11 +113,12 @@ onMounted(() => {
 })
 
 const onClick = () => {
-  const events = config.value.events
-  Object.keys(events).forEach(event => {
-    currentInstance.ctx[event](events[event])
-  })
-  eventBus.emit('v-click', config.value.id)
+  // do event click
+  // const events = config.value.events
+  // Object.keys(events).forEach(event => {
+  //   currentInstance.ctx[event](events[event])
+  // })
+  // eventBus.emit('v-click', config.value.id)
 }
 
 const getComponentStyleDefault = style => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
index 4f258f4683..4936baf5c3 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@@ -80,7 +80,12 @@ const show = () => {
   layerStore.showComponent()
   menuOpt('show')
 }
-
+const categoryChange = type => {
+  if (curComponent.value) {
+    snapshotStore.recordSnapshotCache()
+    curComponent.value['category'] = type
+  }
+}
 const rename = () => {
   emit('rename')
   menuOpt('rename')
@@ -222,6 +227,12 @@ const editQueryCriteria = () => {
           <el-divider class="custom-divider" />
           <li @click="hide" v-show="curComponent['isShow']">隐藏</li>
           <li @click="show" v-show="!curComponent['isShow']">取消隐藏</li>
+          <li @click="categoryChange('hidden')" v-show="curComponent['category'] === 'base'">
+            转为隐藏组件
+          </li>
+          <li @click="categoryChange('base')" v-show="curComponent['category'] === 'hidden'">
+            转为基础组件
+          </li>
           <li @click="lock">锁定</li>
           <el-divider class="custom-divider" />
           <li v-if="activePosition === 'aside'" @click="rename">重命名</li>
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 5ab4fd0063..6bad08932a 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -9,6 +9,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue'
+import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const { t } = useI18n()
@@ -87,6 +88,10 @@ const colorPickerWidth = computed(() => {
   }
 })
 
+const eventsShow = computed(() => {
+  return !dashboardActive.value && ['Picture'].includes(element.value.component)
+})
+
 const backgroundCustomShow = computed(() => {
   return (
     dashboardActive.value ||
@@ -149,6 +154,15 @@ const stopEvent = e => {
           :element="element"
         ></common-style-set>
       </el-collapse-item>
+      <el-collapse-item
+        v-if="element && element.events && eventsShow"
+        :effect="themes"
+        title="事件"
+        name="style"
+        class="common-style-area"
+      >
+        <common-event :themes="themes" :element="element"></common-event>
+      </el-collapse-item>
     </el-collapse>
   </div>
 </template>
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
new file mode 100644
index 0000000000..1961804252
--- /dev/null
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { ElFormItem } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+
+const snapshotStore = snapshotStoreWithOut()
+
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+    element: any
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
+const { themes, element } = toRefs(props)
+
+const eventsInfo = computed(() => {
+  return element.value.events
+})
+
+const onEventChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
+</script>
+
+<template>
+  <el-row class="custom-row">
+    <el-form label-position="top">
+      <el-form-item class="form-item" :class="'form-item-' + themes">
+        <el-checkbox
+          :effect="themes"
+          size="small"
+          v-model="eventsInfo.checked"
+          @change="onEventChange"
+          >开启事件绑定</el-checkbox
+        >
+      </el-form-item>
+
+      <el-form-item class="form-item" :class="'form-item-' + themes" style="margin-bottom: 8px">
+        <el-radio-group
+          :effect="themes"
+          v-model="eventsInfo.type"
+          class="radio-span"
+          @change="onEventChange"
+        >
+          <el-radio label="displayChange" :effect="themes"> 开启隐藏组件 </el-radio>
+          <el-radio label="jump" :effect="themes"> 跳转 </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 4cd75b6173..d9a48567ed 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -8,6 +8,18 @@ export const commonStyle = {
   opacity: 1
 }
 
+export const BASE_EVENTS = {
+  checked: false,
+  type: 'displayChange', // openHidden  jump
+  jump: {
+    value: null
+  },
+  displayChange: {
+    value: true, // 事件当前值 false
+    target: 'all'
+  }
+}
+
 // 流媒体视频信息配置
 export const STREAMMEDIALINKS = {
   videoType: 'flv',
@@ -159,12 +171,13 @@ export const COMMON_COMPONENT_BACKGROUND_MAP = {
 export const commonAttr = {
   animations: [],
   canvasId: 'canvas-main',
-  events: {},
+  events: BASE_EVENTS,
   groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
   isLock: false, // 是否锁定组件
   maintainRadio: false, // 布局时保持宽高比例
   aspectRatio: 1, // 锁定时的宽高比例
   isShow: true, // 是否显示组件
+  category: 'base', //组件类型 base 基础组件 hidden隐藏组件
   // 当前组件动作
   dragging: false,
   resizing: false,
diff --git a/core/core-frontend/src/custom-component/picture/Component.vue b/core/core-frontend/src/custom-component/picture/Component.vue
index 025e37216c..97933cc296 100644
--- a/core/core-frontend/src/custom-component/picture/Component.vue
+++ b/core/core-frontend/src/custom-component/picture/Component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pic-main">
+  <div class="pic-main" @click="onPictureClick">
     <img
       draggable="false"
       v-if="propValue['url']"
@@ -20,6 +20,8 @@
 import { CSSProperties, computed, nextTick, toRefs } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
+import { eventStoreWithOut } from '@/store/modules/data-visualization/event'
+const eventStore = eventStoreWithOut()
 const props = defineProps({
   propValue: {
     type: String,
@@ -46,7 +48,14 @@ const imageAdapter = computed(() => {
   }
   return style as CSSProperties
 })
-
+const onPictureClick = e => {
+  if (element.value.events && element.value.events.checked) {
+    if (element.value.events.type === 'displayChange') {
+      // 打开隐藏组件
+      eventStore.displayEventChange(element.value)
+    }
+  }
+}
 const uploadImg = () => {
   nextTick(() => {
     eventBus.emit('uploadImg')
diff --git a/core/core-frontend/src/store/modules/data-visualization/event.ts b/core/core-frontend/src/store/modules/data-visualization/event.ts
index 887820bdfd..0f423ba002 100644
--- a/core/core-frontend/src/store/modules/data-visualization/event.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/event.ts
@@ -3,7 +3,7 @@ import { store } from '../../index'
 import { dvMainStoreWithOut } from './dvMain'
 
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, componentData } = storeToRefs(dvMainStore)
 
 export const eventStore = defineStore('event', {
   actions: {
@@ -13,6 +13,15 @@ export const eventStore = defineStore('event', {
 
     removeEvent(event) {
       delete curComponent.value.events[event]
+    },
+
+    displayEventChange(component) {
+      component.events.displayChange.value = !component.events.displayChange.value
+      componentData.value.forEach(item => {
+        if (item.category === 'hidden') {
+          item.isShow = component.events.displayChange.value
+        }
+      })
     }
   }
 })