fix: 优化gamma主图表逻辑

src/utils/chartHelper.js

@@ -99,6 +99,7 @@ export function findSeriesByName(series, seriesName) {
  * 限定数字在一定范围
  * @param {Number} min
  * @param {Number} max
+ * @returns {(num: number) => number }
  */
 export function rangeNumber(min, max) {
   return num => {

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -119,154 +119,7 @@ import NuclideReviewModal from './components/Modals/AnalyzeInteractiveToolModal/
 import CompareFileListModal from './components/Modals/CompareFileListModal.vue'
 import ReProcessingModal from './components/Modals/ReProcessingModal/index.vue'
 
-// 初始配置
+import { GammaOptions, graphAssistance } from './settings'
-const initialOption = {
-  grid: {
-    top: 40,
-    left: 60,
-    right: 50,
-    containLabel: true,
-  },
-  title: {
-    text: '',
-    left: 'center',
-    bottom: 10,
-    textStyle: {
-      color: '#8FD4F8',
-      rich: {
-        a: {
-          padding: [0, 20, 0, 0],
-          fontSize: 16,
-        },
-      },
-    },
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      lineStyle: {
-        color: '#3CAEBB',
-        width: 1,
-        type: 'solid',
-      },
-    },
-    formatter: undefined,
-    className: 'figure-chart-option-tooltip',
-  },
-  xAxis: {
-    name: 'Channel',
-    nameTextStyle: {
-      color: '#8FD4F8',
-      fontSize: 16,
-      align: 'right',
-      verticalAlign: 'top',
-      padding: [30, 0, 0, 0],
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#ade6ee',
-      },
-    },
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      textStyle: {
-        color: '#ade6ee',
-      },
-    },
-    min: 1,
-    max: 'dataMax',
-    animation: false,
-    axisLabel: {
-      formatter: (value) => {
-        return parseInt(value)
-      },
-    },
-  },
-  yAxis: {
-    name: 'Counts',
-    type: 'value',
-    nameTextStyle: {
-      color: '#8FD4F8',
-      fontSize: 16,
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: '#ade6ee',
-      },
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: 'rgba(173, 230, 238, .2)',
-      },
-    },
-    axisLabel: {
-      textStyle: {
-        color: '#ade6ee',
-      },
-    },
-    min: 1,
-    max: 'dataMax',
-    animation: false,
-    axisLabel: {
-      formatter: (value) => {
-        return value.toFixed(1)
-      },
-    },
-  },
-  series: [],
-  brush: {},
-}
-
-// 缩略图配置
-const thumbnailOption = {
-  grid: {
-    top: 0,
-    left: 5,
-    right: 5,
-    bottom: 0,
-  },
-  xAxis: {
-    type: 'category',
-    axisLine: {
-      show: false,
-    },
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      show: false,
-    },
-    min: 1,
-    max: 'dataMax',
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: {
-      show: false,
-    },
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      show: false,
-    },
-    min: 1,
-    max: 'dataMax',
-  },
-  series: [],
-}
-
-const graphAssistance = {
-  axisType: 'Channel',
-  spectrumType: 'Lines',
-  Baseline: true,
-  SCAC: true,
-  Lc: true,
-}
 
 export default {
   props: {
@@ -290,19 +143,35 @@ export default {
     return {
       isLoading: false,
       isLoadingNuclide: false,
-      option: cloneDeep(initialOption),
+      option: cloneDeep(GammaOptions.option),
       opts: {
         notMerge: false,
       },
-      thumbnailOption: cloneDeep(thumbnailOption),
+      thumbnailOption: cloneDeep(GammaOptions.thumbnailOption),
 
       detailedInfomation: [],
       qcFlags: [],
       graphAssistance: cloneDeep(graphAssistance),
       nuclideLibraryVisible: false,
 
-      channelPeakGroup: [],
+      channelData: {
-      energyPeakGroup: [],
+        peakGroup: [],
+        spectrumLine: null,
+        baseLine: null,
+        lcLine: null,
+        scacLine: null,
+        all: null,
+        baseLineCP: [],
+      },
+      energyData: {
+        peakGroup: [],
+        spectrumLine: null,
+        baseLine: null,
+        lcLine: null,
+        scacLine: null,
+        all: null,
+        baseLineCP: [],
+      },
 
       nuclideLibraryList: [], // 当前鼠标点击选中的channel
       peakInfomationTooltip: {
@@ -326,6 +195,8 @@ export default {
   },
   created() {
     this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
+    this.option.tooltip.formatter = this.tooltipFormatter
+
     this.$bus.$on('colorChange', this.handleColorChange)
     this.$bus.$on('gammaRefresh', this.handleRefresh)
     this.$bus.$on('accept', this.handleAccept)
@@ -339,6 +210,7 @@ export default {
     this.option.brush = { toolbox: [] }
   },
   methods: {
+    // 获取样品详情
     async getSampleDetail() {
       const { dbName, sampleId } = this.sample
       try {
@@ -348,13 +220,7 @@ export default {
 
         // const { success, result, message } = Response
 
-        if (this._cancelToken && typeof this._cancelToken == 'function') {
+        const cancelToken = this.cancelLastRequest()
-          this._cancelToken()
-        }
-
-        const cancelToken = new axios.CancelToken((c) => {
-          this._cancelToken = c
-        })
 
         const { success, result, message } = await getAction(
           '/gamma/gammaByDB',
@@ -381,9 +247,15 @@ export default {
         this.isLoading = true
         this.handleResetState()
         // const { success, result, message } = Response
-        const { success, result, message } = await getAction('/gamma/gammaByFile', {
+        const cancelToken = this.cancelLastRequest()
-          fileName,
+
-        })
+        const { success, result, message } = await getAction(
+          '/gamma/gammaByFile',
+          {
+            fileName,
+          },
+          cancelToken
+        )
         console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.dataProsess(result)
@@ -395,6 +267,16 @@ export default {
       }
     },
 
+    cancelLastRequest() {
+      if (this._cancelToken && typeof this._cancelToken == 'function') {
+        this._cancelToken()
+      }
+
+      return new axios.CancelToken((c) => {
+        this._cancelToken = c
+      })
+    },
+
     dataProsess(result) {
       this.isLoading = false
 
@@ -419,44 +301,40 @@ export default {
       this.detailedInfomation = DetailedInformation
       this.qcFlags = QCFlag
 
-      const channelPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'channel')
+      const channelPeakGroup = this.getLineData(allData, 'Peak', 'channel', true)
-      const energyPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'energy')
+      const energyPeakGroup = this.getLineData(allData, 'Peak', 'energy', true)
 
-      const channelBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'channel') || {}
+      const channelBaseLine = this.getLineData(allData, 'BaseLine', 'channel')
-      const energyBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'energy')
+      const energyBaseLine = this.getLineData(allData, 'BaseLine', 'energy')
 
-      const channelLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'channel') || {}
+      const channelLcLine = this.getLineData(allData, 'Lc', 'channel')
-      const energyLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'energy')
+      const energyLcLine = this.getLineData(allData, 'Lc', 'energy')
 
-      const channelScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'channel') || {}
+      const channelScacLine = this.getLineData(allData, 'Scac', 'channel')
-      const energyScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'energy')
+      const energyScacLine = this.getLineData(allData, 'Scac', 'energy')
 
-      this.allEnergy = allData.find((item) => item.name == 'Energy' && item.group == 'energy') || {}
+      const allChannel = this.getLineData(allData, 'Count', 'channel')
-      this.allChannel = allData.find((item) => item.name == 'Count' && item.group == 'channel')
+      const allEnergy = this.getLineData(allData, 'Energy', 'energy')
 
-      // 保存Peak Line
+      this.channelData = {
-      this.channelPeakGroup = channelPeakGroup
+        peakGroup: channelPeakGroup,
-      this.energyPeakGroup = energyPeakGroup
+        spectrumLine: shadowChannelChart,
+        baseLine: channelBaseLine,
+        lcLine: channelLcLine,
+        scacLine: channelScacLine,
+        all: allChannel,
+        baseLineCP: shapeChannelData,
+      }
 
-      // 保存 Spectrum Line
+      this.energyData = {
-      this.shadowChannelChart = shadowChannelChart
+        peakGroup: energyPeakGroup,
-      this.shadowEnergyChart = shadowEnergyChart
+        spectrumLine: shadowEnergyChart,
-
+        baseLine: energyBaseLine,
-      // 保存基线
+        lcLine: energyLcLine,
-      this.channelBaseLine = channelBaseLine
+        scacLine: energyScacLine,
-      this.energyBaseLine = energyBaseLine
+        all: allEnergy,
-
+        baseLineCP: shapeEnergyData,
-      // 保存Lc
+      }
-      this.channelLcLine = channelLcLine
-      this.energyLcLine = energyLcLine
-
-      // 保存Scac
-      this.channelScacLine = channelScacLine
-      this.energyScacLine = energyScacLine
-
-      // 保存 基线控制点
-      this.shapeChannelData = shapeChannelData
-      this.shapeEnergyData = shapeEnergyData
 
       this.resetThumbnailChartDataMax()
       const series = []
@@ -465,7 +343,7 @@ export default {
       series.push(
         buildLineSeries(
           'Spectrum',
-          shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
+          this.transformPointListData(shadowChannelChart.pointlist),
           shadowChannelChart.color,
           {
             symbolSize: 2,
@@ -485,65 +363,33 @@ export default {
         )
       )
 
-      // 右上角缩略图推入Spectrum Line
+      // 右上角缩略图设置Spectrum Line 数据
-      this.thumbnailOption.series.push(
+      this.setSeriesData(
-        buildLineSeries(
+        this.thumbnailOption.series,
-          'Spectrum',
+        'Spectrum',
-          shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
+        this.transformPointListData(shadowChannelChart.pointlist),
-          shadowChannelChart.color,
+        shadowChannelChart.color
-          {
-            silent: true,
-            markLine: {
-              silent: true,
-              symbol: 'none',
-              label: {
-                show: false,
-              },
-              lineStyle: {
-                type: 'solid',
-                color: '#1397a3',
-                width: 1,
-              },
-              data: [],
-            },
-          }
-        )
       )
 
       // 推入BaseLine
       series.push(
-        buildLineSeries(
+        buildLineSeries('BaseLine', this.transformPointListData(channelBaseLine.pointlist), channelBaseLine.color, {
-          'BaseLine',
+          zlevel: 2,
-          channelBaseLine.pointlist && channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
+        })
-          channelBaseLine.color,
-          {
-            zlevel: 2,
-          }
-        )
       )
 
       // 推入LcLine线
       series.push(
-        buildLineSeries(
+        buildLineSeries('LcLine', this.transformPointListData(channelLcLine.pointlist), channelLcLine.color, {
-          'LcLine',
+          zlevel: 3,
-          channelLcLine.pointlist && channelLcLine.pointlist.map(({ x, y }) => [x, y]),
+        })
-          channelLcLine.color,
-          {
-            zlevel: 3,
-          }
-        )
       )
 
       // 推入Scac线
       series.push(
-        buildLineSeries(
+        buildLineSeries('ScacLine', this.transformPointListData(channelScacLine.pointlist), channelScacLine.color, {
-          'ScacLine',
+          zlevel: 4,
-          channelScacLine.pointlist && channelScacLine.pointlist.map(({ x, y }) => [x, y]),
+        })
-          channelScacLine.color,
-          {
-            zlevel: 4,
-          }
-        )
       )
 
       // 推入基线控制点
@@ -571,14 +417,9 @@ export default {
       const peakLines = []
       channelPeakGroup.forEach((item, index) => {
         peakLines.push(
-          buildLineSeries(
+          buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
-            `Peak_${index}`,
+            zlevel: 6,
-            item.pointlist.map(({ x, y }) => [x, y]),
+          })
-            item.color,
-            {
-              zlevel: 6,
-            }
-          )
         )
       })
       series.push(...peakLines)
@@ -591,25 +432,26 @@ export default {
       )
 
       this.option.series = series
-
-      this.option.tooltip.formatter = this.tooltipFormatter
     },
 
+    // chart 的 tooltip
     tooltipFormatter(params) {
-      if (this.isEnergy()) {
+      let channel = 0
-        const energy = params[0].value[0]
+      let energy = 0
-        const channel = this.getChannelByEnergy(energy)
+      const value = params[0].value[0]
 
-        return `<div class="channel">Channel: ${channel}</div>
+      if (this.isEnergy()) {
-              <div class="energy">Energy: ${energy.toFixed(2)}</div>`
+        energy = value.toFixed(2)
+        channel = this.getChannelByEnergy(energy)
       } else {
-        const channel = parseInt(params[0].value[0].toFixed())
+        const allPointList = this.energyData.all.pointlist
-        const energy = this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1]
+        channel = parseInt(value.toFixed())
-        return energy
+        energy = allPointList && allPointList[channel - 1]
-          ? `<div class="channel">Channel: ${channel}</div>
+        energy = energy ? energy.x.toFixed(2) : undefined
-              <div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
-          : undefined
       }
+
+      return `<div class="channel">Channel: ${channel}</div>
+              <div class="energy">Energy: ${energy}</div>`
     },
 
     // Graph Assistance 操作
@@ -640,19 +482,24 @@ export default {
 
             this.redrawLineBySeriesName(
               'BaseLine',
-              this.energyBaseLine,
+              this.energyData.baseLine,
-              this.channelBaseLine,
+              this.channelData.baseLine,
               this.graphAssistance.Baseline
             )
-            this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, this.graphAssistance.Lc)
+            this.redrawLineBySeriesName(
+              'LcLine',
+              this.energyData.lcLine,
+              this.channelData.lcLine,
+              this.graphAssistance.Lc
+            )
             this.redrawLineBySeriesName(
               'ScacLine',
-              this.energyScacLine,
+              this.energyData.scacLine,
-              this.channelScacLine,
+              this.channelData.scacLine,
               this.graphAssistance.SCAC
             )
 
-            this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
+            this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine)
             this.redrawCtrlPointBySeriesName()
             this.redrawPeakLine()
 
@@ -674,7 +521,7 @@ export default {
             compareLineSeries.type = 'line'
             compareLineSeries.symbol = 'none'
 
-            this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
+            this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine)
 
             if (this.channelCompareLine) {
               this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
@@ -712,13 +559,13 @@ export default {
             }
             break
           case 'Baseline':
-            this.redrawLineBySeriesName('BaseLine', this.energyBaseLine, this.channelBaseLine, value)
+            this.redrawLineBySeriesName('BaseLine', this.energyData.baseLine, this.channelData.baseLine, value)
             break
           case 'Lc':
-            this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, value)
+            this.redrawLineBySeriesName('LcLine', this.energyData.lcLine, this.channelData.lcLine, value)
             break
           case 'SCAC':
-            this.redrawLineBySeriesName('ScacLine', this.energyScacLine, this.channelScacLine, value)
+            this.redrawLineBySeriesName('ScacLine', this.energyData.scacLine, this.channelData.scacLine, value)
             break
         }
       }
@@ -730,22 +577,18 @@ export default {
 
     // 根据seriesName重绘线
     redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true, color) {
-      const series = findSeriesByName(this.option.series, seriesName)
       if (isShow) {
         const data = this.isEnergy() ? energyData : channelData
-        series.data = data.pointlist.map(({ x, y }) => [x, y])
+        this.setSeriesData(this.option.series, seriesName, this.transformPointListData(data.pointlist), color)
       } else {
-        series.data = []
+        this.setSeriesData(this.option.series, seriesName, [])
-      }
-      if (color) {
-        series.itemStyle.color = color
       }
     },
 
     // 重绘控制点
     redrawCtrlPointBySeriesName() {
       const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
-      const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData
+      const data = this.isEnergy() ? this.energyData.baseLineCP : this.channelData.baseLineCP
       series.data = data.map(({ size, color, point: { x, y } }) => {
         return {
           value: [x, y],
@@ -764,18 +607,13 @@ export default {
         return !item.name.includes('Peak_')
       })
 
-      const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
+      const data = this.isEnergy() ? this.energyData.peakGroup : this.channelData.peakGroup
       const peakLines = []
       data.forEach((item, index) => {
         peakLines.push(
-          buildLineSeries(
+          buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
-            `Peak_${index}`,
+            zlevel: 6,
-            item.pointlist.map(({ x, y }) => [x, y]),
+          })
-            item.color,
-            {
-              zlevel: 6,
-            }
-          )
         )
       })
 
@@ -785,8 +623,8 @@ export default {
     // 重绘右上角的缩略图
     redrawThumbnailChart() {
       const series = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
-      const data = this.isEnergy() ? this.shadowEnergyChart : this.shadowChannelChart
+      const data = this.isEnergy() ? this.energyData.spectrumLine : this.channelData.spectrumLine
-      series.data = data.pointlist.map(({ x, y }) => [x, y])
+      series.data = this.transformPointListData(data.pointlist)
     },
 
     // 点击图表，设置红线
@@ -801,8 +639,10 @@ export default {
         const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
         const energy = this.isEnergy()
           ? xAxis.toFixed(2)
-          : this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1].x.toFixed(2)
+          : this.energyData.all.pointlist && this.energyData.all.pointlist[channel - 1].x.toFixed(2)
-        const counts = this.isEnergy() ? this.allEnergy.pointlist[channel - 1] : this.allChannel.pointlist[channel - 1]
+        const counts = this.isEnergy()
+          ? this.energyData.all.pointlist[channel - 1]
+          : this.channelData.all.pointlist[channel - 1]
         this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts.y}} {a|Detectability:0}`
 
         this.getSelPosNuclide(channel)
@@ -864,7 +704,7 @@ export default {
       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 index = this.channelPeakGroup.findIndex((peakItem) => {
+      const index = this.channelData.peakGroup.findIndex((peakItem) => {
         const allX = peakItem.pointlist.map((item) => item.x)
         const max = Math.max(...allX)
         const min = Math.min(...allX)
@@ -887,7 +727,7 @@ export default {
         })
         if (success) {
           const html = result.replaceAll('\n', '<br>')
-          const currPeak = this.channelPeakGroup[index]
+          const currPeak = this.channelData.peakGroup[index]
           const { x, y } = currPeak.pointlist.reduce((prev, curr) => {
             return prev && prev.y > curr.y ? prev : curr
           })
@@ -919,7 +759,7 @@ export default {
       const prevAxis = spectrumLineSeries.markLine.data[0].xAxis
 
       // 获取每一段 Channel 中的最大值
-      const maxXAxises = this.channelPeakGroup.map((item) => {
+      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
@@ -978,7 +818,6 @@ export default {
       // 改为不可刷选状态
       chart.dispatchAction({
         type: 'takeGlobalCursor',
-        brushOption: false
       })
     },
 
@@ -1058,16 +897,16 @@ export default {
       const y2 = getAxisMax(chart, 'yAxis')
 
       const channelSpectrumData = {
-        ...this.shadowChannelChart,
+        ...this.channelData.spectrumLine,
         pointlist: isReset
-          ? this.pointlistLimitY(this.shadowChannelChart.pointlist)
+          ? this.pointlistLimitY(this.channelData.spectrumLine.pointlist)
-          : this.pointlistLimit(this.shadowChannelChart.pointlist, x1, x2, y1, y2),
+          : this.pointlistLimit(this.channelData.spectrumLine.pointlist, x1, x2, y1, y2),
       }
       const energySpectrumData = {
-        ...this.shadowEnergyChart,
+        ...this.energyData.spectrumLine,
         pointlist: isReset
-          ? this.pointlistLimitY(this.shadowEnergyChart.pointlist)
+          ? this.pointlistLimitY(this.energyData.spectrumLine.pointlist)
-          : this.pointlistLimit(this.shadowEnergyChart.pointlist, x1, x2, y1, y2),
+          : this.pointlistLimit(this.energyData.spectrumLine.pointlist, x1, x2, y1, y2),
       }
       this.redrawLineBySeriesName('Spectrum', energySpectrumData, channelSpectrumData)
 
@@ -1171,8 +1010,8 @@ export default {
         this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis)
 
         if (this.isEnergy()) {
-          const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
+          const x1 = parseInt(this.energyData.spectrumLine.pointlist[xAxis - halfWidth].x)
-          const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
+          const x2 = parseInt(this.energyData.spectrumLine.pointlist[xAxis + halfWidth].x)
 
           this.option.xAxis.min = x1
           this.option.xAxis.max = x2
@@ -1190,7 +1029,9 @@ export default {
       }
     },
 
-    // 重置
+    /**
+     * 重置图表
+     */
     handleResetChart() {
       this.option.xAxis.min = 1
       this.option.xAxis.max = 'dataMax'
@@ -1291,12 +1132,16 @@ export default {
       // this.reprocessingModalVisible = true
     },
 
-    // 重置缩略图表y轴最大值
+    /**
+     * 重置缩略图表y轴最大值
+     */
     resetThumbnailChartDataMax() {
       this.thumbnailOption.yAxis.max = 'dataMax'
     },
 
-    // 重置图表配置
+    /**
+     * 重置图表配置
+     */
     resetChartOpts() {
       this.opts.notMerge = false
       this.option.brush = { toolbox: [] }
@@ -1318,12 +1163,17 @@ export default {
       ]
     },
 
+    /**
+     * 根据energy获取channel
+     * @param {number} energy 
+     */
     getChannelByEnergy(energy) {
       let channel = 0
-      for (let index = 1; index < this.allEnergy.pointlist.length; index++) {
+      const pointlist = this.energyData.all.pointlist
-        const currEnergy = this.allEnergy.pointlist[index].x
+      for (let index = 1; index < pointlist.length; index++) {
+        const currEnergy = pointlist[index].x
         if (currEnergy >= energy) {
-          const prevEnergy = this.allEnergy.pointlist[index - 1].x
+          const prevEnergy = pointlist[index - 1].x
           if (currEnergy - energy > energy - prevEnergy.x) {
             channel = index
           } else {
@@ -1335,13 +1185,16 @@ export default {
       return channel
     },
 
-    // 重置页面信息
+    /**
+     * 重置页面信息
+     */
     handleResetState() {
+      this.handleResetChart()
+
       this.selectedChannel = -1
       this.nuclideLibraryList = []
       this.closePeakInfomationTooltip()
       this.option.series = []
-      this.thumbnailOption.series = []
       this.option.xAxis.name = 'Channel'
       this.option.yAxis.type = 'value'
 
@@ -1352,14 +1205,17 @@ export default {
         spectrumLineSeries.markLine.lineStyle.width = 2
       }
 
-      if (this.thumbnailOption.series.length) {
+      const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
-        const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
+      thumbnailSpectrumLineSeries.type = 'line'
-        thumbnailSpectrumLineSeries.type = 'line'
+      thumbnailSpectrumLineSeries.symbol = 'none'
-        thumbnailSpectrumLineSeries.symbol = 'none'
+
-      }
       this.graphAssistance = cloneDeep(graphAssistance)
     },
 
+    /**
+     * 颜色改变
+     * @param {*} colorConfig 
+     */
     handleColorChange(colorConfig) {
       // 如果还没加载完，加载新的
       if (this.isLoading) {
@@ -1376,22 +1232,22 @@ export default {
       const { Color_Spec, Color_Peak, Color_Lc, Color_Base, Color_Scac, Color_Compare, Color_Strip, Color_Fitbase } =
         colorConfig
 
-      this.shadowChannelChart.color = Color_Spec
+      this.channelData.spectrumLine.color = Color_Spec
-      this.shadowEnergyChart.color = Color_Spec
+      this.energyData.spectrumLine.color = Color_Spec
 
-      for (let i = 0; i < this.channelPeakGroup.length; i++) {
+      for (let i = 0; i < this.channelData.peakGroup.length; i++) {
-        this.channelPeakGroup[i].color = Color_Peak
+        this.channelData.peakGroup[i].color = Color_Peak
-        this.energyPeakGroup[i].color = Color_Peak
+        this.energyData.peakGroup[i].color = Color_Peak
       }
 
-      this.channelLcLine.color = Color_Lc
+      this.channelData.lcLine.color = Color_Lc
-      this.energyLcLine.color = Color_Lc
+      this.energyData.lcLine.color = Color_Lc
 
-      this.channelBaseLine.color = Color_Base
+      this.channelData.baseLine.color = Color_Base
-      this.energyBaseLine.color = Color_Base
+      this.energyData.baseLine.color = Color_Base
 
-      this.channelScacLine.color = Color_Scac
+      this.channelData.scacLine.color = Color_Scac
-      this.energyScacLine.color = Color_Scac
+      this.energyData.scacLine.color = Color_Scac
 
       if (this.channelCompareLine) {
         this.channelCompareLine.color = Color_Compare
@@ -1409,7 +1265,11 @@ export default {
       thumbnailChartSeries.itemStyle.color = Color_Spec
     },
 
-    // 根据series名修改颜色
+    /**
+     * 根据series名修改颜色
+     * @param {*} seriesName 
+     * @param {*} color 
+     */
     changeColorBySeriesName(seriesName, color) {
       const series = findSeriesByName(this.option.series, seriesName)
       series.itemStyle.color = color
@@ -1439,6 +1299,38 @@ export default {
     getThumbnailChart() {
       return this.$refs.thumbnailChartRef.getChartInstance()
     },
+
+    /**
+     * 设置图表数据和颜色
+     */
+    setSeriesData(series, seriesName, data, color) {
+      const find = findSeriesByName(series, seriesName)
+      find.data = data
+      if (color) {
+        find.itemStyle.color = color
+      }
+    },
+
+    /**
+     * 转换pointlist类型数据到series的data可用的数据
+     */
+    transformPointListData(pointlist) {
+      if (!pointlist) {
+        return []
+      }
+      return pointlist.map(({ x, y }) => [x, y])
+    },
+
+    /**
+     * 在返回的allData中查找指定的数据
+     * @param {Array} allData
+     * @param {*} name
+     * @param {*} group
+     */
+    getLineData(allData, name, group, isList = false) {
+      const arrFunc = isList ? Array.prototype.filter : Array.prototype.find
+      return arrFunc.call(allData, (item) => item.name == name && item.group == group) || {}
+    },
   },
   watch: {
     sample: {

src/views/spectrumAnalysis/index.vue

@@ -432,7 +432,7 @@ export default {
       })
       arr.forEach((item) => {
         item.dbName = ''
-        item.sampleId = ''
+        item.sampleId = null
         item.inputFileName = item.sampleFileName
         item.sampleType = item.sampleSystemType
       })

src/views/spectrumAnalysis/settings.js

@@ -0,0 +1,167 @@
+import { buildLineSeries } from "@/utils/chartHelper"
+
+export const GammaOptions = {
+  option: {
+    grid: {
+      top: 40,
+      left: 60,
+      right: 50,
+      containLabel: true
+    },
+    title: {
+      text: '',
+      left: 'center',
+      bottom: 10,
+      textStyle: {
+        color: '#8FD4F8',
+        rich: {
+          a: {
+            padding: [0, 20, 0, 0],
+            fontSize: 16
+          }
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#3CAEBB',
+          width: 1,
+          type: 'solid'
+        }
+      },
+      formatter: undefined,
+      className: 'figure-chart-option-tooltip'
+    },
+    xAxis: {
+      name: 'Channel',
+      nameTextStyle: {
+        color: '#8FD4F8',
+        fontSize: 16,
+        align: 'right',
+        verticalAlign: 'top',
+        padding: [30, 0, 0, 0]
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ade6ee'
+        }
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#ade6ee'
+        }
+      },
+      min: 1,
+      max: 'dataMax',
+      animation: false,
+      axisLabel: {
+        formatter: value => {
+          return parseInt(value)
+        }
+      }
+    },
+    yAxis: {
+      name: 'Counts',
+      type: 'value',
+      nameTextStyle: {
+        color: '#8FD4F8',
+        fontSize: 16
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ade6ee'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(173, 230, 238, .2)'
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#ade6ee'
+        }
+      },
+      min: 1,
+      max: 'dataMax',
+      animation: false,
+      axisLabel: {
+        formatter: value => {
+          return value.toFixed(1)
+        }
+      }
+    },
+    series: [],
+    brush: {}
+  },
+  // 缩略图配置
+  thumbnailOption: {
+    grid: {
+      top: 0,
+      left: 5,
+      right: 5,
+      bottom: 0
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      min: 1,
+      max: 'dataMax'
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      min: 1,
+      max: 'dataMax'
+    },
+    series: [
+      buildLineSeries('Spectrum', [], '#fff', {
+        silent: true,
+        markLine: {
+          silent: true,
+          symbol: 'none',
+          label: {
+            show: false
+          },
+          lineStyle: {
+            type: 'solid',
+            color: '#1397a3',
+            width: 1
+          },
+          data: []
+        }
+      })
+    ]
+  }
+}
+
+export const graphAssistance = {
+  axisType: 'Channel',
+  spectrumType: 'Lines',
+  Baseline: true,
+  SCAC: true,
+  Lc: true,
+}