diff --git a/package.json b/package.json
index bbea7cf..b6b3ce6 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",
+    "vue-color": "^2.8.1",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
new file mode 100644
index 0000000..6ae501e
--- /dev/null
+++ b/src/components/ColorPicker/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="color-picker">
+    <div class="color-picker-toggle" @click="togglePanel">
+      <slot></slot>
+    </div>
+    <div class="color-picker-mask" :class="show ? 'show' : ''" @click="show = false">
+      <div class="color-picker-panel" :style="style" @click.stop>
+        <chrome v-model="color"></chrome>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chrome } from 'vue-color'
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => ({ rgba: { r: 255, g: 255, b: 255, a: 1 } })
+    }
+  },
+  components: {
+    Chrome
+  },
+  data() {
+    return {
+      style: {
+        top: 0,
+        left: 0
+      },
+      show: false
+    }
+  },
+  methods: {
+    togglePanel(e) {
+      const { x, y, offsetX, offsetY, target } = e
+      this.style.top = y - offsetY + 'px'
+      this.style.left = x - offsetX + target.offsetWidth + 4 + 'px'
+      this.show = true
+    }
+  },
+  computed: {
+    color: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.color-picker {
+  &-mask {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: transparent;
+    z-index: 99999999;
+
+    &.show {
+      display: block;
+    }
+  }
+
+  &-toggle {
+    cursor: pointer;
+  }
+
+  &-panel {
+    position: absolute;
+  }
+}
+</style>
diff --git a/src/components/Custom3DChart/index.vue b/src/components/Custom3DChart/index.vue
index da5b31b..8b9ce2c 100644
--- a/src/components/Custom3DChart/index.vue
+++ b/src/components/Custom3DChart/index.vue
@@ -4,6 +4,9 @@
 <script>
 import * as echarts from 'echarts'
 import 'echarts-gl'
+
+const events = ['click']
+const zrEvents = ['mousemove', 'mousedown', 'mouseup']
 export default {
   props: {
     option: {
@@ -19,26 +22,51 @@ export default {
     return {}
   },
   mounted() {
-    this.chart = echarts.init(this.$refs.containerRef)
-    this.chart.setOption(this.option)
+    this._chart = echarts.init(this.$refs.containerRef)
+    this._chart.setOption(this.option)
+    this.initEventListener()
   },
   methods: {
+    initEventListener() {
+      events.forEach(eventName => {
+        this._chart.on(eventName, params => {
+          this.$emit(eventName, params)
+        })
+      })
+
+      const zr = this.getZRender()
+      zrEvents.forEach(eventName => {
+        zr.on(eventName, params => {
+          this.$emit(`zr:${eventName}`, params)
+        })
+      })
+    },
+
     resize() {
-      this.chart && this.chart.resize()
+      this._chart && this._chart.resize()
+    },
+
+    // 获取echart实例
+    getChartInstance() {
+      return this._chart
+    },
+
+    getZRender() {
+      return this._chart.getZr()
     }
   },
   watch: {
     option: {
       handler() {
-        if (this.chart) {
-          this.chart.setOption(this.option)
+        if (this._chart) {
+          this._chart.setOption(this.option)
         }
       },
       deep: true
     },
     height() {
       this.$nextTick(() => {
-        this.chart && this.chart.resize()
+        this._chart && this._chart.resize()
       })
     }
   }
diff --git a/src/mixins/ModalMixin.js b/src/mixins/ModalMixin.js
index 899068d..def5dd3 100644
--- a/src/mixins/ModalMixin.js
+++ b/src/mixins/ModalMixin.js
@@ -7,6 +7,9 @@ export default {
     computed: {
         visible: {
             get() {
+                if (this.value && this.beforeModalOpen && typeof this.beforeModalOpen == 'function') {
+                    this.beforeModalOpen()
+                }
                 return this.value
             },
             set(val) {
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 3e9a077..786129a 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -12,7 +12,14 @@
       </pop-over-with-icon>
       <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
         Spectra
-        <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
+        <spectra
+          slot="content"
+          v-model="spectraType"
+          @input="
+            spectraVisible = false
+            changeChartByType($event)
+          "
+        />
       </pop-over-with-icon>
     </div>
     <!-- 二级交互栏结束 -->
@@ -26,7 +33,8 @@
           </template>
           <beta-gamma-spectrum-chart
             ref="betaGammaChartRef"
-            :data="histogramDataList"
+            :histogramDataList="histogramDataList"
+            :histogramDataDList="histogramDataDList"
             @positionChange="handlePositionChange"
             @rangeChange="handleRangeChange"
           />
@@ -47,6 +55,7 @@
                 <spectrum-line-chart
                   ref="lineChart1Ref"
                   :data="gammaOriginalData"
+                  :energy="gammaEnergyData"
                   @rangeChange="handleLineChartRangeChange($event, 'y')"
                 />
               </beta-gamma-chart-container>
@@ -58,7 +67,8 @@
                 </template>
                 <spectrum-line-chart
                   ref="lineChart2Ref"
-                  :data="betaProjectedData"
+                  :data="gammaProjectedData"
+                  :energy="gammaEnergyData"
                   @rangeChange="handleLineChartRangeChange($event, 'y')"
                 />
               </beta-gamma-chart-container>
@@ -73,6 +83,7 @@
                 <spectrum-line-chart
                   ref="lineChart3Ref"
                   :data="betaOriginalData"
+                  :energy="betaEnergyData"
                   title="Beta"
                   color="#00ff1e"
                   @rangeChange="handleLineChartRangeChange($event, 'x')"
@@ -86,7 +97,8 @@
                 </template>
                 <spectrum-line-chart
                   ref="lineChart4Ref"
-                  :data="gammaProjectedData"
+                  :data="betaProjectedData"
+                  :energy="betaEnergyData"
                   title="Beta"
                   color="#00ff1e"
                   @rangeChange="handleLineChartRangeChange($event, 'x')"
@@ -119,6 +131,7 @@
 </template>
 
 <script>
+import { getAction } from '../../api/manage'
 import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
 import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
 import ComparisonModal from './components/Modals/ComparisonModal.vue'
@@ -143,56 +156,79 @@ export default {
     Spectra
   },
   props: {
-    data: {
+    sample: {
       type: Object
     }
   },
   data() {
     return {
       spectraVisible: false,
-      spectraType: 'Sample Data',
+      spectraType: 'sample',
+
+      resultDisplay: [],
 
-      resultDisplay: [
-        {
-          id: 1,
-          isotope: 'Xe131m',
-          concentration: '0.03464',
-          uncertainty: '+/-0.01988',
-          mdc: '0.03464'
-        },
-        {
-          id: 2,
-          isotope: 'Xe131m',
-          concentration: '0.03464',
-          uncertainty: '+/-0.01988',
-          mdc: '0.03464'
-        },
-        {
-          id: 3,
-          isotope: 'Xe131m',
-          concentration: '0.03464',
-          uncertainty: '+/-0.01988',
-          mdc: '0.03464'
-        },
-        {
-          id: 4,
-          isotope: 'Xe131m',
-          concentration: '0.03464',
-          uncertainty: '+/-0.01988',
-          mdc: '0.03464'
-        }
-      ],
       histogramDataList: [],
+      histogramDataDList: [],
 
       gammaOriginalData: [],
+      gammaProjectedData: [],
+
       betaOriginalData: [],
       betaProjectedData: [],
-      gammaProjectedData: [],
+
+      gammaEnergyData: [],
+      betaEnergyData: [],
 
       comparisonModalVisible: false
     }
   },
   methods: {
+    async getSampleDetail() {
+      this.spectraType = 'sample'
+
+      const { dbName, sampleId } = this.sample
+      const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
+        dbName,
+        sampleId
+      })
+      if (success) {
+        this.sampleDetail = result
+        this.changeChartByType('sample')
+      } else {
+        this.$message.error(message)
+      }
+    },
+
+    changeChartByType(type) {
+      const {
+        betaOriginalData,
+        betaProjectedData,
+        betaEnergyData,
+
+        gammaOriginalData,
+        gammaProjectedData,
+        gammaEnergyData,
+
+        histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
+        histogramDataDList, // 左侧 Beta-Gamma Spectrum: Sample 图表的3D部分
+        XeData, // 右下角Result Display
+        spectrumData
+      } = this.sampleDetail[type]
+
+      this.histogramDataList = histogramDataList
+      this.histogramDataDList = histogramDataDList
+
+      this.gammaOriginalData = gammaOriginalData
+      this.gammaProjectedData = gammaProjectedData
+      this.gammaEnergyData = gammaEnergyData
+
+      this.betaOriginalData = betaOriginalData
+      this.betaProjectedData = betaProjectedData
+      this.betaEnergyData = betaEnergyData
+
+      this.resultDisplay = XeData
+    },
+
     resize() {
       this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
       this.$refs.lineChart1Ref && this.$refs.lineChart1Ref.resize()
@@ -241,27 +277,9 @@ export default {
     }
   },
   watch: {
-    data: {
-      handler(newVal) {
-        const {
-          betaOriginalData,
-          betaProjectedData,
-          gammaOriginalData,
-          gammaProjectedData,
-          histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
-          spectrumData
-        } = newVal
-
-
-        console.log('%c [ spectrumData ]-246', 'font-size:13px; background:pink; color:#bf2c9f;', spectrumData)
-
-        this.histogramDataList = histogramDataList
-
-        this.gammaOriginalData = gammaOriginalData
-        this.betaOriginalData = betaOriginalData
-
-        this.betaProjectedData = betaProjectedData
-        this.gammaProjectedData = gammaProjectedData
+    sample: {
+      handler() {
+        this.getSampleDetail()
       },
       immediate: true
     }
@@ -280,11 +298,11 @@ export default {
   }
 
   .beta-gamma-spectrum-sample {
-    width: calc(100% - 1078px);
+    width: calc(100% - 1111px);
   }
 
   .beta-and-gamma-spectrum {
-    width: 1048px;
+    width: 1081px;
     margin-left: 30px;
     flex-direction: column;
 
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 8886eed..4e4cadc 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -137,12 +137,20 @@ const twoDOption = {
 //3D Surface 配置
 
 const threeDSurfaceOption = {
+  tooltip: {
+    trigger: 'item',
+    formatter: ({ value: [x, y, z] }) => {
+      // 自定义 tooltip 的内容
+      return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
+    }
+  },
   visualMap: {
     show: false,
-    dimension: 2,
     min: 0,
     max: 0,
-    inRange: ['#47C134', '#f00']
+    inRange: {
+      color: ['#0DCF38', '#B5475E']
+    }
   },
   grid3D: {
     axisLabel: {
@@ -198,6 +206,21 @@ const threeDSurfaceOption = {
 
 // 3D Scatter 配置
 const threeDScatterOption = {
+  tooltip: {
+    trigger: 'item',
+    formatter: ({ value: [x, y, z] }) => {
+      // 自定义 tooltip 的内容
+      return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
+    }
+  },
+  visualMap: {
+    show: false,
+    min: 0,
+    max: 0,
+    inRange: {
+      color: ['#0DCF38', '#B5475E']
+    }
+  },
   grid3D: {
     axisLabel: {
       color: '#C4E5A6'
@@ -242,23 +265,27 @@ const threeDScatterOption = {
       color: '#C4E5A6',
       fontSize: 14
     },
-    max: 6
+    max: 0
   },
   series: {
     type: 'scatter3D',
-    symbolSize: 2.5,
-    itemStyle: {
-      color: '#a2d092'
+    symbolSize: 5,
+    emphasis: {
+      label: {
+        show: false
+      }
     },
-    data: new Array(512)
-      .fill(0)
-      .map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256), 4.5 + Math.random() * 0.1])
+    data: []
   }
 }
 
 export default {
   props: {
-    data: {
+    histogramDataList: {
+      type: Array,
+      default: () => []
+    },
+    histogramDataDList: {
       type: Array,
       default: () => []
     }
@@ -408,13 +435,24 @@ export default {
     }
   },
   watch: {
-    data: {
+    histogramDataList: {
       handler(newVal) {
+        this.active = 0
         this.twoDOption.series.data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
+      },
+      immediate: true
+    },
 
-        const treeDSurfaceZMax = Math.max(...newVal.map(item => item.c))
-        this.threeDSurfaceOption.zAxis3D.max = Math.ceil(treeDSurfaceZMax * 1.2)
+    histogramDataDList: {
+      handler(newVal) {
+        const maxCount = Math.max(...newVal.map(item => item.c))
+        this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
         this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
+        this.threeDSurfaceOption.visualMap.max = maxCount
+
+        this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
+        this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据
+        this.threeDScatterOption.visualMap.max = maxCount
       },
       immediate: true
     },
diff --git a/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue b/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
new file mode 100644
index 0000000..1f7a205
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
@@ -0,0 +1,122 @@
+<template>
+  <custom-modal v-model="visible" :width="700" title="Color Config">
+    <div class="color-config">
+      <div class="color-config-item" v-for="(item, index) in configList" :key="index">
+        <div class="title">{{ item.title }}</div>
+        <color-picker v-model="config[item.key]">
+          <div class="color-picker-picker" :style="{ background: combineRGBA(config[item.key]) }"></div>
+        </color-picker>
+
+        <div class="desc">{{ item.desc }}</div>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const configList = [
+  {
+    title: 'Spectrum Line',
+    key: 'spectrumLine',
+    desc: 'Color of the original spectrum line'
+  },
+  {
+    title: 'Baseline',
+    key: 'baseline',
+    desc: 'Color of baseline'
+  },
+  {
+    title: 'Lc Line',
+    key: 'lcLine',
+    desc: 'Color of lc line'
+  },
+  {
+    title: 'Scac Line',
+    key: 'scacLine',
+    desc: 'Color of scac line'
+  },
+  {
+    title: 'Peak Line',
+    key: 'peakLine',
+    desc: "Color of all peaks' curve"
+  },
+  {
+    title: 'Compare Line',
+    key: 'compareLine',
+    desc: 'Color of another spectrum line which is used to compare with current spectrum'
+  },
+  {
+    title: 'Spect Sum Line',
+    key: 'spectSumLine',
+    desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio'
+  },
+  {
+    title: 'Spect Cut Line',
+    key: 'spectCutLine',
+    desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio'
+  },
+  {
+    title: 'FitBase Line',
+    key: 'fitBaseLine',
+    desc: 'Color of the base line in edit state'
+  }
+]
+export default {
+  mixins: [ModalMixin],
+  components: {
+    ColorPicker
+  },
+  data() {
+    this.configList = configList
+    return {
+      config: {
+        spectrumLine: { rgba: { r: 255, g: 255, b: 0, a: 1 } },
+        baseline: { rgba: { r: 0, g: 246, b: 255, a: 1 } },
+        lcLine: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
+        scacLine: { rgba: { r: 244, g: 112, b: 247, a: 1 } },
+        peakLine: { rgba: { r: 255, g: 127, b: 39, a: 1 } },
+        compareLine: { rgba: { r: 0, g: 255, b: 0, a: 1 } },
+        spectSumLine: { rgba: { r: 0, g: 0, b: 255, a: 1 } },
+        spectCutLine: { rgba: { r: 34, g: 90, b: 106, a: 1 } },
+        fitBaseLine: { rgba: { r: 255, g: 255, b: 255, a: 1 } }
+      }
+    }
+  },
+  methods: {
+    combineRGBA({ rgba: { r, g, b, a } }) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.color-config {
+  &-item {
+    display: flex;
+    align-items: center;
+
+    &:not(:first-child) {
+      margin-top: 15px;
+    }
+
+    .title {
+      width: 100px;
+      margin-right: 20px;
+      flex-shrink: 0;
+    }
+
+    .color-picker-picker {
+      width: 26px;
+      height: 26px;
+    }
+
+    .desc {
+      margin-left: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
new file mode 100644
index 0000000..8bb189a
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <custom-modal v-model="visible" :width="490" title="Config User Library" :footer="null">
+    <div class="config-user-library">
+      <a-transfer
+        :titles="['Total Nuclides', 'User Nuclides']"
+        :dataSource="list"
+        :list-style="{
+          width: '200px',
+          height: '400px'
+        }"
+        :target-keys="targetKeys"
+        :render="item => item.title"
+        :showSearch="true"
+        @change="handleChange"
+      ></a-transfer>
+
+      <div class="config-user-library-btns">
+        <div>
+          <a-button type="primary">Default</a-button>
+          <a-button type="primary">Load</a-button>
+        </div>
+        <div>
+          <a-button type="primary">Save</a-button>
+          <a-button type="primary">Apply</a-button>
+        </div>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+export default {
+  mixins: [ModalMixin],
+  data() {
+    return {
+      list: [
+        {
+          key: '1',
+          title: 'Ac228'
+        },
+        {
+          key: '2',
+          title: 'Ag106M'
+        }
+      ],
+      targetKeys: []
+    }
+  },
+  methods: {
+    handleChange(targetKeys) {
+      this.targetKeys = targetKeys
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.config-user-library {
+  &-btns {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    > div {
+      width: 200px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/DataProcessingLogModal.vue b/src/views/spectrumAnalysis/components/Modals/DataProcessingLogModal.vue
new file mode 100644
index 0000000..a4ec6f2
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/DataProcessingLogModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <custom-modal v-model="visible" :width="1000" title="Data Processing Log">
+    <pre class="data-processing-log">{{ text }}</pre>
+    <div slot="custom-footer" style="text-align: center;">
+      <a-space :size="20">
+        <a-button type="primary">Export</a-button>
+        <a-button @click="visible = false">Cancel</a-button>
+      </a-space>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+export default {
+  mixins: [ModalMixin],
+  data() {
+    return {
+      text: `--------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+       `
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.data-processing-log {
+  height: 450px;
+  padding: 5px;
+  overflow: auto;
+  background-color: #285367;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue b/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
index ac56a67..bfea4ef 100644
--- a/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
@@ -64,7 +64,7 @@
         <!-- Equation -->
         <title-over-boarder class="mt-20" title="Equation">
           <div class="equation">
-            Efficiency = 59.541 + (88.034 - 59.541) * (E - 1)/ (0.058243 - 1)
+            Efficiency = 59.541 + (88.034 - 59.541) * (E - 1) / (0.058243 - 1)
           </div>
         </title-over-boarder>
         <!-- curve -->
@@ -174,15 +174,18 @@ const initialOption = {
   series: [
     {
       type: 'line',
+      symbol: 'square',
       itemStyle: {
-        color: '#EDF005'
+        color: '#FF0000' // 设置符号的颜色
+      },
+      lineStyle: {
+        color: '#C2CC11' // 设置折线的颜色
       },
       data: [
         [42, 0],
         [100, 0.2],
         [978, 0.1]
-      ],
-      color: 'red'
+      ]
     }
   ]
 }
@@ -227,7 +230,7 @@ export default {
 
             &-label,
             &-control {
-                line-height: 32px;
+              line-height: 32px;
             }
 
             &:last-child {
@@ -290,7 +293,7 @@ export default {
     }
 
     .curve {
-      height: 300px;
+      height: 400px;
     }
   }
 
diff --git a/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue b/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
new file mode 100644
index 0000000..fea3e89
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
@@ -0,0 +1,331 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null">
+    <div class="energy-calibration">
+      <div class="left">
+        <!-- Calibration Data -->
+        <title-over-boarder title="Calibration Data">
+          <div class="calibration-data">
+            <a-form-model
+              :colon="false"
+              :labelCol="{
+                style: {
+                  width: '70px',
+                  textAlign: 'left',
+                  flexShrink: 0
+                }
+              }"
+              :wrapperCol="{
+                style: {
+                  flex: 1
+                }
+              }"
+            >
+              <a-form-model-item label="Channel">
+                <a-input></a-input>
+              </a-form-model-item>
+              <a-form-model-item label="Energy">
+                <a-input></a-input>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Insert</a-button>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Modify</a-button>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Delete</a-button>
+              </a-form-model-item>
+            </a-form-model>
+            <!-- 表格 -->
+            <a-table
+              :columns="columns"
+              :dataSource="list"
+              :pagination="false"
+              :class="list.length ? 'has-data' : ''"
+              :scroll="{ y: 182 }"
+            ></a-table>
+            <!-- 表格结束 -->
+            <div class="operators">
+              <div>
+                <a-button type="primary">Call</a-button>
+                <a-button type="primary">Save</a-button>
+              </div>
+              <div>
+                <a-button type="primary">Apply</a-button>
+              </div>
+            </div>
+          </div>
+        </title-over-boarder>
+        <!-- Equation -->
+        <title-over-boarder class="mt-20" title="Equation">
+          <div class="equation">
+            Energy = -0.056137 + C * 0.334493 + C<sup>2</sup> * 3.10365e - 08 + C<sup>3</sup> * -4.05186e - 12
+          </div>
+        </title-over-boarder>
+        <!-- curve -->
+        <title-over-boarder class="mt-20" title="curve">
+          <div class="curve">
+            <custom-chart :option="option" />
+          </div>
+        </title-over-boarder>
+      </div>
+      <div class="right">
+        <title-over-boarder title="Data Source" style="height: 100%">
+          <div class="data-source">
+            <div class="data-source-main">
+              <div class="title">PHD</div>
+              <div class="content"></div>
+            </div>
+            <div class="footer mt-20">
+              <a-button type="primary">Set to Current</a-button>
+              <div class="mt-20">CallUpdate2</div>
+            </div>
+          </div>
+        </title-over-boarder>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
+
+const columns = [
+  {
+    title: 'Channel',
+    dataIndex: 'channel'
+  },
+  {
+    title: 'Energy(keV)',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'Fit(keV)',
+    dataIndex: 'fit'
+  },
+  {
+    title: 'Delta(%)',
+    dataIndex: 'delta'
+  }
+]
+
+const initialOption = {
+  grid: {
+    top: 20,
+    right: 20,
+    bottom: 50,
+    left: 70
+  },
+  title: {
+    text: 'Channel',
+    textStyle: {
+      color: '#8FD4F8',
+      fontSize: 14,
+      fontWeight: 'normal'
+    },
+    right: 10,
+    bottom: 0
+  },
+  xAxis: {
+    min: 42,
+    max: 2740,
+    axisLabel: {
+      color: '#fff'
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    axisLabel: {
+      color: '#fff'
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    },
+    name: 'keV',
+    nameLocation: 'center',
+    nameGap: 50,
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 14
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      symbol: 'square',
+      itemStyle: {
+        color: '#FF0000' // 设置符号的颜色
+      },
+      lineStyle: {
+        color: '#C2CC11' // 设置折线的颜色
+      },
+      data: [
+        [42, 0],
+        [100, 0.2],
+        [978, 0.1]
+      ]
+    }
+  ]
+}
+
+export default {
+  components: { TitleOverBoarder, CustomChart },
+  mixins: [ModalMixin],
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          energy: 'energy',
+          channel: 'channel',
+          fit: 'fit',
+          delta: 'delta'
+        }
+      ],
+      option: initialOption
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.energy-calibration {
+  display: flex;
+
+  .left {
+    flex: 1;
+
+    .calibration-data {
+      display: flex;
+      gap: 20px;
+
+      .ant-form {
+        width: 25%;
+
+        ::v-deep {
+          .ant-form-item {
+            margin-bottom: 15px;
+
+            &-label,
+            &-control {
+              line-height: 32px;
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+
+        .ant-btn {
+          width: 100%;
+        }
+      }
+
+      .ant-table-wrapper {
+        width: 50%;
+
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 182px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 183px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .operators {
+        width: 25%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .ant-select {
+          width: 100%;
+        }
+        .ant-btn {
+          width: 100%;
+
+          &:last-child {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+
+    .equation {
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background-color: #1b5465;
+    }
+
+    .curve {
+      height: 400px;
+    }
+  }
+
+  .right {
+    width: 20%;
+    margin-left: 20px;
+
+    .data-source {
+      .title {
+        height: 32px;
+        line-height: 32px;
+        background-color: #296d81;
+        padding: 0 5px;
+      }
+
+      .content {
+        height: 300px;
+        background-color: #275466;
+      }
+
+      .footer {
+        .ant-btn {
+          width: 100%;
+        }
+
+        > div {
+          text-align: center;
+          height: 32px;
+          line-height: 32px;
+          background-color: #285367;
+        }
+      }
+    }
+  }
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
new file mode 100644
index 0000000..1e5ba91
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
@@ -0,0 +1,14 @@
+<template>
+  <custom-modal v-model="visible" :width="700" title="Nuclide Library">
+    Nuclide Library
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+export default {
+  mixins: [ModalMixin]
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ResolutionCalibrationModal.vue b/src/views/spectrumAnalysis/components/Modals/ResolutionCalibrationModal.vue
new file mode 100644
index 0000000..0a9c7dc
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ResolutionCalibrationModal.vue
@@ -0,0 +1,331 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="Resolution Calibration" :footer="null">
+    <div class="resolution-calibration">
+      <div class="left">
+        <!-- Calibration Data -->
+        <title-over-boarder title="Calibration Data">
+          <div class="calibration-data">
+            <a-form-model
+              :colon="false"
+              :labelCol="{
+                style: {
+                  width: '70px',
+                  textAlign: 'left',
+                  flexShrink: 0
+                }
+              }"
+              :wrapperCol="{
+                style: {
+                  flex: 1
+                }
+              }"
+            >
+              <a-form-model-item label="Energy  ">
+                <a-input></a-input>
+              </a-form-model-item>
+              <a-form-model-item label="FWHM">
+                <a-input></a-input>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Insert</a-button>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Modify</a-button>
+              </a-form-model-item>
+              <a-form-model-item :label="' '">
+                <a-button type="primary">Delete</a-button>
+              </a-form-model-item>
+            </a-form-model>
+            <!-- 表格 -->
+            <a-table
+              :columns="columns"
+              :dataSource="list"
+              :pagination="false"
+              :class="list.length ? 'has-data' : ''"
+              :scroll="{ y: 182 }"
+            ></a-table>
+            <!-- 表格结束 -->
+            <div class="operators">
+              <div>
+                <a-button type="primary">Call</a-button>
+                <a-button type="primary">Save</a-button>
+              </div>
+              <div>
+                <a-button type="primary">Apply</a-button>
+              </div>
+            </div>
+          </div>
+        </title-over-boarder>
+        <!-- Equation -->
+        <title-over-boarder class="mt-20" title="Equation">
+          <div class="equation">
+            FWHM = (0.514363 + E * 0/00281408)<sup>1/2</sup>
+          </div>
+        </title-over-boarder>
+        <!-- curve -->
+        <title-over-boarder class="mt-20" title="curve">
+          <div class="curve">
+            <custom-chart :option="option" />
+          </div>
+        </title-over-boarder>
+      </div>
+      <div class="right">
+        <title-over-boarder title="Data Source" style="height: 100%">
+          <div class="data-source">
+            <div class="data-source-main">
+              <div class="title">PHD</div>
+              <div class="content"></div>
+            </div>
+            <div class="footer mt-20">
+              <a-button type="primary">Set to Current</a-button>
+              <div class="mt-20">CalResUpdate</div>
+            </div>
+          </div>
+        </title-over-boarder>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
+
+const columns = [
+  {
+    title: 'Energy(keV)',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'FWHM(keV)',
+    dataIndex: 'fwhm'
+  },
+  {
+    title: 'Fit(keV)',
+    dataIndex: 'fit'
+  },
+  {
+    title: 'Delta(%)',
+    dataIndex: 'delta'
+  }
+]
+
+const initialOption = {
+  grid: {
+    top: 20,
+    right: 20,
+    bottom: 50,
+    left: 70
+  },
+  title: {
+    text: 'Channel',
+    textStyle: {
+      color: '#8FD4F8',
+      fontSize: 14,
+      fontWeight: 'normal'
+    },
+    right: 10,
+    bottom: 0
+  },
+  xAxis: {
+    min: 42,
+    max: 2740,
+    axisLabel: {
+      color: '#fff'
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    axisLabel: {
+      color: '#fff'
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    },
+    name: 'keV',
+    nameLocation: 'center',
+    nameGap: 50,
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 14
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      symbol: 'square',
+      itemStyle: {
+        color: '#FF0000' // 设置符号的颜色
+      },
+      lineStyle: {
+        color: '#C2CC11' // 设置折线的颜色
+      },
+      data: [
+        [42, 0],
+        [100, 0.2],
+        [978, 0.1]
+      ]
+    }
+  ]
+}
+
+export default {
+  components: { TitleOverBoarder, CustomChart },
+  mixins: [ModalMixin],
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          energy: 'energy',
+          fwhm: 'fwhm',
+          fit: 'fit',
+          delta: 'delta'
+        }
+      ],
+      option: initialOption
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.resolution-calibration {
+  display: flex;
+
+  .left {
+    flex: 1;
+
+    .calibration-data {
+      display: flex;
+      gap: 20px;
+
+      .ant-form {
+        width: 25%;
+
+        ::v-deep {
+          .ant-form-item {
+            margin-bottom: 15px;
+
+            &-label,
+            &-control {
+              line-height: 32px;
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+
+        .ant-btn {
+          width: 100%;
+        }
+      }
+
+      .ant-table-wrapper {
+        width: 50%;
+
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 182px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 183px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .operators {
+        width: 25%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .ant-select {
+          width: 100%;
+        }
+        .ant-btn {
+          width: 100%;
+
+          &:last-child {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+
+    .equation {
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background-color: #1b5465;
+    }
+
+    .curve {
+      height: 400px;
+    }
+  }
+
+  .right {
+    width: 20%;
+    margin-left: 20px;
+
+    .data-source {
+      .title {
+        height: 32px;
+        line-height: 32px;
+        background-color: #296d81;
+        padding: 0 5px;
+      }
+
+      .content {
+        height: 300px;
+        background-color: #275466;
+      }
+
+      .footer {
+        .ant-btn {
+          width: 100%;
+        }
+
+        > div {
+          text-align: center;
+          height: 32px;
+          line-height: 32px;
+          background-color: #285367;
+        }
+      }
+    }
+  }
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/SpectrumCommentsModal.vue b/src/views/spectrumAnalysis/components/Modals/SpectrumCommentsModal.vue
new file mode 100644
index 0000000..265e603
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/SpectrumCommentsModal.vue
@@ -0,0 +1,34 @@
+<template>
+  <custom-modal v-model="visible" title="Spectrum Comments" :okHandler="handleOk" :footer="isAdd ? undefined : null">
+    <a-textarea v-model="comments" :rows="8" :disabled="!isAdd"></a-textarea>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+export default {
+  mixins: [ModalMixin],
+  props: {
+    isAdd: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      comments: ''
+    }
+  },
+  methods: {
+    // ModalMixin 中的生命周期方法
+    beforeModalOpen() {
+      this.comments = ''
+    },
+    handleOk() {
+      console.log('%c [  ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', this.comments)
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index b3f38f8..197677a 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -126,6 +126,10 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    energy: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -160,6 +164,10 @@ export default {
           if (find) {
             this.summary.count = find.y
           }
+          const energy = this.energy[xAxis]
+          if(energy) {
+            this.summary.energy = energy[0].toFixed(2)
+          }
         } else {
           this.option.series.markLine.data = []
           this.summary.channel = 0
@@ -252,7 +260,7 @@ export default {
       handler(newVal) {
         this.option.series.data = newVal.map(({ x, y }) => [x, y])
 
-        const max = Math.max(...newVal.map(item => item.y))
+        const max = Math.max(...newVal.map(item => item.y)) * 1.1
         this.option.yAxis.interval = Math.ceil(max / 4)
         this.option.yAxis.max = this.option.yAxis.interval * 4
       },
diff --git a/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue b/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue
index 83a6b04..bee6a55 100644
--- a/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue
+++ b/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="spectra">
     <div
-      :class="'spectra-item' + (item.title == innerValue ? ' active' : '')"
+      :class="'spectra-item' + (item.value == innerValue ? ' active' : '')"
       v-for="(item, index) in list"
       :key="index"
       @click="handleClick(item)"
@@ -14,16 +14,20 @@
 <script>
 const list = [
   {
-    title: 'Sample Data'
+    title: 'Sample Data',
+    value: 'sample'
   },
   {
-    title: 'GasBg Data'
+    title: 'GasBg Data',
+    value: 'gasbg'
   },
   {
-    title: 'DetBg Data'
+    title: 'DetBg Data',
+    value: 'detbg'
   },
   {
-    title: 'QC Data'
+    title: 'QC Data',
+    value: 'qc'
   }
 ]
 export default {
@@ -39,7 +43,7 @@ export default {
   },
   methods: {
     handleClick(item) {
-      this.innerValue = item.title
+      this.innerValue = item.value
     }
   },
   computed: {
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index c202606..ba868df 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -29,7 +29,7 @@
       <beta-gamma-analysis
         v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA"
         ref="betaGammaAnalysisRef"
-        :data="analysisData"
+        :sample="sampleData"
       />
       <resize-observer @notify="handleResize" />
     </div>
@@ -78,6 +78,34 @@
     <!-- Efficiency Calibration 弹窗开始 -->
     <efficiency-calibration-modal v-model="efficiencyCalibrationModalShow" />
     <!-- Efficiency Calibration 弹窗结束 -->
+
+    <!-- Energy Calibration 弹窗开始 -->
+    <energy-calibration-modal v-model="energyCalibrationModalShow" />
+    <!-- Energy Calibration 弹窗结束 -->
+
+    <!-- Resolution Calibration 弹窗开始 -->
+    <resolution-calibration-modal v-model="resolutionCalibrationModalShow" />
+    <!-- Resolution Calibration 弹窗结束 -->
+
+    <!-- SpectrumComments 弹窗开始 -->
+    <spectrum-comments-modal v-model="spectrumCommentsModalVisible" :isAdd="isSpectrumCommentsAdd" />
+    <!-- SpectrumComments 弹窗结束 -->
+
+    <!-- Color Config 弹窗开始 -->
+    <color-config-modal v-model="colorConfigModalVisible" />
+    <!-- Color Config 弹窗结束 -->
+
+    <!-- Data Processing Log 弹窗开始 -->
+    <data-processing-log-modal v-model="dataProcessingLogModalVisible" />
+    <!-- Data Processing Log 弹窗结束 -->
+
+    <!-- Config User Library 弹窗开始 -->
+    <config-user-library-modal v-model="configUserLibModalVisible" />
+    <!-- Config User Library 弹窗结束 -->
+
+    <!-- Config User Library 弹窗开始 -->
+    <nuclide-library-modal v-model="nuclideLibraryModalVisible" />
+    <!-- Config User Library 弹窗结束 -->
   </div>
 </template>
 <script>
@@ -92,11 +120,17 @@ import MultiLevelMenu from './components/MultiLevelMenu.vue'
 import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
 import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
 import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal/index.vue'
-import { getAction } from '../../api/manage'
 import KorsumModal from './components/Modals/KorsumModal.vue'
 import ReProcessingModal from './components/Modals/ReProcessingModal/index.vue'
 import ZeroTimeModal from './components/Modals/ZeroTimeModal.vue'
 import EfficiencyCalibrationModal from './components/Modals/EfficiencyCalibrationModal.vue'
+import EnergyCalibrationModal from './components/Modals/EnergyCalibrationModal.vue'
+import ResolutionCalibrationModal from './components/Modals/ResolutionCalibrationModal.vue'
+import SpectrumCommentsModal from './components/Modals/SpectrumCommentsModal.vue'
+import ColorConfigModal from './components/Modals/ColorConfigModal.vue'
+import DataProcessingLogModal from './components/Modals/DataProcessingLogModal.vue'
+import ConfigUserLibraryModal from './components/Modals/ConfigUserLibraryModal.vue'
+import NuclideLibraryModal from './components/Modals/NuclideLibraryModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -119,7 +153,14 @@ export default {
     KorsumModal,
     ReProcessingModal,
     ZeroTimeModal,
-    EfficiencyCalibrationModal
+    EfficiencyCalibrationModal,
+    EnergyCalibrationModal,
+    ResolutionCalibrationModal,
+    SpectrumCommentsModal,
+    ColorConfigModal,
+    DataProcessingLogModal,
+    ConfigUserLibraryModal,
+    NuclideLibraryModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -132,7 +173,7 @@ export default {
       loadFromDbModalVisible: false, // 从数据库加载弹窗
       loadFromFileModalVisible: false, // 从文件加载弹窗
 
-      analysisData: {}, // 要分析的谱数据
+      sampleData: {}, // 要分析的谱数据
 
       peakInfomationModalVisible: false,
 
@@ -141,16 +182,24 @@ export default {
       saveSettingModalVisible: false, // 保存设置弹窗
 
       analyzeConfigureModalVisible: false, // 分析设置弹窗
-
       reprocessingModalVisible: false, // 重新分析弹窗
-
       analyzeInteractiveToolModalVisible: false, // 分析工具弹窗
-
       zeroTimeModalVisible: false, // Zero Time 弹窗
-
       korsumModalShow: false, // Korsum 弹窗
 
-      efficiencyCalibrationModalShow: false // Calibration -> efficiency弹窗
+      efficiencyCalibrationModalShow: false, // Calibration -> Efficiency 弹窗
+      energyCalibrationModalShow: false, // Calibration -> Energy 弹窗
+      resolutionCalibrationModalShow: false, // Calibration -> Resolution 弹窗
+
+      spectrumCommentsModalVisible: false, // Comments -> Spectrum Comments 弹窗
+      isSpectrumCommentsAdd: true, // Spectrum Comments 是否是新增
+
+      colorConfigModalVisible: false, // Help -> Color Config 弹窗
+
+      dataProcessingLogModalVisible: false, // Log -> Data Processing Log 弹窗
+
+      configUserLibModalVisible: false, // NuclideLibrary -> Config User Library 弹窗
+      nuclideLibraryModalVisible: true // NuclideLibrary -> Nuclide Library 弹窗
     }
   },
   created() {
@@ -162,40 +211,22 @@ export default {
     })
   },
   methods: {
-    // 从数据库加载
-    handleLoadFromDb() {
-      this.loadFromDbModalVisible = true
-    },
-
     // 从数据库加载-选择完成
     handleLoadSampleFromDB(sampleList) {
       this.sampleList = sampleList
     },
 
     // 加载选中的样本
-    async loadSelectedSample({ dbName, sampleType, sampleId }) {
+    async loadSelectedSample(sample) {
       // B是beta-gamma  P G是gamma
-      if (sampleType == 'B') {
-        const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
-          dbName,
-          sampleId: sampleId
-        })
-        if (success) {
-          this.analysisData = result.sample
-          this.analysisType = ANALYZE_TYPE.BETA_GAMMA
-        } else {
-          this.$message.error(message)
-        }
+      this.sampleData = sample
+      if (sample.sampleType == 'B') {
+        this.analysisType = ANALYZE_TYPE.BETA_GAMMA
       } else {
         // gamma
       }
     },
 
-    // 从文件加载
-    handleLoadFromFile() {
-      this.loadFromFileModalVisible = true
-    },
-
     // 清理全部
     handleCleanAll() {
       this.sampleList = []
@@ -223,34 +254,10 @@ export default {
       console.log('%c [ savePHDToFile ]-162', 'font-size:13px; background:pink; color:#bf2c9f;', type)
     },
 
-    // 显示分析设置弹窗
-    handleShowConfigureModal() {
-      this.analyzeConfigureModalVisible = true
-    },
-
     handleReprocessAll() {
       console.log('%c [ handleReprocessAll ]-216', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 弹出能量刻度界面
-    handleEnergy() {
-      console.log('%c [ handleEnergy ]-163', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
-    // 弹出分辨率刻度界面
-    handleResolution() {
-      console.log('%c [ handleResolution ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
-    // 弹出 Nuclide Library 弹窗
-    handleNuclideLib() {
-      console.log('%c [ handleNuclideLib ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
-    handleConfigUserLib() {
-      console.log('%c [ handleConfigUserLib ]-182', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     // 查看自动处理报告
     handleViewARR() {
       console.log('%c [ handleViewARR ]-186', 'font-size:13px; background:pink; color:#bf2c9f;')
@@ -268,12 +275,14 @@ export default {
 
     // 可浏览原始谱中台站操作员对样品采集和测量过程的注释信息；可以浏览分析人员对分析过程的注释信息
     handleViewComments() {
-      console.log('%c [ viewComments ]-162', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.spectrumCommentsModalVisible = true
+      this.isSpectrumCommentsAdd = false
     },
 
     // 可添加能谱分析注释
     handleAddComments() {
-      console.log('%c [ handleAddComments ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.spectrumCommentsModalVisible = true
+      this.isSpectrumCommentsAdd = true
     },
 
     // 查看自动处理日志
@@ -281,21 +290,11 @@ export default {
       console.log('%c [ handleAutoAnalysisLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 查看交互分析日志
-    handleGammaViewerLog() {
-      console.log('%c [ handleGammaViewerLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     // 查看软件操作帮助文档
     handleHelp() {
       console.log('%c [ handleHelp ]-221', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 设置软件中主界面和交互分析界面中各曲线的颜色
-    handleLineColorConfig() {
-      console.log('%c [ handleLineColorConfig ]-225', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     handleResize() {
       this.$refs.gammaAnalysisRef && this.$refs.gammaAnalysisRef.resize()
       this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
@@ -313,12 +312,12 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  handler: () => (this.loadFromDbModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Load From File',
-                  handler: this.handleLoadFromFile
+                  handler: () => (this.loadFromFileModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
@@ -415,14 +414,12 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Configure',
-                  handler: this.handleShowConfigureModal
+                  handler: () => (this.analyzeConfigureModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'ReProcessing',
-                  handler: () => {
-                    this.reprocessingModalVisible = true
-                  }
+                  handler: () => (this.reprocessingModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
@@ -432,23 +429,17 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Interactive Tool',
-                  handler: () => {
-                    this.analyzeInteractiveToolModalVisible = true
-                  }
+                  handler: () => (this.analyzeInteractiveToolModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Zero Time',
-                  handler: () => {
-                    this.zeroTimeModalVisible = true
-                  }
+                  handler: () => (this.zeroTimeModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Korsum',
-                  handler: () => {
-                    this.korsumModalShow = true
-                  }
+                  handler: () => (this.korsumModalShow = true)
                 }
               ]
             }
@@ -463,19 +454,17 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Energy',
-                  handler: this.handleEnergy
+                  handler: () => (this.energyCalibrationModalShow = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Resolution',
-                  handler: this.handleResolution
+                  handler: () => (this.resolutionCalibrationModalShow = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Efficiency',
-                  handler: () => {
-                    this.efficiencyCalibrationModalShow = true
-                  }
+                  handler: () => (this.efficiencyCalibrationModalShow = true)
                 }
               ]
             }
@@ -490,12 +479,12 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Nuclide Library',
-                  handler: this.handleNuclideLib
+                  handler: () => (this.nuclideLibraryModalVisible = true)
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Config User Library',
-                  handler: this.handleConfigUserLib
+                  handler: () => (this.configUserLibModalVisible = true)
                 }
               ]
             }
@@ -560,7 +549,7 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'GammaViewer Log',
-                  handler: this.handleGammaViewerLog
+                  handler: () => (this.dataProcessingLogModalVisible = true)
                 }
               ]
             }
@@ -579,8 +568,8 @@ export default {
                 },
                 {
                   type: 'a-menu-item',
-                  title: 'Line Color Config',
-                  handler: this.handleLineColorConfig
+                  title: 'Color Config',
+                  handler: () => (this.colorConfigModalVisible = true)
                 }
               ]
             }