feat: 修改颜色

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -31,17 +31,30 @@
           @resize="handleChartResize"
         />
         <div class="bar">
-          <div>{{ visualMap.max }}</div>
+          <a-input-number
+            type="number"
+            :max="visualMap.max"
+            :min="0"
+            v-model.number="visualMap.value[1]"
+            @change="handleVisialMapValueChange"
+          />
           <div class="bar-main">
             <a-slider
               v-model="visualMap.value"
               range
               vertical
               :max="visualMap.max"
+              :min="0"
               @afterChange="handleSliderChange"
             ></a-slider>
           </div>
-          <div>0</div>
+          <a-input-number
+            type="number"
+            :max="visualMap.max"
+            :min="0"
+            v-model.number="visualMap.value[0]"
+            @change="handleVisialMapValueChange"
+          />
         </div>
 
         <!-- 图表上面的四边形 -->
@@ -100,7 +113,7 @@
 import CustomChart from '@/components/CustomChart/index.vue'
 import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
 import SampleDataMixin from '../SampleDataMixin'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, debounce } from 'lodash'
 
 const buttons = ['Gamma', 'Beta', '2D', '3D Surface', '3D Scatter']
 // Beta-Gamma 的配置
@@ -435,6 +448,9 @@ export default {
     this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
     this.$bus.$on('toggleROIRect', this.handleToggleROIRect)
     this.$bus.$on('resetROIRectState', this.resetROIRectState)
+
+    // 右侧渐变条上下两个值改变时防抖
+    this.handleVisialMapValueChange = debounce(this.handleSliderChange, 500)
   },
   beforeDestroy() {
     this.$bus.$off('roiLimitItemChange', this.handleLimitItemChange)
@@ -560,9 +576,9 @@ export default {
       const [min, max] = this.visualMap.value
       let color = ''
       if (count >= max) {
-        color = '#f00'
+        color = '#ff2222'
       } else if (count <= min) {
-        color = '#fff'
+        color = '#c9db7f'
       } else {
         const { r, g, b } = this.interpolateColor(1 - (count - min) / (max - min))
         color = `rgb(${r}, ${g}, ${b})`
@@ -597,8 +613,8 @@ export default {
 
     // 颜色插值算法
     interpolateColor(percentage) {
-      const color1 = { r: 255, g: 0, b: 0 },
+      const color1 = { r: 255, g: 34, b: 34 },
-        color2 = { r: 255, g: 255, b: 255 }
+        color2 = { r: 201, g: 219, b: 127 }
 
       const r = color1.r + (color2.r - color1.r) * percentage
       const g = color1.g + (color2.g - color1.g) * percentage
@@ -973,7 +989,7 @@ export default {
         gap: 5px;
 
         &-main {
-          width: 14px;
+          width: 12px;
           flex: 1;
 
           .ant-slider {
@@ -1000,11 +1016,30 @@ export default {
 
               .ant-slider-track {
                 width: 100%;
-                background: linear-gradient(to bottom, #f00 0, #fff 100%);
+                background: linear-gradient(to bottom, #ff2222 0, #c9db7f 100%);
               }
             }
           }
         }
+
+        .ant-input-number {
+          width: 35px;
+          height: 20px;
+          border: none;
+          box-shadow: none;
+
+          ::v-deep {
+            .ant-input-number-handler-wrap {
+              display: none;
+            }
+
+            .ant-input-number-input {
+              padding: 0;
+              text-align: center;
+              height: 20px;
+            }
+          }
+        }
       }
     }
   }