refactor: 重构Color Config和Interactive获取和处理数据的方式，修改监听keydown事件的元素为局部元素

src/utils/sampleHelper.js

@@ -18,3 +18,40 @@ export const transformPointListData = pointlist => {
   }
   return pointlist.map(({ x, y }) => [x, y])
 }
+
+// 查找最近的峰(C++相关)
+export const findNearPeak = (channel, peakList) => {
+  let t_bFind = false, // 是否在峰内
+    i = 0,
+    peakNum = peakList.length
+  for (; i < peakNum; ++i) {
+    const peak = peakList[i]
+    if (channel >= peak.left && channel <= peak.right) {
+      // 如果 channel 在峰的左右边界内
+      if (peak.multiIndex > 0 && channel > peak.peakCentroid) {
+        // 如果是重峰，且 channel 在重峰的第一个峰的中心道右侧
+        let j = i
+        let temp = channel - peak.peakCentroid
+        while (++j < peakNum && peakList[j].multiIndex == peak.multiIndex) {
+          if (Math.abs(peakList[j].peakCentroid - channel) < temp) {
+            // 找出重峰中峰中心道离 channel 最近的峰
+            temp = Math.abs(peakList[j].peakCentroid - channel)
+            i = j
+          }
+        }
+      }
+      // channel 在索引(i)对应的峰内
+      t_bFind = true
+      break
+    } else if (peak.left > channel) {
+      // channel 不在任何峰内，找离它最近的峰
+      if (i > 0 && channel - peakList[i - 1].peakCentroid < peak.peakCentroid - channel) i -= 1
+      break
+    }
+  }
+  if (i >= peakNum) i -= 1
+  return {
+    index: i,
+    find: t_bFind
+  }
+}

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue

@@ -216,7 +216,7 @@ import Response from './Response.json'
 import { updateBaseLine } from '@/utils/WasmHelper'
 import RectList from './components/RectList.vue'
 import { isNullOrUndefined } from '@/utils/util'
