fix: 移动ROI方框时容易误操作的问题,及ROI ITEM刷选时鼠标悬浮的异常

This commit is contained in:
Xu Zhimeng 2024-07-26 15:50:13 +08:00
parent 7f3f3b95d1
commit 684ccf165a
2 changed files with 34 additions and 28 deletions

View File

@ -30,7 +30,7 @@
<!-- 2D图表结束 -->
<!-- 图表上面的四边形 -->
<div
class="boundary-list"
:class="['boundary-list', currBoundaryItem ? 'is-moving' : '']"
:style="{
left: boundaryContainerPosition.left + 'px',
top: boundaryContainerPosition.top + 'px',
@ -51,8 +51,8 @@
borderColor: boundaryItem.borderColor,
}"
>
<div class="boundary-item-left" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
<div class="boundary-item-right" @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"></div>
<div :class="['boundary-item-left']" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
<div :class="['boundary-item-right']" @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"></div>
</div>
</div>
<!-- 图表上面的四边形结束 -->
@ -149,7 +149,7 @@ const twoDOption = {
show: false,
},
min: 0,
max: 4096,
max: 2300,
interval: 512,
},
series: {
@ -262,6 +262,7 @@ export default {
boundaryList: [], //
boundaryContainerPosition: {},
isLog: true, // log
currBoundaryItem: null, //
}
},
created() {
@ -287,7 +288,7 @@ export default {
} = this.twoDOption
//
this.twoDOption.series.symbolSize = 5
this.twoDOption.series.symbolSize = 2
this.twoDOption.series.data = this.histogramDataList
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
@ -301,9 +302,9 @@ export default {
},
setVisialMapParams() {
const counts = this.histogramDataList.map(({ c }) => c)
const counts = this.histogramDataList.filter(({ c }) => c).map(({ c }) => c)
if (counts.length) {
this.twoDOption.visualMap.max = Math.max(...counts)
this.twoDOption.visualMap.max = counts.sort((a, b) => b - a)[0]
} else {
this.twoDOption.visualMap.max = 0
}
@ -350,7 +351,7 @@ export default {
setVisualMapHeight() {
const chartContainerRef = this.$refs.chartContainerRef
this.twoDOption.visualMap.itemHeight = chartContainerRef.offsetHeight - 75
this.twoDOption.visualMap.itemHeight = chartContainerRef.offsetHeight - 40
},
handleChartResize() {
@ -397,7 +398,7 @@ export default {
//
handleMouseDown() {
if (this.boundaryItem) {
if (this.currBoundaryItem) {
return
}
@ -472,56 +473,56 @@ export default {
//
handleBorderMouseDown(boundaryItem, direction, index) {
this.boundaryRight = boundaryItem.left + boundaryItem.width
this.boundaryItem = boundaryItem
this.currBoundaryItem = boundaryItem
this.boundaryIndex = index
this.direction = direction
},
//
handleBorderMouseMove({ movementX }) {
if (!this.boundaryItem) {
if (!this.currBoundaryItem) {
return
}
const prevLeft = this.boundaryItem.left
const prevLeft = this.currBoundaryItem.left
// left
if (this.direction == 'left') {
const nextLeft = prevLeft + movementX
const nextWidth = this.boundaryItem.width - movementX
const nextWidth = this.currBoundaryItem.width - movementX
// 线
if (nextLeft >= this.boundaryRight) {
this.boundaryItem.left = this.boundaryRight
this.boundaryItem.width = nextLeft - this.boundaryRight
this.currBoundaryItem.left = this.boundaryRight
this.currBoundaryItem.width = nextLeft - this.boundaryRight
this.direction = 'right'
} else {
this.boundaryItem.left = nextLeft
this.boundaryItem.width = nextWidth
this.currBoundaryItem.left = nextLeft
this.currBoundaryItem.width = nextWidth
this.direction = 'left'
}
}
//
else {
const nextWidth = this.boundaryItem.width + movementX
const nextWidth = this.currBoundaryItem.width + movementX
// 线
if (nextWidth <= 0) {
this.direction = 'left'
this.boundaryItem.left = prevLeft + nextWidth
this.boundaryItem.width = -nextWidth
this.currBoundaryItem.left = prevLeft + nextWidth
this.currBoundaryItem.width = -nextWidth
} else {
this.boundaryItem.width = nextWidth
this.currBoundaryItem.width = nextWidth
this.direction = 'right'
}
}
this.boundaryRight = this.boundaryItem.left + this.boundaryItem.width
this.boundaryRight = this.currBoundaryItem.left + this.currBoundaryItem.width
},
//
handleBorderMouseLeave() {
//
if (this.boundaryItem) {
if (this.currBoundaryItem) {
//
const { left, width } = this.boundaryItem
const { left, width } = this.currBoundaryItem
const realLeft = left + this.boundaryContainerPosition.left
const chart = this.$refs.chartTwoDRef.getChartInstance()
@ -534,7 +535,7 @@ export default {
start: parseInt(start.toFixed()),
end: parseInt(end.toFixed()),
})
this.boundaryItem = null
this.currBoundaryItem = null
}
},
},
@ -587,6 +588,12 @@ export default {
position: absolute;
overflow: hidden;
pointer-events: none;
user-select: none;
&.is-moving {
pointer-events: all;
cursor: w-resize;
}
}
.boundary-item {

View File

@ -42,10 +42,9 @@ import { buildLineSeries, findSeriesByName, getAxisMax, rangeNumber } from '@/ut
const option = {
grid: {
top: 10,
left: 20,
left: 60,
right: 20,
bottom: 25,
containLabel: true,
},
tooltip: {
show: true,
@ -194,7 +193,7 @@ export default {
this.axisInfo = {
channel: Math.round(xAxis),
count: this.channelData.all ? this.channelData.all.pointlist[channel].y : count,
energy: this.energys[channel].toFixed(3),
energy: (this.energys[channel] || 0).toFixed(3),
}
},