refactor(仪表板): 支持仪表板查询组件支持冻结在顶部

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

@@ -12,7 +12,7 @@ import Board from '@/components/de-board/Board.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
 import { isMobile } from '@/utils/utils'
-import { isDashboard } from '@/utils/canvasUtils'
+import { isDashboard, isMainCanvas } from '@/utils/canvasUtils'
 import { XpackComponent } from '@/components/plugin'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import DePreviewPopDialog from '@/components/visualization/DePreviewPopDialog.vue'
@@ -124,6 +124,11 @@ const props = defineProps({
   optType: {
     type: String,
     required: false
+  },
+  // 画布滚动距离
+  scrollMain: {
+    type: Number,
+    default: 0
   }
 })
 const {
@@ -135,7 +140,8 @@ const {
   dvInfo,
   searchCount,
   scale,
-  suffixId
+  suffixId,
+  scrollMain
 } = toRefs(props)
 let currentInstance
 const component = ref(null)
@@ -359,12 +365,25 @@ const initOpenHandler = newWindow => {
 }
 const deepScale = computed(() => scale.value / 100)
 const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc && props.active))
+
+const freezeFlag = computed(() => {
+  return (
+    isMainCanvas(props.canvasId) &&
+    config.value.freeze &&
+    scrollMain.value - config.value.style?.top > 0
+  )
+})
 </script>
 
 <template>
   <div
     class="wrapper-outer"
-    :class="showPosition + '-' + config.component"
+    :class="[
+      showPosition + '-' + config.component,
+      {
+        'freeze-component': freezeFlag
+      }
+    ]"
     :id="wrapperId"
     @mousedown="handleInnerMouseDown"
     @mouseenter="onMouseEnter"
@@ -501,4 +520,11 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
 .event-active {
   cursor: pointer;
 }
+
+.freeze-component {
+  position: fixed;
+  z-index: 1;
+  top: var(--top-show-offset) px !important;
+  left: var(--left-show-offset) px !important;
+}
 </style>

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

@@ -130,7 +130,8 @@ const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
 const state = reactive({
-  initState: true
+  initState: true,
+  scrollMain: 0
 })
 
 const curSearchCount = computed(() => {
@@ -476,6 +477,11 @@ const downloadAsPDF = () => {
   // test
 }
 
+const scrollPreview = () => {
+  state.scrollMain = previewCanvas.value.scrollTop
+  console.log('===test1===' + state.scrollMain)
+}
+
 defineExpose({
   restore
 })
@@ -489,6 +495,7 @@ defineExpose({
     :class="{ 'de-download-custom': downloadStatus, 'datav-preview': dataVPreview }"
     ref="previewCanvas"
     @mousedown="handleMouseDown"
+    @scroll="scrollPreview"
     v-if="state.initState"
   >
     <!--弹框触发区域-->
@@ -513,7 +520,7 @@ defineExpose({
       :is-fixed="isOverSize"
     ></canvas-opt-bar>
     <template v-if="renderReady">
-      <ComponentWrapper
+      <component-wrapper
         v-for="(item, index) in baseComponentData"
         v-show="item.isShow"
         :active="item.id === (curComponent || {})['id']"
@@ -530,9 +537,11 @@ defineExpose({
         :scale="mobileInPc && isDashboard() ? 100 : scaleMin"
         :is-selector="props.isSelector"
         :font-family="canvasStyleData.fontFamily || fontFamily"
+        :scroll-main="state.scrollMain"
         @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
         @datasetParamsInit="datasetParamsInit(item)"
         @onPointClick="onPointClick"
+        :index="index"
       />
     </template>
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>

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

@@ -38,7 +38,11 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  showOffset: {
+    top: 110,
+    left: 280
+  }
 })
 
 const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
@@ -222,13 +226,18 @@ const downLoadApp = appAttachInfo => {
   fileDownload('app', appAttachInfo)
 }
 
+const freezeStyle = computed(() => [
+  { '--top-show-offset': state.showOffset.top },
+  { '--left-show-offset': state.showOffset.left }
+])
+
 defineExpose({
   getPreviewStateInfo
 })
 </script>
 
 <template>
-  <div class="dv-preview dv-teleport-query">
+  <div class="dv-preview dv-teleport-query" :style="freezeStyle">
     <ArrowSide
       v-if="!noClose"
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"

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

@@ -34,7 +34,10 @@ const state = reactive({
   curPreviewGap: 0,
   initState: true,
   showPosition: null,
-  scrollMain: 0
+  showOffset: {
+    top: 3,
+    left: 3
+  }
 })
 
 const props = defineProps({
@@ -206,9 +209,10 @@ const dataVKeepSize = computed(() => {
   return state.canvasStylePreview?.screenAdaptor === 'keep'
 })
 
-const scrollPreview = () => {
-  dvMainStore.mainScrollTop = previewCanvasContainer.value.scrollTop
-}
+const freezeStyle = computed(() => [
+  { '--top-show-offset': state.showOffset.top },
+  { '--left-show-offset': state.showOffset.left }
+])
 
 defineExpose({
   loadCanvasDataAsync
@@ -221,7 +225,7 @@ defineExpose({
     v-loading="!state.initState"
     :class="{ 'canvas_keep-size': dataVKeepSize }"
     ref="previewCanvasContainer"
-    @scroll="scrollPreview"
+    :style="freezeStyle"
   >
     <canvas-opt-bar
       canvas-id="canvas-main"