fix: 移动ROI方框时容易误操作的问题,及ROI ITEM刷选时鼠标悬浮的异常
This commit is contained in:
parent
7f3f3b95d1
commit
684ccf165a
|
@ -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 {
|
||||
|
|
|
@ -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),
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user