模块四接口准备，小问题修复

src/service/api/groupEvolution.js

@@ -80,3 +80,26 @@ export function getGroupMemberEvolutionAnalysisChart() {
   return http.get(`/groupEvolution/groupMember/rightChart`)
 }
 
+// 4.异常群体捕捉
+// 4.1获取时间轴
+export function getAbnormalGroupTimeLine() {
+  return http.get(`/groupEvolution/groupMember/timeline`)
+}
+// 4.2获取异常群体列表-z左上
+export function getAbnormalGroupList(time) {
+  return http.get(`/groupEvolution/abnormalGroup/infoList?time=${time}`)
+}
+// 4.3全局异常互动时刻表-左下
+export function getAbnormalGroupInteractionChart() {
+  return http.get(`/groupEvolution/abnormalGroup/chart`)
+}
+// 4.4异常行为分析
+export function getAbnormalGroupBehaviorPosts(time) {
+  return http.get(`/groupEvolution/abnormalGroup/posts/date=${time}`)
+}
+
+// 4.5 异常互动行为内容详情
+export function getAbnormalGroupBehaviorDetail(time) {
+  return http.get(`/groupEvolution/abnormalGroup/detail?time=${time}`)
+}
+

src/store/groupEvolution/index.js

@@ -24,6 +24,14 @@ import {
   getGroupMemberChart,
   getGroupMemberEvolutionInfoByTime,
   getGroupMemberEvolutionAnalysisChart,
+
+  // 4.异常群体捕捉
+  getAbnormalGroupTimeLine,
+  getAbnormalGroupList,
+  getAbnormalGroupInteractionChart,
+  getAbnormalGroupBehaviorPosts,
+  getAbnormalGroupBehaviorDetail,
+
   getRelationGraphByUtcTime
 } from "@/service/api/groupEvolution"
 import { TansTimestamp, utcStringToHHMMSS, getMaxCeiled, parsePercentage } from "@/utils/transform"
@@ -299,7 +307,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
       ]
     },
     chartsData: {
-      topSelfMedia: [
+      /* topSelfMedia: [
         {
           id: 1,
           name: "内部密度指数演化",
@@ -394,7 +402,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
             ]
           }
         }
-      ]
+      ] */
     },
     wordCloudData: [
       {
@@ -1039,11 +1047,13 @@ export const useGroupMemberStore = defineStore("groupMember", {
     ]
   }),
   actions: {
+    // 获取时间轴
     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)
@@ -1095,7 +1105,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
           seriesList: item.chart.seriesList.map((item) => ({
-            data: item.data,
+            data: item.data.map((item) => item.toFixed(2)),
             name: item.name,
             themeColor: themeColors[item.name]
           }))
@@ -1109,7 +1119,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
           seriesList: item.chart.seriesList.map((item) => ({
-            data: item.data,
+            data: item.data.map((item) => item.toFixed(2)),
             name: item.name,
             themeColor: themeColors[item.name]
           }))
@@ -1123,7 +1133,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
           seriesList: item.chart.seriesList.map((item) => ({
-            data: item.data,
+            data: item.data.map((item) => item.toFixed(2)),
             name: item.name,
             themeColor: themeColors[item.name]
           }))
@@ -1176,6 +1186,8 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         ]
       }
     ],
+    graph: {},
+    timeList: [],
     wordCloudData: [
       {
         text: "局座",
@@ -1364,5 +1376,59 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         KS: 0.02
       }
     ]
-  })
+  }),
+  actions: {
+    // 获取时间轴数据-中间时间轴
+    async initializeAbnormalGroupTimeLine() {
+      const res = await getAbnormalGroupTimeLine()
+      if (res.code === 200) {
+        this.timeList = res.data
+      }
+    },
+    // 异常用户组展示-左上
+    async initializeAbnormalGroupList(time = '2024-06-19T07:57:46Z') {
+      const res = await getAbnormalGroupList(time)
+      if (res.code === 200) {
+        this.abnormalGroupList = res.data
+      }
+    },
+    // 全局异常互动时刻表-左下
+    async initializeAbnormalGroupInteractionChart() {
+      const res = await getAbnormalGroupInteractionChart()
+      const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
+      const yAxisRange = res.data.yaxisRange
+      const themeColors = {
+        社团组一: "#2AB8FD",
+        社团组二: "#02D7DA",
+        社团组三: "#FFDA09"
+      }
+      const seriesList = res.data.seriesList.map((item) => ({
+        data: item.data.map((item) => item.toFixed(2)),
+        name: item.name,
+        themeColor: themeColors[item.name]
+      }))
+      this.chartData = {
+        xAxisData,
+        yAxisRange,
+        seriesList
+      }
+    },
+    // 异常行为分析-中下
+    async initializeAbnormalGroupPosts(time = '2024-06-19T07:57:46Z') {
+      const res = await getAbnormalGroupBehaviorPosts(time)
+      if (res.code === 200) {
+        this.posts = res.data
+      }
+    },
+
+    // 异常互动详情-右上
+    async initializeAbnormalGroupInteractionDetail(time = '2024-06-19T07:57:46Z') {
+      const res = await getAbnormalGroupBehaviorDetail(time)
+      if (res.code === 200) {
+        this.interactionDetail = res.data
+      }
+    },
+
+  },
+  persist: true // 开启持久化
 })

src/views/GroupEvolution/abnormalGroup/index.vue

@@ -18,7 +18,12 @@
         </div>
       </div>
       <div class="middle-container">
-        <div class="graph"></div>
+        <div class="graph">
+          <GroupGraph
+            :store="anomalousGroupStore"
+            @click:pointerDownAndSlide="handleChangeXAxis"
+          ></GroupGraph>
+        </div>
         <div class="postList">
           <GroupPost :posts="anomalousGroupStore.posts" :isAbnormal="true" :moduleName="moduleName"></GroupPost>
         </div>
