Merge pull request #10834 from dataease/pr@dev-v2@feat_component-hidden

Pr@dev v2@feat component hidden

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>

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

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>

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>

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>

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,

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,
@@ -52,7 +54,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')

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
+        }
+      })
     }
   }
 })

core/core-frontend/src/utils/canvasUtils.ts

@@ -1,6 +1,7 @@
 import { cloneDeep } from 'lodash-es'
 import componentList, {
   ACTION_SELECTION,
+  BASE_EVENTS,
   COMMON_COMPONENT_BACKGROUND_DARK,
   COMMON_COMPONENT_BACKGROUND_LIGHT
 } from '@/custom-component/component-list'
@@ -153,6 +154,12 @@ export function historyAdaptor(
     if ((!canvasVersion || canvasVersion === 2) && canvasInfo.type === 'dashboard') {
       matrixAdaptor(componentItem)
     }
+    // 组件事件适配
+    componentItem.events =
+      componentItem.events && componentItem.events.checked !== undefined
+        ? componentItem.events
+        : deepCopy(BASE_EVENTS)
+    componentItem['category'] = componentItem['category'] || 'base'
   })
 }