群体规模演化图修改完成

src/service/api/groupEvolution.js

@@ -0,0 +1,11 @@
+import http from "@/utils/http"
+
+//群体识别发现页面群体列表
+export function getGroupEvolutionGroupList(time) {
+  return http.get(`/groupEvolution/identify/group_list?time=${time}`)
+}
+
+//群体识别发现页面群体规模演化图
+export function getGroupEvolutionGroupScaleChart() {
+  return http.get(`/groupEvolution/identify/group_scale`)
+}

src/store/groupEvolution/index.js

@@ -6,72 +6,57 @@ import mergeImg from "@/assets/images/groupMember/mergeImg.png"
 import shrinkImg from "@/assets/images/groupMember/shrinkImg.png"
 import expamdImg from "@/assets/images/groupMember/expamdImg.png"
 import defaultAvatar from "@/assets/images/avatar/default.png"
+
+import {
+  getGroupEvolutionGroupList,
+  getGroupEvolutionGroupScaleChart
+} from "@/service/api/groupEvolution"
+import { TansTimestamp } from "@/utils/transform"
 export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
   state: () => ({
-    groupList: [
-      {
-        id: 1,
-        type: "群体一",
-        title: "关注话题：#中国海警首次登检菲律宾运补船只#",
-        statistics: [
-          { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
-          { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ]
-      },
-      {
-        id: 2,
-        type: "群体二",
-        title: "关注话题：#外交部回应中国海警缴获菲律宾士111111.",
-        statistics: [
-          { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
-          { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ]
-      },
-      {
-        id: 3,
-        type: "群体三",
-        title: "关注话题：#美军机在南海盘旋并投放不明物体#",
-        statistics: [
-          { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
-          { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
-        ]
-      }
-    ],
-    chartData: {
-      xAxisData: ["07:57:46", "09:30:14", "09:57:32", "10:04:47", "10:12:57"],
-      yAxisRange: { min: 0, max: 800, interval: 100 },
-      seriesList: [
-        {
-          name: "头部自媒体",
-          themeColor: "#32b6fb",
-          data: [200, 300, 330, 400, 380]
-        },
-        {
-          name: "官方媒体",
-          themeColor: "#00d6da",
-          data: [100, 200, 230, 300, 280]
-        },
-        {
-          name: "普通自媒体",
-          themeColor: "#fddc33",
-          data: [300, 400, 430, 500, 480]
-        }
-      ]
-    },
+    groupList: [],
+    chartData: {},
     chartsData: {
       topSelfMedia: {
-        xAxis: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+        xAxis: [
+          "15:57:46",
+          "16:57:55",
+          "17:57:32",
+          "18:58:03",
+          "19:58:03",
+          "20:58:04",
+          "21:57:47",
+          "22:58:12"
+        ],
         yAxis: [0, 0.5, 1.0, 1.5, 2.0, 2.5],
         data: [1.0, 0.99, 1.0, 1.0, 1.01, 2.03, 1.2, 0.99]
       },
       officialMedia: {
-        xAxis: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-        yAxis: [0, 0.5, 1.0, 1.5, 2.0, 2.5],
+        xAxis: [
+          "15:57:46",
+          "16:57:55",
+          "17:57:32",
+          "18:58:03",
+          "19:58:03",
+          "20:58:04",
+          "21:57:47",
+          "22:58:12"
+        ],
+        yAxis: [0, 0.5, 1.0, 1.5],
         data: [1.0, 0.99, 1.0, 1.0, 1.01, 1.01, 1.2, 0.99]
       },
       ordinaryMedia: {
-        xAxis: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-        yAxis: [0, 1.0, 2.0, 3.0, 4.0, 5.0],
+        xAxis: [
+          "15:57:46",
+          "16:57:55",
+          "17:57:32",
+          "18:58:03",
+          "19:58:03",
+          "20:58:04",
+          "21:57:47",
+          "22:58:12"
+        ],
+        yAxis: [0, 1.0, 2.0, 3.0],
         data: [1.08, 2.54, 1.47, 1.03, 0.98, 0.99, 1.0, 1.12]
       }
     },
@@ -265,8 +250,43 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
       }
     ]
   }),
-  actions: {},
-  persist: false // 开启持久化
+  actions: {
+    async initializeGroupList(time = "2024-05-16 16:56:04") {
+      const res = await getGroupEvolutionGroupList(time)
+      if (res.code != 200) return
+      const iconMap = {
+        节点数: nodePrefix,
+        连边数: edgePrefix
+      }
+      this.groupList = res.data
+      this.groupList.forEach((item) => {
+        item.list = item.list.map((statistic) => ({
+          ...statistic,
+          iconImg: iconMap[statistic.name]
+        }))
+      })
+    },
+    async initializeGroupScaleChart() {
+      const res = await getGroupEvolutionGroupScaleChart()
+      if (res.code != 200) return
+      let resultObj = {}
+      const themeMap = {
+        群体一: "#32b6fb",
+        群体二: "#00d6da",
+        群体三: "#fddc33"
+      }
+      resultObj["xAxisData"] = res.data.timeList.map((item) => TansTimestamp(item, "HH:mm:ss"))
+      resultObj["yAxisRange"] = res.data.scale
+      resultObj["seriesList"] = []
+
+      Object.entries(res.data.data).forEach(([key, list]) => {
+        resultObj["seriesList"].push({ name: key, themeColor: themeMap[key], data: list })
+      })
+
+      this.chartData = resultObj
+    }
+  },
+  persist: true // 开启持久化
 })
 
 export const useGroupStructureStore = defineStore("groupStructure", {

src/views/GroupEvolution/component/groupChart.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"
+import { defineProps, onMounted, onBeforeUnmount, ref, computed, watch, nextTick } from "vue"
 import * as echarts from "echarts"
 
 let chartInstance = null
@@ -65,11 +65,21 @@ const onMouseMove = (e) => {
   const percent = newLeft / (sliderContainerWidth.value - sliderWidth)
   const xIndex = Math.floor(percent * (props.chartData.xAxisData.length - 1))
 
-  // 调用ECharts显示tooltip
-  if (chartInstance) {
+  // 滑块控制 ECharts dataZoom
+  if (chartInstance && props.chartData.xAxisData.length) {
+    const total = props.chartData.xAxisData.length
+    const windowSize = Math.floor(total * 0.5) // 显示 50% 数据
+    let start = Math.floor(percent * (total - windowSize))
+    let end = start + windowSize
+    chartInstance.dispatchAction({
+      type: "dataZoom",
+      startValue: props.chartData.xAxisData[Math.max(0, start)],
+      endValue: props.chartData.xAxisData[Math.min(total - 1, end)]
+    })
+    // 同时显示 tooltip
     chartInstance.dispatchAction({
       type: "showTip",
-      seriesIndex: 0, // 只显示第一个系列的tooltip
+      seriesIndex: 0,
       dataIndex: xIndex
     })
   }
@@ -86,6 +96,15 @@ const initChart = () => {
   chartInstance = echarts.init(document.getElementById(chartId.value))
   const legendData = props.chartData.seriesList.map((item) => item.name)
   const option = {
+    dataZoom: [
+      {
+        type: "slider",
+        show: false, // 隐藏默认滚动条，但保留 dataZoom 功能
+        xAxisIndex: 0,
+        start: 0,
+        end: 60
+      }
+    ],
     tooltip: {
       trigger: "axis"
     },
@@ -106,9 +125,9 @@ const initChart = () => {
       extraCssText: "box-shadow:none;padding:0;",
       formatter: function (params) {
         const color = {
-          头部自媒体: "#33b6fb",
-          官方媒体: "#00d6da",
-          普通自媒体: "#fddc33"
+          群体一: "#33b6fb",
+          群体二: "#00d6da",
+          群体三: "#fddc33"
         }
         const listHtml = params
           .map(
@@ -219,8 +238,21 @@ const initChart = () => {
   chartInstance.setOption(option)
 }
 
-onMounted(() => {
+//解决异步数据加载时图表未初始化的问题(赋值时间和调用时间)
+watch(
+  () => props.chartData,
+  (newVal) => {
+    if (newVal && newVal.seriesList && newVal.seriesList.length) {
+      // 数据准备好后，初始化或更新图表，确保 DOM 已渲染
+      nextTick(() => {
         initChart()
+      })
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+onMounted(() => {
   // 获取容器宽度
   sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
 })

src/views/GroupEvolution/component/groupPanel.vue

@@ -10,11 +10,11 @@
             alt=""
           />
           <div class="group-item-title-type">{{ group.type }}</div>
-          <div class="title-content">{{ group.title }}</div>
+          <div class="title-content">关注话题:&nbsp;&nbsp;{{ group.title }}</div>
         </div>
 
         <div class="group-item-statistics">
-          <div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id">
+          <div class="statistics-item" v-for="statistic in group.list" :key="statistic.id">
             <img :src="statistic.iconImg" alt="" class="sta-prefix" />
             <div class="statistics-content">
               <div class="sta-name">{{ statistic.name }}</div>

src/views/GroupEvolution/component/groupPost.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="postList-component">
     <img
-      src="@/assets/images/head/ContextoftheincidentTitle.png"
+      src="@/assets/images/groupEvolution/event-list-title.png"
       alt=""
       style="margin-top: -17px; margin-left: -11px"
     />
@@ -19,23 +19,6 @@
           :class="{ highlighted: post.highlighted }"
           @click="handleLeaderPost(post)"
         >
-          <div class="post-type">
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="icon"
-            >
-              <rect opacity="0.1" width="20" height="20" rx="2" fill="#2B88DD" />
-              <path d="M5 4V7C5 7.55228 5.44772 8 6 8H7" stroke="#8EFBFF" />
-              <path d="M15 4V7C15 7.55228 14.5523 8 14 8H13" stroke="#8EFBFF" />
-              <path d="M5 16V13C5 12.4477 5.44772 12 6 12H7" stroke="#8EFBFF" />
-              <path d="M15 16V13C15 12.4477 14.5523 12 14 12H13" stroke="#8EFBFF" />
-            </svg>
-            <span class="post-type-text">帖文</span>
-          </div>
           <span class="timestamp">{{ post.timestamp }}</span>
           <span class="author">【{{ post.author }}】发布了帖文</span>
           <div class="influence-section">
@@ -55,67 +38,67 @@
 </template>
 
 <script setup>
-import { ref, computed, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue"
 const props = defineProps({
   posts: {
     type: Array,
     default: () => []
   }
-});
+})
 
-const emit = defineEmits(["click:openDialog"]);
-const animationDuration = computed(() => `${props.posts.length * 3}s`);
+const emit = defineEmits(["click:openDialog"])
+const animationDuration = computed(() => `${props.posts.length * 3}s`)
 
-const maxInfluence = 10000;
+const maxInfluence = 10000
 
 const getInfluenceWidth = (influence) => {
-  const percentage = (influence / maxInfluence) * 100;
-  return `${Math.min(percentage, 100)}%`;
-};
+  const percentage = (influence / maxInfluence) * 100
+  return `${Math.min(percentage, 100)}%`
+}
 const handleLeaderPost = (item) => {
-  emit("click:openDialog", item);
-  console.log(item);
-};
+  emit("click:openDialog", item)
+  console.log(item)
+}
 
-const listRef = ref(null);
-let scrollTimer = null;
-let direction = 1; // 1: 向下, -1: 向上
-const scrollStep = 1; // 每步像素
-const scrollInterval = 80; // 每40ms滚动一次，越大越慢
+const listRef = ref(null)
+let scrollTimer = null
+let direction = 1 // 1: 向下, -1: 向上
+const scrollStep = 1 // 每步像素
+const scrollInterval = 80 // 每40ms滚动一次，越大越慢
 
 function startScroll() {
-  if (scrollTimer) return;
+  if (scrollTimer) return
   scrollTimer = setInterval(() => {
-    const el = listRef.value;
-    if (!el) return;
-    el.scrollTop += direction * scrollStep;
+    const el = listRef.value
+    if (!el) return
+    el.scrollTop += direction * scrollStep
     // 到底部
     if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
-      direction = -1;
+      direction = -1
     }
     // 到顶部
     if (el.scrollTop <= 0) {
-      direction = 1;
+      direction = 1
     }
-  }, scrollInterval);
+  }, scrollInterval)
 }
 
 function pauseScroll() {
   if (scrollTimer) {
-    clearInterval(scrollTimer);
-    scrollTimer = null;
+    clearInterval(scrollTimer)
+    scrollTimer = null
   }
 }
 function resumeScroll() {
-  startScroll();
+  startScroll()
 }
 
 onMounted(() => {
-  startScroll();
-});
+  startScroll()
+})
 onBeforeUnmount(() => {
-  pauseScroll();
-});
+  pauseScroll()
+})
 </script>
 
 <style scoped lang="less">

src/views/GroupEvolution/groupIdentifyDiscovery/index.vue

@@ -63,29 +63,34 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import GroupPanel from "../component/groupPanel.vue";
-import GroupChart from "../component/groupChart.vue";
-import GroupPost from "../component/groupPost.vue";
-import GroupShow from "../component/groupShow.vue";
-import WordsCloud from "../component/wordsCloud.vue";
-import groupPanelTitleImg from "@/assets/images/groupEvolution/groupPanel-title.png";
-import groupChartTitleImg from "@/assets/images/groupEvolution/chart-title.png";
-import groupGroupShowImg from "@/assets/images/groupEvolution/groupDisc-title.png";
-import { Icon } from "@iconify/vue";
-import { useGroupDiscoveryStore } from "@/store/groupEvolution/index";
+import { onMounted, ref } from "vue"
+import GroupPanel from "../component/groupPanel.vue"
+import GroupChart from "../component/groupChart.vue"
+import GroupPost from "../component/groupPost.vue"
+import GroupShow from "../component/groupShow.vue"
+import WordsCloud from "../component/wordsCloud.vue"
+import groupPanelTitleImg from "@/assets/images/groupEvolution/groupPanel-title.png"
+import groupChartTitleImg from "@/assets/images/groupEvolution/chart-title.png"
+import groupGroupShowImg from "@/assets/images/groupEvolution/groupDisc-title.png"
+import { Icon } from "@iconify/vue"
+import { useGroupDiscoveryStore } from "@/store/groupEvolution/index"
 
-const groupDiscoveryStore = useGroupDiscoveryStore();
+const groupDiscoveryStore = useGroupDiscoveryStore()
 //控制弹窗
-const postDialog = ref(false);
+const postDialog = ref(false)
 
 //当前选中的贴文数据
-const currentPostPost = ref(null);
+const currentPostPost = ref(null)
 
 const handleOpenPostDialog = (post) => {
-  postDialog.value = true;
-  currentPostPost.value = post;
-};
+  postDialog.value = true
+  currentPostPost.value = post
+}
+
+onMounted(() => {
+  groupDiscoveryStore.initializeGroupList()
+  groupDiscoveryStore.initializeGroupScaleChart()
+})
 </script>
 
 <style scoped lang="less">