diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js index 47932d4..e9e13aa 100644 --- a/src/service/api/linkPrediction.js +++ b/src/service/api/linkPrediction.js @@ -68,11 +68,22 @@ export function getSocialCommunityList() { return http.get(`/linkPrediction/triangle/community`) } -// 社交紧密团体中社团内的 - +// 社交紧密团体中社团内的社团内部节点 从用户组中点击，只显示这两个用户的关系 +export function getSocialCommunityDetailFromUserGroup( + relationId, + time = "2024-05-16 16:56:04" +) { + return http.get(`/linkPrediction/user_detail?relationId=${relationId}&time=${time}`) +} // 社交紧密团体的社团内部节点 -export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") { - return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`) +export function getSocialCommunityDetailNodes(ids, relationId, time = "2024-05-16 16:56:04") { + if (relationId != -1) { + return http.get( + `/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}&relationId=${relationId}` + ) + } else { + return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`) + } } //获取人物社交隐关系预测社团节点 diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js index 9fdb024..c575f80 100644 --- a/src/store/llinkPrediction/index.js +++ b/src/store/llinkPrediction/index.js @@ -221,11 +221,17 @@ export const useSocialGroupsStore = defineStore("socialGroups", { curComponent: "CommunityNode", curSelecedGroupIds: [], communityDetailNodeList: [], + // 社交紧密团体的所有用户 + communityAllNodeList: [], timeList: [], // 当前需要高亮的用户id curHighlightUserIdList: [], + // 当前的relationId + curRelationId: "", // 记录点击边的时序列表 clickEdgeTimeList: [], + // 记录是从边点的还是列表项中的点击 + clickEvent: "list", // list 表示从列表项点的， edge 表示从边点的 statisticsList: [ { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" }, { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" }, @@ -451,15 +457,29 @@ export const useSocialGroupsStore = defineStore("socialGroups", { })) }, // 传递社交团体的数组，获取其详情 - async initGraphCommunityDetailNode(ids, 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 getSocialCommunityDetailNodes(ids, time) + const res = await getSocialCommunityDetailNodes(ids, relationId, time) if (res.code != 200) return + console.log("index.js:",res.data) + const customStatisticsObj = Object.assign({}, res.data.communityStatistics) + //计算两个用户是否同属与同一个社团 + if ( + customStatisticsObj.groupCount == null && + customStatisticsObj.hiddenInteractionCount == null + ) { + customStatisticsObj.hiddenInteractionCount = 1 + customStatisticsObj.groupCount = ids[0] === ids[1] ? 1 : 3 + } + this.statisticsDetailList = this.statisticsDetailList.map((item) => ({ ...item, - count: res.data.communityStatistics[item.key] + count: customStatisticsObj[item.key] })) + // 设置社交紧密团体的所有用户id + this.communityAllNodeList = res.data.userList this.communityDetailNodeList = res.data.userRelation + this.curHighlightUserIdList = res.data.predictNodes }, // 修改timeList @@ -468,10 +488,10 @@ export const useSocialGroupsStore = defineStore("socialGroups", { }, // 点击边，先获取需要的timeList async getClickEdgeTimeList(ids, time = "2024-05-16 16:56:04") { - const res = await getSocialCommunityDetailNodes(ids, time) + const relationId = -1 + const res = await getSocialCommunityDetailNodes(ids, relationId, time) if (res.code != 200) return console.log("3.获取边中的timelist并设置成它") - this.curHighlightUserIdList = res.data.predictNodes this.setTimeList(res.data.timeList) } }, diff --git a/src/views/LinkPrediction/socialGroups/components/detailNode.vue b/src/views/LinkPrediction/socialGroups/components/detailNode.vue index 752fd32..46720b2 100644 --- a/src/views/LinkPrediction/socialGroups/components/detailNode.vue +++ b/src/views/LinkPrediction/socialGroups/components/detailNode.vue @@ -26,10 +26,10 @@ >
+ > +
@@ -61,6 +61,9 @@ const socialGroupsStore = useSocialGroupsStore() const { communityDetailNodeList } = storeToRefs(socialGroupsStore) const { timeList } = storeToRefs(socialGroupsStore) const { curHighlightUserIdList } = storeToRefs(socialGroupsStore) +// 用于监听是从 列表 点进来的还是从 边 点进来的 +const { clickEvent } = storeToRefs(socialGroupsStore) + const chartsData = ref({}) const emit = defineEmits(["click:goback"]) @@ -82,11 +85,14 @@ watch( (newHiglightUserIdList) => { if(newHiglightUserIdList.length!=0) { nextTick(()=> { - console.log(newHiglightUserIdList) highLightUserNodes(newHiglightUserIdList) }) } - } + }, + { + deep: true, + immediate: true + } ) // 时间轴相关数据 @@ -135,9 +141,9 @@ watch(timePointsWithPositions, (newTimePoints) => { }, { immediate: true }) // 判断当前时间点是否激活 -const isTimeSignActive = (timeStr) => { +/* const isTimeSignActive = (timeStr) => { return new Date(timeStr).getTime() === currentTime.value.getTime() -} +} */ // 添加时间点点击事件处理函数 const handleTimePointClick = (timeStr) => { @@ -170,7 +176,11 @@ const handlePointerDown = (e) => { // 点击后输出当前时间 const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss") - socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes) + if(socialGroupsStore.curRelationId === "") { + socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes) + } else { + socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes, socialGroupsStore.curRelationId) + } } // 时间点指针按下事件 @@ -195,7 +205,11 @@ const handlePointPointerDown = (e) => { isDragging.value = false // 拖动结束时输出当前时间 const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss") - socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes) + if(socialGroupsStore.curRelationId === "") { + socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes) + } else { + socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes, socialGroupsStore.curRelationId) + } document.removeEventListener("pointermove", handlePointerMove) document.removeEventListener("pointerup", handlePointerUp) @@ -234,30 +248,36 @@ const initChart = async () => { else return 1 } if (!Object.keys(socialGroupsStore.communityDetailNodeList).length) return - Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => { + // 先获取到所有节点 + socialGroupsStore.communityAllNodeList.forEach((item) => { nodes.push({ - id: `parent_${parentId}`, - name: parentId + id: item.userId, + name: item.userName, + symbolSize: 40, + postNum: item.postNum, + fancy: item.fans }) + }) + Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => { children.forEach((child) => { - if (!nodes.some((n) => n.id === child.id)) { - nodes.push(child) - } links.push({ - source: `parent_${parentId}`, + source: parentId, target: child.id, edge: child.isHidden ? 1 : 0, interactionTimes: child.interactionTime, lineStyle: { width: child.isHidden ? 4 : edgeWidth(child.interactionTime), - color: child.isHidden ? "#37ACD7" : "#37ACD7", // 无互动=灰色，有互动=黄色 + color: child.isHidden ? "#FF5E00" : "#37ACD7", // 无互动=灰色，有互动=黄色 type: child.isHidden ? "dashed" : "solid" // 无互动=实线，有互动=虚线 } }) + + }) }) - if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) { + // 强行加边 + /* if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) { // 获取timeList的最后一个时间 const lastTimeStr = Array.isArray(timeList.value) && timeList.value.length > 0 ? timeList.value[timeList.value.length - 1] @@ -296,7 +316,7 @@ const initChart = async () => { } } } - } + } */ chartsData.value = { links, nodes } const data = { links, nodes } @@ -385,7 +405,8 @@ const initChart = async () => { flex-direction: column; ">
-
用户ID：${params.data.id}
+
用户名：${params.data.id}
+
用户名：${params.data.name}
` } @@ -396,7 +417,7 @@ const initChart = async () => { show: false, position: "middle", formatter: function (params) { - return params.data.interactionTimes + return `${params.data.interactionTimes}次互动` }, fontSize: 14 }, @@ -477,7 +498,9 @@ const highLightUserNodes = (newHiglightUserIdList) => { setTimeout(() => { //等待所有节点添加完毕后再查找 newHiglightUserIdList.forEach((id) => { - const index = chartsData.value.nodes.findIndex((node) => node.id === `parent_${id}`) + const index = chartsData.value.nodes.findIndex((node) => node.id === id) + console.log(index); + if (index != -1) { chart.dispatchAction({ type: "highlight", @@ -619,10 +642,7 @@ onMounted(() => { height: 30px; background: transparent; } - &.active { - opacity: 0; - pointer-events: none; - } + } .active-sign { position: relative; diff --git a/src/views/LinkPrediction/socialGroups/components/graph.vue b/src/views/LinkPrediction/socialGroups/components/graph.vue index acec173..8cfa4e6 100644 --- a/src/views/LinkPrediction/socialGroups/components/graph.vue +++ b/src/views/LinkPrediction/socialGroups/components/graph.vue @@ -31,16 +31,19 @@ const handleClickNode = async (nodeInfo) => { // 点击节点 socialGroupsStore.initGraphCommunityDetailNode([nodeInfo.id]) socialGroupsStore.curComponent = "detailNode" + socialGroupsStore.curRelationId = "" } const handleClickEdge = async (edgeInfo) => { console.log("点击边"); socialGroupsStore.curComponent = "detailNode" + socialGroupsStore.clickEvent = "edge" + socialGroupsStore.curRelationId = "" // 先设置socialGroupsStore.clickEdgeTimeList - console.log("1.初始化获取边中的详情节点-initGraphCommunityDetailNode"); - await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target]) - console.log("2.获取边中的timelist并设置"); await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target]) + const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1] + await 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 a908e2f..2438222 100644 --- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue +++ b/src/views/LinkPrediction/socialGroups/components/userPanel.vue @@ -59,7 +59,7 @@ const props = defineProps({ default: 480 } }); - +// ssss const handleUserItem = (index, group = {}) => { curUserGroupIndex.value = index; // 设置需要高亮的用户id diff --git a/src/views/LinkPrediction/socialGroups/index.vue b/src/views/LinkPrediction/socialGroups/index.vue index 11380e1..7725097 100644 --- a/src/views/LinkPrediction/socialGroups/index.vue +++ b/src/views/LinkPrediction/socialGroups/index.vue @@ -81,12 +81,16 @@ const postDialog = ref(false); //当前选中的贴文数据 const currentPostPost = ref(null); +// 列表项的点击事件 const handleSelectedUserGroup = (group) => { socialGroupsStore.curComponent = "detailkNode" + socialGroupsStore.clickEvent = "list" + console.log("点击列表group：",group) const groupIds = group.list.map((item)=>item.groupId) + socialGroupsStore.curRelationId = group.relationId //保存当前点击的relationid，为了区分到底是从哪点进二级界面的 const length = group.timeList.length const lastTime = group.timeList[length - 1] - socialGroupsStore.initGraphCommunityDetailNode(groupIds, lastTime) + socialGroupsStore.initGraphCommunityDetailNode(groupIds, lastTime, group.relationId) socialGroupsStore.setTimeList(group.timeList) socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId) };