refactor(数据大屏、仪表板): 组件增加全屏、分享、下载事件支持#10812

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -256,6 +256,12 @@ const onWrapperClick = e => {
       }
     } else if (config.value.events.type === 'refreshDataV') {
       useEmitt().emitter.emit('componentRefresh')
+    } else if (config.value.events.type === 'fullScreen') {
+      useEmitt().emitter.emit('canvasFullscreen')
+    } else if (config.value.events.type === 'share') {
+      useEmitt().emitter.emit('shareComponent')
+    } else if (config.value.events.type === 'download') {
+      useEmitt().emitter.emit('canvasDownload')
     }
     e.preventDefault()
     e.stopPropagation()

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -17,12 +17,15 @@ import PopArea from '@/custom-component/pop-area/Component.vue'
 import CanvasFilterBtn from '@/custom-component/canvas-filter-btn/Component.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
+import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
+import ShareHandler from '@/views/share/share/ShareHandler.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
 const customDatasetParamsRef = ref(null)
 const emits = defineEmits(['onResetLayout'])
-
+const fullScreeRef = ref(null)
+const shareComponent = ref(null)
 const props = defineProps({
   canvasStyleData: {
     type: Object,
@@ -189,6 +192,24 @@ useEmitt({
   }
 })
 
+useEmitt({
+  name: 'canvasFullscreen',
+  callback: function () {
+    if (isMainCanvas(canvasId.value)) {
+      fullScreeRef.value.toggleFullscreen()
+    }
+  }
+})
+
+useEmitt({
+  name: 'shareComponent',
+  callback: function () {
+    if (isMainCanvas(canvasId.value)) {
+      shareComponent.value.execute()
+    }
+  }
+})
+
 const resetLayout = () => {
   if (downloadStatus.value) {
     return
@@ -430,8 +451,15 @@ defineExpose({
     </template>
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
+  <de-fullscreen ref="fullScreeRef"></de-fullscreen>
   <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
+  <ShareHandler
+    ref="shareComponent"
+    :resource-id="dvInfo.id"
+    :resource-type="dvInfo.type"
+    :weight="dvInfo.weight"
+  />
 </template>
 
 <style lang="less" scoped>

core/core-frontend/src/custom-component/common/CommonEvent.vue

@@ -22,9 +22,9 @@ const isDashboard = dvMainStore.dvInfo.type === 'dashboard'
 
 const curSupportEvents = computed(() => {
   if (isDashboard) {
-    return ['jump', 'refreshDataV']
+    return ['jump', 'refreshDataV', 'fullScreen', 'share', 'download']
   } else {
-    return ['jump', 'showHidden', 'refreshDataV']
+    return ['jump', 'showHidden', 'refreshDataV', 'fullScreen', 'download']
   }
 })
 const onEventChange = () => {

core/core-frontend/src/custom-component/component-list.ts

@@ -27,6 +27,7 @@ export const BASE_EVENTS = {
     { key: 'jump', label: '跳转' },
     { key: 'download', label: '下载' },
     { key: 'share', label: '分享' },
+    { key: 'fullScreen', label: '全屏' },
     { key: 'showHidden', label: '弹窗区域' },
     { key: 'refreshDataV', label: '刷新' },
     { key: 'refreshView', label: '刷新图表' }

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { reactive, nextTick, ref, toRefs, onBeforeMount, computed } from 'vue'
+import { reactive, nextTick, ref, toRefs, onBeforeMount, computed, onMounted } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
@@ -17,6 +17,7 @@ import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus-secondary'
 import { personInfoApi } from '@/api/user'
 import AppExportForm from '@/components/de-app/AppExportForm.vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const appExportFormRef = ref(null)
 
 const dvMainStore = dvMainStoreWithOut()
@@ -70,6 +71,15 @@ const mounted = computed(() => {
   return resourceTreeRef.value?.mounted
 })
 
+onMounted(() => {
+  useEmitt({
+    name: 'canvasDownload',
+    callback: function () {
+      downloadH2('img')
+    }
+  })
+})
+
 function createNew() {
   resourceTreeRef.value?.createNewObject()
 }

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -14,9 +14,12 @@ import { useEmbedded } from '@/store/modules/embedded'
 import { useI18n } from '@/hooks/web/useI18n'
 import { XpackComponent } from '@/components/plugin'
 import { propTypes } from '@/utils/propTypes'
+import { downloadCanvas2 } from '@/utils/imgUtils'
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
 const embeddedStore = useEmbedded()
+const previewCanvasContainer = ref(null)
+const downloadStatus = ref(false)
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -117,6 +120,15 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
     }
   )
 }
+const downloadH2 = type => {
+  downloadStatus.value = true
+  nextTick(() => {
+    const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
+    downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
+      downloadStatus.value = false
+    })
+  })
+}
 
 let p = null
 const XpackLoaded = () => p(true)
@@ -127,6 +139,12 @@ onMounted(async () => {
       ExportExcelRef.value.init(params)
     }
   })
+  useEmitt({
+    name: 'canvasDownload',
+    callback: function () {
+      downloadH2('img')
+    }
+  })
   await new Promise(r => (p = r))
   const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
   const { dvType, callBackFlag, taskId } = router.currentRoute.value.query
@@ -148,7 +166,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="content">
+  <div class="content" ref="previewCanvasContainer">
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview"
@@ -158,6 +176,7 @@ defineExpose({
       :dv-info="state.dvInfo"
       :cur-gap="state.curPreviewGap"
       :is-selector="props.isSelector"
+      :download-status="downloadStatus"
     ></de-preview>
   </div>
   <XpackComponent

core/core-frontend/src/views/data-visualization/PreviewHead.vue

@@ -19,7 +19,6 @@ const { t } = useI18n()
 const embeddedStore = useEmbedded()
 
 const favorited = ref(false)
-const fullScreeRef = ref(null)
 const preview = () => {
   const baseUrl = isDataEaseBi.value ? embeddedStore.baseUrl : ''
   const url = baseUrl + '#/preview?dvId=' + dvInfo.value.id
@@ -122,8 +121,11 @@ const initOpenHandler = newWindow => {
       </el-popover>
     </div>
     <div class="canvas-opt-button">
-      <de-fullscreen ref="fullScreeRef"></de-fullscreen>
-      <el-button v-if="!isIframe" secondary @click="() => fullScreeRef.toggleFullscreen()">
+      <el-button
+        v-if="!isIframe"
+        secondary
+        @click="() => useEmitt().emitter.emit('canvasFullscreen')"
+      >
         <template #icon>
           <icon name="icon_pc_fullscreen"></icon>
         </template>

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -2,7 +2,7 @@
 import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
-import { nextTick, onBeforeMount, reactive, ref, computed } from 'vue'
+import { nextTick, onBeforeMount, reactive, ref, computed, onMounted } from 'vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
@@ -18,6 +18,7 @@ import DvPreview from '@/views/data-visualization/DvPreview.vue'
 import AppExportForm from '@/components/de-app/AppExportForm.vue'
 import { personInfoApi } from '@/api/user'
 import { ElMessage } from 'element-plus-secondary'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, canvasViewDataInfo } = storeToRefs(dvMainStore)
@@ -196,6 +197,15 @@ const findUserData = callback => {
   })
 }
 
+onMounted(() => {
+  useEmitt({
+    name: 'canvasDownload',
+    callback: function () {
+      download('img')
+    }
+  })
+})
+
 defineExpose({
   getPreviewStateInfo
 })