This commit is contained in:
qumeng039@126.com 2025-07-30 11:23:21 +08:00
commit 5791649128
7 changed files with 54 additions and 38 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 B

View File

@ -39,9 +39,9 @@ export function getInteractionPostList(userGroupId) {
} }
//社交紧密团体识别的贴文列表 //社交紧密团体识别的贴文列表
export function getSocialPostList(outoIncrement) { /* export function getSocialPostList(outoIncrement) {
return http.get(`/linkPrediction/triangle/post_list?page=${outoIncrement}`) return http.get(`/linkPrediction/triangle/post_list?page=${outoIncrement}`)
} } */
// 社交紧密团体的对应紧密关系的帖文--根据relationId来查找 // 社交紧密团体的对应紧密关系的帖文--根据relationId来查找
export function getSocialPostListByRelationId(relationId) { export function getSocialPostListByRelationId(relationId) {
return http.get(`/linkPrediction/user_posts_list?relationId=${relationId}`) return http.get(`/linkPrediction/user_posts_list?relationId=${relationId}`)
@ -56,6 +56,8 @@ export function getSocialCommunityList() {
return http.get(`/linkPrediction/triangle/community`) return http.get(`/linkPrediction/triangle/community`)
} }
// 社交紧密团体中社团内的
// 社交紧密团体的社团内部节点 // 社交紧密团体的社团内部节点
export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") { export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") {
return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`) return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`)

View File

@ -4,7 +4,6 @@ import {
getGroupUserListFromTriangle, getGroupUserListFromTriangle,
getGroupUserListFromSocial, getGroupUserListFromSocial,
getInteractionPostList, getInteractionPostList,
getSocialPostList,
getInteractionHiddenPostList, getInteractionHiddenPostList,
getInteractionCommunityNodes, getInteractionCommunityNodes,
getInteractionCommunityDetailNodes, getInteractionCommunityDetailNodes,
@ -201,6 +200,7 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
curComponent: "CommunityNode", curComponent: "CommunityNode",
curSelecedGroupIds: [], curSelecedGroupIds: [],
communityDetailNodeList: [], communityDetailNodeList: [],
timeList: [],
statisticsList: [ statisticsList: [
{ id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" }, { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
{ id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" }, { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
@ -396,8 +396,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
this.userList = res.data.userList this.userList = res.data.userList
}, },
// 事件脉络分析中的帖文数据 // 事件脉络分析中的帖文数据
async initPostList(outoIncrement) { async initPostList(relationId) {
const res = await getSocialPostList(outoIncrement) const res = await getSocialPostListByRelationId(relationId)
if (res.code != 200) return if (res.code != 200) return
if (this.posts.length != 0) { if (this.posts.length != 0) {
this.posts.push(...res.data) this.posts.push(...res.data)
@ -442,8 +442,9 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
...item, ...item,
count: res.data.communityStatistics[item.key] count: res.data.communityStatistics[item.key]
})) }))
console.log("打印社交团体详情:") console.log("打印社交团体详情:");
console.log(res.data) console.log(res.data);
this.timeList = res.data.timeList || [];
this.communityDetailNodeList = res.data.userRelation this.communityDetailNodeList = res.data.userRelation
} }
}, },

View File

