From f36c94fa4e703b9f6d3d78236d5a45d11180b71a Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 28 Jun 2023 19:25:11 +0800
Subject: [PATCH 01/15] =?UTF-8?q?WIP:=20Spectrum=20Analyze=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/spectrum/left-arrow.png     | Bin 0 -> 1030 bytes
 src/assets/images/spectrum/right-arrow.png    | Bin 0 -> 1028 bytes
 src/assets/images/spectrum/search-hover.png   | Bin 0 -> 1284 bytes
 src/assets/images/spectrum/search.png         | Bin 0 -> 1292 bytes
 src/components/CustomChart/index.vue          |   2 +-
 src/style.less                                |   1 +
 .../spectrumAnalysis/beta-gamma-analysis.vue  | 154 ++++++++
 .../components/BetaGammaChartContainer.vue    |  98 +++++
 .../components/BetaGammaSpectrumChart.vue     | 158 ++++++++
 .../components/ResultDisplay.vue              | 209 +++++++++++
 .../components/SpectrumLineChart.vue          | 143 ++++++++
 .../sub-operators/ButtonWithSwitchIcon.vue    |  43 +++
 .../sub-operators/DetailedInfomation.vue      | 140 +++++++
 .../sub-operators/GraphAssistance.vue         |  67 ++++
 .../sub-operators/NuclearLibrary.vue          |  59 +++
 .../sub-operators/PopOverWithIcon.vue         |  64 ++++
 .../components/sub-operators/QcFlags.vue      |  84 +++++
 .../components/sub-operators/Spectra.vue      |  14 +
 src/views/spectrumAnalysis/gamma-analysis.vue | 271 ++++++++++++++
 src/views/spectrumAnalysis/index.vue          | 346 +++++++++++++++++-
 20 files changed, 1850 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/spectrum/left-arrow.png
 create mode 100644 src/assets/images/spectrum/right-arrow.png
 create mode 100644 src/assets/images/spectrum/search-hover.png
 create mode 100644 src/assets/images/spectrum/search.png
 create mode 100644 src/views/spectrumAnalysis/beta-gamma-analysis.vue
 create mode 100644 src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
 create mode 100644 src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
 create mode 100644 src/views/spectrumAnalysis/components/ResultDisplay.vue
 create mode 100644 src/views/spectrumAnalysis/components/SpectrumLineChart.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/ButtonWithSwitchIcon.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue
 create mode 100644 src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
 create mode 100644 src/views/spectrumAnalysis/gamma-analysis.vue

diff --git a/src/assets/images/spectrum/left-arrow.png b/src/assets/images/spectrum/left-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..a96662ae8c99015a946db381b81285bdc797fb6a
GIT binary patch
literal 1030
zcmaJ=O=uHA7~Ps`Yp@a#3himwia%)fFUh7^5@Xs;niLai8f*}RZg!{1((cZ7cWO4h
zC_U-To|GQMLl1%=cu*9PB2=g#^e!F*FCv1Lo&>SZrb+6-xG+0Ey!XEMee=zoslvp7
zf7nk^)IcsP7s-5t41d4(zjvGsk!c90%Xk{i;ksf&Dy5+c1UW;g!Xi|(#^O5|rzqcu
zUMk~q{<5SZgHb#T;~ExWQ&c?ZT8cUkF{r?*ZYJpOuQq6)YYBQLlIQZ)IIQW}WgAW}
z7fR~#yc*N!<V6s7B_d!ztN_<oFdfNF&`n*5ti5BF22BW_Ptg0O%K0fUj%)}-h6}13
zCxB>-;l*%R<Sqb#6F8QOu)GlDMTrYbd=#`knnbg;IjJaTTCvD3LDw+0B$ln$>r6ew
zAiK))u~>}d1Xd7&1QB!^CRW^_>5Q}$Way~2Zebmnz*AHzXbC51;&eX+!|KSIPOD6$
zV63ZHEYEOWN^M|1|9_}qbkGhi!UMnm6n07t3$jJ%pe0)+7dJQJg|eh^8!8ytC4?5*
zRh+6JjGP*>fWR{XI6I@88mc?znuL5_%9##UOcmzj1WhCuUDu@1NH`LTjg6)=9MAJ<
zIVOh0bd=9<p-@UlW%xE%M(UCQP2A>c2i#a!uGb5OMIy`4)^9*9V<Q7JbC&e(Uc|0?
zEw0wxOSCJOC1zOfX8*eB_7Q0xZ`tWvvgvd_G)cSLq_4kz4BsSgqLGtRCHF(+*WO;z
zcZ_@RbGv{2bkEL-%>CYyH5hp8dwS;N+QZ@OkBy_BX9gdAS^!rMS6J}dUwnUPGkxh>
z-{vHj3Q$84-)%%KCbvp2dbi?tUry~--<(>#{&ryfdC!gk3Q*qd%i8Ay+Y_s|CRbil
Zfm!Oywcy&bD_PNdnYna9elj+@@&~y$L!tlx

literal 0
HcmV?d00001

diff --git a/src/assets/images/spectrum/right-arrow.png b/src/assets/images/spectrum/right-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef665b37d0788f75f32936bfe63cad0b19c5ad57
GIT binary patch
literal 1028
zcmaJ=O=}ZD7+z{yVzE*@D0&(;C<@JfHA#~tYnx;f8|aph29k@=&F(Z=+ud1rr)C?4
zet@8ODY<xP{R1An6h!bKLJk!LFZSX=K~I7rqIk19n<l9T<HGEG@I24^yzjhoH$Qh}
zbmZI!MNy-<8M#2_VKPPn{{Q|-c7jZ2ai)yt(IT#^4y2Mgsz8u4)haANRbRdS0wyTx
zSkNezaaoxaHDofXk6}F1CTxmIOnJ7dEkO(_uxeNm{q^ZH8W_4nmm&(M*lAcZW*QEh
zZ_E|7#*!A->8Z;g;fX}RgjfZhxoo+jC(&(Pk*xh=mIiGIUXtiTQ)ML&(#U}z%5Wi#
z;{-4nXZUD19OcG=zzH17MOa=4@llZri~J<$d^CyX=!;@O&URvvokZ6#wndh$*XvAu
zf<aD|<>T=<%L%L?ga{(!u3A|2LY5osD#*~)9K*&2vVgCsR?rHTXyWuR1=H@yT5hLI
zq+qP4+APm-eo9@SqWm9fnmx3O3-HMAKZV`mstwr!bkT~Vk&9al`k`zw?LZYHr-;yU
zw~F~1!pN;58wfljfQu!=(ox;L)Fvp3n6q50S{lsB5=|r+!_dW8B+koWIhx6GJkMw3
zSS*%FWuj?0&Bvk~pXzdDq^+3H!d<R@#GUNR^?SjzNn{y1#to=v9b|%b&Z5!ZOSrFI
zhpYGZ66woji5b?v*}rbOdqmpDU-tTzY<is!Ez<4|>FdOq)?@M}>Nz=C^xjtV*e`Zx
zW8?Yoo$m+R+(C7H-~xCz&}vL4?tOc;mVGjq-!FkLL#=Cj&Ds3WUUN6u96u4Dnm>j=
z+?>Ak;COC8Zw+pNvDXW!Q#+%rhai~zDI`PNx5op!iPKldDy>gz3m?}ve{X%(r~pUp
WYv)rh-<RI_?=qK}lOLrPHva%Rdq-LT

literal 0
HcmV?d00001

