社交紧密高亮修复

src/store/llinkPrediction/index.js

@@ -446,8 +446,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         ...item,
         count: res.data.communityStatistics[item.key]
       }))
-      console.log("打印社交团体详情：");
-      console.log(res.data);
+      console.log("initGraphCommunityDetailNode:")
+      console.log(res.data)
       this.communityDetailNodeList = res.data.userRelation
     },
 
@@ -459,8 +459,9 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     async getClickEdgeTimeList(ids, time = "2024-05-16 16:56:04") {
       const res = await getSocialCommunityDetailNodes(ids, time)
       if (res.code != 200) return
-      this.clickEdgeTimeList = res.data.timeList
-      console.log("打印clickEdgeTimeList:",this.clickEdgeTimeList)
+      console.log("3.获取边中的timelist并设置成它");
+      this.curHighlightUserIdList = res.data.predictNodes
+      this.setTimeList(res.data.timeList)
     }
   },
   persist: true // 开启持久化

src/views/LinkPrediction/socialGroups/components/detailNode.vue

@@ -119,13 +119,16 @@ const timePointsWithPositions = computed(() => {
   })
 })
 
+watch(timeList, (newList) => {
+  console.log("🔥 timeList 被更新了：", newList)
+})
+
 // watch来监听timeList变化并设置初始值
 watch(timePointsWithPositions, (newTimePoints) => {
   if (newTimePoints && newTimePoints.length > 0) {
     const lastTimePoint = newTimePoints[newTimePoints.length - 1]
     currentTime.value = lastTimePoint.time
     currentPosition.value = lastTimePoint.position
-    
     // 触发图更新
     const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
   }
@@ -247,13 +250,54 @@ const initChart = async () => {
         interactionTimes: child.interactionTime,
         lineStyle: {
           width: child.isHidden ? 4 : edgeWidth(child.interactionTime),
-          color: child.isHidden ? "#FF5E00" : "#37ACD7", // 无互动=灰色，有互动=黄色
+          color: child.isHidden ? "#37ACD7" : "#37ACD7", // 无互动=灰色，有互动=黄色
           type: child.isHidden ? "dashed" : "solid" // 无互动=实线，有互动=虚线
         }
       })
     })
   })
 
+  if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) {
+    // 获取timeList的最后一个时间
+    const lastTimeStr = Array.isArray(timeList.value) && timeList.value.length > 0 
+      ? timeList.value[timeList.value.length - 1] 
+      : null;
+    if (lastTimeStr) {
+      const lastTime = new Date(lastTimeStr).getTime();
+      const currentTimeMs = currentTime.value.getTime();
+      
+      // 检查当前时间是否大于等于最后一个时间点
+      if (currentTimeMs >= lastTime) {
+        // 在每两个高亮节点之间添加连边
+        const highlightNodes = curHighlightUserIdList.value;
+        for (let i = 0; i < highlightNodes.length; i++) {
+          for (let j = i + 1; j < highlightNodes.length; j++) {
+            const sourceId = `parent_${highlightNodes[i]}`;
+            const targetId = `parent_${highlightNodes[j]}`;
+            
+            // 检查这两个节点是否存在于nodes中
+            const sourceExists = nodes.some(n => n.id === sourceId);
+            const targetExists = nodes.some(n => n.id === targetId);
+            
+            if (sourceExists && targetExists) {
+              links.push({
+                source: sourceId,
+                target: targetId,
+                edge: 1,
+                interactionTimes: 0,
+                lineStyle: {
+                  width: 4,
+                  color: "#FF5E00",
+                  type: "dashed"
+                }
+              });
+            }
+          }
+        }
+      }
+    }
+  }
+
   chartsData.value = { links, nodes }
   const data = { links, nodes }
 
@@ -407,7 +451,7 @@ const initChart = async () => {
               shadowBlur: 20,
               shadowColor: "#c4a651",
               borderColor: "#fcd267",
-              borderWidth: 1,
+              borderWidth: 5,
               borderType: "solid"
             }
           }
@@ -433,7 +477,7 @@ const highLightUserNodes = (newHiglightUserIdList) => {
   setTimeout(() => {
     //等待所有节点添加完毕后再查找
     newHiglightUserIdList.forEach((id) => {
-      const index = chartsData.value.nodes.findIndex((node) => node.id === id)
+      const index = chartsData.value.nodes.findIndex((node) => node.id === `parent_${id}`)
       if (index != -1) {
         chart.dispatchAction({
           type: "highlight",
@@ -453,6 +497,7 @@ onMounted(() => {
     }, 0)
   })
   highLightUserNodes()
+  
 })
 </script>
 

src/views/LinkPrediction/socialGroups/components/graph.vue

@@ -34,13 +34,13 @@ const handleClickNode = async (nodeInfo) => {
 }
 
 const handleClickEdge = async (edgeInfo) => {
+  console.log("点击边");
   socialGroupsStore.curComponent = "detailNode"
   // 先设置socialGroupsStore.clickEdgeTimeList
+  console.log("1.初始化获取边中的详情节点-initGraphCommunityDetailNode");
+  await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target])
+  console.log("2.获取边中的timelist并设置");
   await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
-  // 点击边时，需要将timeList设置成clickEdgeTimeList
-  socialGroupsStore.setTimeList(socialGroupsStore.clickEdgeTimeList)
-  const lastTime = socialGroupsStore.clickEdgeTimeList[socialGroupsStore.clickEdgeTimeList?.length - 1]
-  socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
 }
 
 const handleClickGoBack = (currentComponentName) => {

src/views/LinkPrediction/socialGroups/components/userPanel.vue

@@ -61,8 +61,6 @@ const props = defineProps({
 
 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);