From 72c7c7beb923b86ad6143ee501314f7ce2853a98 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 1 Nov 2023 20:10:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DGamma=20Analysis?=
 =?UTF-8?q?=E5=92=8CInteractive=20Tools=E4=B8=AD=E7=9A=84=E8=AF=B8?=
 =?UTF-8?q?=E5=A4=9A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/index.vue          |  76 ++---
 .../AnalyzeInteractiveToolModal/index.vue     | 115 +++++---
 src/views/spectrumAnalysis/gamma-analysis.vue | 261 ++++++++++++------
 src/views/spectrumAnalysis/settings.js        |  20 +-
 4 files changed, 293 insertions(+), 179 deletions(-)

diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
index 99734cb..5cc2e7f 100644
--- a/src/components/CustomTable/index.vue
+++ b/src/components/CustomTable/index.vue
@@ -1,6 +1,7 @@
 <template>
   <a-table
-   class="custom-table"
+    ref="tableRef"
+    class="custom-table"
     v-bind="$attrs"
     :data-source="list"
     :columns="columns"
@@ -9,7 +10,7 @@
     :loading="loading"
     :pagination="pagination"
     :customRow="customRow"
-    :rowClassName="() => canSelect? 'custom-table-row': ''"
+    :rowClassName="() => (canSelect ? 'custom-table-row' : '')"
     @change="handleTableChange"
   >
     <!-- 处理 scopedSlots -->
