Merge pull request #10213 from dataease/pr@dev-v2@feat_linkage_hightlight2

feat(仪表板): 联动维度支持点击后高亮显示 #9848

core/core-frontend/src/components/visualization/CanvasOptBar.vue

@@ -15,6 +15,7 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { computed } from 'vue'
 import { isMainCanvas } from '@/utils/canvasUtils'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const dvMainStore = dvMainStoreWithOut()
 
@@ -36,6 +37,7 @@ const props = defineProps({
 
 const clearAllLinkage = () => {
   dvMainStore.clearPanelLinkageInfo()
+  useEmitt().emitter.emit('clearPanelLinkage', { viewId: 'all' })
 }
 
 const dvEditMode = computed(() => {

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -479,6 +479,7 @@ const existLinkage = computed(() => {
 // 清除相同sourceViewId 的 联动条件
 const clearLinkage = () => {
   dvMainStore.clearViewLinkage(element.value.id)
+  useEmitt().emitter.emit('clearPanelLinkage', { viewId: element.value.id })
 }
 
 // 富文本-Begin

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -1,5 +1,14 @@
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref, shallowRef, toRefs } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  shallowRef,
+  toRefs
+} from 'vue'
 import { getData } from '@/api/chart'
 import { ChartLibraryType } from '@/views/chart/components/js/panel/types'
 import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot'
@@ -68,6 +77,8 @@ const { view, showPosition, scale, terminal } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
+const linkageActiveHistory = ref(false)
+const antVRenderStatus = ref(false)
 
 const state = reactive({
   trackBarStyle: {
@@ -86,6 +97,52 @@ let chartData = shallowRef<Partial<Chart['data']>>({
 const containerId = 'container-' + showPosition.value + '-' + view.value.id
 const viewTrack = ref(null)
 
+const clearLinkage = () => {
+  linkageActiveHistory.value = false
+  myChart?.setState('active', () => true, false)
+  myChart?.setState('inactive', () => true, false)
+  myChart?.setState('selected', () => true, false)
+}
+const reDrawView = () => {
+  linkageActiveHistory.value = false
+  myChart?.render()
+}
+const linkageActivePre = () => {
+  if (linkageActiveHistory.value) {
+    reDrawView()
+  }
+  nextTick(() => {
+    linkageActive()
+  })
+}
+const linkageActive = () => {
+  linkageActiveHistory.value = true
+  myChart?.setState('selected', param => {
+    if (Array.isArray(param)) {
+      return false
+    } else {
+      if (checkSelected(param)) {
+        return true
+      }
+    }
+  })
+  myChart?.setState('inactive', param => {
+    if (Array.isArray(param)) {
+      return false
+    } else {
+      if (!checkSelected(param)) {
+        return true
+      }
+    }
+  })
+}
+const checkSelected = param => {
+  return (
+    state.linkageActiveParam.name.indexOf(param.name) > -1 &&
+    state.linkageActiveParam.category === param.category
+  )
+}
+
 const calcData = async (view, callback) => {
   if (view.tableId || view['dataFrom'] === 'template') {
     isError.value = false
@@ -165,6 +222,9 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
     quadrantDefaultBaseline
   })
   myChart?.render()
+  if (linkageActiveHistory.value) {
+    linkageActive()
+  }
 }
 
 const dynamicAreaId = ref('')
@@ -325,6 +385,7 @@ const trackClick = trackAction => {
       emit('onChartClick', param)
       break
     case 'linkage':
+      linkageActivePre()
       dvMainStore.addViewTrackFilter(linkageParam)
       break
     case 'jump':
@@ -376,7 +437,8 @@ const quadrantDefaultBaseline = defaultQuadrant => {
 defineExpose({
   calcData,
   renderChart,
-  trackMenu
+  trackMenu,
+  clearLinkage
 })
 let resizeObserver
 const TOLERANCE = 0.01

core/core-frontend/src/views/chart/components/views/index.vue

@@ -203,6 +203,7 @@ const buildInnerRefreshTimer = (
 // 清除相同sourceViewId 的 联动条件
 const clearViewLinkage = () => {
   dvMainStore.clearViewLinkage(element.value.id)
+  useEmitt().emitter.emit('clearPanelLinkage', { viewId: element.value.id })
 }
 
 watch(
@@ -501,6 +502,14 @@ onMounted(() => {
   if (!listenerEnable.value) {
     return
   }
+  useEmitt({
+    name: 'clearPanelLinkage',
+    callback: function (param) {
+      if (param.viewId === 'all' || param.viewId === element.value.id) {
+        chartComponent?.value?.clearLinkage()
+      }
+    }
+  })
   useEmitt({
     name: 'snapshotChangeToView',
     callback: function (cacheViewInfo) {