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%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
backdrop-filter: blur(5px);
.titleImage { .titleImage {
margin: 0 auto; margin: 0 auto;
} }

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

@ -1,6 +1,7 @@
<template> <template>
<div class="userPanel-container"> <div class="userPanel-container">
<img src="@/assets/images/head/anchorUserListTitle2.png" class="headerImage" /> <img src="@/assets/images/head/anchorUserTitle.png" class="headerImage" />
<div class="tabs-beside">
<div class="tabs"> <div class="tabs">
<div class="tabs-switch"> <div class="tabs-switch">
<div <div
@ -13,6 +14,7 @@
{{ item }} {{ item }}
</div> </div>
</div> </div>
</div>
<div class="tabs-list"> <div class="tabs-list">
<div <div
class="tabs-list-item" class="tabs-list-item"
@ -72,23 +74,25 @@ const highLightNodeHandle = (item) => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.headerImage { .headerImage {
width: 100%;
height: 55px;
margin-top: vh(-8); margin-top: vh(-8);
} }
.tabs { .tabs-beside {
flex: 1; flex: 1;
padding: vh(10) vw(20); padding: vh(10) vw(20);
.tabs {
.tabs-switch { .tabs-switch {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.switch-item { .switch-item {
flex: 1; flex: 1;
padding: vh(4) 0; padding: vh(4) vw(0);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: vw(1) solid #20406e; border: 1px solid #20406e;
font-size: vw(14); font-size: vw(14);
cursor: pointer; cursor: pointer;
color: #cccccc9d; color: #cccccc9d;
@ -100,6 +104,8 @@ const highLightNodeHandle = (item) => {
} }
} }
} }
}
.tabs-list { .tabs-list {
width: 100%; width: 100%;
height: vh(430); height: vh(430);
@ -172,9 +178,9 @@ const highLightNodeHandle = (item) => {
.tabsSwich-active { .tabsSwich-active {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff !important;
opacity: 1; opacity: 1;
background-color: #236291; background-color: #236291 !important;
border: vw(1) solid #3fa9f5; border: 1px solid #3fa9f5 !important;
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -243,32 +243,33 @@ const handleClickNode = () => {
if (data.edge) { if (data.edge) {
const clickEdgeTarget = data.target const clickEdgeTarget = data.target
const clickEdgeSource = data.source const clickEdgeSource = data.source
// 找所有的虚线边 // // 找所有的虚线边
const dashedEdgeList = linkList.filter((item) => {
return item.lineStyle.type === "dashed" // const dashedEdgeList = linkList.filter((item) => {
}) // return item.lineStyle.type === "dashed"
// 从所有的虚线边中找到连接了clickEdgeTarget或者clickEdgeSource的边 // })
const connectEdgeList = dashedEdgeList.filter((item) => { // // 从所有的虚线边中找到连接了clickEdgeTarget或者clickEdgeSource的边
return ( // const connectEdgeList = dashedEdgeList.filter((item) => {
item.source === clickEdgeSource || // return (
item.target === clickEdgeTarget || // item.source === clickEdgeSource ||
item.source === clickEdgeTarget || // item.target === clickEdgeTarget ||
item.target === clickEdgeSource // item.source === clickEdgeTarget ||
) // item.target === clickEdgeSource
}) // )
let groupIdList = [] // })
// 遍历边的source和target，找到所有的groupId // let groupIdList = []
connectEdgeList.forEach((item) => { // // 遍历边的source和target，找到所有的groupId
if (!groupIdList.includes(item.source)) { // connectEdgeList.forEach((item) => {
groupIdList.push(item.source) // if (!groupIdList.includes(item.source)) {
} // groupIdList.push(item.source)
if (!groupIdList.includes(item.target)) { // }
groupIdList.push(item.target) // if (!groupIdList.includes(item.target)) {
} // groupIdList.push(item.target)
}) // }
// 只取前三个值 // })
groupIdList = groupIdList.slice(0, 3) // // 只取前三个值
emit("click:edge", data, groupIdList) // console.log(groupIdList)
emit("click:edge", data, [clickEdgeTarget, clickEdgeSource])
} }
} }
}) })
@ -323,9 +324,11 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.graph-container { .graph-container {
width: 100%; width: 100%;
height: 93%; height: 93%;
backdrop-filter: blur(5px);
} }
.statistic-container { .statistic-container {
width: vw(420); 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 nodeHoverImg from "@/assets/images/nodeHover.png"
import activeAvatar from "@/assets/images/avatar/1/light_indobosss.png" import activeAvatar from "@/assets/images/avatar/1/light_indobosss.png"
import * as echarts from "echarts" import * as echarts from "echarts"
import { nowSize } from "@/utils/echarts-self-adaption"
import { storeToRefs } from "pinia" import { storeToRefs } from "pinia"
import { useSocialGroupsStore } from "@/store/linkPrediction/index" import { useSocialGroupsStore } from "@/store/linkPrediction/index"
const socialGroupsStore = useSocialGroupsStore() const socialGroupsStore = useSocialGroupsStore()
@ -473,13 +474,13 @@ const initChart = async () => {
}, },
icon: c.icon icon: c.icon
})), })),
right: 21, right: nowSize(21),
symbolKeepAspect: false, symbolKeepAspect: false,
bottom: 70, bottom: nowSize(70),
orient: "vertical", orient: "vertical",
itemWidth: 16, itemWidth: nowSize(16),
itemHeight: 16, itemHeight: nowSize(16),
itemGap: 12, itemGap: nowSize(12),
backgroundColor: "rgba(0,67,125,0.56)", // 半透明深蓝 backgroundColor: "rgba(0,67,125,0.56)", // 半透明深蓝
borderRadius: 8, // 圆角 borderRadius: 8, // 圆角
borderColor: "#c2f2ff", // 淡蓝色边框 borderColor: "#c2f2ff", // 淡蓝色边框
@ -487,7 +488,7 @@ const initChart = async () => {
padding: [12, 20, 12, 20], // 上右下左 padding: [12, 20, 12, 20], // 上右下左
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 16, fontSize: nowSize(16),
fontWeight: "normal" fontWeight: "normal"
} }
} }
@ -517,6 +518,7 @@ const initChart = async () => {
"> ">
<div style="color:#fff;letter-spacing: 0.14px;"> <div style="color:#fff;letter-spacing: 0.14px;">
<div >用户名：${params.data.nodeName}</div> <div >用户名：${params.data.nodeName}</div>
<div >用户ID：${params.data.id}</div>
</div> </div>
</div>` </div>`
} }
@ -686,6 +688,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.goback { .goback {
position: absolute; position: absolute;
top: -25px; top: -25px;
@ -695,6 +698,7 @@ onMounted(() => {
.graph-container { .graph-container {
width: 100%; width: 100%;
height: 93%; height: 93%;
backdrop-filter: blur(5px);
} }
.statistic-container { .statistic-container {
width: vw(378); width: vw(378);

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

@ -47,6 +47,7 @@ const handleClickEdge = async (edgeInfo, groupIdList) => {
// 先设置socialGroupsStore.clickEdgeTimeList // 先设置socialGroupsStore.clickEdgeTimeList
// await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target]) // await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
await socialGroupsStore.getClickEdgeTimeList(groupIdList) await socialGroupsStore.getClickEdgeTimeList(groupIdList)
const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1] const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
// await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime) // await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, 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; overflow-y: auto;
.a-pair-user-item { .a-pair-user-item {
border-bottom: vw(0.5) solid rgba(0, 113, 188, 0.5); border-bottom: vw(0.5) solid rgba(0, 113, 188, 0.5);
padding: vh(20) 0; padding: vh(10) 0;
.shadow-box { .shadow-box {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
padding: 0 vw(10); padding: 0 vw(10);
.group-type { .group-type {
height: vh(40); height: vh(48);
color: #fff; color: #fff;
position: relative; position: relative;
top: vh(10); top: vh(10);