From edf91d5e74aefaff11b0718f48a5ba8cfcee3382 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 18 Oct 2023 16:15:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DBeta=202D=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=8F=B3=E4=BE=A7=E8=89=B2=E7=9B=98=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=80=BB=E8=BE=91=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BetaGammaSpectrumChart.vue     | 58 +++++++++----------
 .../components/ColorPalette.vue               | 55 +++++++++---------
 2 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index 0315866..5b3bd3f 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -24,8 +24,8 @@
           @brushEnd="handleBrushEnd"
         />
         <div class="bar">
-          <color-palette v-model="currCount" :maxValue="4" />
-          <div>{{ currCount + 1 }}</div>
+          <color-palette v-model="currCount" />
+          <div>{{ currCount }}</div>
           <div class="bar-main"></div>
           <div>0</div>
         </div>
@@ -322,8 +322,7 @@ export default {
     return {
       active: 0,
 
-      maxCount: 15, // count的最大值
-      currCount: 15,
+      currCount: 50,
 
       twoDOption,
       threeDSurfaceOption,
@@ -359,7 +358,7 @@ export default {
       this.emitRangeChange([0, 256, 0, 256])
       this.reDrawRect()
 
-      this.rangeScatter()
+      this.buildScatterList()
     },
 
     // 点击ROI
@@ -439,26 +438,33 @@ export default {
 
         this.reDrawRect()
 
-        this.rangeScatter()
+        this.buildScatterList()
       }
 
       this.clearBrush(chart)
     },
 
-    /**
-     * 因scatterGL 不受axis中max和min的控制，手动处理溢出部分
-     */
-    rangeScatter() {
+    // 构造scatter列表
+    buildScatterList() {
       const {
         xAxis: { min: minX, max: maxX },
         yAxis: { min: minY, max: maxY }
       } = this.twoDOption
 
-      const data = this.histogramDataList
+      this.twoDOption.series.data = this.histogramDataDList
         .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
-        .map(({ b, g, c }) => [b, g, c])
+        .map(({ b, g, c }) => this.buildScatterItem(b, g, c))
+    },
 
-      this.twoDOption.series.data = data
+    // 构造一个scatter 的点
+    buildScatterItem(xAxis, yAxis, count) {
+      const { r, g, b } = this.interpolateColor(1 - (count / this.currCount))
+      return {
+        value: [xAxis, yAxis],
+        itemStyle: {
+          color: `rgb(${r}, ${g}, ${b})`
+        }
+      }
     },
 
     // 通知上层范围改变
@@ -482,7 +488,7 @@ export default {
       }
 
       this.reDrawRect()
-      this.rangeScatter()
+      this.buildScatterList()
     },
 
     // 重绘矩形框区域
@@ -713,7 +719,10 @@ export default {
     },
 
     // 颜色插值算法
-    interpolateColor(color1, color2, percentage) {
+    interpolateColor(percentage) {
+      const color1 = { r: 255, g: 0, b: 0 },
+        color2 = { r: 255, g: 255, b: 255 }
+
       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
@@ -723,10 +732,9 @@ export default {
   watch: {
     // 2D 图表
     histogramDataList: {
-      handler(newVal) {
+      handler() {
         this.active = 0
-        this.twoDOption.series.data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
-        this.rangeScatter()
+        this.buildScatterList()
       },
       immediate: true
     },
@@ -759,18 +767,8 @@ export default {
     },
 
     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'
-        }
+      handler() {
+        this.buildScatterList()
       },
       immediate: true
     }
diff --git a/src/views/spectrumAnalysis/components/ColorPalette.vue b/src/views/spectrumAnalysis/components/ColorPalette.vue
index 80ce3ff..b470f9a 100644
--- a/src/views/spectrumAnalysis/components/ColorPalette.vue
+++ b/src/views/spectrumAnalysis/components/ColorPalette.vue
@@ -23,16 +23,19 @@
 </template>
 
 <script>
+const startRange = [0, 36], // 1 所在的角度范围
+  endRange = [324, 360], // 50 所在的角度范围
+  angleRange = [startRange]
+for (let i = 0; i <= 47; i++) {
+  angleRange.push([36 + i * 6, 36 + (i + 1) * 6])
+}
+angleRange.push(endRange)
 export default {
   props: {
     value: {
       type: Number,
       default: 1
     },
-    maxValue: {
-      type: Number,
-      default: 0
-    },
     circleWidth: {
       type: Number,
       default: 26
@@ -48,7 +51,8 @@ export default {
         x: 0,
         y: 0
       },
-      isMouseDown: false
+      isMouseDown: false,
+      angleRange
     }
   },
   methods: {
@@ -79,16 +83,23 @@ export default {
     },
 
     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)) {
-          this.$emit('input', index)
+      const { angle } = this.getDegree([offsetX, offsetY])
+      for (let i = 0; i < this.angleRange.length; i++) {
+        const [start, end] = this.angleRange[i]
+        if (angle >= start && angle <= end) {
+          const center = (start + end) / 2
+          const radian = (center * Math.PI) / 180
+          this.setDotPosition(radian)
+          this.$emit('input', i + 1)
           break
         }
       }
-      this.setDotPosition(radian)
     },
 
+    /**
+     * 设置圆点位置
+     * @param {*} radian
+     */
     setDotPosition(radian) {
       const circleRadius = this.circleWidth / 2 // 半径
       const dotRadius = circleRadius - this.dotWidth // 绘制圆点时的半径
@@ -102,6 +113,7 @@ export default {
 
     /**
      * 根据圆心和某个点，计算从圆心到该点的角度
+     * @returns { { radian: number; angle: number; } } radian: 弧度 angle: 角度
      */
     getDegree(point) {
       // 计算两个点在 x 轴上的差值和在 y 轴上的差值
@@ -112,13 +124,13 @@ export default {
       const deltaY = pointY - circleRadius
       // 使用反正切函数计算角度（弧度）
       const radian = Math.atan2(deltaX, deltaY)
-      let degree = radian * (180 / Math.PI)
-      if (degree < 0) {
-        degree = 360 + degree
+      let angle = radian * (180 / Math.PI)
+      if (angle < 0) {
+        angle = 360 + angle
       }
       return {
         radian,
-        degree
+        angle
       }
     }
   },
@@ -126,22 +138,13 @@ export default {
   watch: {
     value: {
       handler(newVal) {
-        const degree = newVal * this.perDegree
-        const radian = (degree * Math.PI) / 180 // 角度转弧度
-
+        const [start, end] = this.angleRange[newVal - 1]
+        const center = (start + end) / 2
+        const radian = (center * Math.PI) / 180 // 角度转弧度
         this.setDotPosition(radian)
       },
       immediate: true
     }
-  },
-  computed: {
-    range() {
-      return this.maxValue > 50 ? this.maxValue : 50
-    },
-
-    perDegree() {
-      return 360 / this.range
-    }
   }
 }
 </script>