解决冲突

src/service/api/groupEvolution.js

@@ -52,7 +52,10 @@ export function getStructuralEvolutionAnalysisPost(time) {
   return http.get(`/groupEvolution/groupStructure/posts?date=${time}`)
 }
 
-
+// 2.6 群体结构演化分析的关系图
+export function getStructuralEvolutionAnalysisGraph(time) {
+  return http.get(`/groupEvolution/groupStructure/relation?date=${time}`)
+}
 
 // 3.群体成员演化分析
 // 3.1 获取时间线数据
@@ -80,6 +83,10 @@ export function getGroupMemberEvolutionAnalysisChart() {
   return http.get(`/groupEvolution/groupMember/rightChart`)
 }
 
+//3.6 群体成员演化分析的关系图
+export function getGroupMemberEvolutionAnalysisGraph(time) {
+  return http.get(`/groupEvolution/groupMember/relation?date=${time}`)
+}
 // 4.异常群体捕捉
 // 4.1获取时间轴
 export function getAbnormalGroupTimeLine() {
@@ -102,4 +109,3 @@ export function getAbnormalGroupBehaviorPosts(time) {
 export function getAbnormalGroupBehaviorDetail(time) {
   return http.get(`/groupEvolution/groupException/rightChart?date=${time}`)
 }
-

src/store/groupEvolution/index.js

@@ -22,6 +22,8 @@ import {
   getGroupMemberChart,
   getGroupMemberEvolutionInfoByTime,
   getGroupMemberEvolutionAnalysisChart,
+  getStructuralEvolutionAnalysisGraph,
+  getGroupMemberEvolutionAnalysisGraph,
 
   // 4.异常群体捕捉
   getAbnormalGroupTimeLine,
@@ -523,7 +525,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
         }
         return colorMap[parseInt(groupId)]
       }
-      const res = await getRelationGraphByUtcTime(utcTime)
+      const res = await getStructuralEvolutionAnalysisGraph(utcTime)
       if (res.code != 200) return
       const newSet = new Set()
       this.graph["links"] = res.data.links.map((link) => ({
@@ -546,6 +548,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
             type: node.groupId
           }
         })
+      this.graph["newLinks"] = res.data?.newAddRelation ?? []
     },
     // 初始化群体结构演化分析的群体演化信息-中下-随时间轴变化
     async initializeStructuralPost(time = "2024-06-19T07:57:46Z") {
@@ -591,8 +594,6 @@ export const useGroupMemberStore = defineStore("groupMember", {
     },
     async initializeGroupMemberChart() {
       const res = await getGroupMemberChart()
-      // console.log("测试获取groupMemberChart:",res);
-
       const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
       const yAxisRange = res.data.yaxisRange
       const themeColors = ["#2AB8FD", "#02D7DA", "#FFDA09", "#EB57B0"]
@@ -689,7 +690,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
         }
         return colorMap[parseInt(groupId)]
       }
-      const res = await getRelationGraphByUtcTime(utcTime)
+      const res = await getGroupMemberEvolutionAnalysisGraph(utcTime)
+      console.log(res)
+
       if (res.code != 200) return
       const newSet = new Set()
       this.graph["links"] = res.data.links.map((link) => ({
@@ -712,17 +715,17 @@ export const useGroupMemberStore = defineStore("groupMember", {
             type: node.groupId
           }
         })
-        console.log(this.graph);
+      this.graph["newNodes"] = res.data?.newAddUser ?? []
     }
   },
   persist: true // 开启持久化
 })
 
