fix: 解决scatterGL在各种情况下取值导致的渲染问题

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -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()
 
-            this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
+            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)
-            this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
+
+            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(() => {
+      if (this.timer) {
-        this.clearBrush(this.getChart())
+        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 xAxisLimit = rangeNumber(xAxisMin, xAxisMax)
-        const yAxisLimit = rangeNumber(1, yAxisMax)
+        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 {Boolean} isReset 是否重置到初始状态
-     * @param {*} x2 xAxis max
-     * @param {*} y1 yAxis min
-     * @param {*} y2 yAxis max
      */
-    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)
 
-      const channelCompareLine = {
+      if (this.channelCompareLine) {
-        ...this.channelCompareLine,
+        const channelCompareLine = {
-        pointlist: this.pointlistLimit(this.channelCompareLine.pointlist, x1, x2, y1, y2),
+          ...this.channelCompareLine,
+          pointlist: isReset
+            ? this.pointlistLimitY(this.channelCompareLine.pointlist)
+            : this.pointlistLimit(this.channelCompareLine.pointlist, x1, x2, y1, y2),
+        }
+        const energyCompareLine = {
+          ...this.energyCompareLine,
+          pointlist: isReset
+            ? this.pointlistLimitY(this.energyCompareLine.pointlist)
+            : this.pointlistLimit(this.energyCompareLine.pointlist, x1, x2, y1, y2),
+        }
+        this.redrawLineBySeriesName('Compare', energyCompareLine, channelCompareLine)
       }
-      const energyCompareLine = {
-        ...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() {
+    handleResetChart() {
-      const spectrumLineMaxX = Math.max(...this.shadowChannelChart.pointlist.map(({ x }) => x))
-      const spectrumLineMaxY = Math.max(...this.shadowChannelChart.pointlist.map(({ y }) => y))
-
       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 = getAxisMax(this.getChart(), 'yAxis')
-        this.thumbnailOption.yAxis.max = yAxisMax
       })
     },
 
@@ -1225,8 +1253,8 @@ export default {
         compareLine.data = []
         this.resetThumbnailChartDataMax()
       }
-      this.channelCompareLine = []
+      this.channelCompareLine = undefined
-      this.energyCompareLine = []
+      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()