diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js index bcb1318..4c07436 100644 --- a/src/store/groupEvolution/index.js +++ b/src/store/groupEvolution/index.js @@ -691,8 +691,6 @@ export const useGroupMemberStore = defineStore("groupMember", { return colorMap[parseInt(groupId)] } 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) => ({ diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue index 32a0021..0d3564e 100644 --- a/src/views/GroupEvolution/component/groupGraph.vue +++ b/src/views/GroupEvolution/component/groupGraph.vue @@ -50,7 +50,7 @@ const defaultConfig = { borderColor: "200,50,50", borderWidth: 0, selected: { - borderWidth: 2, + borderWidth: 5, borderColor: "100,250,100", showShadow: true, // 是否展示阴影 shadowBlur: 5, //阴影范围大小 @@ -66,8 +66,8 @@ const defaultConfig = { background: "255,255,255" //文字背景色(设置后文字居中,一般与画布背景色一致) }, lineType: "straight", // curver - showArrow: true, - lineWidth: 2, + showArrow: false, + lineWidth: 1, colorType: "both", color: "240,240,240", selected: { @@ -87,6 +87,8 @@ const handlePointerDown = (time) => { } const registEvents = () => { + const simulation = graphVis.getSimulationLayout() + forceSimulator = simulation.forceSimulation() //全局记录包裹层元素 const containerDom = document.getElementById("container") graphVis.registEventListener("node", "mouseOver", function (event, node) { @@ -122,25 +124,54 @@ const registEvents = () => { if (currentSelectNode.value != null) { forceSimulator.alphaTarget(0) //如果拖动结束需要固定拖拽的节点,则注释下面两行,保留最后拖动的位置即可 - //that.currentSelectNode.fx = null; - //that.currentSelectNode.fy = null; + currentSelectNode.value.fx = null + currentSelectNode.value.fy = null currentSelectNode.value = null + // highLightAboutNodesOrLinks(typeMap[storeId]) } }) } + +//公用实现连线高亮函数 +const highLightAboutNodesOrLinks = (type) => { + graphVis.cancelAllSelected() + if (type == "nodes") { + //实现高亮节点逻辑 + const { newNodes } = graph.value + graphVis.nodes.forEach((node) => + newNodes.forEach((newNode) => { + if (node.id === newNode.name) { + node.selected = true + } + }) + ) + } else if (type == "links") { + //实现连线高亮逻辑 + const { newLinks } = graph.value + graphVis.links.forEach((link) => + newLinks.forEach((newLink) => { + if (link.source.id === newLink.source && link.target.id === newLink.target) { + link.selected = true + } + }) + ) + } else { + return + } +} const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { function handleLayoutSuccess() { //处理四个关系图的差异函数 const handleGroupDiscoveryDiff = () => { - console.log(storeId) + return } const handleGroupStructureDiff = () => { - console.log(storeId) + highLightAboutNodesOrLinks("links") } const handleGroupMemberDiff = () => { - console.log(storeId) + highLightAboutNodesOrLinks("nodes") } const handleAnomalousGroup = () => { @@ -204,7 +235,7 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { } ) } - graphVis.autoGroupLayout(graphVis.nodes) + // graphVis.autoGroupLayout(graphVis.nodes) } new Map([ @@ -215,7 +246,6 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { ]).get(storeId)?.() graphVis.zoomFit() //场景视图大小自适应缩放 - // graphVis.hideIsolatedNodes() //隐藏孤立节点 } graphVis.excuteWorkerLayout(graphVis.getGraphData(), layoutType, layoutConfig, isAsync, () => handleLayoutSuccess() @@ -245,12 +275,12 @@ const clusterAnalyze = () => { node.color = color }) graphVis.addNodesInGroup(nodes, { - shape: "circle", //circle|rect|polygon|bubbleset + shape: "polygon", //circle|rect|polygon|bubbleset color: color, alpha: 0.2 }) }) - graphVis.autoGroupLayout(graphVis.nodes) + // graphVis.autoGroupLayout(graphVis.nodes) } // 仅对“异常群体模块”生效:时间变化时强制重绘一次 @@ -302,7 +332,6 @@ const updateChart = (newGraphData) => { runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true) } -let lastLength = 0 //记录上一次的长度 watch( graph, (newValue) => {