From 75db97b2e8678f3b1fe40e11cd564de1917167ac Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 17 Aug 2023 19:11:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90Channel=E5=92=8CEnerg?=
 =?UTF-8?q?y=E6=95=B0=E6=8D=AE=E7=9A=84=E5=88=87=E6=8D=A2=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E8=A7=A3=E5=86=B3=E7=B1=BB=E5=9E=8B=E4=B8=BAEnergy?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=88=B7=E9=80=89=E8=8C=83=E5=9B=B4=E4=B8=8D?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=95=A3=E7=82=B9=E5=9B=BE=E5=9C=A8=E5=A4=A7=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E4=B8=8B=E7=9A=84=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Custom3DChart/index.vue        |   4 +-
 .../components/BetaGammaSpectrumChart.vue     |   6 +-
 .../components/BetaDetectorCalibration.vue    |   2 +-
 .../components/SubOperators/QcFlags.vue       |   2 +-
 src/views/spectrumAnalysis/gamma-analysis.vue | 269 ++++++++++++------
 5 files changed, 194 insertions(+), 89 deletions(-)

diff --git a/src/components/Custom3DChart/index.vue b/src/components/Custom3DChart/index.vue
index 811adea..bd4191e 100644
--- a/src/components/Custom3DChart/index.vue
+++ b/src/components/Custom3DChart/index.vue
@@ -5,8 +5,8 @@
 import * as echarts from 'echarts'
 import 'echarts-gl'
 
