duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
qumeng039@126.com 2025-09-09 10:45:04 +08:00
parent d280a0e1b4
commit eeef6d2e89
16 changed files with 158 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

BIN
src/assets/images/head/anchorUserTitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

1
src/views/GroupEvolution/components/groupGraph.vue
View File

@ -358,6 +358,7 @@ watch(
width: 100%;
height: 100%;
position: relative;
backdrop-filter: blur(5px);
.titleImage {
margin: 0 auto;
}

74
src/views/KeyNodeDiscern/anchorRecommendation/components/userPanel.vue
View File

@ -1,16 +1,18 @@
<template>
<div class="userPanel-container">
<img src="@/assets/images/head/anchorUserListTitle2.png" class="headerImage" />
<div class="tabs">
<div class="tabs-switch">
<div
class="switch-item"
v-for="item in tabsSwitch"
:key="item"
@click="swichToTabs(item)"
:class="{ 'tabsSwich-active': KeyNodeOneStore.currentTabType == item }"
>
{{ item }}
<img src="@/assets/images/head/anchorUserTitle.png" class="headerImage" />
<div class="tabs-beside">
<div class="tabs">
<div class="tabs-switch">
<div
class="switch-item"
v-for="item in tabsSwitch"
:key="item"
@click="swichToTabs(item)"
:class="{ 'tabsSwich-active': KeyNodeOneStore.currentTabType == item }"
>
{{ item }}
</div>
</div>
</div>
<div class="tabs-list">
@ -72,34 +74,38 @@ const highLightNodeHandle = (item) => {
display: flex;
flex-direction: column;
.headerImage {
width: 100%;
height: 55px;
margin-top: vh(-8);
}
.tabs {
.tabs-beside {
flex: 1;
padding: vh(10) vw(20);
.tabs-switch {
margin: 0 auto;
display: flex;
justify-content: space-between;
.switch-item {
flex: 1;
padding: vh(4) 0;
.tabs {
.tabs-switch {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
border: vw(1) solid #20406e;
font-size: vw(14);
cursor: pointer;
color: #cccccc9d;
&:first-child {
border-radius: vw(5) 0 0 vw(5);
}
&:last-child {
border-radius: 0 vw(5) vw(5) 0;
justify-content: space-between;
.switch-item {
flex: 1;
padding: vh(4) vw(0);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #20406e;
font-size: vw(14);
cursor: pointer;
color: #cccccc9d;
&:first-child {
border-radius: vw(5) 0 0 vw(5);
}
&:last-child {
border-radius: 0 vw(5) vw(5) 0;
}
}
}
}
.tabs-list {
width: 100%;
height: vh(430);
@ -172,9 +178,9 @@ const highLightNodeHandle = (item) => {
.tabsSwich-active {
width: 100%;
height: 100%;
color: #fff;
color: #fff !important;
opacity: 1;
background-color: #236291;
border: vw(1) solid #3fa9f5;
background-color: #236291 !important;
border: 1px solid #3fa9f5 !important;
}
</style>

1
src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue
View File

@ -568,5 +568,6 @@ defineExpose({ highlightNode })
#bridgeCommunityChart {
width: 100%;
height: vh(500);
backdrop-filter: blur(5px);
}
</style>

1
src/views/KeyNodeDiscern/bridgeCommunication/components/graph/detailCommunityGraph.vue
View File

@ -507,6 +507,7 @@ const handleGoback = () => {
.detailCommunityGraph-component {
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
.container {
width: 100%;
height: 100%;

1
src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
View File

@ -374,6 +374,7 @@ defineExpose({ highlightNode, startAutomaticPlay })
flex-direction: column;
height: 100%;
box-sizing: border-box;
.graph-img-title {
display: absolute;
top: 0;

101
src/views/KeyNodeDiscern/opinionLeader/components/graph/dynamicGraph.vue
View File

@ -400,77 +400,85 @@ const initAllGraphData = async () => {
// 添加随机连边
// 1. 生成意见领袖之间的连边（增加边数，提高网络密度）
const leaderNodes = nodes.filter(node => node.category === 0);
const totalLeaders = leaderNodes.length;
const leaderEdgesToAdd = Math.max(10, Math.floor(totalLeaders * 0.2 * totalLeaders));
const leaderNodes = nodes.filter((node) => node.category === 0)
const totalLeaders = leaderNodes.length
const leaderEdgesToAdd = Math.max(10, Math.floor(totalLeaders * 0.2 * totalLeaders))
// 存储已存在的边，避免重复
const existingEdgeMap = new Set();
edges.forEach(edge => {
existingEdgeMap.add(`${edge.source}_${edge.target}`);
existingEdgeMap.add(`${edge.target}_${edge.source}`);
});
const existingEdgeMap = new Set()
edges.forEach((edge) => {
existingEdgeMap.add(`${edge.source}_${edge.target}`)
existingEdgeMap.add(`${edge.target}_${edge.source}`)
})
// 添加意见领袖之间的随机边
for (let i = 0; i < leaderEdgesToAdd; i++) {
const randomLeader1 = leaderNodes[Math.floor(Math.random() * totalLeaders)];
let randomLeader2 = leaderNodes[Math.floor(Math.random() * totalLeaders)];
const randomLeader1 = leaderNodes[Math.floor(Math.random() * totalLeaders)]
let randomLeader2 = leaderNodes[Math.floor(Math.random() * totalLeaders)]
// 确保不是同一个节点，且边不存在
while (randomLeader1.id === randomLeader2.id || existingEdgeMap.has(`${randomLeader1.id}_${randomLeader2.id}`)) {
randomLeader2 = leaderNodes[Math.floor(Math.random() * totalLeaders)];
while (
randomLeader1.id === randomLeader2.id ||
existingEdgeMap.has(`${randomLeader1.id}_${randomLeader2.id}`)
) {
randomLeader2 = leaderNodes[Math.floor(Math.random() * totalLeaders)]
}
edges.push({
source: randomLeader1.id,
target: randomLeader2.id
});
existingEdgeMap.add(`${randomLeader1.id}_${randomLeader2.id}`);
existingEdgeMap.add(`${randomLeader2.id}_${randomLeader1.id}`);
})
existingEdgeMap.add(`${randomLeader1.id}_${randomLeader2.id}`)
existingEdgeMap.add(`${randomLeader2.id}_${randomLeader1.id}`)
}
// 2. 生成意见领袖与其他领袖的邻居节点之间的连边（大幅增加边数）
const allUsers = nodes.filter(node => node.category === 1);
const totalUsers = allUsers.length;
const userLeaderEdgesToAdd = Math.max(50, Math.floor(totalUsers * 0.15));
const allUsers = nodes.filter((node) => node.category === 1)
const totalUsers = allUsers.length
const userLeaderEdgesToAdd = Math.max(50, Math.floor(totalUsers * 0.15))
for (let i = 0; i < userLeaderEdgesToAdd; i++) {
const randomUser = allUsers[Math.floor(Math.random() * totalUsers)];
const randomLeader = leaderNodes[Math.floor(Math.random() * totalLeaders)];
const randomUser = allUsers[Math.floor(Math.random() * totalUsers)]
const randomLeader = leaderNodes[Math.floor(Math.random() * totalLeaders)]
// 确保用户不是领袖的直接关注者，且边不存在
if (!randomUser.id.includes(randomLeader.id) && !existingEdgeMap.has(`${randomUser.id}_${randomLeader.id}`)) {
if (
!randomUser.id.includes(randomLeader.id) &&
!existingEdgeMap.has(`${randomUser.id}_${randomLeader.id}`)
) {
edges.push({
source: randomLeader.id,
target: randomUser.id
});
existingEdgeMap.add(`${randomUser.id}_${randomLeader.id}`);
existingEdgeMap.add(`${randomLeader.id}_${randomUser.id}`);
})
existingEdgeMap.add(`${randomUser.id}_${randomLeader.id}`)
existingEdgeMap.add(`${randomLeader.id}_${randomUser.id}`)
}
}
// 3. 生成不同领袖的邻居节点之间的连边（大幅增加边数）
const userUserEdgesToAdd = Math.max(100, Math.floor(totalUsers * 0.2));
const userUserEdgesToAdd = Math.max(100, Math.floor(totalUsers * 0.2))
for (let i = 0; i < userUserEdgesToAdd; i++) {
const randomUser1 = allUsers[Math.floor(Math.random() * totalUsers)];
let randomUser2 = allUsers[Math.floor(Math.random() * totalUsers)];
const randomUser1 = allUsers[Math.floor(Math.random() * totalUsers)]
let randomUser2 = allUsers[Math.floor(Math.random() * totalUsers)]
// 确保不是同一个节点，不是来自同一个领袖，且边不存在
while (randomUser1.id === randomUser2.id ||
randomUser1.id.split('_')[1] === randomUser2.id.split('_')[1] ||
existingEdgeMap.has(`${randomUser1.id}_${randomUser2.id}`)) {
randomUser2 = allUsers[Math.floor(Math.random() * totalUsers)];
while (
randomUser1.id === randomUser2.id ||
randomUser1.id.split("_")[1] === randomUser2.id.split("_")[1] ||
existingEdgeMap.has(`${randomUser1.id}_${randomUser2.id}`)
) {
randomUser2 = allUsers[Math.floor(Math.random() * totalUsers)]
}
edges.push({
source: randomUser1.id,
target: randomUser2.id
});
existingEdgeMap.add(`${randomUser1.id}_${randomUser2.id}`);
existingEdgeMap.add(`${randomUser2.id}_${randomUser1.id}`);
})
existingEdgeMap.add(`${randomUser1.id}_${randomUser2.id}`)
existingEdgeMap.add(`${randomUser2.id}_${randomUser1.id}`)
}
allGraphData.value = { nodes, edges }
}
@ -798,5 +806,6 @@ defineExpose({
#container {
width: 100%;
height: 91%;
backdrop-filter: blur(5px);
}
</style>

2
src/views/LinkPrediction/components/communityNode.vue
View File

@ -360,9 +360,11 @@ onMounted(() => {
width: 100%;
height: 100%;
position: relative;
.graph-container {
width: 100%;
height: 93%;
backdrop-filter: blur(5px);
}
.statistic-container {
width: vw(378);

20
src/views/LinkPrediction/components/detailNode.vue
View File

@ -32,6 +32,7 @@
<script setup>
import { onMounted, ref, watch, nextTick, onUnmounted } from "vue"
import { TansTimestamp, getAvatarUrl } from "@/utils/transform"
import { nowSize } from "@/utils/echarts-self-adaption"
import nodeHoverImg from "@/assets/images/nodeHover.png"
import * as echarts from "echarts"
import { storeToRefs } from "pinia"
@ -243,13 +244,13 @@ const initChart = async () => {
},
icon: c.icon
})),
right: 21,
right: nowSize(21),
symbolKeepAspect: false,
bottom: 70,
bottom: nowSize(60),
orient: "vertical",
itemWidth: 16,
itemHeight: 16,
itemGap: 12,
itemWidth: nowSize(16),
itemHeight: nowSize(16),
itemGap: nowSize(12),
backgroundColor: "rgba(0,67,125,0.56)", // 半透明深蓝
borderRadius: 8, // 圆角
borderColor: "#c2f2ff", // 淡蓝色边框
@ -257,7 +258,7 @@ const initChart = async () => {
padding: [12, 20, 12, 20], // 上右下左
textStyle: {
color: "#fff",
fontSize: 16,
fontSize: nowSize(16),
fontWeight: "normal"
}
}
@ -273,7 +274,7 @@ const initChart = async () => {
if (params.dataType === "node") {
return `<div
style="
padding:10px 15px;
padding:10px 15px;
height: 68px;
border-radius: 4px;
background: url('${nodeHoverImg}');
@ -287,6 +288,7 @@ const initChart = async () => {
">
<div style="color:#fff;letter-spacing: 0.14px;">
<div >用户名：${params.data.nodeName}</div>
<div >用户ID：${params.data.id}</div>
</div>
</div>`
}
@ -420,15 +422,17 @@ onMounted(() => {
width: 100%;
height: 100%;
position: relative;
.goback {
position: absolute;
top: vh(-25);
top: vh(-30);
left: vw(20);
cursor: pointer;
}
.graph-container {
width: 100%;
height: 93%;
backdrop-filter: blur(5px);
}
.statistic-container {
width: vw(378);

2
src/views/LinkPrediction/components/postList.vue
View File

@ -21,7 +21,7 @@
<img src="@/assets/images/linkPrediction/icon/post-prefix.png" alt="" class="prefix" />
<div class="timestamp">{{ TansTimestamp(post.interactionTime) }}</div>
<div class="behavior">
【{{ post.userName }}】{{ post.behavior }} 【{{ post.neighborName }}】的贴文
【{{ post.neighborName }}】 {{ post.behavior }} 【{{ post.userName }}】 的贴文
</div>
</div>
</div>

4
src/views/LinkPrediction/components/userPanel.vue
View File

@ -71,13 +71,13 @@ const handleUserItem = (index, group = {}) => {
overflow-y: auto;
.a-pair-user-item {
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
padding: vh(20) 0;
padding: vh(10) 0;
.shadow-box {
width: 100%;
cursor: pointer;
padding: 0 vw(10);
.group-type {
height: vh(40);
height: vh(48);
color: #fff;
position: relative;
top: vh(10);

55
src/views/LinkPrediction/socialGroups/components/communityNode.vue
View File

@ -243,32 +243,33 @@ const handleClickNode = () => {
if (data.edge) {
const clickEdgeTarget = data.target
const clickEdgeSource = data.source
// 找所有的虚线边
const dashedEdgeList = linkList.filter((item) => {
return item.lineStyle.type === "dashed"
})
// 从所有的虚线边中找到连接了clickEdgeTarget或者clickEdgeSource的边
const connectEdgeList = dashedEdgeList.filter((item) => {
return (
item.source === clickEdgeSource ||
item.target === clickEdgeTarget ||
item.source === clickEdgeTarget ||
item.target === clickEdgeSource
)
})
let groupIdList = []
// 遍历边的source和target，找到所有的groupId
connectEdgeList.forEach((item) => {
if (!groupIdList.includes(item.source)) {
groupIdList.push(item.source)
}
if (!groupIdList.includes(item.target)) {
groupIdList.push(item.target)
}
})
// 只取前三个值
groupIdList = groupIdList.slice(0, 3)
emit("click:edge", data, groupIdList)
// // 找所有的虚线边
// const dashedEdgeList = linkList.filter((item) => {
// return item.lineStyle.type === "dashed"
// })
// // 从所有的虚线边中找到连接了clickEdgeTarget或者clickEdgeSource的边
// const connectEdgeList = dashedEdgeList.filter((item) => {
// return (
// item.source === clickEdgeSource ||
// item.target === clickEdgeTarget ||
// item.source === clickEdgeTarget ||
// item.target === clickEdgeSource
// )
// })
// let groupIdList = []
// // 遍历边的source和target，找到所有的groupId
// connectEdgeList.forEach((item) => {
// if (!groupIdList.includes(item.source)) {
// groupIdList.push(item.source)
// }
// if (!groupIdList.includes(item.target)) {
// groupIdList.push(item.target)
// }
// })
// // 只取前三个值
// console.log(groupIdList)
emit("click:edge", data, [clickEdgeTarget, clickEdgeSource])
}
}
})
@ -323,9 +324,11 @@ onUnmounted(() => {
width: 100%;
height: 100%;
position: relative;
.graph-container {
width: 100%;
height: 93%;
backdrop-filter: blur(5px);
}
.statistic-container {
width: vw(420);

16
src/views/LinkPrediction/socialGroups/components/detailNode.vue
View File

@ -64,6 +64,7 @@ import { TansTimestamp, getAvatarUrl } from "@/utils/transform"
import nodeHoverImg from "@/assets/images/nodeHover.png"
import activeAvatar from "@/assets/images/avatar/1/light_indobosss.png"
import * as echarts from "echarts"
import { nowSize } from "@/utils/echarts-self-adaption"
import { storeToRefs } from "pinia"
import { useSocialGroupsStore } from "@/store/linkPrediction/index"
const socialGroupsStore = useSocialGroupsStore()
@ -473,13 +474,13 @@ const initChart = async () => {
},
icon: c.icon
})),
right: 21,
right: nowSize(21),
symbolKeepAspect: false,
bottom: 70,
bottom: nowSize(70),
orient: "vertical",
itemWidth: 16,
itemHeight: 16,
itemGap: 12,
itemWidth: nowSize(16),
itemHeight: nowSize(16),
itemGap: nowSize(12),
backgroundColor: "rgba(0,67,125,0.56)", // 半透明深蓝
borderRadius: 8, // 圆角
borderColor: "#c2f2ff", // 淡蓝色边框
@ -487,7 +488,7 @@ const initChart = async () => {
padding: [12, 20, 12, 20], // 上右下左
textStyle: {
color: "#fff",
fontSize: 16,
fontSize: nowSize(16),
fontWeight: "normal"
}
}
@ -517,6 +518,7 @@ const initChart = async () => {
">
<div style="color:#fff;letter-spacing: 0.14px;">
<div >用户名：${params.data.nodeName}</div>
<div >用户ID：${params.data.id}</div>
</div>
</div>`
}
@ -686,6 +688,7 @@ onMounted(() => {
width: 100%;
height: 100%;
position: relative;
.goback {
position: absolute;
top: -25px;
@ -695,6 +698,7 @@ onMounted(() => {
.graph-container {
width: 100%;
height: 93%;
backdrop-filter: blur(5px);
}
.statistic-container {
width: vw(378);

1
src/views/LinkPrediction/socialGroups/components/graph.vue
View File

@ -47,6 +47,7 @@ const handleClickEdge = async (edgeInfo, groupIdList) => {
// 先设置socialGroupsStore.clickEdgeTimeList
// await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
await socialGroupsStore.getClickEdgeTimeList(groupIdList)
const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
// await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, lastTime)

4
src/views/LinkPrediction/socialGroups/components/userPanel.vue
View File

@ -79,13 +79,13 @@ const handleUserItem = (index, group = {}) => {
overflow-y: auto;
.a-pair-user-item {
border-bottom: vw(0.5) solid rgba(0, 113, 188, 0.5);
padding: vh(20) 0;
padding: vh(10) 0;
.shadow-box {
width: 100%;
cursor: pointer;
padding: 0 vw(10);
.group-type {
height: vh(40);
height: vh(48);
color: #fff;
position: relative;
top: vh(10);