feat: 调用wasm计算新的baseline，因echarts移动点比较复杂，重新用html实现，同时将解析完后的后续操作实现

public/index.html

@@ -251,7 +251,7 @@
     <div class="loader-section section-right"></div>
   </div>
 </div>
-
+<script src="/qtw.js"></script>
 </body>
 
 </html>

src/utils/WasmHelper.js

@@ -0,0 +1,2 @@
+const { UpdateBaseLine } = Module;
+export { UpdateBaseLine as updateBaseLine };

src/utils/chartHelper.js

@@ -8,7 +8,7 @@ export function getXAxisAndYAxisByPosition(chart, offsetX, offsetY, seriesIndex
     if (
         chart.containPixel(
             {
-                seriesIndex: 0
+                seriesIndex
             },
             pointInPixel
         )

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

@@ -0,0 +1,149 @@
+<template>
+  <div class="rect-list" :class="isMoving ? 'draggable' : ''" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
+    <div
+      class="rect-list-item"
+      :class="draggable && !isMoving ? 'draggable' : ''"
+      v-for="(item, index) in list"
+      :key="index"
+      @mousedown="handleMouseDown(item, index)"
+    >
+      <div
+        class="plus"
+        :class="isMoving ? 'will-change' : ''"
+        v-if="item.yslope"
+        :style="getPosition(item.xAxis - 2, item.yAxis - 2 * item.yslope)"
+      >
+        +
+      </div>
+      <div class="rect" :class="isMoving ? 'will-change' : ''" :style="getPosition(item.xAxis, item.yAxis)"></div>
+      <div
+        class="plus"
+        :class="isMoving ? 'will-change' : ''"
+        v-if="item.yslope"
+        :style="getPosition(item.xAxis + 2, item.yAxis + 2 * item.yslope)"
+      >
+        +
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
+export default {
+  props: {
+    chartRef: {
+      type: Object,
+    },
+    baseControls: {
+      type: Object,
+    },
+    draggable: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      list: [],
+      isMoving: false,
+    }
+  },
+  methods: {
+    init() {
+      this.chart = this.chartRef.getChartInstance()
+
+      const { xctrl: xctrlList, yctrl: yctrlList, yslope: yslopeList } = this.baseControls
+      this.list = xctrlList.map((xAxis, index) => {
+        const yAxis = yctrlList[index]
+        const yslope = yslopeList[index]
+        return {
+          xAxis,
+          yAxis,
+          yslope,
+        }
+      })
+    },
+
+    clear() {
+      this.list = []
+    },
+
+    getPosition(xAxis, yAxis) {
+      const [xPix, yPix] = this.chart.convertToPixel('grid', [xAxis, yAxis])
+      return {
+        position: 'absolute',
+        left: xPix + 'px',
+        top: yPix + 'px',
+      }
+    },
+
+    handleMouseDown(item, index) {
+      this.isMoving = true
+      this.currItem = item
+      this.prevYAxis = item.yAxis
+      this.currItemIndex = index
+    },
+    handleMouseMove(event) {
+      if (this.isMoving) {
+        const { offsetX, offsetY } = event
+        const position = getXAxisAndYAxisByPosition(this.chart, offsetX, offsetY)
+        if (position) {
+          this.currItem.yAxis = position[1]
+          this.$emit('move', this.list.map((item) => item.yAxis))
+        }
+      }
+    },
+    handleMouseUp() {
+      if (this.isMoving) {
+        this.isMoving = false
+        this.$emit('moveEnd', this.prevYAxis, this.currItemIndex)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.rect-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.draggable {
+    pointer-events: all;
+  }
+
+  &-item {
+    user-select: none;
+    pointer-events: none;
+
+    &.draggable {
+      pointer-events: all;
+    }
+  }
+
+  .rect {
+    width: 10px;
+    height: 10px;
+    border: 2px solid red;
+    transform: translate(-50%, -50%);
+  }
+
+  .plus {
+    font-size: 20px;
+    color: #0f0;
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.will-change {
+  will-change: top;
+}
+</style>

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

@@ -13,6 +13,14 @@
               @brushEnd="handleBrushEnd"
               @zr:click="handleChartClick"
             />
+            <rect-list
+              ref="rectListRef"
+              :chartRef="$refs.chartRef"
+              :baseControls="baseCtrls_Copy"
+              :draggable="isModifying"
+              @move="handleMove"
+              @moveEnd="handleMoveEnd"
+            />
           </div>
           <!-- 缩略图 -->
           <div class="thumbnail">
@@ -118,9 +126,7 @@
                 </a-form-model-item>
               </a-form-model>
               <div class="identify-item">
-                <div class="title">
+                <div class="title">Possible Nuclide</div>
-                  Possible Nuclide
-                </div>
                 <a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
                   <div class="content">
                     <template v-if="selectedTableItem && selectedTableItem._possible">
@@ -138,9 +144,7 @@
                 </a-spin>
               </div>
               <div class="identify-item">
-                <div class="title">
+                <div class="title">Nuclide Identified</div>
-                  Nuclide Identified
-                </div>
                 <div class="content">
                   <template v-if="selectedTableItem">
                     <div
@@ -206,6 +210,8 @@ import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
 import GeneralCommentModal from './components/GeneralCommentModal.vue'
 import EditSlopeModal from './components/EditSlopeModal.vue'
 import Response from './Response.json'
+import { updateBaseLine } from '@/utils/WasmHelper'
+import RectList from './components/RectList.vue'
 import { isNullOrUndefined } from '@/utils/util'
 
 // 初始配置
@@ -291,19 +297,7 @@ const initialOption = {
     animation: false
   },
   series: [],
-  brush: {},
+  brush: {}
-  graphic: [
-    {
-      type: 'group',
-      id: 1,
-      children: []
-    },
-    {
-      type: 'group',
-      id: 2,
-      children: []
-    }
-  ]
 }
 
 const columns = [
@@ -431,7 +425,8 @@ export default {
     FitPeaksAndBaseLineModal,
     NuclideReviewModal,
     GeneralCommentModal,
-    EditSlopeModal
+    EditSlopeModal,
+    RectList
   },
   data() {
     this.columns = columns
@@ -449,6 +444,7 @@ export default {
       energy: [],
       list: [],
       BaseCtrls: {},
+      baseCtrls_Copy: {},
       FitBaseLine: '#fff',
       sampleId: -1,
 
@@ -479,7 +475,7 @@ export default {
       const channel = parseInt(params[0].value[0])
       const energy = this.energy[channel - 1]
       return `<div class="channel">Channel: ${channel}</div>
-              <div class="energy">Energy: ${energy.toFixed(2)}</div>`
+              <div class="energy">${isNullOrUndefined(energy) ? '' : `Energy: ${energy.toFixed(2)}`}</div>`
     }
   },
   methods: {
@@ -496,7 +492,7 @@ export default {
           fileName: this.fileName
         })
 
-        // const { success, result, message } = Response
+        // const { success, result, message } = cloneDeep(Response)
 
         if (success) {
           this.isLoading = false
@@ -525,70 +521,18 @@ export default {
           const series = []
 
           // 推入BaseLine
-          series.push(
+          series.push(this.buildBaseLine(channelBaseLineChart))
-            buildLineSeries(
-              'BaseLine',
-              channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-              channelBaseLineChart.color,
-              {
-                markLine: {
-                  silent: true,
-                  symbol: 'none',
-                  label: {
-                    show: false
-                  },
-                  lineStyle: {
-                    color: 'red',
-                    width: 1
-                  },
-                  data: [{ xAxis: -1 }]
-                },
-                zlevel: 10
-              }
-            )
-          )
 
           // 推入Count
-          series.push(
+          series.push(this.buildCountLine(channelCountChart))
-            buildLineSeries(
-              'CountChart',
-              channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-              channelCountChart.color
-            )
-          )
 
           // 推入Peak
-          const peakSeries = []
+          series.push(...this.buildPeaks(channelPeakChart))
-          channelPeakChart.forEach((item, index) => {
-            peakSeries.push(
-              buildLineSeries(
-                'Peak_' + (index + 1),
-                item.pointlist.map(({ x, y }) => [x, y]),
-                item.color
-              )
-            )
-          })
-
-          series.push(...peakSeries)
 
           // 推入基线控制点
-          series.push({
+          series.push(this.buildCtrlPoint(channelBaseCPChart))
-            name: 'BaseLine_Ctrl_Point',
-            type: 'scatter',
-            data: this.buildCPPointData(channelBaseCPChart),
-            silent: true,
-            animation: false,
-            zlevel: 20
-          })
 
-          this.thumbnailOption.series = buildLineSeries(
+          this.thumbnailOption.series = this.buildBarChart(barChart)
-            'BarChart',
-            barChart.map(({ x, y }) => [x, y]),
-            '#fff',
-            {
-              silent: true
-            }
-          )
 
           this.list = table
           this.option.series = series
@@ -609,13 +553,7 @@ export default {
         this.option.brush = { toolbox: [] }
         this.selectedKeys = []
       })
-      this.removeGraphics()
+      this.clearRect()
-    },
-
-    // 清空graphic（小方块和加号）
-    removeGraphics() {
-      this.option.graphic[0].children = []
-      this.option.graphic[1].children = []
     },
 
     beforeModalOpen() {
@@ -793,11 +731,8 @@ export default {
     // Insert按钮
     handleInsert() {
       this.isFitting = false
-
+      const { rg_high, rg_low } = this.BaseCtrls
-      const xAxises = this.channelBaseCPChart.map(({ point: { x } }) => x)
+      if (!this.currChannel || this.currChannel <= rg_low + 1 || this.currChannel >= rg_high - 1) {
-      const min = xAxises[0]
-      const max = xAxises[xAxises.length - 1]
-      if (!this.currChannel || this.currChannel < min || this.currChannel > max) {
         this.$message.warn("Couldn't insert peak, maybe out of range")
         return
       }
@@ -819,7 +754,7 @@ export default {
         table
       } = result
 
-      this.$bus.$emit('refresh', {
+      this.$bus.$emit('gammaRefresh', {
         allData,
         channelPeakChart,
         shadowChannelChart,
@@ -834,79 +769,18 @@ export default {
       const series = []
 
       // 推入BaseLine
-      series.push(
+      series.push(this.buildBaseLine(channelBaseLineChart))
-        buildLineSeries(
-          'BaseLine',
-          channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-          channelBaseLineChart.color,
-          {
-            markLine: {
-              silent: true,
-              symbol: 'none',
-              label: {
-                show: false
-              },
-              lineStyle: {
-                color: 'red',
-                width: 1
-              },
-              data: [{ xAxis: -1 }]
-            },
-            zlevel: 10
-          }
-        )
-      )
 
       // 推入旧的Count
-      series.push(
+      series.push(this.buildCountLine(channelCountChart))
-        buildLineSeries(
-          'CountChart',
-          this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-          this.channelCountChart.color
-        )
-      )
 
       // 推入Peak
-      const peakSeries = []
+      series.push(...this.buildPeaks(channelPeakChart))
-      channelPeakChart.forEach((item, index) => {
-        peakSeries.push(
-          buildLineSeries(
-            'Peak_' + (index + 1),
-            item.pointlist.map(({ x, y }) => [x, y]),
-            item.color
-          )
-        )
-      })
-
-      series.push(...peakSeries)
 
       // 推入旧的基线控制点
-      series.push({
+      series.push(this.buildCtrlPoint(channelBaseCPChart))
-        name: 'BaseLine_Ctrl_Point',
-        type: 'scatter',
-        data: this.channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
-          return {
-            value: [x, y],
-            itemStyle: {
-              color: 'transparent',
-              borderColor: color,
-              borderWidth: size / 2
-            }
-          }
-        }),
-        silent: true,
-        animation: false,
-        zlevel: 20
-      })
 
-      this.thumbnailOption.series = buildLineSeries(
+      this.thumbnailOption.series = this.buildBarChart(barChart)
-        'BarChart',
-        barChart.map(({ x, y }) => [x, y]),
-        '#fff',
-        {
-          silent: true
-        }
-      )
 
       this.list = table
       this.option.series = series
@@ -919,70 +793,16 @@ export default {
       const series = []
 
       // 推入旧的BaseLine
-      series.push(
+      series.push(this.buildBaseLine(this.channelBaseLineChart))
-        buildLineSeries(
-          'BaseLine',
-          this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-          this.channelBaseLineChart.color,
-          {
-            markLine: {
-              silent: true,
-              symbol: 'none',
-              label: {
-                show: false
-              },
-              lineStyle: {
-                color: 'red',
-                width: 1
-              },
-              data: [{ xAxis: -1 }]
-            },
-            zlevel: 10
-          }
-        )
-      )
 
       // 推入旧的Count
-      series.push(
+      series.push(this.buildCountLine(this.channelCountChart))
-        buildLineSeries(
-          'CountChart',
-          this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-          this.channelCountChart.color
-        )
-      )
 
       // 推入Peak
-      const peakSeries = []
+      series.push(...this.buildPeaks(channelPeakChart))
-      channelPeakChart.forEach((item, index) => {
-        peakSeries.push(
-          buildLineSeries(
-            'Peak_' + (index + 1),
-            item.pointlist.map(({ x, y }) => [x, y]),
-            item.color
-          )
-        )
-      })
-
-      series.push(...peakSeries)
 
       // 推入旧的基线控制点
-      series.push({
+      series.push(this.buildCtrlPoint(this.channelBaseCPChart))
-        name: 'BaseLine_Ctrl_Point',
-        type: 'scatter',
-        data: this.channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
-          return {
-            value: [x, y],
-            itemStyle: {
-              color: 'transparent',
-              borderColor: color,
-              borderWidth: size / 2
-            }
-          }
-        }),
-        silent: true,
-        animation: false,
-        zlevel: 20
-      })
 
       this.list = table
       this.option.series = series
@@ -1037,7 +857,7 @@ export default {
                 table
               } = result
 
-              this.$bus.$emit('refresh', {
+              this.$bus.$emit('gammaRefresh', {
                 allData,
                 channelPeakChart,
                 shadowChannelChart,
@@ -1049,61 +869,16 @@ export default {
               this.channelPeakChart = channelPeakChart
               const series = []
               // 推入旧的BaseLine
-              series.push(
+              series.push(this.buildBaseLine(this.channelBaseLineChart))
-                buildLineSeries(
-                  'BaseLine',
-                  this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-                  this.channelBaseLineChart.color,
-                  {
-                    markLine: {
-                      silent: true,
-                      symbol: 'none',
-                      label: {
-                        show: false
-                      },
-                      lineStyle: {
-                        color: 'red',
-                        width: 1
-                      },
-                      data: [{ xAxis: -1 }]
-                    },
-                    zlevel: 10
-                  }
-                )
-              )
 
               // 推入旧的Count
-              series.push(
+              series.push(this.buildCountLine(this.channelCountChart))
-                buildLineSeries(
-                  'CountChart',
-                  this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-                  this.channelCountChart.color
-                )
-              )
 
               // 推入Peak
-              const peakSeries = []
+              series.push(...this.buildPeaks(channelPeakChart))
-              channelPeakChart.forEach((item, index) => {
-                peakSeries.push(
-                  buildLineSeries(
-                    'Peak_' + (index + 1),
-                    item.pointlist.map(({ x, y }) => [x, y]),
-                    item.color
-                  )
-                )
-              })
-
-              series.push(...peakSeries)
 
               // 推入旧的基线控制点
-              series.push({
+              series.push(this.buildCtrlPoint(this.channelBaseCPChart))
-                name: 'BaseLine_Ctrl_Point',
-                type: 'scatter',
-                data: this.buildCPPointData(this.channelBaseCPChart),
-                silent: true,
-                animation: false,
-                zlevel: 20
-              })
 
               this.list = table
               this.option.series = series
@@ -1219,8 +994,7 @@ export default {
         this.thumbnailOption.yAxis.max = y2
 
         if (this.btnGroupType == 2) {
-          this.buildGraphicRectByData()
+          this.buildRect()
-          this.buildGraphicPlusByData()
         }
       }
       this.clearBrush(chart)
@@ -1238,8 +1012,7 @@ export default {
       this.thumbnailOption.yAxis.max = 'dataMax'
 
       if (this.btnGroupType == 2) {
-        this.buildGraphicRectByData()
+        this.buildRect()
-        this.buildGraphicPlusByData()
       }
     },
 
@@ -1248,14 +1021,12 @@ export default {
       // 切换到Base Line 和 Control Point 操作
       if (this.btnGroupType == 1) {
         this.btnGroupType = 2
-        this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
+        this.baseCtrls_Copy = cloneDeep(this.BaseCtrls)
-        this._channelBaseLineChart = cloneDeep(this.channelBaseLineChart)
-        this._baseCtrls = cloneDeep(this.BaseCtrls)
 
         // 供编辑的白色基线
         const baseLineEditSeries = buildLineSeries(
           'BaseLine_Edit',
-          this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
+          this.baseCtrls_Copy.baseline.map((val, index) => [index + 1, val]),
           this.FitBaseLine,
           {
             zlevel: 21
@@ -1263,15 +1034,16 @@ export default {
         )
         this.option.series.push(baseLineEditSeries)
 
-        this.buildGraphicRectByData()
+        this.$nextTick(() => {
-        this.buildGraphicPlusByData()
+          this.buildRect()
+        })
       }
       // 切换回 Peak 操作
       else {
         this.btnGroupType = 1
         this.opts.notMerge = true
         this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
-        this.removeGraphics()
+        this.clearRect()
 
         const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
         baseLineSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
@@ -1290,121 +1062,46 @@ export default {
     },
 
     // 根据数据绘制小方块
-    buildGraphicRectByData() {
+    buildRect() {
-      this.option.graphic[0].children.forEach(item => {
+      this.$refs.rectListRef.init()
-        item.$action = 'remove'
-      })
-
-      this.$nextTick(() => {
-        this.option.graphic[0].children = this._channelBaseCPChart.map(({ point: { x, y } }) => {
-          return this.buildGraphicRect(x, y)
-        })
-      })
     },
 
-    // 绘制单个红色小方块
+    clearRect() {
-    buildGraphicRect(xAxis, yAxis) {
+      const rectListRef = this.$refs.rectListRef
-      const chart = this.$refs.chartRef.getChartInstance()
+      if (rectListRef) {
-      const [xPix, yPix] = chart.convertToPixel('grid', [xAxis, yAxis])
+        rectListRef.clear()
-      const that = this
-
-      return {
-        type: 'rect',
-        id: Math.random().toString(),
-        $action: 'replace',
-        position: [xPix, yPix],
-        shape: {
-          x: -4,
-          y: -4,
-          width: 8,
-          height: 8
-        },
-        style: {
-          stroke: 'red',
-          fill: 'transparent',
-          lineWidth: 2
-        },
-        draggable: this.isModifying,
-        ondrag: function() {
-          const [xPixel] = chart.convertToPixel('grid', [xAxis, yAxis])
-          // 保持x轴不变
-          this.position[0] = xPixel
-          that.redrawBaseLine()
-        },
-        ondragend: ({ offsetY }) => {
-          this.setGraphicDraggable(false)
-
-          const _channelBaseCPChart = this._channelBaseCPChart
-          const rectIndex = _channelBaseCPChart.findIndex(item => item.point.x == xAxis)
-
-          // 拖动到的位置
-          const [, rectYAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
-
-          const willModifyPoint = this._channelBaseCPChart[rectIndex].point
-          this.pushOperationStack(Operators.MODIFY, {
-            index: rectIndex,
-            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
       }
     },
 
+    // 小方块移动
+    handleMove(yctrl) {
+      this.baseCtrls_Copy.yctrl = yctrl
+      this.redrawBaseLine()
+    },
+
+    // 小方块移动完毕
+    handleMoveEnd(prevYAxis, index) {
+      this.isModifying = false
+      this.pushOperationStack(Operators.MODIFY, {
+        index,
+        prevYAxis
+      })
+    },
+
     // 重新生成基线
     redrawBaseLine() {
-      console.log('%c [ 重新生成基线 ]-1355', 'font-size:13px; background:pink; color:#bf2c9f;')
+      try {
-    },
+        console.time('updateBaseLine')
+        const res = updateBaseLine(JSON.stringify(this.baseCtrls_Copy))
+        console.timeEnd('updateBaseLine')
+        const parsed = JSON.parse(res)
+        const { baseline } = parsed
+        const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+        baseLineEditSeries.data = baseline.map((val, index) => [index + 1, val])
 
-    // 根据数据绘制 + 号
+        this.baseCtrls_Copy.baseline = baseline
-    buildGraphicPlusByData() {
+      } catch (error) {
-      this.option.graphic[1].children.forEach(item => {
+        console.error(error)
-        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 (!isNullOrUndefined(yslope)) {
-            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: {
-          text: '+',
-          fill: '#0f0',
-          font: 'bolder 20px "Microsoft YaHei", sans-serif',
-          textAlign: 'center',
-          textVerticalAlign: 'middle'
-        },
-        zlevel: 101
       }
     },
 
@@ -1412,9 +1109,6 @@ export default {
      * 设置小方块可拖拽
      */
     setGraphicDraggable(draggable) {
-      this.option.graphic[0].children.forEach(item => {
-        item.draggable = draggable
-      })
       this.isModifying = draggable
     },
 
@@ -1427,16 +1121,13 @@ export default {
         return
       }
 
-      const chart = this.$refs.chartRef.getChartInstance()
+      const { xctrl, yctrl, baseline, yslope } = this.baseCtrls_Copy
-
-      const controlPointList = this.option.graphic[0].children
 
       let i = 0 // 记录新控制点在列表中的位置
-      const [xPix] = chart.convertToPixel('grid', [this.currChannel, 0])
+      for (; i < xctrl.length; ++i) {
-      for (; i < controlPointList.length; ++i) {
+        const currCP = xctrl[i]
-        const currCP = controlPointList[i].position[0]
+        if (currCP >= this.currChannel) {
-        if (currCP >= xPix) {
+          if (currCP == this.currChannel) {
-          if (currCP == xPix) {
             this.$message.warn(`The new control point in channel ${this.currChannel} exists, can't introduce twice`)
             return
           }
@@ -1445,11 +1136,11 @@ export default {
       }
 
       // 新增的控制点跟基线的值平齐
-      const yAxis = this._channelBaseLineChart.pointlist[this.currChannel - 1].y
+      const yAxis = baseline[this.currChannel - 1]
-
+      xctrl.splice(i, 0, this.currChannel)
-      this._channelBaseCPChart.splice(i, 0, { point: { x: this.currChannel, y: yAxis } })
+      yctrl.splice(i, 0, yAxis)
-      this.buildGraphicRectByData()
+      yslope.splice(i, 0, 0)
-
+      this.buildRect()
       this.pushOperationStack(Operators.ADD, { index: i })
     },
 
@@ -1457,28 +1148,34 @@ export default {
     handleRemoveCP() {
       this.setGraphicDraggable(false)
 
+      const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
+
       // find nearest control-point
-      const controlPointList = this._channelBaseCPChart
       let i = 1
-      for (; i < controlPointList.length; ++i) {
+      for (; i < xctrl.length; ++i) {
-        const { x: currXAxis } = controlPointList[i].point
+        const currXAxis = xctrl[i]
         if (currXAxis >= this.currChannel) {
-          const { x: prevX } = controlPointList[i - 1].point
+          const prevX = xctrl[i - 1]
           if (currXAxis - this.currChannel > this.currChannel - prevX) --i
           break
         }
       }
 
-      if (i == 0 || i >= controlPointList.length - 1) {
+      if (i == 0 || i >= xctrl.length - 1) {
         this.$message.warn("Can't remove first/last control point")
         return
       }
 
-      const [point] = controlPointList.splice(i, 1)
+      const [removeXAxis] = xctrl.splice(i, 1)
-      this.buildGraphicRectByData()
+      const [removeYAxis] = yctrl.splice(i, 1)
+      const [removeYSlope] = yslope.splice(i, 1)
+      this.buildRect()
+      this.redrawBaseLine()
       this.pushOperationStack(Operators.REMOVE, {
         index: i,
-        point: point.point
+        removeXAxis,
+        removeYAxis,
+        removeYSlope
       })
     },
 
@@ -1491,7 +1188,7 @@ export default {
     handleEditSlope() {
       this.setGraphicDraggable(false)
 
-      const { xctrl, yslope } = this._baseCtrls
+      const { xctrl, yslope } = this.baseCtrls_Copy
       if (!xctrl.length) {
         this.$message.warn('No control points to be edited')
         return
@@ -1524,14 +1221,14 @@ export default {
         return
       }
 
-      const { yslope } = this._baseCtrls
+      const { yslope } = this.baseCtrls_Copy
       yslope[index] = slope
       this.pushOperationStack(Operators.SLOPE_CHANGE, {
         index,
         slope: prevSlope
       })
-
+      this.redrawBaseLine()
-      this.buildGraphicPlusByData()
+      this.buildRect()
     },
 
     // 撤销
@@ -1542,11 +1239,25 @@ export default {
 
     // 将原先的基线和控制点移动到新位置
     handleReplot() {
+      const { xctrl, yctrl, yslope, baseline } = this.baseCtrls_Copy
       const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
-      baseLineSeries.data = this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y])
+      baseLineSeries.data = baseline.map((val, index) => [index + 1, val])
 
       const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
-      baseLineCP.data = this.buildCPPointData(this._channelBaseCPChart)
+      // 第一个控制点（因为第一个和最后一个不会被删除）
+      const firstCP = this.channelBaseCPChart[0]
+      const { color, size } = firstCP
+      const baseCPPoints = xctrl.map((xAxis, index) => {
+        return {
+          size,
+          color,
+          point: {
+            x: xAxis,
+            y: yctrl[index]
+          }
+        }
+      })
+      baseLineCP.data = this.buildCPPointData(baseCPPoints)
     },
 
     /**
@@ -1568,8 +1279,26 @@ export default {
 
     // 确定对Baseline Control Points 的操作
     handleAccept() {
-      this.channelBaseLineChart = this._channelBaseLineChart
+      this.BaseCtrls = cloneDeep(this.baseCtrls_Copy)
-      this.channelBaseCPChart = this._channelBaseCPChart
+      const { baseline, xctrl, yctrl } = this.BaseCtrls
+      this.channelBaseLineChart.pointlist = baseline.map((val, index) => {
+        return {
+          x: index + 1,
+          y: val
+        }
+      })
+
+      this.channelBaseCPChart = xctrl.map((val, index) => {
+        return {
+          color: this.channelBaseCPChart[0].color,
+          name: index.toString(),
+          point: {
+            x: val,
+            y: yctrl[index]
+          },
+          size: 4
+        }
+      })
 
       this.handleSwitchOperation()
 
@@ -1638,6 +1367,74 @@ export default {
       }
     },
 
+    // 构建baseline
+    buildBaseLine(channelBaseLineChart) {
+      return buildLineSeries(
+        'BaseLine',
+        channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
+        channelBaseLineChart.color,
+        {
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            label: {
+              show: false
+            },
+            lineStyle: {
+              color: 'red',
+              width: 1
+            },
+            data: [{ xAxis: -1 }]
+          },
+          zlevel: 10
+        }
+      )
+    },
+
+    // 构建count
+    buildCountLine(channelCountChart) {
+      return buildLineSeries(
+        'CountChart',
+        channelCountChart.pointlist.map(({ x, y }) => [x, y]),
+        channelCountChart.color
+      )
+    },
+
+    // 构建Peaks
+    buildPeaks(channelPeakChart) {
+      return channelPeakChart.map((item, index) => {
+        return buildLineSeries(
+          'Peak_' + (index + 1),
+          item.pointlist.map(({ x, y }) => [x, y]),
+          item.color
+        )
+      })
+    },
+
+    // 构建基线控制点
+    buildCtrlPoint(channelBaseCPChart) {
+      return {
+        name: 'BaseLine_Ctrl_Point',
+        type: 'scatter',
+        data: this.buildCPPointData(channelBaseCPChart),
+        silent: true,
+        animation: false,
+        zlevel: 20
+      }
+    },
+
+    // 构建缩略图
+    buildBarChart(barChart) {
+      return buildLineSeries(
+        'BarChart',
+        barChart.map(({ x, y }) => [x, y]),
+        '#fff',
+        {
+          silent: true
+        }
+      )
+    },
+
     /**
      * 推入操作
      * @param {*} operator 操作符
@@ -1656,42 +1453,34 @@ export default {
     popOperationStack() {
       const { operator, operand } = this.operationStack.pop()
       const { index } = operand
+
+      const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
       switch (operator) {
         case Operators.ADD:
-          this._channelBaseCPChart.splice(index, 1)
+          xctrl.splice(index, 1)
-          this.buildGraphicRectByData()
+          yctrl.splice(index, 1)
+          yslope.splice(index, 1)
           break
         case Operators.MODIFY:
-          const { xAxis, yAxis } = operand
+          const { prevYAxis } = operand
 
           // 恢复点的y轴位置
-          this._channelBaseCPChart[index].point.y = yAxis
+          yctrl[index] = prevYAxis
-          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 {
+          const { removeXAxis, removeYAxis, removeYSlope } = operand
-            point: { x, y }
+          xctrl.splice(index, 0, removeXAxis)
-          } = operand
+          yctrl.splice(index, 0, removeYAxis)
-          this._channelBaseCPChart.splice(index, 0, {
+          yslope.splice(index, 0, removeYSlope)
-            point: {
-              x,
-              y
-            }
-          })
-          this.buildGraphicRectByData()
           break
         case Operators.SLOPE_CHANGE:
           const { slope } = operand
-          const { yslope } = this._baseCtrls
           yslope[index] = slope
           break
       }
+      this.buildRect()
+      // 恢复基线位置
+      this.redrawBaseLine()
     },
 
     /**
@@ -1726,6 +1515,7 @@ export default {
 
     .chart {
       height: 331px;
+      position: relative;
     }
 
     .thumbnail {

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

@@ -668,6 +668,7 @@ export default {
               this.isUploadingZip = false
             }
           } else {
+            this.isUploadingZip = false
             this.$message.error(message)
           }
         } catch (error) {

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -1079,13 +1079,17 @@ export default {
     handleRefresh(data) {
       this.handleResetState()
       data.DetailedInformation = this.detailedInfomation
+      this.clearCompareLine()
       this.dataProsess(data)
     },
 
     // 分析工具Accept时刷新部分数据
-    handleAccept() {
+    handleAccept(data) {
-      console.log('%c [ 分析工具Accept时刷新部分数据 ]-1046', 'font-size:13px; background:pink; color:#bf2c9f;')
+      console.log('%c [ handleAccept ]-1088', 'font-size:13px; background:pink; color:#bf2c9f;', data)
+      this.handleResetState()
+      // data.DetailedInformation = this.detailedInfomation
       this.clearCompareLine()
+      // this.dataProsess(data)
     },
 
     // 显示比较弹窗