duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决冲突

Browse Source
This commit is contained in:
duanhao 2025-08-12 09:46:39 +08:00
commit 4735723452
3 changed files with 123 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/store/groupEvolution/index.js
View File

@ -463,9 +463,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data, data: item.data,
@ -480,9 +484,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data, data: item.data,
@ -497,9 +505,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data, data: item.data,
@ -626,9 +638,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data.map((item) => item.toFixed(2)), data: item.data.map((item) => item.toFixed(2)),
@ -644,9 +662,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data.map((item) => item.toFixed(2)), data: item.data.map((item) => item.toFixed(2)),
@ -662,9 +686,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
chart: { chart: {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)), xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: { 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) => ({ seriesList: item.chart.seriesList.map((item) => ({
data: item.data.map((item) => item.toFixed(2)), data: item.data.map((item) => item.toFixed(2)),

115
src/utils/customePaint.js
View File

@ -1,5 +1,6 @@
//自定义绘制节点的方法 //自定义绘制节点的方法
export const paintNodeFunction = function (ctx, onlyShape) { export const paintNodeFunction = (storeId) => {
return function (ctx, onlyShape) {
//默认绘制数据类型图片 //默认绘制数据类型图片
if (this.properties.typeIcon) { if (this.properties.typeIcon) {
if (this.selected || this.showSelected) { if (this.selected || this.showSelected) {
@ -29,93 +30,59 @@ export const paintNodeFunction = function (ctx, onlyShape) {
} else { } else {
this.drawShape(ctx, onlyShape) this.drawShape(ctx, onlyShape)
} }
if (storeId == "anomalousGroup") {
//按节点类型绘制节点边框
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()
// 半径 & 样式参数（按需调整） // 半径 & 样式参数（按需调整）
// ===== 三层：实心圆 + 半透明边框 + 外圈虚线 ===== // ===== 三层：实心圆 + 半透明边框 + 外圈虚线 =====
const rFill = this.radius; // 实心圆半径 const rFill = this.radius // 实心圆半径
const ringWidth = 15; // 半透明边框的宽度 const ringWidth = 15 // 半透明边框的宽度
const ringGap = 0; // 实心与半透明边框之间的间隙（需要留缝就调大） const ringGap = 0 // 实心与半透明边框之间的间隙（需要留缝就调大）
const outerGap = 0; // 半透明边框与虚线之间的间隙 const outerGap = 0 // 半透明边框与虚线之间的间隙
const dashWidth = 2; // 虚线线宽 const dashWidth = 2 // 虚线线宽
const dash = 2, gap = 4; // 虚线样式 const dash = 2,
const ringAlphaFactor = 0.5; // 半透明边框的相对透明度（相对于 this.alpha） gap = 4 // 虚线样式
const ringAlphaFactor = 0.5 // 半透明边框的相对透明度（相对于 this.alpha）
// 1) 中间实心圆（填充） // 1) 中间实心圆（填充）
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
ctx.arc(0, 0, rFill, 0, Math.PI * 2); ctx.arc(0, 0, rFill, 0, Math.PI * 2)
ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})`; ctx.fillStyle = `rgba(${this.fillColor}, ${this.alpha})`
ctx.fill(); ctx.fill()
ctx.restore(); ctx.restore()
// 2) 同色半透明边框（描边，不是挖空） // 2) 同色半透明边框（描边，不是挖空）
// ctx.save(); ctx.save()
// ctx.beginPath(); ctx.beginPath()
const rRing = rFill + ringGap + ringWidth / 2; const rRing = rFill + ringGap + ringWidth / 2
// ctx.arc(0, 0, rRing, 0, Math.PI * 2); ctx.arc(0, 0, rRing, 0, Math.PI * 2)
// ctx.lineWidth = ringWidth; ctx.lineWidth = ringWidth
// ctx.setLineDash([]); // 确保这里是实线 ctx.setLineDash([]) // 确保这里是实线
// ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`; ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha * ringAlphaFactor})`
// ctx.stroke(); ctx.stroke()
// ctx.restore(); ctx.restore()
ctx.save();
const rInner = rFill + ringGap;
const rOuter = rInner + ringWidth;
// 甜甜圈路径：外圈顺时针 + 内圈逆时针
ctx.beginPath();
ctx.arc(0, 0, rOuter, 0, Math.PI * 2, false);
ctx.arc(0, 0, rInner, 0, Math.PI * 2, true);
// 径向渐变：从内缘 rInner 到 外缘 rOuter
const g = ctx.createRadialGradient(0, 0, rInner, 0, 0, rOuter);
// ——方案A：同色渐变（随 fillColor 和 this.alpha）——
const a0 = Math.min(1, this.alpha * 0.8); // 内缘更实
const a1 = Math.min(1, this.alpha * 0.5); // 中间半透明
// g.addColorStop(0.00, `rgba(${this.fillColor}, ${a0})`);
// g.addColorStop(0.37, `rgba(${this.fillColor}, ${a1})`);
// g.addColorStop(1.00, `rgba(${this.fillColor}, 0)`);
// ——如果你想用你给的蓝青色渐变（覆盖上面三行），用下面三行——
g.addColorStop(0.00, 'rgba(229,249,255,1)');
g.addColorStop(0.37, 'rgba(190,255,219,0.5)');
g.addColorStop(1.00, 'rgba(0,0,0,0)');
ctx.fillStyle = g;
ctx.fill(); // 内外方向相反，默认非零规则即可得到“环”
ctx.restore();
// 3) 外圈虚线（同色） // 3) 外圈虚线（同色）
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2; const rDash = rRing + ringWidth / 2 + outerGap + dashWidth / 2
ctx.arc(0, 0, rDash, 0, Math.PI * 2); ctx.arc(0, 0, rDash, 0, Math.PI * 2)
ctx.lineWidth = dashWidth; ctx.lineWidth = dashWidth
ctx.setLineDash([dash, gap]); ctx.setLineDash([dash, gap])
ctx.lineCap = 'round'; ctx.lineCap = "round"
ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})`; ctx.strokeStyle = `rgba(${this.fillColor}, ${this.alpha})`
ctx.stroke(); ctx.stroke()
ctx.setLineDash([]); // 清理，避免影响后续绘制 ctx.setLineDash([]) // 清理，避免影响后续绘制
ctx.restore(); ctx.restore()
} else { } else {
ctx.beginPath() ctx.beginPath()
ctx.arc(0, 0, this.radius + 8, 0, Math.PI * 2) ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2)
ctx.lineWidth = 12 ctx.lineWidth = 5
ctx.setLineDash([4, 4]) ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})`
ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.6})`
ctx.stroke() ctx.stroke()
} }
this.paintText(ctx) //调用内部方法绘制文字 this.paintText(ctx) //调用内部方法绘制文字
}
} }
//自定义连线的方法 //自定义连线的方法

13
src/views/GroupEvolution/component/groupGraph.vue
View File

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