feat: 增加对gamma图表缩放的键盘快捷键

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -235,6 +235,8 @@ export default {
     this.$bus.$on('colorChange', this.handleColorChange)
     this.$bus.$on('gammaRefresh', this.handleRefresh)
     this.$bus.$on('accept', this.handleAccept)
+
+    document.addEventListener('keydown', this.handleKeyboardEvent)
   },
   destroyed() {
     this.cancelLastRequest()
@@ -242,12 +244,170 @@ export default {
     this.$bus.$off('colorChange', this.handleColorChange)
     this.$bus.$off('gammaRefresh', this.handleRefresh)
     this.$bus.$off('accept', this.handleAccept)
+
+    document.removeEventListener('keydown', this.handleKeyboardEvent)
   },
   mounted() {
     this.option.brush = { toolbox: [] }
     this.initWebSocket()
   },
   methods: {
+    // 键盘事件
+    handleKeyboardEvent(event) {
+      this.changeRectByKeyBoard(event.key)
+    },
+
+    /**
+     * 键盘事件处理
+     * @param {*} key
+     * @description  1、xAxis采用按axis值增/减量的方式实现
+     * 2、而因为yAxis在type=log下分布不平均，无法用按axis值增/减量的方式实现平均的增大或缩小
+     * 所以采用像素增/减量的方式。
+     * 具体实现则为，因为右上角缩略图表是不改变轴最大值最小值的，也就是它的每个axis像素数不会
+     * 随着图表值域的缩小而变大，所以将其视作标准参照物，将主图表现在的axis值转为像素值，增/减
+     * 去每步像素值得到新的像素值，然后再转化为axis值去设置主图表范围，和设置右上角缩略图表的
+     * 框的范围
+     */
+    changeRectByKeyBoard(key) {
+      if (!['=', '-', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(key)) {
+        return
+      }
+      const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
+      const markLineData = spectrumLineSeries.markLine.data[0]
+      const markLineXAxis = markLineData.xAxis
+
+      const thumbnailChart = this.getThumbnailChart()
+      // 通过thumbnail chart获取最小值和最大值
+      const maxX = getAxisMax(thumbnailChart, 'xAxis')
+      const maxY = getAxisMax(thumbnailChart, 'yAxis')
+      const xStep = Math.ceil(maxX / 100) // x 轴每次走的axis数
+      const yStep = 5 // y 轴在缩略图表每次走的像素数
+
+      // 如果遇到dataMax，设为最大值真实值
+      let { min: currMinX, max: currMaxX } = this.option.xAxis
+      if (currMaxX == 'dataMax') {
+        currMaxX = maxX
+      }
+      let { min: currMinY, max: currMaxY } = this.option.yAxis
+      if (currMaxY == 'dataMax') {
+        currMaxY = maxY
+      }
+
+      const { pixX: currMinXPix } = this.convertToPixel(thumbnailChart, currMinX, currMinY)
+      const { pixY: currMinYPix } = this.convertToPixel(thumbnailChart, currMinX, currMinY)
+      const { pixY: currMaxYPix } = this.convertToPixel(thumbnailChart, currMinX, currMaxY)
+
+      const { pixY: minYPixel } = this.convertToPixel(thumbnailChart, currMinX, 1)
+      const { pixY: maxYPixel } = this.convertToPixel(thumbnailChart, currMinX, maxY)
+
+      let nextMinX, nextMaxX, nextMinYPix, nextMaxYPix
+
+      switch (key) {
+        case '=': // 在x轴扩大范围
+          nextMinX = currMinX - xStep
+          nextMaxX = currMaxX + xStep
+          if (nextMinX < 1) {
+            nextMinX = 1
+          }
+          if (nextMaxX > maxX) {
+            nextMaxX = maxX
+          }
+          this.setRectRange(nextMinX, nextMaxX, currMinY, currMaxY)
+          break
+        case '-': // 在x轴缩小范围
+          if (currMaxX - currMinX > 2 * xStep) {
+            nextMinX = currMinX + xStep
+            nextMaxX = currMaxX - xStep
+
+            this.setRectRange(nextMinX, nextMaxX, currMinY, currMaxY)
+          }
+          break
+        case 'ArrowUp': // 在y轴扩大范围
+          nextMinYPix = currMinYPix + yStep
+          nextMaxYPix = currMaxYPix - yStep
+
+          if (nextMinYPix > minYPixel) {
+            nextMinYPix = minYPixel
+          }
+
+          if (nextMaxYPix < maxYPixel) {
+            nextMaxYPix = maxYPixel
+          }
+
+          const nextMinY = getXAxisAndYAxisByPosition(thumbnailChart, currMinXPix, nextMinYPix)[1]
+          const nextMaxY = getXAxisAndYAxisByPosition(thumbnailChart, currMinXPix, nextMaxYPix)[1]
+
+          this.setRectRange(currMinX, currMaxX, nextMinY, nextMaxY)
+          break
+        case 'ArrowDown': // 在y轴缩小范围
+          if (currMinYPix - currMaxYPix > 2 * yStep) {
+            nextMinYPix = currMinYPix - yStep
+            nextMaxYPix = currMaxYPix + yStep
+
+            const nextMinY = getXAxisAndYAxisByPosition(thumbnailChart, currMinXPix, nextMinYPix)[1]
+            const nextMaxY = getXAxisAndYAxisByPosition(thumbnailChart, currMinXPix, nextMaxYPix)[1]
+
+            this.setRectRange(currMinX, currMaxX, nextMinY, nextMaxY)
+          }
+          break
+        case 'ArrowRight':
+          if (markLineXAxis == maxX) {
+            return
+          }
+          const nextAxis = markLineXAxis == -1 ? 1 : markLineXAxis + 1
+          markLineData.xAxis = nextAxis
+          const { channel: nextChannel, energy: nextEnergy, counts: nextCounts } = this.getEnergyAndCountsByXAxis(nextAxis)
+          this.setChartBottomTitle(nextChannel, nextEnergy, nextCounts)
+
+          this.getSelPosNuclide(nextChannel)
+          break
+        case 'ArrowLeft':
+          if (markLineXAxis <= 1) {
+            return
+          }
+          markLineData.xAxis = markLineXAxis - 1
+          const {
+            channel: prevChannel,
+            energy: prevEnergy,
+            counts: prevCounts,
+          } = this.getEnergyAndCountsByXAxis(markLineXAxis - 1)
+          this.setChartBottomTitle(prevChannel, prevEnergy, prevCounts)
+
+          this.getSelPosNuclide(prevChannel)
+          break
+      }
+    },
+
+    // 图表转化像素值
+    convertToPixel(chart, xAxis, yAxis) {
+      const [pixX, pixY] = chart.convertToPixel({ seriesIndex: 0 }, [xAxis, yAxis])
+      return {
+        pixX,
+        pixY,
+      }
+    },
+
+    // 设置范围
+    setRectRange(minX, maxX, minY, maxY) {
+      this.option.xAxis.min = minX
+      this.option.xAxis.max = maxX
+      this.option.yAxis.min = minY
+      this.option.yAxis.max = maxY
+      if (this.isEnergy()) {
+        const channel1 = this.getChannelByEnergy(minX)
+        const channel2 = this.getChannelByEnergy(maxX)
+        this.setThumbnailChartRect(channel1, maxY, channel2, minY)
+      } else {
+        this.setThumbnailChartRect(minX, maxY, maxX, minY)
+      }
+
+      const thumbnailChart = this.getThumbnailChart()
+      const [, maxYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, minY]) // 方框的上下两条边的yAxis转为pix
+      const [, minYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, maxY])
+      const rectHeightPixel = maxYPixel - minYPixel // 计算方框的左右边长(pix)
+      this.halfHeightPixel = rectHeightPixel / 2
+    },
+
     initWebSocket: function () {
       console.log('qweqwerq')
       // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
@@ -434,7 +594,12 @@ export default {
       this.resetThumbnailChartDataMax()
 
       // 设置 Spectrum Line
-      this.redrawLineBySeriesName('Spectrum', shadowEnergyChart, shadowChannelChart, true, shadowChannelChart.color)
+      this.setSeriesData(
+        this.option.series,
+        'Spectrum',
+        this.transformPointListData(shadowChannelChart.pointlist),
+        shadowChannelChart.color
+      )
 
       // 设置 BaseLine
       this.setSeriesData(
@@ -691,7 +856,7 @@ export default {
       if (point) {
         const xAxis = point[0]
         const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
-        spectrumLineSeries.markLine.data[0].xAxis = xAxis
+        spectrumLineSeries.markLine.data[0].xAxis = parseInt(xAxis.toFixed())
 
         const { channel, energy, counts } = this.getEnergyAndCountsByXAxis(xAxis)
         this.setChartBottomTitle(channel, energy, counts)
@@ -702,7 +867,9 @@ export default {
 
     // 设置图表底部的标题
     setChartBottomTitle(channel, energy, counts) {
-      this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts}} {a|Detectability:0}`
+      this.option.title.text = `{a|Channel:${channel}} {a|Energy:${
+        energy || 0
+      }} {a|Counts:${counts || 0}} {a|Detectability:0}`
     },
 
     // 根据xAixs值找channel、energy和counts
@@ -1058,14 +1225,11 @@ export default {
       const point = getXAxisAndYAxisByPosition(thumbnailChart, offsetX, offsetY)
       if (point && this.thumbnailChartRect && this.thumbnailChartRect.length) {
         const [x1, y2, x2, y1] = this.thumbnailChartRect
-        const halfWidth = Math.ceil((x2 - x1) / 2)
+        const halfWidth = (x2 - x1) / 2
 
         // 缩略图最大值转为pix
-        const [, maxYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [
+        const { pixY: maxYAxisPixel } = this.convertToPixel(thumbnailChart, 0, getAxisMax(thumbnailChart, 'yAxis'))
-          0,
+        const { pixY: minYAxisPixel } = this.convertToPixel(thumbnailChart, 0, 1)
-          getAxisMax(thumbnailChart, 'yAxis'),
-        ])
-        const [, minYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, 1])
 
         let [xAxis, yAxis] = point
 
@@ -1078,7 +1242,7 @@ export default {
 
         xAxis = xAxisLimit(xAxis)
 
-        let [, yAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, yAxis])
+        let { pixY: yAxisPixel } = this.convertToPixel(thumbnailChart, 0, yAxis)
         yAxisPixel = yAxisLimit(yAxisPixel)
 
         const minYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel + halfHeightPixel])[1] // 再把y轴最小值从pix转为yAxis

src/views/spectrumAnalysis/settings.js

@@ -1,5 +1,12 @@
-import { buildLineSeries } from "@/utils/chartHelper"
+import { buildLineSeries } from '@/utils/chartHelper'
-import { baseLineCtrlPoint, baseLineSeries, compareLineSeries, lcLineSeries, scacLineSeries, spectrumSeries } from "./seriesBuilder"
+import {
+  baseLineCtrlPoint,
+  baseLineSeries,
+  compareLineSeries,
+  lcLineSeries,
+  scacLineSeries,
+  spectrumSeries
+} from './seriesBuilder'
 
 export const GammaOptions = {
   option: {
@@ -36,6 +43,7 @@ export const GammaOptions = {
       className: 'figure-chart-option-tooltip'
     },
     xAxis: {
+      type: 'value',
       name: 'Channel',
       nameTextStyle: {
         color: '#8FD4F8',
@@ -105,13 +113,13 @@ export const GammaOptions = {
   // 缩略图配置
   thumbnailOption: {
     grid: {
-      top: 0,
+      top: 5,
       left: 5,
       right: 5,
-      bottom: 0
+      bottom: 5
     },
     xAxis: {
-      type: 'category',
+      type: 'value',
       axisLine: {
         show: false
       },
@@ -121,6 +129,9 @@ export const GammaOptions = {
       axisLabel: {
         show: false
       },
+      axisTick: {
+        show: false
+      },
       min: 1,
       max: 'dataMax'
     },
@@ -135,6 +146,9 @@ export const GammaOptions = {
       axisLabel: {
         show: false
       },
+      axisTick: {
+        show: false
+      },
       min: 1,
       max: 'dataMax'
     },
@@ -159,8 +173,6 @@ export const GammaOptions = {
   }
 }
 
-console.log('%c [  ]-162', 'font-size:13px; background:pink; color:#bf2c9f;', GammaOptions.option)
-
 export const graphAssistance = {
   chartYAxisType: 'Log10',
   Cursor: true,
@@ -168,5 +180,5 @@ export const graphAssistance = {
   Lc: true,
   axisType: 'Channel',
   spectrumType: 'Lines',
-  SCAC: true,
+  SCAC: true
-}
+}