修改第二个页面和第三个页面
This commit is contained in:
qumeng039@126.com
parent
d2d42d7636
commit
04869323d2
|
|
@ -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}`)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 TA = "2024-06-19T08:57:55Z"; // A 组异常开始
|
||||
const TB = "2024-06-19T10:58:03Z"; // B 组异常开始
|
||||
const TC = "2024-06-19T12:58:04Z"; // C 组异常开始
|
||||
const T0 = "2024-06-19T07:57:46Z" // 默认渲染出全部节点
|
||||
const TA = "2024-06-19T08:57:55Z" // A 组异常开始
|
||||
const TB = "2024-06-19T10:58:03Z" // B 组异常开始
|
||||
const TC = "2024-06-19T12:58:04Z" // C 组异常开始
|
||||
|
||||
export const useAnomalousGroup = defineStore("anomalousGroup", {
|
||||
state: () => ({
|
||||
|
|
@ -868,12 +871,12 @@ 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" },
|
||||
|
|
@ -883,11 +886,11 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
|||
{ 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" },
|
||||
|
|
@ -895,10 +898,10 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
|||
|
||||
{ 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" },
|
||||
|
|
@ -995,12 +998,12 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
|||
}
|
||||
},
|
||||
graphAbnormalData: {
|
||||
groupA: ["G02_A", "G07_A"],
|
||||
groupB: ["G04_B", "G08_B"],
|
||||
groupC: ["G03_C", "G06_C"],
|
||||
abnormalNodesT1: ["G02_A", "G07_A"],
|
||||
abnormalNodesT2: ["G04_B", "G08_B"],
|
||||
abnormalNodesT3: ["G02_A", "G07_A", "G04_B", "G08_B", "G03_C", "G06_C"]
|
||||
groupA: ["G02_A", "G07_A"],
|
||||
groupB: ["G04_B", "G08_B"],
|
||||
groupC: ["G03_C", "G06_C"],
|
||||
abnormalNodesT1: ["G02_A", "G07_A"],
|
||||
abnormalNodesT2: ["G04_B", "G08_B"],
|
||||
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
|
||||
|
||||
|
|
@ -1089,13 +1090,12 @@ 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 // 开启持久化
|
||||
|
|
|
|||
|
|
@ -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,106 +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_COLOR = { 0: "12,112,144", 1: "180,150,20", 6: "50,141,120" };
|
||||
const GROUP_ALPHA = 0.30;
|
||||
|
||||
const RED = "220,50,60";
|
||||
|
||||
// 覆盖画三大组大圆（蓝/黄/绿透明）
|
||||
/* const buckets = new Map();
|
||||
graphVis.nodes.forEach(n => {
|
||||
const t = parseInt(n.type); // "0"|"1"|"6" → 0/1/6
|
||||
if (!buckets.has(t)) buckets.set(t, []);
|
||||
buckets.get(t).push(n);
|
||||
});
|
||||
buckets.forEach((nodes, t) => {
|
||||
const color = GROUP_COLOR[t] || "120,120,120";
|
||||
const g = graphVis.addNodesInGroup(nodes, { shape: "circle", color, alpha: GROUP_ALPHA });
|
||||
g.smoothPath = false;
|
||||
}); */
|
||||
|
||||
// 时间门控：达到阈值就把各组异常节点染红
|
||||
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);
|
||||
graphVis.zoomFit(); // 没有 refresh；这两个就够
|
||||
}
|
||||
|
||||
new Map([
|
||||
["groupDiscovery", () => handleGroupDiscoveryDiff()],
|
||||
["groupStructure", () => handleGroupStructureDiff()],
|
||||
["groupMember", () => handleGroupMemberDiff()],
|
||||
["anomalousGroup", () => handleAnomalousGroup()]
|
||||
]).get(storeId)?.()
|
||||
// graphVis.selectedEdge(graphVis.links[0])
|
||||
}
|
||||
|
||||
// 仅对“异常群体模块”生效：时间变化时强制重绘一次
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user