diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index a785e99..dfd8df0 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -5,7 +5,7 @@
 import * as echarts from 'echarts'
 
 const events = ['brushEnd']
-const zrEvents = ['mousemove', 'mousedown', 'mouseup']
+const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click']
 
 export default {
   props: {
diff --git a/src/utils/request.js b/src/utils/request.js
index 4d1ace7..dbfa9cd 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,7 +17,7 @@ let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
 const service = axios.create({
   //baseURL: '/jeecg-boot',
   baseURL: apiBaseUrl, // api base_url
-  timeout: 9000 // 请求超时时间
+  timeout: 60 * 1000 // 请求超时时间
 })
 
 const err = (error) => {
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index b66290c..7522132 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -317,16 +317,16 @@ export default {
   &-main {
     height: calc(100% - 51px);
     display: flex;
+    gap: 30px;
     overflow: auto hidden;
   }
 
   .beta-gamma-spectrum-sample {
-    width: calc(100% - 1111px);
+    flex: 788;
   }
 
   .beta-and-gamma-spectrum {
-    width: 1081px;
-    margin-left: 30px;
+    flex: 1048;
     flex-direction: column;
 
     .spectrum-charts {
diff --git a/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue b/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
index 086c2e9..5854ff8 100644
--- a/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
@@ -22,7 +22,7 @@ export default {
       type: Number
     },
     sampleId: {
-      type: String
+      type: Number
     }
   },
   data() {
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue
index d6c0fc5..37e29fa 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue
@@ -31,7 +31,7 @@ export default {
       default: true
     },
     sampleId: {
-      type: String
+      type: Number
     }
   },
   data() {
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
new file mode 100644
index 0000000..bf52c3a
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="beta-detector-calibration">
+    <div class="content">
+      <div class="QCs">
+        <div class="beta-gamma-spectrum">
+          <p>Beta-Gamma Spectrum: QC</p>
+          <div class="content">
+            <div class="settings">
+              <div class="channel-and-width">
+                <span> Channel: 210 </span>
+                <span>
+                  Gamma Channel Width:
+                  <a-input-number></a-input-number>
+                </span>
+              </div>
+              <div class="energy">Energy: <span>599.97</span></div>
+            </div>
+            <div class="beta-gamma-chart">
+              <custom-chart :option="betaGammaChartOption" />
+            </div>
+          </div>
+        </div>
+        <div class="gamma-gated-beta-spectrum">
+          <p>Gamma-gated Beta Spectrum: QC</p>
+          <div class="content">
+            <div class="gamma-gated-chart">
+              <custom-chart :option="gammaGatedChartOption" />
+              <a-button type="primary" size="small">Snapshot</a-button>
+            </div>
+          </div>
+          <div class="content channel-and-energy">
+            <a-form-model layout="inline">
+              <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>
+            <a-button type="primary">Add</a-button>
+          </div>
+          <a-table
+            size="small"
+            :columns="columns"
+            :dataSource="list"
+            :pagination="false"
+            :class="list.length ? 'has-data' : ''"
+            :scroll="{ y: 99 }"
+          ></a-table>
+        </div>
+      </div>
+      <div class="figure">
+        <p class="title">Figure of Beta Detector Calibration</p>
+        <div class="content">
+          <div class="figure-chart">
+            <custom-chart :option="figureChartOption" />
+            <a-button type="primary" size="small">Snapshot</a-button>
+          </div>
+        </div>
+      </div>
+      <div class="calibration-parameter">
+        <p>Calibration Parameter of Beta Detector</p>
+        <div class="calibration-funcs">
+          <div class="calibration-funcs-func">
+            <title-over-border title="Old Calibration Function">
+              <p>
+                <span>C to E : </span>
+                <span>E = 12.0809 + 2.39764 *C + 0.00331138 *C <sup>2</sup> </span>
+              </p>
+              <div>
+                <span>E to C : </span>
+                <span>C = -2.83996 + 0.386245 *E + -9.63318e-05 *E <sup>2</sup> </span>
+              </div>
+            </title-over-border>
+            <title-over-border title="New Calibration Function">
+              <p>
+                <span>C to E : </span>
+                <span>
+                  E =
+                  <a-input type="number" size="small" /> + <a-input type="number" size="small" /> *C +
+                  <a-input type="number" size="small" /> *C <sup>2</sup>
+                </span>
+              </p>
+              <div>
+                <span>E to C : </span>
+                <span>C = 0 + 0 *E + 0 *E <sup>2</sup> </span>
+              </div>
+            </title-over-border>
+          </div>
+          <div class="calibration-funcs-btns">
+            <a-button type="primary">Reset Button</a-button>
+            <a-button type="primary">Fitting</a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <title-over-border title="New Calibration is Applied to">
+        <a-radio-group>
+          <p>
+            <a-radio>All Spectra</a-radio>
+          </p>
+          <a-radio>Current Spectrum</a-radio>
+        </a-radio-group>
+      </title-over-border>
+      <title-over-border title="Recalculate ROI Counts For">
+        <a-checkbox-group>
+          <p>
+            <a-checkbox>Sample Data</a-checkbox>
+            <a-checkbox>GasBg Data</a-checkbox>
+          </p>
+          <a-checkbox>DetBg Data</a-checkbox>
+          <a-checkbox>QC Data</a-checkbox>
+        </a-checkbox-group>
+      </title-over-border>
+      <div class="footer-btns">
+        <a-button type="primary">Reanalyse Spectrum Using New Calibration</a-button>
+        <a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
+import { getAction } from '@/api/manage'
+
+const initialBetaGammaChartOption = {
+  grid: {
+    top: 15,
+    left: 55,
+    right: 10,
+    bottom: 45
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: params => {
+      const [b, g, c] = params.value
+      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+    },
+    axisPointer: {
+      animation: false,
+      type: 'cross',
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  xAxis: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16
+    },
+    nameLocation: 'center',
+    nameGap: 30,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  yAxis: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16
+    },
+    nameLocation: 'center',
+    nameGap: 35,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  series: {
+    type: 'scatter',
+    symbolSize: 5,
+    data: [],
+    itemStyle: {
+      color: '#fff'
+    }
+  }
+}
+
+const initialGammaGatedChartOption = {
+  grid: {
+    top: 10,
+    right: 15,
+    bottom: 50
+  },
+  xAxis: {
+    min: 0,
+    max: 256,
+    interval: 64,
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Channel',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 35
+  },
+  yAxis: {
+    min: 0,
+    max: 0,
+    interval: 0,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Count',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 25
+  },
+  series: {
+    type: 'line',
+    itemStyle: {
+      color: '#04ADD9'
+    },
+    symbol: 'none',
+    data: []
+  }
+}
+
+const initialFigureChartOption = {
+  grid: {
+    top: 10,
+    right: 15,
+    bottom: 50
+  },
+  xAxis: {
+    min: 0,
+    max: 256,
+    interval: 64,
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Channel',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 35
+  },
+  yAxis: {
+    min: 0,
+    max: 0,
+    interval: 0,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Energy[E/kev]',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 25
+  },
+  series: {
+    type: 'line',
+    itemStyle: {
+      color: '#04ADD9'
+    },
+    symbol: 'none',
+    data: []
+  }
+}
+
+const columns = [
+  {
+    title: 'Index',
+    customRender: (_, __, index) => {
+      return index + 1
+    },
+    align: 'center'
+  },
+  {
+    title: 'Channel',
+    dataIndex: 'channel',
+    align: 'center'
+  },
+  {
+    title: 'Energy/keV',
+    dataIndex: 'energy',
+    align: 'center'
+  },
+  {
+    title: 'FWHM/C',
+    dataIndex: 'fwhmC',
+    align: 'center'
+  },
+  {
+    title: 'FWHM/keV',
+    dataIndex: 'fwhmKev',
+    align: 'center'
+  },
+  {
+    title: 'S',
+    dataIndex: 'sValue',
+    align: 'center'
+  }
+]
+
+export default {
+  components: { CustomChart, TitleOverBorder },
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
+  data() {
+    this.columns = columns
+
+    return {
+      betaGammaChartOption: initialBetaGammaChartOption,
+      gammaGatedChartOption: initialGammaGatedChartOption,
+      figureChartOption: initialFigureChartOption,
+      list: [
+        {
+          channel: 'channel',
+          energy: 'energy',
+          fwhmC: 'fwhmC',
+          fwhmKev: 'fwhmKev',
+          sValue: 'sValue'
+        },
+        {
+          channel: 'channel',
+          energy: 'energy',
+          fwhmC: 'fwhmC',
+          fwhmKev: 'fwhmKev',
+          sValue: 'sValue'
+        },
+        {
+          channel: 'channel',
+          energy: 'energy',
+          fwhmC: 'fwhmC',
+          fwhmKev: 'fwhmKev',
+          sValue: 'sValue'
+        }
+      ],
+      isLoading: false
+    }
+  },
+  created() {
+    if (this.sampleId) {
+      this.getData()
+    }
+  },
+  methods: {
+    handleExit() {
+      this.$emit('exit')
+    },
+
+    async getData() {
+      try {
+        this.isLoading = true
+        const res = await getAction('/spectrumAnalysis/viewBetaDetectorCalibration', {
+          sampleId: this.sampleId
+        })
+        console.log('%c [ res ]-462', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+        if (res.success) {
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+p {
+  margin-bottom: 5px;
+}
+
+.content {
+  border: 1px solid #0c6a66;
+  padding: 10px;
+}
+
+.QCs {
+  display: flex;
+  gap: 20px;
+
+  .beta-gamma-spectrum {
+    flex: 10;
+
+    .settings {
+      margin-left: 90px;
+    }
+
+    .channel-and-width {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .beta-gamma-chart {
+      height: 427px;
+    }
+  }
+
+  .gamma-gated-beta-spectrum {
+    flex: 11;
+
+    .gamma-gated-chart {
+      height: 250px;
+      position: relative;
+
+      .ant-btn {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+    }
+
+    .channel-and-energy {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .ant-input {
+        width: 100px;
+      }
+    }
+
+    .ant-table-wrapper {
+      margin-top: 20px;
+
+      &.has-data {
+        ::v-deep {
+          .ant-table-body {
+            height: 99px;
+            background-color: #06282a;
+          }
+        }
+      }
+
+      ::v-deep {
+        .ant-table-placeholder {
+          height: 100px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+
+.figure {
+  margin-top: 20px;
+
+  &-chart {
+    height: 250px;
+    position: relative;
+
+    .ant-btn {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.calibration-parameter {
+  margin-top: 20px;
+
+  .calibration-funcs {
+    margin-top: 15px;
+    display: flex;
+    gap: 30px;
+
+    &-func {
+      display: flex;
+      flex: 1;
+      gap: 20px;
+
+      > div {
+        &:first-child {
+          flex: 10;
+        }
+
+        &:nth-child(2) {
+          flex: 11;
+        }
+      }
+
+      .ant-input {
+        width: 70px;
+      }
+    }
+
+    &-btns {
+      width: 130px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+
+.footer {
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
+
+  .title-over-border {
+    &:first-child {
+      flex: 4;
+    }
+
+    &:nth-child(2) {
+      flex: 5;
+
+      .ant-checkbox-wrapper {
+        width: 145px;
+      }
+    }
+  }
+
+  &-btns {
+    flex: 6;
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    align-items: center;
+
+    .exit {
+      width: 130px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/GammaDetectorCalibration.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/GammaDetectorCalibration.vue
new file mode 100644
index 0000000..baaa13b
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/GammaDetectorCalibration.vue
@@ -0,0 +1,606 @@
+<template>
+  <div class="gamma-detector-calibration">
+    <a-spin :spinning="isLoading">
+      <div class="content">
+        <div class="gamma-spectrum-qc">
+          <p>Gamma Spectrum: QC</p>
+          <div class="content">
+            <div class="gamma-spectrum-chart">
+              <custom-chart
+                ref="gammaSpectrumChart"
+                :option="gammaSpectrumChartOption"
+                @zr:click="handleGammaSpectrumChartClick"
+              />
+              <a-button type="primary">Snapshot</a-button>
+            </div>
+          </div>
+          <div class="content channel-and-energy">
+            <a-form-model layout="inline">
+              <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>
+            <a-button type="primary">Add</a-button>
+          </div>
+          <a-table
+            size="small"
+            :columns="columns"
+            :dataSource="list"
+            :pagination="false"
+            :class="list.length ? 'has-data' : ''"
+            :scroll="{ y: 99 }"
+          ></a-table>
+        </div>
+        <div class="figure">
+          <p class="title">Figure of Gamma Detector Calibration</p>
+          <div class="content">
+            <div class="figure-chart">
+              <custom-chart :option="figureChartOption" />
+              <a-button type="primary">Snapshot</a-button>
+            </div>
+          </div>
+        </div>
+        <div class="calibration-parameter">
+          <p>Calibration Parameter of Gamma Detector</p>
+          <div class="calibration-funcs">
+            <div class="calibration-funcs-func">
+              <title-over-border title="Old Calibration Function">
+                <p class="func">
+                  <span>C to E : </span>
+                  <span>
+                    E = {{ scientificNotationStr2Fixed(c2e[0]) }} &nbsp; + &nbsp;
+                    {{ scientificNotationStr2Fixed(c2e[1]) }}&nbsp;*C&nbsp;+&nbsp;{{
+                      scientificNotationStr2Fixed(c2e[2])
+                    }}
+                    *C <sup>2</sup>
+                  </span>
+                </p>
+                <div class="func">
+                  <span>E to C : </span>
+                  <span
+                    >C = {{ scientificNotationStr2Fixed(e2c[0]) }} + {{ scientificNotationStr2Fixed(e2c[1]) }} *E +
+                    {{ scientificNotationStr2Fixed(e2c[2]) }} *E <sup>2</sup>
+                  </span>
+                </div>
+              </title-over-border>
+              <title-over-border title="New Calibration Function">
+                <p class="func">
+                  <span>C to E : </span>
+                  <span>
+                    E =
+                    <a-input type="number" size="small" /> + <a-input type="number" size="small" /> *C +
+                    <a-input type="number" size="small" /> *C <sup>2</sup>
+                  </span>
+                </p>
+                <div class="func">
+                  <span>E to C : </span>
+                  <span>C = 0 + 0 *E + 0 *E <sup>2</sup> </span>
+                </div>
+              </title-over-border>
+            </div>
+            <div class="calibration-funcs-btns">
+              <a-button type="primary">Reset Button</a-button>
+              <a-button type="primary">Fitting</a-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <title-over-border title="New Calibration is Applied to">
+          <a-radio-group>
+            <p>
+              <a-radio>All Spectra</a-radio>
+            </p>
+            <a-radio>Current Spectrum</a-radio>
+          </a-radio-group>
+        </title-over-border>
+        <title-over-border title="Recalculate ROI Counts For">
+          <a-checkbox-group>
+            <p>
+              <a-checkbox>Sample Data</a-checkbox>
+              <a-checkbox>GasBg Data</a-checkbox>
+            </p>
+            <a-checkbox>DetBg Data</a-checkbox>
+            <a-checkbox>QC Data</a-checkbox>
+          </a-checkbox-group>
+        </title-over-border>
+        <div class="footer-btns">
+          <a-button type="primary">Reanalyse Spectrum Using New Calibration</a-button>
+          <a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
+        </div>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
+import { getAction } from '@/api/manage'
+import { graphic } from 'echarts'
+import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
+
+const initialGammaSpectrumChartOption = {
+  grid: {
+    top: 10,
+    right: 15,
+    bottom: 50
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      lineStyle: {
+        color: '#099D24'
+      }
+    },
+    formatter: params => {
+      const [channel] = params[0].value
+      return `<div class="channel">Channel: ${channel}</div>`
+    },
+    className: 'figure-chart-option-tooltip'
+  },
+  xAxis: {
+    min: 0,
+    max: 256,
+    interval: 64,
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Channel',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 35
+  },
+  yAxis: {
+    min: 0,
+    max: 0,
+    interval: 0,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Count',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 60
+  },
+  series: {
+    type: 'line',
+    itemStyle: {
+      color: '#04ADD9'
+    },
+    areaStyle: {
+      color: new graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: 'rgba(4, 173, 217, 0.87)'
+        },
+        {
+          offset: 1,
+          color: 'rgba(4, 173, 217, 0.05)'
+        }
+      ])
+    },
+    symbol: 'none',
+    data: []
+  }
+}
+
+const initialFigureChartOption = {
+  grid: {
+    top: 10,
+    right: 15,
+    bottom: 50
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      lineStyle: {
+        color: '#099D24'
+      }
+    },
+    formatter: params => {
+      const [channel, energy] = params[0].value
+      return `<div class="channel">Channel: ${channel}</div>
+      <div class="energy">Energy: ${energy.toFixed(3)}</div>`
+    },
+    className: 'figure-chart-option-tooltip'
+  },
+  xAxis: {
+    min: 0,
+    max: 256,
+    interval: 64,
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Channel',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 35
+  },
+  yAxis: {
+    min: 0,
+    max: 0,
+    interval: 0,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: 'Energy[E/kev]',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 55
+  },
+  series: {
+    type: 'line',
+    itemStyle: {
+      color: '#04ADD9'
+    },
+    symbol: 'none',
+    data: []
+  }
+}
+
+const columns = [
+  {
+    title: 'Index',
+    customRender: (_, __, index) => {
+      return index + 1
+    },
+    align: 'center'
+  },
+  {
+    title: 'Channel',
+    dataIndex: 'channel',
+    align: 'center'
+  },
+  {
+    title: 'Energy/keV',
+    dataIndex: 'energy',
+    align: 'center'
+  },
+  {
+    title: 'FWHM/C',
+    dataIndex: 'fwhmC',
+    align: 'center'
+  },
+  {
+    title: 'FWHM/keV',
+    dataIndex: 'fwhmKev',
+    align: 'center'
+  },
+  {
+    title: 'S',
+    dataIndex: 'sValue',
+    align: 'center'
+  }
+]
+
+export default {
+  components: { CustomChart, TitleOverBorder },
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
+  data() {
+    this.columns = columns
+
+    return {
+      gammaSpectrumChartOption: initialGammaSpectrumChartOption,
+      figureChartOption: initialFigureChartOption,
+      list: [],
+      isLoading: false,
+      c2e: {},
+      e2c: {}
+    }
+  },
+  created() {
+    if (this.sampleId) {
+      this.getData()
+    }
+  },
+  methods: {
+    handleExit() {
+      this.$emit('exit')
+    },
+
+    async getData() {
+      try {
+        this.isLoading = true
+        const res = await getAction('/spectrumAnalysis/viewGammaDetectorCalibration', {
+          sampleId: this.sampleId
+        })
+
+        if (res.success) {
+          const { CToE, EToC, gammaEnergy, gammaSpectrum, max, min } = res.result
+
+          this.c2e = CToE
+          this.e2c = EToC
+
+          this.gammaSpectrumChartOption.yAxis.max = Math.ceil(max * 1.1)
+          this.gammaSpectrumChartOption.yAxis.min = min
+          this.gammaSpectrumChartOption.yAxis.interval = Math.ceil((max * 1.1) / 4)
+          this.gammaSpectrumChartOption.series.data = gammaSpectrum.map(({ x, y }) => [x, y])
+
+          const gammaEnergyValue = gammaEnergy.map(item => item[0])
+          const gammaEnergyMax = Math.max(...gammaEnergyValue)
+          const gammaEnergyMin = Math.min(...gammaEnergyValue)
+          this.figureChartOption.yAxis.max = Math.ceil(gammaEnergyMax * 1.1)
+          this.figureChartOption.yAxis.min = Math.floor(gammaEnergyMin)
+          this.figureChartOption.yAxis.interval = Math.ceil((gammaEnergyMax * 1.1) / 4)
+          this.figureChartOption.series.data = gammaEnergyValue.map((item, index) => [index, item])
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    // Gamma Spectrum: QC 图表点击
+    handleGammaSpectrumChartClick(param) {
+      const { offsetX, offsetY } = param
+      const point = getXAxisAndYAxisByPosition(this.$refs.gammaSpectrumChart.getChartInstance(), offsetX, offsetY)
+      const xAxis = parseInt(point[0].toFixed())
+      console.log('%c [ xAxis ]-420', 'font-size:13px; background:pink; color:#bf2c9f;', xAxis)
+    },
+
+    /**
+     * 返回的科学计数法的字符串处理
+     * @param {string} str
+     */
+    scientificNotationStr2Fixed(str) {
+      if (str) {
+        const arr = str.split('E')
+        const start = arr[0]
+        const end = arr[1]
+        return `${Number(start).toPrecision(6)}${end ? 'e' + end : ''}`
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+p {
+  margin-bottom: 5px;
+}
+
+.content {
+  border: 1px solid #0c6a66;
+  padding: 10px;
+}
+.gamma-spectrum-qc {
+  .gamma-spectrum-chart {
+    height: 300px;
+    position: relative;
+
+    .ant-btn {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+
+  .channel-and-energy {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+
+    .ant-input {
+      width: 150px;
+    }
+
+    .ant-btn {
+      margin-left: 30px;
+      width: 130px;
+    }
+  }
+
+  .ant-table-wrapper {
+    margin-top: 20px;
+
+    &.has-data {
+      ::v-deep {
+        .ant-table-body {
+          height: 99px;
+          background-color: #06282a;
+        }
+      }
+    }
+
+    ::v-deep {
+      .ant-table-placeholder {
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.figure {
+  margin-top: 20px;
+
+  &-chart {
+    height: 250px;
+    position: relative;
+
+    .ant-btn {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.calibration-parameter {
+  margin-top: 20px;
+
+  .calibration-funcs {
+    margin-top: 15px;
+    display: flex;
+    gap: 30px;
+
+    &-func {
+      display: flex;
+      flex: 1;
+      gap: 20px;
+
+      > div {
+        &:first-child {
+          flex: 10;
+        }
+
+        &:nth-child(2) {
+          flex: 11;
+        }
+      }
+
+      .ant-input {
+        width: 70px;
+      }
+
+      .func {
+        display: flex;
+
+        span {
+          &:nth-child(2) {
+            flex: 1;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    &-btns {
+      width: 130px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}
+
+.footer {
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
+
+  .title-over-border {
+    &:first-child {
+      flex: 4;
+    }
+
+    &:nth-child(2) {
+      flex: 5;
+
+      .ant-checkbox-wrapper {
+        width: 145px;
+      }
+    }
+  }
+
+  &-btns {
+    flex: 6;
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    align-items: center;
+
+    .exit {
+      width: 130px;
+    }
+  }
+}
+</style>
+<style lang="less">
+.figure-chart-option-tooltip {
+  background-color: #00aa7f !important;
+  border-color: #00aa7f !important;
+
+  .channel {
+    color: #fff;
+  }
+
+  .energy {
+    color: #00d1f0;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/index.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/index.vue
new file mode 100644
index 0000000..0ecd865
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <custom-modal v-model="visible" :width="1200" title="Tool of Calibration" :footer="null">
+    <a-tabs :animated="false">
+      <a-tab-pane tab="Gamma Detector Calibration" key="1">
+        <gamma-detector-calibration @exit="visible = false" :sampleId="sampleId" />
+      </a-tab-pane>
+      <a-tab-pane tab="Beta Detector Calibration" key="2">
+        <beta-detector-calibration @exit="visible = false" :sampleId="sampleId" />
+      </a-tab-pane>
+    </a-tabs>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import BetaDetectorCalibration from './components/BetaDetectorCalibration.vue'
+import GammaDetectorCalibration from './components/GammaDetectorCalibration.vue'
+export default {
+  components: { BetaDetectorCalibration, GammaDetectorCalibration },
+  mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: Number
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue
index 139fe50..9b3ceca 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue
@@ -51,7 +51,7 @@ export default {
   mixins: [ModalMixin],
   props: {
     sampleId: {
-      type: String
+      type: Number
     }
   },
   data() {
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
index f61472d..f47173e 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
@@ -21,7 +21,7 @@ export default {
   mixins: [ModalMixin],
   props: {
     sampleId: {
-      type: String
+      type: Number
     }
   },
   data() {
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
index f06ba10..edafc8b 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
@@ -26,7 +26,7 @@ export default {
   mixins: [ModalMixin],
   props: {
     sampleId: {
-      type: String
+      type: Number
     }
   },
   data() {
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 1eb69cd..4ae9c92 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -139,6 +139,10 @@
     />
     <!-- Beta-Gamma 的Comments 结束 -->
 
+    <!-- Beta-Gamma 的Energy Calibration开始 -->
+    <beta-gamma-energy-calibration-modal v-model="betaGammaEnergyCalibrationModalVisible" :sampleId="this.sampleData.sampleId" />
+    <!-- Beta-Gamma 的Energy Calibration结束 -->
+
     <!-- Beta-Gamma 的 Spectrum 弹窗 -->
     <beta-gamma-spectrum-modal v-model="betaGammaSpectrumModalVisible" :sampleId="this.sampleData.sampleId" />
     <!-- Beta-Gamma 的 Spectrum 弹窗 结束 -->
@@ -198,6 +202,7 @@ import BetaGammaQcResultsModal from './components/Modals/BetaGammaModals/BetaGam
 import BetaGammaRlrModal from './components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue'
 import StatisticsParamerHistoryModal from './components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue'
 import FtransltModal from './components/Modals/FtransltModal/index.vue'
+import BetaGammaEnergyCalibrationModal from './components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/index.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -239,7 +244,8 @@ export default {
     BetaGammaQcResultsModal,
     BetaGammaRlrModal,
     StatisticsParamerHistoryModal,
-    FtransltModal
+    FtransltModal,
+    BetaGammaEnergyCalibrationModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -292,6 +298,8 @@ export default {
       betaGammaCommentsModalVisible: false, // beta-gamma Comments
       isBetaGammaCommentsAdd: false, // beta-gamma comments 是否新增
 
+      betaGammaEnergyCalibrationModalVisible: true, // beta-gamma 的 Energy Calibration 弹窗
+
       betaGammaSpectrumModalVisible: false, // beta-gamma spectrum 弹窗
       betaGammaSampleInfomationModalVisible: false, // beta-gamma sample infomation 弹窗
       betaGammaQCResultsModalVisible: false, // beta-gamma QC Result 弹窗
@@ -304,7 +312,7 @@ export default {
     this.loadSelectedSample({
       dbName: 'auto',
       sampleType: 'B',
-      sampleId: '423228'
+      sampleId: 426120
     })
   },
   methods: {
@@ -557,8 +565,15 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Energy',
+                  show: this.isGamma,
                   handler: () => (this.energyCalibrationModalShow = true)
                 },
+                {
+                  type: 'a-menu-item',
+                  title: 'Energy Calibration',
+                  show: this.isBetaGamma,
+                  handler: () => (this.betaGammaEnergyCalibrationModalVisible = true)
+                },
                 {
                   type: 'a-menu-item',
                   title: 'Resolution',