修改第四个页面的节点和前面节点的区分

src/store/groupEvolution/index.js

@@ -463,9 +463,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name === '内部密度指数演化' ? 20.0 : 0,
+            min: item.name === "内部密度指数演化" ? 20.0 : 0,
-            max: item.name === '内部密度指数演化' ?  20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max:
-            interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
+              item.name === "内部密度指数演化"
+                ? 20.5
+                : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            interval:
+              item.name === "内部密度指数演化" ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data,
@@ -480,9 +484,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name === '内部密度指数演化' ? 20.0 : 0,
+            min: item.name === "内部密度指数演化" ? 20.0 : 0,
-            max: item.name === '内部密度指数演化' ?  20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max:
-            interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
+              item.name === "内部密度指数演化"
+                ? 20.5
+                : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            interval:
+              item.name === "内部密度指数演化" ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data,
@@ -497,9 +505,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name === '内部密度指数演化' ? 20.0 : 0,
+            min: item.name === "内部密度指数演化" ? 20.0 : 0,
-            max: item.name === '内部密度指数演化' ?  20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max:
-            interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
+              item.name === "内部密度指数演化"
+                ? 20.5
+                : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            interval:
+              item.name === "内部密度指数演化" ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data,
@@ -626,9 +638,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.00 : 0,
+            min: item.name === "合并演化" || item.name === "扩展演化" ? 20.0 : 0,
-            max: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.03 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max:
-            interval: item.name ==='合并演化' || item.name ==='扩展演化' ? 0.006 : Math.ceil(item.chart.yaxisRange.max / 5)
+              item.name === "合并演化" || item.name === "扩展演化"
+                ? 20.03
+                : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            interval:
+              item.name === "合并演化" || item.name === "扩展演化"
+                ? 0.006
+                : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data.map((item) => item.toFixed(2)),
@@ -644,9 +662,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.00 : 0,
+            min: item.name === "合并演化" || item.name === "扩展演化" ? 20.0 : 0,
-            max: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.03 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max:
-            interval: item.name ==='合并演化' || item.name ==='扩展演化' ? 0.006 : Math.ceil(item.chart.yaxisRange.max / 5)
+              item.name === "合并演化" || item.name === "扩展演化"
+                ? 20.03
+                : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            interval:
+              item.name === "合并演化" || item.name === "扩展演化"
+                ? 0.006
+                : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data.map((item) => item.toFixed(2)),
@@ -662,9 +686,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
         chart: {
           xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
           yAxisRange: {
-            min: item.name ==='合并演化' ? 20.00 : 0,
+            min: item.name === "合并演化" ? 20.0 : 0,
-            max: item.name ==='合并演化' ? 20.03 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
+            max: item.name === "合并演化" ? 20.03 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
-            interval: item.name ==='合并演化' ? 0.006 : Math.ceil(item.chart.yaxisRange.max / 5)
+            interval: item.name === "合并演化" ? 0.006 : Math.ceil(item.chart.yaxisRange.max / 5)
           },
           seriesList: item.chart.seriesList.map((item) => ({
             data: item.data.map((item) => item.toFixed(2)),

src/utils/customePaint.js

@@ -1,84 +1,88 @@
 //自定义绘制节点的方法
-export const paintNodeFunction = function (ctx, onlyShape) {
+export const paintNodeFunction = (storeId) => {
-  //默认绘制数据类型图片
+  return function (ctx, onlyShape) {
-  if (this.properties.typeIcon) {
+    //默认绘制数据类型图片
-    if (this.selected || this.showSelected) {
+    if (this.properties.typeIcon) {
+      if (this.selected || this.showSelected) {
+        this.drawShape(ctx, onlyShape)
+      }
+
+      if (this.alpha < 1) {
+        ctx.save()
+        ctx.globalAlpha = this.alpha
+        ctx.drawImage(
+          this.properties.typeIcon,
+          -this.width / 2,
+          -this.height / 2,
+          this.width,
+          this.height
+        )
+        ctx.restore()
+      } else {
+        ctx.drawImage(
+          this.properties.typeIcon,
+          -this.width / 2,
+          -this.height / 2,
+          this.width,
+          this.height
+        )
+      }
+    } else {
       this.drawShape(ctx, onlyShape)
     }
+    if (storeId == "anomalousGroup") {
+      // 半径 & 样式参数（按需调整）
+      // ===== 三层：实心圆 + 半透明边框 + 外圈虚线 =====
+      const rFill = this.radius // 实心圆半径
+      const ringWidth = 15 // 半透明边框的宽度
+      const ringGap = 0 // 实心与半透明边框之间的间隙（需要留缝就调大）
+      const outerGap = 0 // 半透明边框与虚线之间的间隙
+      const dashWidth = 2 // 虚线线宽
+      const dash = 2,
+        gap = 4 // 虚线样式
+      const ringAlphaFactor = 0.5 // 半透明边框的相对透明度（相对于 this.alpha）
 
-    if (this.alpha < 1) {
+      // 1) 中间实心圆（填充）
       ctx.save()
-      ctx.globalAlpha = this.alpha
+      ctx.beginPath()
-      ctx.drawImage(
+      ctx.arc(0, 0, rFill, 0, Math.PI * 2)
-        this.properties.typeIcon,
+      ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})`
-        -this.width / 2,
+      ctx.fill()
-        -this.height / 2,
+      ctx.restore()
-        this.width,
+
-        this.height
+      // 2) 同色半透明边框（描边，不是挖空）
-      )
+      ctx.save()
+      ctx.beginPath()
+      const rRing = rFill + ringGap + ringWidth / 2
+      ctx.arc(0, 0, rRing, 0, Math.PI * 2)
+      ctx.lineWidth = ringWidth
+      ctx.setLineDash([]) // 确保这里是实线
+      ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`
+      ctx.stroke()
+      ctx.restore()
+
+      // 3) 外圈虚线（同色）
+      ctx.save()
+      ctx.beginPath()
+      const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2
+      ctx.arc(0, 0, rDash, 0, Math.PI * 2)
+      ctx.lineWidth = dashWidth
+      ctx.setLineDash([dash, gap])
+      ctx.lineCap = "round"
+      ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})`
+      ctx.stroke()
+      ctx.setLineDash([]) // 清理，避免影响后续绘制
       ctx.restore()
     } else {
-      ctx.drawImage(
+      ctx.beginPath()
-        this.properties.typeIcon,
+      ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2)
-        -this.width / 2,
+      ctx.lineWidth = 5
-        -this.height / 2,
+      ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})`
-        this.width,
+      ctx.stroke()
-        this.height
-      )
     }
-  } else {
+
-    this.drawShape(ctx, onlyShape)
+    this.paintText(ctx) //调用内部方法绘制文字
   }
-
-  // ctx.beginPath()
-  // ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2)
-  // ctx.lineWidth = 8
-  // ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})`
-  // ctx.stroke()
-  // 半径 & 样式参数（按需调整）
-  // ===== 三层：实心圆 + 半透明边框 + 外圈虚线 =====
-  const rFill = this.radius // 实心圆半径
-  const ringWidth = 15 // 半透明边框的宽度
-  const ringGap = 0 // 实心与半透明边框之间的间隙（需要留缝就调大）
-  const outerGap = 0 // 半透明边框与虚线之间的间隙
-  const dashWidth = 2 // 虚线线宽
-  const dash = 2,
-    gap = 4 // 虚线样式
-  const ringAlphaFactor = 0.5 // 半透明边框的相对透明度（相对于 this.alpha）
-
-  // 1) 中间实心圆（填充）
-  ctx.save()
-  ctx.beginPath()
-  ctx.arc(0, 0, rFill, 0, Math.PI * 2)
-  ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})`
-  ctx.fill()
-  ctx.restore()
-
-  // 2) 同色半透明边框（描边，不是挖空）
-  ctx.save()
-  ctx.beginPath()
-  const rRing = rFill + ringGap + ringWidth / 2
-  ctx.arc(0, 0, rRing, 0, Math.PI * 2)
-  ctx.lineWidth = ringWidth
-  ctx.setLineDash([]) // 确保这里是实线
-  ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`
-  ctx.stroke()
-  ctx.restore()
-
-  // 3) 外圈虚线（同色）
-  ctx.save()
-  ctx.beginPath()
-  const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2
-  ctx.arc(0, 0, rDash, 0, Math.PI * 2)
-  ctx.lineWidth = dashWidth
-  ctx.setLineDash([dash, gap])
-  ctx.lineCap = "round"
-  ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})`
-  ctx.stroke()
-  ctx.setLineDash([]) // 清理，避免影响后续绘制
-  ctx.restore()
-
-  this.paintText(ctx) //调用内部方法绘制文字
 }
 
 //自定义连线的方法

src/views/GroupEvolution/component/groupGraph.vue

@@ -46,10 +46,9 @@ const defaultConfig = {
       textOffsetY: 10
     },
     shape: "circle",
-    size: 15,
+    size: storeId == "anomalousGroup" ? 15 : 40,
     borderColor: "200,50,50",
     borderWidth: 0,
-
     selected: {
       borderWidth: 5,
       borderColor: "100,250,100",
@@ -77,8 +76,8 @@ const defaultConfig = {
   },
   highLightNeiber: true // 相邻节点高亮开关
 }
-const registCustomePaintFunc = () => {
+const registCustomePaintFunc = (curStoreId) => {
-  graphVis.definedNodePaintFunc(paintNodeFunction) //自定义节点绘图方法
+  graphVis.definedNodePaintFunc(paintNodeFunction(curStoreId)) //自定义节点绘图方法
   graphVis.definedLinkPaintFunc(paintLineFunction) //自定义关系绘图方法
 }
 // 处理时间轴点击事件和拉动
@@ -128,7 +127,6 @@ const registEvents = () => {
       currentSelectNode.value.fx = null
       currentSelectNode.value.fy = null
       currentSelectNode.value = null
-      // highLightAboutNodesOrLinks(typeMap[storeId])
     }
   })
 }
@@ -136,9 +134,9 @@ const registEvents = () => {
 //公用连线或节点高亮函数
 const highLightAboutNodesOrLinks = (type) => {
   graphVis.cancelAllSelected()
+  const { newNodes, newLinks } = graph.value
   if (type == "nodes") {
     //实现高亮节点逻辑
-    const { newNodes } = graph.value
     graphVis.nodes.forEach((node) =>
       newNodes.forEach((newNode) => {
         if (node.id === newNode.name) {
@@ -148,7 +146,6 @@ const highLightAboutNodesOrLinks = (type) => {
     )
   } 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) {
@@ -311,7 +308,7 @@ const createGraph = () => {
   graphVis.setDragHideLine(false) //拖拽时隐藏连线
   graphVis.setShowDetailScale(0.1) //展示细节的比例
   graphVis.setZoomRange(0.1, 5) //缩放区间
-  registCustomePaintFunc() //注册自定义绘图方法
+  registCustomePaintFunc(storeId) //注册自定义绘图方法
   registEvents()
 }