From bdaf65ca99a66b0bb2a77ea6567600ae2a6f1650 Mon Sep 17 00:00:00 2001 From: Xu Zhimeng Date: Wed, 27 Sep 2023 13:41:51 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96gamma=E4=B8=BB?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/chartHelper.js | 1 + src/views/spectrumAnalysis/gamma-analysis.vue | 552 +++++++----------- src/views/spectrumAnalysis/index.vue | 2 +- src/views/spectrumAnalysis/settings.js | 167 ++++++ 4 files changed, 391 insertions(+), 331 deletions(-) create mode 100644 src/views/spectrumAnalysis/settings.js diff --git a/src/utils/chartHelper.js b/src/utils/chartHelper.js index e6cb5f0..ab1bc3e 100644 --- a/src/utils/chartHelper.js +++ b/src/utils/chartHelper.js @@ -99,6 +99,7 @@ export function findSeriesByName(series, seriesName) { * 限定数字在一定范围 * @param {Number} min * @param {Number} max + * @returns {(num: number) => number } */ export function rangeNumber(min, max) { return num => { diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue index 90d01f4..6e36352 100644 --- a/src/views/spectrumAnalysis/gamma-analysis.vue +++ b/src/views/spectrumAnalysis/gamma-analysis.vue @@ -119,154 +119,7 @@ import NuclideReviewModal from './components/Modals/AnalyzeInteractiveToolModal/ import CompareFileListModal from './components/Modals/CompareFileListModal.vue' import ReProcessingModal from './components/Modals/ReProcessingModal/index.vue' -// 初始配置 -const initialOption = { - grid: { - top: 40, - left: 60, - right: 50, - containLabel: true, - }, - title: { - text: '', - left: 'center', - bottom: 10, - textStyle: { - color: '#8FD4F8', - rich: { - a: { - padding: [0, 20, 0, 0], - fontSize: 16, - }, - }, - }, - }, - tooltip: { - trigger: 'axis', - axisPointer: { - lineStyle: { - color: '#3CAEBB', - width: 1, - type: 'solid', - }, - }, - formatter: undefined, - className: 'figure-chart-option-tooltip', - }, - xAxis: { - name: 'Channel', - nameTextStyle: { - color: '#8FD4F8', - fontSize: 16, - align: 'right', - verticalAlign: 'top', - padding: [30, 0, 0, 0], - }, - axisLine: { - lineStyle: { - color: '#ade6ee', - }, - }, - splitLine: { - show: false, - }, - axisLabel: { - textStyle: { - color: '#ade6ee', - }, - }, - min: 1, - max: 'dataMax', - animation: false, - axisLabel: { - formatter: (value) => { - return parseInt(value) - }, - }, - }, - yAxis: { - name: 'Counts', - type: 'value', - nameTextStyle: { - color: '#8FD4F8', - fontSize: 16, - }, - axisLine: { - show: true, - lineStyle: { - color: '#ade6ee', - }, - }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(173, 230, 238, .2)', - }, - }, - axisLabel: { - textStyle: { - color: '#ade6ee', - }, - }, - min: 1, - max: 'dataMax', - animation: false, - axisLabel: { - formatter: (value) => { - return value.toFixed(1) - }, - }, - }, - series: [], - brush: {}, -} - -// 缩略图配置 -const thumbnailOption = { - grid: { - top: 0, - left: 5, - right: 5, - bottom: 0, - }, - xAxis: { - type: 'category', - axisLine: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - min: 1, - max: 'dataMax', - }, - yAxis: { - type: 'value', - axisLine: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - min: 1, - max: 'dataMax', - }, - series: [], -} - -const graphAssistance = { - axisType: 'Channel', - spectrumType: 'Lines', - Baseline: true, - SCAC: true, - Lc: true, -} +import { GammaOptions, graphAssistance } from './settings' export default { props: { @@ -290,19 +143,35 @@ export default { return { isLoading: false, isLoadingNuclide: false, - option: cloneDeep(initialOption), + option: cloneDeep(GammaOptions.option), opts: { notMerge: false, }, - thumbnailOption: cloneDeep(thumbnailOption), + thumbnailOption: cloneDeep(GammaOptions.thumbnailOption), detailedInfomation: [], qcFlags: [], graphAssistance: cloneDeep(graphAssistance), nuclideLibraryVisible: false, - channelPeakGroup: [], - energyPeakGroup: [], + channelData: { + peakGroup: [], + spectrumLine: null, + baseLine: null, + lcLine: null, + scacLine: null, + all: null, + baseLineCP: [], + }, + energyData: { + peakGroup: [], + spectrumLine: null, + baseLine: null, + lcLine: null, + scacLine: null, + all: null, + baseLineCP: [], + }, nuclideLibraryList: [], // 当前鼠标点击选中的channel peakInfomationTooltip: { @@ -326,6 +195,8 @@ export default { }, created() { this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}' + this.option.tooltip.formatter = this.tooltipFormatter + this.$bus.$on('colorChange', this.handleColorChange) this.$bus.$on('gammaRefresh', this.handleRefresh) this.$bus.$on('accept', this.handleAccept) @@ -339,6 +210,7 @@ export default { this.option.brush = { toolbox: [] } }, methods: { + // 获取样品详情 async getSampleDetail() { const { dbName, sampleId } = this.sample try { @@ -348,13 +220,7 @@ export default { // const { success, result, message } = Response - if (this._cancelToken && typeof this._cancelToken == 'function') { - this._cancelToken() - } - - const cancelToken = new axios.CancelToken((c) => { - this._cancelToken = c - }) + const cancelToken = this.cancelLastRequest() const { success, result, message } = await getAction( '/gamma/gammaByDB', @@ -381,9 +247,15 @@ export default { this.isLoading = true this.handleResetState() // const { success, result, message } = Response - const { success, result, message } = await getAction('/gamma/gammaByFile', { - fileName, - }) + const cancelToken = this.cancelLastRequest() + + const { success, result, message } = await getAction( + '/gamma/gammaByFile', + { + fileName, + }, + cancelToken + ) console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result) if (success) { this.dataProsess(result) @@ -395,6 +267,16 @@ export default { } }, + cancelLastRequest() { + if (this._cancelToken && typeof this._cancelToken == 'function') { + this._cancelToken() + } + + return new axios.CancelToken((c) => { + this._cancelToken = c + }) + }, + dataProsess(result) { this.isLoading = false @@ -419,44 +301,40 @@ export default { this.detailedInfomation = DetailedInformation this.qcFlags = QCFlag - const channelPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'channel') - const energyPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'energy') + const channelPeakGroup = this.getLineData(allData, 'Peak', 'channel', true) + const energyPeakGroup = this.getLineData(allData, 'Peak', 'energy', true) - const channelBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'channel') || {} - const energyBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'energy') + const channelBaseLine = this.getLineData(allData, 'BaseLine', 'channel') + const energyBaseLine = this.getLineData(allData, 'BaseLine', 'energy') - const channelLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'channel') || {} - const energyLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'energy') + const channelLcLine = this.getLineData(allData, 'Lc', 'channel') + const energyLcLine = this.getLineData(allData, 'Lc', 'energy') - const channelScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'channel') || {} - const energyScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'energy') + const channelScacLine = this.getLineData(allData, 'Scac', 'channel') + const energyScacLine = this.getLineData(allData, 'Scac', 'energy') - this.allEnergy = allData.find((item) => item.name == 'Energy' && item.group == 'energy') || {} - this.allChannel = allData.find((item) => item.name == 'Count' && item.group == 'channel') + const allChannel = this.getLineData(allData, 'Count', 'channel') + const allEnergy = this.getLineData(allData, 'Energy', 'energy') - // 保存Peak Line - this.channelPeakGroup = channelPeakGroup - this.energyPeakGroup = energyPeakGroup + this.channelData = { + peakGroup: channelPeakGroup, + spectrumLine: shadowChannelChart, + baseLine: channelBaseLine, + lcLine: channelLcLine, + scacLine: channelScacLine, + all: allChannel, + baseLineCP: shapeChannelData, + } - // 保存 Spectrum Line - this.shadowChannelChart = shadowChannelChart - this.shadowEnergyChart = shadowEnergyChart - - // 保存基线 - this.channelBaseLine = channelBaseLine - this.energyBaseLine = energyBaseLine - - // 保存Lc - this.channelLcLine = channelLcLine - this.energyLcLine = energyLcLine - - // 保存Scac - this.channelScacLine = channelScacLine - this.energyScacLine = energyScacLine - - // 保存 基线控制点 - this.shapeChannelData = shapeChannelData - this.shapeEnergyData = shapeEnergyData + this.energyData = { + peakGroup: energyPeakGroup, + spectrumLine: shadowEnergyChart, + baseLine: energyBaseLine, + lcLine: energyLcLine, + scacLine: energyScacLine, + all: allEnergy, + baseLineCP: shapeEnergyData, + } this.resetThumbnailChartDataMax() const series = [] @@ -465,7 +343,7 @@ export default { series.push( buildLineSeries( 'Spectrum', - shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]), + this.transformPointListData(shadowChannelChart.pointlist), shadowChannelChart.color, { symbolSize: 2, @@ -485,65 +363,33 @@ export default { ) ) - // 右上角缩略图推入Spectrum Line - this.thumbnailOption.series.push( - buildLineSeries( - 'Spectrum', - shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]), - shadowChannelChart.color, - { - silent: true, - markLine: { - silent: true, - symbol: 'none', - label: { - show: false, - }, - lineStyle: { - type: 'solid', - color: '#1397a3', - width: 1, - }, - data: [], - }, - } - ) + // 右上角缩略图设置Spectrum Line 数据 + this.setSeriesData( + this.thumbnailOption.series, + 'Spectrum', + this.transformPointListData(shadowChannelChart.pointlist), + shadowChannelChart.color ) // 推入BaseLine series.push( - buildLineSeries( - 'BaseLine', - channelBaseLine.pointlist && channelBaseLine.pointlist.map(({ x, y }) => [x, y]), - channelBaseLine.color, - { - zlevel: 2, - } - ) + buildLineSeries('BaseLine', this.transformPointListData(channelBaseLine.pointlist), channelBaseLine.color, { + zlevel: 2, + }) ) // 推入LcLine线 series.push( - buildLineSeries( - 'LcLine', - channelLcLine.pointlist && channelLcLine.pointlist.map(({ x, y }) => [x, y]), - channelLcLine.color, - { - zlevel: 3, - } - ) + buildLineSeries('LcLine', this.transformPointListData(channelLcLine.pointlist), channelLcLine.color, { + zlevel: 3, + }) ) // 推入Scac线 series.push( - buildLineSeries( - 'ScacLine', - channelScacLine.pointlist && channelScacLine.pointlist.map(({ x, y }) => [x, y]), - channelScacLine.color, - { - zlevel: 4, - } - ) + buildLineSeries('ScacLine', this.transformPointListData(channelScacLine.pointlist), channelScacLine.color, { + zlevel: 4, + }) ) // 推入基线控制点 @@ -571,14 +417,9 @@ export default { const peakLines = [] channelPeakGroup.forEach((item, index) => { peakLines.push( - buildLineSeries( - `Peak_${index}`, - item.pointlist.map(({ x, y }) => [x, y]), - item.color, - { - zlevel: 6, - } - ) + buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, { + zlevel: 6, + }) ) }) series.push(...peakLines) @@ -591,25 +432,26 @@ export default { ) this.option.series = series - - this.option.tooltip.formatter = this.tooltipFormatter }, + // chart 的 tooltip tooltipFormatter(params) { - if (this.isEnergy()) { - const energy = params[0].value[0] - const channel = this.getChannelByEnergy(energy) + let channel = 0 + let energy = 0 + const value = params[0].value[0] - return `
Channel: ${channel}
-
Energy: ${energy.toFixed(2)}
` + if (this.isEnergy()) { + energy = value.toFixed(2) + channel = this.getChannelByEnergy(energy) } else { - const channel = parseInt(params[0].value[0].toFixed()) - const energy = this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1] - return energy - ? `
Channel: ${channel}
-
Energy: ${energy.x.toFixed(2)}
` - : undefined + const allPointList = this.energyData.all.pointlist + channel = parseInt(value.toFixed()) + energy = allPointList && allPointList[channel - 1] + energy = energy ? energy.x.toFixed(2) : undefined } + + return `
Channel: ${channel}
+
Energy: ${energy}
` }, // Graph Assistance 操作 @@ -640,19 +482,24 @@ export default { this.redrawLineBySeriesName( 'BaseLine', - this.energyBaseLine, - this.channelBaseLine, + this.energyData.baseLine, + this.channelData.baseLine, this.graphAssistance.Baseline ) - this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, this.graphAssistance.Lc) + this.redrawLineBySeriesName( + 'LcLine', + this.energyData.lcLine, + this.channelData.lcLine, + this.graphAssistance.Lc + ) this.redrawLineBySeriesName( 'ScacLine', - this.energyScacLine, - this.channelScacLine, + this.energyData.scacLine, + this.channelData.scacLine, this.graphAssistance.SCAC ) - this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart) + this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine) this.redrawCtrlPointBySeriesName() this.redrawPeakLine() @@ -674,7 +521,7 @@ export default { compareLineSeries.type = 'line' compareLineSeries.symbol = 'none' - this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart) + this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine) if (this.channelCompareLine) { this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine) @@ -712,13 +559,13 @@ export default { } break case 'Baseline': - this.redrawLineBySeriesName('BaseLine', this.energyBaseLine, this.channelBaseLine, value) + this.redrawLineBySeriesName('BaseLine', this.energyData.baseLine, this.channelData.baseLine, value) break case 'Lc': - this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, value) + this.redrawLineBySeriesName('LcLine', this.energyData.lcLine, this.channelData.lcLine, value) break case 'SCAC': - this.redrawLineBySeriesName('ScacLine', this.energyScacLine, this.channelScacLine, value) + this.redrawLineBySeriesName('ScacLine', this.energyData.scacLine, this.channelData.scacLine, value) break } } @@ -730,22 +577,18 @@ export default { // 根据seriesName重绘线 redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true, color) { - const series = findSeriesByName(this.option.series, seriesName) if (isShow) { const data = this.isEnergy() ? energyData : channelData - series.data = data.pointlist.map(({ x, y }) => [x, y]) + this.setSeriesData(this.option.series, seriesName, this.transformPointListData(data.pointlist), color) } else { - series.data = [] - } - if (color) { - series.itemStyle.color = color + this.setSeriesData(this.option.series, seriesName, []) } }, // 重绘控制点 redrawCtrlPointBySeriesName() { const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point') - const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData + const data = this.isEnergy() ? this.energyData.baseLineCP : this.channelData.baseLineCP series.data = data.map(({ size, color, point: { x, y } }) => { return { value: [x, y], @@ -764,18 +607,13 @@ export default { return !item.name.includes('Peak_') }) - const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup + const data = this.isEnergy() ? this.energyData.peakGroup : this.channelData.peakGroup const peakLines = [] data.forEach((item, index) => { peakLines.push( - buildLineSeries( - `Peak_${index}`, - item.pointlist.map(({ x, y }) => [x, y]), - item.color, - { - zlevel: 6, - } - ) + buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, { + zlevel: 6, + }) ) }) @@ -785,8 +623,8 @@ export default { // 重绘右上角的缩略图 redrawThumbnailChart() { const series = findSeriesByName(this.thumbnailOption.series, 'Spectrum') - const data = this.isEnergy() ? this.shadowEnergyChart : this.shadowChannelChart - series.data = data.pointlist.map(({ x, y }) => [x, y]) + const data = this.isEnergy() ? this.energyData.spectrumLine : this.channelData.spectrumLine + series.data = this.transformPointListData(data.pointlist) }, // 点击图表，设置红线 @@ -801,8 +639,10 @@ export default { const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed()) const energy = this.isEnergy() ? xAxis.toFixed(2) - : this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1].x.toFixed(2) - const counts = this.isEnergy() ? this.allEnergy.pointlist[channel - 1] : this.allChannel.pointlist[channel - 1] + : this.energyData.all.pointlist && this.energyData.all.pointlist[channel - 1].x.toFixed(2) + const counts = this.isEnergy() + ? this.energyData.all.pointlist[channel - 1] + : this.channelData.all.pointlist[channel - 1] this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts.y}} {a|Detectability:0}` this.getSelPosNuclide(channel) @@ -864,7 +704,7 @@ export default { const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum') const xAxis = spectrumLineSeries.markLine.data[0].xAxis const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed()) - const index = this.channelPeakGroup.findIndex((peakItem) => { + const index = this.channelData.peakGroup.findIndex((peakItem) => { const allX = peakItem.pointlist.map((item) => item.x) const max = Math.max(...allX) const min = Math.min(...allX) @@ -887,7 +727,7 @@ export default { }) if (success) { const html = result.replaceAll('\n', '
') - const currPeak = this.channelPeakGroup[index] + const currPeak = this.channelData.peakGroup[index] const { x, y } = currPeak.pointlist.reduce((prev, curr) => { return prev && prev.y > curr.y ? prev : curr }) @@ -919,7 +759,7 @@ export default { const prevAxis = spectrumLineSeries.markLine.data[0].xAxis // 获取每一段 Channel 中的最大值 - const maxXAxises = this.channelPeakGroup.map((item) => { + const maxXAxises = this.channelData.peakGroup.map((item) => { const allY = item.pointlist.map((item) => item.y) const max = item.pointlist.find((point) => point.y == Math.max(...allY)) return max.x @@ -978,7 +818,6 @@ export default { // 改为不可刷选状态 chart.dispatchAction({ type: 'takeGlobalCursor', - brushOption: false }) }, @@ -1058,16 +897,16 @@ export default { const y2 = getAxisMax(chart, 'yAxis') const channelSpectrumData = { - ...this.shadowChannelChart, + ...this.channelData.spectrumLine, pointlist: isReset - ? this.pointlistLimitY(this.shadowChannelChart.pointlist) - : this.pointlistLimit(this.shadowChannelChart.pointlist, x1, x2, y1, y2), + ? this.pointlistLimitY(this.channelData.spectrumLine.pointlist) + : this.pointlistLimit(this.channelData.spectrumLine.pointlist, x1, x2, y1, y2), } const energySpectrumData = { - ...this.shadowEnergyChart, + ...this.energyData.spectrumLine, pointlist: isReset - ? this.pointlistLimitY(this.shadowEnergyChart.pointlist) - : this.pointlistLimit(this.shadowEnergyChart.pointlist, x1, x2, y1, y2), + ? this.pointlistLimitY(this.energyData.spectrumLine.pointlist) + : this.pointlistLimit(this.energyData.spectrumLine.pointlist, x1, x2, y1, y2), } this.redrawLineBySeriesName('Spectrum', energySpectrumData, channelSpectrumData) @@ -1171,8 +1010,8 @@ export default { this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis) if (this.isEnergy()) { - const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x) - const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x) + const x1 = parseInt(this.energyData.spectrumLine.pointlist[xAxis - halfWidth].x) + const x2 = parseInt(this.energyData.spectrumLine.pointlist[xAxis + halfWidth].x) this.option.xAxis.min = x1 this.option.xAxis.max = x2 @@ -1190,7 +1029,9 @@ export default { } }, - // 重置 + /** + * 重置图表 + */ handleResetChart() { this.option.xAxis.min = 1 this.option.xAxis.max = 'dataMax' @@ -1291,12 +1132,16 @@ export default { // this.reprocessingModalVisible = true }, - // 重置缩略图表y轴最大值 + /** + * 重置缩略图表y轴最大值 + */ resetThumbnailChartDataMax() { this.thumbnailOption.yAxis.max = 'dataMax' }, - // 重置图表配置 + /** + * 重置图表配置 + */ resetChartOpts() { this.opts.notMerge = false this.option.brush = { toolbox: [] } @@ -1318,12 +1163,17 @@ export default { ] }, + /** + * 根据energy获取channel + * @param {number} energy + */ getChannelByEnergy(energy) { let channel = 0 - for (let index = 1; index < this.allEnergy.pointlist.length; index++) { - const currEnergy = this.allEnergy.pointlist[index].x + const pointlist = this.energyData.all.pointlist + for (let index = 1; index < pointlist.length; index++) { + const currEnergy = pointlist[index].x if (currEnergy >= energy) { - const prevEnergy = this.allEnergy.pointlist[index - 1].x + const prevEnergy = pointlist[index - 1].x if (currEnergy - energy > energy - prevEnergy.x) { channel = index } else { @@ -1335,13 +1185,16 @@ export default { return channel }, - // 重置页面信息 + /** + * 重置页面信息 + */ handleResetState() { + this.handleResetChart() + this.selectedChannel = -1 this.nuclideLibraryList = [] this.closePeakInfomationTooltip() this.option.series = [] - this.thumbnailOption.series = [] this.option.xAxis.name = 'Channel' this.option.yAxis.type = 'value' @@ -1352,14 +1205,17 @@ export default { spectrumLineSeries.markLine.lineStyle.width = 2 } - if (this.thumbnailOption.series.length) { - const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum') - thumbnailSpectrumLineSeries.type = 'line' - thumbnailSpectrumLineSeries.symbol = 'none' - } + const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum') + thumbnailSpectrumLineSeries.type = 'line' + thumbnailSpectrumLineSeries.symbol = 'none' + this.graphAssistance = cloneDeep(graphAssistance) }, + /** + * 颜色改变 + * @param {*} colorConfig + */ handleColorChange(colorConfig) { // 如果还没加载完，加载新的 if (this.isLoading) { @@ -1376,22 +1232,22 @@ export default { const { Color_Spec, Color_Peak, Color_Lc, Color_Base, Color_Scac, Color_Compare, Color_Strip, Color_Fitbase } = colorConfig - this.shadowChannelChart.color = Color_Spec - this.shadowEnergyChart.color = Color_Spec + this.channelData.spectrumLine.color = Color_Spec + this.energyData.spectrumLine.color = Color_Spec - for (let i = 0; i < this.channelPeakGroup.length; i++) { - this.channelPeakGroup[i].color = Color_Peak - this.energyPeakGroup[i].color = Color_Peak + for (let i = 0; i < this.channelData.peakGroup.length; i++) { + this.channelData.peakGroup[i].color = Color_Peak + this.energyData.peakGroup[i].color = Color_Peak } - this.channelLcLine.color = Color_Lc - this.energyLcLine.color = Color_Lc + this.channelData.lcLine.color = Color_Lc + this.energyData.lcLine.color = Color_Lc - this.channelBaseLine.color = Color_Base - this.energyBaseLine.color = Color_Base + this.channelData.baseLine.color = Color_Base + this.energyData.baseLine.color = Color_Base - this.channelScacLine.color = Color_Scac - this.energyScacLine.color = Color_Scac + this.channelData.scacLine.color = Color_Scac + this.energyData.scacLine.color = Color_Scac if (this.channelCompareLine) { this.channelCompareLine.color = Color_Compare @@ -1409,7 +1265,11 @@ export default { thumbnailChartSeries.itemStyle.color = Color_Spec }, - // 根据series名修改颜色 + /** + * 根据series名修改颜色 + * @param {*} seriesName + * @param {*} color + */ changeColorBySeriesName(seriesName, color) { const series = findSeriesByName(this.option.series, seriesName) series.itemStyle.color = color @@ -1439,6 +1299,38 @@ export default { getThumbnailChart() { return this.$refs.thumbnailChartRef.getChartInstance() }, + + /** + * 设置图表数据和颜色 + */ + setSeriesData(series, seriesName, data, color) { + const find = findSeriesByName(series, seriesName) + find.data = data + if (color) { + find.itemStyle.color = color + } + }, + + /** + * 转换pointlist类型数据到series的data可用的数据 + */ + transformPointListData(pointlist) { + if (!pointlist) { + return [] + } + return pointlist.map(({ x, y }) => [x, y]) + }, + + /** + * 在返回的allData中查找指定的数据 + * @param {Array} allData + * @param {*} name + * @param {*} group + */ + getLineData(allData, name, group, isList = false) { + const arrFunc = isList ? Array.prototype.filter : Array.prototype.find + return arrFunc.call(allData, (item) => item.name == name && item.group == group) || {} + }, }, watch: { sample: { diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue index ea7de82..a3ed212 100644 --- a/src/views/spectrumAnalysis/index.vue +++ b/src/views/spectrumAnalysis/index.vue @@ -432,7 +432,7 @@ export default { }) arr.forEach((item) => { item.dbName = '' - item.sampleId = '' + item.sampleId = null item.inputFileName = item.sampleFileName item.sampleType = item.sampleSystemType }) diff --git a/src/views/spectrumAnalysis/settings.js b/src/views/spectrumAnalysis/settings.js new file mode 100644 index 0000000..3a89271 --- /dev/null +++ b/src/views/spectrumAnalysis/settings.js @@ -0,0 +1,167 @@ +import { buildLineSeries } from "@/utils/chartHelper" + +export const GammaOptions = { + option: { + grid: { + top: 40, + left: 60, + right: 50, + containLabel: true + }, + title: { + text: '', + left: 'center', + bottom: 10, + textStyle: { + color: '#8FD4F8', + rich: { + a: { + padding: [0, 20, 0, 0], + fontSize: 16 + } + } + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + lineStyle: { + color: '#3CAEBB', + width: 1, + type: 'solid' + } + }, + formatter: undefined, + className: 'figure-chart-option-tooltip' + }, + xAxis: { + name: 'Channel', + nameTextStyle: { + color: '#8FD4F8', + fontSize: 16, + align: 'right', + verticalAlign: 'top', + padding: [30, 0, 0, 0] + }, + axisLine: { + lineStyle: { + color: '#ade6ee' + } + }, + splitLine: { + show: false + }, + axisLabel: { + textStyle: { + color: '#ade6ee' + } + }, + min: 1, + max: 'dataMax', + animation: false, + axisLabel: { + formatter: value => { + return parseInt(value) + } + } + }, + yAxis: { + name: 'Counts', + type: 'value', + nameTextStyle: { + color: '#8FD4F8', + fontSize: 16 + }, + axisLine: { + show: true, + lineStyle: { + color: '#ade6ee' + } + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(173, 230, 238, .2)' + } + }, + axisLabel: { + textStyle: { + color: '#ade6ee' + } + }, + min: 1, + max: 'dataMax', + animation: false, + axisLabel: { + formatter: value => { + return value.toFixed(1) + } + } + }, + series: [], + brush: {} + }, + // 缩略图配置 + thumbnailOption: { + grid: { + top: 0, + left: 5, + right: 5, + bottom: 0 + }, + xAxis: { + type: 'category', + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + min: 1, + max: 'dataMax' + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + min: 1, + max: 'dataMax' + }, + series: [ + buildLineSeries('Spectrum', [], '#fff', { + silent: true, + markLine: { + silent: true, + symbol: 'none', + label: { + show: false + }, + lineStyle: { + type: 'solid', + color: '#1397a3', + width: 1 + }, + data: [] + } + }) + ] + } +} + +export const graphAssistance = { + axisType: 'Channel', + spectrumType: 'Lines', + Baseline: true, + SCAC: true, + Lc: true, +} \ No newline at end of file