@ -19,7 +19,13 @@
<div class="progress-bar" :style="trackStyle"></div> <div class="progress-bar" :style="trackStyle"></div>
<div class="active-sign" :style="{ left: `${currentPosition}px` }"> <div class="active-sign" :style="{ left: `${currentPosition}px` }">
<div class="active-needle"></div> <div class="active-needle"></div>
<div class="timeLine-point" @pointerdown.stop="handlePointPointerDown"></div> <el-tooltip
:content="TansTimestamp(currentTime, 'YYYY.MM.DD HH:mm:ss')"
placement="bottom"
effect="light"
>
<div class="timeLine-point" @pointerdown.stop="handlePointPointerDown"></div>
</el-tooltip>
</div> </div>
</div> </div>
<div class="time">{{ TansTimestamp(endTime, "YYYY.MM.DD HH:mm:ss") }}</div> <div class="time">{{ TansTimestamp(endTime, "YYYY.MM.DD HH:mm:ss") }}</div>
@ -110,8 +116,8 @@ const handlePointPointerDown = (e) => {
const handlePointerUp = () => { const handlePointerUp = () => {
isDragging.value = false isDragging.value = false
// //
const currentTimes = TansTimestamp(currentTime.value, "YYYY.MM.DD HH:mm:ss") const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
console.log("拖动结束,当前时间:", currentTimes) socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes)
document.removeEventListener("pointermove", handlePointerMove) document.removeEventListener("pointermove", handlePointerMove)
document.removeEventListener("pointerup", handlePointerUp) document.removeEventListener("pointerup", handlePointerUp)
@ -136,6 +142,7 @@ onUnmounted(() => {
}) })
let chart = null let chart = null
const initChart = async () => { const initChart = async () => {
chart = echarts.init(document.getElementById("container")) chart = echarts.init(document.getElementById("container"))
@ -174,9 +181,17 @@ const initChart = async () => {
const data = { links, nodes } const data = { links, nodes }
const categories = [ const categories = [
{ name: "信息发布者", category: 0, icon: `image://${new URL('@/assets/images/linkPrediction/icon/information-publisher-legend-icon.png', import.meta.url)}` }, { name: "事件活跃者", category: 0, icon: "circle" },
{ name: "互动关系", category: 1, icon: `image://${new URL('@/assets/images/linkPrediction/icon/interactive-relationship-legend-icon.png', import.meta.url)}` }, {
{ name: "紧密团体关系", category: 2, icon: `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}` } name: "互动关系",
category: 1,
icon: `image://${new URL("@/assets/images/linkPrediction/icon/interaction-icon2.png", import.meta.url)}`
},
{
name: "紧密团体关系",
category: 2,
icon: `image://${new URL("@/assets/images/linkPrediction/icon/tight-community-legend-icon.png", import.meta.url)}`
}
] ]
const option = { const option = {
// //
@ -207,8 +222,8 @@ const initChart = async () => {
icon: c.icon icon: c.icon
})), })),
right: 21, right: 21,
symbolKeepAspect: false,
bottom: 70, bottom: 70,
icon: "circle",
orient: "vertical", orient: "vertical",
itemWidth: 16, itemWidth: 16,
itemHeight: 16, itemHeight: 16,
@ -260,7 +275,7 @@ const initChart = async () => {
show: false, show: false,
position: "middle", position: "middle",
formatter: function (params) { formatter: function (params) {
return params.data.edge return params.data.interactionTimes
}, },
fontSize: 14 fontSize: 14
}, },
@ -282,7 +297,7 @@ const initChart = async () => {
animation: false, animation: false,
draggable: true, draggable: true,
roam: true, roam: true,
zoom: 0.3, zoom: 0.15,
categories: categories, categories: categories,
force: { force: {
edgeLength: 2500, edgeLength: 2500,
@ -332,8 +347,13 @@ const initChart = async () => {
} }
onMounted(() => { onMounted(() => {
console.log("statisticsDetailList", socialGroupsStore.statisticsDetailList)
initChart() initChart()
chart.on("legendselectchanged", function (params) {
//
setTimeout(() => {
chart.resize()
}, 0)
})
}) })
</script> </script>
@ -445,7 +465,7 @@ onMounted(() => {
background-image: url("@/assets/images/point.png"); background-image: url("@/assets/images/point.png");
background-size: cover; background-size: cover;
bottom: 1px; bottom: 1px;
left: -6px; left: -11px;
position: absolute; position: absolute;
} }
.timeLine-point { .timeLine-point {
@ -459,6 +479,7 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: -6px; top: -6px;
left: -5px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
will-change: left; will-change: left;

View File

@ -15,7 +15,7 @@
@click="handleLeaderPost(post)" @click="handleLeaderPost(post)"
> >
<img src="@/assets/images/linkPrediction/icon/post-prefix.png" alt="" class="prefix" /> <img src="@/assets/images/linkPrediction/icon/post-prefix.png" alt="" class="prefix" />
<div class="timestamp">{{ TansTimestamp(post.time) }}</div> <div class="timestamp">{{ TansTimestamp(post.interactionTime) }}</div>
<div class="behavior"> <div class="behavior">
{{ post.userName }}{{ post.behavior }} {{ post.neighborName }}的贴文 {{ post.userName }}{{ post.behavior }} {{ post.neighborName }}的贴文
</div> </div>
@ -36,7 +36,7 @@ const props = defineProps({
} }
}); });
const emit = defineEmits(["click:openDialog", "scroll:touchButtom"]); // const emit = defineEmits(["click:openDialog", "scroll:touchButtom"]);
const page = ref(0); const page = ref(0);
const listRef = ref(null); const listRef = ref(null);
@ -44,12 +44,12 @@ const handleScroll = () => {
const el = listRef.value; const el = listRef.value;
if (!el) return; if (!el) return;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 1) { if (el.scrollTop + el.clientHeight >= el.scrollHeight - 1) {
emit("scroll:touchButtom", page.value++); // emit("scroll:touchButtom", page.value++);
} }
}; };
const handleLeaderPost = (item) => { const handleLeaderPost = (item) => {
emit("click:openDialog", item); // emit("click:openDialog", item);
console.log(item); console.log(item);
}; };

