修改第四个页面的节点和前面节点的区分
This commit is contained in:
qumeng039@126.com
parent
f52589a651
commit
bc45d925fd
|
|
@ -463,9 +463,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name === '内部密度指数演化' ? 20.0 : 0,
|
||||
max: item.name === '内部密度指数演化' ? 20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
|
||||
interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
|
||||
min: item.name === "内部密度指数演化" ? 20.0 : 0,
|
||||
max:
|
||||
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) => ({
|
||||
data: item.data,
|
||||
|
|
@ -480,9 +484,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name === '内部密度指数演化' ? 20.0 : 0,
|
||||
max: item.name === '内部密度指数演化' ? 20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
|
||||
interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
|
||||
min: item.name === "内部密度指数演化" ? 20.0 : 0,
|
||||
max:
|
||||
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) => ({
|
||||
data: item.data,
|
||||
|
|
@ -497,9 +505,13 @@ export const useGroupStructureStore = defineStore("groupStructure", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name === '内部密度指数演化' ? 20.0 : 0,
|
||||
max: item.name === '内部密度指数演化' ? 20.5 : Math.ceil(item.chart.yaxisRange.max / 5) * 5,
|
||||
interval: item.name === '内部密度指数演化' ? 0.1 : Math.ceil(item.chart.yaxisRange.max / 5)
|
||||
min: item.name === "内部密度指数演化" ? 20.0 : 0,
|
||||
max:
|
||||
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) => ({
|
||||
data: item.data,
|
||||
|
|
@ -626,9 +638,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.00 : 0,
|
||||
max: 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)
|
||||
min: item.name === "合并演化" || item.name === "扩展演化" ? 20.0 : 0,
|
||||
max:
|
||||
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) => ({
|
||||
data: item.data.map((item) => item.toFixed(2)),
|
||||
|
|
@ -644,9 +662,15 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name ==='合并演化' || item.name ==='扩展演化' ? 20.00 : 0,
|
||||
max: 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)
|
||||
min: item.name === "合并演化" || item.name === "扩展演化" ? 20.0 : 0,
|
||||
max:
|
||||
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) => ({
|
||||
data: item.data.map((item) => item.toFixed(2)),
|
||||
|
|
@ -662,9 +686,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
|||
chart: {
|
||||
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
|
||||
yAxisRange: {
|
||||
min: item.name ==='合并演化' ? 20.00 : 0,
|
||||
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)
|
||||
min: item.name === "合并演化" ? 20.0 : 0,
|
||||
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)
|
||||
},
|
||||
seriesList: item.chart.seriesList.map((item) => ({
|
||||
data: item.data.map((item) => item.toFixed(2)),
|
||||
|
|
|
|||
|
|
@ -1,84 +1,88 @@
|
|||
//自定义绘制节点的方法
|
||||
export const paintNodeFunction = function (ctx, onlyShape) {
|
||||
//默认绘制数据类型图片
|
||||
if (this.properties.typeIcon) {
|
||||
if (this.selected || this.showSelected) {
|
||||
export const paintNodeFunction = (storeId) => {
|
||||
return function (ctx, onlyShape) {
|
||||
//默认绘制数据类型图片
|
||||
if (this.properties.typeIcon) {
|
||||
if (this.selected || this.showSelected) {
|
||||
this.drawShape(ctx, onlyShape)
|
||||
}
|
||||
|
||||
if (this.alpha < 1) {
|
||||
ctx.save()
|
||||
ctx.globalAlpha = this.alpha
|
||||
ctx.drawImage(
|
||||
this.properties.typeIcon,
|
||||
-this.width / 2,
|
||||
-this.height / 2,
|
||||
this.width,
|
||||
this.height
|
||||
)
|
||||
ctx.restore()
|
||||
} else {
|
||||
ctx.drawImage(
|
||||
this.properties.typeIcon,
|
||||
-this.width / 2,
|
||||
-this.height / 2,
|
||||
this.width,
|
||||
this.height
|
||||
)
|
||||
}
|
||||
} else {
|
||||
this.drawShape(ctx, onlyShape)
|
||||
}
|
||||
if (storeId == "anomalousGroup") {
|
||||
// 半径 & 样式参数（按需调整）
|
||||
// ===== 三层：实心圆 + 半透明边框 + 外圈虚线 =====
|
||||
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）
|
||||
|
||||
if (this.alpha < 1) {
|
||||
// 1) 中间实心圆（填充）
|
||||
ctx.save()
|
||||
ctx.globalAlpha = this.alpha
|
||||
ctx.drawImage(
|
||||
this.properties.typeIcon,
|
||||
-this.width / 2,
|
||||
-this.height / 2,
|
||||
this.width,
|
||||
this.height
|
||||
)
|
||||
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.drawImage(
|
||||
this.properties.typeIcon,
|
||||
-this.width / 2,
|
||||
-this.height / 2,
|
||||
this.width,
|
||||
this.height
|
||||
)
|
||||
ctx.beginPath()
|
||||
ctx.arc(0, 0, this.radius + 6, 0, Math.PI * 2)
|
||||
ctx.lineWidth = 5
|
||||
ctx.strokeStyle = `rgba(${this.fillColor},${this.alpha * 0.4})`
|
||||
ctx.stroke()
|
||||
}
|
||||
} else {
|
||||
this.drawShape(ctx, onlyShape)
|
||||
|
||||
this.paintText(ctx) //调用内部方法绘制文字
|
||||
}
|
||||
|
||||
// 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()
|
||||
|
||||
this.paintText(ctx) //调用内部方法绘制文字
|
||||
}
|
||||
|
||||
//自定义连线的方法
|
||||
|
|
|
|||
|
|
@ -46,10 +46,9 @@ const defaultConfig = {
|
|||
textOffsetY: 10
|
||||
},
|
||||
shape: "circle",
|
||||
size: 15,
|
||||
size: storeId == "anomalousGroup" ? 15 : 40,
|
||||
borderColor: "200,50,50",
|
||||
borderWidth: 0,
|
||||
|
||||
selected: {
|
||||
borderWidth: 5,
|
||||
borderColor: "100,250,100",
|
||||
|
|
@ -77,8 +76,8 @@ const defaultConfig = {
|
|||
},
|
||||
highLightNeiber: true // 相邻节点高亮开关
|
||||
}
|
||||
const registCustomePaintFunc = () => {
|
||||
graphVis.definedNodePaintFunc(paintNodeFunction) //自定义节点绘图方法
|
||||
const registCustomePaintFunc = (curStoreId) => {
|
||||
graphVis.definedNodePaintFunc(paintNodeFunction(curStoreId)) //自定义节点绘图方法
|
||||
graphVis.definedLinkPaintFunc(paintLineFunction) //自定义关系绘图方法
|
||||
}
|
||||
// 处理时间轴点击事件和拉动
|
||||
|
|
@ -128,7 +127,6 @@ const registEvents = () => {
|
|||
currentSelectNode.value.fx = null
|
||||
currentSelectNode.value.fy = null
|
||||
currentSelectNode.value = null
|
||||
// highLightAboutNodesOrLinks(typeMap[storeId])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -136,9 +134,9 @@ const registEvents = () => {
|
|||
//公用连线或节点高亮函数
|
||||
const highLightAboutNodesOrLinks = (type) => {
|
||||
graphVis.cancelAllSelected()
|
||||
const { newNodes, newLinks } = graph.value
|
||||
if (type == "nodes") {
|
||||
//实现高亮节点逻辑
|
||||
const { newNodes } = graph.value
|
||||
graphVis.nodes.forEach((node) =>
|
||||
newNodes.forEach((newNode) => {
|
||||
if (node.id === newNode.name) {
|
||||
|
|
@ -148,7 +146,6 @@ const highLightAboutNodesOrLinks = (type) => {
|
|||
)
|
||||
} else if (type == "links") {
|
||||
//实现连线高亮逻辑
|
||||
const { newLinks } = graph.value
|
||||
graphVis.links.forEach((link) =>
|
||||
newLinks.forEach((newLink) => {
|
||||
if (link.source.id === newLink.source && link.target.id === newLink.target) {
|
||||
|
|
@ -311,7 +308,7 @@ const createGraph = () => {
|
|||
graphVis.setDragHideLine(false) //拖拽时隐藏连线
|
||||
graphVis.setShowDetailScale(0.1) //展示细节的比例
|
||||
graphVis.setZoomRange(0.1, 5) //缩放区间
|
||||
registCustomePaintFunc() //注册自定义绘图方法
|
||||
registCustomePaintFunc(storeId) //注册自定义绘图方法
|
||||
registEvents()
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user