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

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>

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,

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',

core/core-frontend/src/locales/tw.ts

@@ -2791,6 +2791,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    freeze_top: '位置凍結在頂部',
     indicator_linkage: '指標卡聯動僅攜帶圖表過濾參數',
     gap_size: '間隙大小',
     small: '小',

core/core-frontend/src/locales/zh-CN.ts

@@ -2797,6 +2797,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    freeze_top: '位置冻结在顶部',
     indicator_linkage: '指标卡联动仅携带图表过滤参数',
     gap_size: '间隙大小',
     small: '小',

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

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' &&

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"

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"