-// —— 时间门槛 —— 
+// —— 时间门槛 ——
-const T0 = "2024-06-19T07:57:46Z";  // 默认渲染出全部节点
+const T0 = "2024-06-19T07:57:46Z" // 默认渲染出全部节点
-const TA = "2024-06-19T08:57:55Z"; // A 组异常开始
+const TA = "2024-06-19T08:57:55Z" // A 组异常开始
-const TB = "2024-06-19T10:58:03Z"; // B 组异常开始
+const TB = "2024-06-19T10:58:03Z" // B 组异常开始
-const TC = "2024-06-19T12:58:04Z"; // C 组异常开始
+const TC = "2024-06-19T12:58:04Z" // C 组异常开始
 
 export const useAnomalousGroup = defineStore("anomalousGroup", {
   state: () => ({
@@ -868,37 +871,37 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
     graphData: {
       nodes: [
         { id: "G01_A", type: "0", isAnomaly: false, label: "G01" },
-        { id: "G02_A", type: "0", isAnomaly: true,  label: "G02" },
+        { id: "G02_A", type: "0", isAnomaly: true, label: "G02" },
         { id: "G03_A", type: "0", isAnomaly: false, label: "G03" },
         { id: "G04_A", type: "0", isAnomaly: false, label: "G04" },
         { id: "G05_A", type: "0", isAnomaly: false, label: "G05" },
         { id: "G06_A", type: "0", isAnomaly: false, label: "G06" },
-        { id: "G07_A", type: "0", isAnomaly: true,  label: "G07" },
+        { id: "G07_A", type: "0", isAnomaly: true, label: "G07" },
         { id: "G08_A", type: "0", isAnomaly: false, label: "G08" },
         { id: "G09_A", type: "0", isAnomaly: false, label: "G09" },
         { id: "G10_A", type: "0", isAnomaly: false, label: "G10" },
         { id: "G11_A", type: "0", isAnomaly: false, label: "G11" },
         { id: "G12_A", type: "0", isAnomaly: false, label: "G12" },
-    
+
         { id: "G01_B", type: "1", isAnomaly: false, label: "G01" },
         { id: "G02_B", type: "1", isAnomaly: false, label: "G02" },
         { id: "G03_B", type: "1", isAnomaly: false, label: "G03" },
-        { id: "G04_B", type: "1", isAnomaly: true,  label: "G04" },
+        { id: "G04_B", type: "1", isAnomaly: true, label: "G04" },
         { id: "G05_B", type: "1", isAnomaly: false, label: "G05" },
         { id: "G06_B", type: "1", isAnomaly: false, label: "G06" },
         { id: "G07_B", type: "1", isAnomaly: false, label: "G07" },
-        { id: "G08_B", type: "1", isAnomaly: true,  label: "G08" },
+        { id: "G08_B", type: "1", isAnomaly: true, label: "G08" },
         { id: "G09_B", type: "1", isAnomaly: false, label: "G09" },
         { id: "G10_B", type: "1", isAnomaly: false, label: "G10" },
         { id: "G11_B", type: "1", isAnomaly: false, label: "G11" },
         { id: "G12_B", type: "1", isAnomaly: false, label: "G12" },
-    
+
         { id: "G01_C", type: "6", isAnomaly: false, label: "G01" },
         { id: "G02_C", type: "6", isAnomaly: false, label: "G02" },
-        { id: "G03_C", type: "6", isAnomaly: true,  label: "G03" },
+        { id: "G03_C", type: "6", isAnomaly: true, label: "G03" },
         { id: "G04_C", type: "6", isAnomaly: false, label: "G04" },
         { id: "G05_C", type: "6", isAnomaly: false, label: "G05" },
-        { id: "G06_C", type: "6", isAnomaly: true,  label: "G06" },
+        { id: "G06_C", type: "6", isAnomaly: true, label: "G06" },
         { id: "G07_C", type: "6", isAnomaly: false, label: "G07" },
         { id: "G08_C", type: "6", isAnomaly: false, label: "G08" },
         { id: "G09_C", type: "6", isAnomaly: false, label: "G09" },
@@ -927,7 +930,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         { source: "G07_A", target: "G10_A", type: "0" },
         { source: "G07_A", target: "G01_A", type: "0" },
         { source: "G07_A", target: "G04_A", type: "0" },
-    
+
         /* —— 组内：B 环 —— */
         { source: "G01_B", target: "G02_B", type: "1" },
         { source: "G02_B", target: "G03_B", type: "1" },
@@ -948,7 +951,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         { source: "G08_B", target: "G11_B", type: "1" },
         { source: "G08_B", target: "G02_B", type: "1" },
         { source: "G08_B", target: "G05_B", type: "1" },
-    
+
         /* —— 组内：C 环 —— */
         { source: "G01_C", target: "G02_C", type: "6" },
         { source: "G02_C", target: "G03_C", type: "6" },
@@ -969,18 +972,18 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         { source: "G06_C", target: "G09_C", type: "6" },
         { source: "G06_C", target: "G12_C", type: "6" },
         { source: "G06_C", target: "G03_C", type: "6" },
-    
+
         /* —— 跨组连边 —— */
         { source: "G02_A", target: "G04_B", type: "0" },
         { source: "G07_A", target: "G08_B", type: "0" },
         { source: "G01_A", target: "G05_B", type: "0" },
         { source: "G05_A", target: "G10_B", type: "0" },
-    
+
         { source: "G04_B", target: "G03_C", type: "1" },
         { source: "G08_B", target: "G06_C", type: "1" },
         { source: "G02_B", target: "G09_C", type: "1" },
         { source: "G11_B", target: "G01_C", type: "1" },
-    
+
         { source: "G03_C", target: "G02_A", type: "6" },
         { source: "G06_C", target: "G07_A", type: "6" },
         { source: "G04_C", target: "G09_A", type: "6" },
@@ -995,12 +998,12 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
       }
     },
     graphAbnormalData: {
-       groupA: ["G02_A", "G07_A"],
+      groupA: ["G02_A", "G07_A"],
-       groupB: ["G04_B", "G08_B"],
+      groupB: ["G04_B", "G08_B"],
-       groupC: ["G03_C", "G06_C"],
+      groupC: ["G03_C", "G06_C"],
-       abnormalNodesT1: ["G02_A", "G07_A"],
+      abnormalNodesT1: ["G02_A", "G07_A"],
-       abnormalNodesT2: ["G04_B", "G08_B"],
+      abnormalNodesT2: ["G04_B", "G08_B"],
-       abnormalNodesT3: ["G02_A", "G07_A", "G04_B", "G08_B", "G03_C", "G06_C"]
+      abnormalNodesT3: ["G02_A", "G07_A", "G04_B", "G08_B", "G03_C", "G06_C"]
     }
   }),
   actions: {
@@ -1043,7 +1046,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
     async initializeAbnormalGroupPosts(time = "2024-06-19T07:57:46Z") {
       const res = await getAbnormalGroupBehaviorPosts(time)
       if (res.code === 200) {
-        this.posts = res.data.map((item => ({
+        this.posts = res.data.map((item) => ({
           id: item.id,
           abnormalGroup: item.abnormalGroup,
           explanation: item.explanation,
@@ -1052,10 +1055,8 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
           JS: parseFloat(item.js),
           CUSUM: parseFloat(item.cusum),
           KS: parseFloat(item.ks)
-        })))
+        }))
-        
       }
-
     },
 
     // 异常互动详情-右上
@@ -1067,16 +1068,16 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
     },
     // 用于画中间组件的圆
     async initialGraphByUtcTime(utcIso) {
-      this.currentUtc = utcIso;
+      this.currentUtc = utcIso
       // 1) 复制 nodes 并上色
-      const nodes = this.graphData.nodes.map(n => {
+      const nodes = this.graphData.nodes.map((n) => {
         return {
           id: n.id,
           label: n.label,
           type: n.type, // 0=A, 1=B, 6=C（组件里 colorMap 已按这三个上色/分组）
           isAnomaly: n.isAnomaly
-        };
+        }
-      });
+      })
 
       this.graph["nodes"] = nodes
 
@@ -1088,14 +1089,13 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         }
         return colorMap[type]
       }
