From 766b4f6c045ad81a425e336776322336c9c6ebe1 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 12 Jul 2023 19:56:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90Korsum=E3=80=81ReProc?=
 =?UTF-8?q?essing=E3=80=81=20Zero=20Time=E3=80=81EfficiencyCalibration?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=EF=BC=8C=E5=92=8CNuclideReview=E4=B8=AD?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/ModalMixin.js                      |  17 +
 src/style.less                                |  35 ++
 .../components/NuclideReviewChart.vue         |  99 +++-
 .../components/NuclideReviewModal.vue         | 348 ++++++++++---
 .../AnalyzeInteractiveToolModal/index.vue     |  60 ++-
 .../Modals/EfficiencyCalibrationModal.vue     | 333 +++++++++++++
 .../components/Modals/KorsumModal.vue         | 465 ++++++++++++++++++
 .../ReProcessingModal/components/status.vue   |  40 ++
 .../Modals/ReProcessingModal/index.vue        | 108 ++++
 .../components/Modals/ZeroTimeModal.vue       | 250 ++++++++++
 src/views/spectrumAnalysis/index.vue          |  78 ++-
 11 files changed, 1719 insertions(+), 114 deletions(-)
 create mode 100644 src/mixins/ModalMixin.js
 create mode 100644 src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/ReProcessingModal/components/status.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/ReProcessingModal/index.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue

