fix(仪表板、数据大屏): 修复因过滤组件展示字段和选择字段不一致导致跳转配置过滤组件后，与过滤组件相关的图表过滤失败问题

2026-05-15 13:32:18 +08:00 · 2025-03-10 11:18:11 +08:00
parent 9bd736f181
commit 9181b3b416
4 changed files with 62 additions and 37 deletions
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -25,7 +25,7 @@ import { viewFieldTimeTrans } from '@/utils/viewUtils'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
-import { filterEnumMap } from '@/utils/componentUtils'
+import { filterEnumParams } from '@/utils/componentUtils'
 const { t } = useI18n()

 export const dvMainStore = defineStore('dataVisualization', {
@@ -1314,19 +1314,19 @@ export const dvMainStore = defineStore('dataVisualization', {
        })
      }
    },
-    async trackFilterCursor(element, checkQDList, trackInfo, preActiveComponentIds, viewId) {
+    trackFilterCursor(element, checkQDList, trackInfo, preActiveComponentIds, viewId) {
      let currentFilters = element.linkageFilters || [] // 当前联动filter
      if (['table-info', 'table-normal'].includes(element.innerType)) {
        currentFilters = []
      }
      // 联动的图表情况历史条件
      // const currentFilters = []
-      for (const QDItem of checkQDList) {
+      checkQDList.forEach(QDItem => {
        const sourceInfo = viewId + '#' + QDItem.id
        // 获取所有目标联动信息
        const targetInfoList = trackInfo[sourceInfo] || []
        const paramValue = [QDItem.value]
-        for (const targetInfo of targetInfoList) {
+        targetInfoList.forEach(targetInfo => {
          const targetInfoArray = targetInfo.split('#')
          const targetViewId = targetInfoArray[0] // 目标图表
          if (element.component === 'UserView' && element.id === targetViewId) {
@@ -1365,25 +1365,22 @@ export const dvMainStore = defineStore('dataVisualization', {
            preActiveComponentIds.includes(element.id) || preActiveComponentIds.push(element.id)
          }
          if (element.component === 'VQuery') {
-            for (const filterItem of element.propValue) {
-              const { optionValueSource, field, displayId } = filterItem
+            element.propValue.forEach(filterItem => {
              if (filterItem.id === targetViewId) {
                let queryParams = paramValue
                if (!['1', '7'].includes(filterItem.displayType)) {
                  // 查询组件除了时间组件 其他入参只支持文本 这里全部转为文本
                  queryParams = paramValue.map(number => String(number))
                }
-                // 当前是选择数据集模式，可能出现展示字段和选择字段不同的情况 这里需要兼容
-                if (optionValueSource === 1 && field.id) {
-                  queryParams = await filterEnumMap(queryParams, {
-                    queryId: field.id,
-                    displayId,
-                    searchText: ''
-                  })
-                }
                filterItem.defaultValueCheck = true
                filterItem.timeType = 'fixed'
                if (['0', '2'].includes(filterItem.displayType)) {
+                  const { optionValueSource, field, displayId } = filterItem
+                  const queryMapFlag = optionValueSource === 1 && field.id !== displayId
+                  let queryMapParams = queryParams
+                  if (queryMapFlag) {
+                    queryMapParams = filterEnumParams(queryParams, field.id)
+                  }
                  // 0 文本类型 1 数字类型
                  if (filterItem.multiple) {
                    // multiple === true 多选
@@ -1394,8 +1391,8 @@ export const dvMainStore = defineStore('dataVisualization', {
                    filterItem['selectValue'] = queryParams[0]
                    filterItem['defaultValue'] = queryParams[0]
                  }
-                  filterItem['defaultMapValue'] = queryParams
-                  filterItem['mapValue'] = queryParams
+                  filterItem['defaultMapValue'] = queryMapParams
+                  filterItem['mapValue'] = queryMapParams
                } else if (filterItem.displayType === '1') {
                  // 1 时间类型
                  filterItem['selectValue'] = queryParams[0]
@@ -1416,10 +1413,10 @@ export const dvMainStore = defineStore('dataVisualization', {
                  filterItem['defaultConditionValueF'] = queryParams[0]
                }
              }
-            }
+            })
          }
-        }
-      }
+        })
+      })
      element.linkageFilters = currentFilters
    },

--- a/core/core-frontend/src/utils/componentUtils.ts
+++ b/core/core-frontend/src/utils/componentUtils.ts
@@ -1,20 +1,44 @@
 import { EnumValue, enumValueObj } from '@/api/dataset'

+let filterEnumMap = {}
+
 const findFilterEnum = async (val: EnumValue) => {
  const queryId = val.queryId
  const displayId = val.displayId
  const arr = await enumValueObj({ queryId: queryId, displayId: displayId, searchText: '' })
  return arr?.reduce((acc, item) => {
-    acc[item[queryId]] = item[displayId]
+    acc[item[displayId]] = item[queryId]
    return acc
  }, {})
 }

-export const filterEnumMap = async (queryParams, val: EnumValue) => {
-  const resultMap = await findFilterEnum(val)
-  const resultParams = []
-  queryParams.forEach(param => {
-    resultParams.push(resultMap[param] || param)
-  })
-  return resultParams
+export const filterEnumParams = (queryParams, fieldId: string) => {
+  const resultMap = filterEnumMap[fieldId]
+  if (resultMap) {
+    const resultParams = []
+    queryParams.forEach(param => {
+      resultParams.push(resultMap[param] || param)
+    })
+    return resultParams
+  } else {
+    return queryParams
+  }
+}
+
+export const filterEnumMapSync = async componentData => {
+  filterEnumMap = {}
+  for (const element of componentData) {
+    if (element.component === 'VQuery') {
+      for (const filterItem of element.propValue) {
+        const { optionValueSource, field, displayId } = filterItem
+        if (optionValueSource === 1 && field.id) {
+          filterEnumMap[field.id] = await findFilterEnum({
+            queryId: field.id,
+            displayId,
+            searchText: ''
+          })
+        }
+      }
+    }
+  }
 }
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -17,6 +17,7 @@ import { downloadCanvas2 } from '@/utils/imgUtils'
 import { isLink, setTitle } from '@/utils/utils'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
 import { useRoute } from 'vue-router'
+import { filterEnumMapSync } from '@/utils/componentUtils'
 const routeWatch = useRoute()

 const dvMainStore = dvMainStoreWithOut()
@@ -112,21 +113,22 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
  await initCanvasData(
    dvId,
    dvType,
-    function ({
+    async function ({
      canvasDataResult,
      canvasStyleResult,
      dvInfo,
      canvasViewInfoPreview,
      curPreviewGap
    }) {
+      if (jumpParam) {
+        await filterEnumMapSync(canvasDataResult)
+        dvMainStore.addViewTrackFilter(jumpParam)
+      }
      state.canvasDataPreview = canvasDataResult
      state.canvasStylePreview = canvasStyleResult
      state.canvasViewInfoPreview = canvasViewInfoPreview
      state.dvInfo = dvInfo
      state.curPreviewGap = curPreviewGap
-      if (jumpParam) {
-        dvMainStore.addViewTrackFilter(jumpParam)
-      }
      if (!ignoreParams) {
        state.initState = false
        dvMainStore.addOuterParamsFilter(attachParam)
@@ -138,7 +140,7 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
        setTitle(dvInfo.name)
      }
      initBrowserTimer()
-      nextTick(() => {
+      await nextTick(() => {
        onInitReady({ resourceId: dvId })
      })
    }
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
@@ -14,6 +14,7 @@ import { XpackComponent } from '@/components/plugin'
 import { propTypes } from '@/utils/propTypes'
 import { setTitle } from '@/utils/utils'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
+import { filterEnumMapSync } from '@/utils/componentUtils'

 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
@@ -96,7 +97,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
  req(
    dvId,
    dvType,
-    function ({
+    async function ({
      canvasDataResult,
      canvasStyleResult,
      dvInfo,
@@ -104,17 +105,18 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
      curPreviewGap
    }) {
      if (!dvInfo.mobileLayout && dvType === 'dashboard') {
-        router.push('/DashboardEmpty')
+        await router.push('/DashboardEmpty')
        return
      }
+      if (jumpParam) {
+        await filterEnumMapSync(canvasDataResult)
+        dvMainStore.addViewTrackFilter(jumpParam)
+      }
      state.canvasDataPreview = canvasDataResult
      state.canvasStylePreview = canvasStyleResult
      state.canvasViewInfoPreview = canvasViewInfoPreview
      state.dvInfo = dvInfo
      state.curPreviewGap = curPreviewGap
-      if (jumpParam) {
-        dvMainStore.addViewTrackFilter(jumpParam)
-      }
      state.initState = false

      dvMainStore.addOuterParamsFilter(attachParam)