From 37018a97ffbe69065ab93a726d1c93f43706aab8 Mon Sep 17 00:00:00 2001
From: duanhao <dh14779715518@163.com>
Date: Wed, 30 Jul 2025 13:18:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=88=97=E8=A1=A8=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/llinkPrediction/index.js            |  2 +
 .../socialGroups/components/detailNode.vue    | 41 ++++++++++++++++++-
 .../socialGroups/components/userPanel.vue     |  4 ++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js
index c6b0f48..7820d81 100644
--- a/src/store/llinkPrediction/index.js
+++ b/src/store/llinkPrediction/index.js
@@ -201,6 +201,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     curSelecedGroupIds: [],
     communityDetailNodeList: [],
     timeList: [],
+    // 当前需要高亮的用户id
+    curHighlightUserIdList: [],
     // 记录点击边的时序列表
     clickEdgeTimeList: [],
     statisticsList: [
diff --git a/src/views/LinkPrediction/socialGroups/components/detailNode.vue b/src/views/LinkPrediction/socialGroups/components/detailNode.vue
index 4cee39e..9b87d6c 100644
--- a/src/views/LinkPrediction/socialGroups/components/detailNode.vue
+++ b/src/views/LinkPrediction/socialGroups/components/detailNode.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-import { defineEmits, onMounted, ref, onUnmounted, computed, watch } from "vue"
+import { defineEmits, onMounted, ref, onUnmounted, computed, watch, nextTick } from "vue"
 import { TansTimestamp } from "@/utils/transform"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 import * as echarts from "echarts"
@@ -60,6 +60,9 @@ import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
 const socialGroupsStore = useSocialGroupsStore()
 const { communityDetailNodeList } = storeToRefs(socialGroupsStore)
 const { timeList } = storeToRefs(socialGroupsStore)
+const { curHighlightUserIdList } = storeToRefs(socialGroupsStore)
+const chartsData = ref({})
+
 const emit = defineEmits(["click:goback"])
 const handleGoback = () => {
   emit("click:goback", "CommunityNode")
@@ -73,6 +76,18 @@ watch(
   },
   { deep: true }
 )
+// 监听需要高亮的用户id
+watch(
+  curHighlightUserIdList,
+  (newHiglightUserIdList) => {
+    if(newHiglightUserIdList.length!=0) {
+      nextTick(()=> {
+        console.log(newHiglightUserIdList)
+        highLightUserNodes(newHiglightUserIdList)
+      })
+    }
+  }
+)
 
 // 时间轴相关数据
 const startTime = ref(new Date("2024-05-16 16:56:04"))
@@ -238,6 +253,8 @@ const initChart = async () => {
       })
     })
   })
+
+  chartsData.value = { links, nodes }
   const data = { links, nodes }
 
   const categories = [
@@ -406,6 +423,27 @@ const initChart = async () => {
   chart.setOption(option)
 }
 
+const highLightUserNodes = (newHiglightUserIdList) => {
+  if (!newHiglightUserIdList) return
+  chart.dispatchAction({
+    type: "downplay",
+    seriesIndex: 0
+  })
+
+  setTimeout(() => {
+    //等待所有节点添加完毕后再查找
+    newHiglightUserIdList.forEach((id) => {
+      const index = chartsData.value.nodes.findIndex((node) => node.id === id)
+      if (index != -1) {
+        chart.dispatchAction({
+          type: "highlight",
+          dataIndex: index
+        })
+      }
+    })
+  }, 1000)
+}
+
 onMounted(() => {
   initChart()
   chart.on("legendselectchanged", function (params) {
@@ -414,6 +452,7 @@ onMounted(() => {
       chart.resize()
     }, 0)
   })
+  highLightUserNodes()
 })
 </script>
 
diff --git a/src/views/LinkPrediction/socialGroups/components/userPanel.vue b/src/views/LinkPrediction/socialGroups/components/userPanel.vue
index 85d4afb..24baaa9 100644
--- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue
+++ b/src/views/LinkPrediction/socialGroups/components/userPanel.vue
@@ -40,6 +40,8 @@
 <script setup>
 import { defineProps, defineEmits, ref } from "vue";
 import defaultAvatar from "@/assets/images/avatar/default.png";
+import { useSocialGroupsStore } from "@/store/llinkPrediction/index";
+const socialGroupsStore = useSocialGroupsStore()
 const curUserGroupIndex = ref(0);
 const emit = defineEmits(["click:selectedGroup"]);
 const props = defineProps({
@@ -61,6 +63,8 @@ const handleUserItem = (index, group = {}) => {
   curUserGroupIndex.value = index;
   // console.log("点击用户列表中的item",index);
   console.log("点击用户列表中的item",group);
+  // 设置需要高亮的用户id
+  socialGroupsStore.curHighlightUserIdList = group.list.map((item)=>item.userId)
   emit("click:selectedGroup", group);
 };
 </script>