Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan
This commit is contained in:
commit
5791649128
BIN
src/assets/images/linkPrediction/icon/timestamp-button-icon.png
Normal file
BIN
src/assets/images/linkPrediction/icon/timestamp-button-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
|
|
@ -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}`)
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
<el-tooltip
|
||||||
|
:content="TansTimestamp(currentTime, 'YYYY.MM.DD HH:mm:ss')"
|
||||||
|
placement="bottom"
|
||||||
|
effect="light"
|
||||||
|
>
|
||||||
<div class="timeLine-point" @pointerdown.stop="handlePointPointerDown"></div>
|
<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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user