diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js index 7820d81..079a3f7 100644 --- a/src/store/llinkPrediction/index.js +++ b/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 // 开启持久化 diff --git a/src/views/LinkPrediction/socialGroups/components/detailNode.vue b/src/views/LinkPrediction/socialGroups/components/detailNode.vue index 9b87d6c..752fd32 100644 --- a/src/views/LinkPrediction/socialGroups/components/detailNode.vue +++ b/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() + }) diff --git a/src/views/LinkPrediction/socialGroups/components/graph.vue b/src/views/LinkPrediction/socialGroups/components/graph.vue index 2722d6f..acec173 100644 --- a/src/views/LinkPrediction/socialGroups/components/graph.vue +++ b/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) => { diff --git a/src/views/LinkPrediction/socialGroups/components/userPanel.vue b/src/views/LinkPrediction/socialGroups/components/userPanel.vue index 24baaa9..0664451 100644 --- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue +++ b/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);