feat: 完成 Beta Gamma Energy Calibration 弹窗中所有交互逻辑及接口对接，修复ResultDisplay中Concerntration背景问题，优化图表interval计算逻辑
This commit is contained in:
parent
f3999c3643
commit
d9c63c9bce
|
|
@ -17,4 +17,26 @@ export function getXAxisAndYAxisByPosition(chart, offsetX, offsetY, seriesIndex
|
||||||
return [xAxis, yAxis]
|
return [xAxis, yAxis]
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将图表导出为图片
|
||||||
|
* @param {import("echarts").ECharts} chartInstance
|
||||||
|
* @param {'png' | 'jpeg' | 'svg'} type
|
||||||
|
*/
|
||||||
|
export function exportEchartImg(chartInstance, type = 'png') {
|
||||||
|
const dataURL = chartInstance.getDataURL({
|
||||||
|
type,
|
||||||
|
pixelRatio: 2,
|
||||||
|
backgroundColor: '#022024'
|
||||||
|
});
|
||||||
|
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.style.display = 'none'
|
||||||
|
link.href = dataURL
|
||||||
|
link.setAttribute('download', 'export.png')
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link) //下载完成移除元素
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,123 +1,168 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="beta-detector-calibration">
|
<div class="beta-detector-calibration">
|
||||||
<div class="content">
|
<a-spin :spinning="isLoading">
|
||||||
<div class="QCs">
|
<div class="content">
|
||||||
<div class="beta-gamma-spectrum">
|
<div class="QCs">
|
||||||
<p>Beta-Gamma Spectrum: QC</p>
|
<div class="beta-gamma-spectrum">
|
||||||
|
<p>Beta-Gamma Spectrum: QC</p>
|
||||||
|
<div class="content">
|
||||||
|
<div class="settings">
|
||||||
|
<div class="channel-and-width">
|
||||||
|
<span> Channel: {{ betaGammaInfo.channel }} </span>
|
||||||
|
<span>
|
||||||
|
Gamma Channel Width:
|
||||||
|
<a-input-number :min="1" v-model="gammaChannelWidth"></a-input-number>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="energy">
|
||||||
|
Energy: <span>{{ betaGammaInfo.energy }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="beta-gamma-chart">
|
||||||
|
<custom-chart
|
||||||
|
ref="betaGammaChartRef"
|
||||||
|
:option="betaGammaChartOption"
|
||||||
|
@zr:click="handleBetaGammaChartClick"
|
||||||
|
@zr:mousemove="handleBetaGammaChartMouseMove"
|
||||||
|
/>
|
||||||
|
<!-- 数据量太大的时候echarts会重绘，故采用自定义markLine和rect的形式 -->
|
||||||
|
<div v-if="markLineVisible" class="markline" :style="{ top: markLinePosition.top + 'px' }"></div>
|
||||||
|
<div
|
||||||
|
v-if="rectVisible"
|
||||||
|
class="rect"
|
||||||
|
:style="{ top: rectPosition.top + 'px', height: rectHeight + 'px' }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gamma-gated-beta-spectrum">
|
||||||
|
<p>Gamma-gated Beta Spectrum: QC</p>
|
||||||
|
<div class="content">
|
||||||
|
<div class="gamma-gated-chart">
|
||||||
|
<custom-chart
|
||||||
|
ref="gammaGatedChartRef"
|
||||||
|
:option="gammaGatedChartOption"
|
||||||
|
@zr:click="handleGammaGatedSpectrumChartClick"
|
||||||
|
/>
|
||||||
|
<a-button type="primary" size="small" @click="handleSnapshot($refs.gammaGatedChartRef)"
|
||||||
|
>Snapshot</a-button
|
||||||
|
>
|
||||||
|
<!-- 自定义tooltip，用于点击图表后的tooltip显示 -->
|
||||||
|
<div
|
||||||
|
v-if="tooltipVisible"
|
||||||
|
class="custom-tool-tip"
|
||||||
|
:style="{
|
||||||
|
top: tooltipPosition.top + 'px',
|
||||||
|
left: tooltipPosition.left + 'px'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="channel">Channel: {{ tooltipChannel }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- tooltip结束 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content channel-and-energy">
|
||||||
|
<a-form-model layout="inline">
|
||||||
|
<a-form-model-item label="Channel">
|
||||||
|
<a-input type="number" v-model="channelAndEnergyModel.channel"></a-input>
|
||||||
|
</a-form-model-item>
|
||||||
|
<a-form-model-item label="Energy">
|
||||||
|
<a-input type="number" v-model="channelAndEnergyModel.energy"></a-input>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-form-model>
|
||||||
|
<a-button type="primary" @click="handleAddChannelAndEnergy">Add</a-button>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
size="small"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="list"
|
||||||
|
:pagination="false"
|
||||||
|
:class="list.length ? 'has-data' : ''"
|
||||||
|
:scroll="{ y: 99 }"
|
||||||
|
>
|
||||||
|
<template slot="operation" slot-scope="text, record, index">
|
||||||
|
<a-icon type="delete" style="color: #f00;" @click="handleDel(index)"></a-icon>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="figure">
|
||||||
|
<p class="title">Figure of Beta Detector Calibration</p>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="settings">
|
<div class="figure-chart">
|
||||||
<div class="channel-and-width">
|
<custom-chart ref="figureChartRef" :option="figureChartOption" />
|
||||||
<span> Channel: 210 </span>
|
<a-button type="primary" size="small" @click="handleSnapshot($refs.figureChartRef)">Snapshot</a-button>
|
||||||
<span>
|
|
||||||
Gamma Channel Width:
|
|
||||||
<a-input-number></a-input-number>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="energy">Energy: <span>599.97</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="beta-gamma-chart">
|
|
||||||
<custom-chart :option="betaGammaChartOption" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gamma-gated-beta-spectrum">
|
<div class="calibration-parameter">
|
||||||
<p>Gamma-gated Beta Spectrum: QC</p>
|
<p>Calibration Parameter of Beta Detector</p>
|
||||||
<div class="content">
|
<div class="calibration-funcs">
|
||||||
<div class="gamma-gated-chart">
|
<div class="calibration-funcs-func">
|
||||||
<custom-chart :option="gammaGatedChartOption" />
|
<title-over-border title="Old Calibration Function">
|
||||||
<a-button type="primary" size="small">Snapshot</a-button>
|
<p class="func">
|
||||||
|
<span>C to E : </span>
|
||||||
|
<span
|
||||||
|
>E = {{ scientificNotationStr2Fixed(c2e[0]) }} + {{ scientificNotationStr2Fixed(c2e[1]) }} *C +
|
||||||
|
{{ scientificNotationStr2Fixed(c2e[2]) }} *C <sup>2</sup>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<div class="func">
|
||||||
|
<span>E to C : </span>
|
||||||
|
<span
|
||||||
|
>C = {{ scientificNotationStr2Fixed(e2c[0]) }} + {{ scientificNotationStr2Fixed(e2c[1]) }} *E +
|
||||||
|
{{ scientificNotationStr2Fixed(e2c[2]) }} *E <sup>2</sup>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</title-over-border>
|
||||||
|
<title-over-border title="New Calibration Function">
|
||||||
|
<p class="func">
|
||||||
|
<span>C to E : </span>
|
||||||
|
<span>
|
||||||
|
E =
|
||||||
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[0]" /> +
|
||||||
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[1]" /> *C +
|
||||||
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[2]" /> *C <sup>2</sup>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<div class="func">
|
||||||
|
<span>E to C : </span>
|
||||||
|
<span>C = 0 + 0 *E + 0 *E <sup>2</sup> </span>
|
||||||
|
</div>
|
||||||
|
</title-over-border>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-funcs-btns">
|
||||||
|
<a-button type="primary" @click="handleReset">Reset Button</a-button>
|
||||||
|
<a-button type="primary" @click="handleFitting">Fitting</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content channel-and-energy">
|
|
||||||
<a-form-model layout="inline">
|
|
||||||
<a-form-model-item label="Channel">
|
|
||||||
<a-input></a-input>
|
|
||||||
</a-form-model-item>
|
|
||||||
<a-form-model-item label="Energy">
|
|
||||||
<a-input></a-input>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-form-model>
|
|
||||||
<a-button type="primary">Add</a-button>
|
|
||||||
</div>
|
|
||||||
<a-table
|
|
||||||
size="small"
|
|
||||||
:columns="columns"
|
|
||||||
:dataSource="list"
|
|
||||||
:pagination="false"
|
|
||||||
:class="list.length ? 'has-data' : ''"
|
|
||||||
:scroll="{ y: 99 }"
|
|
||||||
></a-table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="figure">
|
<div class="footer">
|
||||||
<p class="title">Figure of Beta Detector Calibration</p>
|
<title-over-border title="New Calibration is Applied to">
|
||||||
<div class="content">
|
<a-radio-group v-model="newCalibrationIsAppliedTo">
|
||||||
<div class="figure-chart">
|
<p>
|
||||||
<custom-chart :option="figureChartOption" />
|
<a-radio value="1">All Spectra</a-radio>
|
||||||
<a-button type="primary" size="small">Snapshot</a-button>
|
</p>
|
||||||
</div>
|
<a-radio value="2">Current Spectrum</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</title-over-border>
|
||||||
|
<title-over-border title="Recalculate ROI Counts For">
|
||||||
|
<a-checkbox-group v-model="recalculateROICountsFor">
|
||||||
|
<p>
|
||||||
|
<a-checkbox value="sample">Sample Data</a-checkbox>
|
||||||
|
<a-checkbox value="gasBg">GasBg Data</a-checkbox>
|
||||||
|
</p>
|
||||||
|
<a-checkbox value="detBg">DetBg Data</a-checkbox>
|
||||||
|
<a-checkbox value="qc">QC Data</a-checkbox>
|
||||||
|
</a-checkbox-group>
|
||||||
|
</title-over-border>
|
||||||
|
<div class="footer-btns">
|
||||||
|
<a-button type="primary">Reanalyse Spectrum Using New Calibration</a-button>
|
||||||
|
<a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="calibration-parameter">
|
</a-spin>
|
||||||
<p>Calibration Parameter of Beta Detector</p>
|
|
||||||
<div class="calibration-funcs">
|
|
||||||
<div class="calibration-funcs-func">
|
|
||||||
<title-over-border title="Old Calibration Function">
|
|
||||||
<p>
|
|
||||||
<span>C to E : </span>
|
|
||||||
<span>E = 12.0809 + 2.39764 *C + 0.00331138 *C <sup>2</sup> </span>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<span>E to C : </span>
|
|
||||||
<span>C = -2.83996 + 0.386245 *E + -9.63318e-05 *E <sup>2</sup> </span>
|
|
||||||
</div>
|
|
||||||
</title-over-border>
|
|
||||||
<title-over-border title="New Calibration Function">
|
|
||||||
<p>
|
|
||||||
<span>C to E : </span>
|
|
||||||
<span>
|
|
||||||
E =
|
|
||||||
<a-input type="number" size="small" /> + <a-input type="number" size="small" /> *C +
|
|
||||||
<a-input type="number" size="small" /> *C <sup>2</sup>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<span>E to C : </span>
|
|
||||||
<span>C = 0 + 0 *E + 0 *E <sup>2</sup> </span>
|
|
||||||
</div>
|
|
||||||
</title-over-border>
|
|
||||||
</div>
|
|
||||||
<div class="calibration-funcs-btns">
|
|
||||||
<a-button type="primary">Reset Button</a-button>
|
|
||||||
<a-button type="primary">Fitting</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<title-over-border title="New Calibration is Applied to">
|
|
||||||
<a-radio-group>
|
|
||||||
<p>
|
|
||||||
<a-radio>All Spectra</a-radio>
|
|
||||||
</p>
|
|
||||||
<a-radio>Current Spectrum</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
</title-over-border>
|
|
||||||
<title-over-border title="Recalculate ROI Counts For">
|
|
||||||
<a-checkbox-group>
|
|
||||||
<p>
|
|
||||||
<a-checkbox>Sample Data</a-checkbox>
|
|
||||||
<a-checkbox>GasBg Data</a-checkbox>
|
|
||||||
</p>
|
|
||||||
<a-checkbox>DetBg Data</a-checkbox>
|
|
||||||
<a-checkbox>QC Data</a-checkbox>
|
|
||||||
</a-checkbox-group>
|
|
||||||
</title-over-border>
|
|
||||||
<div class="footer-btns">
|
|
||||||
<a-button type="primary">Reanalyse Spectrum Using New Calibration</a-button>
|
|
||||||
<a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -125,6 +170,8 @@
|
||||||
import CustomChart from '@/components/CustomChart/index.vue'
|
import CustomChart from '@/components/CustomChart/index.vue'
|
||||||
import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
|
import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
|
||||||
import { getAction } from '@/api/manage'
|
import { getAction } from '@/api/manage'
|
||||||
|
import { cloneDeep } from 'lodash'
|
||||||
|
import { exportEchartImg, getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
|
||||||
|
|
||||||
const initialBetaGammaChartOption = {
|
const initialBetaGammaChartOption = {
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -133,20 +180,6 @@ const initialBetaGammaChartOption = {
|
||||||
right: 10,
|
right: 10,
|
||||||
bottom: 45
|
bottom: 45
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: params => {
|
|
||||||
const [b, g, c] = params.value
|
|
||||||
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
|
||||||
},
|
|
||||||
axisPointer: {
|
|
||||||
animation: false,
|
|
||||||
type: 'cross',
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: 'Beta Channel',
|
name: 'Beta Channel',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
|
|
@ -209,7 +242,7 @@ const initialBetaGammaChartOption = {
|
||||||
},
|
},
|
||||||
series: {
|
series: {
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbolSize: 5,
|
symbolSize: 2,
|
||||||
data: [],
|
data: [],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
|
|
@ -223,6 +256,19 @@ const initialGammaGatedChartOption = {
|
||||||
right: 15,
|
right: 15,
|
||||||
bottom: 50
|
bottom: 50
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#099D24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
const [channel] = params[0].value
|
||||||
|
return `<div class="channel">Channel: ${channel}</div>`
|
||||||
|
},
|
||||||
|
className: 'figure-chart-option-tooltip'
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 256,
|
max: 256,
|
||||||
|
|
@ -288,7 +334,21 @@ const initialGammaGatedChartOption = {
|
||||||
color: '#04ADD9'
|
color: '#04ADD9'
|
||||||
},
|
},
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
data: []
|
data: [],
|
||||||
|
markLine: {
|
||||||
|
symbol: 'none',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f00'
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -298,6 +358,20 @@ const initialFigureChartOption = {
|
||||||
right: 15,
|
right: 15,
|
||||||
bottom: 50
|
bottom: 50
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#099D24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
const [channel, energy] = params[0].value
|
||||||
|
return `<div class="channel">Channel: ${channel}</div>
|
||||||
|
<div class="energy">Energy: ${energy.toFixed(3)}</div>`
|
||||||
|
},
|
||||||
|
className: 'figure-chart-option-tooltip'
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 256,
|
max: 256,
|
||||||
|
|
@ -355,7 +429,7 @@ const initialFigureChartOption = {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: '#5b9cba'
|
color: '#5b9cba'
|
||||||
},
|
},
|
||||||
nameGap: 25
|
nameGap: 55
|
||||||
},
|
},
|
||||||
series: {
|
series: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
|
@ -397,8 +471,10 @@ const columns = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'S',
|
title: 'S',
|
||||||
dataIndex: 'sValue',
|
align: 'center',
|
||||||
align: 'center'
|
scopedSlots: {
|
||||||
|
customRender: 'operation'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -413,33 +489,43 @@ export default {
|
||||||
this.columns = columns
|
this.columns = columns
|
||||||
|
|
||||||
return {
|
return {
|
||||||
betaGammaChartOption: initialBetaGammaChartOption,
|
betaGammaChartOption: cloneDeep(initialBetaGammaChartOption),
|
||||||
gammaGatedChartOption: initialGammaGatedChartOption,
|
gammaGatedChartOption: cloneDeep(initialGammaGatedChartOption),
|
||||||
figureChartOption: initialFigureChartOption,
|
figureChartOption: cloneDeep(initialFigureChartOption),
|
||||||
list: [
|
|
||||||
{
|
list: [],
|
||||||
channel: 'channel',
|
isLoading: false,
|
||||||
energy: 'energy',
|
|
||||||
fwhmC: 'fwhmC',
|
gammaEnergy: [],
|
||||||
fwhmKev: 'fwhmKev',
|
gammaGatedBetaSpectrum: [],
|
||||||
sValue: 'sValue'
|
gammaChannelWidth: 5, // 左上角 Gamma Channel Width
|
||||||
},
|
betaGammaInfo: {}, // 左上角 鼠标悬停在散点图上时的channel和energy信息
|
||||||
{
|
|
||||||
channel: 'channel',
|
markLineVisible: false,
|
||||||
energy: 'energy',
|
markLinePosition: {
|
||||||
fwhmC: 'fwhmC',
|
top: 0
|
||||||
fwhmKev: 'fwhmKev',
|
},
|
||||||
sValue: 'sValue'
|
|
||||||
},
|
rectVisible: false,
|
||||||
{
|
rectPosition: {
|
||||||
channel: 'channel',
|
top: 0
|
||||||
energy: 'energy',
|
},
|
||||||
fwhmC: 'fwhmC',
|
|
||||||
fwhmKev: 'fwhmKev',
|
tooltipVisible: false,
|
||||||
sValue: 'sValue'
|
tooltipPosition: {
|
||||||
}
|
top: 0,
|
||||||
],
|
left: 0
|
||||||
isLoading: false
|
},
|
||||||
|
|
||||||
|
channelAndEnergyModel: {},
|
||||||
|
|
||||||
|
c2e: {},
|
||||||
|
e2c: {},
|
||||||
|
|
||||||
|
newCalibrationFuncModel: [],
|
||||||
|
|
||||||
|
newCalibrationIsAppliedTo: '2',
|
||||||
|
recalculateROICountsFor: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -460,6 +546,22 @@ export default {
|
||||||
})
|
})
|
||||||
console.log('%c [ res ]-462', 'font-size:13px; background:pink; color:#bf2c9f;', res)
|
console.log('%c [ res ]-462', 'font-size:13px; background:pink; color:#bf2c9f;', res)
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
|
const { CToE, EToC, betaEnergy, gammaEnergy, gammaGatedBetaSpectrum, histogramData } = res.result
|
||||||
|
this.c2e = CToE
|
||||||
|
this.e2c = EToC
|
||||||
|
|
||||||
|
this.betaGammaChartOption.series.data = histogramData.map(({ b, g, c }) => [b, g, c])
|
||||||
|
this.gammaEnergy = gammaEnergy
|
||||||
|
this.gammaGatedBetaSpectrum = gammaGatedBetaSpectrum
|
||||||
|
|
||||||
|
const gammaEnergyValue = betaEnergy.map(item => item[0])
|
||||||
|
const gammaEnergyMax = Math.ceil(Math.max(...gammaEnergyValue))
|
||||||
|
const gammaEnergyMin = Math.floor(Math.min(...gammaEnergyValue))
|
||||||
|
const gammaEnergyInterval = Math.ceil(((gammaEnergyMax - gammaEnergyMin) / 4) * 1.1)
|
||||||
|
this.figureChartOption.yAxis.max = gammaEnergyInterval * 4
|
||||||
|
this.figureChartOption.yAxis.min = gammaEnergyMin
|
||||||
|
this.figureChartOption.yAxis.interval = Math.ceil((gammaEnergyMax * 1.1) / 4)
|
||||||
|
this.figureChartOption.series.data = gammaEnergyValue.map((item, index) => [index, item])
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(res.message)
|
this.$message.error(res.message)
|
||||||
}
|
}
|
||||||
|
|
@ -468,6 +570,126 @@ export default {
|
||||||
} finally {
|
} finally {
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击左上角散点图，设置红线
|
||||||
|
handleBetaGammaChartClick(param) {
|
||||||
|
const { offsetX, offsetY } = param
|
||||||
|
const point = getXAxisAndYAxisByPosition(this.$refs.betaGammaChartRef.getChartInstance(), offsetX, offsetY)
|
||||||
|
if (point) {
|
||||||
|
this.markLinePosition.top = offsetY
|
||||||
|
this.markLineVisible = true
|
||||||
|
|
||||||
|
// 设置 gamma-gated beta spectrum
|
||||||
|
const yAxis = parseInt(point[1].toFixed())
|
||||||
|
|
||||||
|
this.currEnergy = this.gammaEnergy[yAxis][0].toFixed(2) // 设置当前选中位置的Energy
|
||||||
|
this.channelAndEnergyModel = {}
|
||||||
|
|
||||||
|
const currGammaGatedBetaSpectrum = this.gammaGatedBetaSpectrum[yAxis]
|
||||||
|
const max = Math.max(...currGammaGatedBetaSpectrum)
|
||||||
|
const interval = Math.ceil((max / 4) * 1.1)
|
||||||
|
this.gammaGatedChartOption.yAxis.max = interval * 4
|
||||||
|
this.gammaGatedChartOption.yAxis.interval = interval
|
||||||
|
this.gammaGatedChartOption.series.data = currGammaGatedBetaSpectrum.map((item, index) => [index, item])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绿框跟随鼠标移动
|
||||||
|
handleBetaGammaChartMouseMove(param) {
|
||||||
|
const { offsetX, offsetY } = param
|
||||||
|
const point = getXAxisAndYAxisByPosition(this.$refs.betaGammaChartRef.getChartInstance(), offsetX, offsetY)
|
||||||
|
if (point) {
|
||||||
|
this.rectPosition.top = offsetY
|
||||||
|
this.rectVisible = true
|
||||||
|
|
||||||
|
if (this.gammaEnergy && this.gammaEnergy.length) {
|
||||||
|
// 设置 Channel 和 Energy
|
||||||
|
const yAxis = parseInt(point[1].toFixed())
|
||||||
|
const energy = this.gammaEnergy[yAxis][0].toFixed(2)
|
||||||
|
this.betaGammaInfo = {
|
||||||
|
channel: yAxis,
|
||||||
|
energy
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Gamma Gated Beta Spectrum: QC 图表点击
|
||||||
|
handleGammaGatedSpectrumChartClick(param) {
|
||||||
|
const { offsetX, offsetY } = param
|
||||||
|
const point = getXAxisAndYAxisByPosition(this.$refs.gammaGatedChartRef.getChartInstance(), offsetX, offsetY)
|
||||||
|
if (point) {
|
||||||
|
const xAxis = parseInt(point[0].toFixed())
|
||||||
|
this.gammaGatedChartOption.series.markLine.data = [{ xAxis }]
|
||||||
|
|
||||||
|
this.tooltipChannel = xAxis
|
||||||
|
this.tooltipPosition.top = offsetY
|
||||||
|
if (xAxis > 187) {
|
||||||
|
this.tooltipPosition.left = offsetX - 125
|
||||||
|
} else {
|
||||||
|
this.tooltipPosition.left = offsetX + 20
|
||||||
|
}
|
||||||
|
this.tooltipVisible = true
|
||||||
|
this.channelAndEnergyModel.channel = xAxis
|
||||||
|
this.channelAndEnergyModel.energy = this.currEnergy
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 增加新的Channel 和 Energy 到表格里
|
||||||
|
handleAddChannelAndEnergy() {
|
||||||
|
const { channel, energy } = this.channelAndEnergyModel
|
||||||
|
|
||||||
|
if (!channel || !energy) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.list.push({
|
||||||
|
channel,
|
||||||
|
energy
|
||||||
|
})
|
||||||
|
|
||||||
|
this.channelAndEnergyModel = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除表格里的单项
|
||||||
|
handleDel(index) {
|
||||||
|
this.list.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下载图表图片
|
||||||
|
handleSnapshot(chartRef) {
|
||||||
|
const chartInstance = chartRef.getChartInstance()
|
||||||
|
exportEchartImg(chartInstance)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击Reset Button 重置
|
||||||
|
handleReset() {
|
||||||
|
this.newCalibrationFuncModel = []
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击Fitting按钮执行重新计算
|
||||||
|
handleFitting() {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回的科学计数法的字符串处理
|
||||||
|
* @param {string} str
|
||||||
|
*/
|
||||||
|
scientificNotationStr2Fixed(str) {
|
||||||
|
if (str) {
|
||||||
|
const arr = str.split('E')
|
||||||
|
const start = arr[0]
|
||||||
|
const end = arr[1]
|
||||||
|
return `${Number(start).toPrecision(6)}${end ? 'e' + end : ''}`
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
rectHeight() {
|
||||||
|
const { top, bottom } = initialBetaGammaChartOption.grid
|
||||||
|
const totalHeight = 427 - top - bottom
|
||||||
|
return (totalHeight / 256) * this.gammaChannelWidth
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -502,6 +724,26 @@ p {
|
||||||
|
|
||||||
.beta-gamma-chart {
|
.beta-gamma-chart {
|
||||||
height: 427px;
|
height: 427px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.markline {
|
||||||
|
position: absolute;
|
||||||
|
left: 55px;
|
||||||
|
width: 442px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: red;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rect {
|
||||||
|
position: absolute;
|
||||||
|
left: 55px;
|
||||||
|
width: 442px;
|
||||||
|
border: 1px solid #0f0;
|
||||||
|
background-color: rgba(0, 255, 0, 0.4);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -526,6 +768,10 @@ p {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.ant-input {
|
.ant-input {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -595,6 +841,17 @@ p {
|
||||||
.ant-input {
|
.ant-input {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.func {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
span {
|
||||||
|
&:nth-child(2) {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-btns {
|
&-btns {
|
||||||
|
|
@ -637,4 +894,37 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-tool-tip {
|
||||||
|
position: absolute;
|
||||||
|
border-style: solid;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 99999;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
border-color: rgb(255, 255, 255);
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: #00aa7f;
|
||||||
|
border-color: #00aa7f;
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.figure-chart-option-tooltip {
|
||||||
|
background-color: #00aa7f !important;
|
||||||
|
border-color: #00aa7f !important;
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy {
|
||||||
|
color: #00d1f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,19 +11,31 @@
|
||||||
:option="gammaSpectrumChartOption"
|
:option="gammaSpectrumChartOption"
|
||||||
@zr:click="handleGammaSpectrumChartClick"
|
@zr:click="handleGammaSpectrumChartClick"
|
||||||
/>
|
/>
|
||||||
<a-button type="primary">Snapshot</a-button>
|
<a-button type="primary" @click="handleSnapshot($refs.gammaSpectrumChart)">Snapshot</a-button>
|
||||||
|
<!-- 自定义tooltip，用于点击图表后的tooltip显示 -->
|
||||||
|
<div
|
||||||
|
v-if="tooltipVisible"
|
||||||
|
class="custom-tool-tip"
|
||||||
|
:style="{
|
||||||
|
top: tooltipPosition.top + 'px',
|
||||||
|
left: tooltipPosition.left + 'px'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="channel">Channel: {{ tooltipChannel }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- tooltip结束 -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content channel-and-energy">
|
<div class="content channel-and-energy">
|
||||||
<a-form-model layout="inline">
|
<a-form-model layout="inline">
|
||||||
<a-form-model-item label="Channel">
|
<a-form-model-item label="Channel">
|
||||||
<a-input></a-input>
|
<a-input v-model="channelAndEnergyModel.channel"></a-input>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
<a-form-model-item label="Energy">
|
<a-form-model-item label="Energy">
|
||||||
<a-input></a-input>
|
<a-input ref="energyInputRef" v-model="channelAndEnergyModel.energy"></a-input>
|
||||||
</a-form-model-item>
|
</a-form-model-item>
|
||||||
</a-form-model>
|
</a-form-model>
|
||||||
<a-button type="primary">Add</a-button>
|
<a-button type="primary" @click="handleAddChannelAndEnergy">Add</a-button>
|
||||||
</div>
|
</div>
|
||||||
<a-table
|
<a-table
|
||||||
size="small"
|
size="small"
|
||||||
|
|
@ -32,14 +44,18 @@
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
:class="list.length ? 'has-data' : ''"
|
:class="list.length ? 'has-data' : ''"
|
||||||
:scroll="{ y: 99 }"
|
:scroll="{ y: 99 }"
|
||||||
></a-table>
|
>
|
||||||
|
<template slot="operation" slot-scope="text, record, index">
|
||||||
|
<a-icon type="delete" style="color: #f00;" @click="handleDel(index)"></a-icon>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
<div class="figure">
|
<div class="figure">
|
||||||
<p class="title">Figure of Gamma Detector Calibration</p>
|
<p class="title">Figure of Gamma Detector Calibration</p>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="figure-chart">
|
<div class="figure-chart">
|
||||||
<custom-chart :option="figureChartOption" />
|
<custom-chart ref="figureChartRef" :option="figureChartOption" />
|
||||||
<a-button type="primary">Snapshot</a-button>
|
<a-button type="primary" @click="handleSnapshot($refs.figureChartRef)">Snapshot</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,8 +87,9 @@
|
||||||
<span>C to E : </span>
|
<span>C to E : </span>
|
||||||
<span>
|
<span>
|
||||||
E =
|
E =
|
||||||
<a-input type="number" size="small" /> + <a-input type="number" size="small" /> *C +
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[0]" /> +
|
||||||
<a-input type="number" size="small" /> *C <sup>2</sup>
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[1]" /> *C +
|
||||||
|
<a-input type="number" size="small" v-model="newCalibrationFuncModel[2]" /> *C <sup>2</sup>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="func">
|
<div class="func">
|
||||||
|
|
@ -82,29 +99,29 @@
|
||||||
</title-over-border>
|
</title-over-border>
|
||||||
</div>
|
</div>
|
||||||
<div class="calibration-funcs-btns">
|
<div class="calibration-funcs-btns">
|
||||||
<a-button type="primary">Reset Button</a-button>
|
<a-button type="primary" @click="handleReset">Reset Button</a-button>
|
||||||
<a-button type="primary">Fitting</a-button>
|
<a-button type="primary" @click="handleFitting">Fitting</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<title-over-border title="New Calibration is Applied to">
|
<title-over-border title="New Calibration is Applied to">
|
||||||
<a-radio-group>
|
<a-radio-group v-model="newCalibrationIsAppliedTo">
|
||||||
<p>
|
<p>
|
||||||
<a-radio>All Spectra</a-radio>
|
<a-radio value="1">All Spectra</a-radio>
|
||||||
</p>
|
</p>
|
||||||
<a-radio>Current Spectrum</a-radio>
|
<a-radio value="2">Current Spectrum</a-radio>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</title-over-border>
|
</title-over-border>
|
||||||
<title-over-border title="Recalculate ROI Counts For">
|
<title-over-border title="Recalculate ROI Counts For">
|
||||||
<a-checkbox-group>
|
<a-checkbox-group v-model="recalculateROICountsFor">
|
||||||
<p>
|
<p>
|
||||||
<a-checkbox>Sample Data</a-checkbox>
|
<a-checkbox value="sample">Sample Data</a-checkbox>
|
||||||
<a-checkbox>GasBg Data</a-checkbox>
|
<a-checkbox value="gasBg">GasBg Data</a-checkbox>
|
||||||
</p>
|
</p>
|
||||||
<a-checkbox>DetBg Data</a-checkbox>
|
<a-checkbox value="detBg">DetBg Data</a-checkbox>
|
||||||
<a-checkbox>QC Data</a-checkbox>
|
<a-checkbox value="qc">QC Data</a-checkbox>
|
||||||
</a-checkbox-group>
|
</a-checkbox-group>
|
||||||
</title-over-border>
|
</title-over-border>
|
||||||
<div class="footer-btns">
|
<div class="footer-btns">
|
||||||
|
|
@ -121,7 +138,9 @@ import CustomChart from '@/components/CustomChart/index.vue'
|
||||||
import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
|
import TitleOverBorder from '@/views/spectrumAnalysis/components/TitleOverBorder.vue'
|
||||||
import { getAction } from '@/api/manage'
|
import { getAction } from '@/api/manage'
|
||||||
import { graphic } from 'echarts'
|
import { graphic } from 'echarts'
|
||||||
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
|
import { exportEchartImg, getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
|
||||||
|
|
||||||
|
import { cloneDeep } from 'lodash'
|
||||||
|
|
||||||
const initialGammaSpectrumChartOption = {
|
const initialGammaSpectrumChartOption = {
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -219,7 +238,21 @@ const initialGammaSpectrumChartOption = {
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
data: []
|
data: [],
|
||||||
|
markLine: {
|
||||||
|
symbol: 'none',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f00'
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -342,8 +375,10 @@ const columns = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'S',
|
title: 'S',
|
||||||
dataIndex: 'sValue',
|
align: 'center',
|
||||||
align: 'center'
|
scopedSlots: {
|
||||||
|
customRender: 'operation'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -358,12 +393,26 @@ export default {
|
||||||
this.columns = columns
|
this.columns = columns
|
||||||
|
|
||||||
return {
|
return {
|
||||||
gammaSpectrumChartOption: initialGammaSpectrumChartOption,
|
gammaSpectrumChartOption: cloneDeep(initialGammaSpectrumChartOption),
|
||||||
figureChartOption: initialFigureChartOption,
|
figureChartOption: cloneDeep(initialFigureChartOption),
|
||||||
list: [],
|
list: [],
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
c2e: {},
|
c2e: {},
|
||||||
e2c: {}
|
e2c: {},
|
||||||
|
|
||||||
|
tooltipVisible: false,
|
||||||
|
tooltipPosition: {
|
||||||
|
top: 0,
|
||||||
|
left: 0
|
||||||
|
},
|
||||||
|
tooltipChannel: '',
|
||||||
|
|
||||||
|
channelAndEnergyModel: {},
|
||||||
|
|
||||||
|
newCalibrationFuncModel: [],
|
||||||
|
|
||||||
|
newCalibrationIsAppliedTo: '2',
|
||||||
|
recalculateROICountsFor: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -389,16 +438,18 @@ export default {
|
||||||
this.c2e = CToE
|
this.c2e = CToE
|
||||||
this.e2c = EToC
|
this.e2c = EToC
|
||||||
|
|
||||||
this.gammaSpectrumChartOption.yAxis.max = Math.ceil(max * 1.1)
|
const interval = Math.ceil(((max - min) / 4) * 1.1)
|
||||||
|
this.gammaSpectrumChartOption.yAxis.max = interval * 4
|
||||||
this.gammaSpectrumChartOption.yAxis.min = min
|
this.gammaSpectrumChartOption.yAxis.min = min
|
||||||
this.gammaSpectrumChartOption.yAxis.interval = Math.ceil((max * 1.1) / 4)
|
this.gammaSpectrumChartOption.yAxis.interval = interval
|
||||||
this.gammaSpectrumChartOption.series.data = gammaSpectrum.map(({ x, y }) => [x, y])
|
this.gammaSpectrumChartOption.series.data = gammaSpectrum.map(({ x, y }) => [x, y])
|
||||||
|
|
||||||
const gammaEnergyValue = gammaEnergy.map(item => item[0])
|
const gammaEnergyValue = gammaEnergy.map(item => item[0])
|
||||||
const gammaEnergyMax = Math.max(...gammaEnergyValue)
|
const gammaEnergyMax = Math.ceil(Math.max(...gammaEnergyValue))
|
||||||
const gammaEnergyMin = Math.min(...gammaEnergyValue)
|
const gammaEnergyMin = Math.floor(Math.min(...gammaEnergyValue))
|
||||||
this.figureChartOption.yAxis.max = Math.ceil(gammaEnergyMax * 1.1)
|
const gammaEnergyInterval = Math.ceil(((gammaEnergyMax - gammaEnergyMin) / 4) * 1.1)
|
||||||
this.figureChartOption.yAxis.min = Math.floor(gammaEnergyMin)
|
this.figureChartOption.yAxis.max = gammaEnergyInterval * 4
|
||||||
|
this.figureChartOption.yAxis.min = gammaEnergyMin
|
||||||
this.figureChartOption.yAxis.interval = Math.ceil((gammaEnergyMax * 1.1) / 4)
|
this.figureChartOption.yAxis.interval = Math.ceil((gammaEnergyMax * 1.1) / 4)
|
||||||
this.figureChartOption.series.data = gammaEnergyValue.map((item, index) => [index, item])
|
this.figureChartOption.series.data = gammaEnergyValue.map((item, index) => [index, item])
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -415,10 +466,60 @@ export default {
|
||||||
handleGammaSpectrumChartClick(param) {
|
handleGammaSpectrumChartClick(param) {
|
||||||
const { offsetX, offsetY } = param
|
const { offsetX, offsetY } = param
|
||||||
const point = getXAxisAndYAxisByPosition(this.$refs.gammaSpectrumChart.getChartInstance(), offsetX, offsetY)
|
const point = getXAxisAndYAxisByPosition(this.$refs.gammaSpectrumChart.getChartInstance(), offsetX, offsetY)
|
||||||
const xAxis = parseInt(point[0].toFixed())
|
if (point) {
|
||||||
console.log('%c [ xAxis ]-420', 'font-size:13px; background:pink; color:#bf2c9f;', xAxis)
|
const xAxis = parseInt(point[0].toFixed())
|
||||||
|
this.gammaSpectrumChartOption.series.markLine.data = [{ xAxis }]
|
||||||
|
|
||||||
|
this.tooltipChannel = xAxis
|
||||||
|
this.tooltipPosition.top = offsetY
|
||||||
|
if (xAxis > 225) {
|
||||||
|
this.tooltipPosition.left = offsetX - 125
|
||||||
|
} else {
|
||||||
|
this.tooltipPosition.left = offsetX + 20
|
||||||
|
}
|
||||||
|
this.tooltipVisible = true
|
||||||
|
this.channelAndEnergyModel.channel = xAxis
|
||||||
|
this.channelAndEnergyModel.energy = undefined
|
||||||
|
|
||||||
|
this.$refs.energyInputRef.focus()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 下载图表图片
|
||||||
|
handleSnapshot(chartRef) {
|
||||||
|
const chartInstance = chartRef.getChartInstance()
|
||||||
|
exportEchartImg(chartInstance)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 增加新的Channel 和 Energy 到表格里
|
||||||
|
handleAddChannelAndEnergy() {
|
||||||
|
const { channel, energy } = this.channelAndEnergyModel
|
||||||
|
|
||||||
|
if (!channel || !energy) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.list.push({
|
||||||
|
channel,
|
||||||
|
energy
|
||||||
|
})
|
||||||
|
|
||||||
|
this.channelAndEnergyModel = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除表格里的单项
|
||||||
|
handleDel(index) {
|
||||||
|
this.list.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击Reset Button 重置
|
||||||
|
handleReset() {
|
||||||
|
this.newCalibrationFuncModel = []
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击Fitting按钮执行重新计算
|
||||||
|
handleFitting() {},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 返回的科学计数法的字符串处理
|
* 返回的科学计数法的字符串处理
|
||||||
* @param {string} str
|
* @param {string} str
|
||||||
|
|
@ -589,6 +690,25 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-tool-tip {
|
||||||
|
position: absolute;
|
||||||
|
border-style: solid;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 99999;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
border-color: rgb(255, 255, 255);
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: #00aa7f;
|
||||||
|
border-color: #00aa7f;
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.figure-chart-option-tooltip {
|
.figure-chart-option-tooltip {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<custom-modal v-model="visible" :width="1200" title="Tool of Calibration" :footer="null">
|
<custom-modal v-model="visible" :width="1200" title="Tool of Calibration" :footer="null" destroy-on-close>
|
||||||
<a-tabs :animated="false">
|
<a-tabs :animated="false">
|
||||||
<a-tab-pane tab="Gamma Detector Calibration" key="1">
|
<a-tab-pane tab="Gamma Detector Calibration" key="1">
|
||||||
<gamma-detector-calibration @exit="visible = false" :sampleId="sampleId" />
|
<gamma-detector-calibration @exit="visible = false" :sampleId="sampleId" />
|
||||||
|
|
|
||||||
|
|
@ -124,6 +124,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getStationAndDetectorList(this.queryParam.menuTypes)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadData(arg) {
|
loadData(arg) {
|
||||||
const params = this.getQueryParams() //查询条件
|
const params = this.getQueryParams() //查询条件
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,13 @@
|
||||||
<template slot="flag">
|
<template slot="flag">
|
||||||
<a-checkbox></a-checkbox>
|
<a-checkbox></a-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<template slot="concentration" slot-scope="text">
|
<template slot="concentration" slot-scope="text, record">
|
||||||
<div class="concentration color-box">
|
<div class="concentration color-box" :class="record.className">
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template slot="uncertainty" slot-scope="text">
|
<template slot="uncertainty" slot-scope="text">
|
||||||
<div class="uncertainty color-box">
|
<div class="uncertainty color-box">+/-{{ text }}</div>
|
||||||
+/-{{ text }}
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template slot="mdc" slot-scope="text">
|
<template slot="mdc" slot-scope="text">
|
||||||
<div class="mdc color-box">
|
<div class="mdc color-box">
|
||||||
|
|
@ -27,15 +25,13 @@
|
||||||
<template slot="flag">
|
<template slot="flag">
|
||||||
<a-checkbox></a-checkbox>
|
<a-checkbox></a-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<template slot="concentration" slot-scope="text">
|
<template slot="concentration" slot-scope="text, record">
|
||||||
<div class="concentration color-box error">
|
<div class="concentration color-box" :class="record.className">
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template slot="uncertainty" slot-scope="text">
|
<template slot="uncertainty" slot-scope="text">
|
||||||
<div class="uncertainty color-box">
|
<div class="uncertainty color-box">+/-{{ text }}</div>
|
||||||
+/-{{ text }}
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template slot="mdc" slot-scope="text">
|
<template slot="mdc" slot-scope="text">
|
||||||
<div class="mdc color-box">
|
<div class="mdc color-box">
|
||||||
|
|
@ -114,8 +110,19 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
data: {
|
data: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.source1 = val.slice(0, 2)
|
if (val && Array.isArray(val)) {
|
||||||
this.source2 = val.slice(2, 4)
|
val.forEach(item => {
|
||||||
|
if (item.conc < 0) {
|
||||||
|
item.className = 'error'
|
||||||
|
} else if (item.conc > 0 && item.conc < item.mdc) {
|
||||||
|
item.className = 'warning'
|
||||||
|
} else {
|
||||||
|
item.className = 'success'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.source1 = val.slice(0, 2)
|
||||||
|
this.source2 = val.slice(2, 4)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
|
|
@ -188,7 +195,15 @@ export default {
|
||||||
background-color: #ad8815;
|
background-color: #ad8815;
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
background-color: #c11414;
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: #ffcc30;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: #0f0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -260,9 +260,10 @@ export default {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.option.series.data = newVal.map(({ x, y }) => [x, y])
|
this.option.series.data = newVal.map(({ x, y }) => [x, y])
|
||||||
|
|
||||||
const max = Math.max(...newVal.map(item => item.y)) * 1.1
|
const max = Math.max(...newVal.map(item => item.y))
|
||||||
this.option.yAxis.interval = Math.ceil(max / 4)
|
const interval = Math.ceil((max / 4) * 1.1)
|
||||||
this.option.yAxis.max = this.option.yAxis.interval * 4
|
this.option.yAxis.interval = interval
|
||||||
|
this.option.yAxis.max = interval * 4
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -143,7 +143,10 @@
|
||||||
<!-- Beta-Gamma 的Comments 结束 -->
|
<!-- Beta-Gamma 的Comments 结束 -->
|
||||||
|
|
||||||
<!-- Beta-Gamma 的Energy Calibration开始 -->
|
<!-- Beta-Gamma 的Energy Calibration开始 -->
|
||||||
<beta-gamma-energy-calibration-modal v-model="betaGammaEnergyCalibrationModalVisible" :sampleId="this.sampleData.sampleId" />
|
<beta-gamma-energy-calibration-modal
|
||||||
|
v-model="betaGammaEnergyCalibrationModalVisible"
|
||||||
|
:sampleId="this.sampleData.sampleId"
|
||||||
|
/>
|
||||||
<!-- Beta-Gamma 的Energy Calibration结束 -->
|
<!-- Beta-Gamma 的Energy Calibration结束 -->
|
||||||
|
|
||||||
<!-- Beta-Gamma 的 Spectrum 弹窗 -->
|
<!-- Beta-Gamma 的 Spectrum 弹窗 -->
|
||||||
|
|
@ -158,7 +161,7 @@
|
||||||
<!-- Beta-Gamma 的 Sample Infomation 弹窗 结束 -->
|
<!-- Beta-Gamma 的 Sample Infomation 弹窗 结束 -->
|
||||||
|
|
||||||
<!-- Beta-Gamma 的 QC Result 弹窗 -->
|
<!-- Beta-Gamma 的 QC Result 弹窗 -->
|
||||||
<beta-gamma-qc-results-modal v-model="betaGammaQCResultsModalVisible" :sampleId="this.sampleData.sampleId"/>
|
<beta-gamma-qc-results-modal v-model="betaGammaQCResultsModalVisible" :sampleId="this.sampleData.sampleId" />
|
||||||
<!-- Beta-Gamma 的 QC Result 弹窗 结束 -->
|
<!-- Beta-Gamma 的 QC Result 弹窗 结束 -->
|
||||||
|
|
||||||
<!-- Beta-Gamma 的 RLR 弹窗 -->
|
<!-- Beta-Gamma 的 RLR 弹窗 -->
|
||||||
|
|
@ -311,9 +314,14 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 从数据库加载-选择完成
|
/**
|
||||||
|
* 从数据库加载-选择完成
|
||||||
|
* @param {any[]} sampleList
|
||||||
|
*/
|
||||||
handleLoadSampleFromDB(sampleList) {
|
handleLoadSampleFromDB(sampleList) {
|
||||||
this.sampleList = sampleList
|
const ids = this.sampleList.map(item => item.sampleId) // 当前Sample列表中的所有id
|
||||||
|
const willAddList = sampleList.filter(item => !ids.includes(item.sampleId))
|
||||||
|
this.sampleList = this.sampleList.concat(willAddList)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 加载选中的样本
|
// 加载选中的样本
|
||||||
|
|
@ -330,6 +338,7 @@ export default {
|
||||||
// 清理全部
|
// 清理全部
|
||||||
handleCleanAll() {
|
handleCleanAll() {
|
||||||
this.sampleList = []
|
this.sampleList = []
|
||||||
|
this.analysisType = undefined
|
||||||
this.sampleData = {}
|
this.sampleData = {}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -403,6 +412,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
// 顶部菜单栏配置
|
||||||
operations() {
|
operations() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
|
@ -452,6 +462,9 @@ export default {
|
||||||
change: spectra => {
|
change: spectra => {
|
||||||
if (spectra) {
|
if (spectra) {
|
||||||
this.loadSelectedSample(spectra)
|
this.loadSelectedSample(spectra)
|
||||||
|
} else {
|
||||||
|
this.analysisType = undefined
|
||||||
|
this.sampleData = {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -630,11 +643,13 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'a-menu-item',
|
type: 'a-menu-item',
|
||||||
title: 'View Comments',
|
title: 'View Comments',
|
||||||
|
show: this.isBetaGamma || this.isGamma,
|
||||||
handler: this.handleViewComments
|
handler: this.handleViewComments
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'a-menu-item',
|
type: 'a-menu-item',
|
||||||
title: 'Add Comments',
|
title: 'Add Comments',
|
||||||
|
show: this.isBetaGamma || this.isGamma,
|
||||||
handler: this.handleAddComments
|
handler: this.handleAddComments
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user