From 2ab2dd1b1eeb1be3cf9c5dda8af0387fc2d93e17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Thu, 25 Jan 2024 11:06:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=B0=B1=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=B9=8B=E5=90=8E=E6=A0=87=E9=A2=98=E6=B2=A1=E6=9C=89=E6=94=B9?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=20beta=20=E6=95=A3=E7=82=B9=E5=9B=BE?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7=E4=B9=8B=E5=90=8E=EF=BC=8C=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E5=9B=BE=EF=BC=8C=E5=8F=B3=E4=BE=A7=E6=9B=B2?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E8=A6=81=E8=BF=98=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../spectrumAnalysis/beta-gamma-analysis.vue  |   8 +-
 .../components/BetaGammaSpectrumChart.vue     | 189 +++++++++---------
 2 files changed, 102 insertions(+), 95 deletions(-)

diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 38393a4..e9dbceb 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -26,7 +26,7 @@
         <!-- 左侧图表 -->
         <div class="beta-gamma-spectrum-sample">
           <beta-gamma-chart-container>
-            <template slot="title"> Beta-Gamma Spectrum: Sample </template>
+            <template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
             <beta-gamma-spectrum-chart
               ref="betaGammaChartRef"
               :histogramDataList="histogramDataList"
@@ -191,6 +191,7 @@ export default {
     this.SampleType = SampleType
 
     return {
+      currSpectrum: '',
       // analyseCurrentSpectrum: {},
       qcFlags: {},
 
@@ -386,6 +387,11 @@ export default {
       if (val === 'qc' && !this.sampleDetail.qc) {
         this.$message.warning('No qc spectrum file!')
       } else {
+        if (val == 'sample') this.currSpectrum = 'Sample'
+        if (val == 'gasBg') this.currSpectrum = 'Gas'
+        if (val == 'detBg') this.currSpectrum = 'Det'
+        if (val == 'qc') this.currSpectrum = 'QC'
+
         const {
           betaOriginalData,
           betaProjectedData,
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 977c622..413b135 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -57,11 +57,11 @@ const twoDOption = {
     top: 15,
     left: 55,
     right: 10,
-    bottom: 45
+    bottom: 45,
   },
   tooltip: {
     trigger: 'item',
-    formatter: params => {
+    formatter: (params) => {
       const [b, g, c] = params.value
       return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
     },
@@ -69,69 +69,69 @@ const twoDOption = {
       animation: false,
       type: 'cross',
       lineStyle: {
-        type: 'dashed'
-      }
-    }
+        type: 'dashed',
+      },
+    },
   },
   xAxis: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 16
+      fontSize: 16,
     },
     nameLocation: 'center',
     nameGap: 30,
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     axisLabel: {
       color: '#ade6ee',
-      fontSize: 12
+      fontSize: 12,
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     axisTick: {
-      show: false
+      show: false,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 16
+      fontSize: 16,
     },
     nameLocation: 'center',
     nameGap: 35,
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     axisLabel: {
       color: '#ade6ee',
-      fontSize: 12
+      fontSize: 12,
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     axisTick: {
-      show: false
+      show: false,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   series: [
     {
@@ -139,12 +139,12 @@ const twoDOption = {
       symbolSize: 4,
       data: [],
       itemStyle: {
-        color: '#fff'
-      }
-    }
+        color: '#fff',
+      },
+    },
   ],
   brush: {},
-  animation: false
+  animation: false,
 }
 
 //3D Surface 配置
@@ -155,66 +155,66 @@ const threeDSurfaceOption = {
     formatter: ({ value: [x, y, z] }) => {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
-    }
+    },
   },
   visualMap: {
     show: false,
     min: 0,
     max: 0,
     inRange: {
-      color: ['#0DCF38', '#B5475E']
-    }
+      color: ['#0DCF38', '#B5475E'],
+    },
   },
   grid3D: {
     axisLabel: {
-      color: '#ade6ee'
+      color: '#ade6ee',
     },
     axisPointer: {
-      show: false
+      show: false,
     },
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     splitLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
-    }
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
-    max: 0
+    max: 0,
   },
   series: {
     type: 'surface',
-    data: []
-  }
+    data: [],
+  },
 }
 
 // 3D Scatter 配置
@@ -224,92 +224,92 @@ const threeDScatterOption = {
     formatter: ({ value: [x, y, z] }) => {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
-    }
+    },
   },
   visualMap: {
     show: false,
     min: 0,
     max: 0,
     inRange: {
-      color: ['#0DCF38', '#B5475E']
-    }
+      color: ['#0DCF38', '#B5475E'],
+    },
   },
   grid3D: {
     axisLabel: {
-      color: '#ade6ee'
+      color: '#ade6ee',
     },
     axisPointer: {
-      show: false
+      show: false,
     },
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
+        color: 'rgba(119, 181, 213, .3)',
+      },
     },
     splitLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
