diff --git a/src/assets/images/linkPrediction/icon/triangle-piont.png b/src/assets/images/linkPrediction/icon/triangle-piont.png new file mode 100644 index 0000000..3dc7966 Binary files /dev/null and b/src/assets/images/linkPrediction/icon/triangle-piont.png differ diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js index 5d918cf..d950d77 100644 --- a/src/service/api/linkPrediction.js +++ b/src/service/api/linkPrediction.js @@ -14,7 +14,7 @@ export function getInteractionCommunityNodes() { export function getInteractionCommunityDetailNodes(ids, relationId, time = "2024-05-16 16:56:04") { if (relationId != -1) { return http.get( - `/linkPrediction/interaction/community_detail?groupIds=${ids}&relationId=${relationId}&dateTime=${time}` + `/linkPrediction/interaction/community_detail?groupIds=${ids}&dateTime=${time}&relationId=${relationId}` ) } else { return http.get(`/linkPrediction/interaction/community_detail?groupIds=${ids}&dateTime=${time}`) diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js index 5df1832..58b46eb 100644 --- a/src/store/llinkPrediction/index.js +++ b/src/store/llinkPrediction/index.js @@ -11,8 +11,7 @@ import { getSocialCommunityList, getSocialCommunityStatistics, getSocialCommunityDetailNodes, - getSocialPostListByRelationId, - getInteractionCommunityDetailFromUserGroup + getSocialPostListByRelationId } from "@/service/api/linkPrediction" import defaultAvatar from "@/assets/images/avatar/default.png" @@ -33,6 +32,7 @@ export const useCharacterInteractionStore = defineStore("characterInteraction", communityDetailNodeList: [], //节点用户列表 timeList: [], predictionUserIds: [], //包含从用户组选择的用户id或者是点击某个社团或者连边后,所需要高亮的所有用户的id + curRelationId: "", anlysisList: [ { id: 1, @@ -175,13 +175,24 @@ export const useCharacterInteractionStore = defineStore("characterInteraction", if (res.code != 200) return this.communityNodeList = res.data }, - async initGraphCommunityDetailNode(ids, relationId = -1, time = "2024-05-16 16:56:04") { + async initGraphCommunityDetailNode(ids, time = "2024-05-16 16:56:04", relationId = -1) { this.curSelecedGroupIds = ids const res = await getInteractionCommunityDetailNodes(ids, relationId, time) if (res.code != 200) return + const customStatisticsObj = Object.assign({}, res.data.communityStatistics) + //计算两个用户是否同属与同一个社团 + + if ( + customStatisticsObj.groupCount == null && + customStatisticsObj.hiddenInteractionCount == null + ) { + customStatisticsObj.hiddenInteractionCount = 1 + customStatisticsObj.groupCount = ids[0] === ids[1] ? 1 : 2 + } + this.statisticsDetailList = this.statisticsDetailList.map((item) => ({ ...item, - count: res.data.communityStatistics[item.key] + count: customStatisticsObj[item.key] })) this.communityDetailNodeRelation = res.data.userRelation this.communityDetailNodeList = res.data.userList diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue index 4aff974..72b946e 100644 --- a/src/views/LinkPrediction/characterInteraction/index.vue +++ b/src/views/LinkPrediction/characterInteraction/index.vue @@ -54,11 +54,12 @@ const handleSelectedUserGroup = (group) => { interactionStore.curComponent = "detailNode" interactionStore.timeList = group.timeList //保存从用户列表选择的用户组,为了显示这两个用户交互的时间切片 interactionStore.userIds = group.list.map((user) => user.userId) //保存选中的用户组的所有用户id,为了高亮二级关系图的用户 + interactionStore.curRelationId = group.relationId //保存当前点击的relationid,为了区分到底是从哪点进二级界面的 interactionStore.initInteractionPostList(group.relationId) interactionStore.initGraphCommunityDetailNode( group.list.map((item) => item.groupId), - group.relationId, - "2024-05-16 16:56:04" + "2024-05-16 16:56:04", + group.relationId ) } diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue index d9795b3..d5f3812 100644 --- a/src/views/LinkPrediction/components/detailNode.vue +++ b/src/views/LinkPrediction/components/detailNode.vue @@ -16,21 +16,36 @@
{{ TansTimestamp(startTime, "YYYY.MM.DD HH:mm:ss") }}
-
+ :content="TansTimestamp(time, 'YYYY.MM.DD HH:mm:ss')" + placement="bottom" + effect="light" + > +
+ +
-
-
+
+ +
+
+ -
+
@@ -100,6 +115,16 @@ const getTimeSectionLeft = computed(() => { } }) +// 让 active-needle 标定在 timeList 最后一个时间点 +const showHidden = computed(() => { + if (!timeList.value || timeList.value.length === 0) return {} + // 取最后一个时间点 + const lastTime = timeList.value[timeList.value.length - 1] + // 计算 left 位置 + const left = getTimeSectionLeft.value(lastTime) + 5 // +5px 保持和 time-section 对齐 + return { left: `${left}px` } +}) + // 根据位置计算时间 const getTimeFromPosition = (position) => { const ratio = Math.max(0, Math.min(1, position / axisWidth)) @@ -119,7 +144,15 @@ const handlePointerDown = (e) => { // 点击后输出当前时间 const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss") - interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes) + if (interactionStore.curRelationId == "") { + interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes) + } else { + interactionStore.initGraphCommunityDetailNode( + interactionStore.curSelecedGroupIds, + currentTimes, + interactionStore.curRelationId + ) + } } // 时间点指针按下事件 @@ -144,7 +177,18 @@ const handlePointPointerDown = (e) => { isDragging.value = false // 拖动结束时输出当前时间 const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss") - interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes) + if (interactionStore.curRelationId == "") { + interactionStore.initGraphCommunityDetailNode( + interactionStore.curSelecedGroupIds, + currentTimes + ) + } else { + interactionStore.initGraphCommunityDetailNode( + interactionStore.curSelecedGroupIds, + currentTimes, + interactionStore.curRelationId + ) + } document.removeEventListener("pointermove", handlePointerMove) document.removeEventListener("pointerup", handlePointerUp) @@ -518,7 +562,7 @@ onMounted(() => { height: 34px; background-image: url("@/assets/images/point.png"); background-size: cover; - bottom: 1px; + bottom: -8px; left: -11px; position: absolute; } diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue index a19b1de..c81380e 100644 --- a/src/views/LinkPrediction/components/graph.vue +++ b/src/views/LinkPrediction/components/graph.vue @@ -27,11 +27,13 @@ const props = defineProps({ //点击社团节点 const handleClickNode = async (nodeInfo) => { interactionStore.curComponent = "detailNode" + interactionStore.curRelationId = "" interactionStore.initGraphCommunityDetailNode([nodeInfo.id]) } //点击社团边 const handleClickEdge = (edgeInfo) => { interactionStore.curComponent = "detailNode" + interactionStore.curRelationId = "" interactionStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target]) } diff --git a/src/views/LinkPrediction/components/userPanel.vue b/src/views/LinkPrediction/components/userPanel.vue index 73f7e36..76959a4 100644 --- a/src/views/LinkPrediction/components/userPanel.vue +++ b/src/views/LinkPrediction/components/userPanel.vue @@ -13,7 +13,7 @@
TOP{{ group.rank }}
- +