diff --git a/src/views/spectrumAnalysis/beta-analysis.vue b/src/views/spectrumAnalysis/beta-analysis.vue
index c17a17a..5673589 100644
--- a/src/views/spectrumAnalysis/beta-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-analysis.vue
@@ -170,13 +170,14 @@ export default {
             this.sampleDetail = data
             this.emitGetFiles(data)
           }
-          // this.ROIAnalyzeLists = data.ROIAnalyzeLists
+          this.ROIAnalyzeLists = data.ROIAnalyzeLists
         } else {
           if (newVal.sampleId) {
             this.getSampleDetail()
           } else {
             this.getSelfStationSampleDetail()
           }
+          this.ROIAnalyzeLists = []
         }
         await this.$nextTick()
         this.$refs.betaChartRef.handleUnzoom()
@@ -185,6 +186,15 @@ export default {
       deep: true,
     },
   },
+  created() {
+    this.$bus.$on('selfRefresh', this.handleRefresh)
+    this.$bus.$on('selfAccept', this.handleAccept)
+  },
+  beforeDestroy() {
+    this.cancelLastRequest()
+    this.$bus.$on('selfRefresh', this.handleRefresh)
+    this.$bus.$off('selfAccept', this.handleAccept)
+  },
   methods: {
     async getAnalyzeCurrentSpectrum() {
       try {
@@ -478,6 +488,8 @@ export default {
       ]
 
       this.roiParamList = cloneDeep(this.boundaryList)
+
+      this.$bus.$emit('selfAnalyzeSampleTypeChange', val)
     },
     cancelLastRequest() {
       if (this._cancelToken && typeof this._cancelToken == 'function') {
@@ -507,9 +519,50 @@ export default {
       this.$set(this.boundaryList, index, [start, end])
       this.$set(this.roiParamList, index, [start, end])
     },
-  },
-  destroyed() {
-    this.cancelLastRequest()
+
+    // 从分析工具刷新部分数据
+    handleRefresh(data, index) {
+      this.ROIAnalyzeLists[index] = this.$set(this.ROIAnalyzeLists, index, data)
+
+      const { inputFileName } = this.sample
+      updateSampleData({
+        inputFileName,
+        key: 'ROIAnalyzeLists',
+        data: this.ROIAnalyzeLists,
+      })
+    },
+
+    // 分析工具Accept时刷新部分数据
+    handleAccept(data, index) {
+      const {
+        allData,
+        peak,
+        shadowChannelChart,
+        shadowEnergyChart,
+        shapeChannelData,
+        shapeEnergyData,
+        barChart,
+        BaseCtrls,
+      } = data
+
+      this.ROIAnalyzeLists[index] = this.$set(this.ROIAnalyzeLists, index, {
+        allData,
+        peak,
+        shadowChannelChart,
+        shadowEnergyChart,
+        shapeChannelData,
+        shapeEnergyData,
+        barChart,
+        BaseCtrls,
+      })
+
+      const { inputFileName } = this.sample
+      updateSampleData({
+        inputFileName,
+        key: 'ROIAnalyzeLists',
+        data: this.ROIAnalyzeLists,
+      })
+    },
   },
 }
 </script>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/EditSlopeModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/EditSlopeModal.vue
new file mode 100644
index 0000000..4dc3de0
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/EditSlopeModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <custom-modal v-model="visible" :title="'Slope at ' + (index + 1)" :width="250">
+    <a-input-number v-model="value"></a-input-number>
+    <template slot="custom-footer">
+      <div class="footer">
+        <a-button type="primary" @click="handleOK">Ok</a-button>
+        <a-button @click="visible = false">Cancel</a-button>
+      </div>
+    </template>
+  </custom-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      index: -1,
+      value: 0,
+      prevValue: 0,
+      allowNaN: false,
+      visible: false
+    }
+  },
+  methods: {
+    /**
+     * 打开弹窗
+     * @param {{ index: number; value: number; allowNaN: boolean; }} config
+     */
+    open(config) {
+      this.index = config.index
+
+      this.value = config.value
+      this.prevValue = config.value
+
+      this.allowNaN = config.allowNaN
+      this.visible = true
+    },
+    handleOK() {
+      if (this.allowNaN || this.value) {
+        this.$emit('change', this.value, this.index, this.prevValue)
+        this.visible = false
+      } else {
+        this.$message.warn('Input value invalid.')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-input-number {
+  width: 100%;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
new file mode 100644
index 0000000..e234442
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
@@ -0,0 +1,246 @@
+<template>
+  <custom-modal centered v-model="visible" :width="1200" title="Fit Peaks and Baseline">
+    <a-spin :spinning="isLoading">
+      <custom-table :columns="columns" :list="list" :canSelect="false">
+        <template v-for="(slot, index) in slots" :slot="slot.slotName" slot-scope="{ record }">
+          <a-checkbox v-if="slot.isCheckbox" :key="index" v-model="record[slot.dataIndex]"> Fixed </a-checkbox>
+          <a-input
+            v-else
+            :key="index"
+            v-model="record[slot.dataIndex]"
+            :readOnly="slot.isStatic"
+            @change="handleInput(record, slot.dataIndex)"
+          ></a-input>
+        </template>
+      </custom-table>
+    </a-spin>
+    <div slot="custom-footer">
+      <a-space>
+        <a-button type="primary" :disabled="isLoading" :loading="isAcceptting" @click="handlePeaks(true)">
+          Peaks
+        </a-button>
+        <a-button @click="visible = false">Cancel</a-button>
+      </a-space>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import ModalMixin from '@/mixins/ModalMixin'
+import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
+import { cloneDeep } from 'lodash'
+
+const columns = [
+  {
+    title: 'Peak',
+    dataIndex: 'lab',
+    width: 100,
+    scopedSlots: {
+      customRender: 'lab',
+    },
+    isStatic: true,
+  },
+  {
+    title: 'Nuclide',
+    dataIndex: 'nuclide',
+    width: 100,
+    scopedSlots: {
+      customRender: 'nuclide',
+    },
+    isStatic: true,
+  },
+  {
+    title: 'Energy',
+    dataIndex: 'energy',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Energy',
+    },
+  },
+  {
+    title: 'NetArea',
+    dataIndex: 'netArea',
+    width: 100,
+    scopedSlots: {
+      customRender: 'netArea',
+    },
+  },
+  {
+    title: 'FWHM',
+    dataIndex: 'fwhm',
+    width: 100,
+    scopedSlots: {
+      customRender: 'fwhm',
+    },
+  },
+  {
+    title: 'Step',
+    dataIndex: 'step',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Step',
+    },
+  },
+  {
+    title: 'BWGamma',
+    dataIndex: 'bwGamma',
+    width: 100,
+    scopedSlots: {
+      customRender: 'BWGamma',
+    },
+  },
+  {
+    title: 'NetArea',
+    dataIndex: 'netAreaB',
+    width: 100,
+    scopedSlots: {
+      customRender: 'netAreaB',
+    },
+    isCheckbox: true,
+  },
+  {
+    title: 'Centroid',
+    dataIndex: 'centroid',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Centroid',
+    },
+    isCheckbox: true,
+  },
+  {
+    title: 'FWHM',
+    dataIndex: 'fwhmB',
+    width: 100,
+    scopedSlots: {
+      customRender: 'fwhmB',
+    },
+    isCheckbox: true,
+  },
+]
+export default {
+  mixins: [ModalMixin, SampleDataMixin],
+  props: {
+    channel_1: {
+      type: Number,
+    },
+    channel_2: {
+      type: Number,
+    },
+    isInsertPeak: {
+      type: Boolean,
+    },
+  },
+  data() {
+    this.columns = columns
+    return {
+      list: [],
+      originalTablePeaksList: [],
+      isAcceptting: false,
+    }
+  },
+  methods: {
+    async handlePeaks(accept) {
+      try {
+        this.isAcceptting = true
+        const { inputFileName: fileName } = this.sampleData
+        const { success, result, message } = await postAction('/selfStation/acceptResults', {
+          fileName,
+          accept,
+          oldPeak: this.oldPeaks,
+          newPeak: this.newPeaks,
+          flag: this.isInsertPeak ? 'insert' : 'fit',
+          tablePeaksList: this.list,
+        })
+        if (success) {
+          this.visible = false
+          this.$emit(accept ? 'result' : 'cancel', result)
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isAcceptting = false
+      }
+    },
+
+    // 值变化
+    handleInput(record, index) {
+      const find = this.originalTablePeaksList.find((item) => item.index == record.lab)
+      if (find) {
+        const table2NewPeakMap = {
+          energy: 'energy',
+          netArea: 'area',
+          fwhm: 'fwhm',
+        }
+
+        find[table2NewPeakMap[index]] = record[index]
+      }
+    },
+
+    async getData() {
+      const { sampleId, inputFileName: fileName } = this.sampleData
+      try {
+        let url = '/selfStation/fitPeak'
+        let params = {
+          left: this.channel_1,
+          right: this.channel_2,
+          fileName,
+        }
+
+        // 如果是Insert Peak
+        if (this.isInsertPeak) {
+          url = '/selfStation/insertPeak'
+          params = {
+            sampleId,
+            fileName,
+            curChan: Math.ceil(this.channel_1),
+          }
+        }
+
+        this.isLoading = true
+        const { success, result, message } = await getAction(url, params)
+        if (success) {
+          const { newPeaks, oldPeaks, tablePeaksList } = result
+          this.originalTablePeaksList = cloneDeep(tablePeaksList)
+
+          tablePeaksList.forEach((item) => {
+            item.energy = Number(item.energy).toPrecision(6)
+            item.netArea = Number(item.netArea).toPrecision(6)
+            item.fwhm = Number(item.fwhm).toPrecision(6)
+          })
+          this.list = tablePeaksList
+          
+          this.newPeaks = newPeaks
+          this.oldPeaks = oldPeaks
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.getData()
+    },
+  },
+  computed: {
+    slots() {
+      return columns.map((column) => {
+        return {
+          isCheckbox: column.isCheckbox,
+          isStatic: column.isStatic,
+          dataIndex: column.dataIndex,
+          slotName: column.scopedSlots.customRender,
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/GeneralCommentModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/GeneralCommentModal.vue
new file mode 100644
index 0000000..5dab8bb
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/GeneralCommentModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <custom-modal v-model="visible" title="General Comment" :okHandler="handleOk">
+    <a-spin :spinning="isLoading">
+      <a-textarea :rows="10" v-model="content"></a-textarea>
+    </a-spin>
+  </custom-modal>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import ModalMixin from '@/mixins/ModalMixin'
+import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
+export default {
+  mixins: [ModalMixin, SampleDataMixin],
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    async handleOk() {
+      if (!this.content) {
+        this.$message.warn('Please Input Comment')
+        throw new Error('Comment is Empty')
+      }
+      try {
+        this.isSubmitting = true
+        const { inputFileName: fileName } = this.sampleData
+        const { success, message } = await postAction('/selfStation/addGeneralComment', {
+          fileName,
+          comments: this.content
+        })
+        if (!success) {
+          this.$message.error(message)
+          throw new Error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    async getComment() {
+      try {
+        this.isLoading = true
+        const { inputFileName: fileName } = this.sampleData
+        const { success, result, message } = await getAction('/selfStation/viewGeneralComment', {
+          fileName
+        })
+        if (success) {
+          this.content = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.content = ''
+      this.getComment()
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewChart.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
new file mode 100644
index 0000000..414c40f
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
@@ -0,0 +1,149 @@
+<template>
+  <custom-chart :option="option" />
+</template>
+<script>
+import { cloneDeep } from 'lodash'
+import CustomChart from '@/components/CustomChart/index.vue'
+const initialOption = {
+  grid: {
+    top: 40,
+    bottom: 50,
+    right: 30,
+    left: 50,
+  },
+  title: {
+    text: 'Energy',
+    textStyle: {
+      color: '#8FD4F8',
+      fontSize: 14,
+      fontWeight: 'normal',
+    },
+    right: 10,
+    bottom: 5,
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)',
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)',
+      },
+    },
+    axisLabel: {
+      color: '#ade6ee',
+    },
+    min: 'dataMin',
+    max: 'dataMax',
+    animation: false,
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)',
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)',
+      },
+    },
+    axisLabel: {
+      color: '#ade6ee',
+    },
+    axisTick: {
+      show: false,
+    },
+    name: 'Counts',
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 14,
+    },
+    animation: false,
+  },
+  series: [],
+}
+export default {
+  components: {
+    CustomChart,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      option: cloneDeep(initialOption),
+    }
+  },
+  watch: {
+    data: {
+      handler() {
+        const { chartData, selPos } = this.data
+        console.log(chartData);
+        const series = []
+        chartData.forEach(({ pointlist, color, name }) => {
+          console.log(color);
+          // 根据黄色line 调整最大最小yAxis
+          if (name === 'Energy') {
+            this.option.yAxis.max = Math.ceil(Math.max(...pointlist.map(({ y }) => y)))
+            this.option.yAxis.min = Math.floor(Math.min(...pointlist.map(({ y }) => y)))
+          }
+          series.push({
+            type: 'line',
+            data: pointlist.map(({ x, y }) => [x, y]),
+            itemStyle: {
+              color,
+            },
+            lineStyle: {
+              width: 1
+            },
+            symbol: 'none',
+            animation: false,
+            // markLine: {
+            //   silent: true,
+            //   symbol: 'none',
+            //   data: [],
+            //   animation: false,
+            //   lineStyle: {
+            //     type: 'solid',
+            //     width: 2
+            //   }
+            // }
+          })
+        })
+
+        series[0].markLine = {
+          data: [
+            {
+              xAxis: selPos,
+              label: {
+                formatter: '{c} keV',
+                color: '#f00',
+                fontWeight: 'bold',
+                fontSize: 14,
+              },
+            },
+          ],
+          symbol: 'none',
+          lineStyle: {
+            color: '#f00',
+          },
+          emphasis: {
+            disabled: true,
+          },
+        }
+
+        this.option.series = series
+      },
+      immediate: true,
+    },
+  },
+}
+</script>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
new file mode 100644
index 0000000..cae40bd
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
@@ -0,0 +1,587 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="Nuclide Review" :footer="null">
+    <a-spin :spinning="isLoading">
+      <div class="nuclide-review-search">
+        <span @click="handleNuclideChange('prev')">&lt;</span>
+        <a-form-model layout="inline">
+          <a-form-model-item label="Energy">
+            <a-input-number v-model="model.energy"></a-input-number>
+          </a-form-model-item>
+          <a-form-model-item label="Tolerance">
+            <a-input-number v-model="model.tolerance"></a-input-number>
+          </a-form-model-item>
+          <a-button type="primary" @click="handleSearch">Search</a-button>
+        </a-form-model>
+        <span @click="handleNuclideChange('next')">&gt;</span>
+      </div>
+
+      <!-- 以下是表格部分 -->
+      <div class="nuclide-review-table">
+        <div class="nuclide-review-table-nuclide">
+          <div class="nuclide-review-table-nuclide-header">Nuclide</div>
+          <div class="nuclide-review-table-nuclide-content">
+            <div
+              class="nuclide-review-table-nuclide-item"
+              :class="currNuclide == item ? 'active' : ''"
+              v-for="(item, index) in nuclideList"
+              :key="item"
+              @click="handleNuclideClick(index)"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div class="nuclide-review-table-table">
+          <div class="title">
+            <a-form-model>
+              <a-row>
+                <a-col :span="6">
+                  <a-form-model-item label="Name">
+                    {{ info.name }}
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item label="Half Life">
+                    {{ info.halfLife }}
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item label="Half Life Err">
+                    {{ info.halfLifeErr }}
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item label="Lines">
+                    {{ info.lines }}
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+            </a-form-model>
+          </div>
+          <a-table
+            ref="tableRef"
+            :class="list.length ? 'has-data' : ''"
+            :columns="columns"
+            :dataSource="list"
+            :scroll="{ y: 180 }"
+            :customRow="customRow"
+            :pagination="false"
+            size="small"
+          >
+            <template slot="keyLine" slot-scope="text">
+              <span v-if="text == 1" class="green-check-mark"> </span>
+            </template>
+          </a-table>
+        </div>
+      </div>
+      <!-- 表格部分结束 -->
+
+      <!-- 以下是图表部分 -->
+      <div class="nuclide-review-chart">
+        <div class="nuclide-review-chart-prev">
+          <span @click="handleChangeChart('prev')"> &lt; </span>
+        </div>
+        <a-row class="nuclide-review-chart-list">
+          <a-col class="nuclide-review-chart-item" :span="8" v-for="(chartItem, index) in currChartList" :key="index">
+            <p>{{ chartItem.title }}</p>
+            <div
+              class="nuclide-review-chart-item-chart"
+              :class="currSelectedTableIndex == chartItem._index ? 'active' : ''"
+            >
+              <nuclide-review-chart :data="chartItem" />
+            </div>
+            <p>{{ chartItem.bottom }}</p>
+          </a-col>
+        </a-row>
+        <div class="nuclide-review-chart-next">
+          <span @click="handleChangeChart('next')"> &gt; </span>
+        </div>
+      </div>
+      <!-- 图表部分结束 -->
+    </a-spin>
+  </custom-modal>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import NuclideReviewChart from './NuclideReviewChart.vue'
+import ModalMixin from '@/mixins/ModalMixin'
+import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
+
+const columns = [
+  {
+    title: 'Id',
+    width: '5%',
+    customRender: (_, __, index) => {
+      return index + 1
+    },
+  },
+  {
+    title: 'Full Name',
+    dataIndex: 'fullName',
+    width: '15%',
+  },
+  {
+    title: 'Energy',
+    dataIndex: 'energy',
+    width: '15%',
+    sorter: (a, b) => a.energy - b.energy,
+  },
+  {
+    title: 'Energy Err',
+    dataIndex: 'energyUncert',
+    width: '15%',
+  },
+  {
+    title: 'Abundance(%)',
+    dataIndex: 'yield',
+    width: '15%',
+    sorter: (a, b) => a.yield - b.yield,
+  },
+  {
+    title: 'Abundance Err(%)',
+    dataIndex: 'yieldUncert',
+    width: '15%',
+  },
+  {
+    title: 'KeyLine',
+    dataIndex: 'keyFlag',
+    width: '15%',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'keyLine',
+    },
+  },
+]
+export default {
+  components: { NuclideReviewChart },
+  mixins: [ModalMixin, SampleDataMixin],
+  props: {
+    channel: {
+      type: Number,
+    },
+    nuclide: {
+      type: String,
+    },
+    page: {
+      type: String,
+      default: 'AnalyzeInteractiveToolModal'
+    },
+  },
+  data() {
+    this.columns = columns
+    return {
+      nuclideList: [],
+      list: [], // 表格里的数据
+      currNuclide: '',
+
+      currSelectedTableIndex: 0, // 选中的表格中的行
+
+      chartList: [],
+      currChartList: [], // 当前展示的图表的列表,一般是3个
+
+      model: {},
+      info: {},
+    }
+  },
+  methods: {
+    // 搜索栏的向前/向后按钮
+    handleNuclideChange(direction) {
+      const currIndex = this.nuclideList.findIndex((item) => item == this.currNuclide)
+      if (direction == 'prev' && currIndex > 0) {
+        this.handleNuclideClick(currIndex - 1)
+      } else if (direction == 'next' && currIndex !== this.nuclideList.length - 1) {
+        this.handleNuclideClick(currIndex + 1)
+      }
+    },
+
+    scrollIntoView(index) {
+      const tableEle = this.$refs.tableRef.$el
+      const tableBodyEle = tableEle.querySelector('.ant-table-body')
+      const prevEle = tableBodyEle.querySelector(`.ant-table-row:nth-child(${index + 1})`)
+      tableBodyEle.scrollTop = prevEle.offsetTop
+    },
+
+    // 左侧核素列表点击
+    handleNuclideClick(index) {
+      this.currNuclide = this.nuclideList[index]
+      this.getInfoByNuclide()
+    },
+
+    selectTableRow(index) {
+      this.currSelectedTableIndex = index
+
+      let startIndex = 0
+      let endIndex = 0
+      if (index == 0) {
+        // 选中了第一个，则往后数三个
+        endIndex = startIndex + 3
+      } else if (index == this.list.length - 1) {
+        // 选中了最后一个，则往前数三个
+        endIndex = index + 1
+        startIndex = endIndex - 3
+      } else {
+        startIndex = index - 1
+        endIndex = index + 2
+      }
+      if (startIndex < 0) {
+        startIndex = 0
+      }
+      this.currChartList = this.chartList.slice(startIndex, endIndex)
+    },
+
+    // 向前/向后切换图表
+    handleChangeChart(direction) {
+      const currIndex = this.currSelectedTableIndex
+      if (direction == 'prev') {
+        const willJumpIndex = currIndex - 3
+        if (willJumpIndex >= 0) {
+          this.selectTableRow(willJumpIndex)
+          this.scrollIntoView(willJumpIndex)
+        } else {
+          this.selectTableRow(0)
+          this.scrollIntoView(0)
+        }
+      } else if (direction == 'next') {
+        const willJumpIndex = currIndex + 3
+        if (willJumpIndex <= this.list.length - 2) {
+          this.selectTableRow(willJumpIndex)
+          this.scrollIntoView(willJumpIndex)
+        } else {
+          this.selectTableRow(this.list.length - 1)
+          this.scrollIntoView(this.list.length - 1)
+        }
+      }
+    },
+
+    // 实现单击选中/反选功能
+    customRow(record, index) {
+      return {
+        class: 'custom-table-row' + (this.currSelectedTableIndex == index ? ' ant-table-row-selected' : ''),
+        on: {
+          click: () => {
+            this.selectTableRow(index)
+          },
+        },
+      }
+    },
+
+    // 弹窗时初次获取
+    async getInfo() {
+      try {
+        this.isLoading = true
+        const { sampleId, inputFileName: fileName } = this.sampleData
+        let url = '/selfStation/nuclideReview'
+        // 根据新需求，首页查询中需要包含其他数据，如果首页跳转则请求另外的接口 20231219:xiao
+        if(this.page === 'gamma-analysis'){
+          url = '/selfStation/nuclideReviewGamma'
+        }
+        const { success, result, message } = await getAction(url, {
+          sampleId: sampleId,
+          channel: this.channel,
+          fileName,
+        })
+        if (success) {
+          this.model = {
+            energy: result ? result.energy : undefined,
+            tolerance: 0.5,
+          }
+
+          this.handleResData(result)
+          if (this.nuclide && this.nuclideList.length) {
+            this.currNuclide = this.nuclide
+            this.getInfoByNuclide()
+          }
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    // 处理返回的数据
+    handleResData(result) {
+      if (!result) {
+        result = {
+          chart: [],
+          halfLife: null,
+          halfLifeErr: null,
+          lines: null,
+          list: [],
+          name: '',
+          table: [],
+        }
+      }
+
+      const { chart, halfLife, halfLifeErr, lines, list, name, table } = result
+
+      this.info = {
+        halfLife,
+        halfLifeErr,
+        lines,
+        name,
+      }
+
+      this.list = table
+      this.nuclideList = list
+
+      chart.forEach((chartItem, index) => (chartItem._index = index))
+      this.chartList = chart
+
+      this.currNuclide = this.nuclideList[0]
+      this.selectTableRow(table.length > 1 ? 1 : 0)
+    },
+
+    // 点击左侧Nuclide切换
+    async getInfoByNuclide() {
+      try {
+        this.isLoading = true
+        const { sampleId, inputFileName } = this.sampleData
+        let url = '/selfStation/changeNuclide'
+        // 根据新需求，首页查询中需要包含其他数据，如果首页跳转则请求另外的接口 20231219:xiao
+        if(this.page === 'gamma-analysis'){
+          url = '/selfStation/changeNuclideGamma'
+        }
+        const { success, result, message } = await getAction(url, {
+          sampleId,
+          nuclideName: this.currNuclide,
+          fileName: inputFileName,
+        })
+        if (success) {
+          const { chart, halfLife, halfLifeErr, lines, name, table } = result
+
+          this.info = {
+            halfLife,
+            halfLifeErr,
+            lines,
+            name,
+          }
+
+          this.list = table
+
+          chart.forEach((chartItem, index) => (chartItem._index = index))
+          this.chartList = chart
+          this.selectTableRow(table.length > 1 ? 1 : 0)
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.getInfo()
+    },
+
+    // 搜索
+    async handleSearch() {
+      try {
+        this.isLoading = true
+        const { sampleId, inputFileName: fileName } = this.sampleData
+        const { success, result, message } = await getAction('/selfStation/searchNuclide', {
+          sampleId,
+          fileName,
+          ...this.model,
+        })
+        if (success) {
+          this.handleResData(result)
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.nuclide-review {
+  &-search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid rgba(12, 235, 201, 0.3);
+    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+    background-color: rgba(12, 235, 201, 0.05);
+
+    > span {
+      color: @primary-color;
+      width: 30px;
+      height: 30px;
+      border: 1px solid @primary-color;
+      border-radius: 50%;
+      margin: 0 10px;
+      text-align: center;
+      font-size: 20px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .ant-form {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-table {
+    display: flex;
+    height: 250px;
+    margin-top: 10px;
+
+    &-nuclide {
+      width: 150px;
+      display: flex;
+      flex-direction: column;
+
+      &-header {
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background-color: #126b82;
+      }
+
+      &-content {
+        background-color: #275466;
+        flex: 1;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      &-item {
+        padding: 0 5px;
+        height: 30px;
+        line-height: 30px;
+        cursor: pointer;
+        user-select: none;
+
+        &.active {
+          background-color: #296d81;
+        }
+      }
+    }
+
+    &-table {
+      margin-left: 20px;
+      flex: 1;
+      overflow: hidden;
+
+      .title {
+        ::v-deep {
+          .ant-form {
+            &-item {
+              margin-bottom: 0;
+
+              &-label,
+              &-control {
+                line-height: 32px;
+              }
+            }
+          }
+        }
+      }
+
+      .ant-table-wrapper {
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 180px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 181px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+
+  &-chart {
+    margin-top: 20px;
+    height: 300px;
+    //background-color: #05354c;
+    display: flex;
+    align-items: center;
+
+    &-list {
+      flex: 1;
+      height: 100%;
+    }
+
+    &-item {
+      height: 100%;
+      p {
+        height: 30px;
+        line-height: 30px;
+        font-size: 16px;
+        text-align: center;
+        margin-bottom: 0;
+      }
+
+      &-chart {
+        height: calc(100% - 60px);
+        border: 4px solid transparent;
+
+        &.active {
+          background-color: #0a6f82;
+          border-color: #0d8696;
+        }
+      }
+    }
+
+    &-prev,
+    &-next {
+      width: 40px;
+      text-align: center;
+
+      span {
+        display: inline-block;
+        color: @primary-color;
+        width: 30px;
+        height: 30px;
+        border: 1px solid @primary-color;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+}
+
+.custom-table-row {
+  cursor: pointer;
+}
+
+.green-check-mark {
+  &::after {
+    @color: #3df9a7;
+
+    content: '';
+    border-radius: 0px;
+    width: 16px;
+    height: 9px;
+    display: inline-block;
+    border-bottom: 3px solid @color;
+    border-left: 3px solid @color;
+    transform: rotate(-45deg);
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/PeakCommentModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/PeakCommentModal.vue
new file mode 100644
index 0000000..b2e13b7
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/PeakCommentModal.vue
@@ -0,0 +1,76 @@
+<template>
+  <custom-modal v-model="visible" title="Peak Comment" :okHandler="handleOk">
+    <a-spin :spinning="isLoading">
+      <a-textarea :rows="10" v-model="content"></a-textarea>
+    </a-spin>
+  </custom-modal>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import ModalMixin from '@/mixins/ModalMixin'
+import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
+export default {
+  mixins: [ModalMixin, SampleDataMixin],
+  props: {
+    curRow: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    async handleOk() {
+      if (!this.content) {
+        this.$message.warn('Please Input Comment')
+        throw new Error('Comment is Empty')
+      }
+      try {
+        this.isSubmitting = true
+        const { inputFileName: fileName } = this.sampleData
+        const { success, message } = await postAction('/selfStation/addPeakComment', {
+          fileName,
+          comments: this.content,
+          curRow: this.curRow
+        })
+        if (!success) {
+          this.$message.error(message)
+          throw new Error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    async getComment() {
+      try {
+        this.isLoading = true
+        const { inputFileName: fileName } = this.sampleData
+        const { success, result, message } = await getAction('/selfStation/viewPeakComment', {
+          fileName,
+          curRow: this.curRow
+        })
+        if (success) {
+          this.content = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.content = ''
+      this.getComment()
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/RectList.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/components/RectList.vue
new file mode 100644
index 0000000..b66ab19
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/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>
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/index.vue
new file mode 100644
index 0000000..07a2e4a
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaAnalyzeInteractiveToolModal/index.vue
@@ -0,0 +1,2035 @@
+<template>
+  <custom-modal
+    v-model="visible"
+    :width="1280"
+    class="interactive-analysis-tools-dialog"
+    :enableFullScreen="true"
+    title="Interactive Analyse Tools"
+    :footer="null"
+    destroy-on-close
+    @fullscreen="handleFullScreenChange"
+  >
+    <div class="interactive-analysis-tools">
+      <div class="interactive-analysis-tools-left">
+        <div class="chart">
+          <CustomChart
+            ref="chartRef"
+            :option="option"
+            :opts="opts"
+            autoresize
+            @zr:mousedown="handleMouseDown"
+            @zr:mouseup="handleMouseUp"
+            @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">
+          <CustomChart ref="thumbnailRef" :option="thumbnailOption" autoresize />
+        </div>
+        <!-- 缩略图结束 -->
+
+        <!-- 表格 -->
+        <div class="table">
+          <p class="title">
+            <span @click="handleChangeMarkLine('prev')">&lt; </span>
+            6 Peaks with Anthro.Nuclides
+            <span @click="handleChangeMarkLine('next')">&gt;</span>
+          </p>
+          <custom-table
+            ref="tableRef"
+            size="small"
+            :class="list.length ? 'has-data' : ''"
+            :list="list"
+            :columns="columns"
+            :scroll="{ y: 288 }"
+            :selectedRowKeys.sync="selectedKeys"
+            rowKey="index"
+            :canDeselect="false"
+            @rowClick="handleTableRowClick"
+          >
+          </custom-table>
+          <div class="operators">
+            <a-select v-model="currROIIndex" style="flex: 1" @change="setInfoByType">
+              <a-select-option v-for="(_, index) in 4" :value="index" :key="index">ROI{{ _ }}</a-select-option>
+            </a-select>
+            <a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
+            <a-button type="primary" @click="handleAddPeakComment()">Add Peak Comment</a-button>
+            <a-button type="primary" @click="handleAddGeneralComment()">Add General Comment</a-button>
+          </div>
+        </div>
+        <!-- 表格结束 -->
+      </div>
+
+      <!-- 右侧 -->
+      <div class="interactive-analysis-tools-right">
+        <title-over-border class="peak-box-container" :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
+          <div class="peak-box">
+            <!-- 按钮组1 -->
+            <template v-if="btnGroupType == 1">
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleInsert">Insert</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleDel">Delete</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">Fit</a-button>
+              </div>
+
+              <div class="peak-box-item symbol" :key="4">
+                <a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
+                <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
+              </div>
+
+              <div class="peak-box-item base-line">
+                <a-button type="primary" @click="handleSwitchOperation">BaseLine</a-button>
+              </div>
+            </template>
+            <!-- 按钮组2 -->
+            <template v-if="btnGroupType == 2">
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleAddCP">(A)dd CP</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" key="modify-btn" :class="{ 'is-modify': isModifying }" @click="handleModifyCP"
+                  >(M)odify CP</a-button
+                >
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" :loading="isReploting" @click="handleReplot">Replot</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" :loading="isAccepting" @click="handleAccept">Accept</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="handleSwitchOperation">Cancel</a-button>
+              </div>
+            </template>
+          </div>
+        </title-over-border>
+        <div class="reset-btn-box">
+          <a-button type="primary" @click="handleResetChart">Reset Chart</a-button>
+        </div>
+        <div class="identify-box">
+          <title-over-border title="Nuclide Identify">
+            <a-form-model class="tolerance">
+              <a-form-model-item label="Tolerance">
+                <a-input-number
+                  v-model="model.tolerance"
+                  :step="0.1"
+                  :min="0"
+                  @change="handleToleranceChange"
+                ></a-input-number>
+              </a-form-model-item>
+            </a-form-model>
+            <div class="identify-item">
+              <div class="title">Possible Nuclide</div>
+              <a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
+                <div class="content">
+                  <template v-if="selectedTableItem && selectedTableItem._possible">
+                    <div
+                      class="item"
+                      :class="{ active: possible == model.possibleNuclide }"
+                      v-for="(possible, index) in selectedTableItem._possible"
+                      :key="index"
+                      @click="model.possibleNuclide = possible"
+                    >
+                      {{ possible }}
+                    </div>
+                  </template>
+                </div>
+              </a-spin>
+            </div>
+            <div class="identify-item">
+              <div class="title">Nuclide Identified</div>
+              <div class="content">
+                <template v-if="selectedTableItem">
+                  <div
+                    class="item"
+                    :class="{ active: identified == model.identifiedNuclide }"
+                    v-for="(identified, index) in selectedTableItem.nuclides"
+                    :key="index"
+                    @click="model.identifiedNuclide = identified"
+                  >
+                    {{ identified }}
+                  </div>
+                </template>
+              </div>
+            </div>
+            <div class="identify-operators">
+              <span class="text">{{ model.possibleNuclide }}</span>
+              <a-button type="primary" :disabled="!model.possibleNuclide" @click="handleAddNuclide">Add</a-button>
+              <a-button type="primary" @click="handleDelNuclide">Del</a-button>
+            </div>
+          </title-over-border>
+        </div>
+      </div>
+      <!-- 右侧结束 -->
+    </div>
+    <!-- Peak Comment弹窗 开始 -->
+    <peak-comment-modal v-model="peakCommentModalVisible" :curRow="curRow" />
+    <!-- Peak Comment弹窗 结束 -->
+
+    <!-- General Comment弹窗 开始 -->
+    <general-comment-modal v-model="generalCommentModalVisible" />
+    <!-- General Comment弹窗 结束 -->
+
+    <!-- Fit Peaks and Baseline弹窗 开始 -->
+    <fit-peaks-and-base-line-modal
+      v-model="fitPeaksAndBaselineModalVisible"
+      :channel_1="channel_1"
+      :channel_2="channel_2"
+      :isInsertPeak="isInsertPeak"
+      @result="handleInsertSuccess"
+      @cancel="handleCancelSuccess"
+    />
+    <!-- Fit Peaks and Baseline弹窗 结束 -->
+    <!-- Nuclide Review 弹窗开始 -->
+    <nuclide-review-modal v-model="nuclideReviewModalVisible" :sampleId="sampleId" :channel="currChannel" />
+    <!-- Nuclide Review 弹窗结束 -->
+
+    <!-- Edit Slope 弹窗 -->
+    <edit-slope-modal ref="editSlopeModal" @change="handleSlopeChange" />
+    <!-- Edit Slope 结束 -->
+  </custom-modal>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import TitleOverBorder from '../../TitleOverBorder.vue'
+import PeakCommentModal from './components/PeakCommentModal.vue'
+import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
+import NuclideReviewModal from './components/NuclideReviewModal.vue'
+import { getAction, postAction } from '@/api/manage'
+import { cloneDeep } from 'lodash'
+import { buildLineSeries, findSeriesByName, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
+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'
+import { findNearPeak, getLineData, transformPointListData } from '@/utils/sampleHelper'
+import { getSampleData } from '@/utils/SampleStore'
+
+// 初始配置
+const initialOption = {
+  grid: {
+    top: 40,
+    left: 80,
+    right: 30,
+    bottom: 30,
+  },
+  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,
+      },
+    },
+    formatter: undefined,
+    className: 'figure-chart-option-tooltip',
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: '#ade6ee',
+      },
+    },
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#ade6ee',
+      },
+    },
+    min: 1,
+    max: 'dataMax',
+    animation: false,
+  },
+  yAxis: {
+    type: 'log',
+    name: 'Counts',
+    nameLocation: 'center',
+    nameGap: 40,
+    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: 0.1,
+    max: 'dataMax',
+    animation: false,
+  },
+  series: [],
+  brush: {},
+}
+
+const columns = [
+  {
+    title: 'ID',
+    customRender: (_, __, index) => {
+      return index + 1
+    },
+    width: 60,
+  },
+  {
+    title: 'Energy (keV)',
+    dataIndex: 'energy',
+    width: 120,
+    customRender: (text) => {
+      return text.toFixed(3)
+    },
+  },
+  {
+    title: 'Centroid (C)',
+    dataIndex: 'peakCentroid',
+    width: 120,
+    customRender: (text) => {
+      return text.toFixed(3)
+    },
+  },
+  {
+    title: 'FWHM (keV)',
+    dataIndex: 'fwhm',
+    width: 120,
+    customRender: (text) => {
+      return text.toFixed(3)
+    },
+  },
+  {
+    title: 'Area',
+    dataIndex: 'area',
+    width: 120,
+    customRender: (text) => {
+      return text.toFixed(3)
+    },
+  },
+  {
+    title: 'Detectability',
+    dataIndex: 'significance',
+    width: 120,
+    customRender: (text) => {
+      return text == 'Infinity' ? 'inf' : text.toFixed(3)
+    },
+  },
+  {
+    title: '#Cmnt',
+    dataIndex: 'comments',
+    width: 120,
+  },
+  {
+    title: 'Nuclides',
+    dataIndex: 'nuclides',
+    width: 120,
+    ellipsis: true,
+    customRender: (text) => {
+      return text && text.join(';')
+    },
+  },
+]
+
+// 缩略图配置
+const thumbnailOption = {
+  grid: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: '#fff',
+      },
+    },
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    min: 1,
+    max: 'dataMax',
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    max: 0,
+    min: 0,
+  },
+  series: null,
+}
+
+const nuclideIdentifyModal = {
+  possibleNuclide: '',
+  tolerance: 0.5,
+  identifiedNuclide: '',
+}
+
+// 操作类型
+const Operators = {
+  ADD: 1, // 新增
+  REMOVE: 2, // 移除
+  MODIFY: 3, // 改变
+  SLOPE_CHANGE: 4, // 改变slope
+}
+
+export default {
+  mixins: [SampleDataMixin],
+  components: {
+    CustomChart,
+    TitleOverBorder,
+    PeakCommentModal,
+    FitPeaksAndBaseLineModal,
+    NuclideReviewModal,
+    GeneralCommentModal,
+    EditSlopeModal,
+    RectList,
+  },
+  props: {
+    colorConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      sampleType: 'sample',
+      columns,
+      searchParam: {
+        energy: '',
+        tolerance: '',
+      },
+      option: cloneDeep(initialOption),
+      opts: { notMerge: false },
+      thumbnailOption: cloneDeep(thumbnailOption),
+      channelBaseCPChart: [],
+      channelBaseLineChart: [],
+      channelCountChart: [],
+      channelPeakChart: [],
+      barChart: [],
+      energy: [],
+      list: [],
+      BaseCtrls: {},
+      baseCtrls_Copy: {},
+      sampleId: -1,
+
+      peakCommentModalVisible: false, // Comment 弹窗是否显示
+      generalCommentModalVisible: false, // Comment 弹窗是否显示
+
+      btnGroupType: 1, // 右侧 Peak 中的按钮组切换
+
+      selectedKeys: [], // 选中的列表
+
+      fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
+      nuclideReviewModalVisible: false, // Nuclide Review 弹窗
+
+      model: cloneDeep(nuclideIdentifyModal),
+
+      currChannel: undefined, // 当currChannel前选中的channel
+
+      channel_1: undefined, // 用于Fit Peaks And Baseline Modal的道值
+      channel_2: undefined,
+      isInsertPeak: false, // 是否是插入Peak
+
+      selectedTableItem: undefined, // 当前选中的表格项
+
+      isModifying: false, // 正在修改控制点
+      isFitting: false, // 正在进行Fit操作
+      firstFittingChannel: null, // Fit操作时点击的第一个channel
+      isAccepting: false,
+      isReploting: false,
+
+      operationStack: [], // 操作记录
+      replotNeeded: false,
+
+      currROIIndex: 0,
+    }
+  },
+  created() {
+    this.option.tooltip.formatter = (params) => {
+      const channel = parseInt(params[0].value[0])
+      const energy = this.energy.pointlist ? this.energy.pointlist[channel - 1].x : 0
+      return `<div class="channel">Channel: ${channel}</div>
+              <div class="energy">${isNullOrUndefined(energy) ? '' : `Energy: ${energy.toFixed(2)}`}</div>`
+    }
+
+    this.$bus.$on('selfAnalyzeSampleTypeChange', this.selfAnalyzeSampleTypeChange)
+  },
+  beforeDestroy() {
+    this.$bus.$off('selfAnalyzeSampleTypeChange', this.selfAnalyzeSampleTypeChange)
+  },
+  methods: {
+    // 主页面的SampleType修改
+    selfAnalyzeSampleTypeChange(sampleType) {
+      this.sampleType = sampleType
+    },
+
+    getInfo() {
+      this.option.series = []
+      this.thumbnailOption.series = []
+      this.list = []
+      this.model = cloneDeep(nuclideIdentifyModal)
+
+      const { inputFileName } = this.sampleData
+
+      const currSampleDetailInfo = getSampleData(inputFileName)
+
+      const { ROIOneList, ROITwoList, ROIThreeList, ROIFourList } = currSampleDetailInfo.data[this.sampleType]
+      this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
+      this.ROIAnalyzeLists = currSampleDetailInfo.data.ROIAnalyzeLists || []
+      this.currROIIndex = 0
+      this.setInfoByType()
+    },
+
+    // 根据类型设置弹窗里的各数据
+    setInfoByType() {
+      const currROIItem = this.ROILists[this.currROIIndex] // 四个ROI中要看的那个的基础数据
+      const currRPIAnalyzeItem = this.ROIAnalyzeLists[this.currROIIndex] // 四个ROI中要看的那个的已处理的数据
+      // 如果是已处理的
+      if (currRPIAnalyzeItem) {
+        const { allData, shadowChannelChart, shapeChannelData, peak, BaseCtrls, barChart } = currRPIAnalyzeItem
+        const channelBaseLine = getLineData(allData, 'BaseLine', 'channel')
+        const channelPeakGroup = getLineData(allData, 'Peak', 'channel', true)
+        const allEnergy = getLineData(allData, 'Energy', 'energy')
+        this.channelBaseCPChart = shapeChannelData
+        this.channelBaseLineChart = channelBaseLine
+        this.channelCountChart = shadowChannelChart
+        this.channelPeakChart = channelPeakGroup
+        this.energy = allEnergy
+        this.barChart = barChart
+        this.setChartOption(channelBaseLine, shadowChannelChart, channelPeakGroup, shapeChannelData, barChart)
+
+        this.BaseCtrls = BaseCtrls
+        this.list = peak
+      } else {
+        this.channelBaseCPChart = []
+        this.channelBaseLineChart = {}
+        this.channelCountChart = {
+          color: 'yellow',
+          pointlist: currROIItem,
+        }
+        this.channelPeakChart = []
+        this.energy = []
+        this.barChart = []
+
+        this.setChartOption({}, this.channelCountChart, [], [], [])
+        this.BaseCtrls = {
+          rg_low: 1,
+          rg_high: 1,
+          xctrl: [],
+          yctrl: [],
+          yslope: [],
+          replotNeeded: false,
+          baseline: [],
+          baseStack: [],
+          replotUsed: false,
+          stepCounts: [],
+        }
+
+        this.list = []
+      }
+    },
+
+    setChartOption(baseLine, count, peaks, baseCP, bar) {
+      const series = []
+
+      // 推入BaseLine
+      series.push(this.buildBaseLine(baseLine))
+
+      // 推入Count
+      series.push(this.buildCountLine(count))
+
+      // 推入Peak
+      series.push(...this.buildPeaks(peaks))
+
+      // 推入基线控制点
+      series.push(this.buildCtrlPoint(baseCP))
+      this.option.series = series
+
+      this.thumbnailOption.series = this.buildBarChart(bar)
+      this.setThumbnailRange(1, bar.length)
+    },
+
+    reset() {
+      this.currChannel = undefined
+      this.btnGroupType = 1
+      this.opts.notMerge = false
+      this.isFitting = false
+      this.replotNeeded = false
+      this.selectedTableItem = null
+      this.$nextTick(() => {
+        this.option.brush = { toolbox: [] }
+        const firstLine = this.list[0]
+        if (firstLine) {
+          this.handleTableRowClick(firstLine)
+          this.selectedKeys = [firstLine.index]
+        }
+      })
+      this.clearRect()
+      this.handleResetChart()
+    },
+
+    open() {
+      this.visible = true
+      this.getInfo()
+      this.reset()
+    },
+
+    // 点击图表，设置红线，改变表格的选中项
+    handleChartClick(param) {
+      const { offsetX, offsetY } = param
+      const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
+      if (point) {
+        const xAxis = Math.round(point[0])
+        this.setMarkLineXAxis(xAxis)
+
+        this.currChannel = xAxis
+        const { index } = findNearPeak(xAxis, this.list)
+
+        if (this.list.length) {
+          const selectedRow = this.list[index]
+          this.selectTableRow(selectedRow.index, index)
+          this.getSelPosNuclide(selectedRow)
+          this.selectedTableItem = selectedRow
+        }
+
+        // 如果点击了Fit按钮
+        if (this.isFitting) {
+          this.handleFittingChannel(xAxis)
+        }
+      }
+    },
+
+    // 处理Fit中的两个channel
+    handleFittingChannel(channel) {
+      // 第一个channel存在，又点了一次，则是第二次点击
+      if (this.firstFittingChannel !== null) {
+        // 查找两个channel之间的Peak峰
+
+        let left = this.firstFittingChannel
+        let right = channel
+        if (left > right) {
+          right = left
+          left = channel
+        }
+
+        const peaksBetweenChannel = this.list.filter((peak) => {
+          const centroidId = peak.peakCentroid
+          return centroidId >= left && centroidId <= right
+        })
+
+        if (!peaksBetweenChannel.length) {
+          this.$message.warn(`There are 0 peak between channel ${left} and ${right}`)
+          this.isFitting = false
+          return
+        }
+
+        this.channel_1 = left
+        this.channel_2 = right
+        this.isInsertPeak = false
+        this.fitPeaksAndBaselineModalVisible = true
+
+        this.isFitting = false
+        this.firstFittingChannel = null
+      } else {
+        this.firstFittingChannel = channel
+      }
+    },
+
+    // 切换图表上的红色竖线及表格选中
+    handleChangeMarkLine(direction) {
+      const prevAxis = this.getMarkLineXAxis()
+      let i,
+        size = this.list.length
+      if (direction == 'next') {
+        for (i = 0; i < size; i++) {
+          const centroid = Math.round(this.list[i].peakCentroid)
+          if (centroid > prevAxis) {
+            this.setMarkLineXAxis(centroid)
+            const selectedRow = this.list[i]
+            this.selectedTableItem = selectedRow
+            this.selectTableRow(selectedRow.index, i)
+            this.getSelPosNuclide(selectedRow)
+            return
+          }
+        }
+      } else if (direction == 'prev') {
+        for (i = size - 1; i >= 0; i--) {
+          const centroid = Math.round(this.list[i].peakCentroid)
+          if (centroid < prevAxis) {
+            this.setMarkLineXAxis(centroid)
+            const selectedRow = this.list[i]
+            this.selectedTableItem = selectedRow
+            this.selectTableRow(selectedRow.index, i)
+            this.getSelPosNuclide(selectedRow)
+            return
+          }
+        }
+      }
+    },
+
+    /**
+     * 根据当前Peak调整缩放范围
+     */
+    adjustArea() {
+      const {
+        xAxis: { max, min },
+      } = this.option
+
+      // 找到最高点在这个范围内的峰
+      const peaks = []
+      for (let i = 0; i < this.channelPeakChart.length; i++) {
+        const peak = this.channelPeakChart[i]
+        const pointlist = peak.pointlist
+
+        // 如果 第一个/最后一个 都 大于/小于 范围，跳过
+        if (pointlist[0].x > max || pointlist[pointlist.length - 1].x < min) {
+          continue
+        }
+
+        // 找到峰最大值
+        const peakMaxY = Math.max(...pointlist.map(({ y }) => y))
+        const find = pointlist.find(({ y }) => y == peakMaxY)
+
+        // 如果最大值在范围内
+        if (find.x >= min && find.x <= max) {
+          peaks.push({
+            max: peakMaxY,
+            min: Math.min(pointlist[0].y, pointlist[pointlist.length - 1].y),
+          })
+        }
+      }
+
+      const peaksMax = Math.max(...peaks.map(({ max }) => max))
+      const peaksMin = Math.min(...peaks.map(({ min }) => min))
+
+      const {
+        yAxis: { max: yAxisMax, min: yAxisMin },
+      } = this.option
+
+      if (peaksMax > yAxisMax) {
+        this.option.yAxis.max = Math.ceil(peaksMax)
+      }
+
+      if (peaksMin < yAxisMin) {
+        this.option.yAxis.min = Math.floor(peaksMin)
+      }
+    },
+
+    selectTableRow(key, index) {
+      this.selectedKeys = [key]
+      this.$refs.tableRef.scrollIntoView(index)
+    },
+
+    // 设置红色标记线的位置
+    setMarkLineXAxis(xAxis) {
+      const markLineOption = this.option.series[0].markLine.data[0]
+      markLineOption.xAxis = xAxis
+
+      const { xAxis: chartXAxisOption } = this.option
+      const { max, min } = chartXAxisOption
+
+      // 如果不在范围内
+      if (xAxis >= max || xAxis <= min) {
+        const halfDiff = (max - min) / 2
+        const lastChannel = this.channelCountChart.pointlist[this.channelCountChart.pointlist.length - 1].x
+        let nextMax = xAxis + halfDiff
+        let nextMin = xAxis - halfDiff
+        chartXAxisOption.max = nextMax > lastChannel ? lastChannel : nextMax
+        chartXAxisOption.min = nextMin < 1 ? 1 : nextMin
+
+        this.setThumbnailRange(chartXAxisOption.min, chartXAxisOption.max)
+        this.adjustArea()
+      }
+    },
+
+    getMarkLineXAxis() {
+      const markLineOption = this.option.series[0].markLine.data[0]
+      return markLineOption.xAxis
+    },
+
+    // 获取右下角possible nuclide 和 identified nuclide
+    async getSelPosNuclide(row) {
+      this.model.possibleNuclide = ''
+      this.model.identifiedNuclide = ''
+      this.model.tolerance = 0.5
+
+      if (!row._possible) {
+        this.$set(row, '_loading', true)
+        try {
+          const { sampleId, inputFileName: fileName } = this.sampleData
+          const { success, result, message } = await getAction('/selfStation/getSelPosNuclide', {
+            sampleId,
+            channel: Math.round(row.peakCentroid),
+            fileName,
+            gammaROINum: this.currROIIndex + 1,
+          })
+          if (success) {
+            const { possible } = result
+            this.$set(row, '_possible', possible)
+          } else {
+            this.$message.error(message)
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          row._loading = false
+        }
+      }
+    },
+    async handleToleranceChange(val) {
+      // this.selectedTableItem._loading = true
+      this.searchParam.energy = this.selectedTableItem.energy
+      this.searchParam.tolerance = val
+      try {
+        const { sampleId, inputFileName: fileName } = this.sampleData
+        const { success, result, message } = await getAction('/selfStation/searchNuclide', {
+          sampleId,
+          fileName,
+          ...this.searchParam,
+          gammaROINum: this.currROIIndex + 1,
+        })
+        if (success) {
+          const { list } = result
+          this.selectedTableItem._possible = list
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        // this.selectedTableItem._loading = false
+      }
+    },
+
+    // 显示peak comment弹窗
+    handleAddPeakComment() {
+      if (!this.selectedKeys.length) {
+        this.$message.warn('Please Select a Peak that You Want to Add Comment!')
+        return
+      }
+      this.peakCommentModalVisible = true
+    },
+
+    // 显示general comment弹窗
+    handleAddGeneralComment() {
+      this.generalCommentModalVisible = true
+    },
+
+    // Insert按钮
+    handleInsert() {
+      this.isFitting = false
+      const { rg_high, rg_low } = this.BaseCtrls
+      if (!this.currChannel || this.currChannel <= rg_low + 1 || this.currChannel >= rg_high - 1) {
+        this.$message.warn("Couldn't insert peak, maybe out of range")
+        return
+      }
+
+      this.channel_1 = this.currChannel
+
+      this.fitPeaksAndBaselineModalVisible = true
+      this.isInsertPeak = true
+    },
+
+    // 点击 Fit Peak XXX 弹窗中的 Peaks 按钮
+    handleInsertSuccess(result) {
+      const {
+        allData,
+        barChart,
+        channelBaseLineChart,
+        channelPeakChart,
+        shadowChannelChart,
+        shadowEnergyChart,
+        shapeChannelData,
+        shapeEnergyData,
+        table,
+      } = result
+
+      this.$bus.$emit('selfRefresh', {
+        allData,
+        channelPeakChart,
+        shadowChannelChart,
+        shadowEnergyChart,
+        shapeChannelData,
+        shapeEnergyData,
+        peak: table,
+        barChart: this.barChart,
+        BaseCtrls: cloneDeep(this.BaseCtrls),
+      })
+
+      this.channelPeakChart = channelPeakChart
+      this.channelBaseLineChart = channelBaseLineChart
+      this.barChart = barChart
+
+      this.setChartOption(
+        channelBaseLineChart,
+        this.channelCountChart,
+        channelPeakChart,
+        this.channelBaseCPChart,
+        barChart
+      )
+      this.list = table
+      this.handleTableRowClick(this.list[this.curRow])
+    },
+
+    // 点击 Fit Peak XXX 弹窗中的 Cancel 按钮
+    handleCancelSuccess(result) {
+      const { channelPeakChart, table } = result
+      this.channelPeakChart = channelPeakChart
+
+      this.setChartOption(
+        this.channelBaseLineChart,
+        this.channelCountChart,
+        channelPeakChart,
+        this.channelBaseCPChart,
+        this.barChart
+      )
+
+      this.list = table
+    },
+
+    // 删除
+    handleDel() {
+      this.isFitting = false
+
+      if (!this.selectedKeys.length) {
+        this.$message.warn('No peak to delete.')
+        return
+      }
+
+      this.$confirm({
+        title: 'Warning',
+        content: 'Are you sure to delete this peak?',
+        cancelButtonProps: {
+          props: {
+            type: 'warn',
+          },
+        },
+        onOk: async () => {
+          // this.list.splice(findIndex, 1)
+          // this.selectedKeys = []
+
+          // const seriesIndex = this.option.series.findIndex(item => {
+          //   return item.name == 'Peak_' + willDelKey
+          // })
+
+          // this.opts.notMerge = true
+          // this.option.series.splice(seriesIndex, 1)
+          // this.channelPeakChart.splice(findIndex, 1)
+
+          // this.$nextTick(() => {
+          //   this.resetChartOpts()
+          // })
+          try {
+            const { inputFileName: fileName } = this.sampleData
+            const { success, result, message } = await getAction('/selfStation/deletePeak', {
+              fileName,
+              curRow: this.curRow,
+              gammaROINum: this.currROIIndex + 1,
+            })
+            if (success) {
+              const {
+                allData,
+                channelPeakChart,
+                shadowChannelChart,
+                shadowEnergyChart,
+                shapeChannelData,
+                shapeEnergyData,
+                table,
+              } = result
+
+              this.$bus.$emit('selfRefresh', {
+                allData,
+                channelPeakChart,
+                shadowChannelChart,
+                shadowEnergyChart,
+                shapeChannelData,
+                shapeEnergyData,
+                peak: table,
+                barChart: this.barChart,
+                BaseCtrls: cloneDeep(this.BaseCtrls),
+              })
+
+              this.opts.notMerge = true
+              this.channelPeakChart = channelPeakChart
+              const series = []
+              // 推入旧的BaseLine
+              series.push(this.buildBaseLine(this.channelBaseLineChart))
+
+              // 推入旧的Count
+              series.push(this.buildCountLine(this.channelCountChart))
+
+              // 推入Peak
+              series.push(...this.buildPeaks(channelPeakChart))
+
+              // 推入旧的基线控制点
+              series.push(this.buildCtrlPoint(this.channelBaseCPChart))
+
+              this.list = table
+
+              this.option.series = series
+              this.$nextTick(() => {
+                this.resetChartOpts()
+              })
+
+              this.selectedKeys = []
+
+              this.selectedTableItem = null
+            } else {
+              this.$message.error(message)
+            }
+          } catch (error) {
+            console.error(error)
+          }
+        },
+      })
+    },
+
+    // 重置图表配置
+    resetChartOpts() {
+      this.opts.notMerge = false
+      this.option.brush = { toolbox: [] }
+    },
+
+    // 匹配
+    handleFit() {
+      if (!this.channelPeakChart || !this.channelPeakChart.length) {
+        this.$message.warn('No peak to fit.')
+        return
+      }
+
+      this.isFitting = true
+      this.firstFittingChannel = null
+    },
+
+    // 表格的行点击
+    handleTableRowClick(row, index) {
+      if (this.selectedTableItem == row) {
+        return
+      }
+
+      const channel = Math.round(row.peakCentroid)
+      this.currChannel = channel
+
+      this.option.series[0].markLine.data[0].xAxis = channel
+
+      const { xAxis: chartXAxisOption } = this.option
+      const { max, min } = chartXAxisOption
+
+      // 如果不在范围内
+      if (channel >= max || channel <= min) {
+        const halfDiff = (max - min) / 2
+        const lastChannel = this.channelCountChart.pointlist[this.channelCountChart.pointlist.length - 1].x
+        let nextMax = channel + halfDiff
+        let nextMin = channel - halfDiff
+        chartXAxisOption.max = nextMax > lastChannel ? lastChannel : nextMax
+        chartXAxisOption.min = nextMin < 1 ? 1 : nextMin
+
+        this.setThumbnailRange(chartXAxisOption.min, chartXAxisOption.max)
+      }
+
+      this.getSelPosNuclide(row)
+
+      this.selectedTableItem = row
+
+      this.adjustArea()
+    },
+
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      if (this.isModifying) {
+        return
+      }
+
+      const chart = this.$refs.chartRef.getChartInstance()
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: 'brush',
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: 'rect',
+        },
+      })
+    },
+
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        this.clearBrush(chart)
+      }, 0)
+    },
+
+    clearBrush(chart) {
+      // 清理刷选的范围
+      chart.dispatchAction({
+        type: 'brush',
+        areas: [],
+      })
+
+      // 改为不可刷选状态
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+      })
+    },
+
+    // 刷选完毕时
+    handleBrushEnd(param) {
+      const chart = this.$refs.chartRef.getChartInstance()
+      const areas = param.areas[0]
+      if (areas) {
+        const range = areas.range
+        const [[minX, maxX], [minY, maxY]] = range
+        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
+        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
+        const xAxisMax = chart.getModel().getComponent('xAxis').axis.scale._extent[1]
+        const yAxisMax = this.option.yAxis.max
+        let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
+        const xAxisLimit = rangeNumber(1, xAxisMax)
+        const yAxisLimit = rangeNumber(0.1, yAxisMax)
+        x1 = xAxisLimit(x1)
+        x2 = xAxisLimit(x2)
+        y1 = yAxisLimit(y1)
+        y2 = yAxisLimit(y2)
+        this.option.xAxis.min = x1
+        this.option.xAxis.max = x2
+        this.option.yAxis.min = y1
+        this.option.yAxis.max = y2
+
+        this.adjustArea()
+
+        this.setThumbnailRange(x1, x2)
+        if (this.btnGroupType == 2) {
+          this.buildRect()
+        }
+      }
+      this.clearBrush(chart)
+    },
+
+    // 查找barChart范围内的最大值
+    setThumbnailRange(x1, x2) {
+      const slicedArr = this.barChart.slice(x1 - 1, x2)
+      const yData = slicedArr.map(({ y }) => y)
+      const max = Math.max(...yData)
+      const min = Math.min(...yData)
+      const thumbnailYMax = Math.max(Math.abs(max), Math.abs(min))
+
+      this.thumbnailOption.xAxis.min = x1
+      this.thumbnailOption.xAxis.max = x2
+      this.thumbnailOption.yAxis.max = thumbnailYMax
+      this.thumbnailOption.yAxis.min = -thumbnailYMax
+    },
+
+    handleResetChart() {
+      this.option.xAxis.min = 1
+      this.option.xAxis.max = 'dataMax'
+      this.option.yAxis.min = 0.1
+      this.option.yAxis.max = 'dataMax'
+
+      this.setThumbnailRange(1, this.barChart.length)
+
+      if (this.btnGroupType == 2) {
+        this.buildRect()
+      }
+    },
+
+    // 切换操作
+    handleSwitchOperation() {
+      // 切换到Base Line 和 Control Point 操作
+      if (this.btnGroupType == 1) {
+        this.btnGroupType = 2
+        this.baseCtrls_Copy = cloneDeep(this.BaseCtrls)
+        this.replotNeeded = false
+
+        // 供编辑的白色基线
+        const baseLineEditSeries = buildLineSeries(
+          'BaseLine_Edit',
+          this.baseCtrls_Copy.baseline.map((val, index) => [index + 1, val]),
+          this.colorConfig.Color_Fitbase || '#fff',
+          {
+            zlevel: 21,
+          }
+        )
+        this.option.series.push(baseLineEditSeries)
+
+        this.$nextTick(() => {
+          this.buildRect()
+        })
+      }
+      // 切换回 Peak 操作
+      else {
+        this.btnGroupType = 1
+        this.opts.notMerge = true
+        const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
+        const index = this.option.series.findIndex((item) => item == baseLineEditSeries)
+        this.option.series.splice(index, 1)
+
+        this.clearRect()
+
+        const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
+        baseLineSeries.data = transformPointListData(this.channelBaseLineChart.pointlist) // 恢复基线
+
+        const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+        baseLineCP.data = this.buildCPPointData(this.channelBaseCPChart)
+
+        this.redrawPeaks(this.channelPeakChart)
+
+        this.$nextTick(() => {
+          this.resetChartOpts()
+        })
+      }
+
+      this.isModifying = false
+      this.isFitting = false
+      this.clearOperationStack()
+    },
+
+    // 根据数据绘制小方块
+    buildRect() {
+      this.$refs.rectListRef.init()
+    },
+
+    clearRect() {
+      const rectListRef = this.$refs.rectListRef
+      if (rectListRef) {
+        rectListRef.clear()
+      }
+    },
+
+    // 小方块移动
+    handleMove(yctrl) {
+      this.baseCtrls_Copy.yctrl = yctrl
+      this.redrawBaseLine()
+    },
+
+    // 小方块移动完毕
+    handleMoveEnd(prevYAxis, index) {
+      this.isModifying = false
+      this.pushOperationStack(Operators.MODIFY, {
+        index,
+        prevYAxis,
+      })
+    },
+
+    // 重新生成基线
+    redrawBaseLine() {
+      this.replotNeeded = true
+      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
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 重绘Peaks
+    redrawPeaks(peakList) {
+      this.option.series = this.option.series.filter((item) => {
+        return !item.name.includes('Peak_')
+      })
+      this.option.series.push(...this.buildPeaks(peakList))
+    },
+
+    /**
+     * 设置小方块可拖拽
+     */
+    setGraphicDraggable(draggable) {
+      this.isModifying = draggable
+    },
+
+    // 在当前选中的红线位置新增控制点
+    handleAddCP() {
+      this.setGraphicDraggable(false)
+      const { rg_high, rg_low } = this.BaseCtrls
+      if (!this.currChannel || this.currChannel < rg_low || this.currChannel > rg_high) {
+        this.$message.warn("Can't insert Control Point out of range")
+        return
+      }
+
+      const { xctrl, yctrl, baseline, yslope } = this.baseCtrls_Copy
+
+      let i = 0 // 记录新控制点在列表中的位置
+      for (; i < xctrl.length; ++i) {
+        const currCP = xctrl[i]
+        if (currCP >= this.currChannel) {
+          if (currCP == this.currChannel) {
+            this.$message.warn(`The new control point in channel ${this.currChannel} exists, can't introduce twice`)
+            return
+          }
+          break
+        }
+      }
+
+      // 新增的控制点跟基线的值平齐
+      const yAxis = baseline[this.currChannel - 1]
+      xctrl.splice(i, 0, this.currChannel)
+      yctrl.splice(i, 0, yAxis)
+      yslope.splice(i, 0, 0)
+      this.buildRect()
+      this.pushOperationStack(Operators.ADD, { index: i })
+    },
+
+    // 移除控制点
+    handleRemoveCP() {
+      this.setGraphicDraggable(false)
+
+      const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
+
+      // find nearest control-point
+      let i = 1
+      for (; i < xctrl.length; ++i) {
+        const currXAxis = xctrl[i]
+        if (currXAxis >= this.currChannel) {
+          const prevX = xctrl[i - 1]
+          if (currXAxis - this.currChannel > this.currChannel - prevX) --i
+          break
+        }
+      }
+
+      if (i == 0 || i >= xctrl.length - 1) {
+        this.$message.warn("Can't remove first/last control point")
+        return
+      }
+
+      const [removeXAxis] = xctrl.splice(i, 1)
+      const [removeYAxis] = yctrl.splice(i, 1)
+      const [removeYSlope] = yslope.splice(i, 1)
+      this.buildRect()
+      this.redrawBaseLine()
+      this.pushOperationStack(Operators.REMOVE, {
+        index: i,
+        removeXAxis,
+        removeYAxis,
+        removeYSlope,
+      })
+    },
+
+    // 修改控制点
+    handleModifyCP() {
+      this.setGraphicDraggable(!this.isModifying)
+    },
+
+    // 编辑斜率
+    handleEditSlope() {
+      this.setGraphicDraggable(false)
+
+      const { xctrl, yslope } = this.baseCtrls_Copy
+      if (!xctrl.length) {
+        this.$message.warn('No control points to be edited')
+        return
+      }
+      // find nearest control-point
+      let i = 1,
+        n = xctrl.length
+      for (; i < n; ++i) {
+        const currXCtrl = xctrl[i]
+        const prevXCtrl = xctrl[i - 1]
+        if (currXCtrl >= this.currChannel) {
+          if (currXCtrl - this.currChannel > this.currChannel - prevXCtrl) {
+            --i
+          }
+          break
+        }
+      }
+      if (i == n) i = n - 1
+
+      this.$refs.editSlopeModal.open({
+        index: i,
+        value: yslope[i],
+        allowNaN: !(i == 0 || i == n - 1),
+      })
+    },
+
+    // 确认编辑斜率
+    handleSlopeChange(slope, index, prevSlope) {
+      if (slope === prevSlope) {
+        return
+      }
+
+      const { yslope } = this.baseCtrls_Copy
+      yslope[index] = slope
+      this.pushOperationStack(Operators.SLOPE_CHANGE, {
+        index,
+        slope: prevSlope,
+      })
+      this.redrawBaseLine()
+      this.buildRect()
+    },
+
+    // 撤销
+    handleUndo() {
+      this.setGraphicDraggable(false)
+      this.popOperationStack()
+    },
+
+    // 将原先的基线和控制点移动到新位置
+    async handleReplot() {
+      if (!this.replotNeeded) {
+        return
+      }
+      try {
+        const { inputFileName: fileName } = this.sampleData
+        this.isReploting = true
+        const { success, result, message } = await postAction('/selfStation/replotBaseLine', {
+          ...this.baseCtrls_Copy,
+          fileName,
+          replotNeeded: this.replotNeeded,
+          gammaROINum: this.currROIIndex + 1,
+        })
+        if (success) {
+          const { chartData, peakSet, shapeData } = result
+
+          const { xctrl, yctrl, yslope, baseline } = this.baseCtrls_Copy
+          const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
+          baseLineSeries.data = baseline.map((val, index) => [index + 1, val])
+
+          const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+          // 第一个控制点（因为第一个和最后一个不会被删除）
+          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)
+
+          this.opts.notMerge = true
+          this.redrawPeaks(peakSet)
+          this.$nextTick(() => {
+            this.resetChartOpts()
+          })
+
+          this.replotNeeded = false
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isReploting = false
+      }
+    },
+
+    /**
+     * 构建基线控制点数据
+     * @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 的操作
+    async handleAccept() {
+      const { inputFileName: fileName } = this.sampleData
+      try {
+        this.isAccepting = true
+        const { success, result, message } = await postAction('/selfStation/acceptBaseLine', {
+          ...this.baseCtrls_Copy,
+          fileName,
+          gammaROINum: this.currROIIndex + 1,
+        })
+        if (success) {
+          this.BaseCtrls = cloneDeep(this.baseCtrls_Copy)
+
+          const {
+            allData,
+            barChart,
+            channelBaseLineChart,
+            peakSet,
+            shadowChannelChart,
+            shadowEnergyChart,
+            shapeChannelData,
+            shapeData,
+            shapeEnergyData,
+          } = result
+
+          this.channelBaseLineChart = channelBaseLineChart
+          this.channelPeakChart = peakSet
+          this.shadowChannelChart = shadowChannelChart
+          this.channelBaseCPChart = shapeChannelData
+          this.barChart = barChart
+
+          this.btnGroupType = 1
+          this.opts.notMerge = true
+          this.clearRect()
+
+          this.setChartOption(channelBaseLineChart, this.channelCountChart, peakSet, this.channelBaseCPChart, barChart)
+          this.$nextTick(() => {
+            this.resetChartOpts()
+          })
+
+          this.$bus.$emit(
+            'selfAccept',
+            {
+              ...result,
+              BaseCtrls: cloneDeep(this.baseCtrls_Copy),
+            },
+            this.currROIIndex
+          )
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isAccepting = false
+      }
+    },
+
+    // 右下角添加当前选中的nuclide
+    async handleAddNuclide() {
+      const nuclides = this.selectedTableItem.nuclides
+      const possibleNuclide = this.model.possibleNuclide
+      if (!nuclides.includes(possibleNuclide)) {
+        if (this.selectedTableItem._adding) {
+          return
+        }
+        try {
+          this.$set(this.selectedTableItem, '_adding', true)
+          const { inputFileName: fileName } = this.sampleData
+          const { success, message } = await postAction('/selfStation/addNuclide', {
+            curRow: this.curRow,
+            nuclideName: possibleNuclide,
+            fileName,
+            list_identify: nuclides,
+            gammaROINum: this.currROIIndex + 1,
+          })
+          if (success) {
+            nuclides.push(possibleNuclide)
+          } else {
+            this.$message.error(message)
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.selectedTableItem._adding = false
+        }
+      }
+    },
+    // 右下角删除当前选中的nuclide
+    async handleDelNuclide() {
+      if (!this.model.identifiedNuclide) {
+        return
+      }
+      const nuclides = this.selectedTableItem.nuclides
+      if (this.selectedTableItem._deleting) {
+        return
+      }
+      const findIndex = nuclides.findIndex((nuclide) => nuclide == this.model.identifiedNuclide)
+      if (-1 !== findIndex) {
+        try {
+          this.$set(this.selectedTableItem, '_deleting', true)
+          const { inputFileName: fileName } = this.sampleData
+          const { success, result, message } = await postAction('/selfStation/deleteNuclide', {
+            curRow: this.curRow,
+            nuclideName: this.model.identifiedNuclide,
+            fileName,
+            list_identify: nuclides,
+            gammaROINum: this.currROIIndex + 1,
+          })
+          if (success) {
+            const { identify, table } = result
+            this.selectedTableItem.nuclides = identify
+            this.list = table
+          } else {
+            this.$message.error(message)
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.selectedTableItem._deleting = false
+        }
+      }
+    },
+
+    // 构建baseline
+    buildBaseLine(channelBaseLineChart) {
+      return buildLineSeries(
+        'BaseLine',
+        transformPointListData(channelBaseLineChart.pointlist),
+        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', transformPointListData(channelCountChart.pointlist), channelCountChart.color)
+    },
+
+    // 构建Peaks
+    buildPeaks(channelPeakChart) {
+      return channelPeakChart.map((item, index) => {
+        return buildLineSeries('Peak_' + (index + 1), transformPointListData(item.pointlist), item.color)
+      })
+    },
+
+    // 构建基线控制点
+    buildCtrlPoint(channelBaseCPChart) {
+      return {
+        name: 'BaseLine_Ctrl_Point',
+        type: 'scatter',
+        data: this.buildCPPointData(channelBaseCPChart),
+        silent: true,
+        animation: false,
+        zlevel: 20,
+      }
+    },
+
+    // 构建缩略图
+    buildBarChart(barChart) {
+      return {
+        name: 'BarChart',
+        type: 'bar',
+        data: barChart.map(({ x, y }) => [x, y]),
+        itemStyle: {
+          color: '#fff',
+        },
+        lineStyle: {
+          width: 1,
+        },
+        symbol: 'none',
+        symbolSize: 1,
+        emphasis: {
+          disabled: true,
+        },
+        animation: false,
+        silent: true,
+      }
+    },
+
+    /**
+     * 推入操作
+     * @param {*} operator 操作符
+     * @param {*} operand 操作数
+     */
+    pushOperationStack(operator, operand) {
+      this.operationStack.push({
+        operator,
+        operand,
+      })
+    },
+
+    /**
+     * 弹出操作
+     */
+    popOperationStack() {
+      const { operator, operand } = this.operationStack.pop()
+      const { index } = operand
+
+      const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
+      switch (operator) {
+        case Operators.ADD:
+          xctrl.splice(index, 1)
+          yctrl.splice(index, 1)
+          yslope.splice(index, 1)
+          break
+        case Operators.MODIFY:
+          const { prevYAxis } = operand
+
+          // 恢复点的y轴位置
+          yctrl[index] = prevYAxis
+          break
+        case Operators.REMOVE:
+          const { removeXAxis, removeYAxis, removeYSlope } = operand
+          xctrl.splice(index, 0, removeXAxis)
+          yctrl.splice(index, 0, removeYAxis)
+          yslope.splice(index, 0, removeYSlope)
+          break
+        case Operators.SLOPE_CHANGE:
+          const { slope } = operand
+          yslope[index] = slope
+          break
+      }
+      this.buildRect()
+      // 恢复基线位置
+      this.redrawBaseLine()
+    },
+
+    /**
+     * 清理操作栈
+     */
+    clearOperationStack() {
+      this.operationStack = []
+    },
+
+    handleFullScreenChange(isFullScreen) {
+      this.columns[7].width = isFullScreen ? 180 : 120
+    },
+  },
+  computed: {
+    curRow() {
+      const [selectedKey] = this.selectedKeys
+      const findIndex = this.list.findIndex((item) => item.index == selectedKey)
+      return findIndex
+    },
+
+    isOperationStackEmpty() {
+      return this.operationStack.length == 0
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.interactive-analysis-tools {
+  display: flex;
+  padding-top: 5px;
+  gap: 20px;
+
+  &-left {
+    flex: 1;
+    overflow: hidden;
+
+    .chart {
+      height: 331px;
+      position: relative;
+    }
+
+    .thumbnail {
+      height: 50px;
+      margin: 10px 30px 35px 80px;
+      background-color: #255369;
+    }
+
+    .table {
+      .title {
+        color: #0cebc9;
+        font-size: 20px;
+        text-align: center;
+        margin-bottom: 10px;
+        user-select: none;
+
+        span {
+          cursor: pointer;
+          margin: 0 5px;
+        }
+      }
+
+      .custom-table {
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 288px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 289px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .operators {
+        display: flex;
+        margin-top: 10px;
+        gap: 10px;
+
+        .ant-btn {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &-right {
+    width: 290px;
+    flex-shrink: 0;
+
+    .peak-box {
+      height: 326px;
+
+      &-item:not(:last-child) {
+        margin-bottom: 10px;
+      }
+
+      .symbol {
+        display: flex;
+
+        .ant-btn {
+          flex: 1;
+
+          &:first-child {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    .base-line {
+      margin-top: 136px;
+    }
+
+    .reset-btn-box {
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+
+    .identify-box {
+      .tolerance {
+        ::v-deep {
+          .ant-form-item {
+            margin-bottom: 10px;
+
+            &-control-wrapper {
+              flex: 1;
+            }
+
+            &-control {
+              width: 100%;
+            }
+          }
+        }
+
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+
+      .identify-item {
+        margin-bottom: 10px;
+
+        .title {
+          background-color: #497e9d;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 16px;
+        }
+
+        .content {
+          height: 80px;
+          background-color: #275466;
+          margin-top: 10px;
+          padding: 5px;
+          overflow: auto;
+
+          .item {
+            cursor: pointer;
+            line-height: 26px;
+            padding: 0 5px;
+
+            &.active {
+              background: #296d81;
+            }
+          }
+        }
+      }
+
+      .identify-operators {
+        display: flex;
+        gap: 10px;
+        .text {
+          flex: 1;
+          line-height: 32px;
+          background-color: #285366;
+          padding: 0 10px;
+        }
+
+        .ant-btn {
+          width: 50px;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+
+  .ant-btn {
+    width: 100%;
+  }
+}
+::v-deep {
+  .ant-modal {
+    top: 5px;
+    padding-bottom: 7px;
+  }
+}
+.is-modify,
+.is-fitting {
+  color: #f00;
+}
+</style>
+<style lang="less">
+.interactive-analysis-tools-dialog.fullscreen {
+  .interactive-analysis-tools {
+    height: calc(100vh - 90px);
+
+    &-left {
+      display: flex;
+      flex-direction: column;
+
+      .chart {
+        flex: 1;
+      }
+
+      .thumbnail {
+        height: 60px;
+      }
+
+      .table {
+        height: 397px;
+
+        .custom-table {
+          height: calc(100% - 82px);
+
+          .ant-spin-nested-loading,
+          .ant-spin-container,
+          .ant-table,
+          .ant-table-content,
+          .ant-table-scroll {
+            height: 100%;
+          }
+
+          .ant-table-body {
+            height: calc(100% - 25px) !important;
+            max-height: calc(100% - 25px) !important;
+          }
+        }
+      }
+    }
+
+    &-right {
+      display: flex;
+      flex-direction: column;
+
+      .identify-box {
+        flex: 1;
+        padding-top: 5px;
+        overflow: hidden;
+
+        .title-over-border {
+          height: 100%;
+
+          &-content {
+            display: flex;
+            flex-direction: column;
+
+            .identify-item {
+              flex: 1;
+              overflow: auto;
+
+              .ant-spin-nested-loading,
+              .content {
+                height: calc(100% - 40px);
+                .ant-spin-container,
+                .content {
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/BetaDetectorCalibration.vue b/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/BetaDetectorCalibration.vue
index f2b4b3a..8a7381a 100644
--- a/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/BetaDetectorCalibration.vue
+++ b/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/BetaDetectorCalibration.vue
@@ -305,8 +305,8 @@ const initialGammaGatedChartOption = {
   },
   xAxis: {
     min: 0,
-    max: 256,
-    interval: 64,
+    max: 512,
+    interval: 128,
     axisLine: {
       lineStyle: {
         color: 'rgb(119, 181, 213, 0.5)',
@@ -360,7 +360,7 @@ const initialGammaGatedChartOption = {
       fontSize: 14,
       color: '#5b9cba',
     },
-    nameGap: 25,
+    nameGap: 40,
   },
   series: {
     type: 'line',
@@ -429,8 +429,8 @@ const initialFigureChartOption = {
   },
   xAxis: {
     min: 0,
-    max: 256,
-    interval: 64,
+    max: 0,
+    interval: 0,
     axisLine: {
       lineStyle: {
         color: 'rgb(119, 181, 213, 0.5)',
@@ -670,9 +670,11 @@ export default {
             oldScatterSeries,
             newCToE,
             newEToC,
+            tableWidgets,
           } = res.result
           this.c2e = CToE
           this.e2c = EToC
+          this.list = tableWidgets
 
           this.oldScatterSeries = oldScatterSeries
           this.count = oldScatterSeries.length
@@ -686,7 +688,19 @@ export default {
           const gammaEnergyMax = Math.max(...gammaEnergyValue)
           const gammaEnergyMin = Math.min(...gammaEnergyValue)
 
-          const { max, min, interval } = splitAxis(gammaEnergyMax, gammaEnergyMin, 4)
+          const tableWidgetsEnergyMax = Math.min(...tableWidgets.map((item) => item.energy))
+          const tableWidgetsChannelMax = Math.min(...tableWidgets.map((item) => item.channel))
+
+          const { max, min, interval } = splitAxis(Math.max(gammaEnergyMax, tableWidgetsEnergyMax), gammaEnergyMin, 4)
+          const { max: xMax, xInterval } = splitAxis(
+            Math.max(gammaEnergyValue.length - 1, tableWidgetsChannelMax),
+            0,
+            4,
+            1
+          )
+
+          this.figureChartOption.xAxis.max = xMax
+          this.figureChartOption.xAxis.interval = xInterval
 
           this.figureChartOption.yAxis.max = max
           this.figureChartOption.yAxis.min = min
@@ -697,10 +711,15 @@ export default {
 
           this.oldChartOption = cloneDeep(this.figureChartOption)
 
+          this.figureChartOption.series[1].markPoint.data = tableWidgets.map((item) => ({
+            xAxis: item.channel,
+            yAxis: item.energy,
+          }))
+
           // 如果点击过reanalyze则渲染之前fitting的数据，如果没点Reanalyze，数据会在窗口关闭时删掉 20231101：xiao
           // todo 现在能谱数据没有缓存，刷新页面时也会获取到fitting的数据
-          if (this.getCache('CALIBRATION_BETA_' + this.newSampleData.inputFileName)) {
-            this.setFirringResult(this.getCache('CALIBRATION_BETA_' + this.newSampleData.inputFileName))
+          if (this.getCache('SELF_STATION_CALIBRATION_BETA_' + this.newSampleData.inputFileName)) {
+            this.setFirringResult(this.getCache('SELF_STATION_CALIBRATION_BETA_' + this.newSampleData.inputFileName))
             return false
           }
 
@@ -736,8 +755,8 @@ export default {
 
         this.currEnergy = this.gammaEnergy[yAxis][0].toPrecision(6) // 设置当前选中位置的Energy
         this.channelAndEnergyModel = {
-          channel: yAxis,
-          energy: this.currEnergy,
+          channel: undefined,
+          energy: undefined,
         }
 
         this.getGammaGated(yAxis)
@@ -830,7 +849,7 @@ export default {
 
         this.tooltipChannel = xAxis
         this.tooltipPosition.top = offsetY
-        if (xAxis > 187) {
+        if (xAxis > 424) {
           this.tooltipPosition.left = offsetX - 125
         } else {
           this.tooltipPosition.left = offsetX + 20
@@ -934,7 +953,7 @@ export default {
     // 点击Reset Button 重置
     async handleReset() {
       this.$emit('isFitting', false)
-      this.removeCache('CALIBRATION_BETA_' + this.newSampleData.inputFileName) // 删除fitting之后缓存的数据 20231101:xiao
+      this.removeCache('SELF_STATION_CALIBRATION_BETA_' + this.newSampleData.inputFileName) // 删除fitting之后缓存的数据 20231101:xiao
       this.newCalibrationFuncModel = cloneDeep(newCalibrationFuncModel)
       this.list = []
       this.newE2C = []
@@ -978,7 +997,7 @@ export default {
           this.betaIsFitting = true
           this.$emit('isFitting', true) // 点击reAnalyze按钮，将isFirstFitting改为true 20231101：xiao
 
-          this.setCache('CALIBRATION_BETA_' + this.newSampleData.inputFileName, result) // 缓存数据，如果点击ReAnalyze需要回显数据 20231101：xiao
+          this.setCache('SELF_STATION_CALIBRATION_BETA_' + this.newSampleData.inputFileName, result) // 缓存数据，如果点击ReAnalyze需要回显数据 20231101：xiao
 
           this.setFirringResult(result)
         } else {
@@ -1090,7 +1109,7 @@ export default {
   computed: {
     rectHeight() {
       const { top, bottom } = initialBetaGammaChartOption.grid
-      const totalHeight = 427 - top - bottom
+      const totalHeight = 549 - top - bottom
       return (totalHeight / 4096) * this.gammaChannelWidth
     },
   },
diff --git a/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/GammaDetectorCalibration.vue b/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/GammaDetectorCalibration.vue
index ae529ad..96fbe6d 100644
--- a/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/GammaDetectorCalibration.vue
+++ b/src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/GammaDetectorCalibration.vue
@@ -545,8 +545,8 @@ export default {
 
           // 如果点击过reanalyze则渲染之前fitting的数据，如果没点Reanalyze，数据会在窗口关闭时删掉 20231101：xiao
           // todo 现在能谱数据没有缓存，刷新页面时也会获取到fitting的数据
-          if (this.getCache('CALIBRATION_GAMMA_' + this.newSampleData.inputFileName)) {
-            this.setFirringResult(this.getCache('CALIBRATION_GAMMA_' + this.newSampleData.inputFileName))
+          if (this.getCache('SELF_STATION_CALIBRATION_GAMMA_' + this.newSampleData.inputFileName)) {
+            this.setFirringResult(this.getCache('SELF_STATION_CALIBRATION_GAMMA_' + this.newSampleData.inputFileName))
             return false
           }
 
@@ -680,7 +680,7 @@ export default {
 
     // 点击Reset Button 重置
     async handleReset() {
-      this.$ls.remove('CALIBRATION_GAMMA_' + this.newSampleData.inputFileName) // 删除fitting之后缓存的数据 20231101:xiao
+      this.$ls.remove('SELF_STATION_CALIBRATION_GAMMA_' + this.newSampleData.inputFileName) // 删除fitting之后缓存的数据 20231101:xiao
       this.newCalibrationFuncModel = cloneDeep(newCalibrationFuncModel)
       this.list = []
       this.newE2C = []
@@ -727,7 +727,7 @@ export default {
           this.gammaIsFitting = true
           this.$emit('isFitting', true) // 点击reAnalyze按钮，将isFirstFitting改为true 20231101：xiao
 
-          this.setCache('CALIBRATION_GAMMA_' + this.newSampleData.inputFileName, result) // 缓存数据，如果点击ReAnalyze需要回显数据 20231101：xiao
+          this.setCache('SELF_STATION_CALIBRATION_GAMMA_' + this.newSampleData.inputFileName, result) // 缓存数据，如果点击ReAnalyze需要回显数据 20231101：xiao
 
           this.setFirringResult(result)
 
diff --git a/src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue b/src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue
index 4383902..b9440cb 100644
--- a/src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue
+++ b/src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue
@@ -169,11 +169,13 @@ export default {
   created() {
     this.option.tooltip.formatter = this.handleTooltipFormat
     this.option.series[0].itemStyle.color = 'yellow'
-    this.option.brush = { toolbox: [] }
     this.$bus.$on('changeROILimitsYAxisType', this.changeYAxisType)
     this.$bus.$on('roiLimitItemUnzoom', this.handleUnZoom)
     this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
   },
+  mounted() {
+    this.option.brush = { toolbox: [] }
+  },
   beforeDestroy() {
     this.$bus.$off('changeROILimitsYAxisType', this.changeYAxisType)
     this.$bus.$off('roiLimitItemUnzoom', this.handleUnZoom)
@@ -435,6 +437,8 @@ export default {
       handler(val) {
         if (val && Object.keys(val).length) {
           this.handleAnalyzeResult()
+
+          console.log('%c [  ]-441', 'font-size:13px; background:pink; color:#bf2c9f;', )
         }
       },
       immediate: true,
@@ -489,6 +493,7 @@ export default {
       img {
         width: 100%;
         height: 100%;
+        display: block;
       }
     }
   }
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 1eebddb..0479dce 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -127,6 +127,14 @@
     />
     <!-- 分析工具弹窗结束 -->
 
+    <!-- Beta的 分析工具弹窗开始 -->
+    <beta-analyze-interactive-tool-modal
+      ref="betaAnalyzeInteractiveToolRef"
+      :sampleId="sampleData.sampleId"
+      :colorConfig="colorConfig"
+    />
+    <!-- 分析工具弹窗结束 -->
+
     <!-- Korsum 弹窗开始 -->
     <korsum-modal v-model="korsumModalShow" />
     <!-- Korsum 弹窗结束 -->
@@ -301,6 +309,7 @@ import BGLogViewer from './components/Modals/BetaGammaModals/BGLogViewer.vue'
 import { saveAs } from 'file-saver'
 import CompareFromDbModal from './components/Modals/CompareFromDBModal.vue'
 import { clearSampleData, getSampleData, updateSampleDataAnaly } from '@/utils/SampleStore'
+import BetaAnalyzeInteractiveToolModal from './components/Modals/BetaAnalyzeInteractiveToolModal/index.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -357,6 +366,7 @@ export default {
     BgLogViewer: BGLogViewer,
     CompareFromDbModal,
     CalibrationModal,
+    BetaAnalyzeInteractiveToolModal,
   },
 
   provide() {
@@ -616,14 +626,23 @@ export default {
             dbName,
             fileName,
             analyst,
-            status
+            status,
           }
           getAction('/gamma/initValue', params)
         })
       willAddList
         .filter(({ sampleType, inputFileName }) => sampleType == 'B' && inputFileName !== this.sampleData.inputFileName)
         .forEach(
-          ({ inputFileName: sampleFileName, gasFileName, detFileName, qcFileName, dbName, sampleId, analyst, status }) => {
+          ({
+            inputFileName: sampleFileName,
+            gasFileName,
+            detFileName,
+            qcFileName,
+            dbName,
+            sampleId,
+            analyst,
+            status,
+          }) => {
             const params = {
               sampleId,
               dbName,
@@ -632,7 +651,7 @@ export default {
               gasFileName,
               detFileName,
               qcFileName,
-              status
+              status,
             }
             getAction('/spectrumAnalysis/initValue', params)
           }
@@ -1382,6 +1401,12 @@ export default {
                     if (this.isBeta) this.$refs.betaAnalysisRef.getAnalyzeAllSpectrum()
                   },
                 },
+                {
+                  type: 'a-menu-item',
+                  title: 'Interactive Tool',
+                  show: this.isBeta,
+                  handler: () => this.$refs.betaAnalyzeInteractiveToolRef.open(),
+                },
               ],
             },
           ],