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

1

Browse Source
This commit is contained in:
qumeng039@126.com 2025-08-07 10:20:33 +08:00
parent 798fd3b15a
commit 7710413436
2 changed files with 61 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/store/groupEvolution/index.js
View File

@ -16,7 +16,8 @@ import {
getGroupMemberTimeLine,
getGroupMemberChart,
getGroupMemberEvolutionInfoByTime,
getGroupMemberEvolutionAnalysisChart
getGroupMemberEvolutionAnalysisChart,
getRelationGraphByUtcTime
} from "@/service/api/groupEvolution"
import { TansTimestamp, utcStringToHHMMSS } from "@/utils/transform"
@ -241,9 +242,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
// 通过时间来获取帖文列表
//根据时间参数获取贴文数据
async initialPostByUtcTime(utcTime) {
}
async initialPostByUtcTime(utcTime) {}
},
persist: true // 开启持久化
})
@ -979,14 +978,13 @@ export const useGroupMemberStore = defineStore("groupMember", {
},
async initializeGroupList(time = "2024-06-19T07:57:46Z") {
const res = await getGroupMemberInfoList(time)
console.log("测试获取groupMemberInfoList:",res);
const groupList = res.data.map(item => ({
console.log("测试获取groupMemberInfoList:", res)
const groupList = res.data.map((item) => ({
id: item.id,
type: item.type,
focusedTopic: item.focusedTopic,
value: item.value.map(item => (item).toFixed(2))
value: item.value.map((item) => item.toFixed(2))
// value: item.value.map(item => (item * 100 + 20).toFixed(2))
}))
this.groupList = groupList
},
@ -994,13 +992,13 @@ export const useGroupMemberStore = defineStore("groupMember", {
const res = await getGroupMemberChart()
// console.log("测试获取groupMemberChart:",res);
const xAxisData = res.data.xaxisData.map(item => utcStringToHHMMSS(item))
const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
const yAxisRange = res.data.yaxisRange
const themeColors = ["#2AB8FD", "#02D7DA", "#FFDA09", "#EB57B0"]
const seriesList = res.data.seriesList.map(item => ({
data: item.data.map(item => item.toFixed(2)),
const seriesList = res.data.seriesList.map((item) => ({
data: item.data.map((item) => item.toFixed(2)),
name: item.name,
themeColor: themeColors[item.id - 1],
themeColor: themeColors[item.id - 1]
}))
this.chartData = {
xAxisData,
@ -1011,56 +1009,67 @@ export const useGroupMemberStore = defineStore("groupMember", {
async initialPostByUtcTime(utcTime) {
const res = await getGroupMemberEvolutionInfoByTime(utcTime)
this.posts = res.data
console.log("测试获取groupMemberEvolutionInfoByTime:",res.data);
console.log("测试获取groupMemberEvolutionInfoByTime:", res.data)
},
async initializeGroupMemberEvolutionAnalysisChart() {
const res = await getGroupMemberEvolutionAnalysisChart()
console.log("测试获取groupMemberEvolutionAnalysisChart:",res);
console.log("测试获取groupMemberEvolutionAnalysisChart:", res)
const themeColors = {
分裂演化: "#2AB8FD",
合并演化: "#02D7DA",
收缩演化: "#FFDA09",
扩展演化: "#EB57B0"
}
const topSelfMedia = res.data.topSelfMedia.map(item => ({
const topSelfMedia = res.data.topSelfMedia.map((item) => ({
id: item.id,
name: item.name,
chart: {
xAxisData: item.chart.xaxisData.map(item => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil(Math.max(...item.chart.seriesList[0].data)), interval: Math.ceil(Math.max(...item.chart.seriesList[0].data)/5)},
seriesList: item.chart.seriesList.map(item => ({
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {
min: 0,
max: Math.ceil(Math.max(...item.chart.seriesList[0].data)),
interval: Math.ceil(Math.max(...item.chart.seriesList[0].data) / 5)
},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
name: item.name,
themeColor: themeColors[item.name],
themeColor: themeColors[item.name]
}))
}
}))
const officalMedia = res.data.officalMedia.map(item => ({
const officalMedia = res.data.officalMedia.map((item) => ({
id: item.id,
name: item.name,
chart: {
xAxisData: item.chart.xaxisData.map(item => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil(Math.max(...item.chart.seriesList[0].data)), interval: Math.ceil(Math.max(...item.chart.seriesList[0].data)/5)},
seriesList: item.chart.seriesList.map(item => ({
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {
min: 0,
max: Math.ceil(Math.max(...item.chart.seriesList[0].data)),
interval: Math.ceil(Math.max(...item.chart.seriesList[0].data) / 5)
},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
name: item.name,
themeColor: themeColors[item.name],
themeColor: themeColors[item.name]
}))
}
}))
const ordinaryMedia = res.data.ordinaryMedia.map(item => ({
const ordinaryMedia = res.data.ordinaryMedia.map((item) => ({
id: item.id,
name: item.name,
chart: {
xAxisData: item.chart.xaxisData.map(item => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil(Math.max(...item.chart.seriesList[0].data)), interval: Math.ceil(Math.max(...item.chart.seriesList[0].data)/5)},
seriesList: item.chart.seriesList.map(item => ({
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {
min: 0,
max: Math.ceil(Math.max(...item.chart.seriesList[0].data)),
interval: Math.ceil(Math.max(...item.chart.seriesList[0].data) / 5)
},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
name: item.name,
themeColor: themeColors[item.name],
themeColor: themeColors[item.name]
}))
}
}))
@ -1068,11 +1077,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
this.chartsData = {
topSelfMedia: topSelfMedia,
officalMedia: officalMedia,
ordinaryMedia: ordinaryMedia,
ordinaryMedia: ordinaryMedia
}
}
},
persist: true // 开启持久化
})

24
src/views/GroupEvolution/component/groupGraph.vue
View File

@ -163,7 +163,9 @@ const runForceLayout = () => {
curForceSimulator.alpha(1).restart()
curForceSimulator.on("tick", () => {
if (graphVis) {
graphVis.refreshView() // 刷新视图
}
})
curForceSimulator.on("end", () => {
@ -216,20 +218,26 @@ const initChart = () => {
registEvents()
}
const groupCount = 3 // 分组数量
const width = 900,
height = 500 // 画布大小
const groupCenters = getGroupCenters(groupCount, width, height)
assignNodePositions(graph.value.nodes, groupCenters)
// const groupCount = 3 // 分组数量
// const width = 900,
// height = 500 // 画布大小
// const groupCenters = getGroupCenters(groupCount, width, height)
// assignNodePositions(graph.value.nodes, groupCenters)
createGraph()
console.log(graph.value)
graphVis.addGraph({ ...toRaw(graph.value) })
runForceLayout()
}
onMounted(async () => {
await nextTick() // 等待 DOM 更新
onMounted(() => {
initChart()
})
// watch(graph.value, (newVal) => {
// if (newVal && newVal.nodes && newVal.nodes.length) {
// nextTick(() => {
// initChart()
// })
// }
// })
onUnmounted(() => {
if (graphVis) {
graphVis.destroy() // 如果 GraphVis 提供了销毁方法