社交紧密团体识别完

src/store/llinkPrediction/index.js

@@ -4,44 +4,45 @@ import test1Avatar from "@/assets/anchorAvatar/fei_die_gg.png";
 export const useCharacterInteractionStore = defineStore("characterInteraction", {
   state: () => ({
     userList: [
-      [
+      {
+        id: 1,
+        type: "",
+        list: [
           { id: 1, name: "Polo Hun", avatar: testAvatar, fancy: 634, post: 32 },
           { id: 2, name: "楊政子", avatar: testAvatar, fancy: 5556, post: 23 }
-      ],
-      [
-        { id: 3, name: "吳政輝", avatar: testAvatar, fancy: 0, post: 0 },
-        { id: 4, name: "錫聰 林", avatar: testAvatar, fancy: 564, post: 13 }
-      ],
-      [
-        { id: 5, name: "一人一讚 馬總統感恩有您 永遠支...", avatar: testAvatar, fancy: 0, post: 0 },
-        {
-          id: 6,
-          name: "一人一讚 馬總統感恩有您 永遠支...",
-          avatar: testAvatar,
-          fancy: 564,
-          post: 13
-        }
-      ],
-      [
-        { id: 7, name: "一人一讚 馬總統感恩有您 永遠支...", avatar: testAvatar, fancy: 0, post: 0 },
-        {
-          id: 8,
-          name: "一人一讚 馬總統感恩有您 永遠支...",
-          avatar: testAvatar,
-          fancy: 564,
-          post: 13
-        }
-      ],
-      [
-        { id: 9, name: "一人一讚 馬總統感恩有您 永遠支...", avatar: testAvatar, fancy: 0, post: 0 },
-        {
-          id: 10,
-          name: "一人一讚 馬總統感恩有您 永遠支...",
-          avatar: testAvatar,
-          fancy: 564,
-          post: 13
-        }
         ]
+      },
+      {
+        id: 2,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: testAvatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: testAvatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 3,
+        list: [
+          { id: 1, name: "Polo Hun", avatar: testAvatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: testAvatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 4,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: testAvatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: testAvatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 5,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: testAvatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: testAvatar, fancy: 5556, post: 23 }
+        ]
+      }
     ],
 
     userChartList: [
@@ -328,40 +329,41 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
 export const useSocialGroupsStore = defineStore("socialGroups", {
   state: () => ({
     userList: [
-      [
+      {
+        id: 1,
+        type: "时政兴趣团体",
+        list: [
           { id: 1, name: "Polo Hun", avatar: test1Avatar, fancy: 634, post: 32 },
           { id: 2, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 },
           { id: 3, name: "邱盆琇", avatar: test1Avatar, fancy: 5556, post: 23 }
-      ],
-      [
-        { id: 3, name: "吳政輝", avatar: test1Avatar, fancy: 0, post: 0 },
-        { id: 4, name: "錫聰 林", avatar: test1Avatar, fancy: 564, post: 13 },
-        { id: 5, name: "楊富琳", avatar: test1Avatar, fancy: 5556, post: 23 }
-      ],
-      [
-        {
-          id: 6,
-          name: "一人一讚 馬總統感恩有您 永遠支...",
-          avatar: test1Avatar,
-          fancy: 0,
-          post: 0
-        },
-        {
-          id: 7,
-          name: "一人一讚 馬總統感恩有您 永遠支...",
-          avatar: test1Avatar,
-          fancy: 564,
-          post: 13
-        },
-        { id: 8, name: "楊富琳", avatar: test1Avatar, fancy: 5556, post: 23 }
         ]
+      },
+      {
+        id: 2,
+        type: "时政兴趣团体",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test1Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 },
+          { id: 3, name: "邱盆琇", avatar: test1Avatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 3,
+        type: "时政兴趣团体",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test1Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 },
+          { id: 3, name: "邱盆琇", avatar: test1Avatar, fancy: 5556, post: 23 }
+        ]
+      }
     ],
     userChartList: [
       {
         id: 1,
         group: [
           { id: 1, name: "Polo Hun", avatar: test1Avatar, fancy: 634, post: 32 },
-          { id: 2, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 }
+          { id: 2, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 },
+          { id: 3, name: "楊政子", avatar: test1Avatar, fancy: 5556, post: 23 }
         ],
         number: "0.60"
       },
@@ -381,6 +383,13 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
             avatar: test1Avatar,
             fancy: 564,
             post: 13
+          },
+          {
+            id: 9,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test1Avatar,
+            fancy: 564,
+            post: 13
           }
         ],
         number: 0.45
@@ -389,14 +398,21 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         id: 3,
         group: [
           {
-            id: 9,
+            id: 10,
             name: "一人一讚 馬總統感恩有您 永遠支...",
             avatar: test1Avatar,
             fancy: 0,
             post: 0
           },
           {
-            id: 10,
+            id: 11,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test1Avatar,
+            fancy: 564,
+            post: 13
+          },
+          {
+            id: 12,
             name: "一人一讚 馬總統感恩有您 永遠支...",
             avatar: test1Avatar,
             fancy: 564,
@@ -530,30 +546,30 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         xAxis: [0, 20, 40, 60, 80, 100],
         max: 100,
         rows: [
-          { label: "目标用户", value: 98.8, type: "leader" },
-          { label: "所有用户", value: 0.01, type: "user" }
+          { label: "目标用户", value: 37.33, type: "leader" },
+          { label: "所有用户", value: 0.06, type: "user" }
         ]
       },
       {
         id: 2,
         title: "平均转发次数",
         unit: "数量",
-        xAxis: [0, 3, 6, 9, 12, 16, 18],
-        max: 18,
+        xAxis: [0, 0.1, 0.2, 0.3, 0.4, 0.5],
+        max: 0.5,
         rows: [
-          { label: "目标用户", value: 17, type: "leader" },
-          { label: "所有用户", value: 0.01, type: "user" }
+          { label: "目标用户", value: 0.31, type: "leader" },
+          { label: "所有用户", value: 0.004, type: "user" }
         ]
       },
       {
         id: 3,
         title: "互动时间间隔",
         unit: "秒",
-        xAxis: [0, 30, 60, 90, 120, 150],
-        max: 150,
+        xAxis: [0, 100, 200, 300, 400, 500],
+        max: 600,
         rows: [
-          { label: "目标用户", value: 3.63, type: "leader", highlight: false },
-          { label: "所有用户", value: 127.63, type: "user" }
+          { label: "目标用户", value: 42.55, type: "leader", highlight: false },
+          { label: "所有用户", value: 582.23, type: "user" }
         ]
       }
     ],

src/views/LinkPrediction/components/userChart.vue

@@ -16,11 +16,15 @@
               v-for="child in item.group"
               :key="child.id"
               :src="child.avatar"
+              :style="specialHandle(item.group.length)"
             />
           </div>
           <div class="proportion-line-item">
             <div class="proportion-line">
-              <div class="reality-ratio-line" :style="`width: ${item.number * 100 - 9}%`">
+              <div
+                class="reality-ratio-line"
+                :style="`width: ${(item.number / baseLineList[baseLineList.length - 2]) * 100 - 9}%`"
+              >
                 <div class="ratio">{{ item.number }}</div>
               </div>
             </div>
@@ -32,7 +36,7 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, computed } from "vue";
 const baseLineList = [0, 0.2, 0.4, 0.6, 0.8, 1, "数量"];
 const props = defineProps({
   title: {
@@ -44,6 +48,18 @@ const props = defineProps({
     default: []
   }
 });
+
+const specialHandle = computed(() => {
+  return (length) => {
+    if (length > 2) {
+      return {
+        width: "25px",
+        height: "25px",
+        marginRight: "3px"
+      };
+    }
+  };
+});
 </script>
 
 <style scoped lang="less">
@@ -98,6 +114,7 @@ const props = defineProps({
         align-items: center;
         .avatar-list {
           display: flex;
+          justify-content: flex-start;
           .avatar-item {
             width: 32px;
             height: 32px;

src/views/LinkPrediction/components/userPanel.vue

@@ -2,14 +2,14 @@
   <div class="userPanel-component">
     <img :src="title" alt="" class="title" />
     <div class="user-list">
-      <div class="a-pair-user-item" v-for="(group, index) in userList" :key="index">
+      <div class="a-pair-user-item" v-for="(group, index) in userList" :key="group.id">
         <div
           class="shadow-box"
           @click="handleUserItem(index, group)"
           :class="{ active: curUserGroupIndex == index }"
         >
-          <div class="group-type"></div>
-          <div class="user-list-item" v-for="child in group" :key="child.id">
+          <div class="group-type">{{ group.type }}</div>
+          <div class="user-list-item" v-for="child in group.list" :key="child.id">
             <img :src="child.avatar" alt="" class="avatar" />
             <div class="user-info">
               <div class="username">{{ child.name }}</div>
@@ -73,6 +73,9 @@ const handleUserItem = (index, group = {}) => {
         width: 100%;
         cursor: pointer;
         padding: 0px 10px;
+        .group-type {
+          color: #fff;
+        }
         &:hover {
           border-radius: 4px;
           background-image: linear-gradient(to right, #0876be, #0ea7d500);