feat: 增加对gamma图表缩放的键盘快捷键
This commit is contained in:
parent
78dba4c37c
commit
67757b84e7
|
|
@ -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 }, [
|
||||
0,
|
||||
getAxisMax(thumbnailChart, 'yAxis'),
|
||||
])
|
||||
const [, minYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, 1])
|
||||
const { pixY: maxYAxisPixel } = this.convertToPixel(thumbnailChart, 0, getAxisMax(thumbnailChart, 'yAxis'))
|
||||
const { pixY: minYAxisPixel } = this.convertToPixel(thumbnailChart, 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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
import { buildLineSeries } from "@/utils/chartHelper"
|
||||
import { baseLineCtrlPoint, baseLineSeries, compareLineSeries, lcLineSeries, scacLineSeries, spectrumSeries } from "./seriesBuilder"
|
||||
import { buildLineSeries } from '@/utils/chartHelper'
|
||||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user