- 
+
-      const links = this.graphData.links.map(l => ({
+      const links = this.graphData.links.map((l) => ({
         source: l.source,
         target: l.target,
-        color: setColor(l.type), 
+        color: setColor(l.type)
       }))
       this.graph["links"] = links
-
     }
   },
   persist: true // 开启持久化

src/views/GroupEvolution/component/groupGraph.vue

@@ -144,7 +144,67 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
     }
 
     const handleAnomalousGroup = () => {
-      console.log(storeId)
+      // 当前时间从 store 取；没有就用 T0
+      const now = props.store.currentUtc
+      const TA = "2024-06-19T08:57:55Z" // A
+      const TB = "2024-06-19T10:58:03Z" // B
+      const TC = "2024-06-19T12:58:04Z" // C
+      // 组色（与你现有 colorMap 一致）
+      const GROUP_ALPHA = 0.3
+      const RED = "220,50,60"
+      // 时间门控：达到阈值就把各组异常节点染红
+      const shouldA = now >= TA
+      const shouldB = now >= TB
+      const shouldC = now >= TC
+      if (shouldA) {
+        graphVis.nodes = graphVis.nodes.map((n) => {
+          if (props.store.graphAbnormalData.groupA.includes(n.id)) {
+            n.fillColor = RED
+          }
+          return n
+        })
+        graphVis.addNodesInGroup(
+          graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupA.includes(n.id)),
+          {
+            shape: "circle",
+            color: RED,
+            alpha: GROUP_ALPHA
+          }
+        )
+      }
+      if (shouldB) {
+        graphVis.nodes = graphVis.nodes.map((n) => {
+          if (props.store.graphAbnormalData.groupB.includes(n.id)) {
+            n.fillColor = RED
+          }
+          return n
+        })
+        graphVis.addNodesInGroup(
+          graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupB.includes(n.id)),
+          {
+            shape: "circle",
+            color: RED,
+            alpha: GROUP_ALPHA
+          }
+        )
+      }
+      if (shouldC) {
+        graphVis.nodes = graphVis.nodes.map((n) => {
+          if (props.store.graphAbnormalData.groupC.includes(n.id)) {
+            n.fillColor = RED
+          }
+          return n
+        })
+        graphVis.addNodesInGroup(
+          graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupC.includes(n.id)),
+          {
+            shape: "circle",
+            color: RED,
+            alpha: GROUP_ALPHA
+          }
+        )
+      }
+      graphVis.autoGroupLayout(graphVis.nodes)
     }
 
     new Map([
@@ -191,91 +251,6 @@ const clusterAnalyze = () => {
     })
   })
   graphVis.autoGroupLayout(graphVis.nodes)
