From 7710413436fe8bad466c4f2d317bce93d2b4a1b1 Mon Sep 17 00:00:00 2001 From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com> Date: Thu, 7 Aug 2025 10:20:33 +0800 Subject: [PATCH] 1 --- src/store/groupEvolution/index.js | 81 ++++++++++--------- .../GroupEvolution/component/groupGraph.vue | 26 +++--- 2 files changed, 61 insertions(+), 46 deletions(-) diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js index f75835c..506ff76 100644 --- a/src/store/groupEvolution/index.js +++ b/src/store/groupEvolution/index.js @@ -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" + 分裂演化: "#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 // 开启持久化 }) diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue index 6e567fe..59b6042 100644 --- a/src/views/GroupEvolution/component/groupGraph.vue +++ b/src/views/GroupEvolution/component/groupGraph.vue @@ -163,7 +163,9 @@ const runForceLayout = () => { curForceSimulator.alpha(1).restart() curForceSimulator.on("tick", () => { - graphVis.refreshView() //刷新视图 + 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 提供了销毁方法