社交紧密团体识别完
This commit is contained in:
parent
f017557e31
commit
eac988ae3c
|
|
@ -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" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user