feat: 由于graphic限制，重写小红框逻辑及撤销逻辑，增加绿色加号的渲染逻辑，完成Replot、Accept功能

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

@@ -291,7 +291,18 @@ const initialOption = {
   },
   series: [],
   brush: {},
-  graphic: []
+  graphic: [
+    {
+      type: 'group',
+      id: 1,
+      children: []
+    },
+    {
+      type: 'group',
+      id: 2,
+      children: []
+    }
+  ]
 }
 
 const columns = [
@@ -555,16 +566,7 @@ export default {
           series.push({
             name: 'BaseLine_Ctrl_Point',
             type: 'scatter',
-            data: channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
+            data: this.buildCPPointData(channelBaseCPChart),
-              return {
-                value: [x, y],
-                itemStyle: {
-                  color: 'transparent',
-                  borderColor: color,
-                  borderWidth: size / 2
-                }
-              }
-            }),
             silent: true,
             animation: false,
             zlevel: 20
@@ -593,15 +595,18 @@ export default {
       this.currChannel = undefined
       this.btnGroupType = 1
       this.opts.notMerge = false
-
-      this.option.graphic = []
-
       this.isFitting = false
-
       this.$nextTick(() => {
         this.option.brush = { toolbox: [] }
         this.selectedKeys = []
       })
+      this.removeGraphics()
+    },
+
+    // 清空graphic（小方块和加号）
+    removeGraphics() {
+      this.option.graphic[0].children = []
+      this.option.graphic[1].children = []
     },
 
     beforeModalOpen() {
@@ -804,7 +809,7 @@ export default {
         table
       } = result
 
-      this.$emit('refresh', {
+      this.$bus.$emit('refresh', {
         allData,
         channelPeakChart,
         shadowChannelChart,
@@ -1022,7 +1027,7 @@ export default {
                 table
               } = result
 
-              this.$emit('refresh', {
+              this.$bus.$emit('refresh', {
                 allData,
                 channelPeakChart,
                 shadowChannelChart,
@@ -1084,16 +1089,7 @@ export default {
               series.push({
                 name: 'BaseLine_Ctrl_Point',
                 type: 'scatter',
-                data: this.channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
+                data: this.buildCPPointData(this.channelBaseCPChart),
-                  return {
-                    value: [x, y],
-                    itemStyle: {
-                      color: 'transparent',
-                      borderColor: color,
-                      borderWidth: size / 2
-                    }
-                  }
-                }),
                 silent: true,
                 animation: false,
                 zlevel: 20
@@ -1213,11 +1209,8 @@ export default {
         this.thumbnailOption.yAxis.max = y2
 
         if (this.btnGroupType == 2) {
-          this.$nextTick(() => {
+          this.buildGraphicRectByData()
-            this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
+          this.buildGraphicPlusByData()
-              return this.buildGraphicPoint(chart, x, y)
-            })
-          })
         }
       }
       this.clearBrush(chart)
@@ -1235,12 +1228,8 @@ export default {
       this.thumbnailOption.yAxis.max = 'dataMax'
 
       if (this.btnGroupType == 2) {
-        const chart = this.$refs.chartRef.getChartInstance()
+        this.buildGraphicRectByData()
-        this.$nextTick(() => {
+        this.buildGraphicPlusByData()
-          this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
-            return this.buildGraphicPoint(chart, x, y)
-          })
-        })
       }
     },
 
@@ -1249,32 +1238,36 @@ export default {
       // 切换到Base Line 和 Control Point 操作
       if (this.btnGroupType == 1) {
         this.btnGroupType = 2
-        const originalCPSeries = findSeriesByName(this.option.series, 'BaseLine')
+        this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
-
+        this._channelBaseLineChart = cloneDeep(this.channelBaseLineChart)
-        const baseLineEditSeries = buildLineSeries('BaseLine_Edit', cloneDeep(originalCPSeries.data), '#fff', {
+        this._baseCtrls = cloneDeep(this.BaseCtrls)
-          zlevel: 21
-        })
 
+        // 供编辑的白色基线
+        const baseLineEditSeries = buildLineSeries(
+          'BaseLine_Edit',
+          this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
+          '#fff',
+          {
+            zlevel: 21
+          }
+        )
         this.option.series.push(baseLineEditSeries)
 
-        const chart = this.$refs.chartRef.getChartInstance()
+        this.buildGraphicRectByData()
-
+        this.buildGraphicPlusByData()
-        this.option.graphic = this.channelBaseCPChart.map(({ point: { x, y } }) => {
-          return this.buildGraphicPoint(chart, x, y)
-        })
-
-        this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
-        this._baseCtrls = cloneDeep(this.BaseCtrls)
       }
       // 切换回 Peak 操作
       else {
         this.btnGroupType = 1
         this.opts.notMerge = true
         this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
-        this.option.graphic = [] // 去掉移动控制点时的小方框
+        this.removeGraphics()
 
-        const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine')
+        const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
-        baseLineEditSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
+        baseLineSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
+
+        const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+        baseLineCP.data = this.buildCPPointData(this.channelBaseCPChart)
 
         this.$nextTick(() => {
           this.resetChartOpts()
@@ -1286,10 +1279,27 @@ export default {
       this.clearOperationStack()
     },
 
-    buildGraphicPoint(chart, x, y) {
+    // 根据数据绘制小方块
-      const [xPix, yPix] = chart.convertToPixel('grid', [x, y])
+    buildGraphicRectByData() {
+      this.option.graphic[0].children.forEach(item => {
+        item.$action = 'remove'
+      })
+
+      this.$nextTick(() => {
+        this.option.graphic[0].children = this._channelBaseCPChart.map(({ point: { x, y } }) => {
+          return this.buildGraphicRect(x, y)
+        })
+      })
+    },
+
+    // 绘制单个红色小方块
+    buildGraphicRect(xAxis, yAxis) {
+      const chart = this.$refs.chartRef.getChartInstance()
+      const [xPix, yPix] = chart.convertToPixel('grid', [xAxis, yAxis])
       return {
         type: 'rect',
+        id: Math.random().toString(),
+        $action: 'replace',
         position: [xPix, yPix],
         shape: {
           x: -4,
@@ -1304,39 +1314,87 @@ export default {
         },
         draggable: false,
         ondrag: function() {
-          const [xPixel] = chart.convertToPixel('grid', [x, y])
+          const [xPixel] = chart.convertToPixel('grid', [xAxis, yAxis])
+          // 保持x轴不变
           this.position[0] = xPixel
         },
         ondragend: ({ offsetY }) => {
-          const graphic = this.option.graphic
-
-          const dataIndex = graphic.findIndex(item => item.position[0] == xPix)
-
-          this.option.graphic[dataIndex].position = [xPix, offsetY]
           this.setGraphicDraggable(false)
 
-          const [xAxis, yAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
+          const _channelBaseCPChart = this._channelBaseCPChart
+          const rectIndex = _channelBaseCPChart.findIndex(item => item.point.x == xAxis)
 
-          const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+          // 拖动到的位置
-
+          const [, rectYAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
-          baseLineEditSeries.data[parseInt(xAxis) - 1] = [x, yAxis]
-
-          this._channelBaseCPChart[dataIndex].point.y = yAxis
 
+          const willModifyPoint = this._channelBaseCPChart[rectIndex].point
           this.pushOperationStack(Operators.MODIFY, {
-            index: dataIndex,
+            index: rectIndex,
-            position: [xPix, yPix]
+            xAxis: willModifyPoint.x,
+            yAxis: willModifyPoint.y
           })
+
+          // 改变控制点位置
+          willModifyPoint.y = rectYAxis
+          this.buildGraphicRectByData()
+
+          // 改变基线位置
+          const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+          baseLineEditSeries.data[xAxis - 1][1] = rectYAxis
+
+          this._channelBaseLineChart.pointlist[xAxis - 1].y = rectYAxis
         },
         zlevel: 100
       }
     },
 
+    // 根据数据绘制 + 号
+    buildGraphicPlusByData() {
+      this.option.graphic[1].children.forEach(item => {
+        item.$action = 'remove'
+      })
+
+      this.$nextTick(() => {
+        const { xctrl: xctrlList, yctrl: yctrlList, yslope: yslopeList } = this._baseCtrls
+        const plusGraphic = []
+
+        xctrlList.forEach((xctrl, index) => {
+          const yctrl = yctrlList[index]
+          const yslope = yslopeList[index]
+          if (yslope != 0) {
+            plusGraphic.push(this.buildGraphicPlus(xctrl + 2, yctrl + 2 * yslope))
+            plusGraphic.push(this.buildGraphicPlus(xctrl - 2, yctrl - 2 * yslope))
+          }
+        })
+        this.option.graphic[1].children = plusGraphic
+      })
+    },
+
+    // 绘制单个绿色加号
+    buildGraphicPlus(x, y) {
+      const chart = this.$refs.chartRef.getChartInstance()
+      const [xPix, yPix] = chart.convertToPixel('grid', [x, y])
+      return {
+        type: 'text',
+        id: Math.random().toString(),
+        $action: 'replace',
+        position: [xPix, yPix],
+        style: {
+          x: -10,
+          y: -10,
+          text: '+',
+          fill: '#0f0',
+          font: 'bolder 20px "Microsoft YaHei", sans-serif'
+        },
+        zlevel: 101
+      }
+    },
+
     /**
      * 设置小方块可拖拽
      */
     setGraphicDraggable(draggable) {
-      this.option.graphic.forEach(item => {
+      this.option.graphic[0].children.forEach(item => {
         item.draggable = draggable
       })
       this.isModifying = draggable
@@ -1345,24 +1403,15 @@ export default {
     // 在当前选中的红线位置新增控制点
     handleAddCP() {
       this.setGraphicDraggable(false)
-
+      const { rg_high, rg_low } = this.BaseCtrls
-      const xAxises = this.channelBaseCPChart.map(({ point: { x } }) => x)
+      if (!this.currChannel || this.currChannel < rg_low || this.currChannel > rg_high) {
-      const min = xAxises[0]
-      const max = xAxises[xAxises.length - 1]
-      if (!this.currChannel || this.currChannel < min || this.currChannel > max) {
         this.$message.warn("Can't insert Control Point out of range")
         return
       }
 
       const chart = this.$refs.chartRef.getChartInstance()
 
-      const controlPointList = this.option.graphic
+      const controlPointList = this.option.graphic[0].children
-      const find = controlPointList.find(item => {
-        return item.position[0] == xPix
-      })
-      if (find) {
-        return
-      }
 
       let i = 0 // 记录新控制点在列表中的位置
       const [xPix] = chart.convertToPixel('grid', [this.currChannel, 0])
@@ -1377,12 +1426,11 @@ export default {
         }
       }
 
-      const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+      // 新增的控制点跟基线的值平齐
-
+      const yAxis = this._channelBaseLineChart.pointlist[this.currChannel - 1].y
-      const yAxis = baseLineEditSeries.data[this.currChannel - 1][1]
-      this.option.graphic.splice(i, 0, this.buildGraphicPoint(chart, this.currChannel, yAxis))
 
       this._channelBaseCPChart.splice(i, 0, { point: { x: this.currChannel, y: yAxis } })
+      this.buildGraphicRectByData()
 
       this.pushOperationStack(Operators.ADD, { index: i })
     },
@@ -1392,16 +1440,13 @@ export default {
       this.setGraphicDraggable(false)
 
       // find nearest control-point
-      const chart = this.$refs.chartRef.getChartInstance()
+      const controlPointList = this._channelBaseCPChart
-      const controlPointList = this.option.graphic
       let i = 1
       for (; i < controlPointList.length; ++i) {
-        const [currX, currY] = controlPointList[i].position
+        const { x: currXAxis } = controlPointList[i].point
-        const [currXAxis] = getXAxisAndYAxisByPosition(chart, currX, currY)
         if (currXAxis >= this.currChannel) {
-          const [prevX, prevY] = controlPointList[i - 1].position
+          const { x: prevX } = controlPointList[i - 1].point
-          const [prevXAxis] = getXAxisAndYAxisByPosition(chart, prevX, prevY)
+          if (currXAxis - this.currChannel > this.currChannel - prevX) --i
-          if (currXAxis - this.currChannel > this.currChannel - prevXAxis) --i
           break
         }
       }
@@ -1412,10 +1457,10 @@ export default {
       }
 
       const [point] = controlPointList.splice(i, 1)
-
+      this.buildGraphicRectByData()
       this.pushOperationStack(Operators.REMOVE, {
         index: i,
-        point
+        point: point.point
       })
     },
 
@@ -1467,6 +1512,8 @@ export default {
         index,
         slope: prevSlope
       })
+
+      this.buildGraphicPlusByData()
     },
 
     // 撤销
@@ -1476,10 +1523,40 @@ export default {
     },
 
     // 将原先的基线和控制点移动到新位置
-    handleReplot() {},
+    handleReplot() {
+      const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
+      baseLineSeries.data = this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y])
+
+      const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+      baseLineCP.data = this.buildCPPointData(this._channelBaseCPChart)
+    },
+
+    /**
+     * 构建基线控制点数据
+     * @param {Array} controlPointList
+     **/
+    buildCPPointData(controlPointList) {
+      return controlPointList.map(({ size, color, point: { x, y } }) => {
+        return {
+          value: [x, y],
+          itemStyle: {
+            color: 'transparent',
+            borderColor: color,
+            borderWidth: size / 2
+          }
+        }
+      })
+    },
 
     // 确定对Baseline Control Points 的操作
-    handleAccept() {},
+    handleAccept() {
+      this.channelBaseLineChart = this._channelBaseLineChart
+      this.channelBaseCPChart = this._channelBaseCPChart
+
+      this.handleSwitchOperation()
+      
+      this.$bus.$emit('accept')
+    },
 
     // 右下角添加当前选中的nuclide
     async handleAddNuclide() {
@@ -1563,16 +1640,33 @@ export default {
       const { index } = operand
       switch (operator) {
         case Operators.ADD:
-          this.option.graphic.splice(index, 1)
           this._channelBaseCPChart.splice(index, 1)
+          this.buildGraphicRectByData()
           break
         case Operators.MODIFY:
-          const { position } = operand
+          const { xAxis, yAxis } = operand
-          this.option.graphic[index].position = position
+
+          // 恢复点的y轴位置
+          this._channelBaseCPChart[index].point.y = yAxis
+          this.buildGraphicRectByData()
+
+          // 恢复基线位置
+          const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+          baseLineEditSeries.data[xAxis - 1] = [xAxis, yAxis]
+
+          this._channelBaseLineChart.pointlist[xAxis - 1].y = yAxis
           break
         case Operators.REMOVE:
-          const { point } = operand
+          const {
-          this.option.graphic.splice(index, 0, point)
+            point: { x, y }
+          } = operand
+          this._channelBaseCPChart.splice(index, 0, {
+            point: {
+              x,
+              y
+            }
+          })
+          this.buildGraphicRectByData()
           break
         case Operators.SLOPE_CHANGE:
           const { slope } = operand

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

@@ -76,21 +76,21 @@ export default {
     this.configList = configList
     return {
       config: {
-        Color_Spec: { hex: 'yellow' }, // Spectrum 颜色
+        Color_Spec: 'yellow', // Spectrum 颜色
-        Color_Base: { hex: 'rgb(0, 246, 255)' }, // 基线颜色
+        Color_Base: 'rgb(0, 246, 255)', // 基线颜色
-        Color_Lc: { hex: 'red' }, // LC 颜色
+        Color_Lc: 'red', // LC 颜色
-        Color_Scac: { hex: 'rgb(244, 112, 247)' }, // Scac 颜色
+        Color_Scac: 'rgb(244, 112, 247)', // Scac 颜色
-        Color_Peak: { hex: 'rgb(255, 127, 39)' }, // Peak 颜色
+        Color_Peak: 'rgb(255, 127, 39)', // Peak 颜色
-        Color_Compare: { hex: 'green' }, // Sample -> Compare下的颜色
+        Color_Compare: 'green', // Sample -> Compare下的颜色
-        Color_Strip: { hex: 'rgb(0, 0, 255)' }, // Sample -> Compare下的颜色
+        Color_Strip: 'rgb(0, 0, 255)', // Sample -> Compare下的颜色
-        spectCutLine: { hex: 'rgb(33, 90, 104)' }, // 无作用
+        spectCutLine: 'rgb(33, 90, 104)', // 无作用
-        Color_Fitbase: { hex: 'white' } // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
+        Color_Fitbase: 'white' // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
       }
     }
   },
   methods: {
-    combineRGBA({ hex }) {
+    combineRGBA(color) {
-      return hex
+      return color
     },
 
     async getData() {
@@ -99,7 +99,7 @@ export default {
         const { success, result, message } = await getAction('/gamma/viewColorConfig')
         if (success) {
           Object.entries(result).forEach(([k, v]) => {
-            this.config[k].hex = v
+            this.config[k] = v
           })
         } else {
           this.$message.error(message)
@@ -128,20 +128,20 @@ export default {
         Color_Fitbase
       } = this.config
       const { success, message } = await putAction('/gamma/updateColorConfig', {
-        colorSpec: Color_Spec.hex,
+        colorSpec: Color_Spec,
-        colorPeak: Color_Peak.hex,
+        colorPeak: Color_Peak,
-        colorLc: Color_Lc.hex,
+        colorLc: Color_Lc,
-        colorBase: Color_Base.hex,
+        colorBase: Color_Base,
-        colorScac: Color_Scac.hex,
+        colorScac: Color_Scac,
-        colorCompare: Color_Compare.hex,
+        colorCompare: Color_Compare,
-        colorFitbase: Color_Fitbase.hex,
+        colorFitbase: Color_Fitbase,
-        colorStrip: Color_Strip.hex
+        colorStrip: Color_Strip
       })
       if (success) {
         this.$bus.$emit(
           'colorChange',
           Object.entries(this.config).reduce((prev, [key, value]) => {
-            prev[key] = value.hex
+            prev[key] = value
             return prev
           }, {})
         )

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -277,16 +277,14 @@ export default {
   },
   created() {
     this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
-    this.$bus.$on('colorChange', colorConfig => {
+    this.$bus.$on('colorChange', this.handleColorChange)
-      // 如果还没加载完，加载新的
+    this.$bus.$on('gammaRefresh', this.handleRefresh)
-      if (this.isLoading) {
+    this.$bus.$on('accept', this.handleAccept)
-        this.getSampleDetail()
+  },
-      }
+  destroyed() {
-      // 否则修改已有颜色
+    this.$bus.$off('colorChange', this.handleColorChange)
-      else {
+    this.$bus.$off('gammaRefresh', this.handleRefresh)
-        this.changeColor(colorConfig)
+    this.$bus.$off('accept', this.handleAccept)
-      }
-    })
   },
   mounted() {
     this.option.brush = { toolbox: [] }
@@ -650,7 +648,7 @@ export default {
     // 重绘Peak Line
     redrawPeakLine() {
       this.option.series = this.option.series.filter(item => {
-        return -1 == item.name.includes('Peak_')
+        return !item.name.includes('Peak_')
       })
 
       const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
@@ -985,7 +983,7 @@ export default {
     },
 
     // 从分析工具刷新部分数据
-    refresh(data) {
+    handleRefresh(data) {
       const { allData, shadowChannelChart, shadowEnergyChart, shapeChannelData, shapeEnergyData } = data
 
       const channelPeakGroup = allData.filter(item => item.name == 'Peak' && item.group == 'channel')
@@ -1042,6 +1040,11 @@ export default {
       })
     },
 
+    // 分析工具Accept时刷新部分数据
+    handleAccept() {
+      console.log('%c [ 分析工具Accept时刷新部分数据 ]-1046', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
     // 重置图表配置
     resetChartOpts() {
       this.opts.notMerge = false
@@ -1104,6 +1107,17 @@ export default {
       this.graphAssistance = cloneDeep(graphAssistance)
     },
 
+    handleColorChange(colorConfig) {
+      // 如果还没加载完，加载新的
+      if (this.isLoading) {
+        this.getSampleDetail()
+      }
+      // 否则修改已有颜色
+      else {
+        this.changeColor(colorConfig)
+      }
+    },
+
     // 修改颜色
     changeColor(colorConfig) {
       const {

src/views/spectrumAnalysis/index.vue

@@ -76,7 +76,7 @@
     <!-- 分析-设置弹窗结束 -->
 
     <!-- 分析工具弹窗开始 -->
-    <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" :sampleId="sampleData.sampleId" @refresh="handleRefreshGamma" />
+    <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" :sampleId="sampleData.sampleId" />
     <!-- 分析工具弹窗结束 -->
 
     <!-- Korsum 弹窗开始 -->
@@ -480,11 +480,6 @@ export default {
       this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
     },
 
-    // 从分析工具刷新gamma图表
-    handleRefreshGamma(data) {
-      this.$refs.gammaAnalysisRef.refresh(data)
-    },
-
     // Beta-Gamma Energy Calibration 的重新分析
     handleReanalyse(...data) {
       this.$refs.betaGammaAnalysisRef.reanalyse(data)