社交紧密团体子图

src/store/llinkPrediction/index.js

@@ -392,6 +392,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     async initGroupList() {
       const res = await getGroupUserListFromTriangle()
       if (res.code != 200) return
+      // 按rank属性升序排序userList
+      res.data.userList.sort((a, b) => a.rank - b.rank)
       this.userList = res.data.userList
     },
     // 事件脉络分析中的帖文数据

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

@@ -141,6 +141,13 @@ const initChart = async () => {
 
   const links = []
   const 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
+    else return 1
+  }
   if (!Object.keys(socialGroupsStore.communityDetailNodeList).length) return
   Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => {
     nodes.push({
@@ -155,17 +162,21 @@ const initChart = async () => {
         source: `parent_${parentId}`,
         target: child.id,
         edge: child.isHidden ? 1 : 0,
-        interactionTimes: child.interactionTime
+        interactionTimes: child.interactionTime,
+        lineStyle: {
+          width: child.isHidden ? 4 : edgeWidth(child.interactionTime),
+          color: child.isHidden ? "#FF5E00" : "#37ACD7", // 无互动=灰色，有互动=黄色
+          type: child.isHidden ? "dashed" : "solid" // 无互动=实线，有互动=虚线
+        }
       })
     })
   })
   const data = { links, nodes }
 
   const categories = [
-    { name: "事件活跃者", category: 0, icon: `image://${new URL('@/assets/images/linkPrediction/icon/event-activist-legend-icon.png', import.meta.url)}` },
+    { name: "信息发布者", category: 0, icon: `image://${new URL('@/assets/images/linkPrediction/icon/information-publisher-legend-icon.png', import.meta.url)}` },
-    { name: "信息发布者", category: 1, icon: `image://${new URL('@/assets/images/linkPrediction/icon/information-publisher-legend-icon.png', import.meta.url)}` },
+    { name: "互动关系", category: 1, icon: `image://${new URL('@/assets/images/linkPrediction/icon/interactive-relationship-legend-icon.png', import.meta.url)}` },
-    { name: "互动关系", category: 2, icon: `image://${new URL('@/assets/images/linkPrediction/icon/interactive-relationship-legend-icon.png', import.meta.url)}` },
+    { name: "紧密团体关系", category: 2, icon: `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}` }
-    { name: "紧密团体关系", category: 3, icon: `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}` }
   ]
   const option = {
     //图例配置
@@ -192,7 +203,8 @@ const initChart = async () => {
                       { offset: 0.5, color: "#fad0c4" },
                       { offset: 1, color: "#fbc2eb" }
                     ])
-          }
+          },
+          icon: c.icon
         })),
         right: 21,
         bottom: 70,

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

@@ -13,7 +13,7 @@
               src="@/assets/images/linkPrediction/title/group-item-title.png"
               class="group-type-back"
             />
-            <div class="group-type-content">互动强度：{{ group.correlation.toFixed(1) }}</div>
+            <div class="group-type-content">Top{{ index+1 }}</div>
           </div>
           <div class="user-list-item" v-for="child in group.list" :key="child.id">
             <img :src="defaultAvatar" alt="" class="avatar" />