社交紧密团体识别完

This commit is contained in:
qumeng039@126.com 2025-07-18 14:04:12 +08:00
parent f017557e31
commit eac988ae3c
3 changed files with 119 additions and 83 deletions

View File

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

View File

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

View File

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