变红动画
This commit is contained in:
parent
879c87e88c
commit
6d2c1eff7d
|
|
@ -95,7 +95,6 @@ export function getAbnormalGroupInteractionChart() {
|
||||||
}
|
}
|
||||||
// 4.4异常行为分析
|
// 4.4异常行为分析
|
||||||
export function getAbnormalGroupBehaviorPosts(time) {
|
export function getAbnormalGroupBehaviorPosts(time) {
|
||||||
console.log(time)
|
|
||||||
return http.get(`/groupEvolution/groupException/posts?date=${time}`)
|
return http.get(`/groupEvolution/groupException/posts?date=${time}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -712,11 +712,18 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
||||||
type: node.groupId
|
type: node.groupId
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
console.log(this.graph);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
persist: true // 开启持久化
|
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 组异常开始
|
||||||
|
|
||||||
export const useAnomalousGroup = defineStore("anomalousGroup", {
|
export const useAnomalousGroup = defineStore("anomalousGroup", {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
groupList: [],
|
groupList: [],
|
||||||
|
|
@ -856,7 +863,145 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
||||||
CUSUM: 5.0,
|
CUSUM: 5.0,
|
||||||
KS: 0.02
|
KS: 0.02
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
currentUtc: T0,
|
||||||
|
graphData: {
|
||||||
|
nodes: [
|
||||||
|
{ id: "G01_A", type: "0", isAnomaly: false, label: "G01" },
|
||||||
|
{ 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: "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: "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: "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: "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: "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" },
|
||||||
|
{ id: "G10_C", type: "6", isAnomaly: false, label: "G10" },
|
||||||
|
{ id: "G11_C", type: "6", isAnomaly: false, label: "G11" },
|
||||||
|
{ id: "G12_C", type: "6", isAnomaly: false, label: "G12" }
|
||||||
|
],
|
||||||
|
links: [
|
||||||
|
/* —— 组内：A 环 —— */
|
||||||
|
{ source: "G01_A", target: "G02_A", type: "0" },
|
||||||
|
{ source: "G02_A", target: "G03_A", type: "0" },
|
||||||
|
{ source: "G03_A", target: "G04_A", type: "0" },
|
||||||
|
{ source: "G04_A", target: "G05_A", type: "0" },
|
||||||
|
{ source: "G05_A", target: "G06_A", type: "0" },
|
||||||
|
{ source: "G06_A", target: "G07_A", type: "0" },
|
||||||
|
{ source: "G07_A", target: "G08_A", type: "0" },
|
||||||
|
{ source: "G08_A", target: "G09_A", type: "0" },
|
||||||
|
{ source: "G09_A", target: "G10_A", type: "0" },
|
||||||
|
{ source: "G10_A", target: "G11_A", type: "0" },
|
||||||
|
{ source: "G11_A", target: "G12_A", type: "0" },
|
||||||
|
{ source: "G12_A", target: "G01_A", type: "0" },
|
||||||
|
/* —— A 组：异常节点额外连边（突出）—— */
|
||||||
|
{ source: "G02_A", target: "G05_A", type: "0" },
|
||||||
|
{ source: "G02_A", target: "G08_A", type: "0" },
|
||||||
|
{ source: "G02_A", target: "G11_A", type: "0" },
|
||||||
|
{ 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" },
|
||||||
|
{ source: "G03_B", target: "G04_B", type: "1" },
|
||||||
|
{ source: "G04_B", target: "G05_B", type: "1" },
|
||||||
|
{ source: "G05_B", target: "G06_B", type: "1" },
|
||||||
|
{ source: "G06_B", target: "G07_B", type: "1" },
|
||||||
|
{ source: "G07_B", target: "G08_B", type: "1" },
|
||||||
|
{ source: "G08_B", target: "G09_B", type: "1" },
|
||||||
|
{ source: "G09_B", target: "G10_B", type: "1" },
|
||||||
|
{ source: "G10_B", target: "G11_B", type: "1" },
|
||||||
|
{ source: "G11_B", target: "G12_B", type: "1" },
|
||||||
|
{ source: "G12_B", target: "G01_B", type: "1" },
|
||||||
|
/* —— B 组：异常节点额外连边 —— */
|
||||||
|
{ source: "G04_B", target: "G07_B", type: "1" },
|
||||||
|
{ source: "G04_B", target: "G10_B", type: "1" },
|
||||||
|
{ source: "G04_B", target: "G01_B", type: "1" },
|
||||||
|
{ 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" },
|
||||||
|
{ source: "G03_C", target: "G04_C", type: "6" },
|
||||||
|
{ source: "G04_C", target: "G05_C", type: "6" },
|
||||||
|
{ source: "G05_C", target: "G06_C", type: "6" },
|
||||||
|
{ source: "G06_C", target: "G07_C", type: "6" },
|
||||||
|
{ source: "G07_C", target: "G08_C", type: "6" },
|
||||||
|
{ source: "G08_C", target: "G09_C", type: "6" },
|
||||||
|
{ source: "G09_C", target: "G10_C", type: "6" },
|
||||||
|
{ source: "G10_C", target: "G11_C", type: "6" },
|
||||||
|
{ source: "G11_C", target: "G12_C", type: "6" },
|
||||||
|
{ source: "G12_C", target: "G01_C", type: "6" },
|
||||||
|
/* —— C 组：异常节点额外连边 —— */
|
||||||
|
{ source: "G03_C", target: "G06_C", type: "6" },
|
||||||
|
{ source: "G03_C", target: "G09_C", type: "6" },
|
||||||
|
{ source: "G03_C", target: "G12_C", type: "6" },
|
||||||
|
{ 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" },
|
||||||
|
{ source: "G12_C", target: "G06_A", type: "6" }
|
||||||
|
],
|
||||||
|
meta: {
|
||||||
|
groups: [
|
||||||
|
{ id: "A", anomalies: ["G02_A", "G07_A"] },
|
||||||
|
{ id: "B", anomalies: ["G04_B", "G08_B"] },
|
||||||
|
{ id: "C", anomalies: ["G03_C", "G06_C"] }
|
||||||
]
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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"]
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
// 获取时间轴数据-中间时间轴
|
// 获取时间轴数据-中间时间轴
|
||||||
|
|
@ -919,6 +1064,38 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.abnormalContentList = res.data
|
this.abnormalContentList = res.data
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 用于画中间组件的圆
|
||||||
|
async initialGraphByUtcTime(utcIso) {
|
||||||
|
this.currentUtc = utcIso;
|
||||||
|
// 1) 复制 nodes 并上色
|
||||||
|
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
|
||||||
|
|
||||||
|
const setColor = (type) => {
|
||||||
|
const colorMap = {
|
||||||
|
0: "50,141,120",
|
||||||
|
1: "133,129,48",
|
||||||
|
6: "12,112,144"
|
||||||
|
}
|
||||||
|
return colorMap[type]
|
||||||
|
}
|
||||||
|
|
||||||
|
const links = this.graphData.links.map(l => ({
|
||||||
|
source: l.source,
|
||||||
|
target: l.target,
|
||||||
|
color: setColor(l.type),
|
||||||
|
}))
|
||||||
|
this.graph["links"] = links
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
persist: true // 开启持久化
|
persist: true // 开启持久化
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,7 @@ const handleChangeXAxis = (utcTime) => {
|
||||||
// 根据时间轴变化更改群体结构演化分析的群体演化信息-中下-随时间轴变化
|
// 根据时间轴变化更改群体结构演化分析的群体演化信息-中下-随时间轴变化
|
||||||
anomalousGroupStore.initializeAbnormalGroupPosts(utcTime)
|
anomalousGroupStore.initializeAbnormalGroupPosts(utcTime)
|
||||||
anomalousGroupStore.initializeAbnormalGroupInteractionDetail(utcTime)
|
anomalousGroupStore.initializeAbnormalGroupInteractionDetail(utcTime)
|
||||||
|
anomalousGroupStore.currentUtc = utcTime; // ★ 关键：触发上面的 watcher
|
||||||
}
|
}
|
||||||
|
|
||||||
//控制弹窗
|
//控制弹窗
|
||||||
|
|
@ -109,6 +110,7 @@ onMounted(async () => {
|
||||||
await anomalousGroupStore.initializeAbnormalGroupPosts()
|
await anomalousGroupStore.initializeAbnormalGroupPosts()
|
||||||
await anomalousGroupStore.initializeAbnormalGroupInteractionDetail()
|
await anomalousGroupStore.initializeAbnormalGroupInteractionDetail()
|
||||||
await anomalousGroupStore.initializeAbnormalGroupInteractionChart()
|
await anomalousGroupStore.initializeAbnormalGroupInteractionChart()
|
||||||
|
await anomalousGroupStore.initialGraphByUtcTime("2024-06-19T07:57:46Z")
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ import { convertToUtcIsoString } from "@/utils/transform"
|
||||||
import { paintNodeFunction, paintLineFunction } from "@/utils/customePaint"
|
import { paintNodeFunction, paintLineFunction } from "@/utils/customePaint"
|
||||||
import TimeAxis from "@/components/timeAxis.vue"
|
import TimeAxis from "@/components/timeAxis.vue"
|
||||||
import GraphVis from "@/assets/package/graphvis.esm.min.js"
|
import GraphVis from "@/assets/package/graphvis.esm.min.js"
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
store: {
|
store: {
|
||||||
required: true
|
required: true
|
||||||
|
|
@ -155,7 +156,7 @@ const clusterAnalyze = () => {
|
||||||
}
|
}
|
||||||
clusterNodesMap.get(cluster).push(node)
|
clusterNodesMap.get(cluster).push(node)
|
||||||
})
|
})
|
||||||
const colorMap = {
|
let colorMap = {
|
||||||
0: "50,141,120", // 绿色
|
0: "50,141,120", // 绿色
|
||||||
1: "133,129,48", // 黄色
|
1: "133,129,48", // 黄色
|
||||||
6: "12,112,144" // 蓝色
|
6: "12,112,144" // 蓝色
|
||||||
|
|
@ -189,6 +190,72 @@ const clusterAnalyze = () => {
|
||||||
|
|
||||||
function handleAnomalousGroup() {
|
function handleAnomalousGroup() {
|
||||||
console.log(storeId)
|
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) {
|
||||||
|
console.log("A异常")
|
||||||
|
|
||||||
|
graphVis.nodes = graphVis.nodes.map(n => {
|
||||||
|
if(props.store.graphAbnormalData.groupA.includes(n.id)) {
|
||||||
|
n.fillColor = RED;
|
||||||
|
}
|
||||||
|
return n;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(shouldB) {
|
||||||
|
console.log("B异常")
|
||||||
|
graphVis.nodes = graphVis.nodes.map(n => {
|
||||||
|
if(props.store.graphAbnormalData.groupB.includes(n.id)) {
|
||||||
|
n.fillColor = RED;
|
||||||
|
}
|
||||||
|
return n;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(shouldC) {
|
||||||
|
console.log("C异常")
|
||||||
|
|
||||||
|
graphVis.nodes = graphVis.nodes.map(n => {
|
||||||
|
if(props.store.graphAbnormalData.groupC.includes(n.id)) {
|
||||||
|
n.fillColor = RED;
|
||||||
|
}
|
||||||
|
return n;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
graphVis.autoGroupLayout(graphVis.nodes);
|
||||||
|
graphVis.zoomFit(); // 没有 refresh；这两个就够
|
||||||
}
|
}
|
||||||
|
|
||||||
new Map([
|
new Map([
|
||||||
|
|
@ -200,6 +267,20 @@ const clusterAnalyze = () => {
|
||||||
// graphVis.selectedEdge(graphVis.links[0])
|
// graphVis.selectedEdge(graphVis.links[0])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 仅对“异常群体模块”生效：时间变化时强制重绘一次
|
||||||
|
if (storeId === 'anomalousGroup') {
|
||||||
|
watch(
|
||||||
|
() => props.store.currentUtc,
|
||||||
|
() => {
|
||||||
|
// 不改 graph 数据结构，直接用当前 graph 强制走一遍：addGraph → clusterAnalyze → runForceLayout
|
||||||
|
if (graphVis) {
|
||||||
|
updateChart(toRaw(graph.value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 实例化 GraphVis、注册自定义绘制/事件
|
||||||
const createGraph = () => {
|
const createGraph = () => {
|
||||||
if (!graphVis) {
|
if (!graphVis) {
|
||||||
graphVis = new GraphVis({
|
graphVis = new GraphVis({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user