feat: 自建台站散点图右侧增加根据滑块范围控制颜色功能

src/views/spectrumAnalysis/beta-analysis.vue

@@ -215,13 +215,9 @@ export default {
       async handler(newVal, oldVal) {
         const sampleData = getSampleData(newVal.inputFileName)
         if (sampleData) {
-          const { data, from } = sampleData
+          const { data } = sampleData
           this.sampleDetail = data
           this.changeChartByType('sample')
-          if (from == 'db') {
-            this.sampleDetail = data
-          }
-          this.ROIAnalyzeLists = data.ROIAnalyzeLists || []
         } else {
           if (newVal.sampleId) {
             this.getDetailFromDB()
@@ -272,7 +268,7 @@ export default {
         const { success, result, message } = await postAction('/selfStation/Reprocessing', formData)
         if (success) {
           const analyseList = this.getROIAnalyzeListsFromResult(result)
-          this.ROIAnalyzeLists = analyseList
+          this.ROIAnalyzeLists = this.spectraType == 'sample' ? analyseList : []
           updateSampleData({
             inputFileName,
             key: 'ROIAnalyzeLists',
@@ -409,7 +405,7 @@ export default {
       }
     },
 
-    // 获取样品详情
+    // 获取谱详情
     async getDetailFromDB() {
       const { dbName, sampleId, analyst, inputFileName } = this.sample
       try {
@@ -434,7 +430,6 @@ export default {
           })
 
           const analyseList = this.getROIAnalyzeListsFromResult(result.sample)
-          this.ROIAnalyzeLists = analyseList
           updateSampleData({
             inputFileName,
             key: 'ROIAnalyzeLists',

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -26,8 +26,16 @@
           @resize="handleChartResize"
         />
         <div class="bar">
-          <div>{{ visualMapMax }}</div>
+          <div>{{ visualMap.max }}</div>
-          <div class="bar-main"></div>
+          <div class="bar-main">
+            <a-slider
+              v-model="visualMap.value"
+              range
+              vertical
+              :max="visualMap.max"
+              @afterChange="handleSliderChange"
+            ></a-slider>
+          </div>
           <div>0</div>
         </div>
       </div>
@@ -224,7 +232,6 @@ export default {
 
     return {
       showROI: true,
-      myChart: null,
       startChannel: null,
       endChannel: null,
       boundaryList: [], // 最终生成的框
@@ -232,8 +239,6 @@ export default {
       isLog: true, // 当前右侧的图表是否是log
       currBoundaryItem: null, // 当前正在操作的方框
 
-      visualMapMax: 0,
-
       chartAxis: cloneDeep(ChartAxis),
       boundary: [],
 
@@ -243,6 +248,12 @@ export default {
         g: 0,
         c: 0,
       },
+
+      visualMap: {
+        // 右侧范围选择
+        value: [0, 0],
+        max: 0,
+      },
     }
   },
   created() {
@@ -357,23 +368,52 @@ export default {
 
     // 构造一个scatter 的点
     buildScatterItem(xAxis, yAxis, count) {
-      const { r, g, b } = this.interpolateColor(1 - count / this.visualMapMax)
-
       return {
-        value: [xAxis, yAxis],
+        value: [xAxis, yAxis, count],
         itemStyle: {
-          color: `rgb(${r}, ${g}, ${b})`,
+          color: this.getScatterItemColor(count),
         },
       }
     },
 
-    setVisialMapParams() {
+    // 获取一个点的颜色
-      const counts = this.histogramDataList.filter(({ c }) => c).map(({ c }) => c)
+    getScatterItemColor(count) {
-      if (counts.length) {
+      const [min, max] = this.visualMap.value
-        this.visualMapMax = counts.sort((a, b) => b - a)[0]
+      let color = ''
+      if (count >= max) {
+        color = '#f00'
+      } else if (count <= min) {
+        color = '#fff'
       } else {
-        this.visualMapMax = 0
+        const { r, g, b } = this.interpolateColor(1 - (count - min) / (max - min))
+        color = `rgb(${r}, ${g}, ${b})`
       }
+      return color
+    },
+
+    // 设置右侧滑块参数
+    setVisialMapParams() {
+      const counts = this.histogramDataList
+        .filter(({ c }) => c)
+        .map(({ c }) => c)
+        .sort((a, b) => b - a)
+      const max = (counts[0] || 0) + 100
+      // 要求在最大值基础上加100
+      this.visualMap.max = max
+      this.visualMap.value = [0, max]
+    },
+
+    // 右侧滑块改变
+    handleSliderChange() {
+      this.scatterList.forEach((item) => {
+        item.itemStyle.color = this.getScatterItemColor(item.value[2])
+      })
+
+      this.$refs.chartTwoDRef.setOption({
+        series: {
+          data: this.scatterList,
+        },
+      })
     },
 
     // 颜色插值算法
@@ -710,7 +750,35 @@ export default {
         &-main {
           width: 14px;
           flex: 1;
-          background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
+
+          .ant-slider {
+            margin: 0;
+            padding: 0;
+
+            ::v-deep {
+              .ant-slider-handle {
+                left: -2px;
+                right: -2px;
+                border-radius: 0;
+                margin-left: 0;
+                box-shadow: none;
+                border: 0;
+                background: #0cebc9;
+                height: 6px;
+                width: auto;
+              }
+
+              .ant-slider-rail {
+                width: 100%;
+                background: #084248 !important;
+              }
+
+              .ant-slider-track {
+                width: 100%;
+                background: linear-gradient(to bottom, #f00 0, #fff 100%);
+              }
+            }
+          }
         }
       }
     }
@@ -728,11 +796,9 @@ export default {
     }
 
     &.disabled {
-      cursor: not-allowed;
-
       .boundary-item-left,
       .boundary-item-right {
-        cursor: default;
+        pointer-events: none;
       }
     }
   }