Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan

src/store/llinkPrediction/index.js

@@ -469,6 +469,7 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         customStatisticsObj.hiddenInteractionCount == null
       ) {
         customStatisticsObj.hiddenInteractionCount = 1
+        
         customStatisticsObj.groupCount = ids[0] === ids[1] ? 1 : 3
       }
 

src/views/LinkPrediction/socialGroups/components/communityNode.vue

@@ -18,6 +18,7 @@ import nodeHoverImg from "@/assets/images/nodeHover.png"
 
 let chart = null
 let linkList = null
+let nodeList = null
 const emit = defineEmits(["click:node", "click:edge"])
 const statisticsList = inject("statisticsList");
 const communityNodeList = inject("communityNodeList");
@@ -34,7 +35,7 @@ const initChart = async () => {
     neighbors: item.neighbors.map((nei) => ({ ...nei, name: parseInt(nei.id) })),
     category: item.isIncludePredictNodes ? 1 : 0,
     selfIncludeImplicitRelationship:
-      item.neighbors.map((nei) => nei.id).includes(item.id) && //若该社团的id在该社团邻居中可以找到，说明自己这个社团中有互动隐关系
+      item.neighbors.map((nei) => nei.id).includes(item.id) && //若该社团的id在该社团邻居中可以找到，说明自己这个社团中有社交紧密关系
       item.neighbors.find((nei) => nei.id == item.id).isHidden
   }))
 
@@ -60,6 +61,7 @@ const initChart = async () => {
     })
   })
   linkList = links
+  nodeList = nodes
   const data = { nodes, links }
 
   const categories = [
@@ -211,7 +213,7 @@ const initChart = async () => {
               shadowBlur: 20,
               shadowColor: "#c4a651",
               borderColor: "#fcd267",
-              borderWidth: node.isIncludePredictNodes == false ? 1 : 5,
+              borderWidth: 5,
               borderType: "solid"
             }
           }
@@ -280,6 +282,7 @@ const handleClickNode = () => {
 onMounted(async () => {
   await initChart()
   handleClickNode()
+  console.log("nodeList", nodeList);
 })
 
 onUnmounted(() => {

src/views/LinkPrediction/socialGroups/components/detailNode.vue

@@ -85,7 +85,7 @@ const { clickEvent } = storeToRefs(socialGroupsStore)
 
 const chartsData = ref({})
 
-const emit = defineEmits(["click:goback"])
+const emit = defineEmits(["click:goback", "click:openDialog"])
 const handleGoback = () => {
   pause()
   emit("click:goback", "CommunityNode")
@@ -318,9 +318,23 @@ const initChart = async () => {
     nodes.push({
       id: item.userId,
       name: item.userName,
+      // 头像
+      avatarData: item.avatarData,
+      // 粉丝量
+      fans: item.fans,
       symbolSize: 40,
+      // 发帖数
       postNum: item.postNum,
-      fancy: item.fans
+      // 发帖频率
+      postFreqPerDay: item.postFreqPerDay,
+      // 参与互动次数
+      interactionNum: item.interactionNum,
+      // 参与互动频率
+      interactionFreqPerDay: item.interactionFreqPerDay,
+      // 帖文被互动次数
+      interactedNum: item.interactedNum,
+      // 最近活跃时间
+      recentActiveTime: item.recentActiveTime,
     })
   })
   Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => {
@@ -597,6 +611,15 @@ const highLightUserNodes = (newHiglightUserIdList) => {
   }, 1000)
 }
 
+const handleClickNode = () => {
+  chart.on("click", function (params) {
+    if (params.dataType == "node" && curHighlightUserIdList.value.includes(params.data.id)) {
+      console.log("detail点击点：",params.data)
+      emit("click:openDialog", params.data)
+    }
+  })
+}
+
 onMounted(() => {
   initChart()
   chart.on("legendselectchanged", function (params) {
@@ -607,6 +630,7 @@ onMounted(() => {
   })
   highLightUserNodes()
   play()
+  handleClickNode()
   
 })
 </script>

src/views/LinkPrediction/socialGroups/components/graph.vue

@@ -10,12 +10,13 @@
     <DetailNode
       v-else
       @click:goback="handleClickGoBack"
+      @click:openDialog="handleClickOpenDialog"
     ></DetailNode>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from "vue"
+import { defineProps, defineEmits } from "vue"
 import CommunityNode from "./communityNode.vue"
 import DetailNode from "./detailNode.vue"
 import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
@@ -26,6 +27,12 @@ const props = defineProps({
     default: ""
   }
 })
+const emit = defineEmits(["click:openUserInfoDialog"])
+const handleClickOpenDialog = (userInfo) => {
+  if(userInfo) {
+    emit("click:openUserInfoDialog", {userInfoDialog: true, curSelectedUser: userInfo})
+  }
+}
 
 const handleClickNode = async (nodeInfo) => {
   // 点击节点

src/views/LinkPrediction/socialGroups/components/userPanel.vue

@@ -59,10 +59,11 @@ const props = defineProps({
     default: 480
   }
 });
-// ssss
+
 const handleUserItem = (index, group = {}) => {
   curUserGroupIndex.value = index;
   // 设置需要高亮的用户id
+  console.log("打印用户列表：",props.userList)
   socialGroupsStore.curHighlightUserIdList = group.list.map((item)=>item.userId)
   emit("click:selectedGroup", group);
 };

src/views/LinkPrediction/socialGroups/index.vue

@@ -14,7 +14,10 @@
       </div>
       <div class="middle-container">
         <div class="graph">
-          <Graph :title="graphTitleImg"></Graph>
+          <Graph 
+          :title="graphTitleImg"
+          @click:openUserInfoDialog="handleOpenUserInfoDialog"
+          ></Graph>
         </div>
         <div class="postList">
           <PostList
@@ -56,10 +59,69 @@
         </div>
       </div>
     </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" />
+      <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, provide, ref } from "vue";
 import UserPanel from "./components/userPanel.vue";
 import UserChart from "./components/userChart.vue";
@@ -73,11 +135,16 @@ import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.p
 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 postDialog = ref(false);
 
+// 控制个人信息弹窗
+const userInfoDialog = ref(false);
+const curSelectedUser = ref(null)
+
 //当前选中的贴文数据
 const currentPostPost = ref(null);
 
@@ -93,6 +160,12 @@ const handleSelectedUserGroup = (group) => {
   socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId)
 };
 
+const handleOpenUserInfoDialog = (params) => {
+  userInfoDialog.value = params.userInfoDialog
+  curSelectedUser.value = params.curSelectedUser
+  console.log("index.vue打印当前选中的用户：",curSelectedUser.value)
+}
+
 onMounted(() => {
   socialGroupsStore.initGroupList();
   socialGroupsStore.initPostList("212431");
@@ -123,11 +196,70 @@ provide("statisticsList", socialGroupsStore.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";