点击列表高亮

src/store/llinkPrediction/index.js

@@ -201,6 +201,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     curSelecedGroupIds: [],
     communityDetailNodeList: [],
     timeList: [],
+    // 当前需要高亮的用户id
+    curHighlightUserIdList: [],
     // 记录点击边的时序列表
     clickEdgeTimeList: [],
     statisticsList: [

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>
 

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>