duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

冲突解决

Browse Source
This commit is contained in:
duanhao 2025-08-01 16:59:56 +08:00
commit d698bb5f4f
7 changed files with 428 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/LinkPrediction/characterInteraction/index.vue
View File

@ -14,7 +14,11 @@
</div> </div>
<div class="middle-container"> <div class="middle-container">
<div class="graph"> <div class="graph">
<Graph :title="graphTitleImg" :interactionStore="interactionStore"></Graph> <Graph
:title="graphTitleImg"
:interactionStore="interactionStore"
@click:openUserInfoDialog="handleOpenUserInfoDialog"
></Graph>
</div> </div>
<div class="postList"> <div class="postList">
<PostList :posts="interactionStore.posts"></PostList> <PostList :posts="interactionStore.posts"></PostList>
@ -32,10 +36,89 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="userInfoDialog" width="640" align-center class="custom-dialog">
<img
src="@/assets/images/linkPrediction/title/user-info-title.png"
alt=""
class="userInfoTitle"
/>
<div class="user-dialog-content">
<div class="user-basic-info">
<img
:src="
curSelectedUser.avatarData ? getAvatarUrl(curSelectedUser.avatarData) : defaultAvatar
"
alt=""
class="avatar"
/>
<div class="info-detail">
<div class="username">
{{ curSelectedUser.name }}
</div>
<div class="info-fans-posts">
<div class="fans">
粉丝量：&nbsp;&nbsp;
<p>{{ curSelectedUser.fans }}</p>
</div>
<div class="posts">
发帖数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div>
</div>
</div>
</div>
<div class="info-group">
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
发帖总数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
发帖频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.postFreqPerDay }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
参与互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
参与互动频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionFreqPerDay }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
帖文被互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactedNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
最近活跃时间：&nbsp;&nbsp;
<p>{{ curSelectedUser.recentActiveTime }}</p>
</div>
</div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import defaultAvatar from "@/assets/images/avatar/default.png"
import { onMounted, ref, provide } from "vue" import { onMounted, ref, provide } from "vue"
import { useCharacterInteractionStore } from "@/store/llinkPrediction/index" import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
import UserPanel from "../components/userPanel.vue" import UserPanel from "../components/userPanel.vue"
@ -46,9 +129,14 @@ import WordsCloud from "../components/cloudWords.vue"
import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png" import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png"
import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png" import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png" import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
import { getAvatarUrl } from "@/utils/transform"
const interactionStore = useCharacterInteractionStore() const interactionStore = useCharacterInteractionStore()
// 控制个人信息弹窗
const userInfoDialog = ref(false)
const curSelectedUser = ref(null)
//选择某个用户组，更新贴文列表 && 更新关系图二级界面 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
const handleSelectedUserGroup = (group) => { const handleSelectedUserGroup = (group) => {
interactionStore.curComponent = "detailNode" interactionStore.curComponent = "detailNode"
@ -61,7 +149,10 @@ const handleSelectedUserGroup = (group) => {
group.relationId group.relationId
) )
} }
const handleOpenUserInfoDialog = (params) => {
userInfoDialog.value = params.userInfoDialog
curSelectedUser.value = params.curSelectedUser
}
onMounted(() => { onMounted(() => {
interactionStore.initGroupList() //初始化用户组列表 interactionStore.initGroupList() //初始化用户组列表
interactionStore.initGraphCommunityNode() //初始化所有社团节点 interactionStore.initGraphCommunityNode() //初始化所有社团节点
@ -91,6 +182,10 @@ provide("statisticsList", interactionStore.statisticsList)
margin-top: -24px; margin-top: -24px;
margin-left: -2px; margin-left: -2px;
} }
:deep(.custom-dialog) .userInfoTitle {
margin-top: -24px;
margin-left: -2px;
}
:deep(.custom-dialog) .dialog-content { :deep(.custom-dialog) .dialog-content {
width: 100%; width: 100%;
padding: 25px 20px; padding: 25px 20px;
@ -104,6 +199,60 @@ provide("statisticsList", interactionStore.statisticsList)
font-weight: 400; font-weight: 400;
opacity: 0.7; opacity: 0.7;
} }
:deep(.custom-dialog) .user-dialog-content {
width: 100%;
padding: 30px;
.user-basic-info {
width: 428px;
display: flex;
justify-content: start;
align-items: center;
.avatar {
width: 70px;
height: 70px;
border-radius: 5px;
}
.info-detail {
height: 70px;
padding: 0 24px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-fans-posts {
display: flex;
justify-content: start;
.fans {
margin-right: 63px;
display: flex;
justify-content: start;
}
.posts {
display: flex;
justify-content: start;
}
}
}
}
.info-group {
margin-top: 32px;
margin-left: -10px;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 15px;
color: #fff;
font-size: 16px;
.info-item {
display: flex;
justify-content: start;
align-items: center;
.info-item-content {
display: flex;
justify-content: start;
}
}
}
}
.post-content { .post-content {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;

154
src/views/LinkPrediction/charactersHiddenInteraction/index.vue
View File

@ -14,7 +14,11 @@
</div> </div>
<div class="middle-container"> <div class="middle-container">
<div class="graph"> <div class="graph">
<Graph :title="graphTitleImg" :interactionStore="characterHiddenStore"></Graph> <Graph
:title="graphTitleImg"
:interactionStore="characterHiddenStore"
@click:openUserInfoDialog="handleOpenUserInfoDialog"
></Graph>
</div> </div>
<div class="postList"> <div class="postList">
<PostList :posts="characterHiddenStore.posts"></PostList> <PostList :posts="characterHiddenStore.posts"></PostList>
@ -32,11 +36,90 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="userInfoDialog" width="640" align-center class="custom-dialog">
<img
src="@/assets/images/linkPrediction/title/user-info-title.png"
alt=""
class="userInfoTitle"
/>
<div class="user-dialog-content">
<div class="user-basic-info">
<img
:src="
curSelectedUser.avatarData ? getAvatarUrl(curSelectedUser.avatarData) : defaultAvatar
"
alt=""
class="avatar"
/>
<div class="info-detail">
<div class="username">
{{ curSelectedUser.name }}
</div>
<div class="info-fans-posts">
<div class="fans">
粉丝量：&nbsp;&nbsp;
<p>{{ curSelectedUser.fans }}</p>
</div>
<div class="posts">
发帖数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div>
</div>
</div>
</div>
<div class="info-group">
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
发帖总数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
发帖频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.postFreqPerDay }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
参与互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
参与互动频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionFreqPerDay }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
帖文被互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactedNum }}</p>
</div>
</div>
<div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content">
最近活跃时间：&nbsp;&nbsp;
<p>{{ curSelectedUser.recentActiveTime }}</p>
</div>
</div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, provide } from "vue" import defaultAvatar from "@/assets/images/avatar/default.png"
import { getAvatarUrl } from "@/utils/transform"
import { onMounted, provide, ref } from "vue"
import UserPanel from "../components/userPanel.vue" import UserPanel from "../components/userPanel.vue"
import PostList from "../components/postList.vue" import PostList from "../components/postList.vue"
import AnlysisPanle from "../components/anlysisPanle.vue" import AnlysisPanle from "../components/anlysisPanle.vue"
@ -48,6 +131,14 @@ import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png
import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png" import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
const characterHiddenStore = useCharacterHiddenStore() const characterHiddenStore = useCharacterHiddenStore()
// 控制个人信息弹窗
const userInfoDialog = ref(false)
const curSelectedUser = ref(null)
const handleOpenUserInfoDialog = (params) => {
userInfoDialog.value = params.userInfoDialog
curSelectedUser.value = params.curSelectedUser
}
const handleSelectedUserGroup = (group) => { const handleSelectedUserGroup = (group) => {
characterHiddenStore.curComponent = "detailNode" characterHiddenStore.curComponent = "detailNode"
@ -90,11 +181,70 @@ provide("statisticsList", characterHiddenStore.statisticsList)
margin-top: -24px; margin-top: -24px;
margin-left: -2px; margin-left: -2px;
} }
:deep(.custom-dialog) .userInfoTitle {
margin-top: -24px;
margin-left: -2px;
}
:deep(.custom-dialog) .dialog-content { :deep(.custom-dialog) .dialog-content {
width: 100%; width: 100%;
padding: 25px 20px; padding: 25px 20px;
} }
:deep(.custom-dialog) .user-dialog-content {
width: 100%;
padding: 30px;
.user-basic-info {
width: 428px;
display: flex;
justify-content: start;
align-items: center;
.avatar {
width: 70px;
height: 70px;
border-radius: 5px;
}
.info-detail {
height: 70px;
padding: 0 24px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-fans-posts {
display: flex;
justify-content: start;
.fans {
margin-right: 63px;
display: flex;
justify-content: start;
}
.posts {
display: flex;
justify-content: start;
}
}
}
}
.info-group {
margin-top: 32px;
margin-left: -10px;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 15px;
color: #fff;
font-size: 16px;
.info-item {
display: flex;
justify-content: start;
align-items: center;
.info-item-content {
display: flex;
justify-content: start;
}
}
}
}
:deep(.custom-dialog) .dialog-content .content { :deep(.custom-dialog) .dialog-content .content {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-family: "PingFang SC"; font-family: "PingFang SC";

54
src/views/LinkPrediction/components/detailNode.vue
View File

@ -80,13 +80,21 @@ const props = defineProps({
const { communityDetailNodeRelation, timeList, predictionUserIds, curSelecedGroupIds } = const { communityDetailNodeRelation, timeList, predictionUserIds, curSelecedGroupIds } =
storeToRefs(props.interactionStore) storeToRefs(props.interactionStore)
const emit = defineEmits(["click:goback"]) const emit = defineEmits(["click:goback", "click:openDialog"])
const chartsData = ref({}) const chartsData = ref({})
const handleGoback = () => { const handleGoback = () => {
pause() pause()
emit("click:goback", "CommunityNode") emit("click:goback", "CommunityNode")
} }
const handleClickNode = () => {
chart.on("click", function (params) {
if (params.dataType == "node" && predictionUserIds.value.includes(params.data.id)) {
emit("click:openDialog", params.data)
}
})
}
// 时间轴相关数据 // 时间轴相关数据
const startTime = ref(new Date("2024-05-16 16:56:04")) const startTime = ref(new Date("2024-05-16 16:56:04"))
const endTime = ref(new Date("2024-05-23 10:16:56")) const endTime = ref(new Date("2024-05-23 10:16:56"))
@ -240,6 +248,7 @@ const handlePointPointerDown = (e) => {
const handlePointerUp = () => { const handlePointerUp = () => {
isDragging.value = false isDragging.value = false
// 拖动结束时输出当前时间 // 拖动结束时输出当前时间
pause() // 拖动或点击时暂停自动播放
const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss") const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
if (props.interactionStore.curRelationId == "") { if (props.interactionStore.curRelationId == "") {
props.interactionStore.initGraphCommunityDetailNode( props.interactionStore.initGraphCommunityDetailNode(
@ -285,10 +294,10 @@ const initChart = async () => {
const links = [] const links = []
let nodes = [] let nodes = []
const edgeWidth = (interactionTime) => { const edgeWidth = (interactionTime) => {
if (interactionTime > 3) return 4 if (interactionTime <= 3) return 3
else if (interactionTime > 10) return 6 else if (interactionTime <= 10) return 4
else if (interactionTime > 20) return 8 else if (interactionTime <= 20) return 6
else if (interactionTime > 30) return 10 else if (interactionTime <= 30) return 8
else return 1 else return 1
} }
if (!Object.keys(props.interactionStore.communityDetailNodeRelation).length) return if (!Object.keys(props.interactionStore.communityDetailNodeRelation).length) return
@ -297,11 +306,25 @@ const initChart = async () => {
nodes = props.interactionStore.communityDetailNodeList.map((item) => ({ nodes = props.interactionStore.communityDetailNodeList.map((item) => ({
id: item.userId, id: item.userId,
name: item.userName, name: item.userName,
// 头像
avatarData: item.avatarData,
//默认圆形头像
defaultAvatar: getAvatarUrl(item.defaultAvatar), defaultAvatar: getAvatarUrl(item.defaultAvatar),
//激活状态的头像
activeAvatar: getAvatarUrl(item.activeAvatar), activeAvatar: getAvatarUrl(item.activeAvatar),
symbolSize: 40, symbolSize: 40,
postNum: item.postNum, postNum: item.postNum,
fancy: item.fans fans: item.fans,
// 发帖频率
postFreqPerDay: item.postFreqPerDay,
// 参与互动次数
interactionNum: item.interactionNum,
// 参与互动频率
interactionFreqPerDay: item.interactionFreqPerDay,
// 帖文被互动次数
interactedNum: item.interactedNum,
// 最近活跃时间
recentActiveTime: item.recentActiveTime
})) }))
Object.entries(props.interactionStore.communityDetailNodeRelation).forEach( Object.entries(props.interactionStore.communityDetailNodeRelation).forEach(
@ -518,19 +541,24 @@ const highLightUserNodes = (userIds) => {
} }
} }
}) })
chart.setOption({
series: [ chart.setOption(
{ {
data: chartsData.value.nodes series: [
} {
] data: chartsData.value.nodes
}) }
]
},
false
)
} }
onMounted(() => { onMounted(() => {
initChart() initChart()
highLightUserNodes() highLightUserNodes()
play() play()
handleClickNode()
}) })
</script> </script>

11
src/views/LinkPrediction/components/graph.vue
View File

@ -11,16 +11,16 @@
<DetailNode <DetailNode
v-else v-else
@click:goback="handleClickGoBack" @click:goback="handleClickGoBack"
@click:openDialog="handleClickOpenDialog"
:interaction-store="interactionStore" :interaction-store="interactionStore"
></DetailNode> ></DetailNode>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue" import { defineProps, defineEmits } from "vue"
import CommunityNode from "./communityNode.vue" import CommunityNode from "./communityNode.vue"
import DetailNode from "./detailNode.vue" import DetailNode from "./detailNode.vue"
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
@ -31,7 +31,12 @@ const props = defineProps({
required: true required: true
} }
}) })
const emit = defineEmits(["click:openUserInfoDialog"])
const handleClickOpenDialog = (userInfo) => {
if (userInfo) {
emit("click:openUserInfoDialog", { userInfoDialog: true, curSelectedUser: userInfo })
}
}
//点击社团节点 //点击社团节点
const handleClickNode = async (nodeInfo) => { const handleClickNode = async (nodeInfo) => {
props.interactionStore.curComponent = "detailNode" props.interactionStore.curComponent = "detailNode"

7
src/views/LinkPrediction/socialGroups/components/graph.vue
View File

@ -29,8 +29,8 @@ const props = defineProps({
}) })
const emit = defineEmits(["click:openUserInfoDialog"]) const emit = defineEmits(["click:openUserInfoDialog"])
const handleClickOpenDialog = (userInfo) => { const handleClickOpenDialog = (userInfo) => {
if(userInfo) { if (userInfo) {
emit("click:openUserInfoDialog", {userInfoDialog: true, curSelectedUser: userInfo}) emit("click:openUserInfoDialog", { userInfoDialog: true, curSelectedUser: userInfo })
} }
} }
@ -42,7 +42,7 @@ const handleClickNode = async (nodeInfo) => {
} }
const handleClickEdge = async (edgeInfo, groupIdList) => { const handleClickEdge = async (edgeInfo, groupIdList) => {
console.log("点击边"); console.log("点击边")
socialGroupsStore.curComponent = "detailNode" socialGroupsStore.curComponent = "detailNode"
socialGroupsStore.clickEvent = "edge" socialGroupsStore.clickEvent = "edge"
socialGroupsStore.curRelationId = "" socialGroupsStore.curRelationId = ""
@ -52,7 +52,6 @@ const handleClickEdge = async (edgeInfo, groupIdList) => {
const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1] const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
// await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime) // await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, lastTime) await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, lastTime)
} }
const handleClickGoBack = (currentComponentName) => { const handleClickGoBack = (currentComponentName) => {

124
src/views/LinkPrediction/socialGroups/index.vue
View File

@ -15,14 +15,12 @@
<div class="middle-container"> <div class="middle-container">
<div class="graph"> <div class="graph">
<Graph <Graph
:title="graphTitleImg" :title="graphTitleImg"
@click:openUserInfoDialog="handleOpenUserInfoDialog" @click:openUserInfoDialog="handleOpenUserInfoDialog"
></Graph> ></Graph>
</div> </div>
<div class="postList"> <div class="postList">
<PostList <PostList :posts="socialGroupsStore.posts"></PostList>
:posts="socialGroupsStore.posts"
></PostList>
</div> </div>
</div> </div>
<div class="right-container"> <div class="right-container">
@ -61,120 +59,140 @@
</el-dialog> </el-dialog>
<el-dialog v-model="userInfoDialog" width="640" align-center class="custom-dialog"> <el-dialog v-model="userInfoDialog" width="640" align-center class="custom-dialog">
<img src="@/assets/images/linkPrediction/title/user-info-title.png" alt="" class="userInfoTitle" /> <img
src="@/assets/images/linkPrediction/title/user-info-title.png"
alt=""
class="userInfoTitle"
/>
<div class="user-dialog-content"> <div class="user-dialog-content">
<div class="user-basic-info"> <div class="user-basic-info">
<img :src="curSelectedUser.avatarData ? getAvatarUrl(curSelectedUser.avatarData) : defaultAvatar" alt="" class="avatar"> <img
:src="
curSelectedUser.avatarData ? getAvatarUrl(curSelectedUser.avatarData) : defaultAvatar
"
alt=""
class="avatar"
/>
<div class="info-detail"> <div class="info-detail">
<div class="username"> <div class="username">
{{ curSelectedUser.name }} {{ curSelectedUser.name }}
</div> </div>
<div class="info-fans-posts"> <div class="info-fans-posts">
<div class="fans">粉丝量：&nbsp;&nbsp;<p>{{ curSelectedUser.fans }}</p></div> <div class="fans">
<div class="posts">发帖数：&nbsp;&nbsp;<p>{{ curSelectedUser.postNum }}</p></div> 粉丝量：&nbsp;&nbsp;
<p>{{ curSelectedUser.fans }}</p>
</div>
<div class="posts">
发帖数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="info-group"> <div class="info-group">
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
发帖总数：&nbsp;&nbsp;<p>{{ curSelectedUser.postNum }}</p> 发帖总数：&nbsp;&nbsp;
<p>{{ curSelectedUser.postNum }}</p>
</div> </div>
</div> </div>
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
发帖频率：&nbsp;&nbsp;<p>{{ curSelectedUser.postFreqPerDay }}</p> 发帖频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.postFreqPerDay }}</p>
</div> </div>
</div> </div>
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
参与互动次数：&nbsp;&nbsp;<p>{{ curSelectedUser.interactionNum }}</p> 参与互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionNum }}</p>
</div> </div>
</div> </div>
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
参与互动频率：&nbsp;&nbsp;<p>{{ curSelectedUser.interactionFreqPerDay }}</p> 参与互动频率：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactionFreqPerDay }}</p>
</div> </div>
</div> </div>
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
帖文被互动次数：&nbsp;&nbsp;<p>{{ curSelectedUser.interactedNum }}</p> 帖文被互动次数：&nbsp;&nbsp;
<p>{{ curSelectedUser.interactedNum }}</p>
</div> </div>
</div> </div>
<div class="info-item"> <div class="info-item">
<img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt=""> <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
<div class="info-item-content"> <div class="info-item-content">
最近活跃时间：&nbsp;&nbsp;<p>{{ curSelectedUser.recentActiveTime }}</p> 最近活跃时间：&nbsp;&nbsp;
<p>{{ curSelectedUser.recentActiveTime }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import defaultAvatar from "@/assets/images/avatar/default.png"; import defaultAvatar from "@/assets/images/avatar/default.png"
import { onMounted, provide, ref } from "vue"; import { onMounted, provide, ref } from "vue"
import UserPanel from "./components/userPanel.vue"; import UserPanel from "./components/userPanel.vue"
import UserChart from "./components/userChart.vue"; import UserChart from "./components/userChart.vue"
import PostList from "./components/postList.vue"; import PostList from "./components/postList.vue"
import AnlysisPanle from "./components/anlysisPanle.vue"; import AnlysisPanle from "./components/anlysisPanle.vue"
import Graph from "./components/graph.vue"; import Graph from "./components/graph.vue"
import WordsCloud from "./components/cloudWords.vue"; import WordsCloud from "./components/cloudWords.vue"
import { Icon } from "@iconify/vue"; import { Icon } from "@iconify/vue"
import { useSocialGroupsStore } from "@/store/llinkPrediction/index"; import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png"; import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png"
import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-strenth-title.png"; import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-strenth-title.png"
import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"; import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"; import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
import { getAvatarUrl } from "@/utils/transform" import { getAvatarUrl } from "@/utils/transform"
const socialGroupsStore = useSocialGroupsStore(); const socialGroupsStore = useSocialGroupsStore()
//控制弹窗 //控制弹窗
const postDialog = ref(false); const postDialog = ref(false)
// 控制个人信息弹窗 // 控制个人信息弹窗
const userInfoDialog = ref(false); const userInfoDialog = ref(false)
const curSelectedUser = ref(null) const curSelectedUser = ref(null)
//当前选中的贴文数据 //当前选中的贴文数据
const currentPostPost = ref(null); const currentPostPost = ref(null)
// 列表项的点击事件 // 列表项的点击事件
const handleSelectedUserGroup = (group) => { const handleSelectedUserGroup = (group) => {
socialGroupsStore.curComponent = "detailkNode" socialGroupsStore.curComponent = "detailkNode"
socialGroupsStore.clickEvent = "list" socialGroupsStore.clickEvent = "list"
console.log("点击列表group：",group) console.log("点击列表group：", group)
const groupIds = group.list.map((item)=>item.groupId) const groupIds = group.list.map((item) => item.groupId)
socialGroupsStore.curRelationId = group.relationId //保存当前点击的relationid，为了区分到底是从哪点进二级界面的 socialGroupsStore.curRelationId = group.relationId //保存当前点击的relationid，为了区分到底是从哪点进二级界面的
socialGroupsStore.initGraphCommunityDetailNode(groupIds, "2024-05-16 16:56:04", group.relationId) socialGroupsStore.initGraphCommunityDetailNode(groupIds, "2024-05-16 16:56:04", group.relationId)
socialGroupsStore.setTimeList(group.timeList) socialGroupsStore.setTimeList(group.timeList)
socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId) socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId)
}; }
const handleOpenUserInfoDialog = (params) => { const handleOpenUserInfoDialog = (params) => {
userInfoDialog.value = params.userInfoDialog userInfoDialog.value = params.userInfoDialog
curSelectedUser.value = params.curSelectedUser curSelectedUser.value = params.curSelectedUser
console.log("index.vue打印当前选中的用户：",curSelectedUser.value) console.log("index.vue打印当前选中的用户：", curSelectedUser.value)
} }
onMounted(() => { onMounted(() => {
socialGroupsStore.initGroupList(); socialGroupsStore.initGroupList()
socialGroupsStore.initPostList("212431"); socialGroupsStore.initPostList("212431")
socialGroupsStore.initGraphCommunityNode(); socialGroupsStore.initGraphCommunityNode()
socialGroupsStore.initGraphStatistics(); socialGroupsStore.initGraphStatistics()
}); })
provide("communityNodeList", socialGroupsStore.communityNodeList); provide("communityNodeList", socialGroupsStore.communityNodeList)
provide("statisticsList", socialGroupsStore.statisticsList); provide("statisticsList", socialGroupsStore.statisticsList)
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -205,7 +223,7 @@ provide("statisticsList", socialGroupsStore.statisticsList);
padding: 25px 20px; padding: 25px 20px;
} }
:deep(.custom-dialog) .user-dialog-content { :deep(.custom-dialog) .user-dialog-content {
width: 100%; width: 100%;
padding: 30px; padding: 30px;
.user-basic-info { .user-basic-info {

2
src/views/keyNodeRecognition3/components/communityNode.vue
View File

@ -271,7 +271,7 @@ const initChart = async () => {
focus: "adjacency", // 高亮相邻节点 focus: "adjacency", // 高亮相邻节点
lineStyle: { lineStyle: {
// 高亮时线条样式 // 高亮时线条样式
width: 10 // 线条宽度(10) width: 5 // 线条宽度(10)
} }
} }
} }