From 1ba0202ce955f9939b014b3c021692b4bf60f89f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 12 Jun 2024 12:50:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E8=81=94?=
 =?UTF-8?q?=E5=8A=A8=E7=BB=B4=E5=BA=A6=E6=94=AF=E6=8C=81=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=90=8E=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=20#9848?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/visualization/CanvasOptBar.vue |  2 +
 .../visualization/ComponentEditBar.vue        |  1 +
 .../views/components/ChartComponentG2Plot.vue | 66 ++++++++++++++++++-
 .../views/chart/components/views/index.vue    |  9 +++
 4 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/core/core-frontend/src/components/visualization/CanvasOptBar.vue b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
index c14c9d9a47..04b81c8620 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/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(() => {
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 58de99e82a..65e3e8e5a4 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/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
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index dea867602a..1d434bab1d 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/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':
@@ -373,7 +434,8 @@ const quadrantDefaultBaseline = defaultQuadrant => {
 defineExpose({
   calcData,
   renderChart,
-  trackMenu
+  trackMenu,
+  clearLinkage
 })
 let resizeObserver
 const TOLERANCE = 0.01
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 52443ebec1..8181202335 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/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) {