修改散点图覆盖方框线的问题及拖拽的逻辑调整
更新ROI 增加loading效果 处理数据更新后，回到初始界面的问题
This commit is contained in:
parent
56e618da37
commit
4c7aca83cf
|
|
@ -34,6 +34,7 @@
|
|||
:gammaEnergyData="gammaEnergyData"
|
||||
:histogramDataList="histogramDataList"
|
||||
:boundary="boundaryList"
|
||||
:isLoading.sync="isLoading"
|
||||
:currIdx="currIdx"
|
||||
@refreshRoi="refreshRoi"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
<CustomChart
|
||||
ref="chartTwoDRef"
|
||||
:option="twoDOption"
|
||||
:opts="opts"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
|
|
@ -133,25 +134,23 @@ const twoDOption = {
|
|||
max: 4096,
|
||||
interval: 512,
|
||||
},
|
||||
series: {
|
||||
series: [
|
||||
{
|
||||
type: 'scatterGL',
|
||||
z: 100,
|
||||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
animation: false,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
itemStyle: { color: '#99CA53' },
|
||||
zlevel: 11,
|
||||
showSymbol: false,
|
||||
},
|
||||
],
|
||||
brush: {},
|
||||
animation: false,
|
||||
}
|
||||
|
|
@ -162,7 +161,7 @@ const dragOption = {
|
|||
{
|
||||
type: 'rect',
|
||||
// rotation: Math.PI/2,
|
||||
z: 1000,
|
||||
zlevel: 12,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
|
|
@ -181,7 +180,7 @@ const dragOption = {
|
|||
},
|
||||
{
|
||||
type: 'rect',
|
||||
z: 1000,
|
||||
zlevel: 12,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
|
|
@ -351,6 +350,9 @@ export default {
|
|||
ColorPalette,
|
||||
},
|
||||
props: {
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
},
|
||||
histogramDataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
|
|
@ -398,7 +400,7 @@ export default {
|
|||
newVal.forEach((item, index) => {
|
||||
item.color = '#99CA53'
|
||||
})
|
||||
this.boundaryData = newVal[0]
|
||||
this.boundaryData = newVal[this.currIdx]
|
||||
this.reDrawRect()
|
||||
},
|
||||
// immediate: true,
|
||||
|
|
@ -418,6 +420,7 @@ export default {
|
|||
},
|
||||
boundaryData: {
|
||||
handler(newVal) {
|
||||
this.opts.notMerge = false
|
||||
const { minX, maxX, minY, maxY, color } = newVal
|
||||
this.startChannel = minX
|
||||
this.endChannel = maxX
|
||||
|
|
@ -431,22 +434,22 @@ export default {
|
|||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic1.ondrag = function () {
|
||||
const rectList = []
|
||||
let [a, lineSeries] = _this.twoDOption.series
|
||||
_this.startChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
|
||||
const rect = [
|
||||
[_this.startChannel, minY],
|
||||
[_this.endChannel, minY],
|
||||
[_this.endChannel, maxY],
|
||||
[_this.startChannel, maxY],
|
||||
[_this.startChannel, minY],
|
||||
]
|
||||
rectList.push(..._this.drawOneRect(rect, color))
|
||||
_this.myChart.setOption({
|
||||
series: {
|
||||
markLine: {
|
||||
data: rectList,
|
||||
},
|
||||
},
|
||||
})
|
||||
lineSeries.data = _this.drawOneRect(rect, color).data
|
||||
// const lineSeries = {
|
||||
// type: 'line',
|
||||
// ..._this.drawOneRect(rect, color),
|
||||
// zlevel: 11,
|
||||
// }
|
||||
// _this.twoDOption.series.splice(1, _this.twoDOption.series.length - 1, ...lineSeries)
|
||||
}
|
||||
graphic2.shape.height = graphicHeight
|
||||
graphic2.position = [
|
||||
|
|
@ -454,22 +457,16 @@ export default {
|
|||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic2.ondrag = function () {
|
||||
const rectList = []
|
||||
let [a, lineSeries] = _this.twoDOption.series
|
||||
_this.endChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
|
||||
const rect = [
|
||||
[_this.startChannel, minY],
|
||||
[_this.endChannel, minY],
|
||||
[_this.endChannel, maxY],
|
||||
[_this.startChannel, maxY],
|
||||
[_this.startChannel, minY],
|
||||
]
|
||||
rectList.push(..._this.drawOneRect(rect, color))
|
||||
_this.myChart.setOption({
|
||||
series: {
|
||||
markLine: {
|
||||
data: rectList,
|
||||
},
|
||||
},
|
||||
})
|
||||
lineSeries.data = _this.drawOneRect(rect, color).data
|
||||
}
|
||||
this.myChart.setOption(this.dragOption)
|
||||
},
|
||||
|
|
@ -489,10 +486,17 @@ export default {
|
|||
myChart: null,
|
||||
startChannel: null,
|
||||
endChannel: null,
|
||||
opts: {
|
||||
notMerge: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.opts.notMerge = true
|
||||
this.$nextTick(() => {
|
||||
this.opts.notMerge = false
|
||||
this.twoDOption.brush = { toolbox: [] }
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// Gamma 的折线图数据
|
||||
|
|
@ -512,7 +516,7 @@ export default {
|
|||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
this.twoDOption.series.data = this.histogramDataList
|
||||
this.twoDOption.series[0].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))
|
||||
},
|
||||
|
|
@ -530,215 +534,34 @@ export default {
|
|||
// 重绘矩形框区域
|
||||
reDrawRect() {
|
||||
const rectList = []
|
||||
|
||||
let [a, lineSeries] = this.twoDOption.series
|
||||
if (this.showROI) {
|
||||
const { minX, maxX, minY, maxY, color } = this.boundaryData
|
||||
// rect 遵循 左下 右下 右上 左上 的顺序
|
||||
// rect 遵循 左下 右下 右上 左上 左下 的顺序
|
||||
const rect = [
|
||||
[minX, minY],
|
||||
[maxX, minY],
|
||||
[maxX, maxY],
|
||||
[minX, maxY],
|
||||
[minX, minY],
|
||||
]
|
||||
|
||||
rectList.push(...this.drawOneRect(rect, color))
|
||||
lineSeries.data = this.drawOneRect(rect, color).data
|
||||
} else {
|
||||
lineSeries.data = []
|
||||
}
|
||||
this.twoDOption.series.markLine.data = rectList
|
||||
},
|
||||
/**
|
||||
* 绘制一个矩形框区域
|
||||
* 矩形框在这里的实现是由几条线段围起来的，但由于线段在超出图表区域显示有问题，故作了以下处理
|
||||
* @param {*} rect 左下 右下 右上 左上 的顺序
|
||||
* @param {*} rect 左下 右下 右上 左上 左下 的顺序
|
||||
*/
|
||||
drawOneRect(rect, color) {
|
||||
const rectList = []
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
debugger
|
||||
const inchartPoints = this.getInChartPoints(rect)
|
||||
const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem))
|
||||
// 如果框选范围内只有俩点
|
||||
if (inchartPoints.length == 2) {
|
||||
const [point1, point2] = inchartPoints
|
||||
const isVerticleLine = this.isVerticleLine(point1, point2)
|
||||
// 如果是纵向标记线，判断另两个点是在左边还是右边
|
||||
if (isVerticleLine) {
|
||||
const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在左边还是右边
|
||||
const isLeft = find[0] <= point1[0]
|
||||
/**
|
||||
* 如果在左边，推入左边俩点构成矩形
|
||||
* y
|
||||
* |________________
|
||||
* | |
|
||||
* |________________|
|
||||
* |
|
||||
* |——————————————————— x
|
||||
**/
|
||||
|
||||
if (isLeft) {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
// 如果是右边，同理，推入右边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point))
|
||||
})
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
}
|
||||
// 如果是纵向标记线，判断另两个点是在上边还是下边
|
||||
else {
|
||||
const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在上边还是右边
|
||||
const isBottom = find[1] <= point1[1]
|
||||
/**
|
||||
* 如果在下边，推入下边俩点构成矩形
|
||||
**/
|
||||
|
||||
if (isBottom) {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
// 如果是上边，同理，推入上边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
}
|
||||
}
|
||||
// 只有一个点在范围内，则是选中了矩形的一个角
|
||||
else if (inchartPoints.length == 1) {
|
||||
const point = inchartPoints[0]
|
||||
const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0])
|
||||
const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1])
|
||||
// 截取的右上角
|
||||
if (isLeft && isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
|
||||
}
|
||||
// 截取的右下角
|
||||
if (isLeft && !isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
|
||||
}
|
||||
// 截取的左下角
|
||||
if (!isLeft && !isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
|
||||
}
|
||||
// 截取的左上角
|
||||
if (!isLeft && isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
|
||||
}
|
||||
}
|
||||
// 全在里面
|
||||
else if (inchartPoints.length == 4) {
|
||||
// 按顺序挨个连起来，并且尾部连到头部
|
||||
rect.forEach((point, index) => {
|
||||
if (index == rect.length - 1) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, rect[0]))
|
||||
} else {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, rect[index + 1]))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 全不在里面
|
||||
else {
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX)
|
||||
const leftBottomPoint = rect[0]
|
||||
const rightBottomPoint = rect[1]
|
||||
const rightTopPoint = rect[3]
|
||||
const minYAxis = rightBottomPoint[1]
|
||||
const maYAxis = rightTopPoint[1]
|
||||
// 需要显示左右两侧的框线
|
||||
if (xAxisList.length == 4 && minYAxis < minY && maYAxis > maxY) {
|
||||
const minAxis = Math.min(...xAxisList)
|
||||
const maxAxis = Math.max(...xAxisList)
|
||||
rectList.push(this.generateLineDataByTwoPoints([minAxis, minY], [minAxis, maxY]))
|
||||
rectList.push(this.generateLineDataByTwoPoints([maxAxis, minY], [maxAxis, maxY]))
|
||||
}
|
||||
// 需要显示左右其中一条框线
|
||||
else if (xAxisList.length == 2 && minYAxis < minY && maYAxis > maxY) {
|
||||
const xAxis = xAxisList[0]
|
||||
rectList.push(this.generateLineDataByTwoPoints([xAxis, minY], [xAxis, maxY]))
|
||||
}
|
||||
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY)
|
||||
const minXAxis = leftBottomPoint[0]
|
||||
const maxXAxis = rightBottomPoint[0]
|
||||
// 需要显示上下两侧的框线
|
||||
if (yAxisList.length == 4 && minXAxis < minX && maxXAxis > maxX) {
|
||||
const minAxis = Math.min(...yAxisList)
|
||||
const maxAxis = Math.max(...yAxisList)
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, minAxis], [maxX, minAxis]))
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, maxAxis], [maxX, maxAxis]))
|
||||
}
|
||||
// 需要显示左右其中一条框线
|
||||
else if (yAxisList.length == 2 && minXAxis < minX && maxXAxis > maxX) {
|
||||
const yAxis = yAxisList[0]
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, yAxis], [maxX, yAxis]))
|
||||
}
|
||||
}
|
||||
// 补齐颜色
|
||||
rectList.forEach((item) => {
|
||||
item[0].lineStyle = {
|
||||
return {
|
||||
data: rect,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color,
|
||||
},
|
||||
}
|
||||
})
|
||||
return rectList
|
||||
},
|
||||
/**
|
||||
* 获取在框选范围内的点列表
|
||||
* @param { Array<Array<number>> } rectInfo
|
||||
*/
|
||||
getInChartPoints(rectInfo) {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
return rectInfo.filter((point) => {
|
||||
const [xAxis, yAxis] = point
|
||||
return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 根据俩点判断是横向还是纵向
|
||||
* x坐标相同，则是纵向，否则横向
|
||||
*/
|
||||
isVerticleLine(point1, point2) {
|
||||
return point1[0] == point2[0] ? true : false
|
||||
},
|
||||
/**
|
||||
* 根据两个点生成一个markLine直线
|
||||
*/
|
||||
generateLineDataByTwoPoints(point1, point2) {
|
||||
return [
|
||||
{
|
||||
xAxis: point1[0],
|
||||
yAxis: point1[1],
|
||||
},
|
||||
{
|
||||
xAxis: point2[0],
|
||||
yAxis: point2[1],
|
||||
},
|
||||
]
|
||||
},
|
||||
// 点击改变 ROI LIMITS
|
||||
handleChange(index) {
|
||||
|
|
@ -752,7 +575,7 @@ export default {
|
|||
this.twoDOption.yAxis.max = 4096
|
||||
|
||||
// this.emitRangeChange([0, 256, 0, 256])
|
||||
this.reDrawRect()
|
||||
// this.reDrawRect()
|
||||
|
||||
this.buildScatterList()
|
||||
},
|
||||
|
|
@ -799,7 +622,7 @@ export default {
|
|||
|
||||
// this.emitRangeChange([x1, x2, y1, y2])
|
||||
|
||||
this.reDrawRect()
|
||||
// this.reDrawRect()
|
||||
|
||||
this.buildScatterList()
|
||||
}
|
||||
|
|
@ -826,6 +649,7 @@ export default {
|
|||
},
|
||||
// 点击Update
|
||||
async handleUpdate() {
|
||||
this.$emit('update:isLoading', true)
|
||||
const { inputFileName } = this.sampleData
|
||||
try {
|
||||
const { success, result, message } = await putAction(
|
||||
|
|
@ -834,6 +658,7 @@ export default {
|
|||
}&ROINum=${this.currIdx + 1}`
|
||||
)
|
||||
if (success) {
|
||||
this.$emit('update:isLoading', false)
|
||||
let obj = {}
|
||||
for (const key in result) {
|
||||
if (Object.hasOwnProperty.call(result, key)) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
|
|||
const roiLimitsOption = {
|
||||
grid: {
|
||||
top: 15,
|
||||
left: 55,
|
||||
left: 65,
|
||||
right: 18,
|
||||
bottom: 45,
|
||||
},
|
||||
|
|
@ -106,10 +106,10 @@ export default {
|
|||
watch: {
|
||||
ROILists: {
|
||||
handler(newVal) {
|
||||
this.active = 0
|
||||
this.$emit('sendIndex', 0)
|
||||
const [ROIOneList, ...lists] = newVal
|
||||
this.buildOneLineList(ROIOneList)
|
||||
// this.active = 0
|
||||
// this.$emit('sendIndex', 0)
|
||||
// const [ROIOneList, ...lists] = newVal
|
||||
this.buildOneLineList(newVal[this.active])
|
||||
},
|
||||
// immediate: true,
|
||||
},
|
||||
|
|
@ -128,10 +128,10 @@ export default {
|
|||
// this.$bus.$off('updateRoi', this.updateRoi)
|
||||
},
|
||||
methods: {
|
||||
updateRoi(data) {
|
||||
this.buildOneLineList(data)
|
||||
this.active = 0
|
||||
},
|
||||
// updateRoi(data) {
|
||||
// this.buildOneLineList(data)
|
||||
// this.active = 0
|
||||
// },
|
||||
buildOneLineList(val) {
|
||||
if (val) {
|
||||
const currSeries = this.roiLimitsOption.series
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user