1
This commit is contained in:
qumeng039@126.com
parent
908bcfc5b1
commit
99acd814eb
|
|
@ -249,6 +249,7 @@ const showToggleJianjie = ref(false);
|
|||
<style scoped>
|
||||
.app-container {
|
||||
width: 100vw;
|
||||
padding-bottom: 20px;
|
||||
background-image: url("./assets/images/bci.png");
|
||||
background-size:cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -272,7 +273,7 @@ const showToggleJianjie = ref(false);
|
|||
}
|
||||
.aside {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
height: 954px;
|
||||
border: 2px;
|
||||
padding: 16px;
|
||||
left: 16px;
|
||||
|
|
|
|||
|
|
@ -47,14 +47,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
|
||||
import LeaderList from './KeyNodeRecognition1/components/LeaderList.vue';
|
||||
import GraphPanel from './KeyNodeRecognition1/components/GraphPanel.vue';
|
||||
import DetailsModal from './KeyNodeRecognition1/components/DetailsModal.vue';
|
||||
import LeaderDetailDialog from './KeyNodeRecognition1/components/LeaderDetailDialog.vue';
|
||||
import PostDetailDialog from './KeyNodeRecognition1/components/PostDetailDialog.vue';
|
||||
import LeaderList from "./KeyNodeRecognition1/components/LeaderList.vue";
|
||||
import GraphPanel from "./KeyNodeRecognition1/components/GraphPanel.vue";
|
||||
import DetailsModal from "./KeyNodeRecognition1/components/DetailsModal.vue";
|
||||
import LeaderDetailDialog from "./KeyNodeRecognition1/components/LeaderDetailDialog.vue";
|
||||
import PostDetailDialog from "./KeyNodeRecognition1/components/PostDetailDialog.vue";
|
||||
|
||||
import LeaderAnalysis from "./KeyNodeRecognition1/components/LeaderAnalysis.vue";
|
||||
import EventHeatmap from "../components/weight/EventHeatmap.vue";
|
||||
|
|
@ -224,4 +224,38 @@ const wordCloudData = ref([
|
|||
.leader-containner2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:deep(.custom-leader-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<div class="content">
|
||||
<!-- Title Image: using a placeholder as the local asset is not available -->
|
||||
<img
|
||||
src="../../assets/images/chuanbofenxititle.png"
|
||||
src="@/assets/images/chuanbofenxititle.png"
|
||||
alt="传播意见领袖分析"
|
||||
class="title-img"
|
||||
style="margin-top: -22px; margin-left: -24px"
|
||||
|
|
|
|||
|
|
@ -1,83 +1,77 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-dialog">
|
||||
<template v-if="store.activeLeader">
|
||||
<img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-content-leaderInfo">
|
||||
<img class="leaderInfo-avatar" :src="store.activeLeader.leaderOriginInfo.avatar" alt="" />
|
||||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">
|
||||
粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="post-number">
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-leader-dialog">
|
||||
<img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-content-leaderInfo">
|
||||
<img class="leaderInfo-avatar" :src="store.activeLeader.leaderOriginInfo.avatar" alt="" />
|
||||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="post-number">发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-post">
|
||||
<div class="leader-post-detail-content">
|
||||
<div
|
||||
class="content-item"
|
||||
v-for="item in store.activeLeader.leaderOriginInfo.labelling"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="item-type">{{ item.type }}</div>
|
||||
<div class="item-content">{{ item.content }}</div>
|
||||
<div class="item-heat">
|
||||
<div class="item-time">{{ item.time }}</div>
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ item.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ item.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ item.transmit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-post">
|
||||
<div class="leader-post-detail-content">
|
||||
<div
|
||||
class="content-item"
|
||||
v-for="item in store.activeLeader.leaderOriginInfo.labelling"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="item-type">{{ item.type }}</div>
|
||||
<div class="item-content">{{ item.content }}</div>
|
||||
<div class="item-heat">
|
||||
<div class="item-time">{{ item.time }}</div>
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ item.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ item.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ item.transmit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-heat-degree">
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
粉丝数量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
关注数量: 1329
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
发帖总数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
贴文被转总数: 1329
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
参与互动次数: 30
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
首次活跃事件: 2022.7.31 00:14
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-heat-degree">
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
粉丝数量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
关注数量: 1329
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
发帖总数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
贴文被转总数: 1329
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
参与互动次数: 30
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
首次活跃事件: 2022.7.31 00:14
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -92,25 +86,10 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
.dialogTitleImg {
|
||||
margin-top: -23px;
|
||||
}
|
||||
:deep(.custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
.dialog-content-leaderInfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
@ -209,4 +188,4 @@ const isVisible = computed({
|
|||
margin-right: 10px;
|
||||
box-shadow: 0 4px 8px rgb(0, 123, 255);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,33 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-leader-post-dialog">
|
||||
<template v-if="store.currentPost">
|
||||
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
|
||||
<div class="dialog-content">
|
||||
<div class="content">{{ store.currentPost.content }}</div>
|
||||
<div class="heat">
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ store.currentPost.transmit }}
|
||||
</div>
|
||||
<template v-if="store.currentPost">
|
||||
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
|
||||
<div class="dialog-content">
|
||||
<div class="content">{{ store.currentPost.content }}</div>
|
||||
<div class="heat">
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
|
||||
store.currentPost.transmit
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore1';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore1";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -39,22 +41,7 @@ const isVisible = computed({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
<style>
|
||||
.content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
|
|
@ -64,6 +51,9 @@ const isVisible = computed({
|
|||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.heat .item-heat-detail {
|
||||
display: flex;
|
||||
}
|
||||
.heat .item-heat-detail div {
|
||||
width: 70px;
|
||||
color: #fff;
|
||||
|
|
@ -73,4 +63,4 @@ const isVisible = computed({
|
|||
margin-top: -24px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import Cache from "@/utils/cache";
|
|||
// ---【新代码】导入第一个父节点的 10 个子节点的头像 （替换为上述前10个头像，路径为images/leader）---
|
||||
import node1_1 from "@/assets/images/leader/The Spectator Index.png";
|
||||
import node1_2 from "@/assets/images/leader/自由時報_ziyoushibao.png";
|
||||
import node1_3 from "@/assets/images/qiaoliang/Andy Ngo.png";//缺失
|
||||
import node1_3 from "@/assets/images/qiaoliang/Andy Ngo.png"; //缺失
|
||||
import node1_4 from "@/assets/images/leader/Viscosity🧩Solutions.png";
|
||||
import node1_5 from "@/assets/images/leader/Insider Paper.png";
|
||||
import node1_6 from "@/assets/images/leader/रV Sinघ.png";
|
||||
|
|
@ -75,7 +75,7 @@ import node5_4 from "@/assets/images/leader/Radio.png";
|
|||
import node5_5 from "@/assets/images/leader/Rafael Fontana.png";
|
||||
import node5_6 from "@/assets/images/leader/Indo-Pacific News - Watching the CCP-China Threat.png";
|
||||
import node5_7 from "@/assets/images/leader/🍁RASTA MAN™🍁.png";
|
||||
import node5_8 from "@/assets/images/qiaoliang/THEE((L'EtatC'estMoi))🎗️.png";//缺失
|
||||
import node5_8 from "@/assets/images/qiaoliang/THEE((L'EtatC'estMoi))🎗️.png"; //缺失
|
||||
import node5_9 from "@/assets/images/leader/Mundo News.png";
|
||||
import node5_10 from "@/assets/images/leader/迷人的小红🇨🇳.png";
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ import node8_5 from "@/assets/images/leader/911news.png";
|
|||
import node8_6 from "@/assets/images/leader/Navar 🇧🇷🇷🇺.png";
|
||||
import node8_7 from "@/assets/images/leader/Kingmoj.png";
|
||||
import node8_8 from "@/assets/images/leader/Hosanna Revivals.png";
|
||||
import node8_9 from "@/assets/images/qiaoliang/SilbernagelSimos.png";//缺失
|
||||
import node8_9 from "@/assets/images/qiaoliang/SilbernagelSimos.png"; //缺失
|
||||
|
||||
// --- 导入第九个父节点的 9 个子节点的头像 ---
|
||||
import node9_1 from "@/assets/images/leader/Go22.png";
|
||||
|
|
@ -250,7 +250,6 @@ const node9Followers = [
|
|||
{ name: "从头再来_congtouzailai", avatar: node9_9 }
|
||||
];
|
||||
|
||||
|
||||
const allLeaderData = ref(props.allLeaderData);
|
||||
const chart = ref(null);
|
||||
const allGraphData = ref({ nodes: [], edges: [] });
|
||||
|
|
@ -270,15 +269,30 @@ const getCircleAvatar = async (avatarUrl) => {
|
|||
const initAllGraphData = async () => {
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
|
||||
|
||||
const node2Avatars = [
|
||||
node2_1, node2_2, node2_3, node2_4, node2_5,
|
||||
node2_6, node2_7, node2_8, node2_9, node2_10
|
||||
node2_1,
|
||||
node2_2,
|
||||
node2_3,
|
||||
node2_4,
|
||||
node2_5,
|
||||
node2_6,
|
||||
node2_7,
|
||||
node2_8,
|
||||
node2_9,
|
||||
node2_10
|
||||
];
|
||||
const node2Names = [
|
||||
'Andy Ngo', 'Andy Ngo', 'Ian Miles Cheong', '简爱_jianai',
|
||||
'唯有基督拯救人类！', 'wethenorth - 1984', 'Lomt Lea🅰️',
|
||||
'Chad Felix Greene 🇮🇱', 'AlinaSalazarGongora', 'Gary Du'
|
||||
"Andy Ngo",
|
||||
"Andy Ngo",
|
||||
"Ian Miles Cheong",
|
||||
"简爱_jianai",
|
||||
"唯有基督拯救人类！",
|
||||
"wethenorth - 1984",
|
||||
"Lomt Lea🅰️",
|
||||
"Chad Felix Greene 🇮🇱",
|
||||
"AlinaSalazarGongora",
|
||||
"Gary Du"
|
||||
];
|
||||
|
||||
for (const [leaderIndex, leader] of allLeaderData.value.entries()) {
|
||||
|
|
@ -305,7 +319,7 @@ const initAllGraphData = async () => {
|
|||
if (leaderIndex === 0 && i < node1Followers.length) {
|
||||
const followerData = node1Followers[i];
|
||||
const currentAvatar = followerData.avatar;
|
||||
|
||||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
|
|
@ -321,11 +335,11 @@ const initAllGraphData = async () => {
|
|||
// 为第二个父节点（索引为1）的子节点添加指定头像
|
||||
else if (leaderIndex === 1 && i < 10) {
|
||||
const currentAvatar = node2Avatars[i];
|
||||
|
||||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: node2Names[i],
|
||||
name: node2Names[i],
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
|
|
@ -341,13 +355,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -358,13 +372,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -375,13 +389,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -392,13 +406,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -486,68 +500,66 @@ const initAllGraphData = async () => {
|
|||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// 对于所有其他情况（或超出指定数量的子节点），使用原来的蓝色圆点
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
||||
|
||||
// 仅当节点被实际添加时，才创建边
|
||||
if (nodeAdded) {
|
||||
edges.push({
|
||||
source: leader.id,
|
||||
target: userId
|
||||
});
|
||||
edges.push({
|
||||
source: leader.id,
|
||||
target: userId
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 随机生成若干散点
|
||||
const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
for (let i = 0; i < splatteringCount; i++) {
|
||||
const userId = `user_splattering_${i}`;
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
// for (let i = 0; i < splatteringCount; i++) {
|
||||
// const userId = `user_splattering_${i}`;
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
allGraphData.value = { nodes, edges };
|
||||
console.log(allGraphData.value);
|
||||
};
|
||||
|
||||
|
||||
// 根据timestamp筛选要显示的节点和边 和散点
|
||||
const getVisibleGraphData = () => {
|
||||
const leaders = allLeaderData.value.slice(0, props.timestamp);
|
||||
|
|
@ -690,4 +702,4 @@ defineExpose({
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,17 @@
|
|||
:panelTrendData="[40105, 24845, 27917, 717, 444]"
|
||||
:panelXAxisLabels="['2023.10.11', '2023.10.14', '2023.10.18', '2023.10.22', '2023.10.25']"
|
||||
:granularTrendData="[28545, 13922, 13719, 16651, 18240, 2205, 274, 157, 315]"
|
||||
:granularXAxisLabels="['10.9 13h', '10.11 14h', '10.13 16h', '10.15 17h', '10.17 18h', '10.19 20h', '10.21 21h', '10.23 22h', '10.25 23h']"
|
||||
:granularXAxisLabels="[
|
||||
'10.9 13h',
|
||||
'10.11 14h',
|
||||
'10.13 16h',
|
||||
'10.15 17h',
|
||||
'10.17 18h',
|
||||
'10.19 20h',
|
||||
'10.21 21h',
|
||||
'10.23 22h',
|
||||
'10.25 23h'
|
||||
]"
|
||||
/>
|
||||
<PostDynamics :posts="store.posts" @handle:openDialog="handleOpenPostDialog" />
|
||||
<WordCloud :wordsCloudList="wordCloudData" />
|
||||
|
|
@ -29,14 +39,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
|
||||
import LeaderList from './KeyNodeRecognition2/components/LeaderList.vue';
|
||||
import GraphPanel from './KeyNodeRecognition2/components/GraphPanel.vue';
|
||||
import DetailsModal from './KeyNodeRecognition2/components/DetailsModal.vue';
|
||||
import LeaderDetailDialog from './KeyNodeRecognition2/components/LeaderDetailDialog.vue';
|
||||
import PostDetailDialog from './KeyNodeRecognition2/components/PostDetailDialog.vue';
|
||||
import LeaderList from "./KeyNodeRecognition2/components/LeaderList.vue";
|
||||
import GraphPanel from "./KeyNodeRecognition2/components/GraphPanel.vue";
|
||||
import DetailsModal from "./KeyNodeRecognition2/components/DetailsModal.vue";
|
||||
import LeaderDetailDialog from "./KeyNodeRecognition2/components/LeaderDetailDialog.vue";
|
||||
import PostDetailDialog from "./KeyNodeRecognition2/components/PostDetailDialog.vue";
|
||||
|
||||
import LeaderAnalysis from "./KeyNodeRecognition2/components/LeaderAnalysis.vue";
|
||||
import EventHeatmap from "../components/weight/EventHeatmap.vue";
|
||||
|
|
@ -267,4 +277,44 @@ const wordCloudData = ref([
|
|||
.leader-containner2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:deep(.leader-custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1) !important;
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
:deep(.leader-custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
background-color: rgba(6, 45, 90, 1) !important;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
|
||||
:deep(.custom-leader-post-dialog) .dialog-content .content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,7 @@
|
|||
<div class="content">
|
||||
<!-- Title Image: using a placeholder as the local asset is not available -->
|
||||
<img
|
||||
src="../../assets/images/chuanbofenxititle.png"
|
||||
alt="传播意见领袖分析"
|
||||
src="../../../assets/images/chuanbo-show-title.png"
|
||||
class="title-img"
|
||||
style="margin-top: -22px; margin-left: -24px"
|
||||
/>
|
||||
|
|
@ -89,7 +88,7 @@
|
|||
</div>
|
||||
<!-- X-Axis Labels -->
|
||||
<div class="x-axis-labels">
|
||||
<span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
|
||||
<span v-for="n in 6" :key="n">{{ ((chart.max / 5) * (n - 1)).toFixed(0) }}</span>
|
||||
<span class="unit">{{ chart.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,30 +107,30 @@ const chartData = ref([
|
|||
id: 1,
|
||||
title: "平均发帖数",
|
||||
unit: "数量",
|
||||
max: 10,
|
||||
max: 20,
|
||||
rows: [
|
||||
{ label: "领袖", value: 6.4, type: "leader" },
|
||||
{ label: "所有用户", value: 0.46, type: "user" }
|
||||
{ label: "桥梁节点", value: 14.4, type: "leader" },
|
||||
{ label: "其他节点", value: 5.2, type: "user" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "帖子平均生存周期",
|
||||
unit: "天数",
|
||||
max: 10,
|
||||
unit: "分钟",
|
||||
max: 40,
|
||||
rows: [
|
||||
{ label: "领袖", value: 2.73, type: "leader" },
|
||||
{ label: "所有用户", value: 2.32, type: "user" }
|
||||
{ label: "桥梁节点", value: (2245.87 / 60).toFixed(2), type: "leader" },
|
||||
{ label: "其他节点", value: (67.43 / 60).toFixed(2), type: "user" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "平均粉丝数",
|
||||
unit: "天数",
|
||||
max: 10,
|
||||
unit: "数量",
|
||||
max: 1200,
|
||||
rows: [
|
||||
{ label: "领袖", value: 290.4, type: "leader", highlight: false },
|
||||
{ label: "所有用户", value: 1.31, type: "user" }
|
||||
{ label: "桥梁节点", value: 1033, type: "leader", highlight: false },
|
||||
{ label: "其他节点", value: 120, type: "user" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-dialog">
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="leader-custom-dialog">
|
||||
<template v-if="store.activeLeader">
|
||||
<img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
|
|
@ -8,9 +8,7 @@
|
|||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">
|
||||
粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="post-number">
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
|
|
@ -75,9 +73,9 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -92,25 +90,10 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-dialog) {
|
||||
width: 640px;
|
||||
height: 680px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
}
|
||||
.dialogTitleImg {
|
||||
margin-top: -23px;
|
||||
}
|
||||
:deep(.custom-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 23px 23px;
|
||||
}
|
||||
|
||||
.dialog-content-leaderInfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
@ -209,4 +192,4 @@ const isVisible = computed({
|
|||
margin-right: 10px;
|
||||
box-shadow: 0 4px 8px rgb(0, 123, 255);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="custom-leader-post-dialog">
|
||||
<template v-if="store.currentPost">
|
||||
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
|
||||
<div class="dialog-content">
|
||||
<div class="content">{{ store.currentPost.content }}</div>
|
||||
<div class="heat">
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{ store.currentPost.transmit }}
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
|
||||
<div class="dialog-content">
|
||||
<div class="content">{{ store.currentPost.content }}</div>
|
||||
<div class="heat">
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<Icon icon="ei:like" width="25" height="25" /> {{ store.currentPost.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<Icon icon="la:comment-dots" width="25" height="25" /> {{ store.currentPost.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<Icon icon="mdi:share-outline" width="25" height="25" /> {{
|
||||
store.currentPost.transmit
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useKeyNodeStore } from '@/store/keyNodeStore2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore();
|
||||
|
||||
|
|
@ -40,30 +40,14 @@ const isVisible = computed({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-leader-post-dialog) {
|
||||
width: 640px;
|
||||
border-width: 0px, 0px, 0px, 0px;
|
||||
border-style: solid;
|
||||
border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
background-color: rgba(6, 45, 90, 1);
|
||||
border: 1px solid #1a8bff;
|
||||
border-radius: 2px;
|
||||
padding: 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
:deep(.custom-leader-post-dialog) .dialog-content {
|
||||
width: 100%;
|
||||
padding: 25px 25px;
|
||||
}
|
||||
.content {
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.heat {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.heat .item-heat-detail {
|
||||
display: flex;
|
||||
}
|
||||
.heat .item-heat-detail div {
|
||||
width: 70px;
|
||||
color: #fff;
|
||||
|
|
@ -73,4 +57,4 @@ const isVisible = computed({
|
|||
margin-top: -24px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,6 @@ import node9_7 from "@/assets/images/qiaoliang/Change Zhang🇨🇦.png";
|
|||
import node9_8 from "@/assets/images/qiaoliang/Andy C.png";
|
||||
import node9_9 from "@/assets/images/qiaoliang/从头再来_congtouzailai.png.png";
|
||||
|
||||
|
||||
const emit = defineEmits(["handle:openDialog"]);
|
||||
const props = defineProps({
|
||||
timestamp: {
|
||||
|
|
@ -249,7 +248,6 @@ const node9Followers = [
|
|||
{ name: "从头再来_congtouzailai", avatar: node9_9 }
|
||||
];
|
||||
|
||||
|
||||
const allLeaderData = ref(props.allLeaderData);
|
||||
const chart = ref(null);
|
||||
const allGraphData = ref({ nodes: [], edges: [] });
|
||||
|
|
@ -269,15 +267,30 @@ const getCircleAvatar = async (avatarUrl) => {
|
|||
const initAllGraphData = async () => {
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
|
||||
|
||||
const node2Avatars = [
|
||||
node2_1, node2_2, node2_3, node2_4, node2_5,
|
||||
node2_6, node2_7, node2_8, node2_9, node2_10
|
||||
node2_1,
|
||||
node2_2,
|
||||
node2_3,
|
||||
node2_4,
|
||||
node2_5,
|
||||
node2_6,
|
||||
node2_7,
|
||||
node2_8,
|
||||
node2_9,
|
||||
node2_10
|
||||
];
|
||||
const node2Names = [
|
||||
'Andy Ngo', 'Andy Ngo', 'Ian Miles Cheong', '简爱_jianai',
|
||||
'唯有基督拯救人类！', 'wethenorth - 1984', 'Lomt Lea🅰️',
|
||||
'Chad Felix Greene 🇮🇱', 'AlinaSalazarGongora', 'Gary Du'
|
||||
"Andy Ngo",
|
||||
"Andy Ngo",
|
||||
"Ian Miles Cheong",
|
||||
"简爱_jianai",
|
||||
"唯有基督拯救人类！",
|
||||
"wethenorth - 1984",
|
||||
"Lomt Lea🅰️",
|
||||
"Chad Felix Greene 🇮🇱",
|
||||
"AlinaSalazarGongora",
|
||||
"Gary Du"
|
||||
];
|
||||
|
||||
for (const [leaderIndex, leader] of allLeaderData.value.entries()) {
|
||||
|
|
@ -304,7 +317,7 @@ const initAllGraphData = async () => {
|
|||
if (leaderIndex === 0 && i < node1Followers.length) {
|
||||
const followerData = node1Followers[i];
|
||||
const currentAvatar = followerData.avatar;
|
||||
|
||||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
|
|
@ -320,11 +333,11 @@ const initAllGraphData = async () => {
|
|||
// 为第二个父节点（索引为1）的子节点添加指定头像
|
||||
else if (leaderIndex === 1 && i < 10) {
|
||||
const currentAvatar = node2Avatars[i];
|
||||
|
||||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: node2Names[i],
|
||||
name: node2Names[i],
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
|
|
@ -340,13 +353,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -357,13 +370,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -374,13 +387,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -391,13 +404,13 @@ const initAllGraphData = async () => {
|
|||
|
||||
const followerAvatar = await getCircleAvatar(currentAvatar);
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
id: userId,
|
||||
name: followerData.name,
|
||||
symbol: `image://${followerAvatar}`,
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
|
@ -485,68 +498,66 @@ const initAllGraphData = async () => {
|
|||
label: { show: false }
|
||||
});
|
||||
nodeAdded = true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// 对于所有其他情况（或超出指定数量的子节点），使用原来的蓝色圆点
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
nodeAdded = true;
|
||||
}
|
||||
|
||||
|
||||
// 仅当节点被实际添加时，才创建边
|
||||
if (nodeAdded) {
|
||||
edges.push({
|
||||
source: leader.id,
|
||||
target: userId
|
||||
});
|
||||
edges.push({
|
||||
source: leader.id,
|
||||
target: userId
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 随机生成若干散点
|
||||
const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
for (let i = 0; i < splatteringCount; i++) {
|
||||
const userId = `user_splattering_${i}`;
|
||||
nodes.push({
|
||||
id: userId,
|
||||
name: `user ${i}`,
|
||||
symbol: "circle",
|
||||
symbolSize: 25,
|
||||
category: 1,
|
||||
value: "",
|
||||
label: { show: false },
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#035e96" },
|
||||
{ offset: 1, color: "#34a7b0" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// const splatteringCount = Math.floor(Math.random() * 11) + 10; // 10~20个
|
||||
// for (let i = 0; i < splatteringCount; i++) {
|
||||
// const userId = `user_splattering_${i}`;
|
||||
// nodes.push({
|
||||
// id: userId,
|
||||
// name: `user ${i}`,
|
||||
// symbol: "circle",
|
||||
// symbolSize: 25,
|
||||
// category: 1,
|
||||
// value: "",
|
||||
// label: { show: false },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#035e96" },
|
||||
// { offset: 1, color: "#34a7b0" }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
allGraphData.value = { nodes, edges };
|
||||
console.log(allGraphData.value);
|
||||
};
|
||||
|
||||
|
||||
// 根据timestamp筛选要显示的节点和边 和散点
|
||||
const getVisibleGraphData = () => {
|
||||
const leaders = allLeaderData.value.slice(0, props.timestamp);
|
||||
|
|
@ -689,4 +700,4 @@ defineExpose({
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user