diff --git a/.env.production b/.env.production index 69b37e4..c00a419 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -VITE_APP_BASE_API = "http://10.7.1.183:8080/api" \ No newline at end of file +VITE_APP_BASE_API = "http://10.7.1.183:5080/api" \ No newline at end of file diff --git a/src/assets/images/abnormalGroup/abnormal-group-legends.png b/src/assets/images/abnormalGroup/abnormal-group-legends.png index 85e6475..a919376 100644 Binary files a/src/assets/images/abnormalGroup/abnormal-group-legends.png and b/src/assets/images/abnormalGroup/abnormal-group-legends.png differ diff --git a/src/assets/images/abnormalGroup/abnormal-node-legend-icon.png b/src/assets/images/abnormalGroup/abnormal-node-legend-icon.png new file mode 100644 index 0000000..89fe87e Binary files /dev/null and b/src/assets/images/abnormalGroup/abnormal-node-legend-icon.png differ diff --git a/src/utils/customePaint.js b/src/utils/customePaint.js index 8868cc0..3aa915e 100644 --- a/src/utils/customePaint.js +++ b/src/utils/customePaint.js @@ -46,7 +46,15 @@ export const paintNodeFunction = (storeId) => { ctx.save() ctx.beginPath() ctx.arc(0, 0, rFill, 0, Math.PI * 2) - ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})` + if(this.fillColor == '85, 125, 15'){ + ctx.fillStyle = `rgba(75, 241, 184, ${this.alpha})` + }else if(this.fillColor == '15, 106, 125'){ + ctx.fillStyle = `rgba(69, 192, 242, ${this.alpha})` + }else if(this.fillColor == '125, 114, 15'){ + ctx.fillStyle = `rgba(250, 222, 37, ${this.alpha})` + }else{ + ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})` + } ctx.fill() ctx.restore() @@ -63,10 +71,11 @@ export const paintNodeFunction = (storeId) => { }; // 选择配色方案 const fc = (this.fillColor || "").replace(/\s+/g, ""); - const isMint = fc === "75,241,184"; - const isBlue = fc === "69,192,242"; + // const isMint = fc === "85, 125, 15"; + const isMint = fc === "75,241,184" + const isBlue = fc === "69,192,242" const isRed = fc === "255,50,60"; - const isYellow = fc === "250,222,37"; + const isYellow = fc === "250,222,37" // 默认都按照 SVG：每层 0.24 透明度（再乘整体 alpha） const layerAlpha = 0.24 * (this.alpha ?? 1); @@ -76,16 +85,32 @@ export const paintNodeFunction = (storeId) => { if(isMint){ lg.addColorStop(0, '#0FE9BE'); lg.addColorStop(1, '#91FFB2'); + }else if (this.fillColor == '85, 125, 15') { + // lg.addColorStop(0, '#0FE9BE'); + // lg.addColorStop(1, '#91FFB2'); + lg.addColorStop(0, '#FF0000'); + lg.addColorStop(1, '#FF0909'); }else if(isBlue){ lg.addColorStop(0, "#009DFF"); lg.addColorStop(1, "#00FFF2"); + }else if (this.fillColor == '15, 106, 125') { + // lg.addColorStop(0, '#009DFF'); + // lg.addColorStop(1, '#00FFF2'); + lg.addColorStop(0, '#FF0000'); + lg.addColorStop(1, '#FF0909'); }else if(isRed){ lg.addColorStop(0, '#FF0000'); lg.addColorStop(1, '#FF0909'); }else if(isYellow){ lg.addColorStop(0, '#FFDA09'); lg.addColorStop(1, '#FFDA09'); + }else if(this.fillColor == '125, 114, 15'){ + // lg.addColorStop(0, '#FFDA09'); + // lg.addColorStop(1, '#FFDA09'); + lg.addColorStop(0, '#FF0000'); + lg.addColorStop(1, '#FF0909'); } + ctx.globalAlpha = 0.24 * (this.alpha ?? 1); // 与节点整体透明度相乘 ctx.fillStyle = lg; ctx.fill(); @@ -100,10 +125,24 @@ export const paintNodeFunction = (storeId) => { rg.addColorStop(0.0, 'rgba(230,249,255,1)'); // #E6F9FF rg.addColorStop(0.3693,'rgba(190,255,219,0.5)'); // #BEFFDB @ 0.5 rg.addColorStop(1.0, 'rgba(0,0,0,0)'); + }else if(this.fillColor == '85, 125, 15'){ + // rg.addColorStop(0.0, 'rgba(230,249,255,1)'); // #E6F9FF + // rg.addColorStop(0.3693,'rgba(190,255,219,0.5)'); // #BEFFDB @ 0.5 + // rg.addColorStop(1.0, 'rgba(0,0,0,0)'); + rg.addColorStop(0.0, 'rgba(255,255,255,1)'); + rg.addColorStop(0.3693,'rgba(255,200,200,0.5)'); + rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); }else if(isBlue){ rg.addColorStop(0.0, 'rgba(229,249,255,1)'); rg.addColorStop(0.3693,'rgba(141,255,253,0.5)'); rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); + }else if (this.fillColor == '15, 106, 125') { + // rg.addColorStop(0.0, 'rgba(229,249,255,1)'); + // rg.addColorStop(0.3693,'rgba(141,255,253,0.5)'); + // rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); + rg.addColorStop(0.0, 'rgba(255,255,255,1)'); + rg.addColorStop(0.3693,'rgba(255,200,200,0.5)'); + rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); }else if(isRed){ rg.addColorStop(0.0, 'rgba(255,255,255,1)'); rg.addColorStop(0.3693,'rgba(255,200,200,0.5)'); @@ -112,6 +151,13 @@ export const paintNodeFunction = (storeId) => { rg.addColorStop(0.0, 'rgba(229,249,255,1)'); rg.addColorStop(0.3693,'rgba(254,255,200,0.5)'); rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); + }else if(this.fillColor == '125, 114, 15'){ + // rg.addColorStop(0.0, 'rgba(229,249,255,1)'); + // rg.addColorStop(0.3693,'rgba(254,255,200,0.5)'); + // rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); + rg.addColorStop(0.0, 'rgba(255,255,255,1)'); + rg.addColorStop(0.3693,'rgba(255,200,200,0.5)'); + rg.addColorStop(1.0, 'rgba(0, 0, 0, 0)'); } ctx.globalAlpha = 0.24 * (this.alpha ?? 1); ctx.fillStyle = rg; @@ -126,7 +172,16 @@ export const paintNodeFunction = (storeId) => { ctx.lineWidth = dashWidth ctx.setLineDash([dash, gap]) ctx.lineCap = "round" - ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})` + const RED = '220,50,60' + if(this.fillColor == '85, 125, 15'){ + ctx.strokeStyle = `rgba(${RED}, ${this.alpha})` + }else if(this.fillColor == '15, 106, 125'){ + ctx.strokeStyle = `rgba(${RED}, ${this.alpha})` + }else if(this.fillColor == '125, 114, 15'){ + ctx.strokeStyle = `rgba(${RED}, ${this.alpha})` + }else{ + ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})` + } ctx.stroke() ctx.setLineDash([]) // 清理，避免影响后续绘制 ctx.restore() diff --git a/src/views/GroupEvolution/components/groupGraph.vue b/src/views/GroupEvolution/components/groupGraph.vue index 15374ce..8eed06f 100644 --- a/src/views/GroupEvolution/components/groupGraph.vue +++ b/src/views/GroupEvolution/components/groupGraph.vue @@ -2,7 +2,10 @@
-
+
+ +
疑似异常社团
+
{ // 组色（与你现有 colorMap 一致） const GROUP_ALPHA = 0.3 const RED = "220,50,60" + const greenRed = "85, 125, 15" + const blueRed = "15, 106, 125" + const yellowRed = "125, 114, 15" + // 时间门控：达到阈值就把各组异常节点染红 const shouldA = now >= TA const shouldB = now >= TB @@ -191,50 +198,52 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => { if (shouldA) { graphVis.nodes = graphVis.nodes.map((n) => { if (props.store.graphAbnormalData.groupA.includes(n.id)) { - n.fillColor = RED + // n.fillColor = RED + n.fillColor = greenRed + } return n }) - graphVis.addNodesInGroup( + /* graphVis.addNodesInGroup( graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupA.includes(n.id)), { shape: "circle", color: RED, alpha: GROUP_ALPHA } - ) + ) */ } if (shouldB) { graphVis.nodes = graphVis.nodes.map((n) => { if (props.store.graphAbnormalData.groupB.includes(n.id)) { - n.fillColor = RED + n.fillColor = yellowRed } return n }) - graphVis.addNodesInGroup( + /* graphVis.addNodesInGroup( graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupB.includes(n.id)), { shape: "circle", color: RED, alpha: GROUP_ALPHA } - ) + ) */ } if (shouldC) { graphVis.nodes = graphVis.nodes.map((n) => { if (props.store.graphAbnormalData.groupC.includes(n.id)) { - n.fillColor = RED + n.fillColor = blueRed } return n }) - graphVis.addNodesInGroup( + /* graphVis.addNodesInGroup( graphVis.nodes.filter((n) => props.store.graphAbnormalData.groupC.includes(n.id)), { shape: "circle", color: RED, alpha: GROUP_ALPHA } - ) + ) */ } // graphVis.autoGroupLayout(graphVis.nodes) } @@ -356,11 +365,34 @@ watch( } .legends { position: absolute; + display: flex; + align-items: center; + justify-content: center; width: 160px; height: 55px; right: 2%; top: 76%; background-image: url('@/assets/images/abnormalGroup/abnormal-group-legends.png'); + .legend-icon { + position: absolute; + top: 17px; + left: 15px; + width: 30px; + height: 30px; + } + .legend-text { + position: absolute; + top: 12px; + left: 50px; + height: 30px; + line-height: 30px; + font-family: "PingFang SC"; + font-style: normal; + font-weight: 400; + font-size: 16px; + font-weight: 400; + color: #fff; + } } .container { width: 100%; diff --git a/vite.config.js b/vite.config.js index 7fe7661..5cef20b 100644 --- a/vite.config.js +++ b/vite.config.js @@ -16,7 +16,7 @@ export default defineConfig({ open: true, proxy: { "/api": { - target: "http://10.7.1.183:8080", + target: "http://10.7.1.183:5080", changeOrigin: true // rewrite: (path) => path.replace(/^\/api/, "") //后端带了api/前缀的话就注释 }