fix: 解决scatterGL在各种情况下取值导致的渲染问题
This commit is contained in:
parent
c81923e744
commit
90017662ed
|
|
@ -17,7 +17,7 @@
|
|||
v-if="!isLoading"
|
||||
slot="content"
|
||||
@change="handleGraphAssistanceChange"
|
||||
@reset="handleReset"
|
||||
@reset="handleResetChart"
|
||||
/>
|
||||
</pop-over-with-icon>
|
||||
<a-popover
|
||||
|
|
@ -344,7 +344,7 @@ export default {
|
|||
try {
|
||||
this.isLoading = true
|
||||
|
||||
this.reset()
|
||||
this.handleResetState()
|
||||
|
||||
// const { success, result, message } = Response
|
||||
|
||||
|
|
@ -379,7 +379,7 @@ export default {
|
|||
const { inputFileName: fileName } = this.sample
|
||||
try {
|
||||
this.isLoading = true
|
||||
this.reset()
|
||||
this.handleResetState()
|
||||
// const { success, result, message } = Response
|
||||
const { success, result, message } = await getAction('/gamma/gammaByFile', {
|
||||
fileName,
|
||||
|
|
@ -458,7 +458,6 @@ export default {
|
|||
this.shapeChannelData = shapeChannelData
|
||||
this.shapeEnergyData = shapeEnergyData
|
||||
|
||||
this.option.yAxis.max = 'dataMax'
|
||||
this.resetThumbnailChartDataMax()
|
||||
const series = []
|
||||
|
||||
|
|
@ -625,19 +624,19 @@ export default {
|
|||
case 'Linear':
|
||||
this.option.yAxis.type = 'value'
|
||||
this.thumbnailOption.yAxis.type = 'value'
|
||||
this.handleReset()
|
||||
this.handleResetChart()
|
||||
break
|
||||
case 'Log10':
|
||||
this.option.yAxis.type = 'log'
|
||||
this.thumbnailOption.yAxis.type = 'log'
|
||||
this.handleReset()
|
||||
this.handleResetChart()
|
||||
break
|
||||
case 'Channel':
|
||||
case 'Energy':
|
||||
this.graphAssistance.axisType = label
|
||||
this.option.xAxis.name = label
|
||||
|
||||
this.handleReset()
|
||||
this.handleResetChart()
|
||||
|
||||
this.redrawLineBySeriesName(
|
||||
'BaseLine',
|
||||
|
|
@ -659,7 +658,9 @@ export default {
|
|||
|
||||
this.redrawThumbnailChart()
|
||||
|
||||
if (this.channelCompareLine) {
|
||||
this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
|
||||
}
|
||||
break
|
||||
case 'Lines':
|
||||
this.graphAssistance.spectrumType = 'Lines'
|
||||
|
|
@ -674,7 +675,10 @@ export default {
|
|||
compareLineSeries.symbol = 'none'
|
||||
|
||||
this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
|
||||
|
||||
if (this.channelCompareLine) {
|
||||
this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
|
||||
}
|
||||
break
|
||||
case 'Scatter':
|
||||
this.graphAssistance.spectrumType = 'Scatter'
|
||||
|
|
@ -807,7 +811,7 @@ export default {
|
|||
|
||||
// 双击还原
|
||||
handleChartDblClick() {
|
||||
this.handleReset()
|
||||
this.handleResetChart()
|
||||
},
|
||||
|
||||
// 获取 Nuclide Library 数据
|
||||
|
|
@ -955,12 +959,16 @@ export default {
|
|||
},
|
||||
|
||||
handleMouseUp() {
|
||||
setTimeout(() => {
|
||||
this.clearBrush(this.getChart())
|
||||
if (this.timer) {
|
||||
window.clearTimeout(this.timer)
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.clearBrush()
|
||||
}, 0)
|
||||
},
|
||||
|
||||
clearBrush(chart) {
|
||||
clearBrush() {
|
||||
const chart = this.getChart()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
|
|
@ -970,6 +978,7 @@ export default {
|
|||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
brushOption: false
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -986,13 +995,18 @@ export default {
|
|||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
// 拿到之前的最大值
|
||||
const xAxisMax = getAxisMax(chart, 'xAxis')
|
||||
const yAxisMax = this.option.yAxis.max
|
||||
const yAxisMax = getAxisMax(chart, 'yAxis')
|
||||
|
||||
// 拿到之前的最小值
|
||||
const xAxisMin = this.option.xAxis.min
|
||||
const yAxisMin = this.option.yAxis.min
|
||||
|
||||
let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
const xAxisLimit = rangeNumber(1, xAxisMax)
|
||||
const yAxisLimit = rangeNumber(1, yAxisMax)
|
||||
const xAxisLimit = rangeNumber(xAxisMin, xAxisMax)
|
||||
const yAxisLimit = rangeNumber(yAxisMin, yAxisMax)
|
||||
|
||||
x1 = xAxisLimit(x1)
|
||||
x2 = xAxisLimit(x2)
|
||||
|
|
@ -1020,8 +1034,6 @@ export default {
|
|||
this.halfHeightPixel = rectHeightPixel / 2
|
||||
}
|
||||
|
||||
this.clearBrush(chart)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.rangeScatter()
|
||||
})
|
||||
|
|
@ -1029,12 +1041,9 @@ export default {
|
|||
|
||||
/**
|
||||
* 因scatterGL 不受axis中max和min的控制，手动处理溢出部分
|
||||
* @param {*} x1 xAxis min
|
||||
* @param {*} x2 xAxis max
|
||||
* @param {*} y1 yAxis min
|
||||
* @param {*} y2 yAxis max
|
||||
* @param {Boolean} isReset 是否重置到初始状态
|
||||
*/
|
||||
rangeScatter() {
|
||||
rangeScatter(isReset) {
|
||||
if (!this.isScatter()) {
|
||||
return
|
||||
}
|
||||
|
|
@ -1050,23 +1059,33 @@ export default {
|
|||
|
||||
const channelSpectrumData = {
|
||||
...this.shadowChannelChart,
|
||||
pointlist: this.pointlistLimit(this.shadowChannelChart.pointlist, x1, x2, y1, y2),
|
||||
pointlist: isReset
|
||||
? this.pointlistLimitY(this.shadowChannelChart.pointlist)
|
||||
: this.pointlistLimit(this.shadowChannelChart.pointlist, x1, x2, y1, y2),
|
||||
}
|
||||
const energySpectrumData = {
|
||||
...this.shadowEnergyChart,
|
||||
pointlist: this.pointlistLimit(this.shadowEnergyChart.pointlist, x1, x2, y1, y2),
|
||||
pointlist: isReset
|
||||
? this.pointlistLimitY(this.shadowEnergyChart.pointlist)
|
||||
: this.pointlistLimit(this.shadowEnergyChart.pointlist, x1, x2, y1, y2),
|
||||
}
|
||||
this.redrawLineBySeriesName('Spectrum', energySpectrumData, channelSpectrumData)
|
||||
|
||||
if (this.channelCompareLine) {
|
||||
const channelCompareLine = {
|
||||
...this.channelCompareLine,
|
||||
pointlist: this.pointlistLimit(this.channelCompareLine.pointlist, x1, x2, y1, y2),
|
||||
pointlist: isReset
|
||||
? this.pointlistLimitY(this.channelCompareLine.pointlist)
|
||||
: this.pointlistLimit(this.channelCompareLine.pointlist, x1, x2, y1, y2),
|
||||
}
|
||||
const energyCompareLine = {
|
||||
...this.energyCompareLine,
|
||||
pointlist: this.pointlistLimit(this.energyCompareLine.pointlist, x1, x2, y1, y2),
|
||||
pointlist: isReset
|
||||
? this.pointlistLimitY(this.energyCompareLine.pointlist)
|
||||
: this.pointlistLimit(this.energyCompareLine.pointlist, x1, x2, y1, y2),
|
||||
}
|
||||
this.redrawLineBySeriesName('Compare', energyCompareLine, channelCompareLine)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -1081,6 +1100,10 @@ export default {
|
|||
return pointlist.filter(({ x, y }) => x >= x1 && x <= x2 && y >= y1 && y <= y2)
|
||||
},
|
||||
|
||||
pointlistLimitY(pointlist) {
|
||||
return pointlist.filter(({ y }) => y >= 1)
|
||||
},
|
||||
|
||||
// 在右上角缩略图中设置范围
|
||||
setThumbnailChartRect(x1, y2, x2, y1) {
|
||||
this.thumbnailChartRect = [x1, y2, x2, y1]
|
||||
|
|
@ -1121,7 +1144,11 @@ export default {
|
|||
const [x1, y2, x2, y1] = this.thumbnailChartRect
|
||||
const halfWidth = Math.ceil((x2 - x1) / 2)
|
||||
|
||||
const [, maxYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, this.thumbnailOption.yAxis.max]) // 缩略图最大值转为pix
|
||||
// 缩略图最大值转为pix
|
||||
const [, maxYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [
|
||||
0,
|
||||
getAxisMax(thumbnailChart, 'yAxis'),
|
||||
])
|
||||
const [, minYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, 1])
|
||||
|
||||
let [xAxis, yAxis] = point
|
||||
|
|
@ -1156,18 +1183,19 @@ export default {
|
|||
|
||||
this.option.yAxis.min = minYAxis
|
||||
this.option.yAxis.max = maxYAxis
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.rangeScatter()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 重置
|
||||
handleReset() {
|
||||
const spectrumLineMaxX = Math.max(...this.shadowChannelChart.pointlist.map(({ x }) => x))
|
||||
const spectrumLineMaxY = Math.max(...this.shadowChannelChart.pointlist.map(({ y }) => y))
|
||||
|
||||
handleResetChart() {
|
||||
this.option.xAxis.min = 1
|
||||
this.option.xAxis.max = spectrumLineMaxX
|
||||
this.option.xAxis.max = 'dataMax'
|
||||
this.option.yAxis.min = 1
|
||||
this.option.yAxis.max = spectrumLineMaxY
|
||||
this.option.yAxis.max = 'dataMax'
|
||||
|
||||
const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
|
||||
thumbnailSpectrumLineSeries.markLine.data = []
|
||||
|
|
@ -1175,13 +1203,13 @@ export default {
|
|||
this.closePeakInfomationTooltip()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.rangeScatter()
|
||||
this.rangeScatter(true)
|
||||
})
|
||||
},
|
||||
|
||||
// 从分析工具刷新部分数据
|
||||
handleRefresh(data) {
|
||||
this.reset()
|
||||
this.handleResetState()
|
||||
data.DetailedInformation = this.detailedInfomation
|
||||
this.dataProsess(data)
|
||||
},
|
||||
|
|
@ -1198,6 +1226,7 @@ export default {
|
|||
this.$message.warn('Sample is Loading')
|
||||
return
|
||||
}
|
||||
this.handleResetChart()
|
||||
this.clearCompareLine()
|
||||
this.compareFileListModalVisible = true
|
||||
},
|
||||
|
|
@ -1213,8 +1242,7 @@ export default {
|
|||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
const yAxisMax = getAxisMax(this.getChart(), 'yAxis')
|
||||
this.thumbnailOption.yAxis.max = yAxisMax
|
||||
this.thumbnailOption.yAxis.max = getAxisMax(this.getChart(), 'yAxis')
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -1225,8 +1253,8 @@ export default {
|
|||
compareLine.data = []
|
||||
this.resetThumbnailChartDataMax()
|
||||
}
|
||||
this.channelCompareLine = []
|
||||
this.energyCompareLine = []
|
||||
this.channelCompareLine = undefined
|
||||
this.energyCompareLine = undefined
|
||||
},
|
||||
|
||||
// 重新分析
|
||||
|
|
@ -1242,7 +1270,7 @@ export default {
|
|||
|
||||
try {
|
||||
this.isLoading = true
|
||||
this.reset()
|
||||
this.handleResetState()
|
||||
|
||||
const { inputFileName: fileName } = this.sample
|
||||
const { success, result, message } = await postAction(`/gamma/Reprocessing?fileName=${fileName}`)
|
||||
|
|
@ -1308,7 +1336,7 @@ export default {
|
|||
},
|
||||
|
||||
// 重置页面信息
|
||||
reset() {
|
||||
handleResetState() {
|
||||
this.selectedChannel = -1
|
||||
this.nuclideLibraryList = []
|
||||
this.closePeakInfomationTooltip()
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user