From 5a368922abb2ded331840356b3947577bf507300 Mon Sep 17 00:00:00 2001
From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com>
Date: Fri, 1 Aug 2025 15:43:24 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E4=B8=AA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=92=8C=E7=AC=AC=E4=B8=89=E4=B8=AA=E9=A1=B5=E9=9D=A2=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=B7=BB=E5=8A=A0=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/llinkPrediction/index.js            |   2 +-
 .../characterInteraction/index.vue            | 153 ++++++++++++++++-
 .../charactersHiddenInteraction/index.vue     | 154 +++++++++++++++++-
 .../LinkPrediction/components/detailNode.vue  |  43 ++++-
 src/views/LinkPrediction/components/graph.vue |  11 +-
 .../socialGroups/components/graph.vue         |   7 +-
 .../LinkPrediction/socialGroups/index.vue     | 126 ++++++++------
 7 files changed, 421 insertions(+), 75 deletions(-)

diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js
index 2ffd87b..0d9d0c2 100644
--- a/src/store/llinkPrediction/index.js
+++ b/src/store/llinkPrediction/index.js
@@ -469,7 +469,7 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         customStatisticsObj.hiddenInteractionCount == null
       ) {
         customStatisticsObj.hiddenInteractionCount = 1
-        
+
         customStatisticsObj.groupCount = ids[0] === ids[1] ? 1 : 3
       }
 
diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue
index 62cf12e..e02ceba 100644
--- a/src/views/LinkPrediction/characterInteraction/index.vue
+++ b/src/views/LinkPrediction/characterInteraction/index.vue
@@ -14,7 +14,11 @@
       </div>
       <div class="middle-container">
         <div class="graph">
-          <Graph :title="graphTitleImg" :interactionStore="interactionStore"></Graph>
+          <Graph
+            :title="graphTitleImg"
+            :interactionStore="interactionStore"
+            @click:openUserInfoDialog="handleOpenUserInfoDialog"
+          ></Graph>
         </div>
         <div class="postList">
           <PostList :posts="interactionStore.posts"></PostList>
@@ -32,10 +36,89 @@
         </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>
 </template>
 
 <script setup>
+import defaultAvatar from "@/assets/images/avatar/default.png"
 import { onMounted, ref, provide } from "vue"
 import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
 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 graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
 import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
+import { getAvatarUrl } from "@/utils/transform"
 
 const interactionStore = useCharacterInteractionStore()
 
+// 控制个人信息弹窗
+const userInfoDialog = ref(false)
+const curSelectedUser = ref(null)
+
 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
 const handleSelectedUserGroup = (group) => {
   interactionStore.curComponent = "detailNode"
@@ -61,7 +149,10 @@ const handleSelectedUserGroup = (group) => {
     group.relationId
   )
 }
