fix: 按新接口对接Extrapolation的表格、图表绘制和分析功能

This commit is contained in:
Xu Zhimeng 2023-10-23 11:27:31 +08:00
parent 8b36e4bc4e
commit c1d3129441

View File

@ -51,7 +51,7 @@
class="custom-tool-tip" class="custom-tool-tip"
:style="{ :style="{
top: customToolTip.top + 'px', top: customToolTip.top + 'px',
left: customToolTip.left + 'px' left: customToolTip.left + 'px',
}" }"
> >
<div class="channel">Channel: {{ customToolTip.channel }}</div> <div class="channel">Channel: {{ customToolTip.channel }}</div>
@ -62,7 +62,7 @@
class="custom-tool-tip" class="custom-tool-tip"
:style="{ :style="{
top: customToolTip2.top + 'px', top: customToolTip2.top + 'px',
left: customToolTip2.left + 'px' left: customToolTip2.left + 'px',
}" }"
> >
<div class="channel">Channel: {{ customToolTip2.channel }}</div> <div class="channel">Channel: {{ customToolTip2.channel }}</div>
@ -89,10 +89,18 @@
<div class="title">Gamma Window Setting</div> <div class="title">Gamma Window Setting</div>
<div class="content"> <div class="content">
<div class="label">Gamma Window Begin:</div> <div class="label">Gamma Window Begin:</div>
<a-input-number size="small" v-model="model.windowBegin" @change="calculateTotalCount"></a-input-number> <a-input-number
size="small"
v-model="model.windowBegin"
@change="handleGammaWindowSettingChange"
></a-input-number>
Channel Channel
<div class="label">Gamma Window End:</div> <div class="label">Gamma Window End:</div>
<a-input-number size="small" v-model="model.windowEnd" @change="calculateTotalCount"></a-input-number> <a-input-number
size="small"
v-model="model.windowEnd"
@change="handleGammaWindowSettingChange"
></a-input-number>
Channel Channel
</div> </div>
</div> </div>
@ -100,9 +108,19 @@
<div class="title">Parameter Setting</div> <div class="title">Parameter Setting</div>
<div class="content"> <div class="content">
<div class="label">Min of Energy:</div> <div class="label">Min of Energy:</div>
<a-input-number size="small" v-model="model.minEnergy"></a-input-number> keV <a-input-number
size="small"
v-model="model.minEnergy"
@change="handleParameterSettingChange"
></a-input-number>
keV
<div class="label">Half Life:</div> <div class="label">Half Life:</div>
<a-input-number size="small" v-model="model.halfLife"></a-input-number> Day <a-input-number
size="small"
v-model="model.halfLife"
@change="handleParameterSettingChange"
></a-input-number>
Day
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -137,7 +155,7 @@
> >
<template slot="delete" slot-scope="text, record, index"> <template slot="delete" slot-scope="text, record, index">
<a-button type="link" size="small" @click="handleDel(index)"> <a-button type="link" size="small" @click="handleDel(index)">
<a-icon type="delete" style="color: red;"></a-icon> <a-icon type="delete" style="color: red"></a-icon>
</a-button> </a-button>
</template> </template>
</a-table> </a-table>
@ -196,7 +214,7 @@ import { getAction, postAction } from '@/api/manage'
import { useBaseChartSetting } from '../../../useChart' import { useBaseChartSetting } from '../../../useChart'
import TitleOverBorder from '../../TitleOverBorder.vue' import TitleOverBorder from '../../TitleOverBorder.vue'
import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin' import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
import { isNullOrUndefined } from '@/utils/util' import { isNumber } from 'xe-utils/methods'
const initialGammaChartOption = { const initialGammaChartOption = {
grid: { grid: {
@ -204,7 +222,7 @@ const initialGammaChartOption = {
right: 15, right: 15,
bottom: 10, bottom: 10,
left: 10, left: 10,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
min: 0, min: 0,
@ -212,21 +230,21 @@ const initialGammaChartOption = {
interval: 64, interval: 64,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(119, 181, 213, 0.5)' color: 'rgb(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .2)' color: 'rgba(119, 181, 213, .2)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
} },
}, },
yAxis: { yAxis: {
min: 0, min: 0,
@ -235,57 +253,57 @@ const initialGammaChartOption = {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgb(119, 181, 213, 0.5)' color: 'rgb(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .2)' color: 'rgba(119, 181, 213, .2)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
}, },
animation: false animation: false,
}, },
series: [ series: [
{ {
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#04ADD9' color: '#04ADD9',
}, },
symbol: 'none', symbol: 'none',
data: [], data: [],
markLine: { markLine: {
symbol: 'none', symbol: 'none',
label: { label: {
show: false show: false,
}, },
animation: false, animation: false,
emphasis: { emphasis: {
disabled: true disabled: true,
}, },
lineStyle: { lineStyle: {
color: '#f00' color: '#f00',
}, },
data: [{ xAxis: -1 }, { xAxis: -1 }] data: [{ xAxis: -1 }, { xAxis: -1 }],
}, },
animation: false animation: false,
}, },
{ {
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#A8DA56' color: '#A8DA56',
}, },
symbol: 'none', symbol: 'none',
data: [], data: [],
animation: false animation: false,
} },
] ],
} }
const initialBetaChartOption = { const initialBetaChartOption = {
@ -294,7 +312,7 @@ const initialBetaChartOption = {
right: 15, right: 15,
bottom: 10, bottom: 10,
left: 10, left: 10,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
min: 0, min: 0,
@ -302,21 +320,21 @@ const initialBetaChartOption = {
interval: 64, interval: 64,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(119, 181, 213, 0.5)' color: 'rgb(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .2)' color: 'rgba(119, 181, 213, .2)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
} },
}, },
yAxis: { yAxis: {
min: 0, min: 0,
@ -325,57 +343,57 @@ const initialBetaChartOption = {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgb(119, 181, 213, 0.5)' color: 'rgb(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .2)' color: 'rgba(119, 181, 213, .2)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
}, },
animation: false animation: false,
}, },
series: [ series: [
{ {
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#04ADD9' color: '#04ADD9',
}, },
symbol: 'none', symbol: 'none',
data: [], data: [],
markLine: { markLine: {
symbol: 'none', symbol: 'none',
label: { label: {
show: false show: false,
}, },
animation: false, animation: false,
emphasis: { emphasis: {
disabled: true disabled: true,
}, },
lineStyle: { lineStyle: {
color: '#f00' color: '#f00',
}, },
data: [] data: [],
}, },
animation: false animation: false,
}, },
{ {
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#A8DA56' color: '#A8DA56',
}, },
symbol: 'none', symbol: 'none',
data: [], data: [],
animation: false animation: false,
} },
] ],
} }
const initialResultChartOption = { const initialResultChartOption = {
@ -384,23 +402,23 @@ const initialResultChartOption = {
{ {
type: 'line', type: 'line',
itemStyle: { itemStyle: {
color: '#04ADD9' color: '#04ADD9',
}, },
symbol: 'none', symbol: 'none',
data: [], data: [],
animation: false animation: false,
}, },
{ {
type: 'scatter', type: 'scatter',
itemStyle: { itemStyle: {
color: 'red' color: 'red',
}, },
symbolSize: 6, symbolSize: 6,
data: [], data: [],
zlevel: 2, zlevel: 2,
animation: false animation: false,
} },
] ],
} }
initialResultChartOption.yAxis.boundaryGap = ['20%', '20%'] initialResultChartOption.yAxis.boundaryGap = ['20%', '20%']
@ -411,30 +429,30 @@ const columns = [
customRender: (_, __, index) => { customRender: (_, __, index) => {
return index + 1 return index + 1
}, },
align: 'center' align: 'center',
}, },
{ {
title: 'Eb', title: 'Eb',
dataIndex: 'eb', dataIndex: 'eb',
align: 'center' align: 'center',
}, },
{ {
title: 'Nx', title: 'Nx',
dataIndex: 'nx', dataIndex: 'nx',
align: 'center' align: 'center',
}, },
{ {
title: 'Ny', title: 'Ny',
dataIndex: 'ny', dataIndex: 'ny',
align: 'center' align: 'center',
}, },
{ {
title: 'Delete', title: 'Delete',
scopedSlots: { scopedSlots: {
customRender: 'delete' customRender: 'delete',
},
align: 'center',
}, },
align: 'center'
}
] ]
const initialModel = { const initialModel = {
@ -442,20 +460,20 @@ const initialModel = {
windowEnd: undefined, windowEnd: undefined,
minEnergy: 0.1, minEnergy: 0.1,
halfLife: 5.243, halfLife: 5.243,
fitType: 'liner' fitType: 'liner',
} }
// Function of Fitting // Function of Fitting
const funcList = { const funcList = {
liner: 'y = ax + b', liner: 'y = ax + b',
poly2: 'y = axx + bx + c' poly2: 'y = axx + bx + c',
} }
export default { export default {
mixins: [ModalMixin, SampleDataMixin], mixins: [ModalMixin, SampleDataMixin],
components: { components: {
CustomChart, CustomChart,
TitleOverBorder TitleOverBorder,
}, },
data() { data() {
this.columns = columns this.columns = columns
@ -469,14 +487,14 @@ export default {
left: 0, left: 0,
visible: false, visible: false,
channel: '', channel: '',
energy: '' energy: '',
}, },
customToolTip2: { customToolTip2: {
top: 0, top: 0,
left: 0, left: 0,
visible: false, visible: false,
channel: '', channel: '',
energy: '' energy: '',
}, },
totalCount: [0, 0], totalCount: [0, 0],
@ -490,7 +508,7 @@ export default {
model: cloneDeep(initialModel), model: cloneDeep(initialModel),
tableList: [], tableList: [],
isAnalysing: false isAnalysing: false,
} }
}, },
methods: { methods: {
@ -502,7 +520,7 @@ export default {
this.resultChartOption = cloneDeep(initialResultChartOption) this.resultChartOption = cloneDeep(initialResultChartOption)
this.model = cloneDeep(initialModel) this.model = cloneDeep(initialModel)
this.currFunction = funcList[this.model.fitType] this.handleFuncChange()
this.tableList = [] this.tableList = []
this.calculateTotalCount() this.calculateTotalCount()
@ -516,7 +534,7 @@ export default {
const { sampleId, inputFileName: sampleFileName } = this.sampleData const { sampleId, inputFileName: sampleFileName } = this.sampleData
const { success, result, message } = await getAction('/spectrumAnalysis/viewExtrapolation', { const { success, result, message } = await getAction('/spectrumAnalysis/viewExtrapolation', {
sampleId, sampleId,
sampleFileName sampleFileName,
}) })
if (success) { if (success) {
this.detail = result this.detail = result
@ -526,7 +544,7 @@ export default {
betaProjectedSeriseData, betaProjectedSeriseData,
gammaChannelEnergy, gammaChannelEnergy,
gammaOriginSeriseData, gammaOriginSeriseData,
gammaProjectedSeriseData gammaProjectedSeriseData,
} = result } = result
this.gammaChannelEnergy = gammaChannelEnergy this.gammaChannelEnergy = gammaChannelEnergy
@ -579,8 +597,8 @@ export default {
// //
if (isMouseLeft) { if (isMouseLeft) {
// //
if (!isNullOrUndefined(this.model.windowEnd) && xAxis >= this.model.windowEnd) { if (!isNumber(this.model.windowEnd) && xAxis >= this.model.windowEnd) {
this.clearMarkLineAndToolTip() this.reset()
return return
} }
@ -591,8 +609,8 @@ export default {
} }
// //
else { else {
if (!isNullOrUndefined(this.model.windowBegin) && xAxis <= this.model.windowBegin) { if (!isNumber(this.model.windowBegin) && xAxis <= this.model.windowBegin) {
this.clearMarkLineAndToolTip() this.reset()
return return
} }
@ -612,10 +630,11 @@ export default {
currToolTip.energy = parseInt(energy) + 'keV' currToolTip.energy = parseInt(energy) + 'keV'
this.calculateTotalCount() this.calculateTotalCount()
this.getTableAndChartData()
} }
}, },
clearMarkLineAndToolTip() { reset() {
const markLineData = this.gammaSpectrumChartOption.series[0].markLine.data const markLineData = this.gammaSpectrumChartOption.series[0].markLine.data
markLineData[0].xAxis = -1 markLineData[0].xAxis = -1
markLineData[1].xAxis = -1 markLineData[1].xAxis = -1
@ -626,12 +645,18 @@ export default {
this.model.windowBegin = null this.model.windowBegin = null
this.model.windowEnd = null this.model.windowEnd = null
this.tableList = []
const [lineSeries, scatterSeries] = this.resultChartOption.series
lineSeries.data = []
scatterSeries.data = []
this.calculateTotalCount() this.calculateTotalCount()
}, },
// Total Count // Total Count
calculateTotalCount() { calculateTotalCount() {
if (!this.model.windowBegin || !this.model.windowEnd || this.model.windowBegin >= this.model.windowEnd) { const { windowBegin, windowEnd } = this.model
if (!isNumber(windowBegin) || !isNumber(windowEnd) || windowBegin >= windowEnd) {
this.totalCount = [0, 0] this.totalCount = [0, 0]
return return
} }
@ -658,56 +683,96 @@ export default {
exportEchartImg(this.$refs.chartRef.getChartInstance()) exportEchartImg(this.$refs.chartRef.getChartInstance())
}, },
// handleGammaWindowSettingChange() {
async handleAnalyse() { this.calculateTotalCount()
this.getTableAndChartData()
},
handleParameterSettingChange() {
this.getTableAndChartData()
},
/**
* 获取表格和图表数据
*/
async getTableAndChartData() {
const { windowBegin, windowEnd, minEnergy, halfLife, fitType } = this.model const { windowBegin, windowEnd, minEnergy, halfLife, fitType } = this.model
if ( const [lineSeries, scatterSeries] = this.resultChartOption.series
isNullOrUndefined(windowBegin) || lineSeries.data = []
isNullOrUndefined(windowEnd) ||
isNullOrUndefined(minEnergy) || if (!this.validateSettingValue()) {
isNullOrUndefined(halfLife) scatterSeries.data = []
) { this.tableList = []
return return
} }
try {
const { sampleFileName, detFileName } = this.sampleData
const { sampleId, dbName, sampleFileName, detFileName } = this.sampleData
try {
const params = { const params = {
sampleId: null, sampleId,
dbName: '', dbName,
sampleFileName, sampleFileName,
detFileName, detFileName,
gammaBegin: windowBegin, gammaBegin: windowBegin,
gammaEnd: windowEnd, gammaEnd: windowEnd,
minEnergy, minEnergy,
halfLife, halfLife,
fitType //Linear liner 2-Polynomial poly2 fitType, //Linear liner 2-Polynomial poly2
} }
const { success, result, message } = await postAction('/spectrumAnalysis/changeDataExtrapolation', params)
if (success) {
const { resultViewScatterDataValue, tableData } = result
scatterSeries.data = resultViewScatterDataValue.map(({ x, y }) => [x, y])
this.resetResultChartPerform()
this.tableList = tableData
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
//
async handleAnalyse() {
const { minEnergy, halfLife, fitType } = this.model
if (!this.validateSettingValue()) {
return
}
try {
const { acquisitionRealTime: acqRealTime, acquisitionStart: acqStartTime } = this.detail
const params = {
eb: this.tableList.map(({ eb }) => eb),
nx: this.tableList.map(({ nx }) => nx),
ny: this.tableList.map(({ ny }) => ny),
acqRealTime,
minEnergy,
halfLife,
acqStartTime,
fitType,
}
this.isAnalysing = true this.isAnalysing = true
const { success, result, message } = await postAction('/spectrumAnalysis/analyseExtrapolation', params) const { success, result, message } = await postAction('/spectrumAnalysis/analyseExtrapolation', params)
if (success) { if (success) {
console.log('%c [ ]-679', 'font-size:13px; background:pink; color:#bf2c9f;', result)
const { const {
functionFit, // Function of Fitting functionFit, // Function of Fitting
resultViewLineDataValue, // 线 resultViewLineDataValue, // 线
resultViewScatterDataValue, // xeAct,
tableData, //
xeAct
} = result } = result
this.currFunction = functionFit this.currFunction = functionFit
const [lineSeries, scatterSeries] = this.resultChartOption.series const [lineSeries] = this.resultChartOption.series
lineSeries.data = resultViewLineDataValue.map(({ x, y }) => [x, y]) lineSeries.data = resultViewLineDataValue.map(({ x, y }) => [x, y])
scatterSeries.data = resultViewScatterDataValue.map(({ x, y }) => [x, y])
this.resetResultChartPerform() this.resetResultChartPerform()
this.xeActivity = { this.xeActivity = {
referenceTime: this.detail.acquisitionStart, referenceTime: this.detail.acquisitionStart,
activity: Number.isNaN(xeAct)? xeAct: Number(xeAct).toPrecision(6) activity: Number.isNaN(xeAct) ? xeAct : Number(xeAct).toPrecision(6),
} }
this.tableList = tableData
} else { } else {
this.$message.error(message) this.$message.error(message)
} }
@ -718,6 +783,18 @@ export default {
} }
}, },
validateSettingValue() {
const { windowBegin, windowEnd, minEnergy, halfLife } = this.model
if (!isNumber(windowBegin) || !isNumber(windowEnd) || !isNumber(minEnergy) || !isNumber(halfLife)) {
return false
}
return true
},
/**
* 图表最大值最小值等设为按实际情况取值
*/
resetResultChartPerform() { resetResultChartPerform() {
this.resultChartOption.yAxis.min = undefined this.resultChartOption.yAxis.min = undefined
this.resultChartOption.yAxis.max = undefined this.resultChartOption.yAxis.max = undefined
@ -731,8 +808,8 @@ export default {
handleDel(index) { handleDel(index) {
this.tableList.splice(index, 1) this.tableList.splice(index, 1)
this.resultChartOption.series[1].data.splice(index, 1) this.resultChartOption.series[1].data.splice(index, 1)
} },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>