-import { getLineData, transformPointListData } from '@/utils/sampleHelper'
+import { findNearPeak, getLineData, transformPointListData } from '@/utils/sampleHelper'
 
 // 初始配置
 const initialOption = {
@@ -433,6 +433,12 @@ export default {
     EditSlopeModal,
     RectList,
   },
+  props: {
+    colorConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     this.columns = columns
     return {
@@ -450,7 +456,6 @@ export default {
       list: [],
       BaseCtrls: {},
       baseCtrls_Copy: {},
-      FitBaseLine: '#fff',
       sampleId: -1,
 
       peakCommentModalVisible: false, // Comment 弹窗是否显示
@@ -502,7 +507,7 @@ export default {
 
       const currSampleDetailInfo = await this.$store.dispatch('GET_SAMPLE_DATA', inputFileName)
       const {
-        data: { allData, shadowChannelChart, shapeChannelData, peak },
+        data: { allData, shadowChannelChart, shapeChannelData, peak, BaseCtrls },
       } = currSampleDetailInfo
 
       const channelBaseLine = getLineData(allData, 'BaseLine', 'channel')
@@ -515,8 +520,7 @@ export default {
       this.channelCountChart = shadowChannelChart
       this.channelPeakChart = channelPeakGroup
       this.energy = allEnergy
-      // this.BaseCtrls = BaseCtrls
+      this.BaseCtrls = BaseCtrls
-      // this.FitBaseLine = FitBaseLine
       this.barChart = shadowChannelChart
 
       this.setChartOption(channelBaseLine, shadowChannelChart, channelPeakGroup, shapeChannelData, shadowChannelChart)
@@ -566,36 +570,15 @@ export default {
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
       if (point) {
-        const xAxis = parseInt(point[0].toFixed())
+        const xAxis = Math.round(point[0])
-        this.option.series[0].markLine.data[0].xAxis = xAxis
+        this.setMarkLineXAxis(xAxis)
 
         this.currChannel = xAxis
-
+        const { index } = findNearPeak(xAxis, this.list)
-        // 获取每一段 Channel 中的最大值
-        const maxXAxises = this.getPeakMaxValues()
-
-        let index = 0
-        // 计算当前选中的xAxis跟哪条 peak的最大值 最近
-        if (xAxis >= maxXAxises[maxXAxises.length - 1]) {
-          index = maxXAxises.length - 1
-        } else if (xAxis <= maxXAxises[0]) {
-          index = 0
-        } else {
-          for (let i = 1; i < maxXAxises.length; i++) {
-            const prev = maxXAxises[i - 1]
-            const curr = maxXAxises[i]
-
-            if (xAxis >= prev && xAxis <= curr) {
-              index = xAxis - prev < curr - xAxis ? i - 1 : i
-              break
-            }
-            continue
-          }
-        }
 
         if (this.list.length) {
           const selectedRow = this.list[index]
-          this.selectedKeys = [selectedRow.index]
+          this.selectTableRow(selectedRow.index)
           this.getSelPosNuclide(selectedRow)
           this.selectedTableItem = selectedRow
         }
@@ -645,34 +628,43 @@ export default {
 
     // 切换图表上的红色竖线及表格选中
     handleChangeMarkLine(direction) {
-      const markLineOption = this.option.series[0].markLine.data[0]
+      const prevAxis = this.getMarkLineXAxis()
-      const prevAxis = markLineOption.xAxis
+      let i,
-
+        size = this.list.length
-      // 获取每一段 Channel 中的最大值
-      const maxXAxises = this.getPeakMaxValues()
       if (direction == 'next') {
-        // 找到第一个比prevAxis大的xAxis
+        for (i = 0; i < size; i++) {
-        const find = maxXAxises.find((xAxis) => xAxis > prevAxis)
+          const centroid = Math.round(this.list[i].peakCentroid)
-        if (find) {
+          if (centroid > prevAxis) {
-          markLineOption.xAxis = find
+            this.setMarkLineXAxis(centroid)
+            const selectedRow = this.list[i]
+            this.selectedTableItem = selectedRow
+            this.selectTableRow(selectedRow.index)
+            this.getSelPosNuclide(selectedRow)
+            return
+          }
         }
       } else if (direction == 'prev') {
-        // 找到第一个比prevAxis小的xAxis
+        for (i = size - 1; i >= 0; i--) {
-        const find = cloneDeep(maxXAxises)
+          if (Math.round(this.list[i].peakCentroid) < prevAxis) {
-          .reverse()
+            this.setMarkLineXAxis(Math.round(this.list[i].peakCentroid))
-          .find((xAxis) => xAxis < prevAxis)
+            const selectedRow = this.list[i]
-        if (find) {
+            this.selectedTableItem = selectedRow
-          markLineOption.xAxis = find
+            this.selectTableRow(selectedRow.index)
+            this.getSelPosNuclide(selectedRow)
+            return
+          }
         }
       }
+    },
 
-      const xAxis = markLineOption.xAxis
+    selectTableRow(key) {
-      if (xAxis >= 0) {
+      this.selectedKeys = [key]
-        const index = maxXAxises.findIndex((item) => item == xAxis)
+    },
-        if (index !== -1) {
+
-          this.selectedKeys = [this.list[index].index]
+    // 设置红色标记线的位置
-        }
+    setMarkLineXAxis(xAxis) {
-      }
+      const markLineOption = this.option.series[0].markLine.data[0]
+      markLineOption.xAxis = xAxis
 
       const { xAxis: chartXAxisOption } = this.option
       const { max, min } = chartXAxisOption
@@ -688,6 +680,11 @@ export default {
       }
     },
 
+    getMarkLineXAxis() {
+      const markLineOption = this.option.series[0].markLine.data[0]
+      return markLineOption.xAxis
+    },
+
     // 获取右下角possible nuclide 和 identified nuclide
     async getSelPosNuclide(row) {
       this.model.possibleNuclide = ''
@@ -699,7 +696,7 @@ export default {
           const { sampleId, inputFileName: fileName } = this.sampleData
           const { success, result, message } = await getAction('/gamma/getSelPosNuclide', {
             sampleId,
-            channel: parseInt(row.peakCentroid),
+            channel: Math.round(row.peakCentroid),
             fileName,
           })
           if (success) {
@@ -864,6 +861,7 @@ export default {
                 shadowEnergyChart,
                 shapeChannelData,
                 shapeEnergyData,
+                peak: table,
               })
 
               this.channelPeakChart = channelPeakChart
@@ -881,7 +879,10 @@ export default {
               series.push(this.buildCtrlPoint(this.channelBaseCPChart))
 
               this.list = table
+
+              this.opts.notMerge = true
               this.option.series = series
+              this.resetChartOpts()
 
               this.selectedKeys = []
             } else {
@@ -917,7 +918,7 @@ export default {
         return
       }
 
-      const channel = row.peakCentroid
+      const channel = Math.round(row.peakCentroid)
       this.currChannel = channel
 
       this.option.series[0].markLine.data[0].xAxis = channel
@@ -1041,7 +1042,7 @@ export default {
         const baseLineEditSeries = buildLineSeries(
           'BaseLine_Edit',
           this.baseCtrls_Copy.baseline.map((val, index) => [index + 1, val]),
-          this.FitBaseLine,
+          this.colorConfig.Color_Fitbase || '#fff',
           {
             zlevel: 21,
           }

src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue

@@ -24,53 +24,59 @@ const configList = [
   {
     title: 'Spectrum Line',
     key: 'Color_Spec',
-    desc: 'Color of the original spectrum line'
+    desc: 'Color of the original spectrum line',
   },
   {
     title: 'Baseline',
     key: 'Color_Base',
-    desc: 'Color of baseline'
+    desc: 'Color of baseline',
   },
   {
     title: 'Lc Line',
     key: 'Color_Lc',
-    desc: 'Color of lc line'
+    desc: 'Color of lc line',
   },
   {
     title: 'Scac Line',
     key: 'Color_Scac',
-    desc: 'Color of scac line'
+    desc: 'Color of scac line',
   },
   {
     title: 'Peak Line',
     key: 'Color_Peak',
-    desc: "Color of all peaks' curve"
+    desc: "Color of all peaks' curve",
   },
   {
     title: 'Compare Line',
     key: 'Color_Compare',
-    desc: 'Color of another spectrum line which is used to compare with current spectrum'
+    desc: 'Color of another spectrum line which is used to compare with current spectrum',
   },
   {
     title: 'Spec Sum Line',
     key: 'Color_Strip',
-    desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio'
+    desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio',
   },
   {
     title: 'Spec Cut Line',
     key: 'spectCutLine',
-    desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio'
+    desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio',
   },
   {
     title: 'FitBase Line',
     key: 'Color_Fitbase',
-    desc: 'Color of the base line in edit state'
+    desc: 'Color of the base line in edit state',
-  }
+  },
 ]
 export default {
   mixins: [ModalMixin],
   components: {
-    ColorPicker
+    ColorPicker,
+  },
+  props: {
+    colorConfig: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     this.configList = configList
@@ -84,8 +90,8 @@ export default {
         Color_Compare: 'green', // Sample -> Compare下的颜色
         Color_Strip: 'rgb(0, 0, 255)', // Sample -> Compare下的颜色
         spectCutLine: 'rgb(33, 90, 104)', // 无作用
-        Color_Fitbase: 'white' // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
+        Color_Fitbase: 'white', // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
-      }
+      },
     }
   },
   methods: {
@@ -93,40 +99,16 @@ export default {
       return color
     },
 
-    async getData() {
-      try {
-        this.isLoading = true
-        const { success, result, message } = await getAction('/gamma/viewColorConfig')
-        if (success) {
-          Object.entries(result).forEach(([k, v]) => {
-            this.config[k] = v
-          })
-        } else {
-          this.$message.error(message)
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        this.isLoading = false
-      }
-    },
-
     beforeModalOpen() {
-      this.getData()
+      Object.entries(this.colorConfig).forEach(([k, v]) => {
+        this.config[k] = v
+      })
     },
 
     // 应用颜色
     async handleApply() {
-      const {
+      const { Color_Spec, Color_Peak, Color_Lc, Color_Base, Color_Scac, Color_Compare, Color_Strip, Color_Fitbase } =
-        Color_Spec,
+        this.config
-        Color_Peak,
-        Color_Lc,
-        Color_Base,
-        Color_Scac,
-        Color_Compare,
-        Color_Strip,
-        Color_Fitbase
-      } = this.config
       const { success, message } = await putAction('/gamma/updateColorConfig', {
         colorSpec: Color_Spec,
         colorPeak: Color_Peak,
@@ -135,22 +117,16 @@ export default {
         colorScac: Color_Scac,
         colorCompare: Color_Compare,
         colorFitbase: Color_Fitbase,
-        colorStrip: Color_Strip
+        colorStrip: Color_Strip,
       })
       if (success) {
-        this.$bus.$emit(
+        this.$emit('colorChange', this.config)
-          'colorChange',
-          Object.entries(this.config).reduce((prev, [key, value]) => {
-            prev[key] = value
-            return prev
-          }, {})
-        )
       } else {
         this.$message.error(message)
         throw new Error(message)
       }
-    }
+    },
-  }
+  },
 }
 </script>
 

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -42,7 +42,7 @@
       <!-- 二级交互栏结束 -->
       <!-- 主体部分 -->
       <div class="gamma-analysis-main">
-        <div class="gamma-analysis-chart">
+        <div class="gamma-analysis-chart" ref="chartContainerRef" tabindex="0"  @keydown="handleKeyboardEvent">
           <CustomChart
             ref="chartRef"
             :option="option"
@@ -140,6 +140,8 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
 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'
 
 export default {
   props: {
@@ -232,20 +234,14 @@ export default {
     this.setChartBottomTitle(0, 0, 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)
-
-    document.addEventListener('keydown', this.handleKeyboardEvent)
   },
   destroyed() {
     this.cancelLastRequest()
 
-    this.$bus.$off('colorChange', this.handleColorChange)
     this.$bus.$off('gammaRefresh', this.handleRefresh)
     this.$bus.$off('accept', this.handleAccept)
-
-    document.removeEventListener('keydown', this.handleKeyboardEvent)
   },
   mounted() {
     this.option.brush = { toolbox: [] }
@@ -534,7 +530,7 @@ export default {
 
       this.$store.commit('ADD_SAMPLE_DATA', {
         inputFileName,
-        data: result,
+        data: Object.assign(result, { BaseCtrls: baseCtrlJson }),
         from: flag,
       })
 
@@ -867,6 +863,7 @@ export default {
 
     // 点击图表，设置红线
     handleChartClick(param) {
+      this.$refs.chartContainerRef.focus()
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.getChart(), offsetX, offsetY)
       if (point) {
@@ -883,50 +880,13 @@ export default {
 
     // 设置图表底部的标题
     setChartBottomTitle(channel, energy, counts) {
-      const { index, find } = this.findNearPeak(channel)
+      const { index, find } = findNearPeak(channel, this.peakList)
 
       this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy || '0.00'}} {a|Counts:${
         counts || '0.0'
       }} {a|Significance:${find ? this.peakList[index].significance.toFixed(2) : '0.00'}}`
     },
 
-    // 查找最近的峰(C++相关)
-    findNearPeak(channel) {
-      let t_bFind = false,
-        i = 0,
-        peakNum = this.peakList.length
-      for (; i < peakNum; ++i) {
-        const peak = this.peakList[i]
-        if (channel >= peak.left && channel <= peak.right) {
-          // 如果 channel 在峰的左右边界内
-          if (peak.multiIndex > 0 && channel > peak.peakCentroid) {
-            // 如果是重峰，且 channel 在重峰的第一个峰的中心道右侧
-            let j = i
-            let temp = channel - peak.peakCentroid
-            while (++j < peakNum && this.peakList[j].multiIndex == peak.multiIndex) {
-              if (Math.abs(this.peakList[j].peakCentroid - channel) < temp) {
-                // 找出重峰中峰中心道离 channel 最近的峰
-                temp = Math.abs(this.peakList[j].peakCentroid - channel)
-                i = j
-              }
-            }
-          }
-          // channel 在索引(i)对应的峰内
-          t_bFind = true
-          break
-        } else if (peak.left > channel) {
-          // channel 不在任何峰内，找离它最近的峰
-          if (i > 0 && channel - this.peakList[i - 1].peakCentroid < peak.peakCentroid - channel) i -= 1
-          break
-        }
-      }
-      if (i >= peakNum) i -= 1
-      return {
-        index: i,
-        find: t_bFind,
-      }
-    },
-
     // 根据xAixs值找channel、energy和counts
     getEnergyAndCountsByXAxis(xAxis) {
       let channel, energy, counts
@@ -1341,7 +1301,9 @@ export default {
 
     // 从分析工具刷新部分数据
     handleRefresh(data) {
+      console.log('%c [ data ]-1304', 'font-size:13px; background:pink; color:#bf2c9f;', data)
       data.DetailedInformation = this.detailedInfomation
+      data.QCFlag = this.qcFlags
       this.clearCompareLine()
       this.redrawPeakLine()
       this.dataProcess(data)
@@ -1349,36 +1311,29 @@ export default {
 
     // 分析工具Accept时刷新部分数据
     handleAccept(data) {
-      console.log('%c [ data ]-1166', 'font-size:13px; background:pink; color:#bf2c9f;', data)
       const {
         allData,
-        barChart,
-        channelBaseLineChart,
         peakSet,
         shadowChannelChart,
         shadowEnergyChart,
         shapeChannelData,
-        shapeData,
         shapeEnergyData,
       } = data
 
+      const result = {
+        DetailedInformation: this.detailedInfomation,
+        QCFlag: this.qcFlags,
+        allData,
+        shadowChannelChart,
+        shadowEnergyChart,
+
+        shapeChannelData,
+        shapeEnergyData,
+        peak: peakSet,
+      }
       this.clearCompareLine()
-      this.channelData.peakGroup = this.getLineData(allData, 'Peak', 'channel', true)
-      this.energyData.peakGroup = this.getLineData(allData, 'Peak', 'energy', true)
       this.redrawPeakLine()
-
+      this.dataProcess(result)
-      this.channelData.baseLine = this.getLineData(allData, 'BaseLine', 'channel')
-      this.energyData.baseLine = this.getLineData(allData, 'BaseLine', 'energy')
-      this.redrawLineBySeriesName(
-        'BaseLine',
-        this.energyData.baseLine,
-        this.channelData.baseLine,
-        this.graphAssistance.Baseline
-      )
-
-      this.channelData.baseLineCP = shapeChannelData
-      this.energyData.baseLineCP = shapeEnergyData
-      this.redrawCtrlPointBySeriesName()
     },
 
     // 显示比较弹窗

src/views/spectrumAnalysis/index.vue

@@ -91,7 +91,11 @@
     <!-- 分析-设置弹窗结束 -->
 
     <!-- 分析工具弹窗开始 -->
-    <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" :sampleId="sampleData.sampleId" />
+    <analyze-interactive-tool-modal
+      v-model="analyzeInteractiveToolModalVisible"
+      :sampleId="sampleData.sampleId"
+      :colorConfig="colorConfig"
+    />
     <!-- 分析工具弹窗结束 -->
 
     <!-- Korsum 弹窗开始 -->
@@ -119,7 +123,7 @@
     <!-- SpectrumComments 弹窗结束 -->
 
     <!-- Color Config 弹窗开始 -->
-    <color-config-modal v-model="colorConfigModalVisible" />
+    <color-config-modal v-model="colorConfigModalVisible" :colorConfig="colorConfig" @colorChange="handleColorChange" />
     <!-- Color Config 弹窗结束 -->
 
     <!-- Data Processing Log 弹窗开始 -->
@@ -397,6 +401,8 @@ export default {
       isReAnalyed_beta: false,
 
       isSaving: false,
+
+      colorConfig: {}, // 颜色配置
     }
   },
   created() {
@@ -407,6 +413,7 @@ export default {
     //   dbName: 'auto',
     //   inputFileName: 'CAX05_001-20230731_1528_S_FULL_37563.6.PHD',
     // })
+    this.getColorConfig()
   },
 
   destroyed() {
@@ -764,6 +771,26 @@ export default {
         }
       }
     },
+
+    // 获取颜色配置
+    async getColorConfig() {
+      try {
+        const { success, result, message } = await getAction('/gamma/viewColorConfig')
+        if (success) {
+          this.colorConfig = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 颜色修改
+    handleColorChange(colorConfig) {
+      this.colorConfig = colorConfig
+      this.$refs.gammaAnalysisRef.handleColorChange(colorConfig)
+    },
   },
   computed: {
     // 顶部菜单栏配置