changyunju/SocialNetworks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page1效果基本实现，部分样式需要qumeng进一步优化

Browse Source 
Signed-off-by: changyunju <2743319061@qq.com>
This commit is contained in:
changyunju 2025-06-24 11:15:29 +08:00
parent 907d9c7380
commit 4896f70249
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/KeyNodeRecognition1.vue
View File

@ -107,23 +107,32 @@ import WordCloud from './KeyNodeRecognition1/WordCloud.vue';
const activeTimePoint = ref(1); const activeTimePoint = ref(1);
const timePoints = ref(Array.from({ length: 10 }, (_, i) => ({ id: i + 1 }))); const timePoints = ref(Array.from({ length: 10 }, (_, i) => ({ id: i + 1 })));
// [更新] 所有头像路径已修改为 new URL() 格式 // [更新] 替换为新的10人意见领袖数据，并格式化
const allLeaderData = ref([ const allLeaderData = ref([
{ id: '5', name: 'Hu Xijin', chineseName: '胡锡进', followers: '53.8万', posts: '54', avatar: new URL('@/assets/images/huxijin.png', import.meta.url).href, category: '自媒体' }, { id: 'huxijin', name: 'Hu Xijin', chineseName: '胡锡进', followers: '53.8万', posts: '54', avatar: new URL('@/assets/images/huxijin.png', import.meta.url).href, category: '自媒体' },
{ id: 'bidishalolo', name: 'bidishalolo', followers: '2387', posts: '8380', avatar: new URL('@/assets/images/bidishalolo.png', import.meta.url).href, category: '自媒体' }, { id: 'bidishalolo', name: 'bidishalolo', chineseName: null, followers: '2387', posts: '8380', avatar: new URL('@/assets/images/bidishalolo.png', import.meta.url).href, category: '自媒体' },
{ id: '1', name: 'The Spectator Index', followers: '233.5万', posts: '56', avatar: new URL('@/assets/images/spectator.png', import.meta.url).href, category: '新闻媒体' }, { id: 'indopacific', name: 'Indo-Pacific News', chineseName: null, followers: '11.5万', posts: '11.3万', avatar: new URL('@/assets/images/indo.png', import.meta.url).href, category: '新闻媒体' },
{ id: 'mickwallace', name: 'Mick Wallace', followers: '24.8万', posts: '10259', avatar: new URL('@/assets/images/mick.png', import.meta.url).href, category: '自媒体' }, { id: 'spectator', name: 'The Spectator Index', chineseName: null, followers: '233.5万', posts: '56', avatar: new URL('@/assets/images/spectator.png', import.meta.url).href, category: '新闻媒体' },
{ id: '0', name: 'China Coast Guard', chineseName: '中国海警', followers: '120万', posts: '88', avatar: new URL('@/assets/images/chinacoastguard.png', import.meta.url).href, category: '政府官号' }, { id: 'mickwallace', name: 'Mick Wallace', chineseName: null, followers: '24.8万', posts: '10259', avatar: new URL('@/assets/images/mick.png', import.meta.url).href, category: '自媒体' },
{ id: '2', name: 'Nancy Pelosi', followers: '1780万', posts: '320', avatar: new URL('@/assets/images/pelosi.png', import.meta.url).href, category: '政府官号' }, { id: 'reuters', name: 'Reuters', chineseName: null, followers: '2575.7万', posts: '98', avatar: new URL('@/assets/images/reuters.png', import.meta.url).href, category: '新闻媒体' },
{ id: '6', name: 'Cat Avatar User', followers: '1.2万', posts: '950', avatar: new URL('@/assets/images/cat.png', import.meta.url).href, category: '自媒体' }, { id: 'jiushiniya', name: 'Jiushiniya', chineseName: null, followers: '557', posts: '16020', avatar: new URL('@/assets/images/jiushiniya.png', import.meta.url).href, category: '自媒体' },
{ id: '7', name: 'User C', followers: '8000', posts: '120', avatar: new URL('@/assets/images/user-c.png', import.meta.url).href, category: '自媒体' }, { id: 'levi_godman', name: 'Levi_godman', chineseName: null, followers: '4.6万', posts: '12847', avatar: new URL('@/assets/images/levi.png', import.meta.url).href, category: '自媒体' },
{ id: '8', name: 'Default User', followers: '500', posts: '30', avatar: new URL('@/assets/images/user-default.png', import.meta.url).href, category: '自媒体' }, { id: 'liuxiaoming', name: 'Liu Xiaoming', chineseName: '刘晓明', followers: '33.8万', posts: '8757', avatar: new URL('@/assets/images/liuxiaoming.png', import.meta.url).href, category: '自媒体' },
{ id: 'indobosss', name: 'indobosss', chineseName: null, followers: '32', posts: '1403', avatar: new URL('@/assets/images/indobosss.png', import.meta.url).href, category: '自媒体' },
]); ]);
// [更新] 为新的10位领袖定义固定坐标
const nodeCoordinates = { const nodeCoordinates = {
'0': { x: 180, y: 120 }, 'bidishalolo': { x: 400, y: 150 }, '2': { x: 580, y: 200 }, 'reuters': { x: 150, y: 150 },
'6': { x: 820, y: 160 }, '1': { x: 350, y: 350 }, '5': { x: 200, y: 500 }, 'spectator': { x: 350, y: 350 },
'mickwallace': { x: 480, y: 550 }, '7': { x: 680, y: 500 }, '8': { x: 850, y: 550 }, 'indopacific': { x: 600, y: 450 },
'liuxiaoming': { x: 400, y: 120 },
'huxijin': { x: 200, y: 500 },
'mickwallace': { x: 480, y: 550 },
'jiushiniya': { x: 650, y: 180 },
'levi_godman': { x: 850, y: 250 },
'bidishalolo': { x: 800, y: 500 },
'indobosss': { x: 600, y: 600 },
}; };
const visibleLeaders = computed(() => allLeaderData.value.slice(0, activeTimePoint.value)); const visibleLeaders = computed(() => allLeaderData.value.slice(0, activeTimePoint.value));
@ -164,21 +173,14 @@ const allGraphNodes = computed(() => {
return [...leaderNodes, ...userNodes]; return [...leaderNodes, ...userNodes];
}); });
const allGraphLinks = computed(() => { // [更新] 为新的人物创建示例连接
const links = [ const allGraphLinks = computed(() => [
{ source: '0', target: 'bidishalolo' }, { source: '0', target: '1' }, { source: '0', target: 'user_1' }, { source: 'reuters', target: 'spectator' }, { source: 'reuters', target: 'indopacific' },
{ source: 'bidishalolo', target: '2' }, { source: 'bidishalolo', target: 'user_2' }, { source: 'liuxiaoming', target: 'huxijin' }, { source: 'huxijin', target: 'mickwallace' },
{ source: '1', target: '5' }, { source: '1', target: 'mickwallace' }, { source: 'spectator', target: 'liuxiaoming' }, { source: 'jiushiniya', target: 'levi_godman' },
{ source: '2', target: '6' }, { source: '2', target: 'user_5' }, { source: 'bidishalolo', target: 'indobosss' },
{ source: '5', target: 'mickwallace' }, { source: '7', target: '8' } //... 随机连接到普通用户
]; ]);
for (let i = 0; i < 30; i++) {
const sourceId = `user_${Math.floor(Math.random() * 40)}`;
const targetKey = Object.keys(nodeCoordinates)[Math.floor(Math.random() * Object.keys(nodeCoordinates).length)];
links.push({ source: sourceId, target: targetKey });
}
return links;
});
// =================================================================== // ===================================================================
// 核心交互逻辑 // 核心交互逻辑
@ -297,4 +299,3 @@ onUnmounted(() => {
.close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #a7c5d4; font-size: 24px; cursor: pointer; } .close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #a7c5d4; font-size: 24px; cursor: pointer; }
.details-chart-container { width: 100%; flex-grow: 1; } .details-chart-container { width: 100%; flex-grow: 1; }
</style> </style>
<!-- 固定位置的联动版佩罗西图是实现 -->