From cdbfb491b89d9275d23d8da856fdad6b4be91e27 Mon Sep 17 00:00:00 2001
From: duanhao <dh14779715518@163.com>
Date: Mon, 11 Aug 2025 17:49:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/customePaint.js                     | 52 +++++++++++++++++--
 .../GroupEvolution/component/groupGraph.vue   |  8 +--
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/utils/customePaint.js b/src/utils/customePaint.js
index 5687192..e04b6f6 100644
--- a/src/utils/customePaint.js
+++ b/src/utils/customePaint.js
@@ -32,11 +32,53 @@ export const paintNodeFunction = function (ctx, onlyShape) {
 
   //按节点类型绘制节点边框
   if (this.properties.type != "normal") {
-    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()
+    // 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();
+
   } else {
     ctx.beginPath()
     ctx.arc(0, 0, this.radius + 8, 0, Math.PI * 2)
diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue
index 0d9d030..2d662e9 100644
--- a/src/views/GroupEvolution/component/groupGraph.vue
+++ b/src/views/GroupEvolution/component/groupGraph.vue
@@ -46,7 +46,7 @@ const defaultConfig = {
       textOffsetY: 10
     },
     shape: "circle",
-    size: 60,
+    size: 15,
     borderColor: "200,50,50",
     borderWidth: 0,
 
@@ -265,9 +265,9 @@ const clusterAnalyze = () => {
     clusterNodesMap.get(cluster).push(node)
   })
   let colorMap = {
-    0: "50,141,120", // 绿色
-    1: "133,129,48", // 黄色
-    6: "12,112,144" // 蓝色
+    0: "75,241,184", // 绿色
+    1: "250,222,37", // 黄色
+    6: "69,192,242" // 蓝色
   }
   clusterNodesMap.forEach((nodes, cluster) => {
     const color = colorMap[cluster]