From 6c02e52e23a675abe6a709119ed887666d880eee Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 6 Jul 2023 14:05:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0LoadFromDb=E3=80=81Lo?=
 =?UTF-8?q?adFromFile=E7=AD=89=E7=AD=89=E5=BC=B9=E7=AA=97=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9custom-modal=E6=97=B6=E7=9A=84=E7=94=A8?=
 =?UTF-8?q?=E6=B3=95=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/spectrum/comparation.png    | Bin 0 -> 1320 bytes
 src/assets/images/spectrum/download.png       | Bin 0 -> 1471 bytes
 src/style.less                                |  12 +
 src/views/logManage/index.vue                 |   2 +-
 .../spectrumAnalysis/beta-gamma-analysis.vue  |  16 +-
 .../components/BetaGammaSpectrumChart.vue     |   1 +
 .../components/LoadFromDBModal.vue            |  30 --
 .../components/LoadFromFileModal.vue          | 128 -------
 .../components/Modals/ComparisonModal.vue     | 130 +++++++
 .../components/Modals/LoadFromDBModal.vue     | 313 +++++++++++++++
 .../components/Modals/LoadFromFileModal.vue   | 172 +++++++++
 .../Modals/NuclideActivityAndMDCModal.vue     | 239 ++++++++++++
 .../spectrumAnalysis/components/PHDSelect.vue |  39 ++
 .../components/PeakInfomation.vue             | 360 ++++++++++++++++++
 src/views/spectrumAnalysis/index.vue          |  24 +-
 .../stationOperation/components/MapPane.vue   |   2 +-
 16 files changed, 1302 insertions(+), 166 deletions(-)
 create mode 100644 src/assets/images/spectrum/comparation.png
 create mode 100644 src/assets/images/spectrum/download.png
 delete mode 100644 src/views/spectrumAnalysis/components/LoadFromDBModal.vue
 delete mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/ComparisonModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/NuclideActivityAndMDCModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/PHDSelect.vue
 create mode 100644 src/views/spectrumAnalysis/components/PeakInfomation.vue

