冲突解决

2025-08-01 16:59:56 +08:00 · 2025-08-01 16:59:56 +08:00 · d698bb5f4f
commit d698bb5f4f
parent d3dc2daed9 5e017bbb15
7 changed files with 428 additions and 79 deletions
--- 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;
--- 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";
--- 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"))
@ -240,6 +248,7 @@ const handlePointPointerDown = (e) => {
  const handlePointerUp = () => {
    isDragging.value = false
    // 拖动结束时输出当前时间
+    pause() // 拖动或点击时暂停自动播放
    const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
    if (props.interactionStore.curRelationId == "") {
      props.interactionStore.initGraphCommunityDetailNode(
@ -285,10 +294,10 @@ const initChart = async () => {
  const links = []
  let nodes = []
  const edgeWidth = (interactionTime) => {
-    if (interactionTime > 3) return 4
-    else if (interactionTime > 10) return 6
-    else if (interactionTime > 20) return 8
-    else if (interactionTime > 30) return 10
+    if (interactionTime <= 3) return 3
+    else if (interactionTime <= 10) return 4
+    else if (interactionTime <= 20) return 6
+    else if (interactionTime <= 30) return 8
    else return 1
  }
  if (!Object.keys(props.interactionStore.communityDetailNodeRelation).length) return
@ -297,11 +306,25 @@ 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 +541,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>

--- 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"
--- 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) => {
--- 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 {
--- a/src/views/keyNodeRecognition3/components/communityNode.vue
+++ b/src/views/keyNodeRecognition3/components/communityNode.vue
@ -271,7 +271,7 @@ const initChart = async () => {
          focus: "adjacency", // 高亮相邻节点
          lineStyle: {
            // 高亮时线条样式
-            width: 10 // 线条宽度(10)
+            width: 5 // 线条宽度(10)
          }
        }
      }