View File

@ -13,7 +13,7 @@
src="@/assets/images/linkPrediction/title/group-item-title.png" src="@/assets/images/linkPrediction/title/group-item-title.png"
class="group-type-back" class="group-type-back"
/> />
<div class="group-type-content">Top{{ index+1 }}</div> <div class="group-type-content">TOP{{ index+1 }}</div>
</div> </div>
<div class="user-list-item" v-for="child in group.list" :key="child.id"> <div class="user-list-item" v-for="child in group.list" :key="child.id">
<img :src="defaultAvatar" alt="" class="avatar" /> <img :src="defaultAvatar" alt="" class="avatar" />
@ -60,7 +60,7 @@ const props = defineProps({
const handleUserItem = (index, group = {}) => { const handleUserItem = (index, group = {}) => {
curUserGroupIndex.value = index; curUserGroupIndex.value = index;
// console.log("item",index); // console.log("item",index);
// console.log("item",group); console.log("点击用户列表中的item",group);
emit("click:selectedGroup", group); emit("click:selectedGroup", group);
}; };
</script> </script>

View File

@ -19,8 +19,6 @@
<div class="postList"> <div class="postList">
<PostList <PostList
:posts="socialGroupsStore.posts" :posts="socialGroupsStore.posts"
@click:openDialog="handleOpenPostDialog"
@scroll:touchButtom="handleTouchButtom"
></PostList> ></PostList>
</div> </div>
</div> </div>
@ -37,7 +35,7 @@
</div> </div>
</div> </div>
<el-dialog v-model="postDialog" width="640" align-center class="custom-dialog"> <el-dialog v-if="false" v-model="postDialog" width="640" align-center class="custom-dialog">
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" /> <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
<div class="dialog-content"> <div class="dialog-content">
<div class="post-content">{{ currentPostPost.content }}</div> <div class="post-content">{{ currentPostPost.content }}</div>
@ -86,22 +84,16 @@ const currentPostPost = ref(null);
const handleSelectedUserGroup = (group) => { const handleSelectedUserGroup = (group) => {
socialGroupsStore.curComponent = "detailkNode" socialGroupsStore.curComponent = "detailkNode"
const groupIds = group?.list.map((item)=>item.groupId) const groupIds = group?.list.map((item)=>item.groupId)
socialGroupsStore.initGraphCommunityDetailNode(groupIds) socialGroupsStore.timeList = group?.timeList
const length = socialGroupsStore.timeList.length
const lastTime = socialGroupsStore.timeList[length - 1]
socialGroupsStore.initGraphCommunityDetailNode(groupIds, lastTime)
socialGroupsStore.getSocialGroupPostListByRelationId(group?.relationId) socialGroupsStore.getSocialGroupPostListByRelationId(group?.relationId)
}; };
const handleOpenPostDialog = (post) => {
postDialog.value = true;
currentPostPost.value = post;
};
const handleTouchButtom = (outoIncrement) => {
socialGroupsStore.initPostList(outoIncrement);
};
onMounted(() => { onMounted(() => {
socialGroupsStore.initGroupList(); socialGroupsStore.initGroupList();
socialGroupsStore.initPostList(1); socialGroupsStore.initPostList("212431");
socialGroupsStore.initGraphCommunityNode(); socialGroupsStore.initGraphCommunityNode();
socialGroupsStore.initGraphStatistics(); socialGroupsStore.initGraphStatistics();
}); });