diff --git a/src/assets/images/spectrum/comparation.png b/src/assets/images/spectrum/comparation.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ae9c9c5ee6fde664370f8ff14ceaea41b157b3f
GIT binary patch
literal 1320
zcmeAS@N?(olHy`uVBq!ia0vp^!ayv_!3HFka9+I#q$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1Ffc1;hD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2KOo`G(%fq{{Nxuu?=
znTd&+fsTTafsui}fvLWsk*=Ycm4S(sp}7JSC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR
zmzV368|&p4rRy77T3YHG80i}s=>k>g7FXt#Bv$C=6)VF`a7isrF3Kz@$;{7F0GXJW
zlwVq6s|0i@#0$9vaAWg|p}_<UF#U?e0)0b01CW<s3VnU?E6vS?t1d1HN=3LAtHH$~
zl?AE#L8-<0rA5iWh)YujSyf==T$Gwvl3x^(pPvH@#ej_blKkR~`~n3dLp>t}jquF8
zl>G8yO|S-EUn|eN;*!L?<Wx@=TP2_odYPFiR!)|#mZq*o7OrjvhK7c&E{+B!hE6UP
z#+Hsw7MA9Yt}wkW`N^fZsd*(Zy(tL2mN@l-(n4+l&}Ns^qRg_?6t|-MTm`V7tuk@D
z#SEu;P`xR*-C~YYuRhQ*`k<IaifNb-F!_L(@N^60z*Bx|9x%BV0n_!rlv$e@7#L@J
zx;TbZ+&U6++UszDz}vHnS8lz!z_+WZKeqlrYqb5rz4Z#eob&!LeE-+1peHKGa?tha
zwWOLWEh_Ug)rB6LGHP2C?8tq8=8kcC+N!Ll%Nnc_m^nZ29oeeoeff)Y0^bHRsorx<
z3KmD7Th5iQ%@#}Wm=Lt8@$#AH>WlLv+WInQ9m-&=TXxJ}qJL?RWP<2T{Vk<hTRRtX
zx(KoCpDh1JtaYYAlwM#0k4?btr9%5FyQj>(!)=|Sm}=W8a^a1~yO`^D5C1h2_J6{7
z*}3i3v}di-3(mjml$)24Cec>2pFMA7DtE+r_E(d>e!Qg`*%j9J{`YQ+_@yy-cq^_S
zd>F2JI-29o#^|Q$M$cEJEPB2sqwS){t+(IAq!*bkR+^b{xpUEp#=O$L6YFPozQ~{V
zJav}qWtHFdXG=~-<@|o0*Og|tX2Wc~_xt}G^?1Pc?0LnhyKf>>1pXh)Q|rpU$Q&jy
zA#&Sn=ZvxgckiUDy6#sj$ou#-`(J|iv7}A2FRW=a>e@Z?do`O}sH^$xm}h#=-*8Dx
n`FlLP&utweW4eE~JQELt`HO9WVgXO|L1mYxtDnm{r-UW|ziQ$u

literal 0
HcmV?d00001

diff --git a/src/assets/images/spectrum/download.png b/src/assets/images/spectrum/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccde799bb0e4c01728eb184d4c8b84f613881f98
GIT binary patch
literal 1471
zcmeAS@N?(olHy`uVBq!ia0vp^!ayv>!3HFi<}R-XQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS=07?_naLn2Bde0{8v^K<nQL2C3WatnaE85nHrD+&^mvr|hH
zl2X$%^K6yg@7}MZkeOnu6mIHk;9KCFnvv;IRg@ZB<rk7%m7Q#vqGWHUU{hfQG$1#%
zBvGLvHz%*ys=`(YY_1iM4HDK@QUEI{$+lI3I4Z(7K*2e`C{@8s&p<cXz`#hs+)~fb
z%*4dZKu5vIz{o(~z*OJRNY~KJ%D}|R&|Coulz_GsrKDK}xwt{?0`hE?GD=Dctn~HE
z%ggo3jrH=2()A53EiLs8jP#9+bb%^#i!1X=5-W7`ij`p|xTF>*7iAWdWaj57fJ{tG
z$}cUkRRX#c;)UD-xUqS~&|m@vn0`fKfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg
z%7Rq=pw#00(xPNw#HA^NtSYc_E=o--$uA1Y&(DE{Vn9ZINq%ugeu09Kp`MX~MtEjk
zN`85<CRl^7ua#$BaY<rca;m3`trE}(z0AxMD<@}5OLJ#OM^`rkLqkJX7bgQtOIJ%5
zXG2qSb0<>+3z%M){N&Qy)Vvay-V}shC!BggX(6`&XtPUdQD#|cid#{Bt^(N4R++fn
zVu8~<sNNLZZn4CvS0CsYeNfCI#WYL^n0!D?c)A60;3+>f518DGfayB9^d&G$Fd2Ee
zIEGZ*S~K;azm%iMv2wA<jhEIrDfF`IX7QT}UNVz=y5v~FvorG@f|4}N7$^S|mf2DK
z=#qf`9GjwVN0y57O^}lc7kISkzz<ua<m;u|uiTnm!=Cp1@3XUKezPsxahz!jN9F{s
z!rR*oQ=G(1O3yx<bH3$+<HM@G^JIJ7t}n}syO|m}?PAu}t{K7;ES2)Z8jU%&-FpAs
z{7>C~?d`4Yhaa*XToC<x$19`h7saag&U+*pk?|<3W7VJIADRk}Nz9*o`fgq>o9ia6
z2PVgEz1{ZE)sW}$taD<Pb<!1^6d3fSdXFjc+1z<s#y;22z5n>*-EkWtbhZVr4CyP4
zHCLYKp&-J=E7W<UJo0YT)~LT{{u|CZ`%F_*C2{@26ubHM)mkfJ^y;18S!Z}|V+y?Q
zbbO}Iv)2_i+y1eI=!kirxVczO{BPy`=qoL=F9<fUmi&4<-(hJ`XUvC*Qhx%&IlKi7
z+zymj)jnc9Qdo0v4*vzN#wBy_?D1r)XO<NbsFU$HQDQashQltF%0n^-nnSd{dLG(z
z^9|>*d)xxWQgbc0{k*-P=i=whY`M>icJ9qEd8IAF_58=*<~Jv0IcL=KPriFz=C7xy
z+Y!af(%*z%S*|&<lzGOEOVhVT<;wF#xJBDU2<Fe?PdANrxxA%w)hhmd$v%z3Jt;<&
ziq$#Xq49Rlj~*~veC2OSnC!E+EX@Z$ES^1+Kkx;s8hb$M>5>x{cD>lVob9jrpQfl!
rXPO@EGM(-{L;TCDdlycZs2^ZB|7}~}p-ZpJK}D*ktDnm{r-UW|gv~1C

literal 0
HcmV?d00001

diff --git a/src/style.less b/src/style.less
index d86ad85..a117258 100644
--- a/src/style.less
+++ b/src/style.less
@@ -61,6 +61,8 @@ body {
 .ant-table {
   color: #ade6ee;
   font-size: 16px;
+  border: 1px solid rgba(65,111,127, .5);
+
   &-thead {
     > tr {
       th {
@@ -679,6 +681,16 @@ input[type='number']::-webkit-outer-spin-button {
       background-color: #b98326 !important;
     }
   }
+
+  &-grey {
+    // 自定义warn样式
+    background-color: #406979 !important;
+    color: #fff !important;
+    border-color: #406979 !important;
+    &:hover {
+      background-color: #406979 !important;
+    }
+  }
 }
 
 // 空状态
diff --git a/src/views/logManage/index.vue b/src/views/logManage/index.vue
index 7a5aa09..8c2742e 100644
--- a/src/views/logManage/index.vue
+++ b/src/views/logManage/index.vue
@@ -55,7 +55,7 @@
       </custom-table>
     </div>
     <!-- 日志列表结束 -->
-    <custom-modal title="Log" :width="950" v-model="visible" :show-footer="false">
+    <custom-modal title="Log" :width="950" v-model="visible" :footer="null">
       <a-spin class="log-detail" :spinning="isGettingDetail">
         <div v-for="(logItem, index) in logInfo" :key="index">
           {{ logItem }}
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 7356775..e80ab8d 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -56,19 +56,30 @@
         </beta-gamma-chart-container>
       </div>
     </div>
+
+    <!-- Comparison Modal 开始 -->
+    <comparison-modal v-model="comparisonModalVisible" />
+    <!-- Comparison Modal 结束 -->
   </div>
 </template>
 
 <script>
 import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
 import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
+import ComparisonModal from './components/Modals/ComparisonModal.vue'
 import ResultDisplay from './components/ResultDisplay.vue'
 import SpectrumLineChart from './components/SpectrumLineChart.vue'
 
 import twoDData from './data.json'
 
 export default {
-  components: { BetaGammaChartContainer, SpectrumLineChart, ResultDisplay, BetaGammaSpectrumChart },
+  components: {
+    BetaGammaChartContainer,
+    SpectrumLineChart,
+    ResultDisplay,
+    BetaGammaSpectrumChart,
+    ComparisonModal
+  },
   data() {
     return {
       resultDisplay: [
@@ -101,7 +112,8 @@ export default {
           mdc: '0.03464'
         }
       ],
-      twoDData: {}
+      twoDData: {},
+      comparisonModalVisible: false
     }
   },
   created() {
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 5e85fb3..d5af401 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -376,6 +376,7 @@ export default {
       width: 100px;
       background-color: #406979;
       cursor: pointer;
+      user-select: none;
 
       &.active {
         background-color: #1397a3;
diff --git a/src/views/spectrumAnalysis/components/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/LoadFromDBModal.vue
deleted file mode 100644
index 6b00998..0000000
--- a/src/views/spectrumAnalysis/components/LoadFromDBModal.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <a-modal v-model="visible" title="Load From Database" class="load-from-db-modal">
-    从数据库加载
-  </a-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Boolean
-    }
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.load-from-db-modal {
-}
-</style>
diff --git a/src/views/spectrumAnalysis/components/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal.vue
deleted file mode 100644
index a770e60..0000000
--- a/src/views/spectrumAnalysis/components/LoadFromFileModal.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <a-modal v-model="visible" :width="1400" title="Load Data From File">
-    <a-table :data-source="list" :columns="columns" :pagination="false">
-      <template slot="sampleData">
-        <a-input type="file" @change="handleFileChange($event, 'sampleData')"></a-input>
-      </template>
-      <template slot="gasBkData">
-        <a-input type="file" @change="handleFileChange($event, 'gasBkData')"></a-input>
-      </template>
-      <template slot="detBkData">
-        <a-input type="file" @change="handleFileChange($event, 'detBkData')"></a-input>
-      </template>
-      <template slot="qcData">
-        <a-input type="file" @change="handleFileChange($event, 'qcData')"></a-input>
-      </template>
-      <template slot="status" slot-scope="text">
-        <span class="status"></span>
-      </template>
-    </a-table>
-
-    <!-- 底部按钮 -->
-    <template slot="footer">
-      <a-space>
-        <a-button type="primary" @click="handleReset">Reset</a-button>
-        <a-button type="primary" @click="handleLoad">Load</a-button>
-        <a-button type="primary" @click="handleCancel">Cancel</a-button>
-      </a-space>
-    </template>
-    <!-- 底部按钮结束 -->
-  </a-modal>
-</template>
-
-<script>
-const columns = [
-  {
-    title: 'SampleData',
-    dataIndex: 'sampleData',
-    scopedSlots: {
-      customRender: 'sampleData'
-    }
-  },
-  {
-    title: 'GasBkData',
-    dataIndex: 'gasBkData',
-    scopedSlots: {
-      customRender: 'gasBkData'
-    }
-  },
-  {
-    title: 'DetBkData',
-    dataIndex: 'detBkData',
-    scopedSlots: {
-      customRender: 'detBkData'
-    }
-  },
-  {
-    title: 'QCData',
-    dataIndex: 'qcData',
-    scopedSlots: {
-      customRender: 'qcData'
-    }
-  },
-  {
-    title: 'Status',
-    align: 'center',
-    scopedSlots: {
-      customRender: 'status'
-    }
-  }
-]
-
-export default {
-  props: {
-    value: {
-      type: Boolean
-    }
-  },
-  data() {
-    this.columns = columns
-    return {
-      list: this.getInitialList()
-    }
-  },
-  methods: {
-    getInitialList() {
-      return new Array(10).fill(0).map(() => ({
-        sampleData: '',
-        gasBkData: '',
-        detBkData: '',
-        qcData: ''
-      }))
-    },
-
-    handleFileChange(fileInfo, key) {
-      console.log('%c [ fileInfo, key ]-86', 'font-size:13px; background:pink; color:#bf2c9f;', fileInfo, key)
-    },
-
-    handleReset() {
-      this.list = this.getInitialList()
-    },
-
-    handleLoad() {},
-
-    handleCancel() {}
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.status {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-
-  background-color: #00e170;
-}
-</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/ComparisonModal.vue b/src/views/spectrumAnalysis/components/Modals/ComparisonModal.vue
new file mode 100644
index 0000000..3fe678b
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/ComparisonModal.vue
@@ -0,0 +1,130 @@
+<template>
+  <custom-modal v-model="visible" title="Comparison" :width="800" :footer="null" class="comparison-modal">
+    <div class="comparison-list">
+      <div class="comparison-list-item" v-for="(item, index) in compareList" :key="index">
+        <div class="comparison-list-item-title">{{ item.title }}</div>
+        <custom-table :list="item.list" :columns="columns"></custom-table>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Isotope',
+    dataIndex: 'isotope'
+  },
+  {
+    title: 'Concentration',
+    dataIndex: 'concentration'
+  },
+  {
+    title: 'Uncertainty',
+    dataIndex: 'uncertainty'
+  },
+  {
+    title: 'MDC[mBq / m3 ]',
+    dataIndex: 'mdc'
+  }
+]
+
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      compareList: [
+        {
+          title: 'ARMD',
+          list: [
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            },
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            },
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            }
+          ]
+        },
+        {
+          title: 'IDC',
+          list: [
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            },
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            },
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            },
+            {
+              isotope: 'isotope',
+              concentration: 'concentration',
+              uncertainty: 'uncertainty',
+              mdc: 'mdc'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.comparison-modal {
+  ::v-deep {
+    .ant-modal-body {
+      padding: 16px;
+    }
+  }
+}
+
+.comparison-list {
+  &-item {
+    &-title {
+      color: #0cebc9;
+    }
+
+    &:last-child {
+      margin-top: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
new file mode 100644
index 0000000..4c2aa5c
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -0,0 +1,313 @@
+<template>
+  <custom-modal v-model="visible" :width="1200" title="Load From Database" class="load-from-db-modal">
+    <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> </search-form>
+    <custom-table
+      size="middle"
+      rowKey="sampleId"
+      :columns="columns"
+      :list="dataSource"
+      :pagination="ipagination"
+      :loading="loading"
+      @change="handleTableChange"
+      :selectedRowKeys.sync="selectedRowKeys"
+      :multiple="true"
+    >
+    </custom-table>
+    <!-- 底部操作栏 -->
+    <template slot="custom-footer">
+      <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+    </template>
+  </custom-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { getAction } from '../../../../api/manage'
+
+const columns = [
+  {
+    title: 'SampleID',
+    align: 'left',
+    dataIndex: 'sampleId'
+  },
+  {
+    title: 'Station',
+    align: 'left',
+    dataIndex: 'stationName'
+  },
+  {
+    title: 'Detector',
+    align: 'left',
+    dataIndex: 'detectorsName'
+  },
+  {
+    title: 'Sample',
+    align: 'left',
+    dataIndex: 'sampleType'
+  },
+  {
+    title: 'DataType',
+    align: 'left',
+    dataIndex: 'dataType'
+  },
+  {
+    title: 'Qualifier',
+    align: 'left',
+    dataIndex: 'spectralQualifie'
+  },
+  {
+    title: 'Col.Stop',
+    align: 'left',
+    dataIndex: 'collectStop'
+  },
+  {
+    title: 'Acq.Start',
+    align: 'left',
+    dataIndex: 'acquisitionStart'
+  },
+  {
+    title: 'Acq.real',
+    align: 'left',
+    dataIndex: 'acquisitionRealSec'
+  },
+  {
+    title: 'Acq.live',
+    align: 'left',
+    dataIndex: 'acquisitionLiveSec'
+  },
+  {
+    title: 'Status',
+    align: 'left',
+    dataIndex: 'status'
+  }
+]
+
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  mixins: [JeecgListMixin],
+  data() {
+    this.columns = columns
+    return {
+      selectedRowKeys: [],
+      stationList: [],
+      detectorList: [],
+      url: {
+        list: '/gardsSampleData/findPage'
+      },
+
+      isLoadingSample: false // 正在加载样例
+    }
+  },
+  created() {
+    this.getStationList()
+    this.getDetectorList()
+  },
+  methods: {
+    loadData(arg) {
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      this.onClearSelected()
+
+      const params = this.getQueryParams() //查询条件
+      if (params.checkboxGroup) {
+        params.checkboxGroup.forEach(item => {
+          params[item] = true
+        })
+        delete params.checkboxGroup
+      }
+
+      this.loading = true
+      getAction(this.url.list, params)
+        .then(res => {
+          if (res.success) {
+            this.dataSource = res.result.records || res.result
+            if (res.result.total) {
+              this.ipagination.total = res.result.total
+            } else {
+              this.ipagination.total = 0
+            }
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+
+    /**
+     * 加载
+     */
+    async handleLoad() {
+      if (!this.selectedRowKeys.length) {
+        this.$message.warn('Please Select Databases To Load')
+        return
+      }
+      this.isLoadingSample = true
+      const res = await ''
+      console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+      this.isLoadingSample = false
+      this.visible = false
+    },
+
+    async getStationList() {
+      try {
+        const { success, result, message } = await getAction('/gardsStations/findPage', {
+          pageIndex: 1,
+          pageSize: 10000
+        })
+        if (success) {
+          this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    async getDetectorList() {
+      try {
+        const { success, result, message } = await getAction('/gardsDetectors/findPage', {
+          pageIndex: 1,
+          pageSize: 10000
+        })
+        if (success) {
+          this.detectorList = result.records.map(record => ({ label: record.detectorCode, value: record.detectorId }))
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    formItems() {
+      return [
+        {
+          label: 'SampleID',
+          type: 'a-input',
+          name: 'sampleId',
+          props: {
+            allowClear: true
+          },
+          style: {
+            width: '20%'
+          }
+        },
+        {
+          label: 'Station',
+          type: 'custom-select',
+          name: 'stationId',
+          props: {
+            options: [
+              {
+                label: 'ALL',
+                value: ''
+              },
+              ...this.stationList
+            ],
+            showSearch: true,
+            filterOption: this.filterOption,
+            allowClear: true
+          },
+          style: {
+            width: '18%'
+          }
+        },
+        {
+          label: 'Detector',
+          type: 'custom-select',
+          name: 'detectorId',
+          props: {
+            options: [
+              {
+                label: 'ALL',
+                value: ''
+              },
+              ...this.detectorList
+            ],
+            showSearch: true,
+            filterOption: this.filterOption,
+            allowClear: true
+          },
+          style: {
+            width: '18%'
+          }
+        },
+        {
+          label: 'From',
+          type: 'custom-date-picker',
+          name: 'collectStart',
+          props: {
+            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD HH:mm',
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            style: {
+              minWidth: 'auto'
+            }
+          },
+          style: {
+            width: '22%'
+          }
+        },
+        {
+          label: 'To',
+          type: 'custom-date-picker',
+          name: 'collectStop',
+          props: {
+            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD HH:mm',
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            style: {
+              minWidth: 'auto'
+            }
+          },
+          style: {
+            paddingRight: 0,
+            width: '22%'
+          }
+        },
+        {
+          label: '',
+          type: 'a-checkbox-group',
+          name: 'checkboxGroup',
+          props: {
+            options: [
+              { label: 'Collect Stop', value: 'collectStop' },
+              { label: 'Acq.Start', value: 'acqDotStart' }
+            ]
+          },
+          style: {
+            width: '230px'
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.load-from-db-modal {
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
new file mode 100644
index 0000000..80522ea
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
@@ -0,0 +1,172 @@
+<template>
+  <custom-modal v-model="visible" :width="1200" title="Load Data From File">
+    <a-table :data-source="list" :columns="columns" :pagination="false" bordered>
+      <template slot="sampleData" slot-scope="text, record">
+        <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" :title="text && text.name">
+          {{ text && text.name }}
+        </phd-select>
+      </template>
+      <template slot="gasBkData" slot-scope="text, record">
+        <phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" :title="text && text.name">
+          {{ text && text.name }}
+        </phd-select>
+      </template>
+      <template slot="detBkData" slot-scope="text, record">
+        <phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" :title="text && text.name">
+          {{ text && text.name }}
+        </phd-select>
+      </template>
+      <template slot="qcData" slot-scope="text, record">
+        <phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" :title="text && text.name">
+          {{ text && text.name }}
+        </phd-select>
+      </template>
+      <template slot="status" slot-scope="text">
+        <span class="status"></span>
+      </template>
+    </a-table>
+
+    <!-- 底部按钮 -->
+    <template slot="custom-footer">
+      <a-space>
+        <a-button type="primary" @click="handleReset">Reset</a-button>
+        <a-button type="primary" @click="handleLoad">Load</a-button>
+        <a-button type="primary" @click="handleCancel">Cancel</a-button>
+      </a-space>
+    </template>
+    <!-- 底部按钮结束 -->
+  </custom-modal>
+</template>
+
+<script>
+import PhdSelect from '../PHDSelect.vue'
+const columns = [
+  {
+    title: 'SampleData',
+    dataIndex: 'sampleData',
+    width: '23%',
+    ellipsis: true,
+    scopedSlots: {
+      customRender: 'sampleData'
+    }
+  },
+  {
+    title: 'GasBkData',
+    dataIndex: 'gasBkData',
+    width: '23%',
+    ellipsis: true,
+    scopedSlots: {
+      customRender: 'gasBkData'
+    }
+  },
+  {
+    title: 'DetBkData',
+    dataIndex: 'detBkData',
+    width: '23%',
+    ellipsis: true,
+    scopedSlots: {
+      customRender: 'detBkData'
+    }
+  },
+  {
+    title: 'QCData',
+    dataIndex: 'qcData',
+    width: '23%',
+    ellipsis: true,
+    scopedSlots: {
+      customRender: 'qcData'
+    }
+  },
+  {
+    title: 'Status',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'status'
+    }
+  }
+]
+
+export default {
+  components: { PhdSelect },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      list: this.getInitialList()
+    }
+  },
+  methods: {
+    // 初始化为10*4的表格
+    getInitialList() {
+      return new Array(10).fill(0).map(() => ({
+        sampleData: undefined,
+        gasBkData: undefined,
+        detBkData: undefined,
+        qcData: undefined
+      }))
+    },
+
+    handleFileChange(record, key, fileInfo) {
+      record[key] = fileInfo
+    },
+
+    handleReset() {
+      this.list = this.getInitialList()
+    },
+
+    handleLoad() {
+      console.log('%c [ handleLoad ]-123', 'font-size:13px; background:pink; color:#bf2c9f;', this.list)
+    },
+
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.status {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  margin-top: 8px;
+
+  background-color: #00e170;
+}
+::v-deep {
+  @tableBorderColor: #000;
+
+  .ant-table-bordered .ant-table-thead > tr > th,
+  .ant-table-bordered .ant-table-tbody > tr > td {
+    border-right-color: @tableBorderColor;
+  }
+  .ant-table-thead > tr th {
+    border-bottom: 1px solid @tableBorderColor;
+  }
+
+  .ant-table-bordered .ant-table-body > table {
+    border-color: @tableBorderColor;
+  }
+
+  .ant-table-tbody tr td {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/NuclideActivityAndMDCModal.vue b/src/views/spectrumAnalysis/components/Modals/NuclideActivityAndMDCModal.vue
new file mode 100644
index 0000000..36f4139
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/NuclideActivityAndMDCModal.vue
@@ -0,0 +1,239 @@
+<template>
+  <custom-modal
+    v-model="visible"
+    :width="1231"
+    title="Nuclide Activity and MDC"
+    class="nuclide-activity-and-mdc-modal"
+    :footer="null"
+  >
+    <!-- 顶部搜索栏 -->
+    <a-form-model class="search-form">
+      <div class="time-pickers">
+        <a-form-model-item label="Activity reference time">
+          <custom-date-picker show-time v-model="queryParam.activityReferenceTime" />
+        </a-form-model-item>
+        <a-form-model-item label="Concentration reference time">
+          <custom-date-picker show-time v-model="queryParam.concentrationReferenceTime" />
+        </a-form-model-item>
+      </div>
+      <a-space class="operators" :size="20">
+        <a-button :type="compareVisible ? 'grey' : 'primary'" @click="handleComparision">
+          <img src="@/assets/images/spectrum/comparation.png" />
+          {{ compareVisible ? 'Cancel comparison' : 'Comparison' }}
+        </a-button>
+        <a-button type="primary" @click="handleExportToExcel">
+          <img src="@/assets/images/spectrum/download.png" />
+          Export to Excel
+        </a-button>
+      </a-space>
+    </a-form-model>
+    <!-- 顶部搜索栏结束 -->
+    <!-- 主体部分 -->
+    <div v-if="compareVisible" class="comparison-list">
+      <div class="comparison-list-item" v-for="(item, index) in compareList" :key="index">
+        <div class="comparison-list-item-title">{{ item.title }}</div>
+        <custom-table :list="item.list" :columns="columns"></custom-table>
+      </div>
+    </div>
+    <custom-table v-else :list="list" :columns="columns"></custom-table>
+  </custom-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Nuclide',
+    dataIndex: 'nuclide'
+  },
+  {
+    title: 'HalfLife',
+    dataIndex: 'halfLife'
+  },
+  {
+    title: 'Energy (keV)',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'Yield (%)',
+    dataIndex: 'yield'
+  },
+  {
+    title: 'Efficiency',
+    dataIndex: 'efficiency'
+  },
+  {
+    title: 'Activity (Bq)',
+    dataIndex: 'activity'
+  },
+  {
+    title: 'Act Err (%)',
+    dataIndex: 'actErr'
+  },
+  {
+    title: 'MDA (Bq)',
+    dataIndex: 'mda'
+  },
+  {
+    title: 'Conc (uBq/m3)',
+    dataIndex: 'conc'
+  },
+  {
+    title: 'MDC (uBq/m3)',
+    dataIndex: 'mdc'
+  }
+]
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      queryParam: {
+        activityReferenceTime: undefined,
+        concentrationReferenceTime: undefined
+      },
+      compareVisible: false,
+
+      list: [
+        {
+          nuclide: 'nuclide',
+          halfLife: 'halfLife',
+          energy: 'energy',
+          yield: 'yield',
+          efficiency: 'efficiency',
+          activity: 'activity',
+          actErr: 'actErr',
+          mda: 'mda',
+          conc: 'conc',
+          mdc: 'mdc'
+        }
+      ],
+
+      compareList: [
+        {
+          title: 'ARMD',
+          list: [
+            {
+              nuclide: 'nuclide',
+              halfLife: 'halfLife',
+              energy: 'energy',
+              yield: 'yield',
+              efficiency: 'efficiency',
+              activity: 'activity',
+              actErr: 'actErr',
+              mda: 'mda',
+              conc: 'conc',
+              mdc: 'mdc'
+            }
+          ]
+        },
+        {
+          title: 'IDC',
+          list: [
+            {
+              nuclide: 'nuclide',
+              halfLife: 'halfLife',
+              energy: 'energy',
+              yield: 'yield',
+              efficiency: 'efficiency',
+              activity: 'activity',
+              actErr: 'actErr',
+              mda: 'mda',
+              conc: 'conc',
+              mdc: 'mdc'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    // 切换比较
+    handleComparision() {
+      this.compareVisible = !this.compareVisible
+    },
+
+    // 导出到Excel
+    handleExportToExcel() {}
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nuclide-activity-and-mdc-modal {
+  ::v-deep {
+    .ant-modal-body {
+      padding: 16px;
+    }
+  }
+}
+
+.search-form {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+
+  .time-pickers {
+    display: flex;
+    .ant-form-item {
+      margin-bottom: 0;
+
+      &:nth-child(2) {
+        margin-left: 20px;
+      }
+
+      ::v-deep {
+        .ant-form-item {
+          &-label {
+            > label {
+              color: #ade6ee;
+            }
+          }
+
+          &-control-wrapper {
+            width: 210px;
+          }
+        }
+      }
+    }
+  }
+  .operators {
+    .ant-btn {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.comparison-list {
+  padding-top: 15px;
+  border-top: 1px solid rgba(13, 109, 118, 0.5);
+
+  &-item {
+    &-title {
+      color: #0cebc9;
+    }
+
+    &:last-child {
+      margin-top: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/PHDSelect.vue b/src/views/spectrumAnalysis/components/PHDSelect.vue
new file mode 100644
index 0000000..bb003a1
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/PHDSelect.vue
@@ -0,0 +1,39 @@
+<template>
+  <label class="file-select">
+    <input type="file" @change="handleFileChange" accept=".phd, .PHD" />
+    <div class="file-name">
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.$emit('change', file)
+      }
+      e.target.value = ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.file-select {
+  display: block;
+  height: 42px;
+  line-height: 42px;
+
+  input {
+    display: none;
+  }
+  .file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/PeakInfomation.vue b/src/views/spectrumAnalysis/components/PeakInfomation.vue
new file mode 100644
index 0000000..f87f662
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/PeakInfomation.vue
@@ -0,0 +1,360 @@
+<template>
+  <a-modal v-model="visible" title="Peak Infomation" :width="1231" :footer="null" class="peak-infomation">
+    <div v-if="compareVisible" class="comparison-list">
+      <div class="comparison-list-item" v-for="(item, index) in compareList" :key="index">
+        <div class="comparison-list-item-title">{{ item.title }}</div>
+        <custom-table :list="item.list" :scroll="{ y: 230 }" :columns="columns"></custom-table>
+      </div>
+    </div>
+    <custom-table v-else :columns="columns" :list="list"></custom-table>
+
+    <!-- 底部按钮 -->
+    <div class="peak-infomation-footer">
+      <a-space :size="20">
+        <a-button :type="compareVisible ? 'grey' : 'primary'" @click="handleComparision">
+          <img src="@/assets/images/spectrum/comparation.png" />
+          {{ compareVisible ? 'Cancel comparison' : 'Comparison' }}
+        </a-button>
+        <a-button type="primary" @click="handleExportToExcel">
+          <img src="@/assets/images/spectrum/download.png" />
+          Export to Excel
+        </a-button>
+      </a-space>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Index',
+    dataIndex: 'index',
+    align: 'center',
+    customRender: (_, __, index) => {
+      return index + 1
+    }
+  },
+  {
+    title: 'Energy(keV)',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'Centroid',
+    dataIndex: 'centroid'
+  },
+  {
+    title: 'Multiplet',
+    dataIndex: 'multiplet'
+  },
+  {
+    title: 'Fwhm(keV)',
+    dataIndex: 'fwhm'
+  },
+  {
+    title: 'NetArea',
+    dataIndex: 'netArea'
+  },
+  {
+    title: 'AreaErr(%)',
+    dataIndex: 'areaErr'
+  },
+  {
+    title: 'Significant',
+    dataIndex: 'significant'
+  },
+  {
+    title: 'Sensitivity',
+    dataIndex: 'sensitivity'
+  },
+  {
+    title: 'Indentify',
+    dataIndex: 'indentify'
+  }
+]
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          id: 1,
+          energy: 'energy',
+          centroid: 'centroid',
+          multiplet: 'multiplet',
+          fwhm: 'fwhm',
+          netArea: 'netArea',
+          areaErr: 'areaErr',
+          significant: 'significant',
+          sensitivity: 'sensitivity',
+          indentify: 'indentify'
+        }
+      ],
+      compareList: [
+        {
+          title: 'ARMD',
+          list: [
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            },
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            }
+          ]
+        },
+        {
+          title: 'IDC',
+          list: [
+            {
+              id: 1,
+              energy: 'energy',
+              centroid: 'centroid',
+              multiplet: 'multiplet',
+              fwhm: 'fwhm',
+              netArea: 'netArea',
+              areaErr: 'areaErr',
+              significant: 'significant',
+              sensitivity: 'sensitivity',
+              indentify: 'indentify'
+            }
+          ]
+        }
+      ],
+      compareVisible: true
+    }
+  },
+  methods: {
+    // 切换比较
+    handleComparision() {
+      this.compareVisible = !this.compareVisible
+    },
+
+    // 导出到Excel
+    handleExportToExcel() {}
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.peak-infomation {
+  ::v-deep {
+    .ant-modal-body {
+      padding: 20px 16px 16px;
+    }
+  }
+
+  &-footer {
+    margin-top: 10px;
+    text-align: right;
+
+    .ant-btn {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.comparison-list {
+  &-item {
+    &-title {
+      color: #0cebc9;
+    }
+
+    &:last-child {
+      margin-top: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 373aec2..81b7a7b 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -78,6 +78,14 @@
     <!-- 从文件加载开始 -->
     <load-from-file-modal v-model="loadFromFileModalVisible" />
     <!-- 从文件加载结束 -->
+
+    <!-- Peak Infomation 弹窗开始 -->
+    <peak-infomation v-model="peakInfomationModalVisible" />
+    <!-- Peak Infomation 弹窗结束 -->
+
+    <!-- Nuclide Activity and MDC 弹窗开始 -->
+    <nuclide-activity-and-mdc-modal v-model="nuclideActivityAndMDCModalVisible" />
+    <!-- Nuclide Activity and MDC 弹窗结束 -->
   </div>
 </template>
 <script>
@@ -91,8 +99,10 @@ import GammaAnalysis from './gamma-analysis.vue'
 import BetaGammaAnalysis from './beta-gamma-analysis.vue'
 import Spectra from './components/SubOperators/Spectra.vue'
 import SpectraListInMenu from './components/SpectraListInMenu.vue'
-import LoadFromDbModal from './components/LoadFromDBModal.vue'
-import LoadFromFileModal from './components/LoadFromFileModal.vue'
+import LoadFromDbModal from './components/Modals/LoadFromDBModal.vue'
+import LoadFromFileModal from './components/Modals/LoadFromFileModal.vue'
+import PeakInfomation from './components/PeakInfomation.vue'
+import NuclideActivityAndMdcModal from './components/Modals/NuclideActivityAndMDCModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -112,7 +122,9 @@ export default {
     Spectra,
     SpectraListInMenu,
     LoadFromDbModal,
-    LoadFromFileModal
+    LoadFromFileModal,
+    PeakInfomation,
+    NuclideActivityAndMdcModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -128,7 +140,11 @@ export default {
       ],
 
       loadFromDbModalVisible: false,
-      loadFromFileModalVisible: false
+      loadFromFileModalVisible: false,
+
+      peakInfomationModalVisible: false,
+
+      nuclideActivityAndMDCModalVisible: false
     }
   },
   methods: {
diff --git a/src/views/stationOperation/components/MapPane.vue b/src/views/stationOperation/components/MapPane.vue
index e7f01df..4fa8f9c 100644
--- a/src/views/stationOperation/components/MapPane.vue
+++ b/src/views/stationOperation/components/MapPane.vue
@@ -152,7 +152,7 @@
       :bodyStyle="{ padding: '15px 0 10px' }"
       title="Data Recevice status Monitoring"
       :width="1230"
-      :showFooter="false"
+      :footer="null"
       @fullscreen="onModalFullScreen"
       :getContainer="getModalContainer"
     >