From 62d7ce0f418dab790c723d4e240bfc4000739a47 Mon Sep 17 00:00:00 2001
From: surida <992917574@qq.com>
Date: Fri, 19 Jul 2024 10:29:33 +0800
Subject: [PATCH] =?UTF-8?q?beat-analysis=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/maximize.png                       | Bin 0 -> 1274 bytes
 src/assets/normal.png                         | Bin 0 -> 1216 bytes
 src/views/spectrumAnalysis/beta-analysis.vue  |  46 +--
 .../components/BetaGammaChartContainer.vue    |   1 -
 .../components/BetaGammaSpectrum.vue          | 162 +++++---
 .../spectrumAnalysis/components/RoiLimits.vue | 370 ++++++++++--------
 6 files changed, 337 insertions(+), 242 deletions(-)
 create mode 100644 src/assets/maximize.png
 create mode 100644 src/assets/normal.png

diff --git a/src/assets/maximize.png b/src/assets/maximize.png
new file mode 100644
index 0000000000000000000000000000000000000000..0da6d9c008b56975a20dd20da52662f74eec0b7b
GIT binary patch
literal 1274
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!5PS-41f%w%mkqB{|6WZIT&OZWSAM17?=bZ
znFSgDA7PLJx|0>?P6Xg&Vqs(FU<JzQ3otM;Gcz->Fmpns8JU<_SlI;Gg%lY$gp~{(
zIgKWYiL05q1|~Kh1Zt23dYKhr5|G8t%)-XW1(Z?~WME=uU;>&4Q^3T`2r^3%Xbyvj
zBfF5O>cs!I7<iZ&fsSJqWUyyA6Q-Y8yY0%FZl{{F3R_gY=V#x(yzFF=&U&GclOY}X
z9upo4wS|3N9o=QYFsb6(%dH=8pU;?8?H*h8^y2H%U1eX)9<AK=wQ8%vinW|>ikEm!
zy5vQCX6te|sm`eqw{7lew*?Wm0;SfP&ghSs;_cPy?sR2}<W%>!*Hldf*Q`|a3O1Y<
z<-};=`1s0K{T-{$U(Vco)hBgTYp%fEGFF{Ek})f##U%a8b_BFqFhqURP-U28z#mp3
zQ{L;B@ylXQg|5~jmEIX8xn8qM4>rCEk676^S-wV3hV9(%rgt^Z9rxUx$M)s#d97z}
z&ettn$f`W;^|Pa0uXi0W$i7#2bA5zJ^2^DmHc#n{ImzyPp<hGeN4ejQjBUs7J{1!!
zdc4AQ@x_H#bF!~ZO81`iO8I!-?Wr1tv!(Bpas-{4)RM=V#qfLuf06C}7e|-Z1Z8e}
zHb44Ggnm>(+D<W*O3uupIcvga6n+x<b?&RFY}?6mW?Sajp54A8%CpS3HQ`n0m)l?0
zy3Aa2E8&;I5k9Zx^yo)>AK7zpXMPm8k!CgNu3vRVpK8b3UB5GKO=*w4q3d}i%0Nz#
z?euba3(xT9(<Q!!TSy%ECO4Pgq?mE1)ZyjFcYJjV-#X<M-_quIyMrM+zsu>ai_X7X
zpDC=`{7g)p;oO<@#nae+PdsID^FeW5?xOC>KW+Pt*5;*_=S_I|^elf}_OWgGYyH?R
z>W0bscs^U4l@h9aYj^jaTbJjmzpeXS#WVBb+vt6VR-Nb-UApgi+ia;t$7gChQPi$w
z%~Gj!e6GTL<3g|hWvRE9o?b1^+N-vA<@G9-jA>8AvzcZ)we;+}sx<HPhQ;os$2=>K
zo|<%F(teR`u~7mIrfb{9OnR+1&YE=CDB5>^&I%=G-#v3rE^=aw4x41oc+7!a)=SW5
z+1B=`<&K$0K26;&*mjNo^n@j592S53Kfb*3Ri@bG%j-AleoL;HJlj&7^L+1w)gDV`
z9nX;Il{(}%>#<U2X<2KLvLTbwJ7%+=`wR+y&xtz6*ORIC>}lk^^Ea1=%y+uCwwE=1
z*U~k*Y^(u0PUi04vNLkKOW5KJ9s8U;h0E?S>Mh(ZG<E5bc7dra7EL0p4UUYtbEd3F
zSbpRAy!QVLr6)bFcp2)v|0C}AWRiW%j=$~K=T#nj(UibYc>IL@q7b{qGWC1;-@S@-
z-qq?Bv_1Vzszqgp!+~`%5ikA9<uAxTO1m3xZ*2Fo-`L(>_}@S4U-`dmAI}PJnmOa2
cy;G9)JKNKoGk^9itNQ%;e&@Vjzy99@0J_)tUH||9

literal 0
HcmV?d00001

diff --git a/src/assets/normal.png b/src/assets/normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e953a8975aa235d9a658adde687704107ec42df
GIT binary patch
literal 1216
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!5PS-41f%w%mkqB{|6WZIT&OZWSAM17?=bZ
znFSgDA7PMSU|<G076I7UIapbMGCBebj4X`I%uKATP<bXsW)@bUv>=0!u!y0kqG@1=
zlCr9aV<J$sBqIY8Gm1GNrJP(qDRn^xCMKX>W)^0sEsRVcgFwcxD;kQ3DF>Q5HvYfG
zzymaZNsw8P!JeUc+xN|}>r-yYE~%9L*7fjP`LrK=`nl=JMka@*>mADti4<Du5jcZs
zz1>IQzEup1CTcBG(wCJ_-R*QUj=%SIYNc7{g9{ofBRsbi+p;eHCpPujO>rB;XBIF2
zJw9N&cANLFosV1MX77%VD|@*}`_y!+<aYhS>ggsE#i#z(`n{@t-reH7d7GX+&#zh;
z-G9w@=dP)}0@p*YA1jKvxhZ-s=fgCUG?zJ*N8L^aFocE*hW80pU8?vX^*7ed`eU{Q
zx7h2~okgaTx!r<oXB0N22(dPJYff`zY}!$-Q<3-he9VuVcfZeRU%Abo%+~R4#$&zr
zlO8?GC_8gBb-CNQ16NftX1<fqUR(9auxCq}L{n41qNy+0S6JuVG~<koH#_Y3VYlY@
zONz%=E^8F3-WHawc`Sf)8&h)IZQtg3>9VC87}(Bwv~LYHF4{XMw{&OdvU@E_qDPfx
zskA3nq|9_Lxi>}Ya+|OR@3A8c9F5iCTScu-UtIG`GWNikt=<gRs%2d^d@0=^S?vA(
zwEW@4J0EumKJYNHc(XvbUuL&ko4sMIV&T4HQ^WRL(O>KO?dR2v=jHC-ntkb&#M^vh
zud81Vyq<U{ZbMT~MNY-$DC0YaqSs}A*X_1f+cfXgt44`EOMl0wZsYwOdOCT-r+3wN
zyPdQ*MW6QF_B^Wf=j20e`?LgWC%(M+&3|1%+?!1%6IDuE6qj{*`RdNzYRi72)Z|^P
zSFGXDnM>Q9C&gXx**w>-kBLQ0YU#%Ho|9B}9rksTR9SFy`iWc4dQRJ3wx(3rJxR8-
zS-0}#=32EAMpk$1POI+Q$CdHnQ&iQDJge=&s<V8iOI!->eo}nQf5&C_$1Z+zqpL69
z$yd3oyXUER;r$IWU6=fr8FHxhqSg+5Tlbjdsw?){eVusca!OnNEJY?Q{{5zw$s&9y
z6E|I6-4&@K)&3$Wdd2kBNwZ?6Ejzg`XTk&_<4rSCKgk`{`*t*7qNS^{^tzsv2c9(r
zuhugxSkHY_B08)!tJHO6-mQq1O=1nRzOMQ%A;PcI7qg&+x4ZIp;db4K(^L1e9r|5T
zrnJ$%&R!}%HGiKSPbm9_3l3tB*52v;&meVs>iH&)OQut9D!epZG55Z7_i=ge<ooka
z&;9oD^rifOA3v_dxr+bTW|w{b>Dm7bd;N;qyV{$N8@bt^tF*uIx707Y{^arv_HFUW
NC*_&HxX1s$2>{;s+0Xz0

literal 0
HcmV?d00001

diff --git a/src/views/spectrumAnalysis/beta-analysis.vue b/src/views/spectrumAnalysis/beta-analysis.vue
index 6f89a97..32bad47 100644
--- a/src/views/spectrumAnalysis/beta-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-analysis.vue
@@ -43,27 +43,27 @@
           <div class="beta-gamma-analysis-main-charts-right">
             <beta-gamma-chart-container>
               <template slot="title"> ROI LIMITS </template>
-              <roi-limits ref="RoiChartRef" :ROILists="ROILists" @sendIndex="getIndex" />
+              <roi-limits ref="RoiChartRef" :ROILists="ROILists" :gammaEnergyData="gammaEnergyData" />
             </beta-gamma-chart-container>
+            <!-- 底部显示 -->
+            <div class="beta-gamma-analysis-main-bottom">
+              <div class="beta-gamma-analysis-main-bottom-left">
+                <beta-gamma-chart-container>
+                  <template slot="title"> Result display </template>
+                  <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
+                </beta-gamma-chart-container>
+              </div>
+              <!-- <div class="beta-gamma-analysis-main-bottom-right">
+                <beta-gamma-chart-container>
+                  <template slot="title"> ROI Param </template>
+                  <roi-param :roiParamList="roiParamList" />
+                </beta-gamma-chart-container>
+              </div> -->
+            </div>
+            <!-- 底部显示结束 -->
           </div>
         </div>
         <!-- 中间图表部分结束 -->
-        <!-- 底部显示 -->
-        <div class="beta-gamma-analysis-main-bottom">
-          <div class="beta-gamma-analysis-main-bottom-left">
-            <beta-gamma-chart-container>
-              <template slot="title"> Result display </template>
-              <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
-            </beta-gamma-chart-container>
-          </div>
-          <div class="beta-gamma-analysis-main-bottom-right">
-            <beta-gamma-chart-container>
-              <template slot="title"> ROI Param </template>
-              <roi-param :roiParamList="roiParamList" />
-            </beta-gamma-chart-container>
-          </div>
-        </div>
-        <!-- 底部显示结束 -->
       </div>
       <!-- 主体部分结束 -->
     </a-spin>
@@ -113,7 +113,7 @@ export default {
   data() {
     this.SampleType = SampleType
     return {
-      currSpectrum: '',
+      currSpectrum: 'Sample',
       isLoading: false,
       spectrumData: {}, // Detailed Infomation 信息
       spectraType: 'sample',
@@ -310,6 +310,7 @@ export default {
           this.sampleDetail = result
           this.changeChartByType('sample')
           this.isLoading = false
+          this.currIdx = 2
         } else {
           this.$message.error(message)
         }
@@ -408,10 +409,10 @@ export default {
     }
   }
   &-main {
-    height: calc(100% - 51px);
+    height: calc(100% - 55px);
     overflow: auto hidden;
     &-charts {
-      height: calc(100% - 220px);
+      height: 100% ;
       display: flex;
       gap: 30px;
       overflow: auto hidden;
@@ -420,13 +421,14 @@ export default {
       }
       &-right {
         flex: 1;
+        .betagamma-chart{
+      height: calc(100% - 260px);
+        }
       }
     }
     &-bottom {
       margin-top: 20px;
       height: 234px;
-      display: flex;
-      gap: 30px;
       overflow: auto hidden;
       &-left {
         flex: 1;
diff --git a/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue b/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
index 76af91f..7801e47 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue
@@ -92,7 +92,6 @@ export default {}
     height: calc(100% - 45px);
     overflow: hidden;
     padding-top: 15px;
-    padding-bottom: 12px;
   }
 }
 </style>
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
index ec2b416..f7a0a97 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
@@ -1,12 +1,7 @@
 <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)"
-      >
+      <span v-for="(item, index) in buttons" :key="item" :class="active == index ? 'active' : ''" @click="handleChange(index)">
         {{ item }}
       </span>
       <span @click="handleUnzoom">Unzoom</span>
@@ -16,22 +11,15 @@
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
       <div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
-        <CustomChart
-          ref="chartTwoDRef"
-          :option="twoDOption"
-          :opts="opts"
-          @zr:mousedown="handleMouseDown"
-          @zr:mouseup="handleMouseUp"
-          @brushEnd="handleBrushEnd"
-        />
+        <CustomChart ref="chartTwoDRef" :option="twoDOption" :opts="opts" @zr:mousedown="handleMouseDown" @zr:mouseup="handleMouseUp" @brushEnd="handleBrushEnd" />
         <!-- @brushEnd="handleBrushEnd" -->
         <!-- @zr:mousemove="handleMouseMove" -->
-        <div class="bar">
+        <!-- <div class="bar">
           <color-palette v-model="currCount" />
           <div>{{ currCount }}</div>
           <div class="bar-main"></div>
           <div>0</div>
-        </div>
+        </div> -->
       </div>
       <!-- 2D图表结束 -->
       <CustomChart v-if="active == 1" key="1" ref="gammaLineChartRef" :option="gammaOption" />
@@ -50,17 +38,17 @@ const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
 // Beta-Gamma 的配置
 const twoDOption = {
   grid: {
-    top: 15,
+    top: 10,
     left: 60,
-    right: 20,
+    right: 70,
     bottom: 45,
   },
   tooltip: {
     trigger: 'item',
-    formatter: (params) => {
-      const [b, g, c] = params.value
-      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
-    },
+    // formatter: (params) => {
+    //   const [b, g, c] = params.value
+    //   return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+    // },
     axisPointer: {
       animation: false,
       type: 'cross',
@@ -138,6 +126,7 @@ const twoDOption = {
     {
       type: 'scatterGL',
       symbolSize: 4,
+      zlevel: 4,
       data: [],
       itemStyle: {
         color: '#fff',
@@ -146,10 +135,36 @@ const twoDOption = {
     {
       type: 'line',
       data: [],
-      itemStyle: { color: '#99CA53' },
+      itemStyle: { color: '#0CB4C1' },
+      zlevel: 14,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#1B88E5' },
+      zlevel: 13,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#43960C' },
+      zlevel: 12,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#D09324' },
       zlevel: 11,
       showSymbol: false,
+      areaStyle: {}
     },
+
   ],
   brush: {},
   animation: false,
@@ -402,11 +417,10 @@ export default {
     // 2D 图表 上的 矩形
     boundary: {
       handler(newVal) {
-        newVal.forEach((item, index) => {
-          item.color = '#99CA53'
-        })
-        this.boundaryData = newVal[this.currIdx]
-        this.reDrawRect()
+        // newVal.forEach((item, index) => {
+        //   item.color = '#99CA53'
+        // })
+        // this.boundaryData = newVal[this.currIdx]
       },
       // immediate: true,
     },
@@ -418,7 +432,7 @@ export default {
     },
     currIdx: {
       handler(newVal) {
-        this.boundaryData = this.boundary[newVal]
+        // this.boundaryData = this.boundary[newVal]
         this.reDrawRect()
       },
       // immediate: true,
@@ -433,6 +447,7 @@ export default {
         const _this = this
         this.myChart = this.$refs.chartTwoDRef.getChartInstance()
         let graphicHeight = this.$refs.TwoChartRef.clientHeight
+
         graphic1.shape.height = graphicHeight
         let minleft = this.myChart.convertToPixel({ xAxisId: '2' }, 0)
         let maxRight = this.myChart.convertToPixel({ xAxisId: '2' }, 512)
@@ -451,7 +466,8 @@ export default {
             [_this.startChannel, maxY],
             [_this.startChannel, minY],
           ]
-          lineSeries.data = _this.drawOneRect(rect, color).data
+          lineSeries.
+            lineSeries.data = _this.drawOneRect(rect, color).data
           // const lineSeries = {
           //   type: 'line',
           //   ..._this.drawOneRect(rect, color),
@@ -509,6 +525,9 @@ export default {
     })
   },
   methods: {
+    handleTooltipFormat() {
+      console.log(111111)
+    },
     // Gamma 的折线图数据
     buildGammaLineList(val) {
       const gammaSeries = this.gammaOption.series
@@ -521,7 +540,6 @@ export default {
     },
     // 构造scatter列表
     buildScatterList() {
-      console.log(this.twoDOption)
       const {
         xAxis: { min: minX, max: maxX },
         yAxis: { min: minY, max: maxY },
@@ -529,23 +547,36 @@ export default {
 
       //点大小
       this.twoDOption.series[0].symbolSize = 5
-      //
-      this.twoDOption.visualMap =  {
-        min: 512,
-        max: minY,
-        dimension: 1,
-        orient: 'vertical',
-        right: 10,
-        top: 'center',
-        text: ['HIGH', 'LOW'],
-        calculable: true,
-        inRange: {
-          color: ['#ffffff', '#ff0000']
-        }
-      },
       this.twoDOption.series[0].data = this.histogramDataList
         .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
         .map(({ b, g, c }) => this.buildScatterItem(b, g, c))
+
+
+      this.$nextTick(() => {
+        var _h = this.$refs.TwoChartRef.clientHeight - 80
+        this.twoDOption.visualMap = {
+          type: 'continuous',
+          min: maxY,
+          max: minY,
+          itemWidth: 12,
+          itemHeight: _h,
+          dimension: 1,
+          seriesIndex: 0,
+          zlevel: 0,
+          orient: 'vertical',
+          right: 0,
+          bottom: 20,
+          text: [maxY, minY],
+          textStyle: {
+            color: '#8EC0C8'
+          },
+          calculable: true,
+          inRange: {
+            color: ['#ffffff', '#ff0000']
+          }
+        }
+      })
+
     },
 
     // 构造一个scatter 的点
@@ -560,21 +591,22 @@ export default {
     },
     // 重绘矩形框区域
     reDrawRect() {
-      const rectList = []
-      let [a, lineSeries] = this.twoDOption.series
       if (this.showROI) {
-        const { minX, maxX, minY, maxY, color } = this.boundaryData
         // rect 遵循 左下 右下 右上 左上 左下 的顺序
-        const rect = [
-          [minX, minY],
-          [maxX, minY],
-          [maxX, maxY],
-          [minX, maxY],
-          [minX, minY],
-        ]
-        lineSeries.data = this.drawOneRect(rect, color).data
+        const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
+        for (var i = 0; i < 4; i++) {
+          const data = this.boundary[i]
+          if(data)
+          {
+          const rect = [[data.minX, data.minY], [data.maxX, data.minY], [data.maxX, data.maxY], [data.minX, data.maxY], [data.minX, data.minY],]
+          this.twoDOption.series[i + 1].data = this.drawOneRect(rect, colors[i]).data
+          }
+        }
+        // lineSeries2.data = this.drawOneRect(rect2, color2).data
       } else {
-        lineSeries.data = []
+        for (var i = 0; i < 4; i++) {
+          this.twoDOption.series[i + 1].data = []
+        }
       }
     },
     /**
@@ -584,10 +616,6 @@ export default {
     drawOneRect(rect, color) {
       return {
         data: rect,
-        symbol: 'none',
-        itemStyle: {
-          color,
-        },
       }
     },
     // 点击改变 ROI LIMITS
@@ -618,6 +646,7 @@ export default {
         ]
         myChart.setOption(this.dragOption)
       })
+
     },
     // 鼠标按下时开启可刷选状态
     handleMouseDown() {
@@ -729,8 +758,7 @@ export default {
       const { inputFileName } = this.sampleData
       try {
         const { success, result, message } = await putAction(
-          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${
-            this.endChannel
+          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel
           }&ROINum=${this.currIdx + 1}`
         )
         if (success) {
@@ -755,7 +783,6 @@ export default {
             maxX: obj.stop,
             minY: 0,
             maxY: 4096,
-            color: '#99CA53',
           }
           // this.reDrawRect()
         } else {
@@ -776,6 +803,7 @@ export default {
       const b = color1.b + (color2.b - color1.b) * percentage
       return { r, g, b }
     },
+
   },
 }
 </script>
@@ -783,6 +811,7 @@ export default {
 <style lang="less" scoped>
 .beta-gamma-spectrum-chart {
   height: 100%;
+
   &-operators {
     text-align: right;
     overflow: auto;
@@ -811,15 +840,18 @@ export default {
       }
     }
   }
+
   &-main {
     height: calc(100% - 40px);
     margin-top: 15px;
+
     ._2d-chart {
       height: 100%;
       display: flex;
 
       .custom-chart {
-        width: calc(100% - 45px);
+        // width: calc(100% - 45px);
+        width: 100%;
       }
 
       .bar {
diff --git a/src/views/spectrumAnalysis/components/RoiLimits.vue b/src/views/spectrumAnalysis/components/RoiLimits.vue
index b993057..c28eec4 100644
--- a/src/views/spectrumAnalysis/components/RoiLimits.vue
+++ b/src/views/spectrumAnalysis/components/RoiLimits.vue
@@ -1,17 +1,25 @@
 <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">
-      <CustomChart :key="chartKey" ref="roiLimitsRef" :opts="opts" :option="roiLimitsOption" />
+  <div class="beta-gamma-spectrum">
+    <div :class="ismax[index] ? 'beta-gamma-spectrum-chart max' : 'beta-gamma-spectrum-chart'" v-for="(item, index) in buttons" :key="item" v-show="!ismaxed || ismax[index]">
+      <div class="beta-gamma-spectrum-chart-operators" ref="operatorsRef">
+        <a-row>
+          <a-col :span="4">
+            <div :style="{ background: colors[index], width: '80px', marginLeft: '60px', textAlign: 'center' }">{{ item }}</div>
+          </a-col>
+          <a-col :span="20">
+            <div style="float: right;width: 40px;">
+              <img v-show="!ismax[index]" src="@/assets/maximize.png" @click="maximize(true, index)" />
+              <img v-show="ismax[index]" src="@/assets/normal.png" @click="maximize(false, index)" />
+            </div>
+            <div style="float: right;color:#AD4140;width: 150px;">{{ 'Ener gy:' + eValue[index] }}</div>
+            <div style="float: right;color:#8EC0C8;width: 100px;">{{ 'Count:' + yValue[index] }}</div>
+            <div style="float: right;color:#8EC0C8;width: 120px;">{{ 'Channel:' + xValue[index] }}</div>
+          </a-col>
+        </a-row>
+      </div>
+      <div class="beta-gamma-spectrum-chart-main">
+        <CustomChart ref="containerRef" :option="roiLimitsOptions[index]" />
+      </div>
     </div>
   </div>
 </template>
@@ -19,107 +27,8 @@
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
 const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
+const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
 // 折线图配置
-const roiLimitsOption = {
-  grid: {
-    top: 15,
-    left: 65,
-    right: 18,
-    bottom: 45,
-  },
-  tooltip: {
-    show: true,
-    trigger: 'axis',
-    formatter: (params) => {
-      let content = ''
-      params.forEach((item) => {
-        // 提示框的内容样式及数据
-        content += `
-          <!-- 圆点样式 -->
-          <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
-          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
-          <span >${item.value[1]}</span>
-        `
-      })
-      return content
-    },
-  },
-  xAxis: {
-    type: 'category',
-    name: 'Gamma Channel',
-    nameTextStyle: {
-      color: '#5b9cba',
-      fontSize: 16,
-    },
-    nameLocation: 'center',
-    nameGap: 30,
-    boundaryGap: false,
-    splitLine: {
-      show: true,
-      interval: 'auto',
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  yAxis: {
-    type: 'value',
-    name: 'Count',
-    nameTextStyle: {
-      color: '#5b9cba',
-      fontSize: 16,
-    },
-    nameLocation: 'center',
-    nameGap: 40,
-    splitLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  series: {
-    type: 'line',
-    smooth: true,
-    showSymbol: false,
-    // symbol: 'circle',
-    // symbolSize: 6,
-    data: [],
-    itemStyle: {
-      normal: {
-        color: '#baaa3d',
-      },
-    },
-    lineStyle: {
-      normal: {
-        width: 2,
-      },
-    },
-  },
-}
 export default {
   components: {
     CustomChart,
@@ -129,83 +38,236 @@ export default {
       type: Array,
       default: () => [],
     },
+    gammaEnergyData: {
+      type: Array,
+      default: () => [],
+    },
   },
   watch: {
     ROILists: {
       handler(newVal) {
-        this.buildOneLineList(newVal[this.active])
+        this.newVal = newVal
+        this.buildOneLineList()
       },
       immediate: true,
     },
   },
   beforeDestroy() {
-    const myChart = this.$refs.roiLimitsRef.getChartInstance()
-    myChart.dispose()
+    // const myChart = this.$refs.roiLimitsRef.getChartInstance()
+    // myChart.dispose()
   },
   data() {
     this.buttons = buttons
+    this.colors = colors
     return {
       active: 0,
-      roiLimitsOption,
+      xValue: ['', '', '', ''],
+      yValue: ['', '', '', ''],
+      eValue: ['', '', '', ''],
+      ismax: [false, false, false, false],
+      ismaxed:false,
+      roiLimitsOptions: [
+        this.createRoiLimitsOption(0),
+        this.createRoiLimitsOption(1),
+        this.createRoiLimitsOption(2),
+        this.createRoiLimitsOption(3),
+      ],
+      charts: [],
+      newVal: [],
       opts: {
         notMerge: true,
       },
-      chartKey: 'limit',
     }
   },
   methods: {
-    buildOneLineList(val) {
-      const currSeries = this.roiLimitsOption.series
-      if (val) {
-        currSeries.data = val.map((item) => [item.x, item.y])
-      } else {
-        currSeries.data = []
+    buildOneLineList() {
+      for (var i = 0; i < 4; i++) {
+        var val = this.newVal[i]
+        if (val) {
+          this.roiLimitsOptions[i].series.data = val.map((item) => [item.x, item.y])
+        } else {
+          this.roiLimitsOptions[i].series.data = []
+        }
       }
     },
-    // 点击改变Beta-Gamma Spectrum: Sample图表类型
-    handleChange(index) {
-      this.active = index
-      this.buildOneLineList(this.ROILists[index])
-      this.$emit('sendIndex', index)
+    handleTooltipFormat(params, index) {
+      this.$set(this.xValue, index, params[0].value[0]);
+      this.$set(this.yValue, index, params[0].value[1]);
+      this.$set(this.eValue, index, this.gammaEnergyData[params[0].value[0]].toFixed(3));
+    },
+    maximize(bl, index) {
+      this.$set(this.ismax, index, bl);
+      this.ismaxed = this.ismax.includes(true);
+      this.$nextTick(() => {
+        this.$refs['containerRef'][index].getChartInstance().resize();
+      })
+    },
+    showTooltip(i) {
+      const chartRef = this.$refs['containerRef'][i].getChartInstance();
+      chartRef.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 0,
+        dataIndex: 110 // 指定要显示 tooltip 的数据索引
+      });
+    },
+    createRoiLimitsOption(index) {
+      const self = this
+      return {
+        grid: {
+          top: 10,
+          left: 60,
+          right: 20,
+          bottom: 50,
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          formatter: (params) => {
+            self.handleTooltipFormat(params, index)
+            let content = ''
+            params.forEach((item) => {
+              // 提示框的内容样式及数据
+              content += `
+          <!-- 圆点样式 -->
+          <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
+          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
+          <span >${item.value[1]}</span>
+        `
+            })
+            return content
+          },
+        },
+        xAxis: {
+          type: 'category',
+          name: 'Gamma Channel',
+          nameTextStyle: {
+            color: '#5b9cba',
+            fontSize: 16,
+          },
+          nameLocation: 'center',
+          nameGap: 30,
+          boundaryGap: false,
+          splitLine: {
+            show: true,
+            interval: 'auto',
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: '#ade6ee',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Count',
+          nameTextStyle: {
+            color: '#5b9cba',
+            fontSize: 16,
+          },
+          nameLocation: 'center',
+          nameGap: 40,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: '#ade6ee',
+          },
+        },
+        series: {
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          // symbol: 'circle',
+          // symbolSize: 6,
+          data: [],
+          itemStyle: {
+            normal: {
+              color: '#baaa3d',
+            },
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+            },
+          },
+        },
+      }
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.beta-gamma-spectrum-chart {
+.beta-gamma-spectrum {
   height: 100%;
-  &-operators {
-    text-align: right;
-    overflow: auto;
-    height: 26px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 9px;
 
-    .ant-space-item:first-child {
+  &-chart {
+    height: 50%;
+    width: 50%;
+    float: left;
+
+    &-operators {
+      overflow: auto;
+      margin-bottom: -16px;
+
+      .ant-space-item:first-child {
+        span {
+          width: 70px;
+        }
+      }
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+
       span {
-        width: 70px;
+        text-align: center;
+        height: 100%;
+        line-height: 26px;
+        width: 100px;
+        background-color: #406979;
+        cursor: pointer;
+        user-select: none;
+
+        &.active {
+          background-color: #1397a3;
+        }
       }
     }
 
-    span {
-      text-align: center;
-      height: 100%;
-      line-height: 26px;
-      width: 100px;
-      background-color: #406979;
-      cursor: pointer;
-      user-select: none;
-
-      &.active {
-        background-color: #1397a3;
-      }
+    &-main {
+      height: calc(100% - 40px);
+      margin-top: 15px;
     }
   }
-  &-main {
-    height: calc(100% - 40px);
-    margin-top: 15px;
+
+  &-chart.max {
+    height: 100%;
+    width: 100%;
+    transform-origin: right top;
   }
+
 }
 </style>
\ No newline at end of file