@@ -58,10 +63,11 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import userGroupTitle from "@/assets/images/abnormalGroup/abnormal-user-group-title.png"
 import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
 import { Icon } from "@iconify/vue";
+import GroupGraph from "../component/groupGraph.vue"
 import WordsCloud from "../component/wordsCloud.vue"
 import GroupPanel from "./components/groupPanel.vue"
 import GroupPost from "../component/groupPost.vue"
@@ -72,6 +78,18 @@ import { useAnomalousGroup } from "@/store/groupEvolution/index";
 const anomalousGroupStore = useAnomalousGroup();
 const moduleName = "异常行为分析"
 
+
+const handleChangeXAxis = (utcTime) => {
+
+  console.log("点击时间轴：",utcTime)
+  // 根据时间轴变化更改群体结构信息列表
+
+  // 根据时间轴变化更改群体结构演化分析的群体演化信息-中下-随时间轴变化
+
+
+
+}
+
 //控制弹窗
 const postDialog = ref(false);
 
@@ -82,6 +100,11 @@ const handleOpenPostDialog = (post) => {
   postDialog.value = true;
   currentPostPost.value = post;
 };
+
+onMounted(async () => {
+  await anomalousGroupStore.initializeAbnormalGroupTimeLine()
+
+})
 </script>
 
 <style scoped lang="less">

src/views/GroupEvolution/component/groupChart.vue

@@ -195,7 +195,7 @@ const initChart = () => {
           .join("")
         return `
       <div style="
-        width:150px;
+        
         border-radius:6px;
         background:linear-gradient(304deg, rgba(28,103,175,0.3) -6.04%, rgba(2,95,137,0.3) 85.2%);
         backdrop-filter:blur(4px);

src/views/GroupEvolution/groupMember/components/groupAnalysis.vue

@@ -96,6 +96,7 @@ onMounted(() => {
     .tabs {
       width: 97%;
       height: 24px;
+      padding: 0px 20px;
       border-radius: 4px;
       display: flex;
       justify-content: space-between;

src/views/GroupEvolution/groupMember/components/groupPanel.vue

@@ -81,17 +81,15 @@ const updateCharts = (groupList) => {
       if (chartInstances.has(group.id)) {
         // 图表实例存在，只更新数据
         const myChart = chartInstances.get(group.id);
-
         // 计算maxValue
         const firstElement = group.value[0];
         const allEqual = group.value.every(item => item === firstElement);
         let maxValue = 0;
         if(allEqual){
-          maxValue = Number(firstElement) + 40;
+          maxValue = parseFloat(firstElement) + 40;
         }else{
-          maxValue = Math.ceil(Math.max(...group.value));
+          maxValue = Math.ceil(Math.max(...group.value.map(item => parseFloat(item))));
         }
-
         // 更新图表选项
         myChart.setOption({
           radar: {
@@ -135,9 +133,9 @@ const updateCharts = (groupList) => {
         const allEqual = group.value.every(item => item === firstElement);
         let maxValue = 0;
         if(allEqual){
-          maxValue = firstElement + 20;
+          maxValue = parseFloat(firstElement) + 20;
         }else{
-          maxValue = Math.ceil(Math.max(...group.value));
+          maxValue = Math.ceil(Math.max(...group.value.map(item => parseFloat(item))));
         }
 
         const option = {
@@ -163,10 +161,10 @@ const updateCharts = (groupList) => {
                       flex-direction: column;
                       ">
                   <div style="color:#fff;letter-spacing: 0.14px;">
-                    <div >成长：${params.data.value[0] - 20}</div>
+                    <div >成长：${(parseFloat(params.data.value[0]) - 20).toFixed(2)}</div>
-                    <div >收缩：${params.data.value[1] - 20}</div>
+                    <div >收缩：${(parseFloat(params.data.value[1]) - 20).toFixed(2)}</div>
-                    <div >合并：${params.data.value[2] - 20}</div>
+                    <div >合并：${(parseFloat(params.data.value[2]) - 20).toFixed(2)}</div>
-                    <div >分裂：${params.data.value[3] - 20}</div>
+                    <div >分裂：${(parseFloat(params.data.value[3]) - 20).toFixed(2)}</div>
                 </div>
               </div>`;
             }

src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted, ref } from "vue";
+import { defineProps, onMounted, ref, watch } from "vue";
 import GroupChart from "../../component/groupChart.vue";
 const curSelectedTab = ref("头部自媒体");
 const curSelectedTabData = ref(null);
@@ -43,6 +43,27 @@ const props = defineProps({
   }
 });
 
+// 添加对chartsData的深度监听
+watch(
+  () => props.chartsData,
+  (newVal) => {
+    // 当chartsData加载完成且不为空时，更新当前选中标签的数据
+    if (newVal && Object.keys(newVal).length > 0) {
+      const keyMapList = {
+       头部自媒体: "topSelfMedia",
+       官方媒体: "officalMedia",
+       普通自媒体: "ordinaryMedia"
+      };
+      const currentKey = keyMapList[curSelectedTab.value];
+      if (newVal[currentKey]) {
+        curSelectedTabData.value = newVal[currentKey];
+      }
+    }
+  },
+  { deep: true, immediate: true } // 深度监听并立即执行一次
+);
+
+
 const handleSwitch = (item) => {
   curSelectedTab.value = item;
   const keyMapList = {
@@ -71,6 +92,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     .tabs {
+      padding: 0px 20px;
       width: 97%;
       height: 24px;
       border-radius: 4px;