-      }
-    }
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
-    max: 0
+    max: 0,
   },
   series: {
     type: 'scatter3D',
     symbolSize: 5,
     emphasis: {
       label: {
-        show: false
-      }
+        show: false,
+      },
     },
-    data: []
-  }
+    data: [],
+  },
 }
 
 export default {
   props: {
     histogramDataList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     histogramDataDList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     boundary: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   components: {
     CustomChart,
-    ColorPalette
+    ColorPalette,
   },
   data() {
     this.buttons = buttons
@@ -323,8 +323,8 @@ export default {
       threeDScatterOption,
       showROI: true,
       opts: {
-        notMerge: false
-      }
+        notMerge: false,
+      },
     }
   },
 
@@ -340,6 +340,7 @@ export default {
     // 点击改变Beta-Gamma Spectrum: Sample图表类型
     handleChange(index) {
       this.active = index
+      this.handleUnzoom()
 
       // 因第一个二维的图表采用的v-show(为了响应Unzoom事件)，而在该图表不显示的时候，且改变了浏览器大小触发resize时，大小会变为0, 故在切换回来的时候resize一下
       if (this.active == 0) {
@@ -388,8 +389,8 @@ export default {
         key: 'brush',
         brushOption: {
           // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-          brushType: 'rect'
-        }
+          brushType: 'rect',
+        },
       })
     },
 
@@ -404,12 +405,12 @@ export default {
       // 清理刷选的范围
       chart.dispatchAction({
         type: 'brush',
-        areas: []
+        areas: [],
       })
 
       // 改为不可刷选状态
       chart.dispatchAction({
-        type: 'takeGlobalCursor'
+        type: 'takeGlobalCursor',
       })
     },
 
@@ -421,8 +422,8 @@ export default {
         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 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] // 根据解析出的数据确定真实的范围
 
@@ -444,7 +445,7 @@ export default {
     buildScatterList() {
       const {
         xAxis: { min: minX, max: maxX },
-        yAxis: { min: minY, max: maxY }
+        yAxis: { min: minY, max: maxY },
       } = this.twoDOption
 
       this.twoDOption.series[0].data = this.histogramDataDList
@@ -458,8 +459,8 @@ export default {
       return {
         value: [xAxis, yAxis],
         itemStyle: {
-          color: `rgb(${r}, ${g}, ${b})`
-        }
+          color: `rgb(${r}, ${g}, ${b})`,
+        },
       }
     },
 
@@ -498,16 +499,16 @@ export default {
             [maxX, minY],
             [maxX, maxY],
             [minX, maxY],
-            [minX, minY]
+            [minX, minY],
           ]
 
           rectList.push(this.drawOneRect(rect, color))
         })
       }
-      const lineSeries = rectList.map(rect => ({
+      const lineSeries = rectList.map((rect) => ({
         type: 'line',
         ...rect,
-        zlevel: 11
+        zlevel: 11,
       }))
 
       this.opts.notMerge = true
@@ -527,8 +528,8 @@ export default {
         data: rect,
         symbol: 'none',
         itemStyle: {
-          color
-        }
+          color,
+        },
       }
     },
 
@@ -549,7 +550,7 @@ export default {
       const g = color1.g + (color2.g - color1.g) * percentage
       const b = color1.b + (color2.b - color1.b) * percentage
       return { r, g, b }
-    }
+    },
   },
   watch: {
     // 2D 图表
@@ -558,22 +559,22 @@ export default {
         this.active = 0
         this.buildScatterList()
       },
-      immediate: true
+      immediate: true,
     },
 
     // 3D 图表
     histogramDataDList: {
       handler(newVal) {
-        const maxCount = Math.max(...newVal.map(item => item.c))
+        const maxCount = Math.max(...newVal.map((item) => item.c))
         this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
-        this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
+        this.threeDSurfaceOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D surface数据
         this.threeDSurfaceOption.visualMap.max = maxCount
 
         this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
-        this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据
+        this.threeDScatterOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D scatter数据
         this.threeDScatterOption.visualMap.max = maxCount
       },
-      immediate: true
+      immediate: true,
     },
 
     // 2D 图表 上的 矩形
@@ -585,16 +586,16 @@ export default {
         this.boundaryData = newVal
         this.reDrawRect()
       },
-      immediate: true
+      immediate: true,
     },
 
     currCount: {
       handler() {
         this.buildScatterList()
       },
-      immediate: true
-    }
-  }
+      immediate: true,
+    },
+  },
 }
 </script>