完成第三模块页面2,3连边高亮,节点高亮效果

This commit is contained in:
qumeng039@126.com 2025-08-11 15:36:41 +08:00
parent 04869323d2
commit bd2481cad8
2 changed files with 42 additions and 15 deletions

View File

@ -691,8 +691,6 @@ export const useGroupMemberStore = defineStore("groupMember", {
return colorMap[parseInt(groupId)] return colorMap[parseInt(groupId)]
} }
const res = await getGroupMemberEvolutionAnalysisGraph(utcTime) const res = await getGroupMemberEvolutionAnalysisGraph(utcTime)
console.log(res)
if (res.code != 200) return if (res.code != 200) return
const newSet = new Set() const newSet = new Set()
this.graph["links"] = res.data.links.map((link) => ({ this.graph["links"] = res.data.links.map((link) => ({

View File

@ -50,7 +50,7 @@ const defaultConfig = {
borderColor: "200,50,50", borderColor: "200,50,50",
borderWidth: 0, borderWidth: 0,
selected: { selected: {
borderWidth: 2, borderWidth: 5,
borderColor: "100,250,100", borderColor: "100,250,100",
showShadow: true, // showShadow: true, //
shadowBlur: 5, // shadowBlur: 5, //
@ -66,8 +66,8 @@ const defaultConfig = {
background: "255,255,255" //, background: "255,255,255" //,
}, },
lineType: "straight", // curver lineType: "straight", // curver
showArrow: true, showArrow: false,
lineWidth: 2, lineWidth: 1,
colorType: "both", colorType: "both",
color: "240,240,240", color: "240,240,240",
selected: { selected: {
@ -87,6 +87,8 @@ const handlePointerDown = (time) => {
} }
const registEvents = () => { const registEvents = () => {
const simulation = graphVis.getSimulationLayout()
forceSimulator = simulation.forceSimulation()
// //
const containerDom = document.getElementById("container") const containerDom = document.getElementById("container")
graphVis.registEventListener("node", "mouseOver", function (event, node) { graphVis.registEventListener("node", "mouseOver", function (event, node) {
@ -122,25 +124,54 @@ const registEvents = () => {
if (currentSelectNode.value != null) { if (currentSelectNode.value != null) {
forceSimulator.alphaTarget(0) forceSimulator.alphaTarget(0)
// //
//that.currentSelectNode.fx = null; currentSelectNode.value.fx = null
//that.currentSelectNode.fy = null; currentSelectNode.value.fy = null
currentSelectNode.value = 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) => { const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
function handleLayoutSuccess() { function handleLayoutSuccess() {
// //
const handleGroupDiscoveryDiff = () => { const handleGroupDiscoveryDiff = () => {
console.log(storeId) return
} }
const handleGroupStructureDiff = () => { const handleGroupStructureDiff = () => {
console.log(storeId) highLightAboutNodesOrLinks("links")
} }
const handleGroupMemberDiff = () => { const handleGroupMemberDiff = () => {
console.log(storeId) highLightAboutNodesOrLinks("nodes")
} }
const handleAnomalousGroup = () => { const handleAnomalousGroup = () => {
@ -204,7 +235,7 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
} }
) )
} }
graphVis.autoGroupLayout(graphVis.nodes) // graphVis.autoGroupLayout(graphVis.nodes)
} }
new Map([ new Map([
@ -215,7 +246,6 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
]).get(storeId)?.() ]).get(storeId)?.()
graphVis.zoomFit() // graphVis.zoomFit() //
// graphVis.hideIsolatedNodes() //
} }
graphVis.excuteWorkerLayout(graphVis.getGraphData(), layoutType, layoutConfig, isAsync, () => graphVis.excuteWorkerLayout(graphVis.getGraphData(), layoutType, layoutConfig, isAsync, () =>
handleLayoutSuccess() handleLayoutSuccess()
@ -245,12 +275,12 @@ const clusterAnalyze = () => {
node.color = color node.color = color
}) })
graphVis.addNodesInGroup(nodes, { graphVis.addNodesInGroup(nodes, {
shape: "circle", //circle|rect|polygon|bubbleset shape: "polygon", //circle|rect|polygon|bubbleset
color: color, color: color,
alpha: 0.2 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) runDiffForceLayout({ strength: -500, ajustCluster: true }, "simulation", true)
} }
let lastLength = 0 //
watch( watch(
graph, graph,
(newValue) => { (newValue) => {