完成第三模块页面2,3连边高亮,节点高亮效果
This commit is contained in:
		
							parent
							
								
									04869323d2
								
							
						
					
					
						commit
						bd2481cad8
					
				| 
						 | 
				
			
			@ -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) => ({
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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) => {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue
	
	Block a user