From efbc337e89cc4817ef53dae9a3bdf0d438c5657d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 21 Mar 2025 18:14:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=9F=A5=E8=AF=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E5=86=BB=E7=BB=93=E5=9C=A8=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8#15435?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/Shape.vue       | 21 ++++++++++++++++---
 .../src/custom-component/component-list.ts    |  1 +
 core/core-frontend/src/locales/en.ts          |  1 +
 core/core-frontend/src/locales/tw.ts          |  1 +
 core/core-frontend/src/locales/zh-CN.ts       |  1 +
 .../store/modules/data-visualization/copy.ts  |  3 +++
 core/core-frontend/src/utils/canvasUtils.ts   |  3 +++
 .../editor/editor-style/VQueryChartStyle.vue  | 20 ++++++++++++++++++
 .../data-visualization/PreviewCanvas.vue      | 10 +++++++--
 9 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 687e8f6bcc..070d5165a8 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="shape"
-    :class="{ 'shape-group-area': isGroupArea }"
+    :class="{ 'shape-group-area': isGroupArea, 'freeze-component': freezeFlag }"
     ref="shapeInnerRef"
     :id="domId"
     v-loading="downLoading"
@@ -326,6 +326,14 @@ const initialAngle = {
 }
 const cursors = ref({})
 
+const freezeFlag = computed(() => {
+  return (
+    isMainCanvas(canvasId.value) &&
+    element.value.freeze &&
+    mainScrollTop.value - defaultStyle.value.top > 0
+  )
+})
+
 const showCheck = computed(() => {
   return mobileInPc.value && element.value.canvasId === 'canvas-main'
 })
@@ -386,7 +394,7 @@ const getPointList = () => {
 }
 
 const isActive = () => {
-  return active.value && !element.value['isLock'] && isEditMode.value
+  return active.value && !element.value['isLock'] && isEditMode.value && !freezeFlag.value
 }
 
 const userViewEnlargeOpen = opt => {
@@ -538,7 +546,8 @@ const handleMouseDownOnShape = e => {
   // }
 
   e.stopPropagation()
-  if (element.value['isLock'] || !isEditMode.value) return
+  // 锁定 非编辑状态 冻结状态 不进行移动
+  if (element.value['isLock'] || !isEditMode.value || freezeFlag.value) return
 
   cursors.value = getCursor() // 根据旋转角度获取光标位置
 
@@ -1318,4 +1327,10 @@ onMounted(() => {
   position: relative;
   transform-style: preserve-3d;
 }
+
+.freeze-component {
+  position: fixed;
+  z-index: 1;
+  top: 66px !important;
+}
 </style>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index a439861e1b..5c7769d9fb 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -296,6 +296,7 @@ const list = [
     icon: 'icon_search',
     innerType: 'VQuery',
     isHang: false,
+    freeze: false, // 是否冻结再顶部 主画布生效
     x: 1,
     y: 1,
     sizeX: 72,
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 51703a7d77..fbb44ae947 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2870,6 +2870,7 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    freeze_top: 'Position frozen at the top',
     indicator_linkage: 'Indicator card linkage only carries chart filtering parameters',
     gap_size: 'Gap Size',
     small: 'Small',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 8cee31e6e2..c9d01167b7 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2791,6 +2791,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    freeze_top: '位置凍結在頂部',
     indicator_linkage: '指標卡聯動僅攜帶圖表過濾參數',
     gap_size: '間隙大小',
     small: '小',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 7545231797..5fb96d44ad 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2797,6 +2797,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    freeze_top: '位置冻结在顶部',
     indicator_linkage: '指标卡联动仅携带图表过滤参数',
     gap_size: '间隙大小',
     small: '小',
diff --git a/core/core-frontend/src/store/modules/data-visualization/copy.ts b/core/core-frontend/src/store/modules/data-visualization/copy.ts
index 82abae60c9..c46568bfd4 100644
--- a/core/core-frontend/src/store/modules/data-visualization/copy.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/copy.ts
@@ -201,6 +201,9 @@ export function deepCopyTabItemHelper(newCanvasId, tabComponentData, idMap) {
 
 function deepCopyHelper(data, idMap) {
   const result = deepCopy(data)
+  if (result.freeze) {
+    result.freeze = false
+  }
   const newComponentId = generateID()
   idMap[data.id] = newComponentId
   result.id = newComponentId
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index c4485c3072..b485af8a42 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -141,6 +141,9 @@ export function historyItemAdaptor(
   canvasInfo
 ) {
   componentItem['canvasActive'] = false
+  if (componentItem.component === 'VQuery') {
+    componentItem['freeze'] = componentItem['freeze'] || false // 冻结字段适配
+  }
   // 定时报告过滤组件适配 如果当前是定时报告默认切有设置对应的过滤组件默认值，则替换过滤组件
   if (
     componentItem.component === 'VQuery' &&
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index a63ac10b13..936083b094 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -117,6 +117,16 @@ const currentSearch = ref({
   queryConditionWidth: 227
 })
 
+const onFreezeChange = () => {
+  if (element.value.freeze) {
+    dvMainStore.componentData.forEach(item => {
+      if (item.innerType === 'VQuery' && item.id !== element.value.id && item.freeze) {
+        item.freeze = false
+      }
+    })
+  }
+}
+
 const handleCurrentPlaceholder = val => {
   const obj = props.element.propValue.find(ele => {
     return ele.id === val
@@ -252,6 +262,16 @@ const onTitleChange = () => {
       <el-collapse v-model="styleActiveNames" class="style-collapse">
         <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
           <el-form @keydown.stop.prevent.enter label-position="top">
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                :effect="themes"
+                size="small"
+                v-model="element.freeze"
+                @change="onFreezeChange"
+              >
+                {{ t('visualization.freeze_top') }}
+              </el-checkbox>
+            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index 845a954aa9..0363aa834e 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -4,7 +4,7 @@ import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { useEmitt } from '@/hooks/web/useEmitt'
-import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
+import { initCanvasData, isMainCanvas, onInitReady } from '@/utils/canvasUtils'
 import { queryTargetVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { Base64 } from 'js-base64'
 import { getOuterParamsInfo } from '@/api/visualization/outerParams'
@@ -33,7 +33,8 @@ const state = reactive({
   dvInfo: null,
   curPreviewGap: 0,
   initState: true,
-  showPosition: null
+  showPosition: null,
+  scrollMain: 0
 })
 
 const props = defineProps({
@@ -205,6 +206,10 @@ const dataVKeepSize = computed(() => {
   return state.canvasStylePreview?.screenAdaptor === 'keep'
 })
 
+const scrollPreview = () => {
+  dvMainStore.mainScrollTop = previewCanvasContainer.value.scrollTop
+}
+
 defineExpose({
   loadCanvasDataAsync
 })
@@ -216,6 +221,7 @@ defineExpose({
     v-loading="!state.initState"
     :class="{ 'canvas_keep-size': dataVKeepSize }"
     ref="previewCanvasContainer"
+    @scroll="scrollPreview"
   >
     <canvas-opt-bar
       canvas-id="canvas-main"