diff --git a/src/mixins/ModalMixin.js b/src/mixins/ModalMixin.js
new file mode 100644
index 0000000..899068d
--- /dev/null
+++ b/src/mixins/ModalMixin.js
@@ -0,0 +1,17 @@
+export default {
+    props: {
+        value: {
+            type: Boolean
+        }
+    },
+    computed: {
+        visible: {
+            get() {
+                return this.value
+            },
+            set(val) {
+                this.$emit('input', val)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style.less b/src/style.less
index ce41a9e..ae83659 100644
--- a/src/style.less
+++ b/src/style.less
@@ -308,6 +308,41 @@ body {
   }
 }
 
+// 时间选择器
+@time-picker-selected-bg: @primary-color;
+@item-hover-bg: @primary-color;
+.ant-time-picker {
+  &-input {
+    background: @modalBg;
+    border-radius: 0;
+    &::placeholder {
+      color: #fff;
+    }
+  }
+
+  &-clear,
+  &-clock-icon {
+    background-color: @modalBg !important;
+    color: #01B6E3 !important;
+  }
+
+  &-panel {
+    &-input {
+      background-color: transparent;
+    }
+
+    &-inner {
+      background-color: @modalBg;
+      border: 1px solid @formInputBorderColor;
+      border-radius: 0;
+    }
+
+    &-select li:focus {
+      color: #fff;
+    }
+  }
+}
+
 // 输入框样式
 .ant-input {
   background-color: @formInputBgColor !important;
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
index 881c0d2..2d3339f 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
@@ -2,38 +2,123 @@
   <custom-chart :option="option" />
 </template>
 <script>
+import CustomChart from '@/components/CustomChart/index.vue'
 const initialOption = {
+  grid: {
+    top: 40,
+    bottom: 50,
+    right: 30
+  },
+  title: {
+    text: 'Energy',
+    textStyle: {
+      color: '#8FD4F8',
+      fontSize: 14,
+      fontWeight: 'normal'
+    },
+    right: 10,
+    bottom: 5
+  },
   xAxis: {
+    min: 620.68,
+    max: 629.16,
+    splitNumber: 3,
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    },
     axisLabel: {
       color: '#fff'
     }
   },
   yAxis: {
-    min: 2030.0,
-    max: 2427.6,
-    splitNumber: 1,
+    min: 417,
+    max: 327,
+    interval: 90,
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false
+    },
     axisLabel: {
       color: '#fff'
+    },
+    axisTick: {
+      show: false
+    },
+    name: 'Counts',
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 14
     }
   },
   series: [
     {
       type: 'line',
-      data: [],
+      data: [
+        [620.68, 410],
+        [621.98, 390],
+        [622.12, 337],
+        [623.53, 400],
+        [624.37, 410],
+        [625.37, 410],
+        [626.37, 410],
+        [627.37, 410],
+        [628.37, 410]
+      ],
       itemStyle: {
         color: '#8BB93C'
+      },
+      symbol: 'none',
+      markLine: {
+        data: [
+          {
+            xAxis: 625.14,
+            label: {
+              formatter: '{c} keV',
+              color: '#f00',
+              fontWeight: 'bold',
+              fontSize: 14
+            }
+          }
+        ],
+        symbol: 'none',
+        lineStyle: {
+          color: '#f00'
+        }
       }
     },
     {
       type: 'line',
-      data: [],
+      data: [
+        [620.68, 367],
+        [622, 367],
+        [623, 367],
+        [624, 367],
+        [625, 367],
+        [626, 367],
+        [627, 367],
+        [628, 367],
+        [629, 367]
+      ],
       itemStyle: {
-        color: '#03DBE6'
-      }
+        color: '#8FD4F8'
+      },
+      symbol: 'none'
     }
   ]
 }
 export default {
+  components: {
+    CustomChart
+  },
   data() {
     return {
       option: initialOption
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
index da705c1..996679b 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
@@ -1,7 +1,7 @@
 <template>
   <custom-modal v-model="visible" :width="1200" title="Nuclide Review" :footer="null">
     <div class="nuclide-review-search">
-      <span>&lt;</span>
+      <span @click="handleNuclideChange('prev')">&lt;</span>
       <a-form-model layout="inline">
         <a-form-model-item label="Energy">
           <a-input-number></a-input-number>
@@ -11,7 +11,7 @@
         </a-form-model-item>
         <a-button type="primary">Search</a-button>
       </a-form-model>
-      <span>&gt;</span>
+      <span @click="handleNuclideChange('next')">&gt;</span>
     </div>
 
     <!-- 以下是表格部分 -->
@@ -22,9 +22,9 @@
           <div
             class="nuclide-review-table-nuclide-item"
             :class="currNuclide == item ? 'active' : ''"
-            v-for="item in nuclideList"
+            v-for="(item, index) in nuclideList"
             :key="item.id"
-            @click="handleNuclideClick(item)"
+            @click="handleNuclideClick(index)"
           >
             {{ item.title }}
           </div>
@@ -36,7 +36,7 @@
             <a-row>
               <a-col :span="6">
                 <a-form-model-item label="Name">
-                  1
+                  {{ currNuclide.title }}
                 </a-form-model-item>
               </a-col>
               <a-col :span="6">
@@ -71,20 +71,32 @@
 
     <!-- 以下是图表部分 -->
     <div class="nuclide-review-chart">
-      <a-row>
-        <a-col :span="8"></a-col>
-        <a-col :span="8"></a-col>
-        <a-col :span="8"></a-col>
+      <div class="nuclide-review-chart-prev">
+        <span @click="handleChangeChart('prev')">
+          &lt;
+        </span>
+      </div>
+      <a-row class="nuclide-review-chart-list">
+        <a-col class="nuclide-review-chart-item" :span="8" v-for="(chartItem, index) in currChartList" :key="index">
+          <p>Line{{ chartItem.id }}</p>
+          <div class="nuclide-review-chart-item-chart" :class="currTableItem.id == chartItem.id ? 'active' : ''">
+            <nuclide-review-chart />
+          </div>
+          <p>Abundance: {{ chartItem.abundance }}</p>
+        </a-col>
       </a-row>
-
-      <div class="nuclide-review-chart-prev"></div>
-      <div class="nuclide-review-chart-next"></div>
+      <div class="nuclide-review-chart-next">
+        <span @click="handleChangeChart('next')">
+          &gt;
+        </span>
+      </div>
     </div>
     <!-- 图表部分结束 -->
   </custom-modal>
 </template>
 
 <script>
+import NuclideReviewChart from './NuclideReviewChart.vue'
 const columns = [
   {
     title: 'Id',
@@ -112,7 +124,7 @@ const columns = [
     width: '15%'
   },
   {
-    title: 'AbundanceErr(%)',
+    title: 'Abundance Err(%)',
     dataIndex: 'abundanceErr',
     width: '15%'
   },
@@ -123,6 +135,7 @@ const columns = [
   }
 ]
 export default {
+  components: { NuclideReviewChart },
   props: {
     value: {
       type: Boolean
@@ -134,87 +147,234 @@ export default {
       nuclideList: [
         {
           id: 1,
-          title: 'Ag111'
+          title: 'Ag111',
+          data: [
+            {
+              id: '1',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            }
+          ]
         },
         {
           id: 2,
-          title: 'Eu157'
+          title: 'Eu157',
+          data: [
+            {
+              id: '1',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '2',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            }
+          ]
         },
         {
           id: 3,
-          title: 'Mo99'
+          title: 'Mo99',
+          data: [
+            {
+              id: '1',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '2',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '3',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            }
+          ]
         },
         {
           id: 4,
-          title: 'Pb204M'
-        },
-        {
-          id: 5,
-          title: 'Pb204M'
-        },
-        {
-          id: 6,
-          title: 'Pb204M'
-        },
-        {
-          id: 7,
-          title: 'Pb204M'
-        },
-        {
-          id: 8,
-          title: 'Pb204M'
-        },
-        {
-          id: 9,
-          title: 'Pb204M'
-        }
-      ],
-      list: [
-        {
-          id: '1',
-          fullName: 'fullName',
-          energy: 'energy',
-          energyErr: 'energyErr',
-          abundance: 'abundance',
-          abundanceErr: 'abundanceErr',
-          keyLine: 'keyLine'
-        },
-        {
-          id: '2',
-          fullName: 'fullName',
-          energy: 'energy',
-          energyErr: 'energyErr',
-          abundance: 'abundance',
-          abundanceErr: 'abundanceErr',
-          keyLine: 'keyLine'
-        },
-        {
-          id: '3',
-          fullName: 'fullName',
-          energy: 'energy',
-          energyErr: 'energyErr',
-          abundance: 'abundance',
-          abundanceErr: 'abundanceErr',
-          keyLine: 'keyLine'
+          title: 'Pb204M',
+          data: [
+            {
+              id: '1',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '2',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '3',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '4',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '5',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '6',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '7',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            },
+            {
+              id: '8',
+              fullName: 'fullName',
+              energy: 'energy',
+              energyErr: 'energyErr',
+              abundance: 'abundance',
+              abundanceErr: 'abundanceErr',
+              keyLine: 'keyLine'
+            }
+          ]
         }
       ],
+      list: [], // 表格里的数据
       currNuclide: {},
 
-      currTableItem: {} // 选中的表格中的行
+      currTableItem: {}, // 选中的表格中的行
+
+      currChartList: [] // 当前展示的图表的列表,一般是3个
     }
   },
   methods: {
-    handleNuclideClick(item) {
-      this.currNuclide = item
+    // 搜索栏的向前/向后按钮
+    handleNuclideChange(direction) {
+      const currIndex = this.nuclideList.findIndex(item => item == this.currNuclide)
+      if (direction == 'prev' && currIndex > 0) {
+        this.handleNuclideClick(currIndex - 1)
+      } else if (direction == 'next' && currIndex !== this.nuclideList.length - 1) {
+        this.handleNuclideClick(currIndex + 1)
+      }
+    },
+
+    handleNuclideClick(index) {
+      this.currNuclide = this.nuclideList[index]
+      this.list = this.currNuclide.data
+
+      this.selectTableRow(0)
+    },
+
+    selectTableRow(index) {
+      const record = this.list[index]
+      this.currTableItem = record
+
+      let startIndex = 0
+      let endIndex = 0
+      if (index == 0) {
+        // 选中了第一个，则往后数三个
+        endIndex = startIndex + 3
+      } else if (index == this.list.length - 1) {
+        // 选中了最后一个，则往前数三个
+        endIndex = index + 1
+        startIndex = endIndex - 3
+      } else {
+        startIndex = index - 1
+        endIndex = index + 2
+      }
+      if (startIndex < 0) {
+        startIndex = 0
+      }
+      this.currChartList = this.list.slice(startIndex, endIndex)
+    },
+
+    // 向前/向后切换图表
+    handleChangeChart(direction) {
+      const currIndex = this.list.findIndex(item => item == this.currTableItem)
+      if (direction == 'prev') {
+        const willJumpIndex = currIndex - 3
+        if (willJumpIndex >= 0) {
+          this.selectTableRow(willJumpIndex)
+        }
+        else {
+          this.selectTableRow(0)
+        }
+      }
+      else if (direction == 'next') {
+        const willJumpIndex = currIndex + 3
+        if (willJumpIndex <= this.list.length - 2) {
+          this.selectTableRow(willJumpIndex)
+        }
+        else {
+          this.selectTableRow(this.list.length - 1)
+        }
+      }
     },
 
     // 实现单击选中/反选功能
-    customRow(record) {
+    customRow(record, index) {
       return {
         class: 'custom-table-row' + (this.currTableItem == record ? ' ant-table-row-selected' : ''),
         on: {
           click: () => {
-            this.currTableItem = record
+            this.selectTableRow(index)
           }
         }
       }
@@ -294,6 +454,7 @@ export default {
         height: 30px;
         line-height: 30px;
         cursor: pointer;
+        user-select: none;
 
         &.active {
           background-color: #296d81;
@@ -347,9 +508,52 @@ export default {
     margin-top: 20px;
     height: 300px;
     background-color: #05354c;
+    display: flex;
+    align-items: center;
+
+    &-list {
+      flex: 1;
+      height: 100%;
+    }
 
     &-item {
-      width: 33%;
+      height: 100%;
+      p {
+        height: 30px;
+        line-height: 30px;
+        font-size: 16px;
+        text-align: center;
+        margin-bottom: 0;
+      }
+
+      &-chart {
+        height: calc(100% - 60px);
+        border: 4px solid transparent;
+
+        &.active {
+          background-color: #0a6f82;
+          border-color: #0d8696;
+        }
+      }
+    }
+
+    &-prev,
+    &-next {
+      width: 40px;
+      text-align: center;
+
+      span {
+        display: inline-block;
+        color: @primary-color;
+        width: 30px;
+        height: 30px;
+        border: 1px solid @primary-color;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        cursor: pointer;
+        user-select: none;
+      }
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
index e84bfbe..bcbe02c 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -8,7 +8,9 @@
         <div class="thumbnail"></div>
         <div class="table">
           <p class="title">
-            &lt; 6 Peaks with Anthro.Nuclides &gt;
+            <span @click="handleChangeMarkLine('prev')">&lt; </span>
+            6 Peaks with Anthro.Nuclides
+            <span @click="handleChangeMarkLine('next')">&gt;</span>
           </p>
           <custom-table
             :class="list.length ? 'has-data' : ''"
@@ -19,7 +21,7 @@
           >
           </custom-table>
           <div class="operators">
-            <a-button type="primary">Nuclide Review Window</a-button>
+            <a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
             <a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
             <a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
           </div>
@@ -41,8 +43,8 @@
               </div>
 
               <div class="peak-box-item symbol" :key="4">
-                <a-button type="primary">&lt;</a-button>
-                <a-button type="primary">&gt;</a-button>
+                <a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
+                <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
               </div>
 
               <div class="peak-box-item base-line">
@@ -178,6 +180,20 @@ const initialOption = {
       data: [],
       itemStyle: {
         color: '#FCFE02'
+      },
+      markLine: {
+        data: [
+          {
+            xAxis: 1000
+          }
+        ],
+        symbol: 'none',
+        lineStyle: {
+          color: '#f00'
+        },
+        label: {
+          show: false
+        }
       }
     },
     {
@@ -257,16 +273,7 @@ export default {
     this.columns = columns
     return {
       option: initialOption,
-      list: new Array(500).fill(0).map((_, index) => ({
-        id: index.toString(),
-        energy: 'energy',
-        centroid: 'centroid',
-        fwhm: 'fwhm',
-        area: 'area',
-        detectability: 'detectability',
-        cmnt: 'cmnt',
-        nuclides: 'nuclides'
-      })),
+      list: [],
       commentModalVisible: false, // Comment 弹窗是否显示
       commentType: 'Peak',
 
@@ -275,10 +282,28 @@ export default {
       selectedKeys: [], // 选中的列表
 
       fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
-      nuclideReviewModalVisible: true // Nuclide Review 弹窗
+      nuclideReviewModalVisible: false // Nuclide Review 弹窗
     }
   },
   methods: {
+    // 切换图表上的红色竖线
+    handleChangeMarkLine(direction) {
+      if (direction == 'prev') {
+        this.option.series[0].markLine.data[0].xAxis = 900
+      } else if (direction == 'next') {
+        this.option.series[0].markLine.data[0].xAxis = 1100
+      }
+      this.list = new Array(20).fill(0).map((_, index) => ({
+        id: index.toString(),
+        energy: 'energy',
+        centroid: 'centroid',
+        fwhm: 'fwhm',
+        area: 'area',
+        detectability: 'detectability',
+        cmnt: 'cmnt',
+        nuclides: 'nuclides'
+      }))
+    },
     // 显示comment弹窗
     handleAddComment(type) {
       this.commentType = type
@@ -339,6 +364,11 @@ export default {
         font-size: 20px;
         text-align: center;
         margin-bottom: 10px;
+
+        span {
+          cursor: pointer;
+          margin: 0 5px;
+        }
       }
 
       .custom-table {
diff --git a/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue b/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
new file mode 100644
index 0000000..ac56a67
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
@@ -0,0 +1,333 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="Efficiency Calibration" :footer="null">
+    <div class="efficiency-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="Efficiency">
+                <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-select :value="''">
+                  <a-select-option value="">
+                    Interpolation
+                  </a-select-option>
+                </a-select>
+                <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">
+            Efficiency = 59.541 + (88.034 - 59.541) * (E - 1)/ (0.058243 - 1)
+          </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">PHD</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: 'Efficiency',
+    dataIndex: 'efficiency'
+  },
+  {
+    title: 'Fit',
+    dataIndex: 'fit'
+  },
+  {
+    title: 'Delta(%)',
+    dataIndex: 'delta'
+  }
+]
+
+const initialOption = {
+  grid: {
+    top: 20,
+    right: 20,
+    bottom: 50,
+    left: 70
+  },
+  title: {
+    text: 'Energy(keV)',
+    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: 'Efficiency',
+    nameLocation: 'center',
+    nameGap: 50,
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 14
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      itemStyle: {
+        color: '#EDF005'
+      },
+      data: [
+        [42, 0],
+        [100, 0.2],
+        [978, 0.1]
+      ],
+      color: 'red'
+    }
+  ]
+}
+
+export default {
+  components: { TitleOverBoarder, CustomChart },
+  mixins: [ModalMixin],
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          energy: 'energy',
+          efficiency: 'efficiency',
+          fit: 'fit',
+          delta: 'delta'
+        }
+      ],
+      option: initialOption
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.efficiency-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: 300px;
+    }
+  }
+
+  .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/KorsumModal.vue b/src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
new file mode 100644
index 0000000..a446510
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
@@ -0,0 +1,465 @@
+<template>
+  <custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null">
+    <div class="korsum">
+      <!-- 输入开始 -->
+      <title-over-boarder title="Input">
+        <div class="korsum-input">
+          <!-- 公式部分 -->
+          <a-form-model
+            class="korsum-input-formula"
+            :labelCol="{
+              style: {
+                width: '110px'
+              }
+            }"
+          >
+            <a-form-model-item label="Total Effi = exp(">
+              <!-- 第一行 -->
+              <div>
+                <a-input-number v-model="formula.totalEffi[0]"></a-input-number>
+                <span class="operator">* Er + </span>
+                <a-input-number v-model="formula.totalEffi[1]"></a-input-number>
+                <span class="operator">+ </span>
+              </div>
+              <!-- 第二行 -->
+              <div>
+                <a-input-number v-model="formula.totalEffi[2]"></a-input-number>
+                <span class="operator">/ Er + </span>
+                <a-input-number v-model="formula.totalEffi[3]"></a-input-number>
+                <span class="operator">/ Er <sup>2</sup> + </span>
+              </div>
+              <!-- 第三行 -->
+              <div>
+                <a-input-number v-model="formula.totalEffi[4]"></a-input-number>
+                <span class="operator"> / Er <sup>3</sup> + </span>
+                <a-input-number v-model="formula.totalEffi[5]"></a-input-number>
+                <span class="operator">/ Er <sup>4</sup> ) </span>
+              </div>
+            </a-form-model-item>
+            <a-form-model-item label="Efficiency = exp(">
+              <!-- 第一行 -->
+              <div>
+                <a-input-number v-model="formula.efficiency[0]"></a-input-number>
+                <span class="operator">* Er + </span>
+                <a-input-number v-model="formula.efficiency[1]"></a-input-number>
+                <span class="operator">+ </span>
+              </div>
+              <!-- 第二行 -->
+              <div>
+                <a-input-number v-model="formula.efficiency[2]"></a-input-number>
+                <span class="operator">/ Er + </span>
+                <a-input-number v-model="formula.efficiency[3]"></a-input-number>
+                <span class="operator">/ Er <sup>2</sup> + </span>
+              </div>
+              <!-- 第三行 -->
+              <div>
+                <a-input-number v-model="formula.efficiency[4]"></a-input-number>
+                <span class="operator"> / Er <sup>3</sup> + </span>
+                <a-input-number v-model="formula.efficiency[5]"></a-input-number>
+                <span class="operator">/ Er <sup>4</sup> ) </span>
+              </div>
+            </a-form-model-item>
+          </a-form-model>
+          <!-- 公式结束 -->
+
+          <!-- 标题 -->
+          <p class="korsum-input-title">
+            Input
+          </p>
+          <!-- 标题结束 -->
+
+          <!-- 表格开始 -->
+          <a-table
+            class="korsum-input-table"
+            :class="list.length ? 'has-data' : ''"
+            :columns="columns"
+            :dataSource="list"
+            :scroll="{ y: 288 }"
+            :pagination="false"
+          >
+            <template slot="energy" slot-scope="text, record">
+              <a-input-number v-model="record.energy"></a-input-number>
+            </template>
+            <template slot="totalEfficiency" slot-scope="text, record">
+              <a-input-number v-model="record.totalEfficiency"></a-input-number>
+            </template>
+            <template slot="peakEfficiency" slot-scope="text, record">
+              <a-input-number v-model="record.peakEfficiency"></a-input-number>
+            </template>
+            <template slot="uncertainty" slot-scope="text, record">
+              <a-input-number v-model="record.uncertainty"></a-input-number>
+            </template>
+          </a-table>
+          <!-- 表格结束 -->
+
+          <!-- 按钮开始 -->
+          <div class="korsum-input-buttons">
+            <a-button type="primary" @click="handleAnalyze">Analyse</a-button>
+            <a-button type="primary" @click="handleExit">Exit</a-button>
+          </div>
+          <!-- 按钮结束 -->
+        </div>
+      </title-over-boarder>
+      <!-- 输入结束 -->
+
+      <!-- 输出开始 -->
+      <title-over-boarder title="Output">
+        <div class="korsum-output">
+          <div class="korsum-output-main">
+            <div class="korsum-output-list">
+              <div
+                class="korsum-output-list-item"
+                :class="selectedItem == item ? 'active' : ''"
+                v-for="(item, index) in outputList"
+                :key="index"
+                @click="handleOutputItemClick(item)"
+              >
+                {{ item.title }}
+              </div>
+            </div>
+            <a-table
+              class="korsum-output-table"
+              :columns="outputColumns"
+              :dataSource="outputTableList"
+              :class="outputTableList.length ? 'has-data' : ''"
+              :scroll="{ y: 584 }"
+              :pagination="false"
+            ></a-table>
+          </div>
+
+          <div class="korsum-output-operation">
+            <div class="left">
+              <a-input v-model="filterWord"></a-input>
+            </div>
+            <div class="right">
+              <a-button type="primary" @click="handleExport">Export to Excel</a-button>
+            </div>
+          </div>
+        </div>
+      </title-over-boarder>
+      <!-- 输出结束 -->
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+
+const columns = [
+  {
+    title: 'Energy',
+    dataIndex: 'energy',
+    scopedSlots: {
+      customRender: 'energy'
+    }
+  },
+  {
+    title: 'Total Efficiency',
+    dataIndex: 'totalEfficiency',
+    scopedSlots: {
+      customRender: 'totalEfficiency'
+    }
+  },
+  {
+    title: 'Peak Efficiency',
+    dataIndex: 'peakEfficiency',
+    scopedSlots: {
+      customRender: 'peakEfficiency'
+    }
+  },
+  {
+    title: 'Uncertainty(%)',
+    dataIndex: 'uncertainty',
+    scopedSlots: {
+      customRender: 'uncertainty'
+    }
+  }
+]
+
+const outputColumns = [
+  {
+    title: 'Energy',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'Correct Factor',
+    dataIndex: 'correctFactor'
+  },
+  {
+    title: 'Uncertainty(%)',
+    dataIndex: 'uncertainty'
+  }
+]
+export default {
+  components: { TitleOverBoarder },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    this.outputColumns = outputColumns
+    return {
+      formula: {
+        totalEffi: [0, 0, 0, 0, 0, 0],
+        efficiency: [0, 0, 0, 0, 0, 0]
+      },
+      list: [
+        {
+          id: 1,
+          energy: 10,
+          totalEfficiency: 0.005,
+          peakEfficiency: 0.002,
+          uncertainty: 10.0
+        },
+        {
+          id: 2,
+          energy: 10,
+          totalEfficiency: 0.005,
+          peakEfficiency: 0.002,
+          uncertainty: 10.0
+        }
+      ],
+      selectedItem: {}, // output中左侧选中的项
+      outputTableList: [], // output中表格列表数据
+
+      filterWord: '' // 筛选
+    }
+  },
+  methods: {
+    // 分析
+    handleAnalyze() {
+      console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 退出
+    handleExit() {
+      this.visible = false
+    },
+
+    // output栏点击左侧列表
+    handleOutputItemClick(item) {
+      this.selectedItem = item
+      this.outputTableList = item.list
+    },
+
+    // 导出到excel
+    handleExport() {
+      console.log('%c [ 导出到excel ]-246', 'font-size:13px; background:pink; color:#bf2c9f;')
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    outputList() {
+      const list = [
+        {
+          id: 1,
+          title: 'SN-125',
+          list: [
+            {
+              id: 12,
+              energy: 'energy',
+              correctFactor: 'correctFactor',
+              uncertainty: 'uncertainty'
+            }
+          ]
+        },
+        {
+          id: 2,
+          title: 'EU-157',
+          list: [
+            {
+              id: 12,
+              energy: 'energy',
+              correctFactor: 'correctFactor',
+              uncertainty: 'uncertainty'
+            }
+          ]
+        }
+      ]
+
+      return list.filter(item => item.title.toLowerCase().includes(this.filterWord.toLowerCase()))
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+::v-deep {
+  .title-over-border-content {
+    height: 711px;
+  }
+}
+
+.korsum {
+  display: flex;
+  gap: 20px;
+
+  .title-over-border {
+    flex: 1;
+  }
+
+  &-input {
+    &-formula {
+      ::v-deep {
+        .ant-form-item {
+          margin-bottom: 10px;
+
+          &-label {
+            ::after {
+              content: ' ';
+              margin: 0 2px;
+            }
+            > label {
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .ant-input-number {
+        width: 120px;
+      }
+
+      .operator {
+        display: inline-block;
+        width: 46px;
+        margin: 0 5px;
+      }
+    }
+
+    &-title {
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background-color: @primary-color;
+    }
+
+    &-table {
+      &.has-data {
+        ::v-deep {
+          .ant-table-body {
+            height: 288px;
+            background-color: #06282a;
+          }
+        }
+      }
+
+      ::v-deep {
+        .ant-table {
+          font-size: 14px;
+        }
+
+        .ant-table-placeholder {
+          height: 289px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      .ant-input-number {
+        height: 26px;
+
+        ::v-deep {
+          .ant-input-number-input {
+            height: 26px;
+          }
+        }
+      }
+    }
+
+    &-buttons {
+      margin-top: 10px;
+      display: flex;
+      gap: 20px;
+
+      .ant-btn {
+        flex: 1;
+      }
+    }
+  }
+
+  &-output {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &-main {
+      display: flex;
+      gap: 20px;
+      flex: 1;
+    }
+
+    &-list {
+      width: 120px;
+      height: 619px;
+      background: #275466;
+      padding: 5px;
+      overflow: auto;
+
+      &-item {
+        height: 32px;
+        line-height: 32px;
+        padding: 0 4px;
+        cursor: pointer;
+
+        &.active {
+          background-color: @primary-color;
+        }
+      }
+    }
+
+    &-table {
+      flex: 1;
+      &.has-data {
+        ::v-deep {
+          .ant-table-body {
+            height: 584px;
+            background-color: #06282a;
+          }
+        }
+      }
+
+      ::v-deep {
+        .ant-table {
+          font-size: 14px;
+        }
+
+        .ant-table-placeholder {
+          height: 585px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    &-operation {
+      margin-top: 20px;
+      display: flex;
+      gap: 20px;
+
+      .left {
+        width: 120px;
+      }
+
+      .right {
+        flex: 1;
+
+        .ant-btn {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/components/status.vue b/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/components/status.vue
new file mode 100644
index 0000000..b07f04e
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/components/status.vue
@@ -0,0 +1,40 @@
+<template>
+  <span class="status" :style="{ background: currStatus.color }">{{ currStatus.title }}</span>
+</template>
+
+<script>
+const statusList = {
+  0: {
+    title: 'Done',
+    color: '#008000'
+  },
+  1: {
+    title: '==>',
+    color: '#FFAA00'
+  },
+  2: {
+    title: 'Pending',
+    color: '#FF0000'
+  }
+}
+export default {
+  props: {
+    status: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    currStatus() {
+      return statusList[this.status]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.status {
+  width: 80px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/index.vue b/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/index.vue
new file mode 100644
index 0000000..23904cb
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ReProcessingModal/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <custom-modal v-model="visible" :width="400" title="Processing Monitor" :footer="null">
+    <div class="processing">
+      <div>
+        <!-- 标题 -->
+        <div class="processing-title">Calibration Updates</div>
+        <!-- 列表 -->
+        <div class="processing-list">
+          <div class="processing-list-item">
+            <status :status="0" />
+            <div class="description">Energy - Mariscotti Centroids</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="0" />
+            <div class="description">Resolution</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="0" />
+            <div class="description">Energy - Fitted Centroids</div>
+          </div>
+        </div>
+      </div>
+      <div style="margin-top: 20px;">
+        <!-- 标题 -->
+        <div class="processing-title">Spectrum Analysis</div>
+        <!-- 列表 -->
+        <div class="processing-list">
+          <div class="processing-list-item">
+            <status :status="0" />
+            <div class="description">Peak Search</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="0" />
+            <div class="description">Baseline Fitting</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="1" />
+            <div class="description">Net Area Fitting</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="2" />
+            <div class="description">Nuclide Identification</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="2" />
+            <div class="description">Activity and MDA</div>
+          </div>
+          <div class="processing-list-item">
+            <status :status="2" />
+            <div class="description">QC Test</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import Status from './components/status.vue'
+export default {
+  components: {
+    Status
+  },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@color: #325050;
+.processing {
+  &-title {
+    height: 32px;
+    line-height: 32px;
+    background-color: @color;
+    text-align: center;
+  }
+
+  &-list {
+    &-item {
+      margin-top: 20px;
+      display: flex;
+      gap: 20px;
+      height: 26px;
+      line-height: 26px;
+
+      .description {
+        flex: 1;
+        background-color: @color;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue b/src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
new file mode 100644
index 0000000..8a24079
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
@@ -0,0 +1,250 @@
+<template>
+  <custom-modal v-model="visible" title="Zero Time" :width="940" :footer="null">
+    <div class="zero-time">
+      <!-- 左侧 -->
+      <div class="zero-time-left">
+        <title-over-boarder title="Fission Product Infomation">
+          <div class="fission-product">
+            <div class="fission-product-container">
+              <div class="fission-product-title">
+                Fission Product 1
+              </div>
+              <div class="fission-product-list">
+                <div class="fission-product-list-item" v-for="(item, index) in fissionProductList1" :key="index">
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+            <div class="fission-product-container">
+              <div class="fission-product-title">
+                Fission Product 2
+              </div>
+              <div class="fission-product-list">
+                <div class="fission-product-list-item" v-for="(item, index) in fissionProductList2" :key="index">
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </title-over-boarder>
+        <!-- Result of Zero Time -->
+        <title-over-boarder class="mt-20" title="Result of Zero Time">
+          <div class="result-of-zero-time">2015-05-30 17:30:60</div>
+        </title-over-boarder>
+      </div>
+      <!-- 左侧结束 -->
+
+      <!-- 右侧 -->
+      <div class="zero-time-right">
+        <!-- Active of Fission Product -->
+        <title-over-boarder title="Active of Fission Product">
+          <div class="active-of-fission-product">
+            <div class="item">
+              <div class="title">
+                Fission Product 1
+              </div>
+              <div>
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="operator">
+              -----Bq-----
+            </div>
+            <div class="item">
+              <div class="title">
+                Fission Product 2
+              </div>
+              <div>
+                <a-input></a-input>
+              </div>
+            </div>
+          </div>
+        </title-over-boarder>
+        <div class="zero-time-right-center mt-20">
+          <!-- Fission Target -->
+          <title-over-boarder class="fission-target" title="Fission Target">
+            <a-radio-group>
+              <a-radio>U-235</a-radio>
+              <a-radio>U-238</a-radio>
+              <a-radio>PU-239</a-radio>
+            </a-radio-group>
+          </title-over-boarder>
+          <title-over-boarder class="fission-energy" title="Energy of Fission Neutron">
+            <a-radio-group>
+              <a-radio>T&gt;Thermal_spectrum</a-radio>
+              <a-radio>F&gt;Fission_spectrum</a-radio>
+              <a-radio>H-&gt;Fast_Neutron</a-radio>
+            </a-radio-group>
+          </title-over-boarder>
+        </div>
+        <title-over-boarder class="mt-20" title="Reference Time">
+          <a-form-model layout="inline">
+            <a-form-model-item label="Date">
+                <custom-date-picker />
+            </a-form-model-item>
+            <a-form-model-item label="Time">
+                <a-time-picker></a-time-picker>
+            </a-form-model-item>
+          </a-form-model>
+        </title-over-boarder>
+
+        <div class="zero-time-right-buttons mt-20">
+          <a-button type="primary">Analysis</a-button>
+          <a-button type="primary">Save</a-button>
+          <a-button type="primary">Exit</a-button>
+        </div>
+      </div>
+      <!-- 右侧结束 -->
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+
+export default {
+  components: { TitleOverBoarder },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      fissionProductList1: [
+        {
+          id: 1,
+          title: 'Ba140'
+        },
+        {
+          id: 2,
+          title: 'Ce141'
+        }
+      ],
+      fissionProductList2: [
+        {
+          id: 1,
+          title: 'Ba140'
+        }
+      ]
+    }
+  },
+  computed: {
+    visible: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.zero-time {
+  display: flex;
+  gap: 30px;
+
+  &-left {
+    width: 40%;
+
+    .fission-product {
+      display: flex;
+      gap: 15px;
+
+      &-container {
+        flex: 1;
+      }
+
+      &-title {
+        height: 32px;
+        line-height: 32px;
+        font-size: 16px;
+        background-color: #497e9d;
+        text-align: center;
+      }
+
+      &-list {
+        margin-top: 5px;
+        height: 255px;
+        overflow: auto;
+        padding: 0 10px;
+        background-color: #275466;
+
+        &-item {
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+    }
+
+    .result-of-zero-time {
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background-color: #00ff7f;
+      font-size: 18px;
+    }
+  }
+
+  // 右侧开始
+  &-right {
+    flex: 1;
+
+    .active-of-fission-product {
+      display: flex;
+      align-items: end;
+      padding: 0 60px;
+
+      .item {
+        flex: 1;
+
+        .title {
+          font-size: 16px;
+          margin-bottom: 10px;
+        }
+      }
+
+      .operator {
+        margin: 5px 15px;
+      }
+    }
+
+    &-center {
+      display: flex;
+      gap: 20px;
+
+      .fission-target {
+        width: 40%;
+      }
+
+      .fission-energy {
+        flex: 1;
+      }
+
+      .ant-radio-wrapper {
+        display: block;
+
+        &:not(:first-child) {
+          margin-top: 20px;
+        }
+      }
+    }
+
+    &-buttons {
+      display: flex;
+      justify-content: space-between;
+
+      .ant-btn {
+        padding: 0 45px;
+      }
+    }
+  }
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 326ea42..c202606 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -62,6 +62,22 @@
     <!-- 分析工具弹窗开始 -->
     <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" />
     <!-- 分析工具弹窗结束 -->
+
+    <!-- Korsum 弹窗开始 -->
+    <korsum-modal v-model="korsumModalShow" />
+    <!-- Korsum 弹窗结束 -->
+
+    <!-- ReProcessing 弹窗开始 -->
+    <re-processing-modal v-model="reprocessingModalVisible" />
+    <!-- ReProcessing 弹窗结束 -->
+
+    <!-- Zero Time 弹窗开始 -->
+    <zero-time-modal v-model="zeroTimeModalVisible" />
+    <!-- Zero Time 弹窗结束 -->
+
+    <!-- Efficiency Calibration 弹窗开始 -->
+    <efficiency-calibration-modal v-model="efficiencyCalibrationModalShow" />
+    <!-- Efficiency Calibration 弹窗结束 -->
   </div>
 </template>
 <script>
@@ -77,6 +93,10 @@ 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'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -95,7 +115,11 @@ export default {
     MultiLevelMenu,
     SaveSettingModal,
     AnalyzeSettingModal,
-    AnalyzeInteractiveToolModal
+    AnalyzeInteractiveToolModal,
+    KorsumModal,
+    ReProcessingModal,
+    ZeroTimeModal,
+    EfficiencyCalibrationModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -118,7 +142,15 @@ export default {
 
       analyzeConfigureModalVisible: false, // 分析设置弹窗
 
-      analyzeInteractiveToolModalVisible: false // 分析工具弹窗
+      reprocessingModalVisible: false, // 重新分析弹窗
+
+      analyzeInteractiveToolModalVisible: false, // 分析工具弹窗
+
+      zeroTimeModalVisible: false, // Zero Time 弹窗
+
+      korsumModalShow: false, // Korsum 弹窗
+
+      efficiencyCalibrationModalShow: false // Calibration -> efficiency弹窗
     }
   },
   created() {
@@ -196,19 +228,10 @@ export default {
       this.analyzeConfigureModalVisible = true
     },
 
-    handleProcessing() {
-      console.log('%c [ handleProcessing ]-156', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     handleReprocessAll() {
       console.log('%c [ handleReprocessAll ]-216', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 显示分析工具弹窗
-    handleShowInteractiveTool() {
-      this.analyzeInteractiveToolModalVisible = true
-    },
-
     // 弹出能量刻度界面
     handleEnergy() {
       console.log('%c [ handleEnergy ]-163', 'font-size:13px; background:pink; color:#bf2c9f;')
@@ -219,11 +242,6 @@ export default {
       console.log('%c [ handleResolution ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 弹出分辨率刻度界面
-    handleEfficiency() {
-      console.log('%c [ handleEfficiency ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     // 弹出 Nuclide Library 弹窗
     handleNuclideLib() {
       console.log('%c [ handleNuclideLib ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
@@ -401,8 +419,10 @@ export default {
                 },
                 {
                   type: 'a-menu-item',
-                  title: 'Processing',
-                  handler: this.handleProcessing
+                  title: 'ReProcessing',
+                  handler: () => {
+                    this.reprocessingModalVisible = true
+                  }
                 },
                 {
                   type: 'a-menu-item',
@@ -412,7 +432,23 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Interactive Tool',
-                  handler: this.handleShowInteractiveTool
+                  handler: () => {
+                    this.analyzeInteractiveToolModalVisible = true
+                  }
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Zero Time',
+                  handler: () => {
+                    this.zeroTimeModalVisible = true
+                  }
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Korsum',
+                  handler: () => {
+                    this.korsumModalShow = true
+                  }
                 }
               ]
             }
@@ -437,7 +473,9 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Efficiency',
-                  handler: this.handleEfficiency
+                  handler: () => {
+                    this.efficiencyCalibrationModalShow = true
+                  }
                 }
               ]
             }