@@ -23,49 +24,49 @@ export default {
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     columns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     size: {
       type: String,
-      default: 'middle'
+      default: 'middle',
     },
     rowKey: {
       type: String,
-      default: 'id'
+      default: 'id',
     },
     loading: {
-      type: Boolean
+      type: Boolean,
     },
     pagination: {
-      type: [Object, Boolean]
+      type: [Object, Boolean],
     },
     selectedRowKeys: {
-      type: Array
+      type: Array,
     },
     selectionRows: {
-      type: Array
+      type: Array,
     },
     canSelect: {
       type: Boolean,
-      default: true
+      default: true,
     },
     canDeselect: {
       type: Boolean,
-      default: true
+      default: true,
     },
     multiple: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-        innerSelectedRowKeys: [],
-        innerSelectedRows: []
+      innerSelectedRowKeys: [],
+      innerSelectedRows: [],
     }
   },
   methods: {
@@ -76,22 +77,21 @@ export default {
         class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
         on: {
           click: () => {
-            if(!this.canSelect) {
+            if (!this.canSelect) {
               return
             }
             // 反选
             if (this.innerSelectedRowKeys.includes(key)) {
-               if(this.multiple || this.canDeselect) {
-                const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
+              if (this.multiple || this.canDeselect) {
+                const findIndex = this.innerSelectedRowKeys.findIndex((k) => k == key)
                 this.innerSelectedRowKeys.splice(findIndex, 1)
-               }
-            } 
+              }
+            }
             // 选中
             else {
-              if(this.multiple) {
+              if (this.multiple) {
                 this.innerSelectedRowKeys.push(key)
-              }
-              else {
+              } else {
                 this.innerSelectedRowKeys = [key]
               }
             }
@@ -100,31 +100,39 @@ export default {
           },
           dblclick: () => {
             this.$emit('rowDblClick', record, index)
-          }
-        }
+          },
+        },
       }
     },
     handleTableChange(pagination, filters, sorter) {
       this.$emit('change', pagination, filters, sorter)
-    }
+    },
+
+    // 让第index行滚动到视野范围
+    scrollIntoView(index) {
+      const tableEle = this.$refs.tableRef.$el
+      const tableBodyEle = tableEle.querySelector('.ant-table-body')
+      const prevEle = tableBodyEle.querySelector(`.ant-table-row:nth-child(${index + 1})`)
+      tableBodyEle.scrollTop = prevEle.offsetTop
+    },
   },
   watch: {
-    selectedRowKeys (val) {
-        this.innerSelectedRowKeys = val
+    selectedRowKeys(val) {
+      this.innerSelectedRowKeys = val
     },
-    innerSelectedRowKeys () {
+    innerSelectedRowKeys() {
       this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
       this.innerSelectedRows = this.innerSelectedRowKeys.map((key) => {
-        return this.list.find(item => item[this.rowKey] === key)
+        return this.list.find((item) => item[this.rowKey] === key)
       })
       this.$emit('update:selectionRows', this.innerSelectedRows)
-    }
+    },
   },
   computed: {
     scopedSlotsKeys() {
       return Object.keys(this.$scopedSlots)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="less">
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
index 939dade..f252a72 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -36,6 +36,7 @@
               <span @click="handleChangeMarkLine('next')">&gt;</span>
             </p>
             <custom-table
+              ref="tableRef"
               size="small"
               :class="list.length ? 'has-data' : ''"
               :list="list"
@@ -222,10 +223,9 @@ import { findNearPeak, getLineData, transformPointListData } from '@/utils/sampl
 const initialOption = {
   grid: {
     top: 40,
-    left: 40,
+    left: 80,
     right: 30,
     bottom: 30,
-    containLabel: true,
   },
   title: {
     text: '',
@@ -372,14 +372,16 @@ const columns = [
 const thumbnailOption = {
   grid: {
     top: 0,
-    left: 5,
-    right: 5,
+    left: 0,
+    right: 0,
     bottom: 0,
   },
   xAxis: {
     type: 'category',
     axisLine: {
-      show: false,
+      lineStyle: {
+        color: '#fff',
+      }
     },
     splitLine: {
       show: false,
@@ -387,6 +389,9 @@ const thumbnailOption = {
     axisLabel: {
       show: false,
     },
+    axisTick: {
+      show: false,
+    },
     min: 1,
     max: 'dataMax',
   },
@@ -401,8 +406,12 @@ const thumbnailOption = {
     axisLabel: {
       show: false,
     },
-    min: 0.1,
-    max: 'dataMax',
+    max: (value) => {
+      return (Math.abs(value.min) < value.max ? value.max : -value.min).toFixed(2)
+    },
+    min: (value) => {
+      return (Math.abs(value.min) < value.max ? -value.max : value.min).toFixed(2)
+    },
   },
   series: null,
 }
@@ -507,7 +516,7 @@ export default {
 
       const currSampleDetailInfo = await this.$store.dispatch('GET_SAMPLE_DATA', inputFileName)
       const {
-        data: { allData, shadowChannelChart, shapeChannelData, peak, BaseCtrls },
+        data: { allData, shadowChannelChart, shapeChannelData, peak, BaseCtrls, barChart },
       } = currSampleDetailInfo
 
       const channelBaseLine = getLineData(allData, 'BaseLine', 'channel')
@@ -521,9 +530,9 @@ export default {
       this.channelPeakChart = channelPeakGroup
       this.energy = allEnergy
       this.BaseCtrls = BaseCtrls
-      this.barChart = shadowChannelChart
+      this.barChart = barChart
 
-      this.setChartOption(channelBaseLine, shadowChannelChart, channelPeakGroup, shapeChannelData, shadowChannelChart)
+      this.setChartOption(channelBaseLine, shadowChannelChart, channelPeakGroup, shapeChannelData, barChart)
       this.list = peak
     },
 
@@ -542,7 +551,7 @@ export default {
       // 推入基线控制点
       series.push(this.buildCtrlPoint(baseCP))
 
-      // this.thumbnailOption.series = this.buildBarChart(bar)
+      this.thumbnailOption.series = this.buildBarChart(bar)
 
       this.option.series = series
     },
@@ -578,7 +587,7 @@ export default {
 
         if (this.list.length) {
           const selectedRow = this.list[index]
-          this.selectTableRow(selectedRow.index)
+          this.selectTableRow(selectedRow.index, index)
           this.getSelPosNuclide(selectedRow)
           this.selectedTableItem = selectedRow
         }
@@ -638,27 +647,53 @@ export default {
             this.setMarkLineXAxis(centroid)
             const selectedRow = this.list[i]
             this.selectedTableItem = selectedRow
-            this.selectTableRow(selectedRow.index)
+            this.selectTableRow(selectedRow.index, i)
             this.getSelPosNuclide(selectedRow)
+            this.adjustArea(i)
             return
           }
         }
       } else if (direction == 'prev') {
         for (i = size - 1; i >= 0; i--) {
-          if (Math.round(this.list[i].peakCentroid) < prevAxis) {
-            this.setMarkLineXAxis(Math.round(this.list[i].peakCentroid))
+          const centroid = Math.round(this.list[i].peakCentroid)
+          if (centroid < prevAxis) {
+            this.setMarkLineXAxis(centroid)
             const selectedRow = this.list[i]
             this.selectedTableItem = selectedRow
-            this.selectTableRow(selectedRow.index)
+            this.selectTableRow(selectedRow.index, i)
             this.getSelPosNuclide(selectedRow)
+            this.adjustArea(i)
             return
           }
         }
       }
     },
 
-    selectTableRow(key) {
+    /**
+     * 根据当前Peak调整缩放范围
+     */
+    adjustArea(index) {
+      const peak = this.channelPeakChart[index]
+      if (peak) {
+        const peakCountMax = Math.max(...peak.pointlist.map(({ y }) => y))
+        const peakCountMin = Math.min(...peak.pointlist.map(({ y }) => y))
+        const {
+          yAxis: { max, min },
+        } = this.option
+
+        if (max !== 'dataMax' && peakCountMin >= max) {
+          this.option.yAxis.max = 'dataMax'
+        }
+
+        if (peakCountMax <= min) {
+          this.option.yAxis.min = 0.1
+        }
+      }
+    },
+
+    selectTableRow(key, index) {
       this.selectedKeys = [key]
+      this.$refs.tableRef.scrollIntoView(index)
     },
 
     // 设置红色标记线的位置
@@ -713,16 +748,6 @@ export default {
       }
     },
 
-    // 获取每一段 Channel 中的最大值
-    getPeakMaxValues() {
-      const maxXAxises = this.channelPeakChart.map((item) => {
-        const allY = item.pointlist.map((point) => point.y)
-        const max = item.pointlist.find((point) => point.y == Math.max(...allY))
-        return max.x
-      })
-      return maxXAxises
-    },
-
     // 显示peak comment弹窗
     handleAddPeakComment() {
       if (!this.selectedKeys.length) {
@@ -914,7 +939,7 @@ export default {
     },
 
     // 表格的行点击
-    handleTableRowClick(row) {
+    handleTableRowClick(row, index) {
       if (this.selectedTableItem == row) {
         return
       }
@@ -940,6 +965,8 @@ export default {
       this.getSelPosNuclide(row)
 
       this.selectedTableItem = row
+
+      this.adjustArea(index)
     },
 
     // 鼠标按下时开启可刷选状态
@@ -1005,8 +1032,6 @@ export default {
 
         this.thumbnailOption.xAxis.min = x1
         this.thumbnailOption.xAxis.max = x2
-        this.thumbnailOption.yAxis.min = y1
-        this.thumbnailOption.yAxis.max = y2
 
         if (this.btnGroupType == 2) {
           this.buildRect()
@@ -1023,8 +1048,6 @@ export default {
 
       this.thumbnailOption.xAxis.min = 1
       this.thumbnailOption.xAxis.max = 'dataMax'
-      this.thumbnailOption.yAxis.min = 0.1
-      this.thumbnailOption.yAxis.max = 'dataMax'
 
       if (this.btnGroupType == 2) {
         this.buildRect()
@@ -1522,14 +1545,24 @@ export default {
 
     // 构建缩略图
     buildBarChart(barChart) {
-      return buildLineSeries(
-        'BarChart',
-        barChart.map(({ x, y }) => [x, y]),
-        '#fff',
-        {
-          silent: true,
-        }
-      )
+      return {
+        name: 'BarChart',
+        type: 'bar',
+        data: barChart.map(({ x, y }) => [x, y]),
+        itemStyle: {
+          color: '#fff',
+        },
+        lineStyle: {
+          width: 1,
+        },
+        symbol: 'none',
+        symbolSize: 1,
+        emphasis: {
+          disabled: true,
+        },
+        animation: false,
+        silent: true,
+      }
     },
 
     /**
@@ -1617,7 +1650,7 @@ export default {
 
     .thumbnail {
       height: 50px;
-      margin: 10px 10px 35px 40px;
+      margin: 10px 30px 35px 80px;
       background-color: #255369;
     }
 
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
index a697233..bdada8b 100644
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -141,7 +141,7 @@ import StripModal from './components/Modals/StripModal.vue'
 import { FilePicker } from '@/utils/FilePicker'
 import { zipFile } from '@/utils/file'
 import { findNearPeak } from '@/utils/sampleHelper'
-import baseCtrlJson from './baseCtrlJson.json'
+import { add, subtract } from 'xe-utils/methods'
 
 export default {
   props: {
@@ -303,8 +303,8 @@ export default {
         case '=': // 在x轴扩大范围
           nextMinX = currMinX - xStep
           nextMaxX = currMaxX + xStep
-          if (nextMinX < 1) {
-            nextMinX = 1
+          if (nextMinX < this.xAxisMin) {
+            nextMinX = this.xAxisMin
           }
           if (nextMaxX > maxX) {
             nextMaxX = maxX
@@ -351,30 +351,45 @@ export default {
           if (markLineXAxis == maxX) {
             return
           }
-          const nextAxis = markLineXAxis == -1 ? 1 : markLineXAxis + 1
-          markLineData.xAxis = nextAxis
+          let rightAxis = -1
+          if (markLineXAxis == -1) {
+            rightAxis = this.xAxisMin
+          } else {
+            if (this.isEnergy) {
+              const channel = this.getChannelByEnergy(markLineXAxis)
+              rightAxis = this.getEnergyByChannel(channel + 1)
+            } else {
+              rightAxis = markLineXAxis + 1
+            }
+          }
+          markLineData.xAxis = rightAxis
           const {
-            channel: nextChannel,
-            energy: nextEnergy,
-            counts: nextCounts,
-          } = this.getEnergyAndCountsByXAxis(nextAxis)
-          this.setChartBottomTitle(nextChannel, nextEnergy, nextCounts)
-
-          this.getSelPosNuclide(nextChannel)
+            channel: rightChannel,
+            energy: rightEnergy,
+            counts: rightCounts,
+          } = this.getEnergyAndCountsByXAxis(rightAxis)
+          this.setChartBottomTitle(rightChannel, rightEnergy, rightCounts)
+          this.getSelPosNuclide(rightChannel)
           break
         case 'ArrowLeft':
-          if (markLineXAxis <= 1) {
+          if (markLineXAxis <= this.xAxisMin) {
             return
           }
-          markLineData.xAxis = markLineXAxis - 1
+          let leftAxis = 0
+          if (this.isEnergy) {
+            const channel = this.getChannelByEnergy(markLineXAxis)
+            leftAxis = this.getEnergyByChannel(channel - 1)
+          } else {
+            leftAxis = markLineXAxis - 1
+          }
+          markLineData.xAxis = leftAxis
           const {
-            channel: prevChannel,
-            energy: prevEnergy,
-            counts: prevCounts,
-          } = this.getEnergyAndCountsByXAxis(markLineXAxis - 1)
-          this.setChartBottomTitle(prevChannel, prevEnergy, prevCounts)
-
-          this.getSelPosNuclide(prevChannel)
+            channel: leftChannel,
+            energy: leftEnergy,
+            counts: leftCounts,
+          } = this.getEnergyAndCountsByXAxis(leftAxis)
+          this.setChartBottomTitle(leftChannel, leftEnergy, leftCounts)
+          this.getSelPosNuclide(leftChannel)
           break
       }
     },
@@ -394,13 +409,7 @@ export default {
       this.option.xAxis.max = maxX
       this.option.yAxis.min = minY
       this.option.yAxis.max = maxY
-      if (this.isEnergy()) {
-        const channel1 = this.getChannelByEnergy(minX)
-        const channel2 = this.getChannelByEnergy(maxX)
-        this.setThumbnailChartRect(channel1, maxY, channel2, minY)
-      } else {
-        this.setThumbnailChartRect(minX, maxY, maxX, minY)
-      }
+      this.setThumbnailChartRect(minX, maxY, maxX, minY)
 
       const thumbnailChart = this.getThumbnailChart()
       const [, maxYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, minY]) // 方框的上下两条边的yAxis转为pix
@@ -664,14 +673,13 @@ export default {
       let energy = 0
       const value = params[0].value[0]
 
-      if (this.isEnergy()) {
+      if (this.isEnergy) {
         energy = value.toFixed(2)
-        channel = this.getChannelByEnergy(energy)
+        channel = this.getChannelByEnergy(value)
       } else {
-        const allPointList = this.energyData.all.pointlist
         channel = parseInt(value.toFixed())
-        energy = allPointList && allPointList[channel - 1]
-        energy = energy ? energy.x.toFixed(2) : undefined
+        energy = this.getEnergyByChannel(channel)
+        energy = energy ? energy.toFixed(2) : undefined
       }
 
       return `<div class="channel">Channel: ${channel}</div>
@@ -729,8 +737,18 @@ export default {
           }
 
           this.option.xAxis.name = value
+          if (this.isEnergy) {
+            this.option.xAxis.axisLabel.formatter = (value) => {
+              return value.toFixed(2)
+            }
+          } else {
+            this.option.xAxis.axisLabel.formatter = (value) => {
+              return value
+            }
+          }
 
           this.handleResetChart()
+          this.thumbnailOption.xAxis.min = this.xAxisMin
 
           this.redrawLineBySeriesName(
             'BaseLine',
@@ -812,7 +830,7 @@ export default {
     // 根据seriesName重绘线
     redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true, color) {
       if (isShow) {
-        const data = this.isEnergy() ? energyData : channelData
+        const data = this.isEnergy ? energyData : channelData
         this.setSeriesData(this.option.series, seriesName, this.transformPointListData(data.pointlist), color)
       } else {
         this.setSeriesData(this.option.series, seriesName, [])
@@ -822,7 +840,7 @@ export default {
     // 重绘控制点
     redrawCtrlPointBySeriesName() {
       const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
-      const data = this.isEnergy() ? this.energyData.baseLineCP : this.channelData.baseLineCP
+      const data = this.isEnergy ? this.energyData.baseLineCP : this.channelData.baseLineCP
       series.data = data.map(({ size, color, point: { x, y } }) => {
         return {
           value: [x, y],
@@ -847,7 +865,7 @@ export default {
     redrawPeakLine() {
       this.clearPeakLine()
 
-      const data = this.isEnergy() ? this.energyData.peakGroup : this.channelData.peakGroup
+      const data = this.isEnergy ? this.energyData.peakGroup : this.channelData.peakGroup
       const peakLines = []
       data.forEach((item, index) => {
         peakLines.push(
@@ -863,7 +881,7 @@ export default {
     // 重绘右上角的缩略图
     redrawThumbnailChart() {
       const series = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
-      const data = this.isEnergy() ? this.energyData.spectrumLine : this.channelData.spectrumLine
+      const data = this.isEnergy ? this.energyData.spectrumLine : this.channelData.spectrumLine
       series.data = this.transformPointListData(data.pointlist)
     },
 
@@ -875,7 +893,7 @@ export default {
       if (point) {
         const xAxis = point[0]
         const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
-        spectrumLineSeries.markLine.data[0].xAxis = parseInt(xAxis.toFixed())
+        spectrumLineSeries.markLine.data[0].xAxis = xAxis
 
         const { channel, energy, counts } = this.getEnergyAndCountsByXAxis(xAxis)
         this.setChartBottomTitle(channel, energy, counts)
@@ -888,7 +906,7 @@ export default {
     setChartBottomTitle(channel, energy, counts) {
       const { index, find } = findNearPeak(channel, this.peakList)
 
-      this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy || '0.00'}} {a|Counts:${
+      this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy.toFixed(2) || '0.00'}} {a|Counts:${
         counts || '0.0'
       }} {a|Significance:${find ? this.peakList[index].significance.toFixed(2) : '0.00'}}`
     },
@@ -896,19 +914,19 @@ export default {
     // 根据xAixs值找channel、energy和counts
     getEnergyAndCountsByXAxis(xAxis) {
       let channel, energy, counts
-      if (this.isEnergy()) {
+      if (this.isEnergy) {
         channel = this.getChannelByEnergy(xAxis)
-        energy = xAxis.toFixed(2)
-        counts = this.energyData.all.pointlist[channel - 1]
+        energy = xAxis
+        counts = this.energyData.all.pointlist[channel - 1].y
       } else {
-        channel = parseInt(xAxis.toFixed())
-        energy = this.energyData.all.pointlist && this.energyData.all.pointlist[channel - 1].x.toFixed(2)
-        counts = this.channelData.all.pointlist[channel - 1]
+        channel = Math.round(xAxis)
+        energy = this.getEnergyByChannel(channel)
+        counts = this.channelData.all.pointlist[channel - 1].y
       }
       return {
         channel,
         energy,
-        counts: counts.y,
+        counts,
       }
     },
 
@@ -961,7 +979,7 @@ export default {
     handleTogglePeak() {
       const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
       const xAxis = spectrumLineSeries.markLine.data[0].xAxis
-      const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
+      const channel = this.isEnergy ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
       const index = this.channelData.peakGroup.findIndex((peakItem) => {
         const allX = peakItem.pointlist.map((item) => item.x)
         const max = Math.max(...allX)
@@ -1016,32 +1034,83 @@ export default {
       const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
       const prevAxis = spectrumLineSeries.markLine.data[0].xAxis
 
-      // 获取每一段 Channel 中的最大值
-      const maxXAxises = this.channelData.peakGroup.map((item) => {
-        const allY = item.pointlist.map((item) => item.y)
-        const max = item.pointlist.find((point) => point.y == Math.max(...allY))
-        return max.x
-      })
+      const { channel: prevChannel } = this.getEnergyAndCountsByXAxis(prevAxis)
+
+      let i,
+        size = this.peakList.length
 
-      let find = null
       if (direction == 'right') {
-        // 找到第一个比prevAxis大的xAxis
-        find = maxXAxises.find((xAxis) => xAxis > prevAxis)
-        if (find) {
-          spectrumLineSeries.markLine.data[0].xAxis = find
+        for (i = 0; i < size; i++) {
+          const centroid = Math.round(this.peakList[i].peakCentroid)
+          if (centroid > prevChannel) {
+            const energy = this.getEnergyByChannel(centroid)
+            this.setMarkLineXAxis(this.isEnergy ? energy : centroid, i)
+            this.getSelPosNuclide(centroid)
+            const { counts } = this.getEnergyAndCountsByXAxis(this.isEnergy ? energy : centroid)
+            this.setChartBottomTitle(centroid, energy, counts)
+            return
+          }
         }
       } else if (direction == 'left') {
-        // 找到第一个比prevAxis小的xAxis
-        find = maxXAxises.reverse().find((xAxis) => xAxis < prevAxis)
-        if (find) {
-          spectrumLineSeries.markLine.data[0].xAxis = find
+        for (i = size - 1; i >= 0; i--) {
+          const centroid = Math.round(this.peakList[i].peakCentroid)
+          if (Math.round(centroid) < prevChannel) {
+            const energy = this.getEnergyByChannel(centroid)
+            this.setMarkLineXAxis(this.isEnergy ? energy : centroid, i)
+            this.getSelPosNuclide(centroid)
+            const { counts } = this.getEnergyAndCountsByXAxis(this.isEnergy ? energy : centroid)
+            this.setChartBottomTitle(centroid, energy, counts)
+            return
+          }
         }
       }
+    },
 
-      if (find) {
-        this.getSelPosNuclide(find)
-        const { channel, energy, counts } = this.getEnergyAndCountsByXAxis(find)
-        this.setChartBottomTitle(channel, energy, counts)
+    // 设置红色标记线的位置
+    setMarkLineXAxis(xAxis, index) {
+      const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
+      const markLineOption = spectrumLineSeries.markLine.data[0]
+      markLineOption.xAxis = xAxis
+
+      const {
+        xAxis: { max: xAxisMax, min: xAxisMin },
+        yAxis: { max: yAxisMax, min: yAxisMin },
+      } = this.option
+
+      // 如果不在范围内
+      if (xAxis >= xAxisMax || xAxis <= xAxisMin) {
+        let nextMaxX = xAxisMax,
+          nextMinX = xAxisMin,
+          nextMaxY = yAxisMax,
+          nextMinY = yAxisMin
+
+        const halfDiff = (xAxisMax - xAxisMin) / 2
+
+        const dataSource = this.isEnergy ? this.energyData : this.channelData
+        const lastChannel = dataSource.spectrumLine.pointlist[dataSource.spectrumLine.pointlist.length - 1].x
+
+        const tmpNextMaxX = xAxis + halfDiff
+        const tmpNextMinX = xAxis - halfDiff
+
+        nextMaxX = tmpNextMaxX > lastChannel ? lastChannel : tmpNextMaxX
+        nextMinX = tmpNextMinX < this.xAxisMin ? this.xAxisMin : tmpNextMinX
+
+        const peak = this.channelData.peakGroup[index]
+        const peakCountMax = Math.max(...peak.pointlist.map(({ y }) => y))
+        const peakCountMin = Math.min(...peak.pointlist.map(({ y }) => y))
+
+        const chart = this.$refs.thumbnailChartRef.getChartInstance()
+        const yDataMax = getAxisMax(chart, 'yAxis')
+
+        if (yAxisMax !== 'dataMax' && peakCountMin >= yAxisMax) {
+          nextMaxY = yDataMax
+        }
+
+        if (peakCountMax <= yAxisMin) {
+          nextMinY = 1
+        }
+
+        this.setRectRange(nextMinX, nextMaxX, nextMinY, nextMaxY)
       }
     },
 
@@ -1118,13 +1187,7 @@ export default {
         this.option.yAxis.min = y1
         this.option.yAxis.max = y2
 
-        if (this.isEnergy()) {
-          const channel1 = this.getChannelByEnergy(x1)
-          const channel2 = this.getChannelByEnergy(x2)
-          this.setThumbnailChartRect(channel1, y2, channel2, y1)
-        } else {
-          this.setThumbnailChartRect(x1, y2, x2, y1)
-        }
+        this.setThumbnailChartRect(x1, y2, x2, y1)
 
         const thumbnailChart = this.getThumbnailChart()
         const [, maxYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, y1]) // 方框的上下两条边的yAxis转为pix
@@ -1251,31 +1314,29 @@ export default {
 
         const xAxisMax = getAxisMax(thumbnailChart, 'xAxis')
 
-        const xAxisLimit = rangeNumber(1 + halfWidth, xAxisMax - halfWidth)
+        const xAxisLimit = rangeNumber(add(this.xAxisMin, halfWidth), subtract(xAxisMax, halfWidth))
 
         const halfHeightPixel = this.halfHeightPixel
-        const yAxisLimit = rangeNumber(maxYAxisPixel + halfHeightPixel, minYAxisPixel - halfHeightPixel)
+        const yAxisLimit = rangeNumber(add(maxYAxisPixel, halfHeightPixel), subtract(minYAxisPixel, halfHeightPixel))
 
         xAxis = xAxisLimit(xAxis)
 
         let { pixY: yAxisPixel } = this.convertToPixel(thumbnailChart, 0, yAxis)
         yAxisPixel = yAxisLimit(yAxisPixel)
 
-        const minYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel + halfHeightPixel])[1] // 再把y轴最小值从pix转为yAxis
-        const maxYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel - halfHeightPixel])[1]
+        const minYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, add(yAxisPixel, halfHeightPixel)])[1] // 再把y轴最小值从pix转为yAxis
+        const maxYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [
+          0,
+          subtract(yAxisPixel, halfHeightPixel),
+        ])[1]
 
-        this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis)
+        const nextXAxisMin = subtract(xAxis, halfWidth)
+        const nextXAxisMax = add(xAxis, halfWidth)
 
-        if (this.isEnergy()) {
-          const x1 = parseInt(this.energyData.spectrumLine.pointlist[xAxis - halfWidth].x)
-          const x2 = parseInt(this.energyData.spectrumLine.pointlist[xAxis + halfWidth].x)
+        this.setThumbnailChartRect(nextXAxisMin, maxYAxis, nextXAxisMax, minYAxis)
 
-          this.option.xAxis.min = x1
-          this.option.xAxis.max = x2
-        } else {
-          this.option.xAxis.min = xAxis - halfWidth
-          this.option.xAxis.max = xAxis + halfWidth
-        }
+        this.option.xAxis.min = nextXAxisMin
+        this.option.xAxis.max = nextXAxisMax
 
         this.option.yAxis.min = minYAxis
         this.option.yAxis.max = maxYAxis
@@ -1290,7 +1351,7 @@ export default {
      * 重置图表
      */
     handleResetChart() {
-      this.option.xAxis.min = 1
+      this.option.xAxis.min = this.xAxisMin
       this.option.xAxis.max = 'dataMax'
       this.option.yAxis.min = 1
       this.option.yAxis.max = 'dataMax'
@@ -1524,6 +1585,15 @@ export default {
       return channel
     },
 
+    /**
+     * 根据channel获取energy
+     * @param {number} channel
+     */
+    getEnergyByChannel(channel) {
+      const energyItem = this.energyData.all.pointlist ? this.energyData.all.pointlist[channel - 1] : {}
+      return energyItem ? energyItem.x : 0
+    },
+
     /**
      * 重置页面信息
      */
@@ -1614,10 +1684,6 @@ export default {
         })
     },
 
-    isEnergy() {
-      return this.graphAssistance.axisType == 'Energy'
-    },
-
     isScatter() {
       return this.graphAssistance.spectrumType == 'Scatter'
     },
@@ -1697,6 +1763,17 @@ export default {
       immediate: true,
     },
   },
+  computed: {
+    // 是不是Energy
+    isEnergy() {
+      return this.graphAssistance.axisType == 'Energy'
+    },
+
+    // 获取x轴最小值
+    xAxisMin() {
+      return this.isEnergy ? 0.01 : 1
+    },
+  },
 }
 </script>
 
diff --git a/src/views/spectrumAnalysis/settings.js b/src/views/spectrumAnalysis/settings.js
index b9e3a5c..7f51687 100644
--- a/src/views/spectrumAnalysis/settings.js
+++ b/src/views/spectrumAnalysis/settings.js
@@ -63,16 +63,14 @@ export const GammaOptions = {
       axisLabel: {
         textStyle: {
           color: '#ade6ee'
+        },
+        formatter: value => {
+          return parseInt(value)
         }
       },
       min: 1,
       max: 'dataMax',
-      animation: false,
-      axisLabel: {
-        formatter: value => {
-          return parseInt(value)
-        }
-      }
+      animation: false
     },
     yAxis: {
       name: 'Counts',
@@ -96,16 +94,14 @@ export const GammaOptions = {
       axisLabel: {
         textStyle: {
           color: '#ade6ee'
+        },
+        formatter: value => {
+          return value.toFixed(1)
         }
       },
       min: 1,
       max: 'dataMax',
-      animation: false,
-      axisLabel: {
-        formatter: value => {
-          return value.toFixed(1)
-        }
-      }
+      animation: false
     },
     series: [spectrumSeries, baseLineSeries, lcLineSeries, scacLineSeries, baseLineCtrlPoint, compareLineSeries],
     brush: {}