异常节日颜色
This commit is contained in:
parent
ae36a56077
commit
835622cf93
|
|
@ -1 +1 @@
|
|||
VITE_APP_BASE_API = "http://10.7.1.183:8080/api"
|
||||
VITE_APP_BASE_API = "http://10.7.1.183:5080/api"
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.7 KiB |
BIN
src/assets/images/abnormalGroup/abnormal-node-legend-icon.png
Normal file
BIN
src/assets/images/abnormalGroup/abnormal-node-legend-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
<div class="groupGraph-component">
|
||||
<img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
|
||||
<div class="container" id="container"></div>
|
||||
<div class="legends" v-show=" storeId == 'anomalousGroup'"></div>
|
||||
<div class="legends" v-show=" storeId == 'anomalousGroup'">
|
||||
<img class="legend-icon" src="@/assets/images/abnormalGroup/abnormal-node-legend-icon.png" />
|
||||
<div class="legend-text">疑似异常社团</div>
|
||||
</div>
|
||||
<div class="timeList">
|
||||
<TimeAxis
|
||||
v-if="timeList.length"
|
||||
|
|
@ -184,6 +187,10 @@ const runDiffForceLayout = (layoutConfig, layoutType, isAsync) => {
|
|||
// 组色（与你现有 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%;
|
||||
|
|
|
|||
|
|
@ -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/前缀的话就注释
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user