From bb9aae91724da7e302bf3dc7a609d84504fdb81e Mon Sep 17 00:00:00 2001
From: duanhao <dh14779715518@163.com>
Date: Wed, 6 Aug 2025 15:50:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=A4=E4=BD=93=E6=88=90=E5=91=98=E6=BC=94?=
 =?UTF-8?q?=E5=8C=96=E5=88=86=E6=9E=90-=E5=B7=A6-=E4=B8=AD=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4-=E4=B8=AD=E7=BE=A4=E4=BD=93=E6=BC=94?=
 =?UTF-8?q?=E5=8C=96=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../group-member-user-list-title.png          | Bin 0 -> 392 bytes
 src/components/timeAxis.vue                   |   2 +
 src/service/api/groupEvolution.js             |  23 ++++-
 src/store/groupEvolution/index.js             |  95 ++++++++++++------
 src/utils/transform.js                        |  14 +++
 .../GroupEvolution/component/groupChart.vue   |   3 -
 .../GroupEvolution/component/groupGraph.vue   |   1 +
 .../GroupEvolution/component/groupPost.vue    |   4 +-
 .../groupMember/components/groupAnalysis.vue  |  13 +--
 .../groupMember/components/groupPanel.vue     |  92 ++++++++++++++---
 .../GroupEvolution/groupMember/index.vue      |  24 ++++-
 11 files changed, 208 insertions(+), 63 deletions(-)
 create mode 100644 src/assets/images/groupMember/group-member-user-list-title.png