-const events = ['click']
-const zrEvents = ['mousemove', 'mousedown', 'mouseup']
+const events = ['click', 'brushEnd']
+const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click']
 export default {
   props: {
     option: {
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index c183684..bb7f176 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -15,7 +15,7 @@
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
       <div class="_2d-chart" v-show="active == 0">
-        <custom-chart
+        <Custom3DChart
           ref="chartRef"
           :option="twoDOption"
           @zr:mousemove="handleMouseMove"
@@ -43,7 +43,6 @@
 </template>
 
 <script>
-import CustomChart from '@/components/CustomChart/index.vue'
 import Custom3DChart from '@/components/Custom3DChart/index.vue'
 import ColorPalette from './ColorPalette.vue'
 import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
@@ -133,7 +132,7 @@ const twoDOption = {
     interval: 64
   },
   series: {
-    type: 'scatter',
+    type: 'scatterGL',
     symbolSize: 5,
     data: [],
     itemStyle: {
@@ -315,7 +314,6 @@ export default {
     }
   },
   components: {
-    CustomChart,
     Custom3DChart,
     ColorPalette
   },
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
index 1031817..3fbf76a 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
@@ -248,7 +248,7 @@ const initialBetaGammaChartOption = {
     interval: 64
   },
   series: {
-    type: 'scatter',
+    type: 'scatterGL',
     symbolSize: 2,
     data: [],
     itemStyle: {
diff --git a/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue b/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
index e941a6e..a7044cf 100644
--- a/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
+++ b/src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
@@ -58,7 +58,7 @@ export default {
       }
 
       &.BLUE {
-        background: radial-gradient(circle, rgb(50, 50, 255) 0, blue 100%);
+        background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
       }
 
       &.YELLOW {
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
index cce3d8a..9a3fa76 100644
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -13,7 +13,12 @@
         </pop-over-with-icon>
         <pop-over-with-icon>
           Graph Assistance
-          <graph-assistance slot="content" @change="handleGraphAssistanceChange" @reset="handleReset" />
+          <graph-assistance
+            v-if="!isLoading"
+            slot="content"
+            @change="handleGraphAssistanceChange"
+            @reset="handleReset"
+          />
         </pop-over-with-icon>
         <pop-over-with-icon>
           Nuclide Library
@@ -29,7 +34,7 @@
       <!-- 主体部分 -->
       <div class="gamma-analysis-main">
         <div class="gamma-analysis-chart">
-          <custom-chart
+          <custom-3d-chart
             ref="chartRef"
             :option="option"
             @zr:click="handleChartClick"
@@ -40,7 +45,7 @@
           />
 
           <div class="gamma-analysis-thumbnail">
-            <custom-chart
+            <custom-3d-chart
               ref="thumbnailChartRef"
               :option="thumbnailOption"
               @zr:click="handleThumbnailChartClick"
@@ -55,7 +60,7 @@
 </template>
 
 <script>
-import CustomChart from '@/components/CustomChart/index.vue'
+import Custom3dChart from '@/components/Custom3DChart/index.vue'
 import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
 import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
 import QcFlags from './components/SubOperators/QcFlags.vue'
@@ -96,11 +101,7 @@ const initialOption = {
         width: 2
       }
     },
-    formatter: params => {
-      const [channel] = params[0].value
-      return `<div class="channel">Channel: ${channel}</div>
-              <div class="energy">Energy: ${(0).toFixed(2)}</div>`
-    },
+    formatter: undefined,
     className: 'figure-chart-option-tooltip'
   },
   xAxis: {
@@ -203,7 +204,7 @@ export default {
     }
   },
   components: {
-    CustomChart,
+    Custom3dChart,
     PopOverWithIcon,
     DetailedInfomation,
     QcFlags,
@@ -228,18 +229,23 @@ export default {
   created() {
     this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
   },
+  mounted() {
+    this.option.brush = { toolbox: [] }
+  },
   methods: {
     async getSampleDetail() {
       const { dbName, sampleId } = this.sample
       try {
         this.isLoading = true
         this.option.series = []
+        this.thumbnailOption.series = []
 
-        // const { success, result, message } = await getAction('/gamma/gammaByDB', {
-        //   dbName,
-        //   sampleId
-        // })
-        const { success, result, message } = Response
+        const { success, result, message } = await getAction('/gamma/gammaByDB', {
+          dbName,
+          sampleId
+        })
+        // const { success, result, message } = Response
+        console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.isLoading = false
 
@@ -261,7 +267,6 @@ export default {
             shapeEnergyData
           } = result
 
-
           this.detailedInfomation = DetailedInformation
           this.qcFlags = QCFlag
 
@@ -277,6 +282,9 @@ export default {
           const channelScacLine = allData.find(item => item.name == 'Scac' && item.group == 'channel')
           const energyScacLine = allData.find(item => item.name == 'Scac' && item.group == 'energy')
 
+          this.allEnergy = allData.find(item => item.name == 'Energy' && item.group == 'energy')
+          this.allChannel = allData.find(item => item.name == 'Count' && item.group == 'channel')
+
           // 保存Peak Line
           this.channelPeakGroup = channelPeakGroup
           this.energyPeakGroup = energyPeakGroup
@@ -331,7 +339,7 @@ export default {
               },
               data: [{ xAxis: -1 }]
             },
-            zlevel: 0
+            animation: false
           })
 
           // 右上角缩略图推入Spectrum Line
@@ -363,28 +371,10 @@ export default {
                 width: 2
               },
               data: []
-            },
-            zlevel: 0
-          })
-
-          // 推入Scac
-          this.option.series.push({
-            name: 'Scac',
-            type: 'line',
-            data: [].map(({ x, y }) => [x, y]),
-            itemStyle: {
-              color: `rgb(${shadowChannelChart.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            symbol: 'none',
-            emphasis: {
-              disabled: true
             }
           })
 
-          // 推入基线
+          // 推入BaseLine
           this.option.series.push({
             name: 'BaseLine',
             type: 'line',
@@ -398,10 +388,11 @@ export default {
             symbol: 'none',
             emphasis: {
               disabled: true
-            }
+            },
+            animation: false
           })
 
-          // 推入LC线
+          // 推入LcLine线
           this.option.series.push({
             name: 'LcLine',
             type: 'line',
@@ -415,7 +406,8 @@ export default {
             symbol: 'none',
             emphasis: {
               disabled: true
-            }
+            },
+            animation: false
           })
 
           // 推入Scac线
@@ -432,13 +424,14 @@ export default {
             symbol: 'none',
             emphasis: {
               disabled: true
-            }
+            },
+            animation: false
           })
 
           // 推入基线控制点
           this.option.series.push({
             name: 'BaseLine_Ctrl_Point',
-            type: 'scatter',
+            type: 'scatterGL',
             data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
               return {
                 value: [x, y],
@@ -452,13 +445,13 @@ export default {
             emphasis: {
               disabled: true
             },
-            z: 3,
             animation: false
           })
 
           // 推入Peak Line
+          const peakLines = []
           channelPeakGroup.forEach((item, index) => {
-            this.option.series.push({
+            peakLines.push({
               name: `Peak_${index}`,
               type: 'line',
               data: item.pointlist.map(({ x, y }) => [x, y]),
@@ -472,6 +465,9 @@ export default {
               animation: false
             })
           })
+          this.option.series.push(...peakLines)
+
+          this.option.tooltip.formatter = this.tooltipFormatter
         } else {
           this.$message.error(message)
         }
@@ -480,6 +476,23 @@ export default {
       }
     },
 
+    tooltipFormatter(params) {
+      if (this.graphAssistance.axisType == 'Energy') {
+        const energy = params[0].value[0]
+        const channel = this.getChannelByEnergy(energy)
+
+        return `<div class="channel">Channel: ${channel}</div>
+              <div class="energy">Energy: ${energy.toFixed(2)}</div>`
+      } else {
+        const channel = parseInt(params[0].value[0])
+        const energy = this.allEnergy.pointlist[channel]
+        return energy
+          ? `<div class="channel">Channel: ${channel}</div>
+              <div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
+          : undefined
+      }
+    },
+
     // Graph Assistance 操作
     handleGraphAssistanceChange({ type, label, value }) {
       // 类型变化
@@ -491,16 +504,43 @@ export default {
             break
           case 'Channel':
           case 'Energy':
-            this.option.xAxis.name = label
-            this.graphAssistance.type = type
+            this.graphAssistance.axisType = label
+
+            this.handleReset()
+
+            this.redrawLineBySeriesName(
+              'BaseLine',
+              this.energyBaseLine,
+              this.channelBaseLine,
+              this.graphAssistance.Baseline
+            )
+            this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, this.graphAssistance.Lc)
+            this.redrawLineBySeriesName(
+              'ScacLine',
+              this.energyScacLine,
+              this.channelScacLine,
+              this.graphAssistance.SCAC
+            )
+
+            this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
+            this.redrawCtrlPointBySeriesName()
+            this.redrawPeakLine()
+
+            this.redrawThumbnailChart()
             break
           case 'Lines':
             this.option.series[0].type = 'line'
             this.option.series[0].symbol = 'none'
+
+            this.thumbnailOption.series[0].type = 'line'
+            this.thumbnailOption.series[0].symbol = 'none'
             break
           case 'Scatter':
-            this.option.series[0].type = 'scatter'
+            this.option.series[0].type = 'scatterGL'
             this.option.series[0].symbol = 'circle'
+
+            this.thumbnailOption.series[0].type = 'scatterGL'
+            this.thumbnailOption.series[0].symbol = 'circle'
             break
         }
       }
@@ -518,45 +558,79 @@ export default {
             }
             break
           case 'Baseline':
-            const baseLineSeries = this.findSeriesByName('BaseLine')
-            if (value) {
-              if (this.graphAssistance.type == 'Energy') {
-                baseLineSeries.data = this.energyBaseLine.pointlist.map(({ x, y }) => [x, y])
-              } else {
-                baseLineSeries.data = this.channelBaseLine.pointlist.map(({ x, y }) => [x, y])
-              }
-            } else {
-              baseLineSeries.data = []
-            }
+            this.redrawLineBySeriesName('BaseLine', this.energyBaseLine, this.channelBaseLine, value)
             break
           case 'Lc':
-            const lcLineSeries = this.findSeriesByName('LcLine')
-            if (value) {
-              if (this.graphAssistance.type == 'Energy') {
-                lcLineSeries.data = this.energyLcLine.pointlist.map(({ x, y }) => [x, y])
-              } else {
-                lcLineSeries.data = this.channelLcLine.pointlist.map(({ x, y }) => [x, y])
-              }
-            } else {
-              lcLineSeries.data = []
-            }
+            this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, value)
             break
           case 'SCAC':
-            const scacLineSeries = this.findSeriesByName('ScacLine')
-            if (value) {
-              if (this.graphAssistance.type == 'Energy') {
-                scacLineSeries.data = this.energyScacLine.pointlist.map(({ x, y }) => [x, y])
-              } else {
-                scacLineSeries.data = this.channelScacLine.pointlist.map(({ x, y }) => [x, y])
-              }
-            } else {
-              scacLineSeries.data = []
-            }
+            this.redrawLineBySeriesName('ScacLine', this.energyScacLine, this.channelScacLine, value)
             break
         }
       }
     },
 
+    // 根据seriesName重绘线
+    redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
+      const series = this.findSeriesByName(seriesName)
+      if (isShow) {
+        const data = this.graphAssistance.axisType == 'Energy' ? energyData : channelData
+        series.data = data.pointlist.map(({ x, y }) => [x, y])
+      } else {
+        series.data = []
+      }
+    },
+
+    // 重绘控制点
+    redrawCtrlPointBySeriesName() {
+      const series = this.findSeriesByName('BaseLine_Ctrl_Point')
+      const data = this.graphAssistance.axisType == 'Energy' ? this.shapeEnergyData : this.shapeChannelData
+      series.data = data.map(({ size, color, point: { x, y } }) => {
+        return {
+          value: [x, y],
+          itemStyle: {
+            color: 'transparent',
+            borderColor: color,
+            borderWidth: size / 2
+          }
+        }
+      })
+    },
+
+    // 重绘Peak Line
+    redrawPeakLine() {
+      this.option.series = this.option.series.filter(item => {
+        return -1 == item.name.indexOf('Peak_')
+      })
+
+      const data = this.graphAssistance.axisType == 'Energy' ? this.energyPeakGroup : this.channelPeakGroup
+      const peakLines = []
+      data.forEach((item, index) => {
+        peakLines.push({
+          name: `Peak_${index}`,
+          type: 'line',
+          data: item.pointlist.map(({ x, y }) => [x, y]),
+          itemStyle: {
+            color: `rgb(${item.color})`
+          },
+          lineStyle: {
+            width: 1
+          },
+          symbol: 'none',
+          animation: false
+        })
+      })
+
+      this.option.series.push(...peakLines)
+    },
+
+    // 重绘右上角的缩略图
+    redrawThumbnailChart() {
+      const series = this.thumbnailOption.series[0]
+      const data = this.graphAssistance.axisType == 'Energy' ? this.shadowEnergyChart : this.shadowChannelChart
+      series.data = data.pointlist.map(({ x, y }) => [x, y])
+    },
+
     // 点击图表，设置红线
     handleChartClick(param) {
       const { offsetX, offsetY } = param
@@ -663,13 +737,19 @@ export default {
 
         y1 = yAxisLimit(y1)
         y2 = yAxisLimit(y2)
-        
+
         this.option.xAxis.min = x1
         this.option.xAxis.max = x2
         this.option.yAxis.min = y1
         this.option.yAxis.max = y2
 
-        this.setThumbnailChartRect(x1, y2, x2, y1)
+        if (this.graphAssistance.axisType == 'Energy') {
+          const channel1 = this.getChannelByEnergy(x1)
+          const channel2 = this.getChannelByEnergy(x2)
+          this.setThumbnailChartRect(channel1, y2, channel2, y1)
+        } else {
+          this.setThumbnailChartRect(x1, y2, x2, y1)
+        }
       }
 
       this.clearBrush(chart)
@@ -731,8 +811,17 @@ export default {
 
         this.setThumbnailChartRect(xAxis - halfWidth, yAxis + halfHeight, xAxis + halfWidth, yAxis - halfHeight)
 
-        this.option.xAxis.min = xAxis - halfWidth
-        this.option.xAxis.max = xAxis + halfWidth
+        if (this.graphAssistance.axisType == 'Energy') {
+          const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
+          const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
+
+          this.option.xAxis.min = x1
+          this.option.xAxis.max = x2
+        } else {
+          this.option.xAxis.min = xAxis - halfWidth
+          this.option.xAxis.max = xAxis + halfWidth
+        }
+
         this.option.yAxis.min = yAxis - halfHeight
         this.option.yAxis.max = yAxis + halfHeight
       }
@@ -775,11 +864,28 @@ export default {
      * @param {Number} min
      * @param {Number} max
      */
-     rangeNumber(min, max) {
+    rangeNumber(min, max) {
       return num => {
         return num > max ? max : num < min ? min : num
       }
     },
+
+    getChannelByEnergy(energy) {
+      let channel = 0
+      for (let index = 1; index < this.allEnergy.pointlist.length; index++) {
+        const currEnergy = this.allEnergy.pointlist[index].x
+        if (currEnergy >= energy) {
+          const prevEnergy = this.allEnergy.pointlist[index - 1].x
+          if (currEnergy - energy > energy - prevEnergy.x) {
+            channel = index
+          } else {
+            channel = index + 1
+          }
+          break
+        }
+      }
+      return channel
+    }
   },
   watch: {
     sample: {
@@ -817,6 +923,7 @@ export default {
     width: 100%;
     height: 100%;
     position: relative;
+    overflow: hidden;
   }
 
   &-thumbnail {