-
+const handleOpenUserInfoDialog = (params) => {
+  userInfoDialog.value = params.userInfoDialog
+  curSelectedUser.value = params.curSelectedUser
+}
 onMounted(() => {
   interactionStore.initGroupList() //初始化用户组列表
   interactionStore.initGraphCommunityNode() //初始化所有社团节点
@@ -91,6 +182,10 @@ provide("statisticsList", interactionStore.statisticsList)
   margin-top: -24px;
   margin-left: -2px;
 }
+:deep(.custom-dialog) .userInfoTitle {
+  margin-top: -24px;
+  margin-left: -2px;
+}
 :deep(.custom-dialog) .dialog-content {
   width: 100%;
   padding: 25px 20px;
@@ -104,6 +199,60 @@ provide("statisticsList", interactionStore.statisticsList)
   font-weight: 400;
   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 {
   color: #fff;
   font-size: 16px;
diff --git a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
index 0e7a2c9..45410a1 100644
--- a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
+++ b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
@@ -14,7 +14,11 @@
       </div>
       <div class="middle-container">
         <div class="graph">
-          <Graph :title="graphTitleImg" :interactionStore="characterHiddenStore"></Graph>
+          <Graph
+            :title="graphTitleImg"
+            :interactionStore="characterHiddenStore"
+            @click:openUserInfoDialog="handleOpenUserInfoDialog"
+          ></Graph>
         </div>
         <div class="postList">
           <PostList :posts="characterHiddenStore.posts"></PostList>
@@ -32,11 +36,90 @@
         </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>
 </template>
 
 <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 PostList from "../components/postList.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"
 
 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) => {
   characterHiddenStore.curComponent = "detailNode"
@@ -90,11 +181,70 @@ provide("statisticsList", characterHiddenStore.statisticsList)
   margin-top: -24px;
   margin-left: -2px;
 }
+:deep(.custom-dialog) .userInfoTitle {
+  margin-top: -24px;
+  margin-left: -2px;
+}
 :deep(.custom-dialog) .dialog-content {
   width: 100%;
   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 {
   color: rgba(255, 255, 255, 0.8);
   font-family: "PingFang SC";
diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue
index 04f6091..c86cc14 100644
--- a/src/views/LinkPrediction/components/detailNode.vue
+++ b/src/views/LinkPrediction/components/detailNode.vue
@@ -80,13 +80,21 @@ const props = defineProps({
 const { communityDetailNodeRelation, timeList, predictionUserIds, curSelecedGroupIds } =
   storeToRefs(props.interactionStore)
 
-const emit = defineEmits(["click:goback"])
+const emit = defineEmits(["click:goback", "click:openDialog"])
 const chartsData = ref({})
 const handleGoback = () => {
   pause()
   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 endTime = ref(new Date("2024-05-23 10:16:56"))
@@ -297,11 +305,23 @@ const initChart = async () => {
   nodes = props.interactionStore.communityDetailNodeList.map((item) => ({
     id: item.userId,
     name: item.userName,
+    // 头像
+    avatarData: item.avatarData,
     defaultAvatar: getAvatarUrl(item.defaultAvatar),
     activeAvatar: getAvatarUrl(item.activeAvatar),
     symbolSize: 40,
     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(
@@ -518,19 +538,24 @@ const highLightUserNodes = (userIds) => {
       }
     }
   })
-  chart.setOption({
-    series: [
-      {
-        data: chartsData.value.nodes
-      }
-    ]
-  })
+
+  chart.setOption(
+    {
+      series: [
+        {
+          data: chartsData.value.nodes
+        }
+      ]
+    },
+    false
+  )
 }
 
 onMounted(() => {
   initChart()
   highLightUserNodes()
   play()
+  handleClickNode()
 })
 </script>
 
diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue
index 7474f96..5b085b7 100644
--- a/src/views/LinkPrediction/components/graph.vue
+++ b/src/views/LinkPrediction/components/graph.vue
@@ -11,16 +11,16 @@
     <DetailNode
       v-else
       @click:goback="handleClickGoBack"
+      @click:openDialog="handleClickOpenDialog"
       :interaction-store="interactionStore"
     ></DetailNode>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from "vue"
+import { defineProps, defineEmits } from "vue"
 import CommunityNode from "./communityNode.vue"
 import DetailNode from "./detailNode.vue"
-
 const props = defineProps({
   title: {
     type: String,
@@ -31,7 +31,12 @@ const props = defineProps({
     required: true
   }
 })
-
+const emit = defineEmits(["click:openUserInfoDialog"])
+const handleClickOpenDialog = (userInfo) => {
+  if (userInfo) {
+    emit("click:openUserInfoDialog", { userInfoDialog: true, curSelectedUser: userInfo })
+  }
+}
 //点击社团节点
 const handleClickNode = async (nodeInfo) => {
   props.interactionStore.curComponent = "detailNode"
diff --git a/src/views/LinkPrediction/socialGroups/components/graph.vue b/src/views/LinkPrediction/socialGroups/components/graph.vue
index 818f4d9..a56a09a 100644
--- a/src/views/LinkPrediction/socialGroups/components/graph.vue
+++ b/src/views/LinkPrediction/socialGroups/components/graph.vue
@@ -29,8 +29,8 @@ const props = defineProps({
 })
 const emit = defineEmits(["click:openUserInfoDialog"])
 const handleClickOpenDialog = (userInfo) => {
-  if(userInfo) {
-    emit("click:openUserInfoDialog", {userInfoDialog: true, curSelectedUser: userInfo})
+  if (userInfo) {
+    emit("click:openUserInfoDialog", { userInfoDialog: true, curSelectedUser: userInfo })
   }
 }
 
@@ -42,7 +42,7 @@ const handleClickNode = async (nodeInfo) => {
 }
 
 const handleClickEdge = async (edgeInfo, groupIdList) => {
-  console.log("点击边");
+  console.log("点击边")
   socialGroupsStore.curComponent = "detailNode"
   socialGroupsStore.clickEvent = "edge"
   socialGroupsStore.curRelationId = ""
@@ -52,7 +52,6 @@ const handleClickEdge = async (edgeInfo, groupIdList) => {
   const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
   // await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
   await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, lastTime)
-  
 }
 
 const handleClickGoBack = (currentComponentName) => {
diff --git a/src/views/LinkPrediction/socialGroups/index.vue b/src/views/LinkPrediction/socialGroups/index.vue
index c13961c..e14b2b3 100644
--- a/src/views/LinkPrediction/socialGroups/index.vue
+++ b/src/views/LinkPrediction/socialGroups/index.vue
@@ -14,15 +14,13 @@
       </div>
       <div class="middle-container">
         <div class="graph">
-          <Graph 
-          :title="graphTitleImg"
-          @click:openUserInfoDialog="handleOpenUserInfoDialog"
+          <Graph
+            :title="graphTitleImg"
+            @click:openUserInfoDialog="handleOpenUserInfoDialog"
           ></Graph>
         </div>
         <div class="postList">
-          <PostList
-            :posts="socialGroupsStore.posts"
-          ></PostList>
+          <PostList :posts="socialGroupsStore.posts"></PostList>
         </div>
       </div>
       <div class="right-container">
@@ -61,120 +59,140 @@
     </el-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-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="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 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="">
+            <img src="@/assets/images/linkPrediction/icon/user-info-group-icon.png" alt="" />
             <div class="info-item-content">
-              发帖总数：&nbsp;&nbsp;<p>{{ curSelectedUser.postNum }}</p>
+              发帖总数：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.postNum }}</p>
             </div>
           </div>
           <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">
-              发帖频率：&nbsp;&nbsp;<p>{{ curSelectedUser.postFreqPerDay }}</p>
+              发帖频率：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.postFreqPerDay }}</p>
             </div>
           </div>
           <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">
-              参与互动次数：&nbsp;&nbsp;<p>{{ curSelectedUser.interactionNum }}</p>
+              参与互动次数：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.interactionNum }}</p>
             </div>
           </div>
           <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">
-              参与互动频率：&nbsp;&nbsp;<p>{{ curSelectedUser.interactionFreqPerDay }}</p>
+              参与互动频率：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.interactionFreqPerDay }}</p>
             </div>
           </div>
           <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">
-              帖文被互动次数：&nbsp;&nbsp;<p>{{ curSelectedUser.interactedNum }}</p>
+              帖文被互动次数：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.interactedNum }}</p>
             </div>
           </div>
           <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">
-              最近活跃时间：&nbsp;&nbsp;<p>{{ curSelectedUser.recentActiveTime }}</p>
+              最近活跃时间：&nbsp;&nbsp;
+              <p>{{ curSelectedUser.recentActiveTime }}</p>
             </div>
           </div>
         </div>
       </div>
-      
-
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import defaultAvatar from "@/assets/images/avatar/default.png";
-import { onMounted, provide, ref } from "vue";
-import UserPanel from "./components/userPanel.vue";
-import UserChart from "./components/userChart.vue";
-import PostList from "./components/postList.vue";
-import AnlysisPanle from "./components/anlysisPanle.vue";
-import Graph from "./components/graph.vue";
-import WordsCloud from "./components/cloudWords.vue";
-import { Icon } from "@iconify/vue";
-import { useSocialGroupsStore } from "@/store/llinkPrediction/index";
-import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png";
-import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-strenth-title.png";
-import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png";
-import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png";
+import defaultAvatar from "@/assets/images/avatar/default.png"
+import { onMounted, provide, ref } from "vue"
+import UserPanel from "./components/userPanel.vue"
+import UserChart from "./components/userChart.vue"
+import PostList from "./components/postList.vue"
+import AnlysisPanle from "./components/anlysisPanle.vue"
+import Graph from "./components/graph.vue"
+import WordsCloud from "./components/cloudWords.vue"
+import { Icon } from "@iconify/vue"
+import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
+import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png"
+import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-strenth-title.png"
+import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
+import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
 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 currentPostPost = ref(null);
+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)
+  console.log("点击列表group：", group)
+  const groupIds = group.list.map((item) => item.groupId)
   socialGroupsStore.curRelationId = group.relationId //保存当前点击的relationid，为了区分到底是从哪点进二级界面的
   socialGroupsStore.initGraphCommunityDetailNode(groupIds, "2024-05-16 16:56:04", group.relationId)
   socialGroupsStore.setTimeList(group.timeList)
   socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId)
-};
+}
 
 const handleOpenUserInfoDialog = (params) => {
   userInfoDialog.value = params.userInfoDialog
   curSelectedUser.value = params.curSelectedUser
-  console.log("index.vue打印当前选中的用户：",curSelectedUser.value)
+  console.log("index.vue打印当前选中的用户：", curSelectedUser.value)
 }
 
 onMounted(() => {
-  socialGroupsStore.initGroupList();
-  socialGroupsStore.initPostList("212431");
-  socialGroupsStore.initGraphCommunityNode();
-  socialGroupsStore.initGraphStatistics();
-});
+  socialGroupsStore.initGroupList()
+  socialGroupsStore.initPostList("212431")
+  socialGroupsStore.initGraphCommunityNode()
+  socialGroupsStore.initGraphStatistics()
+})
 
-provide("communityNodeList", socialGroupsStore.communityNodeList);
-provide("statisticsList", socialGroupsStore.statisticsList);
+provide("communityNodeList", socialGroupsStore.communityNodeList)
+provide("statisticsList", socialGroupsStore.statisticsList)
 </script>
 
 <style scoped lang="less">
@@ -205,7 +223,7 @@ provide("statisticsList", socialGroupsStore.statisticsList);
   padding: 25px 20px;
 }
 
-:deep(.custom-dialog) .user-dialog-content  {
+:deep(.custom-dialog) .user-dialog-content {
   width: 100%;
   padding: 30px;
   .user-basic-info {