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

Compare commits

base: changyunju:907d9c7380eaa8d9227764f56f5db9d2f9ca9641
Branches Tags
changyunju:master
changyunju:page123
changyunju:page2
changyunju:cyj0707
changyunju:link11
changyunju:link1
changyunju:bigevent
changyunju:qumeng
changyunju:liandong
...
compare: changyunju:7ba51745388111bc324570291db17fbde2790c7c
Branches Tags
changyunju:master
changyunju:page123
changyunju:page2
changyunju:cyj0707
changyunju:link11
changyunju:link1
changyunju:bigevent
changyunju:qumeng
changyunju:liandong

2 Commits
907d9c7380 ... 7ba5174538

Author SHA1 Message Date
changyunju
7ba5174538 page1整体实现，部分样式效果需要优化 
Signed-off-by: changyunju <2743319061@qq.com>
 2025-06-24 11:17:56 +08:00
changyunju
4896f70249 page1效果基本实现，部分样式需要qumeng进一步优化 
Signed-off-by: changyunju <2743319061@qq.com>
 2025-06-24 11:15:29 +08:00
2 changed files with 32 additions and 31 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./src/assets/images/Union.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态社交网络演化计算系统CYJ0617</title>
<title>动态社交网络演化计算系统CYJ0624</title>
</head>
<body>
<div id="app"></div>

61
src/views/KeyNodeRecognition1.vue
View File

@ -107,23 +107,32 @@ import WordCloud from './KeyNodeRecognition1/WordCloud.vue';
const activeTimePoint = ref(1);
const timePoints = ref(Array.from({ length: 10 }, (_, i) => ({ id: i + 1 })));
// [更新] 所有头像路径已修改为 new URL() 格式
// [更新] 替换为新的10人意见领袖数据，并格式化
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: 'bidishalolo', name: 'bidishalolo', 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: 'mickwallace', name: 'Mick Wallace', followers: '24.8万', posts: '10259', avatar: new URL('@/assets/images/mick.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: '2', name: 'Nancy Pelosi', followers: '1780万', posts: '320', avatar: new URL('@/assets/images/pelosi.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: '7', name: 'User C', followers: '8000', posts: '120', avatar: new URL('@/assets/images/user-c.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: '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', chineseName: null, followers: '2387', posts: '8380', avatar: new URL('@/assets/images/bidishalolo.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: '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: 'mickwallace', name: 'Mick Wallace', chineseName: null, followers: '24.8万', posts: '10259', avatar: new URL('@/assets/images/mick.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: 'jiushiniya', name: 'Jiushiniya', chineseName: null, followers: '557', posts: '16020', avatar: new URL('@/assets/images/jiushiniya.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: '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 = {
'0': { x: 180, y: 120 }, 'bidishalolo': { x: 400, y: 150 }, '2': { x: 580, y: 200 },
'6': { x: 820, y: 160 }, '1': { x: 350, y: 350 }, '5': { x: 200, y: 500 },
'mickwallace': { x: 480, y: 550 }, '7': { x: 680, y: 500 }, '8': { x: 850, y: 550 },
'reuters': { x: 150, y: 150 },
'spectator': { x: 350, y: 350 },
'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));
@ -164,21 +173,14 @@ const allGraphNodes = computed(() => {
return [...leaderNodes, ...userNodes];
});
const allGraphLinks = computed(() => {
const links = [
{ source: '0', target: 'bidishalolo' }, { source: '0', target: '1' }, { source: '0', target: 'user_1' },
{ source: 'bidishalolo', target: '2' }, { source: 'bidishalolo', target: 'user_2' },
{ source: '1', target: '5' }, { source: '1', target: 'mickwallace' },
{ source: '2', target: '6' }, { source: '2', target: 'user_5' },
{ 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;
});
// [更新] 为新的人物创建示例连接
const allGraphLinks = computed(() => [
{ source: 'reuters', target: 'spectator' }, { source: 'reuters', target: 'indopacific' },
{ source: 'liuxiaoming', target: 'huxijin' }, { source: 'huxijin', target: 'mickwallace' },
{ source: 'spectator', target: 'liuxiaoming' }, { source: 'jiushiniya', target: 'levi_godman' },
{ source: 'bidishalolo', target: 'indobosss' },
//... 随机连接到普通用户
]);
// ===================================================================
// 核心交互逻辑
@ -296,5 +298,4 @@ onUnmounted(() => {
.modal-content { position: relative; background-color: #0d1b38; padding: 20px; border-radius: 8px; border: 1px solid #3a95ff; box-shadow: 0 0 25px rgba(58, 149, 255, 0.5); width: 80vw; height: 75vh; display: flex; flex-direction: column; }
.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; }
</style>
<!-- 固定位置的联动版佩罗西图是实现 -->
</style>