From ee2cb53385d14ed100f345de8bc933f65f2c0608 Mon Sep 17 00:00:00 2001 From: duanhao Date: Fri, 8 Aug 2025 10:06:53 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A1=A5=E6=A2=81=E8=8A=82=E7=82=B9=E8=BE=B9?= =?UTF-8?q?=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98=E8=A7=A3=E5=86=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../abnormal-action-analysis-item-title.png | Bin 256 -> 495 bytes .../abnormal-user-group-item-title.png | Bin 0 -> 470 bytes .../abnormalGroup/components/groupPanel.vue | 5 +- .../GroupEvolution/component/groupPost.vue | 4 +- .../components/graph/bridgeCommunityGraph.vue | 75 +++++++++++++++--- .../components/graph/detailCommunityGraph.vue | 69 ++++++++++++++-- 6 files changed, 130 insertions(+), 23 deletions(-) create mode 100644 src/assets/images/abnormalGroup/abnormal-user-group-item-title.png diff --git a/src/assets/images/abnormalGroup/abnormal-action-analysis-item-title.png b/src/assets/images/abnormalGroup/abnormal-action-analysis-item-title.png index 39739b929d53ed4060b01f3f3e87bf1fa2a71d4a..121bfac52c35f995a2567cec2740e3840f8ba6e1 100644 GIT binary patch delta 455 zcmV;&0XY7E0`CJMiBL{Q4GJ0x0000DNk~Le0002z0000O2nGNE00A)S?2#cfe*uI^ zL_t(|0qxv9PU}DvhT-o_9HJEbR7klJx@m89p`=3W1a^R-qDw~w*#b*o2T(x?RJ5T1 zi7E(CAjCezh)78U9pEY6r?EXg?WZ%cHODm6a$lHz(S}S5`ovDnS_1HG_Fug9=?ho4 z?>gG8TPN(fH|H{)hoJugP$~;rf38(@+#WVe+kf`0BADrnZ3;l?4*GuRxh|4oE1SEn zi^bLSw0_%Y%-5@C0`P14gF&`Bw^-1u6U zE)alHWF98+7z7|ngcFDq;RGTz@$u(hyVDSW(p;s@+tEFp6NnVy1R_N^e}PC5P9Rc* z6NpqYI=aHKFdz=2Owu`lND)pTQiKzT)I>P#)m;EeQ5_7j@#l$f&L_$JbOC^$S2V`z zQ}=OvEhz>H>0^G-+4fRzcD|ac5A#d@cY0002ovPDHLkV1n5}&7A-M delta 214 zcmaFQ+`y#R8Q|y6%O%Cdz`(%k>ERLtq#pvY5C#WU6Lsb(@ z_ZQB&^?RNE`QY98T?~o2w}Z_7R$4qsRZ%!%@_df4fLDuv4zopr071A>n*aa+ diff --git a/src/assets/images/abnormalGroup/abnormal-user-group-item-title.png b/src/assets/images/abnormalGroup/abnormal-user-group-item-title.png new file mode 100644 index 0000000000000000000000000000000000000000..c7bd9af2d7d4f10c59ff89b5995575f4583fe71b GIT binary patch literal 470 zcmV;{0V)28P)rL#ODVR=Nt@`!}x5eds9diiT!#vtxmW+a{E5eds95|&5S!lH?p zoCqfbW~P;{t%X(A`YUUb*e=^N!B77?UDx(O1{UuxI#=__yv$m!3nx% z#{Y!Hct1_9^_%zK>n0nNIsVQlK|@7EeafMM8D1frGw-MXCs9c89|QYwXCAbT2><{9 M07*qoM6N<$g3@%%1^@s6 literal 0 HcmV?d00001 diff --git a/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue b/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue index 42bbc26..ff3b47d 100644 --- a/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue +++ b/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue @@ -6,7 +6,7 @@
{{ group.type }}
@@ -68,7 +68,7 @@ const props = defineProps({ .groupPanel-list { width: 100%; height: 470px; - padding: 20px 20px; + padding: 0px 20px; overflow: auto; &::-webkit-scrollbar { width: 3px; /* 垂直滚动条宽度 */ @@ -83,6 +83,7 @@ const props = defineProps({ } .group-item { width: 100%; + padding-top: 20px; padding-bottom: 20px; border-bottom: 0.5px solid rgba(0, 113, 188, 0.5); .group-item-title { diff --git a/src/views/GroupEvolution/component/groupPost.vue b/src/views/GroupEvolution/component/groupPost.vue index b4b1d2c..1ba421b 100644 --- a/src/views/GroupEvolution/component/groupPost.vue +++ b/src/views/GroupEvolution/component/groupPost.vue @@ -321,8 +321,8 @@ onBeforeUnmount(() => { position: relative; .title-text { position: absolute; - top: 0; - left: 0; + top: 2px; + left: 12px; color: #8efbff; font-family: PingFang SC; font-weight: 400; diff --git a/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue b/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue index 05c8bcd..8cd6a65 100644 --- a/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue +++ b/src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue @@ -93,7 +93,7 @@ const processData = async() => { id: bridgeNodeId, category: 0, symbol: bridgeNodeImg ? `image://${bridgeNodeImg}` : 'circle', - symbolSize: 100, + symbolSize: 150, originalId: bridgeId // 存储原始ID用于识别 }); addedBridgeNodes.add(bridgeId); @@ -169,11 +169,12 @@ const initChart = async() => { chartInstance = echarts.init(chartDom); + const SERIES_INDEX = 0; + // 添加鼠标悬浮事件监听 chartInstance.on('mouseover', function(params) { if (!params.data) return; - const isBridgeNode = params.data.category === 0; - const isCommunityNode = params.data.category === 1; + /* const isBridgeNode = params.data.category === 0; if (isBridgeNode) { // 如果是桥梁节点 @@ -181,6 +182,28 @@ const initChart = async() => { // 无论当前是否有激活节点，都设置为当前节点 activeNodeId.value = nodeId; updateNodeImage(nodeId, true); + } */ + + if (params.dataType === 'node') { + // 仅节点时触发相邻高亮 + chartInstance.dispatchAction({ + type: 'focusNodeAdjacency', + seriesIndex: SERIES_INDEX, + dataIndex: params.dataIndex + }); + + // 你已有的桥梁节点头像切换逻辑 + const isBridgeNode = params.data.category === 0; + if (isBridgeNode) { + const nodeId = params.data.originalId; + activeNodeId.value = nodeId; + updateNodeImage(nodeId, true); + } + } else if (params.dataType === 'edge') { + // 悬浮在边上：不高亮 + chartInstance.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); + chartInstance.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX }); + // 也可以顺手关掉 tooltip（你 formatter 已经返回空字符串，其实也行） } }); @@ -188,9 +211,7 @@ const initChart = async() => { // 添加鼠标离开事件监听 chartInstance.on('mouseout', function(params) { if (!params.data) return; - const isBridgeNode = params.data.category === 0; - const isCommunityNode = params.data.category === 1; - + /* const isBridgeNode = params.data.category === 0; if (isBridgeNode) { // 如果是桥梁节点 const nodeId = params.data.originalId; @@ -198,6 +219,29 @@ const initChart = async() => { activeNodeId.value = null; updateNodeImage(nodeId, false); } + } */ + if (params.dataType === 'node') { + // 仅节点移出时取消相邻高亮 + chartInstance.dispatchAction({ + type: 'unfocusNodeAdjacency', + seriesIndex: SERIES_INDEX + }); + + // 你已有的桥梁节点头像还原逻辑 + const isBridgeNode = params.data.category === 0; + if (isBridgeNode) { + const nodeId = params.data.originalId; + if (activeNodeId.value === nodeId) { + activeNodeId.value = null; + updateNodeImage(nodeId, false); + } + } + } else if (params.dataType === 'edge') { + // 从边移出也确保没有残留高亮 + chartInstance.dispatchAction({ + type: 'unfocusNodeAdjacency', + seriesIndex: SERIES_INDEX + }); } }); @@ -390,13 +434,20 @@ const initChart = async() => { }, animationDurationUpdate: 3500, // 节点移动更平滑 animationEasingUpdate: 'quinticInOut', - emphasis: { // 高亮配置 - focus: 'adjacency', // 高亮相邻节点 - blurScope: 'coordinateSystem', // 失去焦点时取消所有高亮 - lineStyle: { // 高亮时线条样式 - width: 10 // 线条宽度(10) - } + emphasis: { + focus: 'adjacency', // 有了这个，才会触发“其他元素进入 blur 状态” + blurScope: 'series', // 只在本系列里变暗 + scale: false, // 不要把节点放大，避免跳动 + lineStyle: { opacity: 1 }, + itemStyle: { opacity: 1 }, + label: { opacity: 1 } }, + blur: { + // 非相邻元素进入“模糊/暗”状态时的样式（相当于“隐藏”） + lineStyle: { opacity: 0.05 }, + itemStyle: { opacity: 0.1 }, + label: { opacity: 0 } + } } ] }; diff --git a/src/views/KeyNodeRecognition2/components/graph/detailCommunityGraph.vue b/src/views/KeyNodeRecognition2/components/graph/detailCommunityGraph.vue index 6c6bcc1..32afa13 100644 --- a/src/views/KeyNodeRecognition2/components/graph/detailCommunityGraph.vue +++ b/src/views/KeyNodeRecognition2/components/graph/detailCommunityGraph.vue @@ -70,6 +70,52 @@ const initChart = async () => { chart = echarts.init(detailContainer.value); + + const SERIES_INDEX = 0; + +// 仅在节点上触发“相邻高亮”，并把其它元素降为 blur（已由 series.blur 定义） +chart.on('mouseover', 'series.graph', function (params) { + if (!params.data) return; + + if (params.dataType === 'node') { + chart.dispatchAction({ + type: 'focusNodeAdjacency', + seriesIndex: SERIES_INDEX, + dataIndex: params.dataIndex + }); + + // 你的桥梁节点换头像逻辑 + if (params.data.category === 0) { + activeNodeId.value = params.data.originalId; + updateNodeImage(bridgeNodeImages); + } + + } else if (params.dataType === 'edge') { + // 悬浮在“边”上：不做任何强调，立刻撤销 + chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); + chart.dispatchAction({ type: 'downplay', seriesIndex: SERIES_INDEX }); + } +}); + +chart.on('mouseout', 'series.graph', function (params) { + if (!params.data) return; + + if (params.dataType === 'node') { + chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); + + if (params.data.category === 0) { + // 还原桥梁节点头像 + if (activeNodeId.value === params.data.originalId) { + activeNodeId.value = ''; + updateNodeImage(bridgeNodeImages); + } + } + + } else if (params.dataType === 'edge') { + chart.dispatchAction({ type: 'unfocusNodeAdjacency', seriesIndex: SERIES_INDEX }); + } +}); + // 点击桥梁节点->弹窗显示桥梁节点的详情 chart.on('click', function(params){ // 如果是桥梁节点 @@ -159,7 +205,7 @@ const initChart = async () => { if (isBridgeNode) { const images = bridgeNodeImages.get(userIdStr); symbol = images.defImg ? `image://${images.defImg}` : 'circle'; - symbolSize = 60; + symbolSize = 150; // 查找对应的leader数据 const leaderData = keyNodeStore2.allLeaderData.find(leader => String(leader.nodeId) === userIdStr); if (leaderData) { @@ -233,6 +279,7 @@ const initChart = async () => { borderWidth: 0, extraCssText: "box-shadow:none;padding:0;", formatter: function (params) { + if (params.dataType === 'edge') return ''; if (params.dataType === "node" && params.data.category === 0) { return `