-
-  function handleGroupDiscoveryDiff() {
-    console.log(storeId)
-  }
-
-  function handleGroupStructureDiff() {
-    console.log(storeId)
-  }
-
-  function handleGroupMemberDiff() {
-    console.log(storeId)
-  }
-
-  function handleAnomalousGroup() {
-    console.log(storeId)
-
-    // 当前时间从 store 取；没有就用 T0
-    const now = (props.store.currentUtc);
-
-    const TA = "2024-06-19T08:57:55Z"; // A
-    const TB = "2024-06-19T10:58:03Z"; // B
-    const TC = "2024-06-19T12:58:04Z"; // C
-
-    // 组色（与你现有 colorMap 一致）
-    const GROUP_ALPHA = 0.30;
-
-    const RED = "220,50,60";
-
-    // 时间门控：达到阈值就把各组异常节点染红
-    const shouldA = now >= TA;
-    const shouldB = now >= TB;
-    const shouldC = now >= TC;
-
-    if(shouldA) {
-      graphVis.nodes = graphVis.nodes.map(n => {
-        if(props.store.graphAbnormalData.groupA.includes(n.id)) {
-          n.fillColor = RED;
-        }
-        return n;
-      })
-      console.log(graphVis.nodes)
-      graphVis.addNodesInGroup(graphVis.nodes.filter(n => props.store.graphAbnormalData.groupA.includes(n.id)), {
-        shape: "circle",
-        color: RED,
-        alpha: GROUP_ALPHA
-      })
-
-    }
-    if(shouldB) {
-      graphVis.nodes = graphVis.nodes.map(n => {
-        if(props.store.graphAbnormalData.groupB.includes(n.id)) {
-          n.fillColor = RED;
-        }
-        return n;
-      })
-      graphVis.addNodesInGroup(graphVis.nodes.filter(n => props.store.graphAbnormalData.groupB.includes(n.id)), {
-        shape: "circle",
-        color: RED,
-        alpha: GROUP_ALPHA
-      })
-
-    }
-    if(shouldC) {
-      graphVis.nodes = graphVis.nodes.map(n => {
-        if(props.store.graphAbnormalData.groupC.includes(n.id)) {
-          n.fillColor = RED;
-        }
-        return n;
-      })
-      graphVis.addNodesInGroup(graphVis.nodes.filter(n => props.store.graphAbnormalData.groupC.includes(n.id)), {
-        shape: "circle",
-        color: RED,
-        alpha: GROUP_ALPHA
-      })
-    }
-    graphVis.autoGroupLayout(graphVis.nodes);
-  }
-
-  new Map([
-    ["groupDiscovery", () => handleGroupDiscoveryDiff()],
-    ["groupStructure", () => handleGroupStructureDiff()],
-    ["groupMember", () => handleGroupMemberDiff()],
-    ["anomalousGroup", () => handleAnomalousGroup()]
-  ]).get(storeId)?.()
-  // graphVis.selectedEdge(graphVis.links[0])
 }
 
 // 仅对“异常群体模块”生效：时间变化时强制重绘一次