diff --git a/src/assets/images/spectrum/search-hover.png b/src/assets/images/spectrum/search-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a3fdd68b10fa65500cdd849dd1547db749e5a33
GIT binary patch
literal 1284
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!WpKsVXIz(~Q|QqR!L
z#Kg=%N5ROz$Uxt~RNv4@*U-$$z{JYXTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr62to{@q^cxGNo
zetEGbSc9*xm1kaYNn&1ds;7&s63_^}%*+%kOBYK6Q)f#HS2qJALqk^=M+;X&7gGyM
zXG>EvS92Ffm|mCs<kH;Kyb_q+6og(&oO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
zhSNN#-W1$!F~_M_ALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>H791&0`D<jOCs#
zjv*Ddl0;_O%xsiuVC}HawR2dgS+kGNhbM&T@C^mA7$KRaJywQtO1HYs<gEGs@6X?Y
z_b;!e?zXqBa-8MZw94q3X{Wt?-Ok-_Z#-YV-m>+_Q<>g3vx4={-1_n4g=!LS((}h`
zvzV?hTwxR6v;X&$P1~nB&iX(7dA{A9YPS%Hm&<?r{r#8yrU=K5-Cu7UXFq?|dr=2(
zj$!Ro>DAv8Lu*T4`i15BmDR~5CBOZ<cX`Co{rjr;Rdya_?KJIhcVby>VJ&|`_x}A_
zrBe&~zt3OIdLz-)L-)Y9|NH;nzh9$rYQg8tW(8dzR{w}t-03Z`+FK%9CUb^!&X@Yi
zZ_f_B@nu_Cw`kX?@7v`6fBVHOEx&!w<c(8iifJt5`dC}@qv;0A&nG92=Ih^ox%}5m
zF*gU7y1GAAdy);M`Il!p{`eYN-RRkPL+8`GZ;$_`1~(d>RXp(d_3QGA9Wl}SqO~tg
zWob^}`^n^TLg{<i9EL@Lp>ly+6PT|tPLXC2NMJZpK2`C3OX*Eex#a2U=d#Wzp$PyT
CCD;T2

literal 0
HcmV?d00001

diff --git a/src/assets/images/spectrum/search.png b/src/assets/images/spectrum/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1f384b4b45188be1ef03f1a710afd155491d5b4
GIT binary patch
literal 1292
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1SIoCSFHz9k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!WpKsVXIz(~Q|QqR!L
z#Kg=%N5ROz$Uxt~RNv4@*U-$$z{JYXTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr62to{@q^cxGNo
zetEGbSc9*xm1kaYNn&1ds;7&s63_^}%*+%kOBYuIb4Mq0S2qJALqk^=Ckt0oCsQ*+
zS662j7c)0Ym|mCs<kH;Kyb_q+6og(2oO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
ziqkx(-W1$!F~g}>ALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>H6jN00jmH#(GZ|
z$B>F!Nh02!i3`{g7$1EPe;1h1wV+Q(n0e{}1G5g+=`8CfG`JUaOxnk$Eq(jGef_+9
zbsMq|?h^k#|3T3CGr1{W9$&3C35+aVdZzR09Ge(*^Y_-9A79wKyZ_17kT*`Y_xIO)
z{`4@|C)naB%f=lYv*(*{T>IkE!C+}M-6rmNx2g_UT`*P9fA@CtbpL#N6|J5>MM?ku
z{Oir(Vv&j6|NH0O<AJ6(kFaf9HSycNrL#A#x@Vcsdttu~Q_YcMw=PHXZ|K@z{gKUs
z%d<-;d%}h-5@CgMjByG-Kc1~##KUxKV(kp^u;vEA@Bi=b?_YmkFjc@{#!uJQHOzM}
z95Frf#pKM_^y#I7v-|ed{`&OrYV`Rl2CTAI-_PG~WN6%d(sSpLU)C<a7*gNQ+5PL=
zP3=XO1O;Mj3O?QKzW&d0qu^9Yfr;zo?etg8KXUZ6Y}~|s=^xvYrN0Txc9pxo!(4T_
zpu}aHrW&B{o7=e!7Vl7HNt8Omp`+-|ZDu8wb6~-uI|>a9%nZzy)8zGcPu~G5pFCat
KT-G@yGywqT3)STS

literal 0
HcmV?d00001

diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index 8f68344..a39c9ff 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -46,6 +46,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .custom-chart {
-  height: 100%;
+  height: 100% !important;
 }
 </style>
diff --git a/src/style.less b/src/style.less
index 6c60280..d86ad85 100644
--- a/src/style.less
+++ b/src/style.less
@@ -869,6 +869,7 @@ input[type='number']::-webkit-outer-spin-button {
   &-arrow {
     border-left-color: #03353f !important;
     border-top-color: #03353f !important;
+    z-index: -1;
   }
 }
 
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
new file mode 100644
index 0000000..93040f0
--- /dev/null
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="beta-gamma-analysis">
+    <div class="beta-gamma-spectrum-sample">
+      <beta-gamma-chart-container>
+        <template slot="title">
+          Beta-Gamma Spectrum: Sample
+        </template>
+        <beta-gamma-spectrum-chart ref="scatterChartRef" />
+      </beta-gamma-chart-container>
+    </div>
+    <div class="beta-and-gamma-spectrum">
+      <div class="spectrum-charts">
+        <div class="gamma-spectrum">
+          <div class="gamma-spectrum-item">
+            <beta-gamma-chart-container>
+              <template slot="title">
+                Gamma Spectrum: Original
+              </template>
+              <spectrum-line-chart ref="lineChart1Ref" />
+            </beta-gamma-chart-container>
+          </div>
+          <div class="gamma-spectrum-item">
+            <beta-gamma-chart-container>
+              <template slot="title">
+                Gamma Spectrum: Projected
+              </template>
+              <spectrum-line-chart ref="lineChart2Ref" />
+            </beta-gamma-chart-container>
+          </div>
+        </div>
+        <div class="gamma-spectrum">
+          <div class="gamma-spectrum-item">
+            <beta-gamma-chart-container>
+              <template slot="title">
+                Beta Spectrum: Original
+              </template>
+              <spectrum-line-chart ref="lineChart3Ref" title="Beta" color="#00ff1e" />
+            </beta-gamma-chart-container>
+          </div>
+          <div class="gamma-spectrum-item">
+            <beta-gamma-chart-container>
+              <template slot="title">
+                Beta Spectrum: Projected
+              </template>
+              <spectrum-line-chart ref="lineChart4Ref" title="Beta" color="#00ff1e" />
+            </beta-gamma-chart-container>
+          </div>
+        </div>
+      </div>
+      <div class="result-display">
+        <beta-gamma-chart-container>
+          <template slot="title">
+            Result display
+          </template>
+          <result-display :data="resultDisplay"></result-display>
+        </beta-gamma-chart-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
+import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
+import ResultDisplay from './components/ResultDisplay.vue'
+import SpectrumLineChart from './components/SpectrumLineChart.vue'
+export default {
+  components: { BetaGammaChartContainer, SpectrumLineChart, ResultDisplay, BetaGammaSpectrumChart },
+  data() {
+    return {
+      resultDisplay: [
+        {
+          id: 1,
+          isotope: 'Xe131m',
+          concentration: '0.03464',
+          uncertainty: '+/-0.01988',
+          mdc: '0.03464'
+        },
+        {
+          id: 2,
+          isotope: 'Xe131m',
+          concentration: '0.03464',
+          uncertainty: '+/-0.01988',
+          mdc: '0.03464'
+        },
+        {
+          id: 3,
+          isotope: 'Xe131m',
+          concentration: '0.03464',
+          uncertainty: '+/-0.01988',
+          mdc: '0.03464'
+        },
+        {
+          id: 4,
+          isotope: 'Xe131m',
+          concentration: '0.03464',
+          uncertainty: '+/-0.01988',
+          mdc: '0.03464'
+        }
+      ]
+    }
+  },
+  methods: {
+    resize() {
+      this.$refs.scatterChartRef && this.$refs.scatterChartRef.resize()
+      this.$refs.lineChart1Ref && this.$refs.lineChart1Ref.resize()
+      this.$refs.lineChart2Ref && this.$refs.lineChart2Ref.resize()
+      this.$refs.lineChart3Ref && this.$refs.lineChart3Ref.resize()
+      this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-analysis {
+  height: 100%;
+  display: flex;
+  overflow: auto hidden;
+
+  .beta-gamma-spectrum-sample {
+    width: calc(100% - 1078px);
+  }
+
+  .beta-and-gamma-spectrum {
+    width: 1048px;
+    margin-left: 30px;
+    flex-direction: column;
+
+    .spectrum-charts {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 208px);
+
+      .gamma-spectrum {
+        display: flex;
+        height: 50%;
+
+        &-item {
+          flex: 509px;
+
+          &:first-child {
+            margin-right: 30px;
+          }
+        }
+      }
+    }
+
+    .result-display {
+      flex-shrink: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue b/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
new file mode 100644
index 0000000..76af91f
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="betagamma-chart">
+    <div class="betagamma-chart-title">
+      <div class="title">
+        <slot name="title"> </slot>
+      </div>
+      <div class="square">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+    <div class="betagamma-chart-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.betagamma-chart {
+  height: 100%;
+  overflow: hidden;
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 20px;
+    height: 45px;
+    border-top: 1px solid rgba(12, 235, 201, 0.3);
+    border-bottom: 4px solid rgba(12, 235, 201, 0.2);
+
+    .title {
+      padding: 0 20px;
+      line-height: 40px;
+      background-color: rgba(12, 235, 201, 0.05);
+      color: #0cebc9;
+      font-size: 18px;
+      font-weight: bold;
+      font-family: MicrogrammaD-MediExte;
+      letter-spacing: 1px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .square {
+      display: flex;
+      align-items: center;
+      span {
+        background-color: rgba(12, 235, 201, 0.2);
+        vertical-align: middle;
+        &:first-child {
+          width: 4px;
+          height: 4px;
+        }
+        &:nth-child(2) {
+          width: 6px;
+          height: 6px;
+          margin-right: 6px;
+        }
+        &:nth-child(3) {
+          width: 4px;
+          height: 4px;
+          margin-right: 9px;
+        }
+        &:nth-child(4) {
+          width: 1px;
+          height: 16px;
+          margin-right: 23px;
+        }
+        &:nth-child(5) {
+          width: 2px;
+          height: 2px;
+          margin-right: 24px;
+        }
+        &:nth-child(6) {
+          width: 4px;
+          height: 4px;
+        }
+      }
+    }
+  }
+
+  &-content {
+    height: calc(100% - 45px);
+    overflow: hidden;
+    padding-top: 15px;
+    padding-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
new file mode 100644
index 0000000..9ab5d17
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="beta-gamma-spectrum-chart">
+    <div class="beta-gamma-spectrum-chart-operators">
+      <span
+        v-for="(item, index) in buttons"
+        :key="item"
+        :class="active == index ? 'active' : ''"
+        @click="handleChange(index)"
+        >{{ item }}</span
+      >
+    </div>
+    <div class="beta-gamma-spectrum-chart-main">
+      <custom-chart ref="chartRef" :option="option" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+const buttons = ['2D', '3D Surface', '3D Scatter', 'Unzoom']
+
+const option = {
+  visualMap: [{
+    min: 0,
+    max: 256,
+    calculable: true,
+    orient: 'vertical',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    inRange: {
+      color: ['#fff', '#f00']
+    }
+  }],
+  grid: {
+    top: 15,
+    left: 55,
+    right: 40,
+    bottom: 45
+  },
+  xAxis: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16
+    },
+    nameLocation: 'center',
+    nameGap: 30,
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 256,
+    interval: 64,
+    data: new Array(256).fill(0).map((_, index) => index)
+  },
+  yAxis: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16
+    },
+    nameLocation: 'center',
+    nameGap: 35,
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 256,
+    interval: 64,
+    data: new Array(256).fill(0).map((_, index) => index)
+  },
+  series: {
+    type: 'scatter',
+    symbolSize: 2,
+    data: new Array(256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
+  }
+}
+export default {
+  components: {
+    CustomChart
+  },
+  data() {
+    this.buttons = buttons
+    return {
+      active: 0,
+      option
+    }
+  },
+  methods: {
+    handleChange(index) {
+      this.active = index
+    },
+
+    resize() {
+      this.$refs.chartRef.resize()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-spectrum-chart {
+  height: 100%;
+
+  &-operators {
+    text-align: right;
+    overflow: auto;
+    height: 26px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 9px;
+
+    .ant-space-item:first-child {
+      span {
+        width: 70px;
+      }
+    }
+
+    span {
+      text-align: center;
+      height: 100%;
+      line-height: 26px;
+      width: 100px;
+      background-color: #406979;
+      cursor: pointer;
+
+      &.active {
+        background-color: #1397a3;
+      }
+    }
+  }
+
+  &-main {
+    height: calc(100% - 26px);
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/ResultDisplay.vue b/src/views/spectrumAnalysis/components/ResultDisplay.vue
new file mode 100644
index 0000000..2da7fd7
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/ResultDisplay.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="result-display-content">
+    <a-table :data-source="source1" rowKey="id" :columns="columns" :pagination="false">
+      <template slot="flag">
+        <a-checkbox></a-checkbox>
+      </template>
+      <template slot="concentration" slot-scope="text">
+        <div class="concentration color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="uncertainty" slot-scope="text">
+        <div class="uncertainty color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="mdc" slot-scope="text">
+        <div class="mdc color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="operator">
+        <div class="search"></div>
+      </template>
+    </a-table>
+    <a-table :data-source="source2" rowKey="id" :columns="columns" :pagination="false">
+      <template slot="flag">
+        <a-checkbox></a-checkbox>
+      </template>
+      <template slot="concentration" slot-scope="text">
+        <div class="concentration color-box error">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="uncertainty" slot-scope="text">
+        <div class="uncertainty color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="mdc" slot-scope="text">
+        <div class="mdc color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="operator">
+        <div class="search"></div>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Flag',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'flag'
+    },
+    width: 40
+  },
+  {
+    title: 'Isotope',
+    dataIndex: 'isotope',
+    ellipsis: true,
+    width: 76
+  },
+  {
+    title: 'Concentration',
+    dataIndex: 'concentration',
+    scopedSlots: {
+      customRender: 'concentration'
+    },
+    width: 128
+  },
+  {
+    title: 'Uncertainty',
+    dataIndex: 'uncertainty',
+    scopedSlots: {
+      customRender: 'uncertainty'
+    },
+    width: 118
+  },
+  {
+    title: 'MDC[mBq/m3]',
+    dataIndex: 'mdc',
+    scopedSlots: {
+      customRender: 'mdc'
+    },
+    width: 133
+  },
+  {
+    title: '',
+    scopedSlots: {
+      customRender: 'operator'
+    },
+    width: 34
+  }
+]
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      source1: [],
+      source2: []
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.source1 = val.slice(0, 2)
+        this.source2 = val.slice(2, 4)
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.result-display-content {
+  display: flex;
+
+  .ant-table-wrapper {
+    flex: 1;
+
+    &:first-child {
+      margin-right: 20px;
+    }
+
+    ::v-deep {
+      .ant-table-thead > tr th {
+        color: #00e9fe;
+        font-family: MicrosoftYaHei;
+        font-size: 16px;
+        background-color: transparent !important;
+
+        &:first-child {
+          padding-left: 0 !important;
+        }
+        &:last-child {
+          padding-right: 0 !important;
+        }
+      }
+
+      .ant-table-tbody {
+        tr {
+          background-color: transparent;
+
+          td {
+            &:first-child {
+              padding-left: 0 !important;
+            }
+
+            &:last-child {
+              padding-right: 0 !important;
+            }
+          }
+
+          &:hover {
+            td {
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .color-box {
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    color: #fff;
+  }
+
+  .concentration {
+    background-color: #ad8815;
+
+    &.error {
+      background-color: #c11414;
+    }
+  }
+
+  .uncertainty {
+    background-color: rgba(57, 184, 222, 0.4);
+  }
+
+  .mdc {
+    background-color: rgba(57, 184, 222, 0.4);
+  }
+  .search {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    background: url(~@/assets/images/spectrum/search.png) center no-repeat;
+
+    &:hover {
+      background: url(~@/assets/images/spectrum/search-hover.png) center no-repeat;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
new file mode 100644
index 0000000..4bcdfd4
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="spectrum-line-chart">
+    <div class="title">{{ title + ' Count'}}</div>
+    <custom-chart class="spectrum-line-chart-main" ref="chartRef" :option="option" style="height: 100%"></custom-chart>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import { cloneDeep } from 'lodash'
+
+const initialOption = {
+  grid: {
+    top: 25,
+    right: 0,
+    bottom: 40
+  },
+  title: {
+    text: '',
+    left: 'right',
+    top: 0,
+    textStyle: {
+      color: '#ade6ee',
+      fontSize: 12,
+      rich: {
+        a: {
+          padding: [0, 27, 0, 0]
+        },
+        b: {
+          color: '#ff5656'
+        }
+      }
+    }
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    },
+    name: '',
+    nameLocation: 'center',
+    nameTextStyle: {
+      fontSize: 14,
+      color: '#5b9cba'
+    },
+    nameGap: 25,
+    data: new Array(256).fill(0).map((_, index) => index)
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(119, 181, 213, 0.5)'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .2)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee'
+    }
+  },
+  series: {
+    type: 'line',
+    itemStyle: {
+      color: ''
+    },
+    symbol: 'none',
+    data: new Array(256)
+      .fill(0)
+      .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)))
+  }
+}
+
+export default {
+  components: {
+    CustomChart
+  },
+  props: {
+    color: {
+      type: String,
+      default: 'red'
+    },
+    title: {
+      type: String,
+      default: 'Gamma'
+    }
+  },
+  data() {
+    const option = cloneDeep(initialOption)
+    option.title.text = `{a|Channel: 136}{a|Count: 1475}{b|Energy:  381.409}`
+    option.series.itemStyle.color = this.color
+    option.xAxis.name = this.title + ' Channel'
+    return {
+      option
+    }
+  },
+  methods: {
+    resize() {
+      this.$refs.chartRef && this.$refs.chartRef.resize()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.spectrum-line-chart {
+  display: flex;
+  height: 100%;
+
+  .title {
+    writing-mode: vertical-rl;
+    color: #5b9cba;
+    font-size: 16px;
+    transform: rotate(180deg);
+    text-align: center;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-main {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/ButtonWithSwitchIcon.vue b/src/views/spectrumAnalysis/components/sub-operators/ButtonWithSwitchIcon.vue
new file mode 100644
index 0000000..b99a8f0
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/ButtonWithSwitchIcon.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="btn-with-switch-icon">
+    <img src="@/assets/images/spectrum/left-arrow.png" @click="handleClick('left')" />
+    <span>
+      <slot></slot>
+    </span>
+    <img src="@/assets/images/spectrum/right-arrow.png" @click="handleClick('right')" />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick(direction) {
+      this.$emit('change', direction)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.btn-with-switch-icon {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #0a544e;
+  padding: 0 12px;
+  height: 100%;
+  letter-spacing: 1px;
+  color: #ade6ee;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 5px;
+  }
+
+  img {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue b/src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue
new file mode 100644
index 0000000..27309ee
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="detailed-infomation">
+    <a-form :labelCol="{ style: { width: 120 } }">
+      <a-row v-for="(row, index) in items" :key="index">
+        <a-col v-for="(item, i) in row" :key="i" :span="item.span || 4">
+          <a-form-item :label="item.label">
+            {{ data[item.name] }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+const items = [
+  [
+    {
+      label: 'Sample Id',
+      name: 'sampleId'
+    },
+    {
+      label: 'Data Type',
+      name: 'dataType'
+    },
+    {
+      label: 'Collection Start',
+      name: 'collectionStart',
+      span: 6
+    },
+    {
+      label: 'Acquisition Start',
+      name: 'acquisitionStart',
+      span: 6
+    },
+    {
+      label: 'Auto.Cat',
+      name: 'autoCat'
+    }
+  ],
+  [
+    {
+      label: 'Station Code',
+      name: 'stationCode'
+    },
+    {
+      label: 'Spectral Qualifier',
+      name: 'spectralQualifier'
+    },
+    {
+      label: 'Sampling Time',
+      name: 'samplingTime',
+      span: 6
+    },
+    {
+      label: 'Acq.Real',
+      name: 'acqReal',
+      span: 6
+    },
+    {
+      label: 'Category',
+      name: 'category'
+    }
+  ],
+  [
+    {
+      label: 'Detector Code',
+      name: 'detectorCode'
+    },
+    {
+      label: 'SRID',
+      name: 'srid'
+    },
+    {
+      label: 'Quantity',
+      name: 'quantity',
+      span: 6
+    },
+    {
+      label: 'Acq.Live',
+      name: 'acqLive',
+      span: 6
+    }
+  ],
+  [
+    {
+      label: 'System Type',
+      name: 'systemType'
+    },
+    {
+      label: 'Sample Status',
+      name: 'sampleStatus'
+    },
+    {
+      label: 'Flow Rate',
+      name: 'flowRate',
+      span: 6
+    },
+    {
+      label: 'Decay Time',
+      name: 'decayTime',
+      span: 6
+    }
+  ]
+]
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        sampleId: 1,
+        dataType: 'SAMPLEPHD'
+      })
+    }
+  },
+  created() {
+    this.items = items
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detailed-infomation {
+  width: 1200px;
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    ::v-deep {
+      .ant-form-item-label > label {
+        color: #ade6ee;
+      }
+
+      .ant-form-item-children {
+        color: #0cecca;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue b/src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue
new file mode 100644
index 0000000..9d58106
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="graph-assistance">
+    <div class="graph-assistance-item" v-for="conf in config" :key="conf.title">
+      <span>{{ conf.label }}</span>
+      <a-switch v-model="conf.checked" @change="handleChange(conf)"></a-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+const config = [
+  {
+    label: 'Log10',
+    checked: true
+  },
+  {
+    label: 'Cursor',
+    checked: false
+  },
+  {
+    label: 'Lc',
+    checked: false
+  },
+  {
+    label: 'Baseline',
+    checked: false
+  },
+  {
+    label: 'Channel',
+    checked: false
+  },
+  {
+    label: 'Lines',
+    checked: false
+  },
+  {
+    label: 'S CAC',
+    checked: false
+  }
+]
+export default {
+  data() {
+    return {
+      config
+    }
+  },
+  methods: {
+    handleChange(conf) {
+      console.log('%c [ conf ]-47', 'font-size:13px; background:pink; color:#bf2c9f;', conf)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.graph-assistance {
+  display: flex;
+  width: 790px;
+  justify-content: space-between;
+
+  &-item {
+    span {
+      margin-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue b/src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue
new file mode 100644
index 0000000..ebae3b1
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="nuclear-library">
+    <div class="nuclear-library-item" v-for="item in list" :key="item.id">
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: '1',
+          title: 'Ac228'
+        },
+        {
+          id: '2',
+          title: 'Ac229'
+        },
+        {
+          id: '3',
+          title: 'Ac230'
+        },
+        {
+          id: '4',
+          title: 'Eu152'
+        },
+        {
+          id: '5',
+          title: 'I132'
+        },
+        {
+          id: '6',
+          title: 'Ir192'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nuclear-library {
+  width: 230px;
+  max-height: 200px;
+  overflow: auto;
+
+  &-item {
+    padding: 4px 14px;
+    // cursor: pointer;
+
+    // &:hover {
+    //   background-color: #055565;
+    // }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue b/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
new file mode 100644
index 0000000..3ac6b89
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
@@ -0,0 +1,64 @@
+<template>
+  <a-popover :placement="placement" overlayClassName="popover-with-icon">
+    <div class="pop-over-with-icon">
+      <span class="text">
+        <slot />
+      </span>
+      <img src="@/assets/images/global/select-down.png" alt="" />
+    </div>
+    <template slot="content">
+      <slot name="content" />
+    </template>
+  </a-popover>
+</template>
+<script>
+export default {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.pop-over-with-icon {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #0a544e;
+  height: 100%;
+  padding: 0 11px;
+  cursor: pointer;
+
+  .text {
+    font-family: MicrosoftYaHei;
+    color: #ade6ee;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+  }
+
+  img {
+    margin-left: 5px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    flex-shrink: 0;
+  }
+
+  &.ant-popover-open {
+    img {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>
+<style lang="less">
+.popover-with-icon {
+  .ant-popover-inner-content {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue b/src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue
new file mode 100644
index 0000000..5d43fb8
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="qc-flags">
+    <div class="qc-flags-item" v-for="conf in config" :key="conf.label">
+      <span :class="'dot' + (data[conf.name] ? ' green' : '')"></span>
+      {{ conf.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+// 配置
+const config = [
+  {
+    label: 'Collection Time',
+    name: 'collectionTime'
+  },
+  {
+    label: 'Acq Time',
+    name: 'acqTime'
+  },
+  {
+    label: 'Decay Time',
+    name: 'decayTime'
+  },
+  {
+    label: 'SampVol',
+    name: 'sampVol'
+  },
+  {
+    label: 'Be7-FWHM',
+    name: 'be7Fwhm'
+  },
+  {
+    label: 'Ba140-MDC',
+    name: 'ba140Mdc'
+  },
+  {
+    label: 'Xe133-MDC',
+    name: 'xe133Mdc'
+  }
+]
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  created() {
+    this.config = config
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.qc-flags {
+  display: flex;
+  &-item {
+    background-color: #46738e;
+    display: flex;
+    align-items: center;
+    width: 150px;
+    height: 30px;
+
+    &:not(:last-child) {
+      margin-right: 2px;
+    }
+
+    span {
+      margin-left: 20px;
+      margin-right: 5px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: radial-gradient(circle, #979797 0, #777a7c 100%);
+
+      &.green {
+        background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue b/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
new file mode 100644
index 0000000..5ec32e2
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="spectra">
+    spectra
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.spectra {
+}
+</style>
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
new file mode 100644
index 0000000..0341b60
--- /dev/null
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="gamma-analysis">
+    <div class="gamma-analysis-chart">
+      <custom-chart ref="chartRef" :option="option" style="height: 100%" />
+    </div>
+    <div class="gamma-analysis-thumbnail">
+      <custom-chart :option="thumbnailOption" style="height: 100%" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+
+// 初始配置
+const initialOption = {
+  grid: {
+    top: 40,
+    left: 60,
+    right: 0
+  },
+  title: {
+    text: '',
+    left: 'center',
+    bottom: 10,
+    textStyle: {
+      color: '#8FD4F8',
+      rich: {
+        a: {
+          padding: [0, 20, 0, 0],
+          fontSize: 16
+        }
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      animation: false,
+      type: 'cross',
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: '#ade6ee'
+      }
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#ade6ee'
+      }
+    },
+    data: new Array(3928).fill(0).map((_, index) => index)
+  },
+  yAxis: {
+    name: 'Counts',
+    nameTextStyle: {
+      color: '#8FD4F8',
+      fontSize: 16
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#ade6ee'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(173, 230, 238, .2)'
+      }
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#ade6ee'
+      }
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      data: new Array(3928)
+        .fill(0)
+        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
+      itemStyle: {
+        color: '#24FF0B'
+      },
+      lineStyle: {
+        width: 1
+      },
+      symbol: 'none',
+      markLine: {
+        symbol: 'none',
+        label: {
+          show: false
+        },
+        lineStyle: {
+          type: 'solid'
+        },
+        data: [{
+          xAxis: 100,
+          lineStyle: {
+            color: 'red'
+          }
+        }]
+      }
+    },
+    {
+      type: 'line',
+      data: new Array(3928)
+        .fill(0)
+        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
+      itemStyle: {
+        color: '#D8DE07'
+      },
+      lineStyle: {
+        width: 1
+      },
+      symbol: 'none'
+    }
+  ],
+  dataZoom: {
+    type: 'inside',
+    start: 0,
+    end: 20,
+    zoomLock: true
+  }
+}
+
+// 缩略图配置
+const thumbnailOption = {
+  grid: {
+    top: 0,
+    left: 5,
+    right: 5,
+    bottom: 0
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    data: new Array(3928).fill(0).map((_, index) => index)
+  },
+  yAxis: {
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      data: new Array(3928)
+        .fill(0)
+        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
+      itemStyle: {
+        color: '#24FF0B'
+      },
+      lineStyle: {
+        width: 1
+      },
+      symbol: 'none'
+    },
+    {
+      type: 'line',
+      data: new Array(3928)
+        .fill(0)
+        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
+      itemStyle: {
+        color: '#D8DE07'
+      },
+      lineStyle: {
+        width: 1
+      },
+      symbol: 'none'
+    }
+  ]
+}
+
+export default {
+  props: {
+    data: {
+      type: Object
+    },
+    chartType: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    CustomChart
+  },
+  data() {
+    return {
+      option: initialOption,
+      thumbnailOption
+    }
+  },
+  created() {
+    this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
+
+    console.log('%c [  ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', this.option)
+  },
+  methods: {
+    resize() {
+      this.$refs.chartRef.resize()
+    },
+
+    /**
+     * 向某一个方向移动标记线
+     * @param { 'left'| 'right' } direction
+     */
+    moveMarkLine(direction) {
+      if(direction == 'left') {
+        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
+      }
+      else {
+        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
+      }
+
+      this.$emit('markLineChange', {  })
+    }
+  },
+  watch: {
+    data: {
+      handler() {},
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.gamma-analysis {
+  height: 100%;
+  position: relative;
+
+  &-chart {
+    height: 100%;
+  }
+
+  &-thumbnail {
+    position: absolute;
+    top: 50px;
+    right: 10px;
+    width: 500px;
+    height: 150px;
+    background-color: #153E44;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index fc52b2c..923d3a7 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -1,3 +1,345 @@
 <template>
-    <div>能谱分析页面</div>
-</template>
\ No newline at end of file
+  <div class="spectrum-analysis">
+    <!-- 顶部操作栏 -->
+    <div class="spectrum-analysis-operators">
+      <a-dropdown class="spectrum-analysis-operators-item" v-for="operation in operations" :key="operation.title">
+        <a-button type="primary">{{ operation.title }}</a-button>
+        <template slot="overlay">
+          <a-menu>
+            <a-menu-item v-for="child in operation.children" :key="child.title" @click="child.handler">
+              {{ child.title }}
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div>
+    <!-- 顶部操作栏结束 -->
+
+    <!-- 二级交互栏 -->
+    <div class="spectrum-analysis-sub-operators">
+      <pop-over-with-icon placement="bottomLeft">
+        Detailed-Information
+        <detailed-infomation slot="content" />
+      </pop-over-with-icon>
+      <pop-over-with-icon placement="bottomLeft">
+        QC Flags
+        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
+      </pop-over-with-icon>
+
+      <!-- gamma 独有的二级交互栏 -->
+      <template v-if="analysisType == ANALYZE_TYPE.GAMMA">
+        <pop-over-with-icon>
+          Graph Assistance
+          <graph-assistance slot="content" />
+        </pop-over-with-icon>
+        <pop-over-with-icon>
+          Nuclide Library
+          <nuclear-library slot="content" />
+        </pop-over-with-icon>
+        <div class="peak-info">
+          <button-with-switch-icon @change="handlePeakInfoChange">
+            Peak Information
+          </button-with-switch-icon>
+        </div>
+      </template>
+      <!-- gamma 独有的二级交互栏结束 -->
+
+      <!-- beta-gamma 独有的二级交互栏 -->
+      <template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
+        <pop-over-with-icon placement="bottomLeft" style="width: 159px">
+          Spectra
+          <spectra slot="content" />
+        </pop-over-with-icon>
+      </template>
+      <!-- beta-gamma 独有的二级交互栏结束 -->
+    </div>
+    <!-- 二级交互栏结束 -->
+
+    <!-- 频谱分析部分 -->
+    <div class="spectrum-analysis-main">
+      <gamma-analysis v-if="analysisType == ANALYZE_TYPE.GAMMA" ref="gammaAnalysisRef" />
+      <beta-gamma-analysis v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA" ref="betaGammaAnalysisRef" />
+      <resize-observer @notify="handleResize" />
+    </div>
+    <!-- 频谱分析部分结束 -->
+  </div>
+</template>
+<script>
+import ButtonWithSwitchIcon from './components/sub-operators/ButtonWithSwitchIcon.vue'
+import DetailedInfomation from './components/sub-operators/DetailedInfomation.vue'
+import GraphAssistance from './components/sub-operators/GraphAssistance.vue'
+import NuclearLibrary from './components/sub-operators/NuclearLibrary.vue'
+import PopOverWithIcon from './components/sub-operators/PopOverWithIcon.vue'
+import QcFlags from './components/sub-operators/QcFlags.vue'
+import GammaAnalysis from './gamma-analysis.vue'
+import BetaGammaAnalysis from './beta-gamma-analysis.vue'
+import Spectra from './components/sub-operators/Spectra.vue'
+
+// 分析类型
+const ANALYZE_TYPE = {
+  GAMMA: 'gammaAnalysis',
+  BETA_GAMMA: 'betaGammaAnalysis'
+}
+export default {
+  components: {
+    PopOverWithIcon,
+    ButtonWithSwitchIcon,
+    BetaGammaAnalysis,
+    GammaAnalysis,
+    QcFlags,
+    GraphAssistance,
+    DetailedInfomation,
+    NuclearLibrary,
+    Spectra
+  },
+  data() {
+    this.ANALYZE_TYPE = ANALYZE_TYPE
+
+    return {
+      analysisType: ANALYZE_TYPE.BETA_GAMMA // 分析类型
+    }
+  },
+  methods: {
+    handleLoadFromDb() {
+      console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    handleLoadFromFile() {
+      console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // peak info 点击左右方向
+    handlePeakInfoChange(direction) {
+      this.$refs.gammaAnalysisRef.moveMarkLine(direction)
+    },
+
+    handleResize() {
+      this.$refs.gammaAnalysisRef && this.$refs.gammaAnalysisRef.resize()
+      this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
+    }
+  },
+  computed: {
+    operations() {
+      return [
+        {
+          title: 'SAMPLE',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'SAVE',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'ANALYZE',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'CALIBRATION',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'NUCLIDELIBRARY',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'COMMENTS',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'REPORTS',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'LOG',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        },
+        {
+          title: 'HELP',
+          children: [
+            {
+              title: 'Load From DB',
+              handler: this.handleLoadFromDb
+            },
+            {
+              title: 'Load From File',
+              handler: this.handleLoadFromFile
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.spectrum-analysis {
+  padding-top: 17px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // 顶部操作栏开始
+  &-operators {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    overflow: auto;
+
+    &-item {
+      width: 158px;
+      border: 1px solid rgba(12, 235, 201, 0.6);
+      border-top-width: 3px;
+      height: 30px;
+      background-color: rgba(51, 202, 217, 0.2);
+      color: #ccede8;
+
+      &:not(:last-child) {
+        margin-right: 15px;
+      }
+
+      ::v-deep {
+        span {
+          text-shadow: none;
+          line-height: 26px;
+          letter-spacing: 2px;
+        }
+      }
+
+      &:nth-child(4) {
+        width: 224px;
+      }
+      &:nth-child(5) {
+        width: 268px;
+      }
+      &:nth-child(6) {
+        width: 257px;
+      }
+      &:nth-child(7) {
+        width: 234px;
+      }
+      &:nth-child(8) {
+        width: 125px;
+      }
+    }
+  }
+  // 顶部操作栏结束
+
+  // 二级操作栏开始
+  &-sub-operators {
+    flex-shrink: 0;
+    margin-top: 15px;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: auto;
+
+    .pop-over-with-icon {
+      height: 32px;
+
+      &:not(:last-child) {
+        margin-right: 11px;
+      }
+
+      &:nth-child(1) {
+        width: 256px;
+      }
+      &:nth-child(2) {
+        width: 186px;
+      }
+      &:nth-child(3) {
+        width: 246px;
+      }
+      &:nth-child(4) {
+        width: 246px;
+      }
+    }
+
+    .peak-info {
+      width: 306px;
+      height: 32px;
+      display: inline-block;
+    }
+  }
+  // 二级操作栏结束
+
+  // 主体部分开始
+  &-main {
+    flex: 1;
+    margin-top: 19px;
+    height: calc(100% - 100px);
+  }
+  // 主体部分结束
+}
+</style>

From 005a057f47b07b0b36e4cc4f94ff0fdc47fd5b88 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 29 Jun 2023 17:43:15 +0800
Subject: [PATCH 02/15] =?UTF-8?q?WIP:=20=E5=AE=9E=E7=8E=B0=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E4=B8=ADSpectra=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=B8=80=E7=BA=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E5=B9=B6=E5=9C=A8=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=B8=AD=E5=A2=9E=E5=8A=A0=E5=B7=B2=E9=80=89=E4=B8=AD=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=8A=9F=E8=83=BD=EF=BC=9B=E7=BB=98=E5=88=B63D=20Scat?=
 =?UTF-8?q?ter=E5=92=8C3D=20Surface=20=E5=9B=BE=E8=A1=A8=EF=BC=88=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=AD=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/components/Custom3DChart/index.vue        |  51 +++
 src/components/CustomChart/index.vue          |   1 -
 .../components/BetaGammaSpectrumChart.vue     | 244 +++++++++++++--
 .../components/SpectraListInMenu.vue          |  65 ++++
 .../components/SpectrumLineChart.vue          |  14 +-
 .../sub-operators/PopOverWithIcon.vue         |  21 +-
 .../components/sub-operators/Spectra.vue      |  64 +++-
 src/views/spectrumAnalysis/index.vue          | 291 ++++++++++++++----
 9 files changed, 652 insertions(+), 100 deletions(-)
 create mode 100644 src/components/Custom3DChart/index.vue
 create mode 100644 src/views/spectrumAnalysis/components/SpectraListInMenu.vue

diff --git a/package.json b/package.json
index e92f39a..bbea7cf 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "dayjs": "^1.8.0",
     "dom-align": "1.12.0",
     "echarts": "^5.4.2",
+    "echarts-gl": "^2.0.9",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
diff --git a/src/components/Custom3DChart/index.vue b/src/components/Custom3DChart/index.vue
new file mode 100644
index 0000000..da5b31b
--- /dev/null
+++ b/src/components/Custom3DChart/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    height: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.chart = echarts.init(this.$refs.containerRef)
+    this.chart.setOption(this.option)
+  },
+  methods: {
+    resize() {
+      this.chart && this.chart.resize()
+    }
+  },
+  watch: {
+    option: {
+      handler() {
+        if (this.chart) {
+          this.chart.setOption(this.option)
+        }
+      },
+      deep: true
+    },
+    height() {
+      this.$nextTick(() => {
+        this.chart && this.chart.resize()
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.custom-chart {
+  height: 100% !important;
+}
+</style>
diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index a39c9ff..f1157bc 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -30,7 +30,6 @@ export default {
     option: {
       handler() {
         if(this.chart) {
-          this.chart.clear()
           this.chart.setOption(this.option)
         }
       },
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 9ab5d17..46c4bf1 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -10,34 +10,51 @@
       >
     </div>
     <div class="beta-gamma-spectrum-chart-main">
-      <custom-chart ref="chartRef" :option="option" />
+      <!-- 2D 图表 -->
+      <div class="_2d-chart" v-if="active == 0">
+        <custom-chart ref="chartRef" :option="twoDOption" />
+        <div class="bar">
+          <div>256</div>
+          <div class="bar-main"></div>
+          <div>0</div>
+        </div>
+      </div>
+      <!-- 2D图表结束 -->
+
+      <!-- 3D Surface开始 -->
+      <Custom3DChart v-if="active == 1" key="1" ref="_3dSurfaceRef" :option="threeDSurfaceOption" />
+      <!-- 3D Surface结束 -->
+      <!-- 3D Scatter -->
+      <Custom3DChart v-if="active == 2" key="2" ref="_3dScannerRef" :option="threeDScatterOption" />
+      <!-- 3D Scatter结束 -->
     </div>
   </div>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
+import Custom3DChart from '@/components/Custom3DChart/index.vue'
 const buttons = ['2D', '3D Surface', '3D Scatter', 'Unzoom']
 
-const option = {
-  visualMap: [{
-    min: 0,
-    max: 256,
-    calculable: true,
-    orient: 'vertical',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    inRange: {
-      color: ['#fff', '#f00']
-    }
-  }],
+// 2D 配置
+const twoDOption = {
   grid: {
     top: 15,
     left: 55,
-    right: 40,
+    right: 10,
     bottom: 45
   },
+  tooltip: {
+    trigger: 'axis',
+    showContent: false,
+    axisPointer: {
+      animation: false,
+      type: 'cross',
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
   xAxis: {
     name: 'Beta Channel',
     nameTextStyle: {
@@ -61,8 +78,7 @@ const option = {
     },
     min: 0,
     max: 256,
-    interval: 64,
-    data: new Array(256).fill(0).map((_, index) => index)
+    interval: 64
   },
   yAxis: {
     name: 'Gamma Channel',
@@ -87,24 +103,169 @@ const option = {
     },
     min: 0,
     max: 256,
-    interval: 64,
-    data: new Array(256).fill(0).map((_, index) => index)
+    interval: 64
+  },
+  series: [
+    {
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      type: 'scatter',
+      symbolSize: 2.5,
+      itemStyle: {
+        color: '#fff'
+      },
+      data: new Array(1256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
+    },
+    {
+      type: 'line'
+    }
+  ]
+}
+
+//3D Surface 配置
+
+const threeDSurfaceOption = {
+  visualMap: {
+    show: false,
+    dimension: 2,
+    min: 0,
+    max: 5,
+    inRange: ['#47C134', '#f00']
+  },
+  grid3D: {
+    axisLabel: {
+      color: '#C4E5A6'
+    },
+    axisPointer: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    }
+  },
+  xAxis3D: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  yAxis3D: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  zAxis3D: {
+    name: 'Count',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    max: 5
   },
   series: {
-    type: 'scatter',
-    symbolSize: 2,
-    data: new Array(256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
+    type: 'surface',
+    data: [
+      [64, 64, 0],
+      [66, 66, 0],
+      [66, 66, 0],
+      [65, 65, 4],
+
+      [128, 128, 0],
+      [130, 130, 0],
+      [130, 130, 0],
+      [129, 129, 4]
+    ]
   }
 }
+
+// 3D Scatter 配置
+const threeDScatterOption = {
+  grid3D: {
+    axisLabel: {
+      color: '#C4E5A6'
+    },
+    axisPointer: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    }
+  },
+  xAxis3D: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  yAxis3D: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  zAxis3D: {
+    name: 'Count',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    max: 6
+  },
+  series: {
+    type: 'scatter3D',
+    symbolSize: 2.5,
+    itemStyle: {
+      color: '#a2d092'
+    },
+    data: new Array(512)
+      .fill(0)
+      .map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256), 4.5 + Math.random() * 0.1])
+  }
+}
+
 export default {
   components: {
-    CustomChart
+    CustomChart,
+    Custom3DChart
   },
   data() {
     this.buttons = buttons
     return {
-      active: 0,
-      option
+      active: 1,
+      twoDOption,
+      threeDSurfaceOption,
+      threeDScatterOption
     }
   },
   methods: {
@@ -113,7 +274,9 @@ export default {
     },
 
     resize() {
-      this.$refs.chartRef.resize()
+      this.$refs.chartRef && this.$refs.chartRef.resize()
+      this.$refs._3dSurfaceRef && this.$refs._3dSurfaceRef.resize()
+      this.$refs._3dScannerRef && this.$refs._3dScannerRef.resize()
     }
   }
 }
@@ -152,7 +315,34 @@ export default {
   }
 
   &-main {
-    height: calc(100% - 26px);
+    height: calc(100% - 40px);
+    margin-top: 15px;
+
+    ._2d-chart {
+      height: 100%;
+      display: flex;
+
+      .custom-chart {
+        width: calc(100% - 45px);
+      }
+
+      .bar {
+        width: 30px;
+        margin-left: 15px;
+        height: 100%;
+        color: #ade6ee;
+        padding-top: 5px;
+        padding-bottom: 38px;
+        text-align: center;
+
+        &-main {
+          display: inline-block;
+          width: 14px;
+          height: calc(100% - 42px);
+          background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/components/SpectraListInMenu.vue b/src/views/spectrumAnalysis/components/SpectraListInMenu.vue
new file mode 100644
index 0000000..ae86d3e
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/SpectraListInMenu.vue
@@ -0,0 +1,65 @@
+<template>
+  <a-menu class="spectra-list-in-menu">
+    <a-menu-item v-for="item in list" :key="item.id" @click="handleClick(item)">
+      <span class="checkbox">
+        <a-icon v-if="item.checked" type="check" style="color: #0de30d" />
+      </span>
+      <span class="name">{{ item.name }}</span>
+      <a-icon type="delete" @click.stop="handleRemove(item)" />
+    </a-menu-item>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClick(spectraItem) {
+      this.list.forEach(item => (item.checked = false))
+      spectraItem && (spectraItem.checked = true)
+      this.$emit('change', spectraItem)
+      this.$forceUpdate()
+    },
+
+    handleRemove(spectraItem) {
+      const index = this.list.findIndex(item => item == spectraItem)
+      this.list.splice(index, 1)
+      // 如果删除了一个选中的
+      if (spectraItem.checked) {
+        if (index == 0) {
+          // 如果是第一个，则选中下一个
+          this.handleClick(this.list[0])
+        } else {
+          // 如果不是第一个，则选中上一个
+          this.handleClick(this.list[index - 1])
+        }
+      }
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.spectra-list-in-menu {
+  .checkbox {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+  }
+
+  .name {
+    display: inline-block;
+    width: 300px;
+    margin: 0 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index 4bcdfd4..116ab17 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -12,7 +12,7 @@ import { cloneDeep } from 'lodash'
 const initialOption = {
   grid: {
     top: 25,
-    right: 0,
+    right: 12,
     bottom: 40
   },
   title: {
@@ -33,7 +33,9 @@ const initialOption = {
     }
   },
   xAxis: {
-    type: 'category',
+    min: 0,
+    max: 256,
+    interval: 64,
     axisLine: {
       lineStyle: {
         color: 'rgb(119, 181, 213, 0.5)'
@@ -57,10 +59,12 @@ const initialOption = {
       fontSize: 14,
       color: '#5b9cba'
     },
-    nameGap: 25,
-    data: new Array(256).fill(0).map((_, index) => index)
+    nameGap: 25
   },
   yAxis: {
+    min: 0,
+    max: 21099,
+    interval: 21000 / 4,
     axisLine: {
       show: true,
       lineStyle: {
@@ -84,7 +88,7 @@ const initialOption = {
     symbol: 'none',
     data: new Array(256)
       .fill(0)
-      .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)))
+      .map((_, index) => [index, (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800))])
   }
 }
 
diff --git a/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue b/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
index 3ac6b89..7e52eb8 100644
--- a/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
+++ b/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-popover :placement="placement" overlayClassName="popover-with-icon">
+  <a-popover :placement="placement" overlayClassName="popover-with-icon" v-model="innerVisible">
     <div class="pop-over-with-icon">
       <span class="text">
         <slot />
@@ -17,6 +17,25 @@ export default {
     placement: {
       type: String,
       default: 'bottom'
+    },
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      innerVisible: false
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.innerVisible = val
+      },
+      immediate: true
+    },
+    innerVisible(val) {
+      this.$emit('input', val)
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue b/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
index 5ec32e2..83a6b04 100644
--- a/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
+++ b/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
@@ -1,14 +1,74 @@
 <template>
   <div class="spectra">
-    spectra
+    <div
+      :class="'spectra-item' + (item.title == innerValue ? ' active' : '')"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="handleClick(item)"
+    >
+      {{ item.title }}
+    </div>
   </div>
 </template>
 
 <script>
-export default {}
+const list = [
+  {
+    title: 'Sample Data'
+  },
+  {
+    title: 'GasBg Data'
+  },
+  {
+    title: 'DetBg Data'
+  },
+  {
+    title: 'QC Data'
+  }
+]
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    this.list = list
+    return {}
+  },
+  methods: {
+    handleClick(item) {
+      this.innerValue = item.title
+    }
+  },
+  computed: {
+    innerValue: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .spectra {
+  width: 159px;
+  max-height: 200px;
+  overflow: auto;
+
+  &-item {
+    padding: 4px 14px;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      background-color: #055565;
+    }
+  }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 923d3a7..55af364 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -2,15 +2,23 @@
   <div class="spectrum-analysis">
     <!-- 顶部操作栏 -->
     <div class="spectrum-analysis-operators">
-      <a-dropdown class="spectrum-analysis-operators-item" v-for="operation in operations" :key="operation.title">
+      <a-dropdown
+        class="spectrum-analysis-operators-item"
+        overlayClassName="spectrum-analysis-operators-dropdown-overlay"
+        :overlay-style="operation.style"
+        v-for="operation in operations"
+        :key="operation.title"
+      >
         <a-button type="primary">{{ operation.title }}</a-button>
-        <template slot="overlay">
-          <a-menu>
-            <a-menu-item v-for="child in operation.children" :key="child.title" @click="child.handler">
-              {{ child.title }}
-            </a-menu-item>
-          </a-menu>
-        </template>
+        <div slot="overlay">
+          <template v-for="(child, index) in operation.children">
+            <component :is="child.type" :key="index" v-bind="child.attrs" v-on="child.on">
+              <component :is="item.type" v-for="item in child.children" :key="item.title" @click="item.handler">
+                {{ item.title }}
+              </component>
+            </component>
+          </template>
+        </div>
       </a-dropdown>
     </div>
     <!-- 顶部操作栏结束 -->
@@ -46,9 +54,9 @@
 
       <!-- beta-gamma 独有的二级交互栏 -->
       <template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
-        <pop-over-with-icon placement="bottomLeft" style="width: 159px">
+        <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
           Spectra
-          <spectra slot="content" />
+          <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
         </pop-over-with-icon>
       </template>
       <!-- beta-gamma 独有的二级交互栏结束 -->
@@ -74,6 +82,7 @@ import QcFlags from './components/sub-operators/QcFlags.vue'
 import GammaAnalysis from './gamma-analysis.vue'
 import BetaGammaAnalysis from './beta-gamma-analysis.vue'
 import Spectra from './components/sub-operators/Spectra.vue'
+import SpectraListInMenu from './components/SpectraListInMenu.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -90,24 +99,39 @@ export default {
     GraphAssistance,
     DetailedInfomation,
     NuclearLibrary,
-    Spectra
+    Spectra,
+    SpectraListInMenu
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
 
     return {
-      analysisType: ANALYZE_TYPE.BETA_GAMMA // 分析类型
+      analysisType: ANALYZE_TYPE.BETA_GAMMA, // 分析类型
+      spectraType: 'Sample Data',
+      spectraVisible: false,
+
+      spectraList: [
+        { id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
+        { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
+      ]
     }
   },
   methods: {
+    // 从数据库加载
     handleLoadFromDb() {
       console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
+    // 从文件加载
     handleLoadFromFile() {
       console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
+    // 清理全部
+    handleCleanAll() {
+      console.log('%c [ handleCleanAll ]-118', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
     // peak info 点击左右方向
     handlePeakInfoChange(direction) {
       this.$refs.gammaAnalysisRef.moveMarkLine(direction)
@@ -125,12 +149,46 @@ export default {
           title: 'SAMPLE',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
+              type: 'a-menu',
+              children: [
+                {
+                  type: 'a-menu-item',
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             },
             {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-divider',
+              attrs: {
+                style: {
+                  marginTop: '5px',
+                  marginBottom: '5px',
+                  display: this.spectraList.length ? '' : 'none'
+                }
+              }
+            },
+            {
+              type: 'SpectraListInMenu',
+              attrs: {
+                list: this.spectraList
+              },
+              on: {
+                change: event => {
+                  console.log('%c [ event ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', event)
+                  console.log('%c [  ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', this)
+                }
+              }
             }
           ]
         },
@@ -138,12 +196,21 @@ export default {
           title: 'SAVE',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -151,12 +218,21 @@ export default {
           title: 'ANALYZE',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -164,12 +240,21 @@ export default {
           title: 'CALIBRATION',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -177,12 +262,21 @@ export default {
           title: 'NUCLIDELIBRARY',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -190,12 +284,21 @@ export default {
           title: 'COMMENTS',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -203,12 +306,21 @@ export default {
           title: 'REPORTS',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -216,12 +328,21 @@ export default {
           title: 'LOG',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -229,12 +350,21 @@ export default {
           title: 'HELP',
           children: [
             {
-              title: 'Load From DB',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         }
@@ -343,3 +473,36 @@ export default {
   // 主体部分结束
 }
 </style>
+<style lang="less">
+.spectrum-analysis-operators-dropdown-overlay {
+  background-color: #03353f;
+  .ant-menu {
+    background: transparent;
+    padding: 0;
+    position: relative;
+    border-right: 0;
+
+    &-item {
+      color: #fff;
+      font-family: Arial;
+      border: 0;
+      background-color: transparent !important;
+      padding: 4px 14px;
+      height: 30px;
+      line-height: 22px;
+      &:hover {
+        background-color: #055565 !important;
+      }
+      &-selected {
+        font-weight: normal;
+      }
+      &-disabled {
+        color: #476d74 !important;
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+}
+</style>

From e1a2e89c2bba99f6b12ad0d41adc9622f8965ed2 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 3 Jul 2023 19:38:12 +0800
Subject: [PATCH 03/15] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E8=8F=9C=E5=8D=95=E5=92=8C=E4=BA=8B=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0Load=20From=20File=20=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=8F=8A=E5=85=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LoadFromDBModal.vue            |  30 +++
 .../LoadFromFileModal/FtpFileModal.vue        |  76 ++++++
 .../components/LoadFromFileModal/Index.vue    | 156 +++++++++++
 .../ButtonWithSwitchIcon.vue                  |   0
 .../DetailedInfomation.vue                    |   0
 .../GraphAssistance.vue                       |   0
 .../NuclearLibrary.vue                        |   0
 .../PopOverWithIcon.vue                       |   0
 .../QcFlags.vue                               |   0
 .../Spectra.vue                               |   0
 src/views/spectrumAnalysis/index.vue          | 252 +++++++++++++-----
 11 files changed, 442 insertions(+), 72 deletions(-)
 create mode 100644 src/views/spectrumAnalysis/components/LoadFromDBModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/ButtonWithSwitchIcon.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/DetailedInfomation.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/GraphAssistance.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/NuclearLibrary.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/PopOverWithIcon.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/QcFlags.vue (100%)
 rename src/views/spectrumAnalysis/components/{sub-operators => SubOperators}/Spectra.vue (100%)

diff --git a/src/views/spectrumAnalysis/components/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/LoadFromDBModal.vue
new file mode 100644
index 0000000..6b00998
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/LoadFromDBModal.vue
@@ -0,0 +1,30 @@
+<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/FtpFileModal.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
new file mode 100644
index 0000000..17f3bbf
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
@@ -0,0 +1,76 @@
+<template>
+  <a-modal v-model="visible" title="Select File" :footer="null">
+    <a-table :data-source="list" :columns="columns" :loading="loading" :pagination="false">
+      <template slot="operator" slot-scope="record">
+        <a-icon type="check" style="cursor: pointer;" @click="handleSelect(record)"></a-icon>
+      </template>
+    </a-table>
+  </a-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'File Name',
+    dataIndex: 'fileName',
+    ellipsis: true
+  },
+  {
+    title: 'Action',
+    width: 80,
+    align: 'center',
+    scopedSlots: {
+      customRender: 'operator'
+    }
+  }
+]
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      loading: false,
+      list: []
+    }
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const res = await ''
+        console.log('%c [ res ]-13', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+        this.loading = false
+        this.list = [{ fileName: '文件1' }, { fileName: '文件2' }]
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 选中
+    handleSelect(fileInfo) {
+        console.log('%c [  ]-56', 'font-size:13px; background:pink; color:#bf2c9f;', fileInfo)
+        this.$emit('select', fileInfo)
+        this.visible = false
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        if (this.value) {
+          this.getList()
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
new file mode 100644
index 0000000..f4d264e
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
@@ -0,0 +1,156 @@
+<template>
+  <a-modal v-model="visible" :width="1400" title="Load Data From File">
+    <a-table :data-source="list" :columns="columns" :pagination="false">
+      <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>
+    <!-- 底部按钮结束 -->
+
+    <ftp-file-modal v-model="ftpFileModalVisible" @select="handleSelect" />
+  </a-modal>
+</template>
+
+<script>
+import FtpFileModal from './FtpFileModal.vue'
+export default {
+  components: { FtpFileModal },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      list: this.getInitialList(),
+      ftpFileModalVisible: false
+    }
+  },
+  methods: {
+    getInitialList() {
+      return new Array(10).fill(0).map(() => ({
+        sampleData: '',
+        gasBkData: '',
+        detBkData: '',
+        qcData: ''
+      }))
+    },
+
+    /**
+     * 从ftp中选择文件
+     * @param rowData 选中的行的数据
+     * @param { string } dataKey 选中的数据的那一列的key
+     */
+    selectFileFromFtp(rowData, dataKey) {
+      this.currRowData = rowData
+      this.currDataKey = dataKey
+      this.ftpFileModalVisible = true
+    },
+
+    handleSelect(fileInfo) {
+      this.currRowData[this.currDataKey] = fileInfo.fileName
+    },
+
+    handleReset() {
+      this.list = this.getInitialList()
+    },
+
+    handleLoad() {},
+
+    handleCancel() {}
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    columns() {
+      return [
+        {
+          title: 'SampleData',
+          dataIndex: 'sampleData',
+          customCell: record => {
+            return {
+              on: {
+                click: () => {
+                  this.selectFileFromFtp(record, 'sampleData')
+                }
+              }
+            }
+          }
+        },
+        {
+          title: 'GasBkData',
+          dataIndex: 'gasBkData',
+          customCell: record => {
+            return {
+              on: {
+                click: () => {
+                  this.selectFileFromFtp(record, 'gasBkData')
+                }
+              }
+            }
+          }
+        },
+        {
+          title: 'DetBkData',
+          dataIndex: 'detBkData',
+          customCell: record => {
+            return {
+              on: {
+                click: () => {
+                  this.selectFileFromFtp(record, 'detBkData')
+                }
+              }
+            }
+          }
+        },
+        {
+          title: 'QCData',
+          dataIndex: 'qcData',
+          customCell: record => {
+            return {
+              on: {
+                click: () => {
+                  this.selectFileFromFtp(record, 'qcData')
+                }
+              }
+            }
+          }
+        },
+        {
+          title: 'Status',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'status'
+          }
+        }
+      ]
+    }
+  }
+}
+</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/sub-operators/ButtonWithSwitchIcon.vue b/src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/ButtonWithSwitchIcon.vue
rename to src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue b/src/views/spectrumAnalysis/components/SubOperators/DetailedInfomation.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/DetailedInfomation.vue
rename to src/views/spectrumAnalysis/components/SubOperators/DetailedInfomation.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue b/src/views/spectrumAnalysis/components/SubOperators/GraphAssistance.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/GraphAssistance.vue
rename to src/views/spectrumAnalysis/components/SubOperators/GraphAssistance.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue b/src/views/spectrumAnalysis/components/SubOperators/NuclearLibrary.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/NuclearLibrary.vue
rename to src/views/spectrumAnalysis/components/SubOperators/NuclearLibrary.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue b/src/views/spectrumAnalysis/components/SubOperators/PopOverWithIcon.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue
rename to src/views/spectrumAnalysis/components/SubOperators/PopOverWithIcon.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue b/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/QcFlags.vue
rename to src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
diff --git a/src/views/spectrumAnalysis/components/sub-operators/Spectra.vue b/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue
similarity index 100%
rename from src/views/spectrumAnalysis/components/sub-operators/Spectra.vue
rename to src/views/spectrumAnalysis/components/SubOperators/Spectra.vue
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 55af364..6f0fc1f 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -24,7 +24,7 @@
     <!-- 顶部操作栏结束 -->
 
     <!-- 二级交互栏 -->
-    <div class="spectrum-analysis-sub-operators">
+    <div class="spectrum-analysis-SubOperators">
       <pop-over-with-icon placement="bottomLeft">
         Detailed-Information
         <detailed-infomation slot="content" />
@@ -70,19 +70,29 @@
       <resize-observer @notify="handleResize" />
     </div>
     <!-- 频谱分析部分结束 -->
+
+    <!-- 从数据库加载开始 -->
+    <load-from-db-modal v-model="loadFromDbModalVisible" />
+    <!-- 从数据库加载结束 -->
+
+    <!-- 从文件加载开始 -->
+    <load-from-file-modal v-model="loadFromFileModalVisible" />
+    <!-- 从文件加载结束 -->
   </div>
 </template>
 <script>
-import ButtonWithSwitchIcon from './components/sub-operators/ButtonWithSwitchIcon.vue'
-import DetailedInfomation from './components/sub-operators/DetailedInfomation.vue'
-import GraphAssistance from './components/sub-operators/GraphAssistance.vue'
-import NuclearLibrary from './components/sub-operators/NuclearLibrary.vue'
-import PopOverWithIcon from './components/sub-operators/PopOverWithIcon.vue'
-import QcFlags from './components/sub-operators/QcFlags.vue'
+import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
+import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
+import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
+import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
+import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
+import QcFlags from './components/SubOperators/QcFlags.vue'
 import GammaAnalysis from './gamma-analysis.vue'
 import BetaGammaAnalysis from './beta-gamma-analysis.vue'
-import Spectra from './components/sub-operators/Spectra.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/Index.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -100,7 +110,9 @@ export default {
     DetailedInfomation,
     NuclearLibrary,
     Spectra,
-    SpectraListInMenu
+    SpectraListInMenu,
+    LoadFromDbModal,
+    LoadFromFileModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -113,23 +125,120 @@ export default {
       spectraList: [
         { id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
         { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
-      ]
+      ],
+
+      loadFromDbModalVisible: false,
+      loadFromFileModalVisible: false
     }
   },
   methods: {
     // 从数据库加载
     handleLoadFromDb() {
-      console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.loadFromDbModalVisible = true
     },
 
     // 从文件加载
     handleLoadFromFile() {
-      console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.loadFromFileModalVisible = true
     },
 
     // 清理全部
     handleCleanAll() {
-      console.log('%c [ handleCleanAll ]-118', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.spectraList = []
+    },
+
+    // 保存结果到文件
+    saveResultsToFile() {
+      console.log('%c [ saveResultsToFile ]-152', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 保存结果到数据库
+    saveResultsToDB() {
+      console.log('%c [ saveResultsToDB ]-157', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 将谱列表中所有谱数据均以IMS2.0格式保存为PHD文件
+    savePHDToFile() {
+      console.log('%c [ savePHDToFile ]-162', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 执行β-γ符合谱分析流程，对当前谱数据进行再分析
+    handleAnalyzeCurrSample() {
+      console.log('%c [ handleAnalyzeCurrSample ]-152', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 对谱列表中所有谱数据进行再分析
+    handleAnalyzeAllSample() {
+      console.log('%c [ handleAnalyzeAllSample ]-156', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 弹出能量刻度界面
+    handleEnergy() {
+      console.log('%c [ handleEnergy ]-163', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 弹出分辨率刻度界面
+    handleResolution() {
+      console.log('%c [ handleResolution ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 弹出分辨率刻度界面
+    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;')
+    },
+
+    handleConfigUserLib() {
+      console.log('%c [ handleConfigUserLib ]-182', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 查看自动处理报告
+    handleViewARR() {
+      console.log('%c [ handleViewARR ]-186', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 查看交互分析报告
+    handleViewRRR() {
+      console.log('%c [ handleViewRRR ]-192', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 显示接收到的原始谱文件
+    handleViewSpectrum() {
+      console.log('%c [ handleViewSpectrum ]-198', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 可浏览原始谱中台站操作员对样品采集和测量过程的注释信息；可以浏览分析人员对分析过程的注释信息
+    handleViewComments() {
+      console.log('%c [ viewComments ]-162', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 可添加能谱分析注释
+    handleAddComments() {
+      console.log('%c [ handleAddComments ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 查看自动处理日志
+    handleAutoAnalysisLog() {
+      console.log('%c [ handleAutoAnalysisLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 查看交互分析日志
+    handleGammaViewerLog() {
+      console.log('%c [ handleGammaViewerLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 查看软件操作帮助文档
+    handleHelp() {
+      console.log('%c [ handleHelp ]-221', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
+    // 设置软件中主界面和交互分析界面中各曲线的颜色
+    handleLineColorConfig() {
+      console.log('%c [ handleLineColorConfig ]-225', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
     // peak info 点击左右方向
@@ -199,16 +308,19 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Save Results to File',
+                  handler: this.saveResultsToFile
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
+                  type: 'a-menu-item',
+                  title: 'Save Results to DB',
+                  handler: this.saveResultsToDB
                 },
                 {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Save PHD to File',
+                  handler: this.savePHDToFile
                 }
               ]
             }
@@ -221,16 +333,14 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Analyze Current Sample',
+                  handler: this.handleAnalyzeCurrSample
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
-                },
-                {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Analyze All Sample',
+                  handler: this.handleAnalyzeAllSample
                 }
               ]
             }
@@ -243,16 +353,19 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Energy',
+                  handler: this.handleEnergy
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
+                  type: 'a-menu-item',
+                  title: 'Resolution',
+                  handler: this.handleResolution
                 },
                 {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Efficiency',
+                  handler: this.handleEfficiency
                 }
               ]
             }
@@ -265,16 +378,14 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Nuclide Library',
+                  handler: this.handleNuclideLib
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
-                },
-                {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Config User Library',
+                  handler: this.handleConfigUserLib
                 }
               ]
             }
@@ -287,16 +398,14 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'View Comments',
+                  handler: this.handleViewComments
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
-                },
-                {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Add Comments',
+                  handler: this.handleAddComments
                 }
               ]
             }
@@ -309,16 +418,19 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'View ARR',
+                  handler: this.handleViewARR
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
+                  type: 'a-menu-item',
+                  title: 'View RRR',
+                  handler: this.handleViewRRR
                 },
                 {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'View Spectrum',
+                  handler: this.handleViewSpectrum
                 }
               ]
             }
@@ -331,16 +443,14 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Automatic Analysis Log',
+                  handler: this.handleAutoAnalysisLog
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
-                },
-                {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'GammaViewer Log',
+                  handler: this.handleGammaViewerLog
                 }
               ]
             }
@@ -353,16 +463,14 @@ export default {
               type: 'a-menu',
               children: [
                 {
-                  title: 'Load From DB',
-                  handler: this.handleLoadFromDb
+                  type: 'a-menu-item',
+                  title: 'Help',
+                  handler: this.handleHelp
                 },
                 {
-                  title: 'Load From File',
-                  handler: this.handleLoadFromFile
-                },
-                {
-                  title: 'Clean All',
-                  handler: this.handleCleanAll
+                  type: 'a-menu-item',
+                  title: 'Line Color Config',
+                  handler: this.handleLineColorConfig
                 }
               ]
             }
@@ -428,7 +536,7 @@ export default {
   // 顶部操作栏结束
 
   // 二级操作栏开始
-  &-sub-operators {
+  &-SubOperators {
     flex-shrink: 0;
     margin-top: 15px;
     display: flex;

From 22fa4c54b26a37266706d944c59a3945291ee1d1 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Tue, 4 Jul 2023 19:46:38 +0800
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B02D=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8=E6=97=B6=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=9B=9B=E4=B8=AA=E5=9B=BE=E8=A1=A8=E8=B7=9F=E7=9D=80?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=8C=E5=AE=9E=E7=8E=B02D=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E7=9A=84=E6=8E=A7=E5=88=B6=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E5=AE=9E=E7=8E=B0=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=9B=9B=E4=B8=AA=E5=9B=BE=E8=A1=A8=E7=9A=84=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E6=97=B6=E6=98=BE=E7=A4=BA=E7=AB=96=E7=BA=BF?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomChart/index.vue          |   17 +
 src/utils/chartHelper.js                      |   20 +
 .../spectrumAnalysis/beta-gamma-analysis.vue  |   29 +-
 .../components/BetaGammaSpectrumChart.vue     |  115 +-
 .../components/ColorPalette.vue               |  132 +
 .../components/LoadFromFileModal.vue          |  128 +
 .../LoadFromFileModal/FtpFileModal.vue        |   76 -
 .../components/LoadFromFileModal/Index.vue    |  156 -
 .../components/SpectrumLineChart.vue          |   46 +-
 src/views/spectrumAnalysis/data.json          | 4195 +++++++++++++++++
 src/views/spectrumAnalysis/index.vue          |    2 +-
 11 files changed, 4654 insertions(+), 262 deletions(-)
 create mode 100644 src/utils/chartHelper.js
 create mode 100644 src/views/spectrumAnalysis/components/ColorPalette.vue
 create mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal.vue
 delete mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
 delete mode 100644 src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
 create mode 100644 src/views/spectrumAnalysis/data.json

diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index f1157bc..d12f248 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -20,10 +20,27 @@ export default {
   mounted() {
     this.chart = echarts.init(this.$refs.containerRef)
     this.chart.setOption(this.option)
+    this.initEventListener()
   },
   methods: {
+    initEventListener() {
+      const zr = this.getZRender()
+      zr.on('mousemove', (params) => {
+        this.$emit('zr:mousemove', params)
+      })
+    },
+
     resize() {
       this.chart && this.chart.resize()
+    },
+
+    // 获取echart实例
+    getChartInstance() {
+      return this.chart
+    },
+
+    getZRender() {
+      return this.chart.getZr()
     }
   },
   watch : {
diff --git a/src/utils/chartHelper.js b/src/utils/chartHelper.js
new file mode 100644
index 0000000..35ee96b
--- /dev/null
+++ b/src/utils/chartHelper.js
@@ -0,0 +1,20 @@
+/**
+ * 根据位置获取这个点在图表的哪个轴线上
+ * @param offsetX
+ * @param offsetY
+ */
+export function getXAxisAndYAxisByPosition(chart, offsetX, offsetY, seriesIndex = 0) {
+    const pointInPixel = [offsetX, offsetY]
+    if (
+        chart.containPixel(
+            {
+                seriesIndex: 0
+            },
+            pointInPixel
+        )
+    ) {
+        const [xAxis, yAxis] = chart.convertFromPixel({ seriesIndex }, pointInPixel)
+        return [xAxis, yAxis]
+    }
+    return null
+}
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 93040f0..7356775 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -5,7 +5,7 @@
         <template slot="title">
           Beta-Gamma Spectrum: Sample
         </template>
-        <beta-gamma-spectrum-chart ref="scatterChartRef" />
+        <beta-gamma-spectrum-chart ref="betaGammaChartRef" :data="twoDData" @positionChange="handlePositionChange" />
       </beta-gamma-chart-container>
     </div>
     <div class="beta-and-gamma-spectrum">
@@ -64,6 +64,9 @@ import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
 import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.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 },
   data() {
@@ -97,16 +100,36 @@ export default {
           uncertainty: '+/-0.01988',
           mdc: '0.03464'
         }
-      ]
+      ],
+      twoDData: {}
     }
   },
+  created() {
+    this.getData()
+  },
   methods: {
     resize() {
-      this.$refs.scatterChartRef && this.$refs.scatterChartRef.resize()
+      this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
       this.$refs.lineChart1Ref && this.$refs.lineChart1Ref.resize()
       this.$refs.lineChart2Ref && this.$refs.lineChart2Ref.resize()
       this.$refs.lineChart3Ref && this.$refs.lineChart3Ref.resize()
       this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
+    },
+
+    async getData() {
+      await 0
+      this.twoDData = twoDData
+    },
+
+    // 鼠标在左侧2d图表上移动时
+    handlePositionChange([xAxis, yAxis]) {
+      // Gamma Spectrum，根据bata-gamma的gamma channel的值（y轴）进行定位
+      this.$refs.lineChart1Ref.setLinePosition(yAxis)
+      this.$refs.lineChart2Ref.setLinePosition(yAxis)
+
+      // Beta Spectrum，根据bata-gamma的bata channel的值（x轴）进行定位
+      this.$refs.lineChart3Ref.setLinePosition(xAxis)
+      this.$refs.lineChart4Ref.setLinePosition(xAxis)
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 46c4bf1..5e85fb3 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -6,15 +6,18 @@
         :key="item"
         :class="active == index ? 'active' : ''"
         @click="handleChange(index)"
-        >{{ item }}</span
       >
+        {{ item }}
+      </span>
+      <span @click="handleUnzoom">Unzoom</span>
     </div>
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表 -->
       <div class="_2d-chart" v-if="active == 0">
-        <custom-chart ref="chartRef" :option="twoDOption" />
+        <custom-chart ref="chartRef" :option="twoDOption" @zr:mousemove="handleMouseMove" />
         <div class="bar">
-          <div>256</div>
+          <color-palette v-model="currCount" :maxValue="4" />
+          <div>{{ currCount + 1 }}</div>
           <div class="bar-main"></div>
           <div>0</div>
         </div>
@@ -34,7 +37,10 @@
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
 import Custom3DChart from '@/components/Custom3DChart/index.vue'
-const buttons = ['2D', '3D Surface', '3D Scatter', 'Unzoom']
+import ColorPalette from './ColorPalette.vue'
+import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
+
+const buttons = ['2D', '3D Surface', '3D Scatter']
 
 // 2D 配置
 const twoDOption = {
@@ -45,8 +51,11 @@ const twoDOption = {
     bottom: 45
   },
   tooltip: {
-    trigger: 'axis',
-    showContent: false,
+    trigger: 'item',
+    formatter: params => {
+      const [b, g, c] = params.value
+      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+    },
     axisPointer: {
       animation: false,
       type: 'cross',
@@ -105,21 +114,16 @@ const twoDOption = {
     max: 256,
     interval: 64
   },
-  series: [
-    {
-      xAxisIndex: 0,
-      yAxisIndex: 0,
-      type: 'scatter',
-      symbolSize: 2.5,
-      itemStyle: {
-        color: '#fff'
-      },
-      data: new Array(1256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
-    },
-    {
-      type: 'line'
+  series: {
+    xAxisIndex: 0,
+    yAxisIndex: 0,
+    type: 'scatter',
+    symbolSize: 5,
+    data: [],
+    itemStyle: {
+      color: '#fff'
     }
-  ]
+  }
 }
 
 //3D Surface 配置
@@ -255,28 +259,93 @@ const threeDScatterOption = {
 }
 
 export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   components: {
     CustomChart,
-    Custom3DChart
+    Custom3DChart,
+    ColorPalette
   },
   data() {
     this.buttons = buttons
     return {
-      active: 1,
+      active: 0,
+
+      maxCount: 15, // count的最大值
+      currCount: 15,
+
       twoDOption,
       threeDSurfaceOption,
       threeDScatterOption
     }
   },
+
   methods: {
+    // 点击改变Beta-Gamma Spectrum: Sample图表类型
     handleChange(index) {
       this.active = index
     },
 
+    // 点击unzoom
+    handleUnzoom() {
+      console.log('%c [ handleUnzoom ]-309', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
     resize() {
       this.$refs.chartRef && this.$refs.chartRef.resize()
       this.$refs._3dSurfaceRef && this.$refs._3dSurfaceRef.resize()
       this.$refs._3dScannerRef && this.$refs._3dScannerRef.resize()
+    },
+
+    handleMouseMove(param) {
+      const { offsetX, offsetY } = param
+      const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
+      this.$emit('positionChange', point ? [point[0].toFixed(), point[1].toFixed()] : [null, null])
+    },
+
+    // 颜色插值
+    interpolateColor(color1, color2, percentage) {
+      const r = color1.r + (color2.r - color1.r) * percentage
+      const g = color1.g + (color2.g - color1.g) * percentage
+      const b = color1.b + (color2.b - color1.b) * percentage
+      return { r, g, b }
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        const data = []
+        Object.entries(newVal).forEach(([_, v]) => {
+          v.forEach(({ b, g, c }) => {
+            data.push({
+              value: [b, g, c]
+            })
+          })
+        })
+        this.twoDOption.series.data = data
+      },
+      immediate: true
+    },
+
+    currCount: {
+      handler(val) {
+        if (val <= this.maxCount) {
+          const { r, g, b } = this.interpolateColor(
+            { r: 255, g: 0, b: 0 },
+            { r: 255, g: 255, b: 255 },
+            val / this.maxCount
+          )
+
+          this.twoDOption.series.itemStyle.color = `rgb(${r}, ${g}, ${b})`
+        } else {
+          this.twoDOption.series.itemStyle.color = '#fff'
+        }
+      },
+      immediate: true
     }
   }
 }
@@ -338,7 +407,7 @@ export default {
         &-main {
           display: inline-block;
           width: 14px;
-          height: calc(100% - 42px);
+          height: calc(100% - 70px);
           background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
         }
       }
diff --git a/src/views/spectrumAnalysis/components/ColorPalette.vue b/src/views/spectrumAnalysis/components/ColorPalette.vue
new file mode 100644
index 0000000..fbaf851
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/ColorPalette.vue
@@ -0,0 +1,132 @@
+<template>
+  <div
+    ref="containerElemRef"
+    class="color-palette"
+    :style="{ width: circleWidth + 'px', height: circleWidth + 'px' }"
+    @click="handleClick"
+  >
+    <span
+      ref="dotElemRef"
+      class="dot"
+      :style="{
+        width: dotWidth + 'px',
+        height: dotWidth + 'px',
+        left: this.dotPosition.x,
+        top: this.dotPosition.y
+      }"
+    ></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: 1
+    },
+    maxValue: {
+      type: Number,
+      default: 0
+    },
+    circleWidth: {
+      type: Number,
+      default: 26
+    },
+    dotWidth: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {
+      dotPosition: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  methods: {
+    handleClick({ offsetX, offsetY }) {
+      const { degree, radian } = this.getDegree([offsetX, offsetY])
+      for (let index = 0; index < this.range; index++) {
+        if (degree >= this.perDegree * index && degree < this.perDegree * (index + 1)) {
+          this.$emit('input', index)
+          break
+        }
+      }
+      this.setDotPosition(radian)
+    },
+
+    setDotPosition(radian) {
+      const circleRadius = this.circleWidth / 2 // 半径
+      const dotRadius = circleRadius - this.dotWidth // 绘制圆点时的半径
+
+      this.dotPosition = {
+        x: circleRadius - dotRadius * Math.sin(radian) - this.dotWidth / 2 + 'px',
+        y: circleRadius + dotRadius * Math.cos(radian) - this.dotWidth / 2 + 'px'
+      }
+    },
+    // 工具方法
+
+    /**
+     * 根据圆心和某个点，计算从圆心到该点的角度
+     */
+    getDegree(point) {
+      // 计算两个点在 x 轴上的差值和在 y 轴上的差值
+      const circleRadius = this.circleWidth / 2 // 半径
+
+      const [pointX, pointY] = point
+      const deltaX = circleRadius - pointX
+      const deltaY = pointY - circleRadius
+      // 使用反正切函数计算角度（弧度）
+      const radian = Math.atan2(deltaX, deltaY)
+      let degree = radian * (180 / Math.PI)
+      if (degree < 0) {
+        degree = 360 + degree
+      }
+      return {
+        radian,
+        degree
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newVal) {
+        const degree = newVal * this.perDegree
+        const radian = (degree * Math.PI) / 180 // 角度转弧度
+
+        this.setDotPosition(radian)
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    range() {
+      return this.maxValue > 50 ? this.maxValue : 50
+    },
+
+    perDegree() {
+      return 360 / this.range
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.color-palette {
+  border-radius: 50%;
+  background-color: #ff5858;
+  margin: 0 auto;
+  position: relative;
+
+  .dot {
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+    background-color: #f00;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal.vue
new file mode 100644
index 0000000..a770e60
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/LoadFromFileModal.vue
@@ -0,0 +1,128 @@
+<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/LoadFromFileModal/FtpFileModal.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
deleted file mode 100644
index 17f3bbf..0000000
--- a/src/views/spectrumAnalysis/components/LoadFromFileModal/FtpFileModal.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <a-modal v-model="visible" title="Select File" :footer="null">
-    <a-table :data-source="list" :columns="columns" :loading="loading" :pagination="false">
-      <template slot="operator" slot-scope="record">
-        <a-icon type="check" style="cursor: pointer;" @click="handleSelect(record)"></a-icon>
-      </template>
-    </a-table>
-  </a-modal>
-</template>
-
-<script>
-const columns = [
-  {
-    title: 'File Name',
-    dataIndex: 'fileName',
-    ellipsis: true
-  },
-  {
-    title: 'Action',
-    width: 80,
-    align: 'center',
-    scopedSlots: {
-      customRender: 'operator'
-    }
-  }
-]
-export default {
-  props: {
-    value: {
-      type: Boolean
-    }
-  },
-  data() {
-    this.columns = columns
-    return {
-      loading: false,
-      list: []
-    }
-  },
-  methods: {
-    async getList() {
-      try {
-        this.loading = true
-        const res = await ''
-        console.log('%c [ res ]-13', 'font-size:13px; background:pink; color:#bf2c9f;', res)
-        this.loading = false
-        this.list = [{ fileName: '文件1' }, { fileName: '文件2' }]
-      } catch (error) {
-        console.error(error)
-      }
-    },
-
-    // 选中
-    handleSelect(fileInfo) {
-        console.log('%c [  ]-56', 'font-size:13px; background:pink; color:#bf2c9f;', fileInfo)
-        this.$emit('select', fileInfo)
-        this.visible = false
-    }
-  },
-  computed: {
-    visible: {
-      get() {
-        if (this.value) {
-          this.getList()
-        }
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style></style>
diff --git a/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue b/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
deleted file mode 100644
index f4d264e..0000000
--- a/src/views/spectrumAnalysis/components/LoadFromFileModal/Index.vue
+++ /dev/null
@@ -1,156 +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="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>
-    <!-- 底部按钮结束 -->
-
-    <ftp-file-modal v-model="ftpFileModalVisible" @select="handleSelect" />
-  </a-modal>
-</template>
-
-<script>
-import FtpFileModal from './FtpFileModal.vue'
-export default {
-  components: { FtpFileModal },
-  props: {
-    value: {
-      type: Boolean
-    }
-  },
-  data() {
-    return {
-      list: this.getInitialList(),
-      ftpFileModalVisible: false
-    }
-  },
-  methods: {
-    getInitialList() {
-      return new Array(10).fill(0).map(() => ({
-        sampleData: '',
-        gasBkData: '',
-        detBkData: '',
-        qcData: ''
-      }))
-    },
-
-    /**
-     * 从ftp中选择文件
-     * @param rowData 选中的行的数据
-     * @param { string } dataKey 选中的数据的那一列的key
-     */
-    selectFileFromFtp(rowData, dataKey) {
-      this.currRowData = rowData
-      this.currDataKey = dataKey
-      this.ftpFileModalVisible = true
-    },
-
-    handleSelect(fileInfo) {
-      this.currRowData[this.currDataKey] = fileInfo.fileName
-    },
-
-    handleReset() {
-      this.list = this.getInitialList()
-    },
-
-    handleLoad() {},
-
-    handleCancel() {}
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    columns() {
-      return [
-        {
-          title: 'SampleData',
-          dataIndex: 'sampleData',
-          customCell: record => {
-            return {
-              on: {
-                click: () => {
-                  this.selectFileFromFtp(record, 'sampleData')
-                }
-              }
-            }
-          }
-        },
-        {
-          title: 'GasBkData',
-          dataIndex: 'gasBkData',
-          customCell: record => {
-            return {
-              on: {
-                click: () => {
-                  this.selectFileFromFtp(record, 'gasBkData')
-                }
-              }
-            }
-          }
-        },
-        {
-          title: 'DetBkData',
-          dataIndex: 'detBkData',
-          customCell: record => {
-            return {
-              on: {
-                click: () => {
-                  this.selectFileFromFtp(record, 'detBkData')
-                }
-              }
-            }
-          }
-        },
-        {
-          title: 'QCData',
-          dataIndex: 'qcData',
-          customCell: record => {
-            return {
-              on: {
-                click: () => {
-                  this.selectFileFromFtp(record, 'qcData')
-                }
-              }
-            }
-          }
-        },
-        {
-          title: 'Status',
-          align: 'center',
-          scopedSlots: {
-            customRender: 'status'
-          }
-        }
-      ]
-    }
-  }
-}
-</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/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index 116ab17..1306411 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="spectrum-line-chart">
-    <div class="title">{{ title + ' Count'}}</div>
-    <custom-chart class="spectrum-line-chart-main" ref="chartRef" :option="option" style="height: 100%"></custom-chart>
+    <div class="title">{{ title + ' Count' }}</div>
+    <custom-chart
+      class="spectrum-line-chart-main"
+      ref="chartRef"
+      :option="option"
+      style="height: 100%"
+      @zr:mousemove="handleMouseMove"
+    ></custom-chart>
   </div>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
 import { cloneDeep } from 'lodash'
+import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
 
 const initialOption = {
   grid: {
@@ -88,7 +95,23 @@ const initialOption = {
     symbol: 'none',
     data: new Array(256)
       .fill(0)
-      .map((_, index) => [index, (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800))])
+      .map((_, index) => [
+        index,
+        Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)
+      ]),
+    markLine: {
+      symbol: 'none',
+      animation: false,
+      label: {
+        show: false
+      },
+      lineStyle: {
+        type: 'solid',
+        color: 'yellow'
+      },
+      silent: true,
+      data: []
+    }
   }
 }
 
@@ -118,6 +141,23 @@ export default {
   methods: {
     resize() {
       this.$refs.chartRef && this.$refs.chartRef.resize()
+    },
+
+    // 设置辅助线位置
+    setLinePosition(xAxis) {
+      setTimeout(() => {
+        if (xAxis) {
+          this.option.series.markLine.data = [{ xAxis }]
+        } else {
+          this.option.series.markLine.data = []
+        }
+      }, 0)
+    },
+
+    handleMouseMove(param) {
+      const { offsetX, offsetY } = param
+      const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
+      this.setLinePosition(point ? point[0].toFixed() : null)
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/data.json b/src/views/spectrumAnalysis/data.json
new file mode 100644
index 0000000..cbb96c9
--- /dev/null
+++ b/src/views/spectrumAnalysis/data.json
@@ -0,0 +1,4195 @@
+{
+    "10-50": [],
+    "50-100": [],
+    "> 100": [],
+    "1-5": [
+        {
+            "b": 7,
+            "g": 2,
+            "c": 2
+        },
+        {
+            "b": 6,
+            "g": 3,
+            "c": 2
+        },
+        {
+            "b": 6,
+            "g": 4,
+            "c": 2
+        },
+        {
+            "b": 8,
+            "g": 4,
+            "c": 2
+        },
+        {
+            "b": 14,
+            "g": 15,
+            "c": 2
+        },
+        {
+            "b": 3,
+            "g": 47,
+            "c": 2
+        },
+        {
+            "b": 19,
+            "g": 51,
+            "c": 2
+        },
+        {
+            "b": 127,
+            "g": 75,
+            "c": 2
+        },
+        {
+            "b": 34,
+            "g": 82,
+            "c": 2
+        },
+        {
+            "b": 23,
+            "g": 83,
+            "c": 2
+        },
+        {
+            "b": 10,
+            "g": 101,
+            "c": 2
+        },
+        {
+            "b": 34,
+            "g": 169,
+            "c": 2
+        }
+    ],
+    "= 1": [
+        {
+            "b": 18,
+            "g": 1,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 1,
+            "c": 1
+        },
+        {
+            "b": 80,
+            "g": 1,
+            "c": 1
+        },
+        {
+            "b": 142,
+            "g": 1,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 2,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 2,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 2,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 30,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 80,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 145,
+            "g": 3,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 4,
+            "c": 1
+        },
+        {
+            "b": 105,
+            "g": 4,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 89,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 118,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 5,
+            "c": 1
+        },
+        {
+            "b": 2,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 28,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 55,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 75,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 117,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 161,
+            "g": 6,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 7,
+            "c": 1
+        },
+        {
+            "b": 165,
+            "g": 7,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 8,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 8,
+            "c": 1
+        },
+        {
+            "b": 111,
+            "g": 8,
+            "c": 1
+        },
+        {
+            "b": 137,
+            "g": 8,
+            "c": 1
+        },
+        {
+            "b": 214,
+            "g": 8,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 9,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 9,
+            "c": 1
+        },
+        {
+            "b": 70,
+            "g": 9,
+            "c": 1
+        },
+        {
+            "b": 132,
+            "g": 9,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 44,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 116,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 172,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 173,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 215,
+            "g": 10,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 99,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 111,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 145,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 161,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 240,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 244,
+            "g": 11,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 12,
+            "c": 1
+        },
+        {
+            "b": 111,
+            "g": 12,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 13,
+            "c": 1
+        },
+        {
+            "b": 38,
+            "g": 13,
+            "c": 1
+        },
+        {
+            "b": 92,
+            "g": 13,
+            "c": 1
+        },
+        {
+            "b": 117,
+            "g": 13,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 14,
+            "c": 1
+        },
+        {
+            "b": 125,
+            "g": 14,
+            "c": 1
+        },
+        {
+            "b": 201,
+            "g": 14,
+            "c": 1
+        },
+        {
+            "b": 233,
+            "g": 14,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 15,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 15,
+            "c": 1
+        },
+        {
+            "b": 97,
+            "g": 15,
+            "c": 1
+        },
+        {
+            "b": 217,
+            "g": 15,
+            "c": 1
+        },
+        {
+            "b": 241,
+            "g": 15,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 16,
+            "c": 1
+        },
+        {
+            "b": 251,
+            "g": 16,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 17,
+            "c": 1
+        },
+        {
+            "b": 166,
+            "g": 17,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 84,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 135,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 139,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 203,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 246,
+            "g": 18,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 19,
+            "c": 1
+        },
+        {
+            "b": 249,
+            "g": 19,
+            "c": 1
+        },
+        {
+            "b": 251,
+            "g": 19,
+            "c": 1
+        },
+        {
+            "b": 2,
+            "g": 20,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 20,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 20,
+            "c": 1
+        },
+        {
+            "b": 86,
+            "g": 20,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 58,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 131,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 144,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 159,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 203,
+            "g": 21,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 109,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 163,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 192,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 235,
+            "g": 22,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 23,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 23,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 23,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 23,
+            "c": 1
+        },
+        {
+            "b": 79,
+            "g": 23,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 24,
+            "c": 1
+        },
+        {
+            "b": 78,
+            "g": 24,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 25,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 25,
+            "c": 1
+        },
+        {
+            "b": 223,
+            "g": 25,
+            "c": 1
+        },
+        {
+            "b": 234,
+            "g": 25,
+            "c": 1
+        },
+        {
+            "b": 2,
+            "g": 26,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 26,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 26,
+            "c": 1
+        },
+        {
+            "b": 136,
+            "g": 26,
+            "c": 1
+        },
+        {
+            "b": 231,
+            "g": 26,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 27,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 27,
+            "c": 1
+        },
+        {
+            "b": 51,
+            "g": 27,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 27,
+            "c": 1
+        },
+        {
+            "b": 98,
+            "g": 27,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 28,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 28,
+            "c": 1
+        },
+        {
+            "b": 110,
+            "g": 28,
+            "c": 1
+        },
+        {
+            "b": 121,
+            "g": 28,
+            "c": 1
+        },
+        {
+            "b": 148,
+            "g": 28,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 29,
+            "c": 1
+        },
+        {
+            "b": 96,
+            "g": 29,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 29,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 29,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 94,
+            "g": 30,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 31,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 31,
+            "c": 1
+        },
+        {
+            "b": 153,
+            "g": 31,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 33,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 127,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 225,
+            "g": 32,
+            "c": 1
+        },
+        {
+            "b": 68,
+            "g": 33,
+            "c": 1
+        },
+        {
+            "b": 74,
+            "g": 33,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 33,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 34,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 34,
+            "c": 1
+        },
+        {
+            "b": 167,
+            "g": 34,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 35,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 35,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 36,
+            "c": 1
+        },
+        {
+            "b": 89,
+            "g": 36,
+            "c": 1
+        },
+        {
+            "b": 143,
+            "g": 36,
+            "c": 1
+        },
+        {
+            "b": 186,
+            "g": 36,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 37,
+            "c": 1
+        },
+        {
+            "b": 48,
+            "g": 37,
+            "c": 1
+        },
+        {
+            "b": 66,
+            "g": 37,
+            "c": 1
+        },
+        {
+            "b": 157,
+            "g": 37,
+            "c": 1
+        },
+        {
+            "b": 221,
+            "g": 38,
+            "c": 1
+        },
+        {
+            "b": 234,
+            "g": 38,
+            "c": 1
+        },
+        {
+            "b": 44,
+            "g": 39,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 27,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 52,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 130,
+            "g": 40,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 41,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 30,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 31,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 42,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 43,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 43,
+            "c": 1
+        },
+        {
+            "b": 97,
+            "g": 43,
+            "c": 1
+        },
+        {
+            "b": 152,
+            "g": 43,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 44,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 44,
+            "c": 1
+        },
+        {
+            "b": 131,
+            "g": 44,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 45,
+            "c": 1
+        },
+        {
+            "b": 235,
+            "g": 45,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 201,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 231,
+            "g": 46,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 28,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 103,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 198,
+            "g": 47,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 48,
+            "c": 1
+        },
+        {
+            "b": 57,
+            "g": 48,
+            "c": 1
+        },
+        {
+            "b": 70,
+            "g": 48,
+            "c": 1
+        },
+        {
+            "b": 228,
+            "g": 48,
+            "c": 1
+        },
+        {
+            "b": 247,
+            "g": 48,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 49,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 49,
+            "c": 1
+        },
+        {
+            "b": 119,
+            "g": 49,
+            "c": 1
+        },
+        {
+            "b": 144,
+            "g": 49,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 50,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 50,
+            "c": 1
+        },
+        {
+            "b": 168,
+            "g": 50,
+            "c": 1
+        },
+        {
+            "b": 206,
+            "g": 50,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 137,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 218,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 225,
+            "g": 51,
+            "c": 1
+        },
+        {
+            "b": 2,
+            "g": 52,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 52,
+            "c": 1
+        },
+        {
+            "b": 30,
+            "g": 52,
+            "c": 1
+        },
+        {
+            "b": 196,
+            "g": 52,
+            "c": 1
+        },
+        {
+            "b": 250,
+            "g": 52,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 53,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 53,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 53,
+            "c": 1
+        },
+        {
+            "b": 66,
+            "g": 53,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 54,
+            "c": 1
+        },
+        {
+            "b": 48,
+            "g": 54,
+            "c": 1
+        },
+        {
+            "b": 55,
+            "g": 54,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 54,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 55,
+            "c": 1
+        },
+        {
+            "b": 44,
+            "g": 55,
+            "c": 1
+        },
+        {
+            "b": 87,
+            "g": 55,
+            "c": 1
+        },
+        {
+            "b": 126,
+            "g": 55,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 56,
+            "c": 1
+        },
+        {
+            "b": 84,
+            "g": 56,
+            "c": 1
+        },
+        {
+            "b": 97,
+            "g": 56,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 43,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 54,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 57,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 163,
+            "g": 57,
+            "c": 1
+        },
+        {
+            "b": 27,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 65,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 87,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 111,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 113,
+            "g": 58,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 59,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 59,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 59,
+            "c": 1
+        },
+        {
+            "b": 169,
+            "g": 59,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 86,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 101,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 119,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 148,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 223,
+            "g": 60,
+            "c": 1
+        },
+        {
+            "b": 27,
+            "g": 61,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 61,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 61,
+            "c": 1
+        },
+        {
+            "b": 43,
+            "g": 61,
+            "c": 1
+        },
+        {
+            "b": 86,
+            "g": 61,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 46,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 157,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 158,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 207,
+            "g": 62,
+            "c": 1
+        },
+        {
+            "b": 56,
+            "g": 63,
+            "c": 1
+        },
+        {
+            "b": 179,
+            "g": 63,
+            "c": 1
+        },
+        {
+            "b": 38,
+            "g": 64,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 64,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 64,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 30,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 54,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 60,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 117,
+            "g": 65,
+            "c": 1
+        },
+        {
+            "b": 82,
+            "g": 66,
+            "c": 1
+        },
+        {
+            "b": 139,
+            "g": 66,
+            "c": 1
+        },
+        {
+            "b": 147,
+            "g": 66,
+            "c": 1
+        },
+        {
+            "b": 159,
+            "g": 66,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 111,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 114,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 166,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 186,
+            "g": 67,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 68,
+            "c": 1
+        },
+        {
+            "b": 87,
+            "g": 68,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 68,
+            "c": 1
+        },
+        {
+            "b": 151,
+            "g": 68,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 69,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 69,
+            "c": 1
+        },
+        {
+            "b": 59,
+            "g": 69,
+            "c": 1
+        },
+        {
+            "b": 83,
+            "g": 69,
+            "c": 1
+        },
+        {
+            "b": 161,
+            "g": 69,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 31,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 34,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 48,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 148,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 202,
+            "g": 70,
+            "c": 1
+        },
+        {
+            "b": 59,
+            "g": 71,
+            "c": 1
+        },
+        {
+            "b": 74,
+            "g": 71,
+            "c": 1
+        },
+        {
+            "b": 103,
+            "g": 71,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 49,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 71,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 74,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 132,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 133,
+            "g": 72,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 44,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 129,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 136,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 157,
+            "g": 73,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 67,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 69,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 109,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 139,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 142,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 146,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 180,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 203,
+            "g": 74,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 52,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 55,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 122,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 155,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 175,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 226,
+            "g": 75,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 134,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 142,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 197,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 203,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 244,
+            "g": 76,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 52,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 60,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 84,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 105,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 128,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 192,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 216,
+            "g": 77,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 53,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 56,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 75,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 132,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 143,
+            "g": 78,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 51,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 96,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 79,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 75,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 104,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 244,
+            "g": 80,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 81,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 81,
+            "c": 1
+        },
+        {
+            "b": 53,
+            "g": 81,
+            "c": 1
+        },
+        {
+            "b": 245,
+            "g": 81,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 82,
+            "c": 1
+        },
+        {
+            "b": 193,
+            "g": 82,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 33,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 34,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 51,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 193,
+            "g": 83,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 18,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 40,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 80,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 141,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 215,
+            "g": 84,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 48,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 63,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 87,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 96,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 85,
+            "c": 1
+        },
+        {
+            "b": 171,
+            "g": 86,
+            "c": 1
+        },
+        {
+            "b": 205,
+            "g": 86,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 87,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 87,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 87,
+            "c": 1
+        },
+        {
+            "b": 147,
+            "g": 87,
+            "c": 1
+        },
+        {
+            "b": 238,
+            "g": 87,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 56,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 194,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 201,
+            "g": 88,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 90,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 95,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 135,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 202,
+            "g": 89,
+            "c": 1
+        },
+        {
+            "b": 241,
+            "g": 90,
+            "c": 1
+        },
+        {
+            "b": 2,
+            "g": 91,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 91,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 91,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 92,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 92,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 92,
+            "c": 1
+        },
+        {
+            "b": 53,
+            "g": 92,
+            "c": 1
+        },
+        {
+            "b": 145,
+            "g": 92,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 18,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 53,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 149,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 152,
+            "g": 93,
+            "c": 1
+        },
+        {
+            "b": 63,
+            "g": 94,
+            "c": 1
+        },
+        {
+            "b": 183,
+            "g": 94,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 56,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 86,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 187,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 190,
+            "g": 95,
+            "c": 1
+        },
+        {
+            "b": 65,
+            "g": 96,
+            "c": 1
+        },
+        {
+            "b": 133,
+            "g": 96,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 97,
+            "c": 1
+        },
+        {
+            "b": 103,
+            "g": 97,
+            "c": 1
+        },
+        {
+            "b": 159,
+            "g": 97,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 98,
+            "c": 1
+        },
+        {
+            "b": 81,
+            "g": 98,
+            "c": 1
+        },
+        {
+            "b": 208,
+            "g": 98,
+            "c": 1
+        },
+        {
+            "b": 180,
+            "g": 99,
+            "c": 1
+        },
+        {
+            "b": 215,
+            "g": 99,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 100,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 100,
+            "c": 1
+        },
+        {
+            "b": 75,
+            "g": 100,
+            "c": 1
+        },
+        {
+            "b": 137,
+            "g": 100,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 135,
+            "g": 101,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 102,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 102,
+            "c": 1
+        },
+        {
+            "b": 28,
+            "g": 102,
+            "c": 1
+        },
+        {
+            "b": 167,
+            "g": 102,
+            "c": 1
+        },
+        {
+            "b": 225,
+            "g": 103,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 104,
+            "c": 1
+        },
+        {
+            "b": 117,
+            "g": 105,
+            "c": 1
+        },
+        {
+            "b": 135,
+            "g": 105,
+            "c": 1
+        },
+        {
+            "b": 168,
+            "g": 105,
+            "c": 1
+        },
+        {
+            "b": 214,
+            "g": 105,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 106,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 106,
+            "c": 1
+        },
+        {
+            "b": 149,
+            "g": 106,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 107,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 107,
+            "c": 1
+        },
+        {
+            "b": 58,
+            "g": 107,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 55,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 210,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 242,
+            "g": 108,
+            "c": 1
+        },
+        {
+            "b": 34,
+            "g": 109,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 109,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 110,
+            "c": 1
+        },
+        {
+            "b": 75,
+            "g": 110,
+            "c": 1
+        },
+        {
+            "b": 244,
+            "g": 110,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 112,
+            "c": 1
+        },
+        {
+            "b": 28,
+            "g": 112,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 112,
+            "c": 1
+        },
+        {
+            "b": 63,
+            "g": 112,
+            "c": 1
+        },
+        {
+            "b": 70,
+            "g": 113,
+            "c": 1
+        },
+        {
+            "b": 189,
+            "g": 113,
+            "c": 1
+        },
+        {
+            "b": 223,
+            "g": 113,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 114,
+            "c": 1
+        },
+        {
+            "b": 91,
+            "g": 114,
+            "c": 1
+        },
+        {
+            "b": 105,
+            "g": 114,
+            "c": 1
+        },
+        {
+            "b": 128,
+            "g": 114,
+            "c": 1
+        },
+        {
+            "b": 65,
+            "g": 115,
+            "c": 1
+        },
+        {
+            "b": 163,
+            "g": 115,
+            "c": 1
+        },
+        {
+            "b": 205,
+            "g": 115,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 116,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 119,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 119,
+            "c": 1
+        },
+        {
+            "b": 88,
+            "g": 119,
+            "c": 1
+        },
+        {
+            "b": 180,
+            "g": 119,
+            "c": 1
+        },
+        {
+            "b": 95,
+            "g": 120,
+            "c": 1
+        },
+        {
+            "b": 109,
+            "g": 120,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 120,
+            "c": 1
+        },
+        {
+            "b": 208,
+            "g": 120,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 121,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 121,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 121,
+            "c": 1
+        },
+        {
+            "b": 44,
+            "g": 122,
+            "c": 1
+        },
+        {
+            "b": 108,
+            "g": 122,
+            "c": 1
+        },
+        {
+            "b": 18,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 57,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 123,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 235,
+            "g": 123,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 124,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 125,
+            "c": 1
+        },
+        {
+            "b": 74,
+            "g": 126,
+            "c": 1
+        },
+        {
+            "b": 146,
+            "g": 126,
+            "c": 1
+        },
+        {
+            "b": 156,
+            "g": 126,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 127,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 127,
+            "c": 1
+        },
+        {
+            "b": 73,
+            "g": 127,
+            "c": 1
+        },
+        {
+            "b": 147,
+            "g": 127,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 128,
+            "c": 1
+        },
+        {
+            "b": 31,
+            "g": 128,
+            "c": 1
+        },
+        {
+            "b": 117,
+            "g": 128,
+            "c": 1
+        },
+        {
+            "b": 126,
+            "g": 128,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 43,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 145,
+            "g": 129,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 131,
+            "c": 1
+        },
+        {
+            "b": 134,
+            "g": 131,
+            "c": 1
+        },
+        {
+            "b": 170,
+            "g": 131,
+            "c": 1
+        },
+        {
+            "b": 191,
+            "g": 131,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 132,
+            "c": 1
+        },
+        {
+            "b": 55,
+            "g": 132,
+            "c": 1
+        },
+        {
+            "b": 131,
+            "g": 132,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 133,
+            "c": 1
+        },
+        {
+            "b": 34,
+            "g": 133,
+            "c": 1
+        },
+        {
+            "b": 42,
+            "g": 133,
+            "c": 1
+        },
+        {
+            "b": 49,
+            "g": 133,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 134,
+            "c": 1
+        },
+        {
+            "b": 60,
+            "g": 134,
+            "c": 1
+        },
+        {
+            "b": 192,
+            "g": 134,
+            "c": 1
+        },
+        {
+            "b": 79,
+            "g": 135,
+            "c": 1
+        },
+        {
+            "b": 173,
+            "g": 135,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 136,
+            "c": 1
+        },
+        {
+            "b": 12,
+            "g": 136,
+            "c": 1
+        },
+        {
+            "b": 46,
+            "g": 136,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 137,
+            "c": 1
+        },
+        {
+            "b": 92,
+            "g": 138,
+            "c": 1
+        },
+        {
+            "b": 130,
+            "g": 138,
+            "c": 1
+        },
+        {
+            "b": 139,
+            "g": 138,
+            "c": 1
+        },
+        {
+            "b": 96,
+            "g": 139,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 140,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 140,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 140,
+            "c": 1
+        },
+        {
+            "b": 207,
+            "g": 140,
+            "c": 1
+        },
+        {
+            "b": 64,
+            "g": 141,
+            "c": 1
+        },
+        {
+            "b": 69,
+            "g": 141,
+            "c": 1
+        },
+        {
+            "b": 124,
+            "g": 141,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 141,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 142,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 143,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 143,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 143,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 143,
+            "c": 1
+        },
+        {
+            "b": 146,
+            "g": 143,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 144,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 144,
+            "c": 1
+        },
+        {
+            "b": 167,
+            "g": 144,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 145,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 145,
+            "c": 1
+        },
+        {
+            "b": 64,
+            "g": 145,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 146,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 148,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 148,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 149,
+            "c": 1
+        },
+        {
+            "b": 30,
+            "g": 149,
+            "c": 1
+        },
+        {
+            "b": 167,
+            "g": 150,
+            "c": 1
+        },
+        {
+            "b": 246,
+            "g": 150,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 151,
+            "c": 1
+        },
+        {
+            "b": 133,
+            "g": 151,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 152,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 152,
+            "c": 1
+        },
+        {
+            "b": 192,
+            "g": 152,
+            "c": 1
+        },
+        {
+            "b": 198,
+            "g": 153,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 154,
+            "c": 1
+        },
+        {
+            "b": 103,
+            "g": 154,
+            "c": 1
+        },
+        {
+            "b": 180,
+            "g": 154,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 155,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 156,
+            "c": 1
+        },
+        {
+            "b": 27,
+            "g": 156,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 157,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 157,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 157,
+            "c": 1
+        },
+        {
+            "b": 128,
+            "g": 157,
+            "c": 1
+        },
+        {
+            "b": 131,
+            "g": 157,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 158,
+            "c": 1
+        },
+        {
+            "b": 49,
+            "g": 159,
+            "c": 1
+        },
+        {
+            "b": 139,
+            "g": 159,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 160,
+            "c": 1
+        },
+        {
+            "b": 8,
+            "g": 161,
+            "c": 1
+        },
+        {
+            "b": 24,
+            "g": 161,
+            "c": 1
+        },
+        {
+            "b": 125,
+            "g": 161,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 162,
+            "c": 1
+        },
+        {
+            "b": 48,
+            "g": 162,
+            "c": 1
+        },
+        {
+            "b": 60,
+            "g": 162,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 163,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 163,
+            "c": 1
+        },
+        {
+            "b": 129,
+            "g": 163,
+            "c": 1
+        },
+        {
+            "b": 134,
+            "g": 164,
+            "c": 1
+        },
+        {
+            "b": 144,
+            "g": 164,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 165,
+            "c": 1
+        },
+        {
+            "b": 15,
+            "g": 165,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 166,
+            "c": 1
+        },
+        {
+            "b": 34,
+            "g": 166,
+            "c": 1
+        },
+        {
+            "b": 86,
+            "g": 166,
+            "c": 1
+        },
+        {
+            "b": 209,
+            "g": 166,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 167,
+            "c": 1
+        },
+        {
+            "b": 29,
+            "g": 167,
+            "c": 1
+        },
+        {
+            "b": 71,
+            "g": 167,
+            "c": 1
+        },
+        {
+            "b": 91,
+            "g": 167,
+            "c": 1
+        },
+        {
+            "b": 13,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 18,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 89,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 121,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 180,
+            "g": 168,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 169,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 170,
+            "c": 1
+        },
+        {
+            "b": 27,
+            "g": 170,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 170,
+            "c": 1
+        },
+        {
+            "b": 152,
+            "g": 170,
+            "c": 1
+        },
+        {
+            "b": 161,
+            "g": 170,
+            "c": 1
+        },
+        {
+            "b": 98,
+            "g": 171,
+            "c": 1
+        },
+        {
+            "b": 124,
+            "g": 171,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 172,
+            "c": 1
+        },
+        {
+            "b": 66,
+            "g": 172,
+            "c": 1
+        },
+        {
+            "b": 71,
+            "g": 172,
+            "c": 1
+        },
+        {
+            "b": 84,
+            "g": 172,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 173,
+            "c": 1
+        },
+        {
+            "b": 164,
+            "g": 173,
+            "c": 1
+        },
+        {
+            "b": 10,
+            "g": 174,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 175,
+            "c": 1
+        },
+        {
+            "b": 57,
+            "g": 175,
+            "c": 1
+        },
+        {
+            "b": 223,
+            "g": 175,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 176,
+            "c": 1
+        },
+        {
+            "b": 99,
+            "g": 176,
+            "c": 1
+        },
+        {
+            "b": 195,
+            "g": 177,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 178,
+            "c": 1
+        },
+        {
+            "b": 127,
+            "g": 178,
+            "c": 1
+        },
+        {
+            "b": 129,
+            "g": 178,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 179,
+            "c": 1
+        },
+        {
+            "b": 246,
+            "g": 179,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 180,
+            "c": 1
+        },
+        {
+            "b": 37,
+            "g": 180,
+            "c": 1
+        },
+        {
+            "b": 66,
+            "g": 180,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 181,
+            "c": 1
+        },
+        {
+            "b": 173,
+            "g": 181,
+            "c": 1
+        },
+        {
+            "b": 25,
+            "g": 182,
+            "c": 1
+        },
+        {
+            "b": 51,
+            "g": 182,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 184,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 185,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 185,
+            "c": 1
+        },
+        {
+            "b": 17,
+            "g": 186,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 186,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 186,
+            "c": 1
+        },
+        {
+            "b": 149,
+            "g": 187,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 188,
+            "c": 1
+        },
+        {
+            "b": 106,
+            "g": 189,
+            "c": 1
+        },
+        {
+            "b": 206,
+            "g": 189,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 190,
+            "c": 1
+        },
+        {
+            "b": 85,
+            "g": 190,
+            "c": 1
+        },
+        {
+            "b": 80,
+            "g": 191,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 192,
+            "c": 1
+        },
+        {
+            "b": 93,
+            "g": 193,
+            "c": 1
+        },
+        {
+            "b": 170,
+            "g": 193,
+            "c": 1
+        },
+        {
+            "b": 31,
+            "g": 194,
+            "c": 1
+        },
+        {
+            "b": 161,
+            "g": 194,
+            "c": 1
+        },
+        {
+            "b": 39,
+            "g": 195,
+            "c": 1
+        },
+        {
+            "b": 179,
+            "g": 195,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 196,
+            "c": 1
+        },
+        {
+            "b": 21,
+            "g": 196,
+            "c": 1
+        },
+        {
+            "b": 125,
+            "g": 198,
+            "c": 1
+        },
+        {
+            "b": 3,
+            "g": 199,
+            "c": 1
+        },
+        {
+            "b": 7,
+            "g": 199,
+            "c": 1
+        },
+        {
+            "b": 245,
+            "g": 199,
+            "c": 1
+        },
+        {
+            "b": 115,
+            "g": 200,
+            "c": 1
+        },
+        {
+            "b": 129,
+            "g": 200,
+            "c": 1
+        },
+        {
+            "b": 77,
+            "g": 201,
+            "c": 1
+        },
+        {
+            "b": 171,
+            "g": 201,
+            "c": 1
+        },
+        {
+            "b": 244,
+            "g": 201,
+            "c": 1
+        },
+        {
+            "b": 19,
+            "g": 202,
+            "c": 1
+        },
+        {
+            "b": 33,
+            "g": 202,
+            "c": 1
+        },
+        {
+            "b": 43,
+            "g": 202,
+            "c": 1
+        },
+        {
+            "b": 166,
+            "g": 202,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 203,
+            "c": 1
+        },
+        {
+            "b": 247,
+            "g": 204,
+            "c": 1
+        },
+        {
+            "b": 251,
+            "g": 204,
+            "c": 1
+        },
+        {
+            "b": 23,
+            "g": 205,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 205,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 208,
+            "c": 1
+        },
+        {
+            "b": 29,
+            "g": 208,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 208,
+            "c": 1
+        },
+        {
+            "b": 4,
+            "g": 209,
+            "c": 1
+        },
+        {
+            "b": 29,
+            "g": 209,
+            "c": 1
+        },
+        {
+            "b": 43,
+            "g": 209,
+            "c": 1
+        },
+        {
+            "b": 56,
+            "g": 209,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 210,
+            "c": 1
+        },
+        {
+            "b": 69,
+            "g": 210,
+            "c": 1
+        },
+        {
+            "b": 140,
+            "g": 210,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 211,
+            "c": 1
+        },
+        {
+            "b": 61,
+            "g": 211,
+            "c": 1
+        },
+        {
+            "b": 128,
+            "g": 211,
+            "c": 1
+        },
+        {
+            "b": 171,
+            "g": 211,
+            "c": 1
+        },
+        {
+            "b": 46,
+            "g": 213,
+            "c": 1
+        },
+        {
+            "b": 76,
+            "g": 213,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 214,
+            "c": 1
+        },
+        {
+            "b": 35,
+            "g": 214,
+            "c": 1
+        },
+        {
+            "b": 41,
+            "g": 214,
+            "c": 1
+        },
+        {
+            "b": 250,
+            "g": 214,
+            "c": 1
+        },
+        {
+            "b": 50,
+            "g": 216,
+            "c": 1
+        },
+        {
+            "b": 11,
+            "g": 217,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 218,
+            "c": 1
+        },
+        {
+            "b": 143,
+            "g": 218,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 219,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 219,
+            "c": 1
+        },
+        {
+            "b": 81,
+            "g": 219,
+            "c": 1
+        },
+        {
+            "b": 22,
+            "g": 221,
+            "c": 1
+        },
+        {
+            "b": 9,
+            "g": 225,
+            "c": 1
+        },
+        {
+            "b": 46,
+            "g": 226,
+            "c": 1
+        },
+        {
+            "b": 14,
+            "g": 227,
+            "c": 1
+        },
+        {
+            "b": 78,
+            "g": 227,
+            "c": 1
+        },
+        {
+            "b": 133,
+            "g": 227,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 228,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 228,
+            "c": 1
+        },
+        {
+            "b": 243,
+            "g": 228,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 229,
+            "c": 1
+        },
+        {
+            "b": 26,
+            "g": 230,
+            "c": 1
+        },
+        {
+            "b": 72,
+            "g": 230,
+            "c": 1
+        },
+        {
+            "b": 193,
+            "g": 230,
+            "c": 1
+        },
+        {
+            "b": 32,
+            "g": 231,
+            "c": 1
+        },
+        {
+            "b": 102,
+            "g": 232,
+            "c": 1
+        },
+        {
+            "b": 89,
+            "g": 233,
+            "c": 1
+        },
+        {
+            "b": 119,
+            "g": 233,
+            "c": 1
+        },
+        {
+            "b": 69,
+            "g": 234,
+            "c": 1
+        },
+        {
+            "b": 47,
+            "g": 235,
+            "c": 1
+        },
+        {
+            "b": 100,
+            "g": 237,
+            "c": 1
+        },
+        {
+            "b": 160,
+            "g": 238,
+            "c": 1
+        },
+        {
+            "b": 183,
+            "g": 239,
+            "c": 1
+        },
+        {
+            "b": 68,
+            "g": 240,
+            "c": 1
+        },
+        {
+            "b": 178,
+            "g": 242,
+            "c": 1
+        },
+        {
+            "b": 16,
+            "g": 243,
+            "c": 1
+        },
+        {
+            "b": 6,
+            "g": 244,
+            "c": 1
+        },
+        {
+            "b": 129,
+            "g": 247,
+            "c": 1
+        },
+        {
+            "b": 45,
+            "g": 248,
+            "c": 1
+        },
+        {
+            "b": 141,
+            "g": 250,
+            "c": 1
+        },
+        {
+            "b": 154,
+            "g": 250,
+            "c": 1
+        },
+        {
+            "b": 165,
+            "g": 250,
+            "c": 1
+        },
+        {
+            "b": 20,
+            "g": 253,
+            "c": 1
+        },
+        {
+            "b": 36,
+            "g": 253,
+            "c": 1
+        },
+        {
+            "b": 167,
+            "g": 254,
+            "c": 1
+        },
+        {
+            "b": 189,
+            "g": 254,
+            "c": 1
+        },
+        {
+            "b": 5,
+            "g": 255,
+            "c": 1
+        },
+        {
+            "b": 62,
+            "g": 255,
+            "c": 1
+        }
+    ],
+    "5-10": []
+}
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 6f0fc1f..373aec2 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -92,7 +92,7 @@ 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/Index.vue'
+import LoadFromFileModal from './components/LoadFromFileModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {

From 42e1000c111c118dc42468196f5cfb870adcd571 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 6 Jul 2023 11:19:04 +0800
Subject: [PATCH 05/15] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=BC=B9=E7=AA=97=E6=8E=A7=E5=88=B6footer?=
 =?UTF-8?q?=E6=97=B6=E7=9A=84=E9=80=BB=E8=BE=91=E9=94=99=E8=AF=AF=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E9=BB=98=E8=AE=A4=E6=98=BE=E7=A4=BA=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E5=92=8C=E5=8F=96=E6=B6=88=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?custom-footer=E6=8F=92=E6=A7=BD=E6=9D=A5=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89footer=EF=BC=8C=E4=BB=A5=E4=BD=BF=E5=85=B6=E6=9B=B4?=
 =?UTF-8?q?=E5=8A=A0=E7=81=B5=E6=B4=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomModal/index.vue | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/CustomModal/index.vue b/src/components/CustomModal/index.vue
index 92d13a6..9e7ac54 100644
--- a/src/components/CustomModal/index.vue
+++ b/src/components/CustomModal/index.vue
@@ -1,10 +1,5 @@
 <template>
-  <a-modal
-    :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')"
-    v-bind="_attrs"
-    v-model="visible"
-    :footer="null"
-  >
+  <a-modal :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')" v-bind="_attrs" v-model="visible">
     <img slot="closeIcon" src="@/assets/images/global/close.png" />
     <div slot="title">
       <div class="custom-modal-title">
@@ -16,10 +11,13 @@
       </div>
     </div>
     <slot></slot>
-    <a-space v-if="showFooter" class="operators" :size="20">
-      <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
-      <a-button type="warn" @click="onCancel">Cancel</a-button>
-    </a-space>
+    <template slot="footer">
+      <slot name="custom-footer"></slot>
+      <a-space v-if="!hasCustomFooter" class="operators" :size="20">
+        <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
+        <a-button type="warn" @click="onCancel">Cancel</a-button>
+      </a-space>
+    </template>
   </a-modal>
 </template>
 <script>
@@ -34,10 +32,6 @@ export default {
     title: {
       type: String
     },
-    showFooter: {
-      type: Boolean,
-      default: true
-    },
     enableFullScreen: {
       type: Boolean,
       default: false
@@ -92,6 +86,11 @@ export default {
         attrs['width'] = '100%'
       }
       return attrs
+    },
+
+    // 是否有自定义的footer
+    hasCustomFooter() {
+      return !!this.$slots['custom-footer']
     }
   }
 }

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 06/15] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0LoadFromDb?=
 =?UTF-8?q?=E3=80=81LoadFromFile=E7=AD=89=E7=AD=89=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9custom-modal=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E7=94=A8=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"
     >

From 0482aebb127960bda0dc97686d2efd543cc265d4 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 6 Jul 2023 19:40:48 +0800
Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=90=84?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=B9=8B=E9=97=B4=E7=9A=84=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomChart/index.vue          |  34 ++--
 .../spectrumAnalysis/beta-gamma-analysis.vue  |  53 +++++-
 .../components/BetaGammaSpectrumChart.vue     |  93 +++++++++-
 .../components/SpectrumLineChart.vue          | 174 +++++++++++++-----
 4 files changed, 291 insertions(+), 63 deletions(-)

diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index d12f248..a785e99 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -3,6 +3,10 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+
+const events = ['brushEnd']
+const zrEvents = ['mousemove', 'mousedown', 'mouseup']
+
 export default {
   props: {
     option: {
@@ -18,43 +22,51 @@ export default {
     return {}
   },
   mounted() {
-    this.chart = echarts.init(this.$refs.containerRef)
-    this.chart.setOption(this.option)
+    this._chart = echarts.init(this.$refs.containerRef)
+    this._chart.setOption(this.option)
     this.initEventListener()
   },
   methods: {
     initEventListener() {
+      events.forEach(eventName => {
+        this._chart.on(eventName, (params) => {
+          this.$emit(eventName, params)
+        })
+      })
+
       const zr = this.getZRender()
-      zr.on('mousemove', (params) => {
-        this.$emit('zr:mousemove', params)
+      zrEvents.forEach(eventName => {
+        zr.on(eventName, params => {
+          this.$emit(`zr:${eventName}`, params)
+        })
       })
     },
 
     resize() {
-      this.chart && this.chart.resize()
+      this._chart && this._chart.resize()
     },
 
     // 获取echart实例
     getChartInstance() {
-      return this.chart
+      return this._chart
     },
 
     getZRender() {
-      return this.chart.getZr()
+      return this._chart.getZr()
     }
   },
-  watch : {
+  watch: {
     option: {
       handler() {
-        if(this.chart) {
-          this.chart.setOption(this.option)
+        if (this._chart) {
+          this._chart.setOption(this.option)
         }
       },
       deep: true
     },
     height() {
       this.$nextTick(() => {
-        this.chart && this.chart.resize()
+        this._chart && this._chart.resize()
       })
     }
   }
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index e80ab8d..34a5ceb 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -5,7 +5,12 @@
         <template slot="title">
           Beta-Gamma Spectrum: Sample
         </template>
-        <beta-gamma-spectrum-chart ref="betaGammaChartRef" :data="twoDData" @positionChange="handlePositionChange" />
+        <beta-gamma-spectrum-chart
+          ref="betaGammaChartRef"
+          :data="twoDData"
+          @positionChange="handlePositionChange"
+          @rangeChange="handleRangeChange"
+        />
       </beta-gamma-chart-container>
     </div>
     <div class="beta-and-gamma-spectrum">
@@ -16,7 +21,7 @@
               <template slot="title">
                 Gamma Spectrum: Original
               </template>
-              <spectrum-line-chart ref="lineChart1Ref" />
+              <spectrum-line-chart ref="lineChart1Ref" @rangeChange="handleLineChartRangeChange($event, 'y')" />
             </beta-gamma-chart-container>
           </div>
           <div class="gamma-spectrum-item">
@@ -24,7 +29,7 @@
               <template slot="title">
                 Gamma Spectrum: Projected
               </template>
-              <spectrum-line-chart ref="lineChart2Ref" />
+              <spectrum-line-chart ref="lineChart2Ref" @rangeChange="handleLineChartRangeChange($event, 'y')" />
             </beta-gamma-chart-container>
           </div>
         </div>
@@ -34,7 +39,12 @@
               <template slot="title">
                 Beta Spectrum: Original
               </template>
-              <spectrum-line-chart ref="lineChart3Ref" title="Beta" color="#00ff1e" />
+              <spectrum-line-chart
+                ref="lineChart3Ref"
+                title="Beta"
+                color="#00ff1e"
+                @rangeChange="handleLineChartRangeChange($event, 'x')"
+              />
             </beta-gamma-chart-container>
           </div>
           <div class="gamma-spectrum-item">
@@ -42,7 +52,12 @@
               <template slot="title">
                 Beta Spectrum: Projected
               </template>
-              <spectrum-line-chart ref="lineChart4Ref" title="Beta" color="#00ff1e" />
+              <spectrum-line-chart
+                ref="lineChart4Ref"
+                title="Beta"
+                color="#00ff1e"
+                @rangeChange="handleLineChartRangeChange($event, 'x')"
+              />
             </beta-gamma-chart-container>
           </div>
         </div>
@@ -142,6 +157,34 @@ export default {
       // Beta Spectrum，根据bata-gamma的bata channel的值（x轴）进行定位
       this.$refs.lineChart3Ref.setLinePosition(xAxis)
       this.$refs.lineChart4Ref.setLinePosition(xAxis)
+    },
+
+    // 鼠标在左侧2d图表上刷选时
+    handleRangeChange([x1, x2, y1, y2]) {
+      this.$refs.lineChart1Ref.setRange(y1, y2)
+      this.$refs.lineChart2Ref.setRange(y1, y2)
+
+      this.$refs.lineChart3Ref.setRange(x1, x2)
+      this.$refs.lineChart4Ref.setRange(x1, x2)
+    },
+
+    /**
+     * 右侧折线图表刷选时
+     * @param {number[]} range 范围
+     * @param {'x'|'y'} type 类型
+     **/
+
+    handleLineChartRangeChange([x1, x2], type) {
+      if (type == 'y') {
+        // 如果是gamma channel变化
+        this.$refs.lineChart1Ref.setRange(x1, x2)
+        this.$refs.lineChart2Ref.setRange(x1, x2)
+      } else if (type == 'x') {
+        this.$refs.lineChart3Ref.setRange(x1, x2)
+        this.$refs.lineChart4Ref.setRange(x1, x2)
+      }
+
+      this.$refs.betaGammaChartRef.setRange(x1, x2, type)
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index d5af401..7386722 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -13,8 +13,14 @@
     </div>
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表 -->
-      <div class="_2d-chart" v-if="active == 0">
-        <custom-chart ref="chartRef" :option="twoDOption" @zr:mousemove="handleMouseMove" />
+      <div class="_2d-chart" v-show="active == 0">
+        <custom-chart
+          ref="chartRef"
+          :option="twoDOption"
+          @zr:mousemove="handleMouseMove"
+          @zr:mousedown="handleMouseDown"
+          @brushEnd="handleBrushEnd"
+        />
         <div class="bar">
           <color-palette v-model="currCount" :maxValue="4" />
           <div>{{ currCount + 1 }}</div>
@@ -123,7 +129,8 @@ const twoDOption = {
     itemStyle: {
       color: '#fff'
     }
-  }
+  },
+  brush: {}
 }
 
 //3D Surface 配置
@@ -284,6 +291,10 @@ export default {
     }
   },
 
+  mounted() {
+    this.twoDOption.brush = { toolbox: [] }
+  },
+
   methods: {
     // 点击改变Beta-Gamma Spectrum: Sample图表类型
     handleChange(index) {
@@ -292,7 +303,12 @@ export default {
 
     // 点击unzoom
     handleUnzoom() {
-      console.log('%c [ handleUnzoom ]-309', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.twoDOption.xAxis.min = 0
+      this.twoDOption.xAxis.max = 256
+      this.twoDOption.yAxis.min = 0
+      this.twoDOption.yAxis.max = 256
+
+      this.emitRangeChange([0, 256, 0, 256])
     },
 
     resize() {
@@ -301,12 +317,81 @@ export default {
       this.$refs._3dScannerRef && this.$refs._3dScannerRef.resize()
     },
 
+    // 鼠标在图表上移动时
     handleMouseMove(param) {
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
       this.$emit('positionChange', point ? [point[0].toFixed(), point[1].toFixed()] : [null, null])
     },
 
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.$refs.chartRef.getChartInstance()
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: 'brush',
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: 'rect'
+        }
+      })
+    },
+
+    // 刷选完毕时
+    handleBrushEnd(param) {
+      const chart = this.$refs.chartRef.getChartInstance()
+      const areas = param.areas[0]
+      if (areas) {
+        const range = areas.range
+        const [[minX, maxX], [minY, maxY]] = range
+
+        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map(num => parseInt(num.toFixed()))
+        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
+
+        const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
+
+        this.twoDOption.xAxis.min = x1
+        this.twoDOption.xAxis.max = x2
+        this.twoDOption.yAxis.min = y1
+        this.twoDOption.yAxis.max = y2
+
+        this.emitRangeChange([x1, x2, y1, y2])
+      }
+
+      // 清理刷选的范围
+      chart.dispatchAction({
+        type: 'brush',
+        areas: []
+      })
+
+      // 改为不可刷选状态
+      chart.dispatchAction({
+        type: 'takeGlobalCursor'
+      })
+    },
+
+    // 通知上层范围改变
+    emitRangeChange(range) {
+      this.$emit('rangeChange', range)
+    },
+
+    /**
+     * 设置范围
+     * @param {number} x1
+     * @param {number} x2
+     * @param {'x' | 'y'} type 要改变哪条轴
+     */
+    setRange(x1, x2, type) {
+      if (type == 'x') {
+        this.twoDOption.xAxis.min = x1
+        this.twoDOption.xAxis.max = x2
+      } else if (type == 'y') {
+        this.twoDOption.yAxis.min = x1
+        this.twoDOption.yAxis.max = x2
+      }
+    },
+
     // 颜色插值
     interpolateColor(color1, color2, percentage) {
       const r = color1.r + (color2.r - color1.r) * percentage
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index 1306411..33d0f2b 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -1,13 +1,25 @@
 <template>
   <div class="spectrum-line-chart">
-    <div class="title">{{ title + ' Count' }}</div>
-    <custom-chart
-      class="spectrum-line-chart-main"
-      ref="chartRef"
-      :option="option"
-      style="height: 100%"
-      @zr:mousemove="handleMouseMove"
-    ></custom-chart>
+    <div class="calculation">
+      <span>Channel: 136</span>
+      <span>Count: 1475</span>
+      <span class="error">Energy: 381.409</span>
+    </div>
+    <div class="chart-container">
+      <div class="left-title">{{ title + ' Count' }}</div>
+      <custom-chart
+        class="spectrum-line-chart-main"
+        ref="chartRef"
+        :option="option"
+        style="height: 100%"
+        @zr:mousemove="handleMouseMove"
+        @zr:mousedown="handleMouseDown"
+        @brushEnd="handleBrushEnd"
+      ></custom-chart>
+    </div>
+    <div class="bottom-title">
+      {{ title + ' Channel' }}
+    </div>
   </div>
 </template>
 
@@ -18,26 +30,9 @@ import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
 
 const initialOption = {
   grid: {
-    top: 25,
-    right: 12,
-    bottom: 40
-  },
-  title: {
-    text: '',
-    left: 'right',
-    top: 0,
-    textStyle: {
-      color: '#ade6ee',
-      fontSize: 12,
-      rich: {
-        a: {
-          padding: [0, 27, 0, 0]
-        },
-        b: {
-          color: '#ff5656'
-        }
-      }
-    }
+    top: 10,
+    right: 15,
+    bottom: 20
   },
   xAxis: {
     min: 0,
@@ -83,6 +78,9 @@ const initialOption = {
         color: 'rgba(119, 181, 213, .2)'
       }
     },
+    axisTick: {
+      show: false
+    },
     axisLabel: {
       color: '#ade6ee'
     }
@@ -112,7 +110,8 @@ const initialOption = {
       silent: true,
       data: []
     }
-  }
+  },
+  brush: {}
 }
 
 export default {
@@ -131,13 +130,15 @@ export default {
   },
   data() {
     const option = cloneDeep(initialOption)
-    option.title.text = `{a|Channel: 136}{a|Count: 1475}{b|Energy:  381.409}`
     option.series.itemStyle.color = this.color
     option.xAxis.name = this.title + ' Channel'
     return {
       option
     }
   },
+  mounted() {
+    this.option.brush = { toolbox: [] }
+  },
   methods: {
     resize() {
       this.$refs.chartRef && this.$refs.chartRef.resize()
@@ -154,10 +155,66 @@ export default {
       }, 0)
     },
 
+    // 设置范围
+    setRange(min, max) {
+      this.option.xAxis.min = min
+      this.option.xAxis.max = max
+    },
+
+    // 鼠标在图表上移动时
     handleMouseMove(param) {
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
       this.setLinePosition(point ? point[0].toFixed() : null)
+    },
+
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.$refs.chartRef.getChartInstance()
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: 'brush',
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: 'lineX'
+        }
+      })
+    },
+
+    // 刷选完毕时
+    handleBrushEnd(param) {
+      const chart = this.$refs.chartRef.getChartInstance()
+
+      const areas = param.areas[0]
+      if (areas) {
+        const range = areas.range
+        const [minX, maxX] = range
+
+        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, 0])
+        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, 0])
+
+        const [x1, x2] = [parseInt(point1[0].toFixed()), parseInt(point2[0].toFixed())] // 根据解析出的数据确定真实的范围
+        this.option.xAxis.min = x1
+        this.option.xAxis.max = x2
+
+        this.emitRangeChange([x1, x2])
+      }
+
+      // 清理刷选的范围
+      chart.dispatchAction({
+        type: 'brush',
+        areas: []
+      })
+
+      // 改为不可刷选状态
+      chart.dispatchAction({
+        type: 'takeGlobalCursor'
+      })
+    },
+
+    emitRangeChange(range) {
+      this.$emit('rangeChange', range)
     }
   }
 }
@@ -165,23 +222,54 @@ export default {
 
 <style lang="less" scoped>
 .spectrum-line-chart {
-  display: flex;
   height: 100%;
 
-  .title {
-    writing-mode: vertical-rl;
-    color: #5b9cba;
-    font-size: 16px;
-    transform: rotate(180deg);
-    text-align: center;
-    user-select: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .calculation {
+    line-height: 10px;
+    text-align: right;
+    font-size: 14px;
+
+    .error {
+      color: #ff5656;
+    }
+
+    span {
+      color: #ade6ee;
+
+      &:not(:last-child) {
+        margin-right: 27px;
+      }
+    }
   }
 
-  &-main {
-    flex: 1;
+  .chart-container {
+    display: flex;
+    margin-top: 7px;
+    margin-bottom: 8px;
+    height: calc(100% - 35px);
+
+    .left-title {
+      writing-mode: vertical-rl;
+      color: #5b9cba;
+      font-size: 14px;
+      transform: rotate(180deg);
+      text-align: center;
+      user-select: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .spectrum-line-chart-main {
+      flex: 1;
+    }
+  }
+
+  .bottom-title {
+    line-height: 10px;
+    font-size: 14px;
+    color: #5b9cba;
+    text-align: center;
   }
 }
 </style>

From f5715a0ad908a32380168130bb3caf4ec9da0017 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 6 Jul 2023 19:41:06 +0800
Subject: [PATCH 08/15] =?UTF-8?q?WIP:=20load=20from=20db=20=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Modals/LoadFromDBModal.vue     | 210 +++++++++++++-----
 1 file changed, 157 insertions(+), 53 deletions(-)

diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index 4c2aa5c..bb5dac3 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -91,30 +91,32 @@ export default {
   mixins: [JeecgListMixin],
   data() {
     this.columns = columns
+    this.disableMixinCreated = true
     return {
       selectedRowKeys: [],
       stationList: [],
       detectorList: [],
       url: {
-        list: '/gardsSampleData/findPage'
+        list: '/spectrumAnalysis/getDBSpectrumList'
       },
-
       isLoadingSample: false // 正在加载样例
     }
   },
-  created() {
-    this.getStationList()
-    this.getDetectorList()
-  },
   methods: {
     loadData(arg) {
+      const params = this.getQueryParams() //查询条件
+      if (!params.menuTypes || !params.menuTypes.length) {
+        this.$message.warn('Please Select MenuTypes First')
+        return
+      }
+
+      params.menuTypes = params.menuTypes.join(',')
+
       //加载数据 若传入参数1则加载第一页的内容
       if (arg === 1) {
         this.ipagination.current = 1
       }
-      this.onClearSelected()
 
-      const params = this.getQueryParams() //查询条件
       if (params.checkboxGroup) {
         params.checkboxGroup.forEach(item => {
           params[item] = true
@@ -122,6 +124,8 @@ export default {
         delete params.checkboxGroup
       }
 
+      this.onClearSelected()
+
       this.loading = true
       getAction(this.url.list, params)
         .then(res => {
@@ -156,11 +160,16 @@ export default {
       this.visible = false
     },
 
-    async getStationList() {
+    async getStationAndDetectorList() {
+      const params = this.getQueryParams() //查询条件
+      if (!params.menuTypes || !params.menuTypes.length) {
+        return
+      }
+      params.menuTypes = params.menuTypes.join(',')
+
       try {
-        const { success, result, message } = await getAction('/gardsStations/findPage', {
-          pageIndex: 1,
-          pageSize: 10000
+        const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
+          menuTypes: []
         })
         if (success) {
           this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
@@ -172,22 +181,6 @@ export default {
       }
     },
 
-    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
     }
@@ -204,14 +197,29 @@ export default {
     formItems() {
       return [
         {
-          label: 'SampleID',
-          type: 'a-input',
-          name: 'sampleId',
+          label: 'MenuType',
+          type: 'custom-select',
+          name: 'menuTypes',
           props: {
-            allowClear: true
+            mode: 'multiple',
+            options: [
+              {
+                label: 'Gamma',
+                value: 'G'
+              },
+              {
+                label: 'Beta',
+                value: 'B'
+              }
+            ]
           },
           style: {
-            width: '20%'
+            width: '16.6%'
+          },
+          on: {
+            change: () => {
+              this.getStationAndDetectorList()
+            }
           }
         },
         {
@@ -231,7 +239,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '18%'
+            width: '16.6%'
           }
         },
         {
@@ -251,13 +259,122 @@ export default {
             allowClear: true
           },
           style: {
-            width: '18%'
+            width: '16.6%'
+          }
+        },
+        {
+          label: 'Sample',
+          type: 'custom-select',
+          name: 'sample',
+          props: {
+            options: [
+              {
+                label: 'P',
+                value: 'P'
+              },
+              {
+                label: 'B',
+                value: 'B'
+              },
+              {
+                label: 'G',
+                value: 'G'
+              }
+            ],
+            allowClear: true
+          },
+          style: {
+            width: '16.6%'
+          }
+        },
+        {
+          label: 'DataType',
+          type: 'custom-select',
+          name: 'dataType',
+          props: {
+            options: [
+              {
+                label: 'S',
+                value: 'S'
+              },
+              {
+                label: 'G',
+                value: 'G'
+              },
+              {
+                label: 'D',
+                value: 'D'
+              },
+              {
+                label: 'Q',
+                value: 'Q'
+              },
+              {
+                label: 'B',
+                value: 'B'
+              },
+              {
+                label: 'C',
+                value: 'C'
+              }
+            ],
+            allowClear: true
+          },
+          style: {
+            width: '16.6%'
+          }
+        },
+        {
+          label: 'Qualifier',
+          type: 'custom-select',
+          name: 'dataType',
+          props: {
+            options: [
+              {
+                label: 'FULL',
+                value: 'FULL'
+              },
+              {
+                label: 'PREL',
+                value: 'PREL'
+              }
+            ],
+            allowClear: true
+          },
+          style: {
+            width: '16.6%'
+          }
+        },
+        {
+          label: 'SampleID',
+          type: 'a-input',
+          name: 'sampleId',
+          props: {
+            allowClear: true
+          },
+          style: {
+            width: '20%'
+          }
+        },
+        {
+          label: '',
+          type: 'a-checkbox-group',
+          name: 'checkboxGroup',
+          props: {
+            options: [
+              { label: 'All User', value: 'allUser' },
+              { label: 'Collect Stop', value: 'collectStop' },
+              { label: 'Acq.Start', value: 'acqDotStart' }
+            ]
+          },
+          style: {
+            width: '315px'
           }
         },
         {
           label: 'From',
           type: 'custom-date-picker',
-          name: 'collectStart',
+          name: 'startDate',
           props: {
             showTime: { format: 'HH:mm' },
             format: 'YYYY-MM-DD HH:mm',
@@ -267,13 +384,13 @@ export default {
             }
           },
           style: {
-            width: '22%'
+            width: '20%'
           }
         },
         {
           label: 'To',
           type: 'custom-date-picker',
-          name: 'collectStop',
+          name: 'endDate',
           props: {
             showTime: { format: 'HH:mm' },
             format: 'YYYY-MM-DD HH:mm',
@@ -284,21 +401,8 @@ export default {
           },
           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'
+            marginRight: '16px',
+            width: '20%'
           }
         }
       ]

From a7248af1b4c94461d8db63be38e1afe6a14a81cf Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Fri, 7 Jul 2023 17:44:20 +0800
Subject: [PATCH 09/15] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5LoadFromDB?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=9B=9B=E5=9B=BE=E8=A1=A8=E5=AE=9E=E6=97=B6=E5=80=BC=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=B7=E9=80=89=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=9F=90?=
 =?UTF-8?q?=E4=BA=9B=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style.less                                |   9 +-
 .../components/BetaGammaSpectrumChart.vue     |  17 +++
 .../components/Modals/LoadFromDBModal.vue     | 137 +++++++++++-------
 .../components/SpectrumLineChart.vue          |  42 +++++-
 4 files changed, 147 insertions(+), 58 deletions(-)

diff --git a/src/style.less b/src/style.less
index a117258..ce41a9e 100644
--- a/src/style.less
+++ b/src/style.less
@@ -18,8 +18,15 @@
 
 @modal-footer-border-color-split: @formInputBorderColor;
 
+@disabled-color: rgba(255, 255, 255, .25);
+@background-color-base: darken(@primary-color, 20);
+@border-color-base: darken(@primary-color, 20);
+
+@text-color: #fff;
+
 .ant-btn:hover,
-.ant-btn:active {
+.ant-btn:active,
+.ant-btn:focus {
   color: #fff !important;
   border-color: transparent;
 }
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 7386722..81670ab 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -19,6 +19,7 @@
           :option="twoDOption"
           @zr:mousemove="handleMouseMove"
           @zr:mousedown="handleMouseDown"
+          @zr:mouseup="handleMouseUp"
           @brushEnd="handleBrushEnd"
         />
         <div class="bar">
@@ -338,6 +339,22 @@ export default {
       })
     },
 
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        // 清理刷选的范围
+        chart.dispatchAction({
+          type: 'brush',
+          areas: []
+        })
+
+        // 改为不可刷选状态
+        chart.dispatchAction({
+          type: 'takeGlobalCursor'
+        })
+      }, 0)
+    },
+
     // 刷选完毕时
     handleBrushEnd(param) {
       const chart = this.$refs.chartRef.getChartInstance()
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index bb5dac3..5192772 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -1,6 +1,11 @@
 <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-modal v-model="visible" :width="1280" title="Load From Database" class="load-from-db-modal">
+    <search-form ref="searchFormRef" :items="formItems" v-model="queryParam">
+      <a-space slot="additional">
+        <a-button @click="handleReset">Reset</a-button>
+        <a-button type="primary" @click="searchQuery">Search</a-button>
+      </a-space>
+    </search-form>
     <custom-table
       size="middle"
       rowKey="sampleId"
@@ -10,12 +15,19 @@
       :loading="loading"
       @change="handleTableChange"
       :selectedRowKeys.sync="selectedRowKeys"
+      :selectionRows.sync="selectionRows"
       :multiple="true"
     >
     </custom-table>
     <!-- 底部操作栏 -->
     <template slot="custom-footer">
-      <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+      <a-space>
+        <a-radio-group v-model="queryParam.dbName">
+          <a-radio value="auto">From Auto DB</a-radio>
+          <a-radio value="man">From Interactive DB</a-radio>
+        </a-radio-group>
+        <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+      </a-space>
     </template>
   </custom-modal>
 </template>
@@ -23,6 +35,7 @@
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { getAction } from '../../../../api/manage'
+import moment from 'moment'
 
 const columns = [
   {
@@ -93,7 +106,17 @@ export default {
     this.columns = columns
     this.disableMixinCreated = true
     return {
+      queryParam: {
+        menuTypes: [],
+        startDate: moment()
+          .add(-7, 'd')
+          .format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+        dbName: 'auto'
+      },
       selectedRowKeys: [],
+      selectionRows: [],
+
       stationList: [],
       detectorList: [],
       url: {
@@ -105,12 +128,23 @@ export default {
   methods: {
     loadData(arg) {
       const params = this.getQueryParams() //查询条件
-      if (!params.menuTypes || !params.menuTypes.length) {
-        this.$message.warn('Please Select MenuTypes First')
+      const { startDate, endDate, menuTypes } = params 
+      if (!menuTypes || !menuTypes.length) {
+        this.$message.warn('Please Select SampleType First')
         return
       }
 
-      params.menuTypes = params.menuTypes.join(',')
+      if(!startDate || !endDate) {
+        this.$message.warn(`'From' Date And 'To' Date Cannot Be Null`)
+        return
+      }
+
+      if(moment(startDate).isAfter(moment(endDate))) {
+        this.$message.warn(`'From' Date Cannot Be Late Than 'To' Date`)
+        return
+      }
+
+      params.menuTypes = menuTypes.join(',')
 
       //加载数据 若传入参数1则加载第一页的内容
       if (arg === 1) {
@@ -153,26 +187,29 @@ export default {
         this.$message.warn('Please Select Databases To Load')
         return
       }
+
+      console.log('%c [  ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectionRows)
       this.isLoadingSample = true
       const res = await ''
       console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+      this.selectedRowKeys = []
       this.isLoadingSample = false
       this.visible = false
     },
 
-    async getStationAndDetectorList() {
-      const params = this.getQueryParams() //查询条件
-      if (!params.menuTypes || !params.menuTypes.length) {
+    // 获取台站和探测器列表
+    async getStationAndDetectorList(value) {
+      if (!value || !value.length) {
         return
       }
-      params.menuTypes = params.menuTypes.join(',')
 
       try {
         const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
-          menuTypes: []
+          menuTypes: value.join(',')
         })
         if (success) {
-          this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
+          this.stationList = result.stationCode.map(item => ({ label: item, value: item }))
+          this.detectorList = result.detectorCode.map(item => ({ label: item, value: item }))
         } else {
           this.$message.error(message)
         }
@@ -181,6 +218,11 @@ export default {
       }
     },
 
+    // 重置搜索栏
+    handleReset() {
+      this.$refs.searchFormRef.$refs.form.resetFields()
+    },
+
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
@@ -197,7 +239,7 @@ export default {
     formItems() {
       return [
         {
-          label: 'MenuType',
+          label: 'SampleType',
           type: 'custom-select',
           name: 'menuTypes',
           props: {
@@ -211,61 +253,51 @@ export default {
                 label: 'Beta',
                 value: 'B'
               }
-            ]
+            ],
+            maxTagCount: 1,
+            maxTagPlaceholder: '...'
           },
           style: {
-            width: '16.6%'
+            width: '23%'
           },
           on: {
-            change: () => {
-              this.getStationAndDetectorList()
+            change: event => {
+              this.getStationAndDetectorList(event)
             }
           }
         },
         {
           label: 'Station',
           type: 'custom-select',
-          name: 'stationId',
+          name: 'stationName',
           props: {
-            options: [
-              {
-                label: 'ALL',
-                value: ''
-              },
-              ...this.stationList
-            ],
+            options: this.stationList,
             showSearch: true,
             filterOption: this.filterOption,
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '16%'
           }
         },
         {
           label: 'Detector',
           type: 'custom-select',
-          name: 'detectorId',
+          name: 'detectorsName',
           props: {
-            options: [
-              {
-                label: 'ALL',
-                value: ''
-              },
-              ...this.detectorList
-            ],
+            options: this.detectorList,
             showSearch: true,
             filterOption: this.filterOption,
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '16%'
           }
         },
         {
           label: 'Sample',
           type: 'custom-select',
-          name: 'sample',
+          name: 'sampleType',
           props: {
             options: [
               {
@@ -284,7 +316,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
@@ -321,13 +353,13 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
           label: 'Qualifier',
           type: 'custom-select',
-          name: 'dataType',
+          name: 'spectralQualifie',
           props: {
             options: [
               {
@@ -342,7 +374,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
@@ -363,8 +395,8 @@ export default {
           props: {
             options: [
               { label: 'All User', value: 'allUser' },
-              { label: 'Collect Stop', value: 'collectStop' },
-              { label: 'Acq.Start', value: 'acqDotStart' }
+              { label: 'Collect Stop', value: 'CollectStop' },
+              { label: 'Acq.Start', value: 'AcqStart' }
             ]
           },
           style: {
@@ -376,15 +408,14 @@ export default {
           type: 'custom-date-picker',
           name: 'startDate',
           props: {
-            showTime: { format: 'HH:mm' },
-            format: 'YYYY-MM-DD HH:mm',
-            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            format: 'YYYY-MM-DD',
+            valueFormat: 'YYYY-MM-DD',
             style: {
               minWidth: 'auto'
             }
           },
           style: {
-            width: '20%'
+            width: '19%'
           }
         },
         {
@@ -392,17 +423,16 @@ export default {
           type: 'custom-date-picker',
           name: 'endDate',
           props: {
-            showTime: { format: 'HH:mm' },
-            format: 'YYYY-MM-DD HH:mm',
-            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            format: 'YYYY-MM-DD',
+            valueFormat: 'YYYY-MM-DD',
             style: {
               minWidth: 'auto'
             }
           },
           style: {
             paddingRight: 0,
-            marginRight: '16px',
-            width: '20%'
+            marginRight: '22px',
+            width: '19%'
           }
         }
       ]
@@ -413,5 +443,10 @@ export default {
 
 <style lang="less" scoped>
 .load-from-db-modal {
+  ::v-deep {
+    .search-btn {
+      display: none;
+    }
+  }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index 33d0f2b..88f7373 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="spectrum-line-chart">
-    <div class="calculation">
-      <span>Channel: 136</span>
-      <span>Count: 1475</span>
-      <span class="error">Energy: 381.409</span>
+    <div class="summary-text">
+      <span>Channel: {{ summary.channel }}</span>
+      <span>Count: {{ summary.count }}</span>
+      <span class="error">Energy: {{ summary.energy }}</span>
     </div>
     <div class="chart-container">
       <div class="left-title">{{ title + ' Count' }}</div>
@@ -14,6 +14,7 @@
         style="height: 100%"
         @zr:mousemove="handleMouseMove"
         @zr:mousedown="handleMouseDown"
+        @zr:mouseup="handleMouseUp"
         @brushEnd="handleBrushEnd"
       ></custom-chart>
     </div>
@@ -133,7 +134,13 @@ export default {
     option.series.itemStyle.color = this.color
     option.xAxis.name = this.title + ' Channel'
     return {
-      option
+      option,
+
+      summary: {
+        channel: 0,
+        count: 0,
+        energy: 0
+      }
     }
   },
   mounted() {
@@ -149,8 +156,13 @@ export default {
       setTimeout(() => {
         if (xAxis) {
           this.option.series.markLine.data = [{ xAxis }]
+          this.summary.channel = xAxis
+          this.summary.count = this.option.series.data[xAxis][1]
         } else {
           this.option.series.markLine.data = []
+          this.summary.channel = 0
+          this.summary.count = 0
+          this.summary.energy = 0
         }
       }, 0)
     },
@@ -182,6 +194,22 @@ export default {
       })
     },
 
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        // 清理刷选的范围
+        chart.dispatchAction({
+          type: 'brush',
+          areas: []
+        })
+
+        // 改为不可刷选状态
+        chart.dispatchAction({
+          type: 'takeGlobalCursor'
+        })
+      }, 0)
+    },
+
     // 刷选完毕时
     handleBrushEnd(param) {
       const chart = this.$refs.chartRef.getChartInstance()
@@ -224,10 +252,11 @@ export default {
 .spectrum-line-chart {
   height: 100%;
 
-  .calculation {
+  .summary-text {
     line-height: 10px;
     text-align: right;
     font-size: 14px;
+    user-select: none;
 
     .error {
       color: #ff5656;
@@ -270,6 +299,7 @@ export default {
     font-size: 14px;
     color: #5b9cba;
     text-align: center;
+    user-select: none;
   }
 }
 </style>

From 3c92cbff86c65307c2cd89f6592968410f9f4af1 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Fri, 7 Jul 2023 17:45:51 +0800
Subject: [PATCH 10/15] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9F=90?=
 =?UTF-8?q?=E4=BA=9B=E9=A1=B5=E9=9D=A2=E7=9A=84=E8=A1=A8=E6=A0=BC=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=AB=98=E5=BA=A6=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/DetectorInfo.vue      | 2 +-
 src/views/system/DictList.vue          | 2 +-
 src/views/system/NewPermissionList.vue | 2 +-
 src/views/system/NuclearFacility.vue   | 2 +-
 src/views/system/stationList.vue       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/system/DetectorInfo.vue b/src/views/system/DetectorInfo.vue
index 213f6cb..766d778 100644
--- a/src/views/system/DetectorInfo.vue
+++ b/src/views/system/DetectorInfo.vue
@@ -29,7 +29,7 @@
         :loading="loading"
         @change="handleTableChange"
         :selectedRowKeys.sync="selectedRowKeys"
-        :scroll="{ y: 'calc(100vh - 365px)' }"
+        :scroll="{ y: 'calc(100vh - 395px)' }"
       >
         <template slot="index" slot-scope="{ index }">
           {{ index + 1 }}
diff --git a/src/views/system/DictList.vue b/src/views/system/DictList.vue
index 6af3e3f..5cc6b62 100644
--- a/src/views/system/DictList.vue
+++ b/src/views/system/DictList.vue
@@ -43,7 +43,7 @@
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        :scroll="{ y: 'calc(100vh - 400px)' }"
+        :scroll="{ y: 'calc(100vh - 402px)' }"
         @change="handleTableChange">
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">
diff --git a/src/views/system/NewPermissionList.vue b/src/views/system/NewPermissionList.vue
index cf265d8..dbb007e 100644
--- a/src/views/system/NewPermissionList.vue
+++ b/src/views/system/NewPermissionList.vue
@@ -21,7 +21,7 @@
         :pagination="false"
         :dataSource="dataSource"
         :loading="loading"
-        :scroll="{ y: 'calc(100vh - 285px)'}"
+        :scroll="{ y: 'calc(100vh - 290px)'}"
         @expand="expandSubmenu"
         :expandedRowKeys="expandedRowKeys"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
diff --git a/src/views/system/NuclearFacility.vue b/src/views/system/NuclearFacility.vue
index c5d8e61..b777c02 100644
--- a/src/views/system/NuclearFacility.vue
+++ b/src/views/system/NuclearFacility.vue
@@ -29,7 +29,7 @@
         :loading="loading"
         @change="handleTableChange"
         :selectedRowKeys.sync="selectedRowKeys"
-        :scroll="{ y: 'calc(100vh - 365px)' }"
+        :scroll="{ y: 'calc(100vh - 370px)' }"
       >
         <template slot="index" slot-scope="{ index }">
           {{ index + 1 }}
diff --git a/src/views/system/stationList.vue b/src/views/system/stationList.vue
index ae43ed9..2a0ecfa 100644
--- a/src/views/system/stationList.vue
+++ b/src/views/system/stationList.vue
@@ -29,7 +29,7 @@
         :loading="loading"
         @change="handleTableChange"
         :selectedRowKeys.sync="selectedRowKeys"
-        :scroll="{ y: 'calc(100vh - 365px)' }"
+        :scroll="{ y: 'calc(100vh - 370px)' }"
       >
         <template slot="index" slot-scope="{ index }">
           {{ index + 1 }}

From 194162804ec5acffed17fd0890f5bc69d07cc7c8 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 10 Jul 2023 09:45:59 +0800
Subject: [PATCH 11/15] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=8C=89=E4=B8=8B=E6=8B=96=E6=8B=BD=E9=80=89=E7=82=B9?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ColorPalette.vue               | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/views/spectrumAnalysis/components/ColorPalette.vue b/src/views/spectrumAnalysis/components/ColorPalette.vue
index fbaf851..80ce3ff 100644
--- a/src/views/spectrumAnalysis/components/ColorPalette.vue
+++ b/src/views/spectrumAnalysis/components/ColorPalette.vue
@@ -4,6 +4,10 @@
     class="color-palette"
     :style="{ width: circleWidth + 'px', height: circleWidth + 'px' }"
     @click="handleClick"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseout="handleMouseOut"
   >
     <span
       ref="dotElemRef"
@@ -43,11 +47,38 @@ export default {
       dotPosition: {
         x: 0,
         y: 0
-      }
+      },
+      isMouseDown: false
     }
   },
   methods: {
     handleClick({ offsetX, offsetY }) {
+      this.setPositionByMouseEvent(offsetX, offsetY)
+    },
+
+    // 鼠标按下
+    handleMouseDown({ offsetX, offsetY }) {
+      this.setPositionByMouseEvent(offsetX, offsetY)
+      this.isMouseDown = true
+    },
+
+    handleMouseMove({ offsetX, offsetY }) {
+      if (this.isMouseDown) {
+        this.setPositionByMouseEvent(offsetX, offsetY)
+      }
+    },
+
+    // 鼠标抬起
+    handleMouseUp() {
+      this.isMouseDown = false
+    },
+
+    // 鼠标移开
+    handleMouseOut() {
+      this.isMouseDown = false
+    },
+
+    setPositionByMouseEvent(offsetX, offsetY) {
       const { degree, radian } = this.getDegree([offsetX, offsetY])
       for (let index = 0; index < this.range; index++) {
         if (degree >= this.perDegree * index && degree < this.perDegree * (index + 1)) {

From 09e77962d246aea0405d13f37f3e2f6543059214 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Tue, 11 Jul 2023 09:10:34 +0800
Subject: [PATCH 12/15] =?UTF-8?q?WIP:=20=E5=AE=8C=E6=88=90=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modals/AnalyzeInteractiveToolModal.vue    | 273 ++++++++++++++++++
 .../components/Modals/AnalyzeSettingModal.vue | 193 +++++++++++++
 .../components/Modals/LoadFromDBModal.vue     |  34 ++-
 .../components/Modals/SaveSettingModal.vue    |  81 ++++++
 .../components/MultiLevelMenu.vue             |  64 ++++
 .../components/ResultDisplay.vue              |   4 +
 .../components/TitleOverBoarder.vue           |  39 +++
 src/views/spectrumAnalysis/index.vue          | 184 +++++++++---
 8 files changed, 817 insertions(+), 55 deletions(-)
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/SaveSettingModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/MultiLevelMenu.vue
 create mode 100644 src/views/spectrumAnalysis/components/TitleOverBoarder.vue

diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
new file mode 100644
index 0000000..43c2da6
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
@@ -0,0 +1,273 @@
+<template>
+  <custom-modal v-model="visible" :width="1200" title="Interactive Analyse Tools" :okHanlder="handleOk">
+    <div class="interactive-analysis-tools">
+      <div class="interactive-analysis-tools-left">
+        <div class="chart">
+          <custom-chart :option="option" />
+        </div>
+        <div class="table">
+          <p class="title">
+            &lt; 6 Peaks with Anthro.Nuclides &gt;
+          </p>
+          <custom-table :list="list" :columns="columns"> </custom-table>
+          <div class="operators">
+            <a-button type="primary">Nuclide Review Window</a-button>
+            <a-button type="primary">Add Peak Comment</a-button>
+            <a-button type="primary">Add General Comment</a-button>
+          </div>
+        </div>
+      </div>
+      <div class="interactive-analysis-tools-right">
+        <title-over-boarder title="Peak">
+          <div class="peak-box">
+            <div class="peak-box-item">
+              <a-button type="primary">Insert</a-button>
+            </div>
+            <div class="peak-box-item">
+              <a-button type="primary">Delete</a-button>
+            </div>
+            <div class="peak-box-item">
+              <a-button type="primary">Fit</a-button>
+            </div>
+
+            <div class="peak-box-item symbol">
+              <a-button type="primary">&lt;</a-button>
+              <a-button type="primary">&gt;</a-button>
+            </div>
+          </div>
+
+          <div class="base-line">
+            <a-button type="primary">BaseLine</a-button>
+          </div>
+        </title-over-boarder>
+        <div class="reset-btn-box">
+          <a-button type="primary">Reset Chart</a-button>
+        </div>
+        <div class="identify-box">
+          <title-over-boarder title="Nuclide Identify">
+            <a-form-model class="tolerance">
+              <a-form-model-item label="Tolerance">
+                <a-input-number></a-input-number>
+              </a-form-model-item>
+            </a-form-model>
+            <div class="identify-item">
+              <div class="title">
+                Possible Nuclide
+              </div>
+              <div class="content"></div>
+            </div>
+            <div class="identify-item">
+              <div class="title">
+                Nuclide Identified
+              </div>
+              <div class="content"></div>
+            </div>
+            <div class="identify-operators">
+              <a-space>
+                <a-input></a-input>
+                <a-button type="primary">Add</a-button>
+                <a-button type="primary">Del</a-button>
+              </a-space>
+            </div>
+          </title-over-boarder>
+        </div>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+
+const initialOption = {
+  xAxis: {
+    min: 1,
+    max: 8192
+  },
+  yAxis: {
+    min: 1,
+    max: 994914
+  }
+}
+
+const columns = [
+  {
+    title: 'ID'
+  },
+  {
+    title: 'Energy (keV)'
+  },
+  {
+    title: 'Centroid (C)'
+  },
+  {
+    title: 'FWHM (keV)'
+  },
+  {
+    title: 'Area'
+  },
+  {
+    title: 'Detectability'
+  },
+  {
+    title: 'Cmnt'
+  },
+  {
+    title: 'Nuclides'
+  }
+]
+
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  components: {
+    CustomChart,
+    TitleOverBoarder
+  },
+  data() {
+    this.columns = columns
+    return {
+      option: initialOption,
+      list: []
+    }
+  },
+  methods: {
+    handleOk() {}
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.interactive-analysis-tools {
+  display: flex;
+
+  &-left {
+    flex: 1;
+    margin-right: 20px;
+
+    .chart {
+      height: 275px;
+    }
+
+    .table {
+      .title {
+        color: #0cebc9;
+        font-size: 20px;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+
+      .custom-table {
+        height: 421px;
+      }
+
+      .operators {
+        display: flex;
+        margin-top: 10px;
+        gap: 10px;
+
+        .ant-btn {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &-right {
+    width: 25%;
+
+    .peak-box {
+      &-item {
+        margin-bottom: 10px;
+      }
+
+      .symbol {
+        display: flex;
+
+        .ant-btn {
+          flex: 1;
+
+          &:first-child {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    .base-line {
+      margin-top: 80px;
+    }
+
+    .reset-btn-box {
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+
+    .identify-box {
+      .tolerance {
+        ::v-deep {
+          .ant-form-item {
+            margin-bottom: 10px;
+
+            &-control-wrapper {
+              flex: 1;
+            }
+
+            &-control {
+              width: 100%;
+            }
+          }
+        }
+
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+
+      .identify-item {
+        .title {
+          background-color: #497e9d;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 16px;
+        }
+
+        .content {
+          height: 80px;
+          background-color: #275466;
+          margin: 10px 0;
+        }
+      }
+
+      .identify-operators {
+        display: flex;
+
+        .ant-btn {
+          width: 50px;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+
+  .ant-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue
new file mode 100644
index 0000000..db568f1
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue
@@ -0,0 +1,193 @@
+<template>
+  <custom-modal
+    v-model="visible"
+    :width="900"
+    title="Analysis Settings"
+    class="analysis-settings"
+    :okHanlder="handleOk"
+  >
+    <!-- 第一行 -->
+    <div class="analysis-settings-item">
+      <title-over-boarder title="Peak Searching">
+        <a-form-model :colon="false" :labelCol="{ style: { width: '160px' } }">
+          <a-form-model-item label="ECutAnalysis_Low">
+            <div class="input-with-unit">
+              <a-input></a-input>
+              KeV
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="ECutAnalysis_High">
+            <div class="input-with-unit">
+              <a-input></a-input>
+              KeV
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="EnergyTolerance">
+            <div class="input-with-unit">
+              <a-input></a-input>
+              KeV
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="PSS_low">
+            <a-input></a-input>
+          </a-form-model-item>
+        </a-form-model>
+      </title-over-boarder>
+      <title-over-boarder title="Calibration Peak Searching">
+        <a-form-model :colon="false" :labelCol="{ style: { width: '170px' } }">
+          <a-form-model-item label="CalibrationPSS_low">
+            <a-input></a-input>
+          </a-form-model-item>
+          <a-form-model-item label="CalibrationPSS_high">
+            <a-input></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-checkbox>
+              Update Calibration
+            </a-checkbox>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-checkbox>
+              Keep Calibration Peak Search Peaks
+            </a-checkbox>
+          </a-form-model-item>
+        </a-form-model>
+      </title-over-boarder>
+    </div>
+
+    <!-- 第二行 -->
+    <div class="analysis-settings-item">
+      <title-over-boarder title="Baseline Param">
+        <a-form-model :colon="false" :labelCol="{ style: { width: '90px' } }">
+          <a-form-model-item label="k_back">
+            <a-input></a-input>
+          </a-form-model-item>
+          <a-form-model-item label="k_alpha">
+            <a-input></a-input>
+          </a-form-model-item>
+          <a-form-model-item label="k_beta">
+            <a-input></a-input>
+          </a-form-model-item>
+        </a-form-model>
+      </title-over-boarder>
+      <div>
+        <a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
+          <title-over-boarder title="BaseImprove">
+            <a-form-model-item label="BaseImprovePSS">
+              <a-input></a-input>
+            </a-form-model-item>
+          </title-over-boarder>
+          <title-over-boarder title="LC Computing" style="margin-top: 20px">
+            <a-form-model-item label="RiskLevelK">
+              <a-input></a-input>
+            </a-form-model-item>
+          </title-over-boarder>
+        </a-form-model>
+      </div>
+    </div>
+
+    <!-- 第三行 -->
+    <div class="analysis-settings-item">
+      <title-over-boarder title="Activity Reference Time">
+        <custom-date-picker show-time v-model="formModel.activityReferenceTime"></custom-date-picker>
+      </title-over-boarder>
+      <title-over-boarder title="Concentration Reference Time">
+        <custom-date-picker show-time v-model="formModel.concentrationReferenceTime"></custom-date-picker>
+      </title-over-boarder>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+export default {
+  components: { TitleOverBoarder },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      formModel: {
+        activityReferenceTime: undefined,
+        concentrationReferenceTime: undefined
+      }
+    }
+  },
+  methods: {
+    handleOk() {
+      console.log('%c [ handleOk ]-121', 'font-size:13px; background:pink; color:#bf2c9f;')
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.analysis-settings {
+  &-item {
+    display: flex;
+
+    &:not(:first-child) {
+      margin-top: 20px;
+    }
+
+    > div {
+      flex: 1;
+
+      &:first-child {
+        margin-right: 20px;
+      }
+    }
+
+    .ant-form {
+      &-item {
+        margin-bottom: 0;
+
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+
+        ::v-deep {
+          .ant-form-item {
+            &-label {
+              text-align: left;
+
+              label {
+                font-size: 16px;
+              }
+            }
+
+            &-control-wrapper {
+              flex: 1;
+            }
+          }
+        }
+
+        .ant-input {
+          height: 26px;
+        }
+
+        .input-with-unit {
+          display: flex;
+          align-items: center;
+
+          .ant-input {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index 5192772..f93e8d6 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -129,7 +129,7 @@ export default {
     loadData(arg) {
       const params = this.getQueryParams() //查询条件
       const { startDate, endDate, menuTypes } = params 
-      if (!menuTypes || !menuTypes.length) {
+      if (!menuTypes) {
         this.$message.warn('Please Select SampleType First')
         return
       }
@@ -144,8 +144,6 @@ export default {
         return
       }
 
-      params.menuTypes = menuTypes.join(',')
-
       //加载数据 若传入参数1则加载第一页的内容
       if (arg === 1) {
         this.ipagination.current = 1
@@ -199,13 +197,13 @@ export default {
 
     // 获取台站和探测器列表
     async getStationAndDetectorList(value) {
-      if (!value || !value.length) {
+      if (!value) {
         return
       }
 
       try {
         const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
-          menuTypes: value.join(',')
+          menuTypes: value
         })
         if (success) {
           this.stationList = result.stationCode.map(item => ({ label: item, value: item }))
@@ -243,8 +241,11 @@ export default {
           type: 'custom-select',
           name: 'menuTypes',
           props: {
-            mode: 'multiple',
             options: [
+              {
+                label: 'All',
+                value: 'G,B'
+              },
               {
                 label: 'Gamma',
                 value: 'G'
@@ -254,11 +255,10 @@ export default {
                 value: 'B'
               }
             ],
-            maxTagCount: 1,
-            maxTagPlaceholder: '...'
+            allowClear: true
           },
           style: {
-            width: '23%'
+            width: '18%'
           },
           on: {
             change: event => {
@@ -277,7 +277,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16%'
+            width: '19%'
           }
         },
         {
@@ -291,7 +291,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16%'
+            width: '19%'
           }
         },
         {
@@ -316,7 +316,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '15%'
+            width: '14%'
           }
         },
         {
@@ -353,7 +353,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '15%'
+            width: '14%'
           }
         },
         {
@@ -374,7 +374,8 @@ export default {
             allowClear: true
           },
           style: {
-            width: '15%'
+            width: '16%',
+            paddingRight: 0
           }
         },
         {
@@ -385,7 +386,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '20%'
+            width: '264px'
           }
         },
         {
@@ -400,7 +401,8 @@ export default {
             ]
           },
           style: {
-            width: '315px'
+            width: '305px',
+            paddingRight: 0
           }
         },
         {
diff --git a/src/views/spectrumAnalysis/components/Modals/SaveSettingModal.vue b/src/views/spectrumAnalysis/components/Modals/SaveSettingModal.vue
new file mode 100644
index 0000000..29570ff
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/SaveSettingModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <custom-modal v-model="visible" title="Save Setting" :width="380" :okHandler="handleOk">
+    <div class="save-setting">
+      <div class="save-setting-all">
+        <a-checkbox v-model="saveAll">
+          Save All
+        </a-checkbox>
+      </div>
+      <div>
+        <title-over-boarder title="Format">
+          <a-radio-group v-model="saveFormat" class="format-radio-group">
+            <a-radio value="txt">Save as Txt</a-radio>
+            <a-radio value="excel">Save as Excel</a-radio>
+          </a-radio-group>
+        </title-over-boarder>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import { downloadFile } from '../../../../api/manage'
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+export default {
+  components: { TitleOverBoarder },
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      saveAll: false,
+      saveFormat: 'txt'
+    }
+  },
+  methods: {
+    reset() {
+      this.saveAll = false
+      this.saveFormat = 'txt'
+    },
+
+    handleOk() {
+      console.log('%c [ save ]-22', 'font-size:13px; background:pink; color:#bf2c9f;')
+      downloadFile('', 'result.' + this.saveFormat, {})
+    }
+  },
+  computed: {
+    visible: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        if (this.value) {
+          this.reset()
+        }
+
+        return this.value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.save-setting {
+  display: flex;
+  align-items: center;
+
+  &-all {
+    width: 65%;
+    text-align: center;
+  }
+
+  .format-radio-group {
+    .ant-radio-wrapper:first-child {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/MultiLevelMenu.vue b/src/views/spectrumAnalysis/components/MultiLevelMenu.vue
new file mode 100644
index 0000000..f6d39cd
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/MultiLevelMenu.vue
@@ -0,0 +1,64 @@
+<template>
+  <a-menu mode="vertical" :style="{ width }" class="multi-level-menu">
+    <template v-for="(item, index) in children">
+      <a-menu-item :key="index" v-bind="item.attrs" @click="handleMenuClick(item)">
+        {{ item.title }}
+        <div v-if="item.children" :key="index">
+          <a-menu class="multi-level-menu-sub-menu">
+            <a-menu-item v-for="child in item.children" :key="child.key" @click="handleSubMenuClick(item, child)">
+              {{ child.title }}
+            </a-menu-item>
+          </a-menu>
+        </div>
+      </a-menu-item>
+    </template>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    children: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: 'auto'
+    }
+  },
+  methods: {
+    handleMenuClick(item) {
+      if (!item.children) {
+        this.$emit('menuClick', item)
+      }
+    },
+    handleSubMenuClick(item, child) {
+      this.$emit('submenuClick', { item, child })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.multi-level-menu {
+  .ant-menu-item {
+    overflow: visible;
+
+    .multi-level-menu-sub-menu {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translateX(100%);
+      display: none;
+      background: #03353f;
+    }
+
+    &-active {
+      .multi-level-menu-sub-menu {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/ResultDisplay.vue b/src/views/spectrumAnalysis/components/ResultDisplay.vue
index 2da7fd7..788d8ff 100644
--- a/src/views/spectrumAnalysis/components/ResultDisplay.vue
+++ b/src/views/spectrumAnalysis/components/ResultDisplay.vue
@@ -135,6 +135,10 @@ export default {
     }
 
     ::v-deep {
+      .ant-table {
+        border: none;
+      }
+
       .ant-table-thead > tr th {
         color: #00e9fe;
         font-family: MicrosoftYaHei;
diff --git a/src/views/spectrumAnalysis/components/TitleOverBoarder.vue b/src/views/spectrumAnalysis/components/TitleOverBoarder.vue
new file mode 100644
index 0000000..92c24b5
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/TitleOverBoarder.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="title-over-border">
+    <div class="title-over-border-title">{{ title }}</div>
+    <div class="title-over-border-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@color: rgba(12, 235, 201, 0.6);
+.title-over-border {
+  border: 1px solid @color;
+  position: relative;
+
+  &-title {
+    color: @color;
+    background-color: #022024;
+    position: absolute;
+    top: -11px;
+    left: 10px;
+    padding: 0 10px;
+  }
+
+  &-content {
+    padding: 20px;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 81b7a7b..b05e038 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -86,6 +86,18 @@
     <!-- Nuclide Activity and MDC 弹窗开始 -->
     <nuclide-activity-and-mdc-modal v-model="nuclideActivityAndMDCModalVisible" />
     <!-- Nuclide Activity and MDC 弹窗结束 -->
+
+    <!-- Save Setting 弹窗开始 -->
+    <save-setting-modal v-model="saveSettingModalVisible" />
+    <!-- Save Setting 弹窗结束 -->
+
+    <!-- 分析-设置弹窗开始 -->
+    <analyze-setting-modal v-model="analyzeConfigureModalVisible" />
+    <!-- 分析-设置弹窗结束 -->
+
+    <!-- 分析工具弹窗开始 -->
+    <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" />
+    <!-- 分析工具弹窗结束 -->
   </div>
 </template>
 <script>
@@ -103,6 +115,10 @@ 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'
+import MultiLevelMenu from './components/MultiLevelMenu.vue'
+import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
+import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
+import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -124,7 +140,11 @@ export default {
     LoadFromDbModal,
     LoadFromFileModal,
     PeakInfomation,
-    NuclideActivityAndMdcModal
+    NuclideActivityAndMdcModal,
+    MultiLevelMenu,
+    SaveSettingModal,
+    AnalyzeSettingModal,
+    AnalyzeInteractiveToolModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -139,12 +159,18 @@ export default {
         { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
       ],
 
-      loadFromDbModalVisible: false,
-      loadFromFileModalVisible: false,
+      loadFromDbModalVisible: false, // 从数据库加载弹窗
+      loadFromFileModalVisible: false, // 从文件加载弹窗
 
       peakInfomationModalVisible: false,
 
-      nuclideActivityAndMDCModalVisible: false
+      nuclideActivityAndMDCModalVisible: false,
+
+      saveSettingModalVisible: false, // 保存设置弹窗
+
+      analyzeConfigureModalVisible: false, // 分析设置弹窗
+
+      analyzeInteractiveToolModalVisible: true // 分析工具弹窗
     }
   },
   methods: {
@@ -163,29 +189,44 @@ export default {
       this.spectraList = []
     },
 
-    // 保存结果到文件
-    saveResultsToFile() {
-      console.log('%c [ saveResultsToFile ]-152', 'font-size:13px; background:pink; color:#bf2c9f;')
+    // 保存结果到文件， 服务端生成文件，前端下载
+    handleSaveResultsToFile() {
+      this.saveSettingModalVisible = true
     },
 
-    // 保存结果到数据库
-    saveResultsToDB() {
-      console.log('%c [ saveResultsToDB ]-157', 'font-size:13px; background:pink; color:#bf2c9f;')
+    /**
+     * 保存结果到数据库
+     * @param { 'all' | 'current' } type
+     */
+    handleSaveResultsToDB(type) {
+      console.log('%c [ saveResultsToDB ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', type)
     },
 
-    // 将谱列表中所有谱数据均以IMS2.0格式保存为PHD文件
-    savePHDToFile() {
-      console.log('%c [ savePHDToFile ]-162', 'font-size:13px; background:pink; color:#bf2c9f;')
+    /**
+     * 将谱列表中所有谱数据均以IMS2.0格式保存为PHD文件，
+     * 服务端生成文件，前端下载
+     * @param { 'all' | 'current' } type
+     */
+    handleSavePHDToFile(type) {
+      console.log('%c [ savePHDToFile ]-162', 'font-size:13px; background:pink; color:#bf2c9f;', type)
     },
 
-    // 执行β-γ符合谱分析流程，对当前谱数据进行再分析
-    handleAnalyzeCurrSample() {
-      console.log('%c [ handleAnalyzeCurrSample ]-152', 'font-size:13px; background:pink; color:#bf2c9f;')
+    // 显示分析设置弹窗
+    handleShowConfigureModal() {
+      this.analyzeConfigureModalVisible = true
     },
 
-    // 对谱列表中所有谱数据进行再分析
-    handleAnalyzeAllSample() {
-      console.log('%c [ handleAnalyzeAllSample ]-156', 'font-size:13px; background:pink; color:#bf2c9f;')
+    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
     },
 
     // 弹出能量刻度界面
@@ -321,24 +362,53 @@ export default {
           title: 'SAVE',
           children: [
             {
-              type: 'a-menu',
-              children: [
-                {
-                  type: 'a-menu-item',
-                  title: 'Save Results to File',
-                  handler: this.saveResultsToFile
+              type: 'MultiLevelMenu',
+              attrs: {
+                children: [
+                  {
+                    title: 'Save Results to File'
+                  },
+                  {
+                    title: 'Save Results to DB',
+                    children: [
+                      {
+                        title: 'Save Current',
+                        key: 'current'
+                      },
+                      {
+                        title: 'Save All',
+                        key: 'all'
+                      }
+                    ]
+                  },
+                  {
+                    title: 'Save PHD to File',
+                    children: [
+                      {
+                        title: 'Save Current',
+                        key: 'current'
+                      },
+                      {
+                        title: 'Save All',
+                        key: 'all'
+                      }
+                    ]
+                  }
+                ],
+                width: '170px'
+              },
+              on: {
+                menuClick: () => {
+                  this.handleSaveResultsToFile()
                 },
-                {
-                  type: 'a-menu-item',
-                  title: 'Save Results to DB',
-                  handler: this.saveResultsToDB
-                },
-                {
-                  type: 'a-menu-item',
-                  title: 'Save PHD to File',
-                  handler: this.savePHDToFile
+                submenuClick: ({ item, child }) => {
+                  if (item.title == 'Save Results to DB') {
+                    this.handleSaveResultsToDB(child.key)
+                  } else if (item.title == 'Save PHD to File') {
+                    this.handleSavePHDToFile(child.key)
+                  }
                 }
-              ]
+              }
             }
           ]
         },
@@ -350,13 +420,23 @@ export default {
               children: [
                 {
                   type: 'a-menu-item',
-                  title: 'Analyze Current Sample',
-                  handler: this.handleAnalyzeCurrSample
+                  title: 'Configure',
+                  handler: this.handleShowConfigureModal
                 },
                 {
                   type: 'a-menu-item',
-                  title: 'Analyze All Sample',
-                  handler: this.handleAnalyzeAllSample
+                  title: 'Processing',
+                  handler: this.handleProcessing
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Reprocess All',
+                  handler: this.handleReprocessAll
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Interactive Tool',
+                  handler: this.handleShowInteractiveTool
                 }
               ]
             }
@@ -606,6 +686,30 @@ export default {
     position: relative;
     border-right: 0;
 
+    &-submenu {
+      &-active {
+        background-color: #055565 !important;
+      }
+
+      &-title {
+        height: 30px !important;
+        line-height: 30px !important;
+        color: #fff;
+        margin: 0;
+
+        &:active {
+          background-color: #055565 !important;
+        }
+
+        .ant-menu-submenu-arrow {
+          &::before,
+          &::after {
+            background: #fff !important;
+          }
+        }
+      }
+    }
+
     &-item {
       color: #fff;
       font-family: Arial;
@@ -614,6 +718,8 @@ export default {
       padding: 4px 14px;
       height: 30px;
       line-height: 22px;
+      margin: 0 !important;
+
       &:hover {
         background-color: #055565 !important;
       }

From 8fb0089be1dd29ea9b8d06c26e41c3f7a6adfa25 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Tue, 11 Jul 2023 19:35:18 +0800
Subject: [PATCH 13/15] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0Interactive=20T?=
 =?UTF-8?q?ool=E5=BC=B9=E7=AA=97=E4=B8=AD=E7=9A=84=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E5=BC=B9=E7=AA=97=EF=BC=8C=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E6=A0=B7=E6=9C=AC=E7=B1=BB=E5=9E=8B=E4=B8=BAbeta-gamma?=
 =?UTF-8?q?=E7=9A=84=E9=83=A8=E5=88=86=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../spectrumAnalysis/beta-gamma-analysis.vue  |  247 +-
 .../components/BetaGammaSpectrumChart.vue     |   34 +-
 .../Modals/AnalyzeInteractiveToolModal.vue    |  273 --
 .../components/CommentModal.vue               |   48 +
 .../components/FitPeaksAndBaselineModal.vue   |  162 +
 .../components/NuclideReviewChart.vue         |   43 +
 .../components/NuclideReviewModal.vue         |  360 ++
 .../AnalyzeInteractiveToolModal/index.vue     |  459 ++
 .../components/Modals/LoadFromDBModal.vue     |   14 +-
 .../components/SpectraListInMenu.vue          |   22 +-
 .../components/SpectrumLineChart.vue          |   32 +-
 .../SubOperators/ButtonWithSwitchIcon.vue     |   21 +-
 src/views/spectrumAnalysis/data.json          | 4195 -----------------
 src/views/spectrumAnalysis/gamma-analysis.vue |   86 +-
 src/views/spectrumAnalysis/index.vue          |  194 +-
 15 files changed, 1463 insertions(+), 4727 deletions(-)
 delete mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/CommentModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
 delete mode 100644 src/views/spectrumAnalysis/data.json

diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 34a5ceb..3e9a077 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -1,80 +1,120 @@
 <template>
   <div class="beta-gamma-analysis">
-    <div class="beta-gamma-spectrum-sample">
-      <beta-gamma-chart-container>
-        <template slot="title">
-          Beta-Gamma Spectrum: Sample
-        </template>
-        <beta-gamma-spectrum-chart
-          ref="betaGammaChartRef"
-          :data="twoDData"
-          @positionChange="handlePositionChange"
-          @rangeChange="handleRangeChange"
-        />
-      </beta-gamma-chart-container>
+    <!-- 二级交互栏 -->
+    <div class="spectrum-analysis-sub-operators">
+      <pop-over-with-icon placement="bottomLeft">
+        Detailed-Information
+        <detailed-infomation slot="content" />
+      </pop-over-with-icon>
+      <pop-over-with-icon placement="bottomLeft">
+        QC Flags
+        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
+      </pop-over-with-icon>
+      <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
+        Spectra
+        <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
+      </pop-over-with-icon>
     </div>
-    <div class="beta-and-gamma-spectrum">
-      <div class="spectrum-charts">
-        <div class="gamma-spectrum">
-          <div class="gamma-spectrum-item">
-            <beta-gamma-chart-container>
-              <template slot="title">
-                Gamma Spectrum: Original
-              </template>
-              <spectrum-line-chart ref="lineChart1Ref" @rangeChange="handleLineChartRangeChange($event, 'y')" />
-            </beta-gamma-chart-container>
-          </div>
-          <div class="gamma-spectrum-item">
-            <beta-gamma-chart-container>
-              <template slot="title">
-                Gamma Spectrum: Projected
-              </template>
-              <spectrum-line-chart ref="lineChart2Ref" @rangeChange="handleLineChartRangeChange($event, 'y')" />
-            </beta-gamma-chart-container>
-          </div>
-        </div>
-        <div class="gamma-spectrum">
-          <div class="gamma-spectrum-item">
-            <beta-gamma-chart-container>
-              <template slot="title">
-                Beta Spectrum: Original
-              </template>
-              <spectrum-line-chart
-                ref="lineChart3Ref"
-                title="Beta"
-                color="#00ff1e"
-                @rangeChange="handleLineChartRangeChange($event, 'x')"
-              />
-            </beta-gamma-chart-container>
-          </div>
-          <div class="gamma-spectrum-item">
-            <beta-gamma-chart-container>
-              <template slot="title">
-                Beta Spectrum: Projected
-              </template>
-              <spectrum-line-chart
-                ref="lineChart4Ref"
-                title="Beta"
-                color="#00ff1e"
-                @rangeChange="handleLineChartRangeChange($event, 'x')"
-              />
-            </beta-gamma-chart-container>
-          </div>
-        </div>
-      </div>
-      <div class="result-display">
+    <!-- 二级交互栏结束 -->
+    <!-- 主体部分 -->
+    <div class="beta-gamma-analysis-main">
+      <!-- 左侧图表 -->
+      <div class="beta-gamma-spectrum-sample">
         <beta-gamma-chart-container>
           <template slot="title">
-            Result display
+            Beta-Gamma Spectrum: Sample
           </template>
-          <result-display :data="resultDisplay"></result-display>
+          <beta-gamma-spectrum-chart
+            ref="betaGammaChartRef"
+            :data="histogramDataList"
+            @positionChange="handlePositionChange"
+            @rangeChange="handleRangeChange"
+          />
         </beta-gamma-chart-container>
       </div>
-    </div>
+      <!-- 左侧图表结束 -->
 
-    <!-- Comparison Modal 开始 -->
-    <comparison-modal v-model="comparisonModalVisible" />
-    <!-- Comparison Modal 结束 -->
+      <!-- 右侧 -->
+      <div class="beta-and-gamma-spectrum">
+        <!-- 四个图表开始 -->
+        <div class="spectrum-charts">
+          <div class="gamma-spectrum">
+            <div class="gamma-spectrum-item">
+              <beta-gamma-chart-container>
+                <template slot="title">
+                  Gamma Spectrum: Original
+                </template>
+                <spectrum-line-chart
+                  ref="lineChart1Ref"
+                  :data="gammaOriginalData"
+                  @rangeChange="handleLineChartRangeChange($event, 'y')"
+                />
+              </beta-gamma-chart-container>
+            </div>
+            <div class="gamma-spectrum-item">
+              <beta-gamma-chart-container>
+                <template slot="title">
+                  Gamma Spectrum: Projected
+                </template>
+                <spectrum-line-chart
+                  ref="lineChart2Ref"
+                  :data="betaProjectedData"
+                  @rangeChange="handleLineChartRangeChange($event, 'y')"
+                />
+              </beta-gamma-chart-container>
+            </div>
+          </div>
+          <div class="gamma-spectrum">
+            <div class="gamma-spectrum-item">
+              <beta-gamma-chart-container>
+                <template slot="title">
+                  Beta Spectrum: Original
+                </template>
+                <spectrum-line-chart
+                  ref="lineChart3Ref"
+                  :data="betaOriginalData"
+                  title="Beta"
+                  color="#00ff1e"
+                  @rangeChange="handleLineChartRangeChange($event, 'x')"
+                />
+              </beta-gamma-chart-container>
+            </div>
+            <div class="gamma-spectrum-item">
+              <beta-gamma-chart-container>
+                <template slot="title">
+                  Beta Spectrum: Projected
+                </template>
+                <spectrum-line-chart
+                  ref="lineChart4Ref"
+                  :data="gammaProjectedData"
+                  title="Beta"
+                  color="#00ff1e"
+                  @rangeChange="handleLineChartRangeChange($event, 'x')"
+                />
+              </beta-gamma-chart-container>
+            </div>
+          </div>
+        </div>
+        <!-- 四个图表结束 -->
+
+        <!-- 结果显示开始 -->
+        <div class="result-display">
+          <beta-gamma-chart-container>
+            <template slot="title">
+              Result display
+            </template>
+            <result-display :data="resultDisplay"></result-display>
+          </beta-gamma-chart-container>
+        </div>
+        <!-- 结果显示结束 -->
+      </div>
+      <!-- 右侧结束 -->
+
+      <!-- Comparison Modal 开始 -->
+      <comparison-modal v-model="comparisonModalVisible" />
+      <!-- Comparison Modal 结束 -->
+    </div>
+    <!-- 主体部分结束 -->
   </div>
 </template>
 
@@ -84,8 +124,10 @@ 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'
+import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
+import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
+import QcFlags from './components/SubOperators/QcFlags.vue'
+import Spectra from './components/SubOperators/Spectra.vue'
 
 export default {
   components: {
@@ -93,10 +135,23 @@ export default {
     SpectrumLineChart,
     ResultDisplay,
     BetaGammaSpectrumChart,
-    ComparisonModal
+    ComparisonModal,
+    DetailedInfomation,
+
+    PopOverWithIcon,
+    QcFlags,
+    Spectra
+  },
+  props: {
+    data: {
+      type: Object
+    }
   },
   data() {
     return {
+      spectraVisible: false,
+      spectraType: 'Sample Data',
+
       resultDisplay: [
         {
           id: 1,
@@ -127,13 +182,16 @@ export default {
           mdc: '0.03464'
         }
       ],
-      twoDData: {},
+      histogramDataList: [],
+
+      gammaOriginalData: [],
+      betaOriginalData: [],
+      betaProjectedData: [],
+      gammaProjectedData: [],
+
       comparisonModalVisible: false
     }
   },
-  created() {
-    this.getData()
-  },
   methods: {
     resize() {
       this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
@@ -143,11 +201,6 @@ export default {
       this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
     },
 
-    async getData() {
-      await 0
-      this.twoDData = twoDData
-    },
-
     // 鼠标在左侧2d图表上移动时
     handlePositionChange([xAxis, yAxis]) {
       // Gamma Spectrum，根据bata-gamma的gamma channel的值（y轴）进行定位
@@ -186,6 +239,32 @@ export default {
 
       this.$refs.betaGammaChartRef.setRange(x1, x2, type)
     }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        const {
+          betaOriginalData,
+          betaProjectedData,
+          gammaOriginalData,
+          gammaProjectedData,
+          histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
+          spectrumData
+        } = newVal
+
+
+        console.log('%c [ spectrumData ]-246', 'font-size:13px; background:pink; color:#bf2c9f;', spectrumData)
+
+        this.histogramDataList = histogramDataList
+
+        this.gammaOriginalData = gammaOriginalData
+        this.betaOriginalData = betaOriginalData
+
+        this.betaProjectedData = betaProjectedData
+        this.gammaProjectedData = gammaProjectedData
+      },
+      immediate: true
+    }
   }
 }
 </script>
@@ -193,8 +272,12 @@ export default {
 <style lang="less" scoped>
 .beta-gamma-analysis {
   height: 100%;
-  display: flex;
-  overflow: auto hidden;
+
+  &-main {
+    height: calc(100% - 51px);
+    display: flex;
+    overflow: auto hidden;
+  }
 
   .beta-gamma-spectrum-sample {
     width: calc(100% - 1078px);
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 81670ab..8886eed 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -141,7 +141,7 @@ const threeDSurfaceOption = {
     show: false,
     dimension: 2,
     min: 0,
-    max: 5,
+    max: 0,
     inRange: ['#47C134', '#f00']
   },
   grid3D: {
@@ -188,21 +188,11 @@ const threeDSurfaceOption = {
       color: '#C4E5A6',
       fontSize: 14
     },
-    max: 5
+    max: 0
   },
   series: {
     type: 'surface',
-    data: [
-      [64, 64, 0],
-      [66, 66, 0],
-      [66, 66, 0],
-      [65, 65, 4],
-
-      [128, 128, 0],
-      [130, 130, 0],
-      [130, 130, 0],
-      [129, 129, 4]
-    ]
+    data: []
   }
 }
 
@@ -269,8 +259,8 @@ const threeDScatterOption = {
 export default {
   props: {
     data: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => []
     }
   },
   components: {
@@ -420,15 +410,11 @@ export default {
   watch: {
     data: {
       handler(newVal) {
-        const data = []
-        Object.entries(newVal).forEach(([_, v]) => {
-          v.forEach(({ b, g, c }) => {
-            data.push({
-              value: [b, g, c]
-            })
-          })
-        })
-        this.twoDOption.series.data = data
+        this.twoDOption.series.data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
+
+        const treeDSurfaceZMax = Math.max(...newVal.map(item => item.c))
+        this.threeDSurfaceOption.zAxis3D.max = Math.ceil(treeDSurfaceZMax * 1.2)
+        this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
       },
       immediate: true
     },
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
deleted file mode 100644
index 43c2da6..0000000
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<template>
-  <custom-modal v-model="visible" :width="1200" title="Interactive Analyse Tools" :okHanlder="handleOk">
-    <div class="interactive-analysis-tools">
-      <div class="interactive-analysis-tools-left">
-        <div class="chart">
-          <custom-chart :option="option" />
-        </div>
-        <div class="table">
-          <p class="title">
-            &lt; 6 Peaks with Anthro.Nuclides &gt;
-          </p>
-          <custom-table :list="list" :columns="columns"> </custom-table>
-          <div class="operators">
-            <a-button type="primary">Nuclide Review Window</a-button>
-            <a-button type="primary">Add Peak Comment</a-button>
-            <a-button type="primary">Add General Comment</a-button>
-          </div>
-        </div>
-      </div>
-      <div class="interactive-analysis-tools-right">
-        <title-over-boarder title="Peak">
-          <div class="peak-box">
-            <div class="peak-box-item">
-              <a-button type="primary">Insert</a-button>
-            </div>
-            <div class="peak-box-item">
-              <a-button type="primary">Delete</a-button>
-            </div>
-            <div class="peak-box-item">
-              <a-button type="primary">Fit</a-button>
-            </div>
-
-            <div class="peak-box-item symbol">
-              <a-button type="primary">&lt;</a-button>
-              <a-button type="primary">&gt;</a-button>
-            </div>
-          </div>
-
-          <div class="base-line">
-            <a-button type="primary">BaseLine</a-button>
-          </div>
-        </title-over-boarder>
-        <div class="reset-btn-box">
-          <a-button type="primary">Reset Chart</a-button>
-        </div>
-        <div class="identify-box">
-          <title-over-boarder title="Nuclide Identify">
-            <a-form-model class="tolerance">
-              <a-form-model-item label="Tolerance">
-                <a-input-number></a-input-number>
-              </a-form-model-item>
-            </a-form-model>
-            <div class="identify-item">
-              <div class="title">
-                Possible Nuclide
-              </div>
-              <div class="content"></div>
-            </div>
-            <div class="identify-item">
-              <div class="title">
-                Nuclide Identified
-              </div>
-              <div class="content"></div>
-            </div>
-            <div class="identify-operators">
-              <a-space>
-                <a-input></a-input>
-                <a-button type="primary">Add</a-button>
-                <a-button type="primary">Del</a-button>
-              </a-space>
-            </div>
-          </title-over-boarder>
-        </div>
-      </div>
-    </div>
-  </custom-modal>
-</template>
-
-<script>
-import CustomChart from '@/components/CustomChart/index.vue'
-import TitleOverBoarder from '../TitleOverBoarder.vue'
-
-const initialOption = {
-  xAxis: {
-    min: 1,
-    max: 8192
-  },
-  yAxis: {
-    min: 1,
-    max: 994914
-  }
-}
-
-const columns = [
-  {
-    title: 'ID'
-  },
-  {
-    title: 'Energy (keV)'
-  },
-  {
-    title: 'Centroid (C)'
-  },
-  {
-    title: 'FWHM (keV)'
-  },
-  {
-    title: 'Area'
-  },
-  {
-    title: 'Detectability'
-  },
-  {
-    title: 'Cmnt'
-  },
-  {
-    title: 'Nuclides'
-  }
-]
-
-export default {
-  props: {
-    value: {
-      type: Boolean
-    }
-  },
-  components: {
-    CustomChart,
-    TitleOverBoarder
-  },
-  data() {
-    this.columns = columns
-    return {
-      option: initialOption,
-      list: []
-    }
-  },
-  methods: {
-    handleOk() {}
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.interactive-analysis-tools {
-  display: flex;
-
-  &-left {
-    flex: 1;
-    margin-right: 20px;
-
-    .chart {
-      height: 275px;
-    }
-
-    .table {
-      .title {
-        color: #0cebc9;
-        font-size: 20px;
-        text-align: center;
-        margin-bottom: 10px;
-      }
-
-      .custom-table {
-        height: 421px;
-      }
-
-      .operators {
-        display: flex;
-        margin-top: 10px;
-        gap: 10px;
-
-        .ant-btn {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  &-right {
-    width: 25%;
-
-    .peak-box {
-      &-item {
-        margin-bottom: 10px;
-      }
-
-      .symbol {
-        display: flex;
-
-        .ant-btn {
-          flex: 1;
-
-          &:first-child {
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-
-    .base-line {
-      margin-top: 80px;
-    }
-
-    .reset-btn-box {
-      margin-top: 20px;
-      margin-bottom: 30px;
-    }
-
-    .identify-box {
-      .tolerance {
-        ::v-deep {
-          .ant-form-item {
-            margin-bottom: 10px;
-
-            &-control-wrapper {
-              flex: 1;
-            }
-
-            &-control {
-              width: 100%;
-            }
-          }
-        }
-
-        .ant-input-number {
-          width: 100%;
-        }
-      }
-
-      .identify-item {
-        .title {
-          background-color: #497e9d;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          font-size: 16px;
-        }
-
-        .content {
-          height: 80px;
-          background-color: #275466;
-          margin: 10px 0;
-        }
-      }
-
-      .identify-operators {
-        display: flex;
-
-        .ant-btn {
-          width: 50px;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
-      }
-    }
-  }
-
-  .ant-btn {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/CommentModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/CommentModal.vue
new file mode 100644
index 0000000..da97f6e
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/CommentModal.vue
@@ -0,0 +1,48 @@
+<template>
+  <custom-modal v-model="visible" :title="type + ' Comment'" :okHandler="handleOk">
+    <a-textarea :rows="10" v-model="content"></a-textarea>
+  </custom-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    async handleOk() {
+      if (!this.content) {
+        this.$message.warn('Please Input Comment')
+        throw new Error('Content Is Empty')
+      }
+
+      console.log('%c [  ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', this.type, this.content)
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        if (this.value) {
+          this.content = ''
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
new file mode 100644
index 0000000..371ba15
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
@@ -0,0 +1,162 @@
+<template>
+  <custom-modal centered v-model="visible" :width="1200" title="Fit Peaks and Baseline">
+    <custom-table :columns="columns" :list="list">
+      <template v-for="(slot, index) in slots" :slot="slot.slotName" slot-scope="{ record }">
+        <a-checkbox v-if="slot.isCheckbox" :key="index" v-model="record[slot.dataIndex]">
+          Fixed
+        </a-checkbox>
+        <a-input v-else :key="index" v-model="record[slot.dataIndex]"></a-input>
+      </template>
+    </custom-table>
+    <div slot="custom-footer">
+      <a-space>
+        <a-button type="primary" @click="handlePeaks">Peaks</a-button>
+        <a-button>Cancel</a-button>
+      </a-space>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Peak',
+    dataIndex: 'peak',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Peak'
+    }
+  },
+  {
+    title: 'Nuclide',
+    dataIndex: 'nuclide',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Nuclide'
+    }
+  },
+  {
+    title: 'Energy',
+    dataIndex: 'energy',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Energy'
+    }
+  },
+  {
+    title: 'NetArea',
+    dataIndex: 'netAreaInput',
+    width: 100,
+    scopedSlots: {
+      customRender: 'NetAreaInput'
+    }
+  },
+  {
+    title: 'FWHM',
+    dataIndex: 'fwhmInput',
+    width: 100,
+    scopedSlots: {
+      customRender: 'FWHMInput'
+    }
+  },
+  {
+    title: 'Step',
+    dataIndex: 'Step',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Step'
+    }
+  },
+  {
+    title: 'BWGamma',
+    dataIndex: 'bwGamma',
+    width: 100,
+    scopedSlots: {
+      customRender: 'BWGamma'
+    }
+  },
+  {
+    title: 'NetArea',
+    dataIndex: 'netAreaCheckbox',
+    width: 100,
+    scopedSlots: {
+      customRender: 'NetAreaCheckbox'
+    },
+    isCheckbox: true
+  },
+  {
+    title: 'Centroid',
+    dataIndex: 'centroid',
+    width: 100,
+    scopedSlots: {
+      customRender: 'Centroid'
+    },
+    isCheckbox: true
+  },
+  {
+    title: 'FWHM',
+    dataIndex: 'fwhmCheckbox',
+    width: 100,
+    scopedSlots: {
+      customRender: 'FWHMCheckbox'
+    },
+    isCheckbox: true
+  }
+]
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          peak: 'peak',
+          nuclide: 'nuclide',
+          energy: 'energy',
+          netAreaInput: 'netAreaInput',
+          fwhmInput: 'fwhmInput',
+          Step: 'Step',
+          bwGamma: 'bwGamma',
+          netAreaCheckbox: false,
+          centroid: false,
+          fwhmCheckbox: false
+        }
+      ]
+    }
+  },
+  methods: {
+    handlePeaks() {
+        console.log('%c [  ]-134', 'font-size:13px; background:pink; color:#bf2c9f;', this.list)
+        this.visible = false
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        if (this.value) {
+          this.content = ''
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    slots() {
+      return columns.map(column => {
+        return {
+          isCheckbox: column.isCheckbox,
+          dataIndex: column.dataIndex,
+          slotName: column.scopedSlots.customRender
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
new file mode 100644
index 0000000..881c0d2
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
@@ -0,0 +1,43 @@
+<template>
+  <custom-chart :option="option" />
+</template>
+<script>
+const initialOption = {
+  xAxis: {
+    axisLabel: {
+      color: '#fff'
+    }
+  },
+  yAxis: {
+    min: 2030.0,
+    max: 2427.6,
+    splitNumber: 1,
+    axisLabel: {
+      color: '#fff'
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#8BB93C'
+      }
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#03DBE6'
+      }
+    }
+  ]
+}
+export default {
+  data() {
+    return {
+      option: initialOption
+    }
+  }
+}
+</script>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
new file mode 100644
index 0000000..da705c1
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
@@ -0,0 +1,360 @@
+<template>
+  <custom-modal v-model="visible" :width="1200" title="Nuclide Review" :footer="null">
+    <div class="nuclide-review-search">
+      <span>&lt;</span>
+      <a-form-model layout="inline">
+        <a-form-model-item label="Energy">
+          <a-input-number></a-input-number>
+        </a-form-model-item>
+        <a-form-model-item label="Tolerance">
+          <a-input-number></a-input-number>
+        </a-form-model-item>
+        <a-button type="primary">Search</a-button>
+      </a-form-model>
+      <span>&gt;</span>
+    </div>
+
+    <!-- 以下是表格部分 -->
+    <div class="nuclide-review-table">
+      <div class="nuclide-review-table-nuclide">
+        <div class="nuclide-review-table-nuclide-header">Nuclide</div>
+        <div class="nuclide-review-table-nuclide-content">
+          <div
+            class="nuclide-review-table-nuclide-item"
+            :class="currNuclide == item ? 'active' : ''"
+            v-for="item in nuclideList"
+            :key="item.id"
+            @click="handleNuclideClick(item)"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+      </div>
+      <div class="nuclide-review-table-table">
+        <div class="title">
+          <a-form-model>
+            <a-row>
+              <a-col :span="6">
+                <a-form-model-item label="Name">
+                  1
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-model-item label="Half Life">
+                  2
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-model-item label="Half Life Err">
+                  3
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-model-item label="Lines">
+                  4
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+        <a-table
+          :class="list.length ? 'has-data' : ''"
+          :columns="columns"
+          :dataSource="list"
+          :scroll="{ y: 180 }"
+          :customRow="customRow"
+          :pagination="false"
+        />
+      </div>
+    </div>
+    <!-- 表格部分结束 -->
+
+    <!-- 以下是图表部分 -->
+    <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>
+      </a-row>
+
+      <div class="nuclide-review-chart-prev"></div>
+      <div class="nuclide-review-chart-next"></div>
+    </div>
+    <!-- 图表部分结束 -->
+  </custom-modal>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Id',
+    dataIndex: 'id',
+    width: '5%'
+  },
+  {
+    title: 'Full Name',
+    dataIndex: 'fullName',
+    width: '15%'
+  },
+  {
+    title: 'Energy',
+    dataIndex: 'energy',
+    width: '15%'
+  },
+  {
+    title: 'Energy Err',
+    dataIndex: 'energyErr',
+    width: '15%'
+  },
+  {
+    title: 'Abundance(%)',
+    dataIndex: 'abundance',
+    width: '15%'
+  },
+  {
+    title: 'AbundanceErr(%)',
+    dataIndex: 'abundanceErr',
+    width: '15%'
+  },
+  {
+    title: 'KeyLine',
+    dataIndex: 'keyLine',
+    width: '15%'
+  }
+]
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    this.columns = columns
+    return {
+      nuclideList: [
+        {
+          id: 1,
+          title: 'Ag111'
+        },
+        {
+          id: 2,
+          title: 'Eu157'
+        },
+        {
+          id: 3,
+          title: 'Mo99'
+        },
+        {
+          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'
+        }
+      ],
+      currNuclide: {},
+
+      currTableItem: {} // 选中的表格中的行
+    }
+  },
+  methods: {
+    handleNuclideClick(item) {
+      this.currNuclide = item
+    },
+
+    // 实现单击选中/反选功能
+    customRow(record) {
+      return {
+        class: 'custom-table-row' + (this.currTableItem == record ? ' ant-table-row-selected' : ''),
+        on: {
+          click: () => {
+            this.currTableItem = record
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        if (this.value) {
+          this.content = ''
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nuclide-review {
+  &-search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid rgba(12, 235, 201, 0.3);
+    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+    background-color: rgba(12, 235, 201, 0.05);
+
+    > span {
+      color: @primary-color;
+      width: 30px;
+      height: 30px;
+      border: 1px solid @primary-color;
+      border-radius: 50%;
+      margin: 0 10px;
+      text-align: center;
+      font-size: 20px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .ant-form {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-table {
+    display: flex;
+    height: 250px;
+    margin-top: 10px;
+
+    &-nuclide {
+      width: 150px;
+      display: flex;
+      flex-direction: column;
+
+      &-header {
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background-color: #126b82;
+      }
+
+      &-content {
+        background-color: #275466;
+        flex: 1;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      &-item {
+        padding: 0 5px;
+        height: 30px;
+        line-height: 30px;
+        cursor: pointer;
+
+        &.active {
+          background-color: #296d81;
+        }
+      }
+    }
+
+    &-table {
+      margin-left: 20px;
+      flex: 1;
+      overflow: hidden;
+
+      .title {
+        ::v-deep {
+          .ant-form {
+            &-item {
+              margin-bottom: 0;
+
+              &-label,
+              &-control {
+                line-height: 32px;
+              }
+            }
+          }
+        }
+      }
+
+      .ant-table-wrapper {
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 180px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 181px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+
+  &-chart {
+    margin-top: 20px;
+    height: 300px;
+    background-color: #05354c;
+
+    &-item {
+      width: 33%;
+    }
+  }
+}
+
+.custom-table-row {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
new file mode 100644
index 0000000..e84bfbe
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -0,0 +1,459 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
+    <div class="interactive-analysis-tools">
+      <div class="interactive-analysis-tools-left">
+        <div class="chart">
+          <custom-chart :option="option" />
+        </div>
+        <div class="thumbnail"></div>
+        <div class="table">
+          <p class="title">
+            &lt; 6 Peaks with Anthro.Nuclides &gt;
+          </p>
+          <custom-table
+            :class="list.length ? 'has-data' : ''"
+            :list="list"
+            :columns="columns"
+            :scroll="{ y: 288 }"
+            :selectedRowKeys.sync="selectedKeys"
+          >
+          </custom-table>
+          <div class="operators">
+            <a-button type="primary">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>
+        </div>
+      </div>
+      <div class="interactive-analysis-tools-right">
+        <title-over-boarder title="Peak">
+          <div class="peak-box">
+            <!-- 按钮组1 -->
+            <template v-if="btnGroupType == 1">
+              <div class="peak-box-item">
+                <a-button type="primary">Insert</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">Delete</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">Fit</a-button>
+              </div>
+
+              <div class="peak-box-item symbol" :key="4">
+                <a-button type="primary">&lt;</a-button>
+                <a-button type="primary">&gt;</a-button>
+              </div>
+
+              <div class="peak-box-item base-line">
+                <a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
+              </div>
+            </template>
+            <!-- 按钮组2 -->
+            <template v-if="btnGroupType == 2">
+              <div class="peak-box-item">
+                <a-button type="primary">(A)dd CP</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">(R)emove CP</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">(M)odify CP</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">Edit (S)lope</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">Undo</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary">Replot</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
+              </div>
+              <div class="peak-box-item">
+                <a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
+              </div>
+            </template>
+          </div>
+        </title-over-boarder>
+        <div class="reset-btn-box">
+          <a-button type="primary">Reset Chart</a-button>
+        </div>
+        <div class="identify-box">
+          <title-over-boarder title="Nuclide Identify">
+            <a-form-model class="tolerance">
+              <a-form-model-item label="Tolerance">
+                <a-input-number></a-input-number>
+              </a-form-model-item>
+            </a-form-model>
+            <div class="identify-item">
+              <div class="title">
+                Possible Nuclide
+              </div>
+              <div class="content"></div>
+            </div>
+            <div class="identify-item">
+              <div class="title">
+                Nuclide Identified
+              </div>
+              <div class="content"></div>
+            </div>
+            <div class="identify-operators">
+              <a-space>
+                <a-input></a-input>
+                <a-button type="primary">Add</a-button>
+                <a-button type="primary" @click="handleDel">Del</a-button>
+              </a-space>
+            </div>
+          </title-over-boarder>
+        </div>
+      </div>
+    </div>
+
+    <!-- Comment弹窗 开始 -->
+    <comment-modal v-model="commentModalVisible" :type="commentType" />
+    <!-- Comment弹窗 结束 -->
+    <!-- Fit Peaks and Baseline弹窗 开始 -->
+    <fit-peaks-and-base-line-modal v-model="fitPeaksAndBaselineModalVisible" />
+    <!-- Fit Peaks and Baseline弹窗 结束 -->
+    <!-- Nuclide Review 弹窗开始 -->
+    <nuclide-review-modal v-model="nuclideReviewModalVisible" />
+    <!-- Nuclide Review 弹窗结束 -->
+  </custom-modal>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import TitleOverBoarder from '../../TitleOverBoarder.vue'
+import CommentModal from './components/CommentModal.vue'
+import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
+import NuclideReviewModal from './components/NuclideReviewModal.vue'
+
+const initialOption = {
+  grid: {
+    top: 20,
+    bottom: 20,
+    left: 100,
+    right: 20
+  },
+  xAxis: {
+    min: 1,
+    max: 8192,
+    interval: 1143,
+    axisLabel: {
+      color: '#fff'
+    },
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    min: 1,
+    max: 994914,
+    axisLabel: {
+      color: '#fff'
+    },
+    name: 'Counts',
+    nameLocation: 'center',
+    nameGap: 60,
+    nameTextStyle: {
+      fontSize: 16,
+      color: '#5b9cba'
+    },
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#FCFE02'
+      }
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#F87E28'
+      }
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#01F6FE'
+      }
+    }
+  ]
+}
+
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    width: 60
+  },
+  {
+    title: 'Energy (keV)',
+    dataIndex: 'energy',
+    width: 120
+  },
+  {
+    title: 'Centroid (C)',
+    dataIndex: 'centroid',
+    width: 120
+  },
+  {
+    title: 'FWHM (keV)',
+    dataIndex: 'fwhm',
+    width: 120
+  },
+  {
+    title: 'Area',
+    dataIndex: 'area',
+    width: 120
+  },
+  {
+    title: 'Detectability',
+    dataIndex: 'detectability',
+    width: 120
+  },
+  {
+    title: 'Cmnt',
+    dataIndex: 'cmnt',
+    width: 120
+  },
+  {
+    title: 'Nuclides',
+    dataIndex: 'nuclides',
+    width: 120
+  }
+]
+
+export default {
+  props: {
+    value: {
+      type: Boolean
+    }
+  },
+  components: {
+    CustomChart,
+    TitleOverBoarder,
+    CommentModal,
+    FitPeaksAndBaseLineModal,
+    NuclideReviewModal
+  },
+  data() {
+    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'
+      })),
+      commentModalVisible: false, // Comment 弹窗是否显示
+      commentType: 'Peak',
+
+      btnGroupType: 1, // 右侧 Peak 中的按钮组切换
+
+      selectedKeys: [], // 选中的列表
+
+      fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
+      nuclideReviewModalVisible: true // Nuclide Review 弹窗
+    }
+  },
+  methods: {
+    // 显示comment弹窗
+    handleAddComment(type) {
+      this.commentType = type
+      this.commentModalVisible = true
+    },
+
+    // 删除
+    handleDel() {
+      if (!this.selectedKeys.length) {
+        this.$message.warn('Please Select At Least 1 Peak To Delete')
+        return
+      }
+
+      this.$warning({
+        title: 'Warning',
+        content: 'Are you sure to delete this peak?',
+        onOk: () => {
+          console.log('%c [  ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
+        }
+      })
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.interactive-analysis-tools {
+  display: flex;
+
+  &-left {
+    width: 75%;
+    margin-right: 20px;
+
+    .chart {
+      height: 331px;
+    }
+
+    .thumbnail {
+      height: 50px;
+      margin-top: 10px;
+      margin-bottom: 35px;
+      background-color: #255369;
+    }
+
+    .table {
+      .title {
+        color: #0cebc9;
+        font-size: 20px;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+
+      .custom-table {
+        &.has-data {
+          ::v-deep {
+            .ant-table-body {
+              height: 288px;
+              background-color: #06282a;
+            }
+          }
+        }
+
+        ::v-deep {
+          .ant-table-placeholder {
+            height: 289px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .operators {
+        display: flex;
+        margin-top: 10px;
+        gap: 10px;
+
+        .ant-btn {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &-right {
+    .peak-box {
+      height: 326px;
+
+      &-item:not(:last-child) {
+        margin-bottom: 10px;
+      }
+
+      .symbol {
+        display: flex;
+
+        .ant-btn {
+          flex: 1;
+
+          &:first-child {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    .base-line {
+      margin-top: 136px;
+    }
+
+    .reset-btn-box {
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+
+    .identify-box {
+      .tolerance {
+        ::v-deep {
+          .ant-form-item {
+            margin-bottom: 10px;
+
+            &-control-wrapper {
+              flex: 1;
+            }
+
+            &-control {
+              width: 100%;
+            }
+          }
+        }
+
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+
+      .identify-item {
+        .title {
+          background-color: #497e9d;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 16px;
+        }
+
+        .content {
+          height: 80px;
+          background-color: #275466;
+          margin: 10px 0;
+        }
+      }
+
+      .identify-operators {
+        display: flex;
+
+        .ant-btn {
+          width: 50px;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+
+  .ant-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index f93e8d6..6be16e6 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -26,7 +26,7 @@
           <a-radio value="auto">From Auto DB</a-radio>
           <a-radio value="man">From Interactive DB</a-radio>
         </a-radio-group>
-        <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+        <a-button type="primary" @click="handleLoad">Load</a-button>
       </a-space>
     </template>
   </custom-modal>
@@ -107,7 +107,7 @@ export default {
     this.disableMixinCreated = true
     return {
       queryParam: {
-        menuTypes: [],
+        menuTypes: undefined,
         startDate: moment()
           .add(-7, 'd')
           .format('YYYY-MM-DD'),
@@ -121,8 +121,7 @@ export default {
       detectorList: [],
       url: {
         list: '/spectrumAnalysis/getDBSpectrumList'
-      },
-      isLoadingSample: false // 正在加载样例
+      }
     }
   },
   methods: {
@@ -185,14 +184,9 @@ export default {
         this.$message.warn('Please Select Databases To Load')
         return
       }
-
-      console.log('%c [  ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectionRows)
-      this.isLoadingSample = true
-      const res = await ''
-      console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
       this.selectedRowKeys = []
-      this.isLoadingSample = false
       this.visible = false
+      this.$emit('loadSample', this.selectionRows)
     },
 
     // 获取台站和探测器列表
diff --git a/src/views/spectrumAnalysis/components/SpectraListInMenu.vue b/src/views/spectrumAnalysis/components/SpectraListInMenu.vue
index ae86d3e..29bbd00 100644
--- a/src/views/spectrumAnalysis/components/SpectraListInMenu.vue
+++ b/src/views/spectrumAnalysis/components/SpectraListInMenu.vue
@@ -1,10 +1,10 @@
 <template>
   <a-menu class="spectra-list-in-menu">
-    <a-menu-item v-for="item in list" :key="item.id" @click="handleClick(item)">
+    <a-menu-item v-for="item in list" :key="item.sampleId" @click="handleClick(item)">
       <span class="checkbox">
         <a-icon v-if="item.checked" type="check" style="color: #0de30d" />
       </span>
-      <span class="name">{{ item.name }}</span>
+      <span class="name">{{ getFileName(item.inputFileName) }}</span>
       <a-icon type="delete" @click.stop="handleRemove(item)" />
     </a-menu-item>
   </a-menu>
@@ -40,6 +40,24 @@ export default {
         }
       }
       this.$forceUpdate()
+    },
+
+    /**
+     * 获取文件名
+     * @param {String} inputFileName
+     */
+    getFileName(inputFileName) {
+      if (inputFileName) {
+        const arr = inputFileName.split('/')
+        return arr[arr.length - 1]
+      }
+    }
+  },
+  watch: {
+    list(newVal) {
+      if (newVal.length) {
+        this.handleClick(newVal[0])
+      }
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
index 88f7373..b3f38f8 100644
--- a/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
+++ b/src/views/spectrumAnalysis/components/SpectrumLineChart.vue
@@ -66,8 +66,8 @@ const initialOption = {
   },
   yAxis: {
     min: 0,
-    max: 21099,
-    interval: 21000 / 4,
+    max: 0,
+    interval: 0,
     axisLine: {
       show: true,
       lineStyle: {
@@ -92,12 +92,7 @@ const initialOption = {
       color: ''
     },
     symbol: 'none',
-    data: new Array(256)
-      .fill(0)
-      .map((_, index) => [
-        index,
-        Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)
-      ]),
+    data: [],
     markLine: {
       symbol: 'none',
       animation: false,
@@ -127,6 +122,10 @@ export default {
     title: {
       type: String,
       default: 'Gamma'
+    },
+    data: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -157,7 +156,10 @@ export default {
         if (xAxis) {
           this.option.series.markLine.data = [{ xAxis }]
           this.summary.channel = xAxis
-          this.summary.count = this.option.series.data[xAxis][1]
+          const find = this.data.find(item => item.x == xAxis)
+          if (find) {
+            this.summary.count = find.y
+          }
         } else {
           this.option.series.markLine.data = []
           this.summary.channel = 0
@@ -244,6 +246,18 @@ export default {
     emitRangeChange(range) {
       this.$emit('rangeChange', range)
     }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.option.series.data = newVal.map(({ x, y }) => [x, y])
+
+        const max = Math.max(...newVal.map(item => item.y))
+        this.option.yAxis.interval = Math.ceil(max / 4)
+        this.option.yAxis.max = this.option.yAxis.interval * 4
+      },
+      immediate: true
+    }
   }
 }
 </script>
diff --git a/src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue b/src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
index b99a8f0..c1a2340 100644
--- a/src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
+++ b/src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="btn-with-switch-icon">
-    <img src="@/assets/images/spectrum/left-arrow.png" @click="handleClick('left')" />
+    <i @click="handleClick('left')">
+      <img src="@/assets/images/spectrum/left-arrow.png" />
+    </i>
     <span>
       <slot></slot>
     </span>
-    <img src="@/assets/images/spectrum/right-arrow.png" @click="handleClick('right')" />
+    <i @click="handleClick('right')">
+      <img src="@/assets/images/spectrum/right-arrow.png" />
+    </i>
   </div>
 </template>
 
@@ -24,20 +28,21 @@ export default {
   justify-content: space-between;
   align-items: center;
   border: 1px solid #0a544e;
-  padding: 0 12px;
+  padding: 0 4px;
   height: 100%;
   letter-spacing: 1px;
   color: #ade6ee;
 
+  i {
+    cursor: pointer;
+    width: 16px;
+    text-align: center;
+  }
+
   span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin: 0 5px;
-  }
-
-  img {
-    cursor: pointer;
   }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/data.json b/src/views/spectrumAnalysis/data.json
deleted file mode 100644
index cbb96c9..0000000
--- a/src/views/spectrumAnalysis/data.json
+++ /dev/null
@@ -1,4195 +0,0 @@
-{
-    "10-50": [],
-    "50-100": [],
-    "> 100": [],
-    "1-5": [
-        {
-            "b": 7,
-            "g": 2,
-            "c": 2
-        },
-        {
-            "b": 6,
-            "g": 3,
-            "c": 2
-        },
-        {
-            "b": 6,
-            "g": 4,
-            "c": 2
-        },
-        {
-            "b": 8,
-            "g": 4,
-            "c": 2
-        },
-        {
-            "b": 14,
-            "g": 15,
-            "c": 2
-        },
-        {
-            "b": 3,
-            "g": 47,
-            "c": 2
-        },
-        {
-            "b": 19,
-            "g": 51,
-            "c": 2
-        },
-        {
-            "b": 127,
-            "g": 75,
-            "c": 2
-        },
-        {
-            "b": 34,
-            "g": 82,
-            "c": 2
-        },
-        {
-            "b": 23,
-            "g": 83,
-            "c": 2
-        },
-        {
-            "b": 10,
-            "g": 101,
-            "c": 2
-        },
-        {
-            "b": 34,
-            "g": 169,
-            "c": 2
-        }
-    ],
-    "= 1": [
-        {
-            "b": 18,
-            "g": 1,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 1,
-            "c": 1
-        },
-        {
-            "b": 80,
-            "g": 1,
-            "c": 1
-        },
-        {
-            "b": 142,
-            "g": 1,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 2,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 2,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 2,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 30,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 80,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 145,
-            "g": 3,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 4,
-            "c": 1
-        },
-        {
-            "b": 105,
-            "g": 4,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 89,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 118,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 5,
-            "c": 1
-        },
-        {
-            "b": 2,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 28,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 55,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 75,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 117,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 161,
-            "g": 6,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 7,
-            "c": 1
-        },
-        {
-            "b": 165,
-            "g": 7,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 8,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 8,
-            "c": 1
-        },
-        {
-            "b": 111,
-            "g": 8,
-            "c": 1
-        },
-        {
-            "b": 137,
-            "g": 8,
-            "c": 1
-        },
-        {
-            "b": 214,
-            "g": 8,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 9,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 9,
-            "c": 1
-        },
-        {
-            "b": 70,
-            "g": 9,
-            "c": 1
-        },
-        {
-            "b": 132,
-            "g": 9,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 44,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 116,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 172,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 173,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 215,
-            "g": 10,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 99,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 111,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 145,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 161,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 240,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 244,
-            "g": 11,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 12,
-            "c": 1
-        },
-        {
-            "b": 111,
-            "g": 12,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 13,
-            "c": 1
-        },
-        {
-            "b": 38,
-            "g": 13,
-            "c": 1
-        },
-        {
-            "b": 92,
-            "g": 13,
-            "c": 1
-        },
-        {
-            "b": 117,
-            "g": 13,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 14,
-            "c": 1
-        },
-        {
-            "b": 125,
-            "g": 14,
-            "c": 1
-        },
-        {
-            "b": 201,
-            "g": 14,
-            "c": 1
-        },
-        {
-            "b": 233,
-            "g": 14,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 15,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 15,
-            "c": 1
-        },
-        {
-            "b": 97,
-            "g": 15,
-            "c": 1
-        },
-        {
-            "b": 217,
-            "g": 15,
-            "c": 1
-        },
-        {
-            "b": 241,
-            "g": 15,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 16,
-            "c": 1
-        },
-        {
-            "b": 251,
-            "g": 16,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 17,
-            "c": 1
-        },
-        {
-            "b": 166,
-            "g": 17,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 84,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 135,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 139,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 203,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 246,
-            "g": 18,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 19,
-            "c": 1
-        },
-        {
-            "b": 249,
-            "g": 19,
-            "c": 1
-        },
-        {
-            "b": 251,
-            "g": 19,
-            "c": 1
-        },
-        {
-            "b": 2,
-            "g": 20,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 20,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 20,
-            "c": 1
-        },
-        {
-            "b": 86,
-            "g": 20,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 58,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 131,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 144,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 159,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 203,
-            "g": 21,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 109,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 163,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 192,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 235,
-            "g": 22,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 23,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 23,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 23,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 23,
-            "c": 1
-        },
-        {
-            "b": 79,
-            "g": 23,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 24,
-            "c": 1
-        },
-        {
-            "b": 78,
-            "g": 24,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 25,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 25,
-            "c": 1
-        },
-        {
-            "b": 223,
-            "g": 25,
-            "c": 1
-        },
-        {
-            "b": 234,
-            "g": 25,
-            "c": 1
-        },
-        {
-            "b": 2,
-            "g": 26,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 26,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 26,
-            "c": 1
-        },
-        {
-            "b": 136,
-            "g": 26,
-            "c": 1
-        },
-        {
-            "b": 231,
-            "g": 26,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 27,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 27,
-            "c": 1
-        },
-        {
-            "b": 51,
-            "g": 27,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 27,
-            "c": 1
-        },
-        {
-            "b": 98,
-            "g": 27,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 28,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 28,
-            "c": 1
-        },
-        {
-            "b": 110,
-            "g": 28,
-            "c": 1
-        },
-        {
-            "b": 121,
-            "g": 28,
-            "c": 1
-        },
-        {
-            "b": 148,
-            "g": 28,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 29,
-            "c": 1
-        },
-        {
-            "b": 96,
-            "g": 29,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 29,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 29,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 94,
-            "g": 30,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 31,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 31,
-            "c": 1
-        },
-        {
-            "b": 153,
-            "g": 31,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 33,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 127,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 225,
-            "g": 32,
-            "c": 1
-        },
-        {
-            "b": 68,
-            "g": 33,
-            "c": 1
-        },
-        {
-            "b": 74,
-            "g": 33,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 33,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 34,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 34,
-            "c": 1
-        },
-        {
-            "b": 167,
-            "g": 34,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 35,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 35,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 36,
-            "c": 1
-        },
-        {
-            "b": 89,
-            "g": 36,
-            "c": 1
-        },
-        {
-            "b": 143,
-            "g": 36,
-            "c": 1
-        },
-        {
-            "b": 186,
-            "g": 36,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 37,
-            "c": 1
-        },
-        {
-            "b": 48,
-            "g": 37,
-            "c": 1
-        },
-        {
-            "b": 66,
-            "g": 37,
-            "c": 1
-        },
-        {
-            "b": 157,
-            "g": 37,
-            "c": 1
-        },
-        {
-            "b": 221,
-            "g": 38,
-            "c": 1
-        },
-        {
-            "b": 234,
-            "g": 38,
-            "c": 1
-        },
-        {
-            "b": 44,
-            "g": 39,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 27,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 52,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 130,
-            "g": 40,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 41,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 30,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 31,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 42,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 43,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 43,
-            "c": 1
-        },
-        {
-            "b": 97,
-            "g": 43,
-            "c": 1
-        },
-        {
-            "b": 152,
-            "g": 43,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 44,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 44,
-            "c": 1
-        },
-        {
-            "b": 131,
-            "g": 44,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 45,
-            "c": 1
-        },
-        {
-            "b": 235,
-            "g": 45,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 201,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 231,
-            "g": 46,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 28,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 103,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 198,
-            "g": 47,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 48,
-            "c": 1
-        },
-        {
-            "b": 57,
-            "g": 48,
-            "c": 1
-        },
-        {
-            "b": 70,
-            "g": 48,
-            "c": 1
-        },
-        {
-            "b": 228,
-            "g": 48,
-            "c": 1
-        },
-        {
-            "b": 247,
-            "g": 48,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 49,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 49,
-            "c": 1
-        },
-        {
-            "b": 119,
-            "g": 49,
-            "c": 1
-        },
-        {
-            "b": 144,
-            "g": 49,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 50,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 50,
-            "c": 1
-        },
-        {
-            "b": 168,
-            "g": 50,
-            "c": 1
-        },
-        {
-            "b": 206,
-            "g": 50,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 137,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 218,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 225,
-            "g": 51,
-            "c": 1
-        },
-        {
-            "b": 2,
-            "g": 52,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 52,
-            "c": 1
-        },
-        {
-            "b": 30,
-            "g": 52,
-            "c": 1
-        },
-        {
-            "b": 196,
-            "g": 52,
-            "c": 1
-        },
-        {
-            "b": 250,
-            "g": 52,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 53,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 53,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 53,
-            "c": 1
-        },
-        {
-            "b": 66,
-            "g": 53,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 54,
-            "c": 1
-        },
-        {
-            "b": 48,
-            "g": 54,
-            "c": 1
-        },
-        {
-            "b": 55,
-            "g": 54,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 54,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 55,
-            "c": 1
-        },
-        {
-            "b": 44,
-            "g": 55,
-            "c": 1
-        },
-        {
-            "b": 87,
-            "g": 55,
-            "c": 1
-        },
-        {
-            "b": 126,
-            "g": 55,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 56,
-            "c": 1
-        },
-        {
-            "b": 84,
-            "g": 56,
-            "c": 1
-        },
-        {
-            "b": 97,
-            "g": 56,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 43,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 54,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 57,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 163,
-            "g": 57,
-            "c": 1
-        },
-        {
-            "b": 27,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 65,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 87,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 111,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 113,
-            "g": 58,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 59,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 59,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 59,
-            "c": 1
-        },
-        {
-            "b": 169,
-            "g": 59,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 86,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 101,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 119,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 148,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 223,
-            "g": 60,
-            "c": 1
-        },
-        {
-            "b": 27,
-            "g": 61,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 61,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 61,
-            "c": 1
-        },
-        {
-            "b": 43,
-            "g": 61,
-            "c": 1
-        },
-        {
-            "b": 86,
-            "g": 61,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 46,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 157,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 158,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 207,
-            "g": 62,
-            "c": 1
-        },
-        {
-            "b": 56,
-            "g": 63,
-            "c": 1
-        },
-        {
-            "b": 179,
-            "g": 63,
-            "c": 1
-        },
-        {
-            "b": 38,
-            "g": 64,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 64,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 64,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 30,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 54,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 60,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 117,
-            "g": 65,
-            "c": 1
-        },
-        {
-            "b": 82,
-            "g": 66,
-            "c": 1
-        },
-        {
-            "b": 139,
-            "g": 66,
-            "c": 1
-        },
-        {
-            "b": 147,
-            "g": 66,
-            "c": 1
-        },
-        {
-            "b": 159,
-            "g": 66,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 111,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 114,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 166,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 186,
-            "g": 67,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 68,
-            "c": 1
-        },
-        {
-            "b": 87,
-            "g": 68,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 68,
-            "c": 1
-        },
-        {
-            "b": 151,
-            "g": 68,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 69,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 69,
-            "c": 1
-        },
-        {
-            "b": 59,
-            "g": 69,
-            "c": 1
-        },
-        {
-            "b": 83,
-            "g": 69,
-            "c": 1
-        },
-        {
-            "b": 161,
-            "g": 69,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 31,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 34,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 48,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 148,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 202,
-            "g": 70,
-            "c": 1
-        },
-        {
-            "b": 59,
-            "g": 71,
-            "c": 1
-        },
-        {
-            "b": 74,
-            "g": 71,
-            "c": 1
-        },
-        {
-            "b": 103,
-            "g": 71,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 49,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 71,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 74,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 132,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 133,
-            "g": 72,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 44,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 129,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 136,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 157,
-            "g": 73,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 67,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 69,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 109,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 139,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 142,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 146,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 180,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 203,
-            "g": 74,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 52,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 55,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 122,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 155,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 175,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 226,
-            "g": 75,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 134,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 142,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 197,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 203,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 244,
-            "g": 76,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 52,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 60,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 84,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 105,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 128,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 192,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 216,
-            "g": 77,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 53,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 56,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 75,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 132,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 143,
-            "g": 78,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 51,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 96,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 79,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 75,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 104,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 244,
-            "g": 80,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 81,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 81,
-            "c": 1
-        },
-        {
-            "b": 53,
-            "g": 81,
-            "c": 1
-        },
-        {
-            "b": 245,
-            "g": 81,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 82,
-            "c": 1
-        },
-        {
-            "b": 193,
-            "g": 82,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 33,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 34,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 51,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 193,
-            "g": 83,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 18,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 40,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 80,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 141,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 215,
-            "g": 84,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 48,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 63,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 87,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 96,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 85,
-            "c": 1
-        },
-        {
-            "b": 171,
-            "g": 86,
-            "c": 1
-        },
-        {
-            "b": 205,
-            "g": 86,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 87,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 87,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 87,
-            "c": 1
-        },
-        {
-            "b": 147,
-            "g": 87,
-            "c": 1
-        },
-        {
-            "b": 238,
-            "g": 87,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 56,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 194,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 201,
-            "g": 88,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 90,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 95,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 135,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 202,
-            "g": 89,
-            "c": 1
-        },
-        {
-            "b": 241,
-            "g": 90,
-            "c": 1
-        },
-        {
-            "b": 2,
-            "g": 91,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 91,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 91,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 92,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 92,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 92,
-            "c": 1
-        },
-        {
-            "b": 53,
-            "g": 92,
-            "c": 1
-        },
-        {
-            "b": 145,
-            "g": 92,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 18,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 53,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 149,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 152,
-            "g": 93,
-            "c": 1
-        },
-        {
-            "b": 63,
-            "g": 94,
-            "c": 1
-        },
-        {
-            "b": 183,
-            "g": 94,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 56,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 86,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 187,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 190,
-            "g": 95,
-            "c": 1
-        },
-        {
-            "b": 65,
-            "g": 96,
-            "c": 1
-        },
-        {
-            "b": 133,
-            "g": 96,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 97,
-            "c": 1
-        },
-        {
-            "b": 103,
-            "g": 97,
-            "c": 1
-        },
-        {
-            "b": 159,
-            "g": 97,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 98,
-            "c": 1
-        },
-        {
-            "b": 81,
-            "g": 98,
-            "c": 1
-        },
-        {
-            "b": 208,
-            "g": 98,
-            "c": 1
-        },
-        {
-            "b": 180,
-            "g": 99,
-            "c": 1
-        },
-        {
-            "b": 215,
-            "g": 99,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 100,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 100,
-            "c": 1
-        },
-        {
-            "b": 75,
-            "g": 100,
-            "c": 1
-        },
-        {
-            "b": 137,
-            "g": 100,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 135,
-            "g": 101,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 102,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 102,
-            "c": 1
-        },
-        {
-            "b": 28,
-            "g": 102,
-            "c": 1
-        },
-        {
-            "b": 167,
-            "g": 102,
-            "c": 1
-        },
-        {
-            "b": 225,
-            "g": 103,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 104,
-            "c": 1
-        },
-        {
-            "b": 117,
-            "g": 105,
-            "c": 1
-        },
-        {
-            "b": 135,
-            "g": 105,
-            "c": 1
-        },
-        {
-            "b": 168,
-            "g": 105,
-            "c": 1
-        },
-        {
-            "b": 214,
-            "g": 105,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 106,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 106,
-            "c": 1
-        },
-        {
-            "b": 149,
-            "g": 106,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 107,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 107,
-            "c": 1
-        },
-        {
-            "b": 58,
-            "g": 107,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 55,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 210,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 242,
-            "g": 108,
-            "c": 1
-        },
-        {
-            "b": 34,
-            "g": 109,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 109,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 110,
-            "c": 1
-        },
-        {
-            "b": 75,
-            "g": 110,
-            "c": 1
-        },
-        {
-            "b": 244,
-            "g": 110,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 112,
-            "c": 1
-        },
-        {
-            "b": 28,
-            "g": 112,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 112,
-            "c": 1
-        },
-        {
-            "b": 63,
-            "g": 112,
-            "c": 1
-        },
-        {
-            "b": 70,
-            "g": 113,
-            "c": 1
-        },
-        {
-            "b": 189,
-            "g": 113,
-            "c": 1
-        },
-        {
-            "b": 223,
-            "g": 113,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 114,
-            "c": 1
-        },
-        {
-            "b": 91,
-            "g": 114,
-            "c": 1
-        },
-        {
-            "b": 105,
-            "g": 114,
-            "c": 1
-        },
-        {
-            "b": 128,
-            "g": 114,
-            "c": 1
-        },
-        {
-            "b": 65,
-            "g": 115,
-            "c": 1
-        },
-        {
-            "b": 163,
-            "g": 115,
-            "c": 1
-        },
-        {
-            "b": 205,
-            "g": 115,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 116,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 119,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 119,
-            "c": 1
-        },
-        {
-            "b": 88,
-            "g": 119,
-            "c": 1
-        },
-        {
-            "b": 180,
-            "g": 119,
-            "c": 1
-        },
-        {
-            "b": 95,
-            "g": 120,
-            "c": 1
-        },
-        {
-            "b": 109,
-            "g": 120,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 120,
-            "c": 1
-        },
-        {
-            "b": 208,
-            "g": 120,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 121,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 121,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 121,
-            "c": 1
-        },
-        {
-            "b": 44,
-            "g": 122,
-            "c": 1
-        },
-        {
-            "b": 108,
-            "g": 122,
-            "c": 1
-        },
-        {
-            "b": 18,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 57,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 123,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 235,
-            "g": 123,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 124,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 125,
-            "c": 1
-        },
-        {
-            "b": 74,
-            "g": 126,
-            "c": 1
-        },
-        {
-            "b": 146,
-            "g": 126,
-            "c": 1
-        },
-        {
-            "b": 156,
-            "g": 126,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 127,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 127,
-            "c": 1
-        },
-        {
-            "b": 73,
-            "g": 127,
-            "c": 1
-        },
-        {
-            "b": 147,
-            "g": 127,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 128,
-            "c": 1
-        },
-        {
-            "b": 31,
-            "g": 128,
-            "c": 1
-        },
-        {
-            "b": 117,
-            "g": 128,
-            "c": 1
-        },
-        {
-            "b": 126,
-            "g": 128,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 43,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 145,
-            "g": 129,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 131,
-            "c": 1
-        },
-        {
-            "b": 134,
-            "g": 131,
-            "c": 1
-        },
-        {
-            "b": 170,
-            "g": 131,
-            "c": 1
-        },
-        {
-            "b": 191,
-            "g": 131,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 132,
-            "c": 1
-        },
-        {
-            "b": 55,
-            "g": 132,
-            "c": 1
-        },
-        {
-            "b": 131,
-            "g": 132,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 133,
-            "c": 1
-        },
-        {
-            "b": 34,
-            "g": 133,
-            "c": 1
-        },
-        {
-            "b": 42,
-            "g": 133,
-            "c": 1
-        },
-        {
-            "b": 49,
-            "g": 133,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 134,
-            "c": 1
-        },
-        {
-            "b": 60,
-            "g": 134,
-            "c": 1
-        },
-        {
-            "b": 192,
-            "g": 134,
-            "c": 1
-        },
-        {
-            "b": 79,
-            "g": 135,
-            "c": 1
-        },
-        {
-            "b": 173,
-            "g": 135,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 136,
-            "c": 1
-        },
-        {
-            "b": 12,
-            "g": 136,
-            "c": 1
-        },
-        {
-            "b": 46,
-            "g": 136,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 137,
-            "c": 1
-        },
-        {
-            "b": 92,
-            "g": 138,
-            "c": 1
-        },
-        {
-            "b": 130,
-            "g": 138,
-            "c": 1
-        },
-        {
-            "b": 139,
-            "g": 138,
-            "c": 1
-        },
-        {
-            "b": 96,
-            "g": 139,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 140,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 140,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 140,
-            "c": 1
-        },
-        {
-            "b": 207,
-            "g": 140,
-            "c": 1
-        },
-        {
-            "b": 64,
-            "g": 141,
-            "c": 1
-        },
-        {
-            "b": 69,
-            "g": 141,
-            "c": 1
-        },
-        {
-            "b": 124,
-            "g": 141,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 141,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 142,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 143,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 143,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 143,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 143,
-            "c": 1
-        },
-        {
-            "b": 146,
-            "g": 143,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 144,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 144,
-            "c": 1
-        },
-        {
-            "b": 167,
-            "g": 144,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 145,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 145,
-            "c": 1
-        },
-        {
-            "b": 64,
-            "g": 145,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 146,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 148,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 148,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 149,
-            "c": 1
-        },
-        {
-            "b": 30,
-            "g": 149,
-            "c": 1
-        },
-        {
-            "b": 167,
-            "g": 150,
-            "c": 1
-        },
-        {
-            "b": 246,
-            "g": 150,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 151,
-            "c": 1
-        },
-        {
-            "b": 133,
-            "g": 151,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 152,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 152,
-            "c": 1
-        },
-        {
-            "b": 192,
-            "g": 152,
-            "c": 1
-        },
-        {
-            "b": 198,
-            "g": 153,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 154,
-            "c": 1
-        },
-        {
-            "b": 103,
-            "g": 154,
-            "c": 1
-        },
-        {
-            "b": 180,
-            "g": 154,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 155,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 156,
-            "c": 1
-        },
-        {
-            "b": 27,
-            "g": 156,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 157,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 157,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 157,
-            "c": 1
-        },
-        {
-            "b": 128,
-            "g": 157,
-            "c": 1
-        },
-        {
-            "b": 131,
-            "g": 157,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 158,
-            "c": 1
-        },
-        {
-            "b": 49,
-            "g": 159,
-            "c": 1
-        },
-        {
-            "b": 139,
-            "g": 159,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 160,
-            "c": 1
-        },
-        {
-            "b": 8,
-            "g": 161,
-            "c": 1
-        },
-        {
-            "b": 24,
-            "g": 161,
-            "c": 1
-        },
-        {
-            "b": 125,
-            "g": 161,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 162,
-            "c": 1
-        },
-        {
-            "b": 48,
-            "g": 162,
-            "c": 1
-        },
-        {
-            "b": 60,
-            "g": 162,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 163,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 163,
-            "c": 1
-        },
-        {
-            "b": 129,
-            "g": 163,
-            "c": 1
-        },
-        {
-            "b": 134,
-            "g": 164,
-            "c": 1
-        },
-        {
-            "b": 144,
-            "g": 164,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 165,
-            "c": 1
-        },
-        {
-            "b": 15,
-            "g": 165,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 166,
-            "c": 1
-        },
-        {
-            "b": 34,
-            "g": 166,
-            "c": 1
-        },
-        {
-            "b": 86,
-            "g": 166,
-            "c": 1
-        },
-        {
-            "b": 209,
-            "g": 166,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 167,
-            "c": 1
-        },
-        {
-            "b": 29,
-            "g": 167,
-            "c": 1
-        },
-        {
-            "b": 71,
-            "g": 167,
-            "c": 1
-        },
-        {
-            "b": 91,
-            "g": 167,
-            "c": 1
-        },
-        {
-            "b": 13,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 18,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 89,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 121,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 180,
-            "g": 168,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 169,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 170,
-            "c": 1
-        },
-        {
-            "b": 27,
-            "g": 170,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 170,
-            "c": 1
-        },
-        {
-            "b": 152,
-            "g": 170,
-            "c": 1
-        },
-        {
-            "b": 161,
-            "g": 170,
-            "c": 1
-        },
-        {
-            "b": 98,
-            "g": 171,
-            "c": 1
-        },
-        {
-            "b": 124,
-            "g": 171,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 172,
-            "c": 1
-        },
-        {
-            "b": 66,
-            "g": 172,
-            "c": 1
-        },
-        {
-            "b": 71,
-            "g": 172,
-            "c": 1
-        },
-        {
-            "b": 84,
-            "g": 172,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 173,
-            "c": 1
-        },
-        {
-            "b": 164,
-            "g": 173,
-            "c": 1
-        },
-        {
-            "b": 10,
-            "g": 174,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 175,
-            "c": 1
-        },
-        {
-            "b": 57,
-            "g": 175,
-            "c": 1
-        },
-        {
-            "b": 223,
-            "g": 175,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 176,
-            "c": 1
-        },
-        {
-            "b": 99,
-            "g": 176,
-            "c": 1
-        },
-        {
-            "b": 195,
-            "g": 177,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 178,
-            "c": 1
-        },
-        {
-            "b": 127,
-            "g": 178,
-            "c": 1
-        },
-        {
-            "b": 129,
-            "g": 178,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 179,
-            "c": 1
-        },
-        {
-            "b": 246,
-            "g": 179,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 180,
-            "c": 1
-        },
-        {
-            "b": 37,
-            "g": 180,
-            "c": 1
-        },
-        {
-            "b": 66,
-            "g": 180,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 181,
-            "c": 1
-        },
-        {
-            "b": 173,
-            "g": 181,
-            "c": 1
-        },
-        {
-            "b": 25,
-            "g": 182,
-            "c": 1
-        },
-        {
-            "b": 51,
-            "g": 182,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 184,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 185,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 185,
-            "c": 1
-        },
-        {
-            "b": 17,
-            "g": 186,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 186,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 186,
-            "c": 1
-        },
-        {
-            "b": 149,
-            "g": 187,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 188,
-            "c": 1
-        },
-        {
-            "b": 106,
-            "g": 189,
-            "c": 1
-        },
-        {
-            "b": 206,
-            "g": 189,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 190,
-            "c": 1
-        },
-        {
-            "b": 85,
-            "g": 190,
-            "c": 1
-        },
-        {
-            "b": 80,
-            "g": 191,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 192,
-            "c": 1
-        },
-        {
-            "b": 93,
-            "g": 193,
-            "c": 1
-        },
-        {
-            "b": 170,
-            "g": 193,
-            "c": 1
-        },
-        {
-            "b": 31,
-            "g": 194,
-            "c": 1
-        },
-        {
-            "b": 161,
-            "g": 194,
-            "c": 1
-        },
-        {
-            "b": 39,
-            "g": 195,
-            "c": 1
-        },
-        {
-            "b": 179,
-            "g": 195,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 196,
-            "c": 1
-        },
-        {
-            "b": 21,
-            "g": 196,
-            "c": 1
-        },
-        {
-            "b": 125,
-            "g": 198,
-            "c": 1
-        },
-        {
-            "b": 3,
-            "g": 199,
-            "c": 1
-        },
-        {
-            "b": 7,
-            "g": 199,
-            "c": 1
-        },
-        {
-            "b": 245,
-            "g": 199,
-            "c": 1
-        },
-        {
-            "b": 115,
-            "g": 200,
-            "c": 1
-        },
-        {
-            "b": 129,
-            "g": 200,
-            "c": 1
-        },
-        {
-            "b": 77,
-            "g": 201,
-            "c": 1
-        },
-        {
-            "b": 171,
-            "g": 201,
-            "c": 1
-        },
-        {
-            "b": 244,
-            "g": 201,
-            "c": 1
-        },
-        {
-            "b": 19,
-            "g": 202,
-            "c": 1
-        },
-        {
-            "b": 33,
-            "g": 202,
-            "c": 1
-        },
-        {
-            "b": 43,
-            "g": 202,
-            "c": 1
-        },
-        {
-            "b": 166,
-            "g": 202,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 203,
-            "c": 1
-        },
-        {
-            "b": 247,
-            "g": 204,
-            "c": 1
-        },
-        {
-            "b": 251,
-            "g": 204,
-            "c": 1
-        },
-        {
-            "b": 23,
-            "g": 205,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 205,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 208,
-            "c": 1
-        },
-        {
-            "b": 29,
-            "g": 208,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 208,
-            "c": 1
-        },
-        {
-            "b": 4,
-            "g": 209,
-            "c": 1
-        },
-        {
-            "b": 29,
-            "g": 209,
-            "c": 1
-        },
-        {
-            "b": 43,
-            "g": 209,
-            "c": 1
-        },
-        {
-            "b": 56,
-            "g": 209,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 210,
-            "c": 1
-        },
-        {
-            "b": 69,
-            "g": 210,
-            "c": 1
-        },
-        {
-            "b": 140,
-            "g": 210,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 211,
-            "c": 1
-        },
-        {
-            "b": 61,
-            "g": 211,
-            "c": 1
-        },
-        {
-            "b": 128,
-            "g": 211,
-            "c": 1
-        },
-        {
-            "b": 171,
-            "g": 211,
-            "c": 1
-        },
-        {
-            "b": 46,
-            "g": 213,
-            "c": 1
-        },
-        {
-            "b": 76,
-            "g": 213,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 214,
-            "c": 1
-        },
-        {
-            "b": 35,
-            "g": 214,
-            "c": 1
-        },
-        {
-            "b": 41,
-            "g": 214,
-            "c": 1
-        },
-        {
-            "b": 250,
-            "g": 214,
-            "c": 1
-        },
-        {
-            "b": 50,
-            "g": 216,
-            "c": 1
-        },
-        {
-            "b": 11,
-            "g": 217,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 218,
-            "c": 1
-        },
-        {
-            "b": 143,
-            "g": 218,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 219,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 219,
-            "c": 1
-        },
-        {
-            "b": 81,
-            "g": 219,
-            "c": 1
-        },
-        {
-            "b": 22,
-            "g": 221,
-            "c": 1
-        },
-        {
-            "b": 9,
-            "g": 225,
-            "c": 1
-        },
-        {
-            "b": 46,
-            "g": 226,
-            "c": 1
-        },
-        {
-            "b": 14,
-            "g": 227,
-            "c": 1
-        },
-        {
-            "b": 78,
-            "g": 227,
-            "c": 1
-        },
-        {
-            "b": 133,
-            "g": 227,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 228,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 228,
-            "c": 1
-        },
-        {
-            "b": 243,
-            "g": 228,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 229,
-            "c": 1
-        },
-        {
-            "b": 26,
-            "g": 230,
-            "c": 1
-        },
-        {
-            "b": 72,
-            "g": 230,
-            "c": 1
-        },
-        {
-            "b": 193,
-            "g": 230,
-            "c": 1
-        },
-        {
-            "b": 32,
-            "g": 231,
-            "c": 1
-        },
-        {
-            "b": 102,
-            "g": 232,
-            "c": 1
-        },
-        {
-            "b": 89,
-            "g": 233,
-            "c": 1
-        },
-        {
-            "b": 119,
-            "g": 233,
-            "c": 1
-        },
-        {
-            "b": 69,
-            "g": 234,
-            "c": 1
-        },
-        {
-            "b": 47,
-            "g": 235,
-            "c": 1
-        },
-        {
-            "b": 100,
-            "g": 237,
-            "c": 1
-        },
-        {
-            "b": 160,
-            "g": 238,
-            "c": 1
-        },
-        {
-            "b": 183,
-            "g": 239,
-            "c": 1
-        },
-        {
-            "b": 68,
-            "g": 240,
-            "c": 1
-        },
-        {
-            "b": 178,
-            "g": 242,
-            "c": 1
-        },
-        {
-            "b": 16,
-            "g": 243,
-            "c": 1
-        },
-        {
-            "b": 6,
-            "g": 244,
-            "c": 1
-        },
-        {
-            "b": 129,
-            "g": 247,
-            "c": 1
-        },
-        {
-            "b": 45,
-            "g": 248,
-            "c": 1
-        },
-        {
-            "b": 141,
-            "g": 250,
-            "c": 1
-        },
-        {
-            "b": 154,
-            "g": 250,
-            "c": 1
-        },
-        {
-            "b": 165,
-            "g": 250,
-            "c": 1
-        },
-        {
-            "b": 20,
-            "g": 253,
-            "c": 1
-        },
-        {
-            "b": 36,
-            "g": 253,
-            "c": 1
-        },
-        {
-            "b": 167,
-            "g": 254,
-            "c": 1
-        },
-        {
-            "b": 189,
-            "g": 254,
-            "c": 1
-        },
-        {
-            "b": 5,
-            "g": 255,
-            "c": 1
-        },
-        {
-            "b": 62,
-            "g": 255,
-            "c": 1
-        }
-    ],
-    "5-10": []
-}
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
index 0341b60..e13e7cd 100644
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -1,16 +1,51 @@
 <template>
   <div class="gamma-analysis">
-    <div class="gamma-analysis-chart">
-      <custom-chart ref="chartRef" :option="option" style="height: 100%" />
+    <!-- 二级交互栏 -->
+    <div class="spectrum-analysis-sub-operators">
+      <pop-over-with-icon placement="bottomLeft">
+        Detailed-Information
+        <detailed-infomation slot="content" />
+      </pop-over-with-icon>
+      <pop-over-with-icon placement="bottomLeft">
+        QC Flags
+        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
+      </pop-over-with-icon>
+      <pop-over-with-icon>
+        Graph Assistance
+        <graph-assistance slot="content" />
+      </pop-over-with-icon>
+      <pop-over-with-icon>
+        Nuclide Library
+        <nuclear-library slot="content" />
+      </pop-over-with-icon>
+      <div class="peak-info">
+        <button-with-switch-icon @change="handlePeakInfoChange">
+          Peak Information
+        </button-with-switch-icon>
+      </div>
     </div>
-    <div class="gamma-analysis-thumbnail">
-      <custom-chart :option="thumbnailOption" style="height: 100%" />
+    <!-- 二级交互栏结束 -->
+    <!-- 主体部分 -->
+    <div class="gamma-analysis-main">
+      <div class="gamma-analysis-chart">
+        <custom-chart ref="chartRef" :option="option" style="height: 100%" />
+      </div>
+      <div class="gamma-analysis-thumbnail">
+        <custom-chart :option="thumbnailOption" style="height: 100%" />
+      </div>
     </div>
+    <!-- 主体部分结束 -->
   </div>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
+import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
+import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
+import QcFlags from './components/SubOperators/QcFlags.vue'
+import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
+import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
+import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
 
 // 初始配置
 const initialOption = {
@@ -105,12 +140,14 @@ const initialOption = {
         lineStyle: {
           type: 'solid'
         },
-        data: [{
-          xAxis: 100,
-          lineStyle: {
-            color: 'red'
+        data: [
+          {
+            xAxis: 100,
+            lineStyle: {
+              color: 'red'
+            }
           }
-        }]
+        ]
       }
     },
     {
@@ -208,7 +245,13 @@ export default {
     }
   },
   components: {
-    CustomChart
+    CustomChart,
+    PopOverWithIcon,
+    DetailedInfomation,
+    QcFlags,
+    GraphAssistance,
+    NuclearLibrary,
+    ButtonWithSwitchIcon
   },
   data() {
     return {
@@ -226,19 +269,23 @@ export default {
       this.$refs.chartRef.resize()
     },
 
+    // peak info 点击左右方向
+    handlePeakInfoChange(direction) {
+      this.moveMarkLine(direction)
+    },
+
     /**
      * 向某一个方向移动标记线
      * @param { 'left'| 'right' } direction
      */
     moveMarkLine(direction) {
-      if(direction == 'left') {
+      if (direction == 'left') {
         this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
-      }
-      else {
+      } else {
         this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
       }
 
-      this.$emit('markLineChange', {  })
+      this.$emit('markLineChange', {})
     }
   },
   watch: {
@@ -253,9 +300,16 @@ export default {
 <style lang="less" scoped>
 .gamma-analysis {
   height: 100%;
-  position: relative;
+
+  &-main {
+    height: calc(100% - 51px);
+    display: flex;
+    overflow: auto hidden;
+    position: relative;
+  }
 
   &-chart {
+    width: 100%;
     height: 100%;
   }
 
@@ -265,7 +319,7 @@ export default {
     right: 10px;
     width: 500px;
     height: 150px;
-    background-color: #153E44;
+    background-color: #153e44;
   }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index b05e038..326ea42 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -23,56 +23,20 @@
     </div>
     <!-- 顶部操作栏结束 -->
 
-    <!-- 二级交互栏 -->
-    <div class="spectrum-analysis-SubOperators">
-      <pop-over-with-icon placement="bottomLeft">
-        Detailed-Information
-        <detailed-infomation slot="content" />
-      </pop-over-with-icon>
-      <pop-over-with-icon placement="bottomLeft">
-        QC Flags
-        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
-      </pop-over-with-icon>
-
-      <!-- gamma 独有的二级交互栏 -->
-      <template v-if="analysisType == ANALYZE_TYPE.GAMMA">
-        <pop-over-with-icon>
-          Graph Assistance
-          <graph-assistance slot="content" />
-        </pop-over-with-icon>
-        <pop-over-with-icon>
-          Nuclide Library
-          <nuclear-library slot="content" />
-        </pop-over-with-icon>
-        <div class="peak-info">
-          <button-with-switch-icon @change="handlePeakInfoChange">
-            Peak Information
-          </button-with-switch-icon>
-        </div>
-      </template>
-      <!-- gamma 独有的二级交互栏结束 -->
-
-      <!-- beta-gamma 独有的二级交互栏 -->
-      <template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
-        <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
-          Spectra
-          <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
-        </pop-over-with-icon>
-      </template>
-      <!-- beta-gamma 独有的二级交互栏结束 -->
-    </div>
-    <!-- 二级交互栏结束 -->
-
     <!-- 频谱分析部分 -->
     <div class="spectrum-analysis-main">
       <gamma-analysis v-if="analysisType == ANALYZE_TYPE.GAMMA" ref="gammaAnalysisRef" />
-      <beta-gamma-analysis v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA" ref="betaGammaAnalysisRef" />
+      <beta-gamma-analysis
+        v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA"
+        ref="betaGammaAnalysisRef"
+        :data="analysisData"
+      />
       <resize-observer @notify="handleResize" />
     </div>
     <!-- 频谱分析部分结束 -->
 
     <!-- 从数据库加载开始 -->
-    <load-from-db-modal v-model="loadFromDbModalVisible" />
+    <load-from-db-modal v-model="loadFromDbModalVisible" @loadSample="handleLoadSampleFromDB" />
     <!-- 从数据库加载结束 -->
 
     <!-- 从文件加载开始 -->
@@ -101,15 +65,8 @@
   </div>
 </template>
 <script>
-import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
-import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
-import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
-import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
-import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
-import QcFlags from './components/SubOperators/QcFlags.vue'
 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/Modals/LoadFromDBModal.vue'
 import LoadFromFileModal from './components/Modals/LoadFromFileModal.vue'
@@ -118,7 +75,8 @@ import NuclideActivityAndMdcModal from './components/Modals/NuclideActivityAndMD
 import MultiLevelMenu from './components/MultiLevelMenu.vue'
 import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
 import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
-import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal.vue'
+import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal/index.vue'
+import { getAction } from '../../api/manage'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -127,15 +85,8 @@ const ANALYZE_TYPE = {
 }
 export default {
   components: {
-    PopOverWithIcon,
-    ButtonWithSwitchIcon,
     BetaGammaAnalysis,
     GammaAnalysis,
-    QcFlags,
-    GraphAssistance,
-    DetailedInfomation,
-    NuclearLibrary,
-    Spectra,
     SpectraListInMenu,
     LoadFromDbModal,
     LoadFromFileModal,
@@ -150,18 +101,15 @@ export default {
     this.ANALYZE_TYPE = ANALYZE_TYPE
 
     return {
-      analysisType: ANALYZE_TYPE.BETA_GAMMA, // 分析类型
-      spectraType: 'Sample Data',
-      spectraVisible: false,
+      analysisType: null, // 分析类型
 
-      spectraList: [
-        { id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
-        { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
-      ],
+      sampleList: [],
 
       loadFromDbModalVisible: false, // 从数据库加载弹窗
       loadFromFileModalVisible: false, // 从文件加载弹窗
 
+      analysisData: {}, // 要分析的谱数据
+
       peakInfomationModalVisible: false,
 
       nuclideActivityAndMDCModalVisible: false,
@@ -170,15 +118,47 @@ export default {
 
       analyzeConfigureModalVisible: false, // 分析设置弹窗
 
-      analyzeInteractiveToolModalVisible: true // 分析工具弹窗
+      analyzeInteractiveToolModalVisible: false // 分析工具弹窗
     }
   },
+  created() {
+    // 测试
+    this.loadSelectedSample({
+      dbName: 'auto',
+      sampleType: 'B',
+      sampleId: '1523651'
+    })
+  },
   methods: {
     // 从数据库加载
     handleLoadFromDb() {
       this.loadFromDbModalVisible = true
     },
 
+    // 从数据库加载-选择完成
+    handleLoadSampleFromDB(sampleList) {
+      this.sampleList = sampleList
+    },
+
+    // 加载选中的样本
+    async loadSelectedSample({ dbName, sampleType, sampleId }) {
+      // B是beta-gamma  P G是gamma
+      if (sampleType == 'B') {
+        const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
+          dbName,
+          sampleId: sampleId
+        })
+        if (success) {
+          this.analysisData = result.sample
+          this.analysisType = ANALYZE_TYPE.BETA_GAMMA
+        } else {
+          this.$message.error(message)
+        }
+      } else {
+        // gamma
+      }
+    },
+
     // 从文件加载
     handleLoadFromFile() {
       this.loadFromFileModalVisible = true
@@ -186,7 +166,7 @@ export default {
 
     // 清理全部
     handleCleanAll() {
-      this.spectraList = []
+      this.sampleList = []
     },
 
     // 保存结果到文件， 服务端生成文件，前端下载
@@ -298,11 +278,6 @@ export default {
       console.log('%c [ handleLineColorConfig ]-225', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // peak info 点击左右方向
-    handlePeakInfoChange(direction) {
-      this.$refs.gammaAnalysisRef.moveMarkLine(direction)
-    },
-
     handleResize() {
       this.$refs.gammaAnalysisRef && this.$refs.gammaAnalysisRef.resize()
       this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
@@ -340,19 +315,20 @@ export default {
                 style: {
                   marginTop: '5px',
                   marginBottom: '5px',
-                  display: this.spectraList.length ? '' : 'none'
+                  display: this.sampleList.length ? '' : 'none'
                 }
               }
             },
             {
               type: 'SpectraListInMenu',
               attrs: {
-                list: this.spectraList
+                list: this.sampleList
               },
               on: {
-                change: event => {
-                  console.log('%c [ event ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', event)
-                  console.log('%c [  ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', this)
+                change: spectra => {
+                  if (spectra) {
+                    this.loadSelectedSample(spectra)
+                  }
                 }
               }
             }
@@ -631,48 +607,50 @@ export default {
   }
   // 顶部操作栏结束
 
-  // 二级操作栏开始
-  &-SubOperators {
-    flex-shrink: 0;
-    margin-top: 15px;
-    display: flex;
-    flex-wrap: nowrap;
-    overflow: auto;
+  ::v-deep {
+    // 二级操作栏开始
+    .spectrum-analysis-sub-operators {
+      flex-shrink: 0;
+      margin-bottom: 19px;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow: auto;
 
-    .pop-over-with-icon {
-      height: 32px;
+      .pop-over-with-icon {
+        height: 32px;
 
-      &:not(:last-child) {
-        margin-right: 11px;
+        &:not(:last-child) {
+          margin-right: 11px;
+        }
+
+        &:nth-child(1) {
+          width: 256px;
+        }
+        &:nth-child(2) {
+          width: 186px;
+        }
+        &:nth-child(3) {
+          width: 246px;
+        }
+        &:nth-child(4) {
+          width: 246px;
+        }
       }
 
-      &:nth-child(1) {
-        width: 256px;
-      }
-      &:nth-child(2) {
-        width: 186px;
-      }
-      &:nth-child(3) {
-        width: 246px;
-      }
-      &:nth-child(4) {
-        width: 246px;
+      .peak-info {
+        width: 306px;
+        height: 32px;
+        display: inline-block;
       }
     }
-
-    .peak-info {
-      width: 306px;
-      height: 32px;
-      display: inline-block;
-    }
+    // 二级操作栏结束
   }
-  // 二级操作栏结束
 
   // 主体部分开始
   &-main {
-    flex: 1;
-    margin-top: 19px;
-    height: calc(100% - 100px);
+    margin-top: 15px;
+    height: calc(100% - 45px);
+    overflow: hidden;
   }
   // 主体部分结束
 }

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 14/15] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90Korsum=E3=80=81?=
 =?UTF-8?q?ReProcessing=E3=80=81=20Zero=20Time=E3=80=81EfficiencyCalibrati?=
 =?UTF-8?q?on=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
+                  }
                 }
               ]
             }

From 39c519b818f8f8fa72aa0074f4a3c285f116798f Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Tue, 1 Aug 2023 16:50:41 +0800
Subject: [PATCH 15/15] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E4=B9=8B=E9=97=B4=E8=B7=B3=E8=BD=AC=E5=90=8E=EF=BC=8C=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E6=A0=8F=E5=92=8C=E4=BA=8C=E7=BA=A7=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E8=8F=9C=E5=8D=95=E4=B8=8D=E5=8C=B9?=
 =?UTF-8?q?=E9=85=8D=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/CustomTopMenu.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/menu/CustomTopMenu.vue b/src/components/menu/CustomTopMenu.vue
index f9f9edc..e163433 100644
--- a/src/components/menu/CustomTopMenu.vue
+++ b/src/components/menu/CustomTopMenu.vue
@@ -41,7 +41,16 @@ export default {
   methods: {
     onMenuSelect({ key }) {
       const childPath = this.getChildrenPath(this.menuItems.find(menu => menu.name === key))
-      this.$router.push(childPath)
+      if (key == "abnormal-alarm" || key == "istatistics") {
+        const selectedKeys = window.sessionStorage.getItem('currMenu')
+        if (selectedKeys) {
+          this.$router.push(selectedKeys)
+        } else {
+          this.$router.push(childPath)
+        }
+      } else {
+        this.$router.push(childPath)
+      }
     },
     getChildrenPath(menuItem) {
       if (menuItem.children) {