diff --git a/src/assets/images/groupMember/group-member-user-list-title.png b/src/assets/images/groupMember/group-member-user-list-title.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d24fc1a830865a8461d484f128c1a4ea7b6f62f
GIT binary patch
literal 392
zcmV;30eAk1P)<h;3K|Lk000e1NJLTq002J#000*V1^@s6yr7qa00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0Ub$1K~#7F?U=Dn
z!!Qtr|8pIx3{a*@L8{u7k&y}YjR?FzU!ct+z@sqH6(&Z)LM0|pL4h>MaYjlNq4EIu
z{7IJWyXp5?mhY!U#gEkBreQo`2bX=C;U6;p;@Pe^5hgO7QG^p@C0{`qi;}PBpL}lH
zil3&p@hV9MaU^HsA!Sw7!{`2bnT-l&<RBcHHu-Wi-1k+uW6#>&db~O4#!NQ}&#Bp%
z?%qH#LA+MB58QE<Cs4pcI$5>raP74c#A`*j_`kXzpK+Sq2-jXKLA--D(&c(iBt3n1
zzZE~Q_U(7lCtPu(kJtBZ%*yY6>=w(5Q6W<S1+e&d;#=O4GcZ{UOeirhop9p}%o<Ze
mJxtNy9!mJBxHz|IO!+sQ9AlWB<JbiN0000<MNUMnLSTY->ZRZS

literal 0
HcmV?d00001

diff --git a/src/components/timeAxis.vue b/src/components/timeAxis.vue
index 295cff8..b4c3e73 100644
--- a/src/components/timeAxis.vue
+++ b/src/components/timeAxis.vue
@@ -122,6 +122,8 @@ watch(
     timeList.value = newVal
   },
   { deep: true }
+
+
 )
 // 让 active-needle 标定在 timeList 最后一个时间点
 const showHidden = computed(() => {
diff --git a/src/service/api/groupEvolution.js b/src/service/api/groupEvolution.js
index f456613..810cb5f 100644
--- a/src/service/api/groupEvolution.js
+++ b/src/service/api/groupEvolution.js
@@ -22,7 +22,22 @@ export function getPostByUtcTime(utcTime) {
 
 
 // 3.群体成员演化分析
-// 3.1 群体成员演化信息列表信息
-export function getGroupMemberInfoList() {
-  return http.get(`/groupEvolution/groupMember/infoList`)
-}
\ No newline at end of file
+// 3.1 获取时间线数据
+export function getGroupMemberTimeLine() {
+  return http.get(`/groupEvolution/groupMember/timeline`)
+}
+
+// 3.2 群体成员演化信息列表信息
+export function getGroupMemberInfoList(time) {
+  return http.get(`/groupEvolution/groupMember/infoList?time=${time}`)
+}
+
+// 3.3 全局群体成员演化图
+export function getGroupMemberChart() {
+  return http.get(`/groupEvolution/groupMember/chart`)
+}
+
+// 3.4 群体演化信息
+export function getGroupMemberEvolutionInfoByTime(date) {
+  return http.get(`/groupEvolution/groupMember/changeList?date=${date}`)
+}
diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js
index a5f706c..9719fb8 100644
--- a/src/store/groupEvolution/index.js
+++ b/src/store/groupEvolution/index.js
@@ -12,9 +12,12 @@ import {
   getGroupEvolutionGroupScaleChart,
   getGroupEvolutionTimeLine,
   getPostByUtcTime,
-  getGroupMemberInfoList
+  getGroupMemberInfoList,
+  getGroupMemberTimeLine,
+  getGroupMemberChart,
+  getGroupMemberEvolutionInfoByTime
 } from "@/service/api/groupEvolution"
-import { TansTimestamp } from "@/utils/transform"
+import { TansTimestamp, utcStringToHHMMSS } from "@/utils/transform"
 
 export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
   state: () => ({
@@ -183,10 +186,9 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
 
     async initialGraphByUtcTime() {},
 
+    // 通过时间来获取帖文列表
     async initialPostByUtcTime(utcTime) {
-      const res = await getPostByUtcTime(utcTime)
-      if (res.code != 200) return
-      this.posts = res.data
+      
     }
   },
   persist: true // 开启持久化
@@ -526,7 +528,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
 
 export const useGroupMemberStore = defineStore("groupMember", {
   state: () => ({
-    groupList: [
+    /* groupList
       {
         id: 1,
         type: "群体一",
@@ -539,7 +541,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
         focusedTopic: "#中国海警首次登检菲律宾#",
         value: [10, 20, 15, 5],
       }
-    ],
+    */
+    groupList: [],
+    timeList: [],
     groupMemberList: [
       {
         id: 1,
@@ -779,62 +783,62 @@ export const useGroupMemberStore = defineStore("groupMember", {
     posts: [
       {
         id: 1,
-        timestamp: "2024-01-04  0:03:16",
-        groupCategory: "群体一",
+        time: "2024-01-04  0:03:16",
+        type: "群体一",
         memberAddCount: 1
       },
       {
         id: 2,
-        timestamp: "2024-02-03 12:58:53",
-        groupCategory: "群体二",
+        time: "2024-02-03 12:58:53",
+        type: "群体二",
         memberAddCount: 2
       },
       {
         id: 3,
-        timestamp: "2024-02-22 17:13:44",
-        groupCategory: "群体三",
+        time: "2024-02-22 17:13:44",
+        type: "群体三",
         memberAddCount: 4
       },
       {
         id: 4,
-        timestamp: "2024-02-23 17:54:46",
-        groupCategory: "群体一",
+        time: "2024-02-23 17:54:46",
+        type: "群体一",
         memberAddCount: 4
       },
       {
         id: 5,
-        timestamp: "2024-03-14 09:58:12",
-        groupCategory: "群体三",
+        time: "2024-03-14 09:58:12",
+        type: "群体三",
         memberAddCount: 4
       },
       {
         id: 6,
-        timestamp: "2024-03-23 21:20:40",
-        groupCategory: "群体二",
+        time: "2024-03-23 21:20:40",
+        type: "群体二",
         memberAddCount: 4
       },
       {
         id: 7,
-        timestamp: "2024-03-23 21:42:36",
-        groupCategory: "群体一",
+        time: "2024-03-23 21:42:36",
+        type: "群体一",
         memberAddCount: 2
       },
       {
         id: 8,
-        timestamp: "2024-04-06 18:17:30",
-        groupCategory: "群体二",
+        time: "2024-04-06 18:17:30",
+        type: "群体二",
         memberAddCount: 4
       },
       {
         id: 9,
-        timestamp: "2024-04-06 19:19:50",
-        groupCategory: "群体一",
+        time: "2024-04-06 19:19:50",
+        type: "群体一",
         memberAddCount: 4
       },
       {
         id: 10,
-        timestamp: "2024-05-16 00:22:18",
-        groupCategory: "群体二",
+        time: "2024-05-16 00:22:18",
+        type: "群体二",
         memberAddCount: 5
       }
     ],
@@ -913,19 +917,46 @@ export const useGroupMemberStore = defineStore("groupMember", {
     ]
   }),
   actions: {
-    async initializeGroupList() {
-      const res = await getGroupMemberInfoList()
+    async initializeGroupMemberTimeLine() {
+      const res = await getGroupMemberTimeLine()
+      this.timeList = res.data
+      console.log("测试获取timeList:",this.timeList);
+    },
+    async initializeGroupList(time = "2024-06-19T07:57:46Z") {
+      const res = await getGroupMemberInfoList(time)
+      console.log("测试获取groupMemberInfoList:",res);
       const groupList = res.data.map(item => ({
         id: item.id,
         type: item.type,
         focusedTopic: item.focusedTopic,
-        value: item.value
+        value: item.value.map(item => item * 100)
       }))
       this.groupList = groupList
-      console.log("测试获取groupList:",res);
+    },
+    async initializeGroupMemberChart() {
+      const res = await getGroupMemberChart()
+      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)),
+        name: item.name,
+        themeColor: themeColors[item.id - 1],
+      }))
+      this.chartData = {
+        xAxisData,
+        yAxisRange,
+        seriesList
+      }
+    },
+    async initialPostByUtcTime(utcTime) {
+      const res = await getGroupMemberEvolutionInfoByTime(utcTime)
+      this.posts = res.data
+      console.log("测试获取groupMemberEvolutionInfoByTime:",res.data);
     }
+
   },
-  persist: false // 开启持久化
+  persist: true // 开启持久化
 })
 
 export const useAnomalousGroup = defineStore("anomalousGroup", {
diff --git a/src/utils/transform.js b/src/utils/transform.js
index bdb68e3..147d5d3 100644
--- a/src/utils/transform.js
+++ b/src/utils/transform.js
@@ -91,3 +91,17 @@ export function getAvatarUrl(binaryStream) {
     return `data:image/jpeg;base64,${binaryStream}`
   }
 }
+
+/**
+ * 将UTC格式时间字符串转换为时间戳并返回HH:mm:ss格式
+ * @param {string} utcString - UTC格式时间字符串，如"2024-06-19T07:57:46Z"
+ * @returns {string} 格式化后的时间字符串，格式为HH:mm:ss
+ */
+export function utcStringToHHMMSS(utcString) {
+  if (!utcString) return ''
+  // 解析UTC时间字符串为dayjs对象
+  const date = dayjs.utc(utcString).add(8, 'hour')
+
+  // 格式化为HH:mm:ss
+  return date.format('HH:mm:ss')
+}
diff --git a/src/views/GroupEvolution/component/groupChart.vue b/src/views/GroupEvolution/component/groupChart.vue
index b8e63da..3f46fb5 100644
--- a/src/views/GroupEvolution/component/groupChart.vue
+++ b/src/views/GroupEvolution/component/groupChart.vue
@@ -287,9 +287,6 @@ watch(
 )
 
 onMounted(() => {
-  console.log("111");
-  
-  console.log(props.moduleName)
   // 获取容器宽度
   sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
 })
diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue
index 280bb34..3937d0c 100644
--- a/src/views/GroupEvolution/component/groupGraph.vue
+++ b/src/views/GroupEvolution/component/groupGraph.vue
@@ -35,6 +35,7 @@ const handlePointerDown = (time) => {
   const utcTime = convertToUtcIsoString(time)
   emit("click:pointerDownAndSlide", utcTime)
 }
+
 </script>
 
 <style scoped lang="less">
diff --git a/src/views/GroupEvolution/component/groupPost.vue b/src/views/GroupEvolution/component/groupPost.vue
index 6fb7c56..4f117aa 100644
--- a/src/views/GroupEvolution/component/groupPost.vue
+++ b/src/views/GroupEvolution/component/groupPost.vue
@@ -40,8 +40,8 @@
             >条
           </span>
           <span class="author" v-else-if="props.moduleName == '群体成员演化分析'"
-            >【{{ post.groupCategory }}】&nbsp;&nbsp;的成员数目增加了<span style="color: #9df9fe">{{
-              post.memberAddCount
+            >【{{ post.type }}】&nbsp;&nbsp;的成员数目{{ post.memberAddCount < 0 ? "减少" : "增加"}}了<span style="color: #9df9fe">{{
+              Math.abs(post.memberAddCount)
             }}</span
             >位
           </span>
diff --git a/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue b/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
index ea1ae0d..df3e1f5 100644
--- a/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
+++ b/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
@@ -30,9 +30,10 @@
 <script setup>
 import { defineProps, onMounted, ref } from "vue";
 import GroupChart from "../../component/groupChart.vue";
-const curSelectedTab = ref("头部自媒体");
+const curSelectedTab = ref("群体一");
 const curSelectedTabData = ref(null);
-const tabs = ["头部自媒体", "官方媒体", "普通自媒体"];
+const tabs = ["群体一", "群体二", "群体三"];
+
 const moduleName = "群体成员演化分析"
 const props = defineProps({
   title: {
@@ -48,15 +49,15 @@ const props = defineProps({
 const handleSwitch = (item) => {
   curSelectedTab.value = item;
   const keyMapList = {
-    头部自媒体: "topSelfMedia",
-    官方媒体: "officalMedia",
-    普通自媒体: "ordinaryMedia"
+    群体一: "topSelfMedia",
+    群体二: "officalMedia",
+    群体三: "ordinaryMedia"
   };
   curSelectedTabData.value = props.chartsData[keyMapList[item]];
 };
 
 onMounted(() => {
-  handleSwitch("头部自媒体");
+  handleSwitch("群体一");
 });
 </script>
 
diff --git a/src/views/GroupEvolution/groupMember/components/groupPanel.vue b/src/views/GroupEvolution/groupMember/components/groupPanel.vue
index 644d66b..f5ba70a 100644
--- a/src/views/GroupEvolution/groupMember/components/groupPanel.vue
+++ b/src/views/GroupEvolution/groupMember/components/groupPanel.vue
@@ -6,7 +6,7 @@
               <div class="group-item-title">
                 <img
                   class="group-item-title-icon"
-                  src="@/assets/images/linkPrediction/title/group-item-title.png"
+                  src="@/assets/images/groupMember/group-member-user-list-title.png"
                   alt=""
                 />
                <div class="group-item-title-type">{{ group.type }}</div>
@@ -21,8 +21,9 @@
 </template>
 
 <script setup>
-import { defineProps, ref, onMounted, onUnmounted } from "vue";
+import { defineProps, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import * as echarts from "echarts";
+import nodeHoverImg from "@/assets/images/nodeHover.png"
 const props = defineProps({
   groupList: {
     type: Array,
@@ -34,6 +35,23 @@ const props = defineProps({
   }
 });
 
+const groupList = ref(props.groupList)
+
+
+// 添加对groupList的监听
+watch(() => props.groupList, (newVal) => {
+  groupList.value = newVal
+  // 先销毁已存在的图表实例
+  chartInstances.forEach(chart => {
+    chart.dispose();
+  });
+  chartInstances.clear();
+  // 使用nextTick确保DOM更新后再初始化图表
+  nextTick(() => {
+    initChart(groupList.value);
+  });
+}, { deep: true });
+
 // 存储图表实例，用于销毁
 const chartInstances = new Map();
 const indicator = [
@@ -49,14 +67,55 @@ const initChart = (groupList) => {
     if (chartDom && group.value) {
       const myChart = echarts.init(chartDom);
       chartInstances.set(group.id, myChart);
+      // 动态设置雷达图的 indicator 最大值
+      const maxValue = Math.ceil(Math.max(...group.value));
+
       const option = {
-        tooltip: {},
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0)", // 透明背景
+          borderColor: "rgba(0,0,0,0)", // 透明边框
+          borderWidth: 0,
+          extraCssText: "box-shadow:none;padding:0;",
+          formatter: function (params) {
+            return `<div
+                    style="
+                    padding:10px 15px;
+                    height: 100px;
+                    border-radius: 4px;
+                    background: url('${nodeHoverImg}');
+                    background-size: cover;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    ">
+                <div style="color:#fff;letter-spacing: 0.14px;">
+                  <div >成长：${params.data.value[0]}</div>
+                  <div >收缩：${params.data.value[1]}</div>
+                  <div >合并：${params.data.value[2]}</div>
+                  <div >分裂：${params.data.value[3]}</div>
+              </div>
+            </div>`
+
+          }
+
+        },
         // 雷达图配置
         radar: {
           startAngle: 135, // 原点从 -45° 开始
-          indicator: indicator, // 雷达图坐标轴
+          indicator: [
+            { name: '成长期', max: Math.max(30, maxValue) },
+            { name: '收缩期', max: Math.max(30, maxValue) },
+            { name: '合并期', max: Math.max(30, maxValue) },
+            { name: '分裂期', max: Math.max(30, maxValue) },
+          ], // 雷达图坐标轴
           shape: 'circle', // 圆形分层
           splitNumber: 5, // 分层的数量
+          min: 0,
+          alignTicks: false,
           //   坐标字体
           axisName: {
             color: '#94C1EC',
@@ -88,7 +147,7 @@ const initChart = (groupList) => {
             type: 'radar',
             data: [
               {
-                value: group.value,
+                value: group.value || [0,0,0,0],
                 symbol: "circle",
                 symbolSize: 5,
                 itemStyle: {
@@ -116,7 +175,12 @@ const initChart = (groupList) => {
 
 onMounted(() => {
   // 调用初始化图表函数
-  initChart(props.groupList);
+  console.log("props.groupList:",props.groupList);
+
+  // 使用nextTick确保DOM更新后再初始化图表
+  nextTick(() => {
+    initChart(props.groupList);
+  });
 
   // 响应窗口大小变化
   window.addEventListener('resize', handleResize);
@@ -145,7 +209,7 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   .title {
-    margin-top: -7px;
+    margin-top: -8px;
     margin-left: -2px;
   }
   .groupPanel-list {
@@ -166,17 +230,17 @@ onUnmounted(() => {
     }
     .group-item {
       width: 100%;
-      height: 260px;
-      padding-top: 16px;
-      padding-bottom: 20px;
+      height: 240px;
+      padding-top: 10px;
+      padding-bottom: 10px;
       border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
       .group-item-title {
         position: relative;
         .group-item-title-type {
           position: absolute;
-          top: 0;
+          top: 2px;
           color: #8efbff;
-          left: 17px;
+          left: 12px;
           font-size: 14px;
         }
       }
@@ -191,8 +255,8 @@ onUnmounted(() => {
         font-size: 14px;
         .container {
           left: 40px;
-          width: 218px;
-          height: 170px;
+          width: 210px;
+          height: 160px;
         }
       }
     }
diff --git a/src/views/GroupEvolution/groupMember/index.vue b/src/views/GroupEvolution/groupMember/index.vue
index 5cb2969..814dd23 100644
--- a/src/views/GroupEvolution/groupMember/index.vue
+++ b/src/views/GroupEvolution/groupMember/index.vue
@@ -23,7 +23,12 @@
       </div>
       <!-- 中间大矩形 2 -->
       <div class="middle-container">
-        <div class="graph"></div>
+        <div class="graph">
+          <GroupGraph
+            :store="groupMemberStore"
+            @click:pointerDownAndSlide="handleChangeXAxis"
+          ></GroupGraph>
+        </div>
         <div class="postList">
 
           <GroupPost
@@ -73,6 +78,7 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import GroupGraph from "../component/groupGraph.vue"
 import GroupPanel from "./components/groupPanel.vue";
 import GroupPost from "../component/groupPost.vue";
 import GroupAnalysis from "./components/groupAnalysis.vue";
@@ -96,8 +102,15 @@ const postDialog = ref(false);
 //当前选中的贴文数据
 const currentPostPost = ref(null);
 
-// 图例颜色
+const handleChangeXAxis = (utcTime) => {
+  const timeList = groupMemberStore.timeList
+  // console.log("传入时间：",utcTime)
 
+  // if (!timeList.includes(utcTime)) return
+
+  groupMemberStore.initializeGroupList(utcTime) //随着时间轴变动，更新群体成员信息列表
+  groupMemberStore.initialPostByUtcTime(utcTime) //随着时间轴变动，更新贴文列表
+}
 
 const handleOpenPostDialog = (post) => {
   postDialog.value = true;
@@ -105,7 +118,14 @@ const handleOpenPostDialog = (post) => {
 };
 
 onMounted(async () => {
+  await groupMemberStore.initializeGroupMemberTimeLine()
+  console.log("初始化成员演化信息表");
   await groupMemberStore.initializeGroupList()
+  console.log("初始化后的群体成员信息表：",groupMemberStore.groupList);
+  await groupMemberStore.initializeGroupMemberChart()
+  console.log("初始化后的全局群体成员演化图：");
+
+
 })
 </script>