xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calibration第四个弹窗中 beta tab页中散点图增加滑块；修复自建台站右下角分析结果conc的颜色不对问题；gamma（tab）两个曲线图，X轴改为4096；自建台站如果没有QC，点击Energy Calibration提示’No QC data available‘；calibration 弹窗中绿框的内容去掉， 参数默认sample勾选；增加两个3D图表；

Browse Source
This commit is contained in:
Xu Zhimeng 2024-09-05 16:28:14 +08:00
parent 2a957f7427
commit 1d1c0c7d5c
6 changed files with 388 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
View File

@ -2,7 +2,12 @@
<div class="beta-gamma-spectrum-chart">
<div class="beta-gamma-spectrum-chart-operators">
<span class="cnt">count: {{ axisInfo.c }}</span>
<span v-for="(item, index) in buttons" :key="item" @click="handleChange(index)">
<span
v-for="(item, index) in buttons"
:key="item"
:class="btnActive == index ? 'active' : ''"
@click="handleChange(index)"
>
{{ item }}
</span>
<span @click="handleUnzoom">Unzoom</span>
@ -16,7 +21,7 @@
@mouseleave="handleBorderMouseLeave"
@mouseup="handleBorderMouseLeave"
>
<div class="_2d-chart" ref="TwoChartRef">
<div v-show="btnActive == 2" class="_2d-chart" ref="TwoChartRef">
<CustomChart
ref="chartTwoDRef"
autoresize
@ -38,36 +43,47 @@
</div>
<div>0</div>
</div>
</div>
<!-- 2D图表结束 -->
<!-- 图表上面的四边形 -->
<div
:class="['boundary-list', currBoundaryItem ? 'is-moving' : '', disabled ? 'disabled' : '']"
:style="{
left: boundaryContainerPosition.left + 'px',
top: boundaryContainerPosition.top + 'px',
width: boundaryContainerPosition.width + 'px',
height: boundaryContainerPosition.height + 'px',
}"
>
<!-- 图表上面的四边形 -->
<div
class="boundary-item"
v-for="(boundaryItem, index) in boundaryList"
:key="index"
:class="['boundary-list', currBoundaryItem ? 'is-moving' : '', disabled ? 'disabled' : '']"
:style="{
left: boundaryItem.left + 'px',
top: boundaryItem.top + 'px',
width: boundaryItem.width + 'px',
height: boundaryItem.height + 'px',
backgroundColor: boundaryItem.backgroundColor,
borderColor: boundaryItem.borderColor,
left: boundaryContainerPosition.left + 'px',
top: boundaryContainerPosition.top + 'px',
width: boundaryContainerPosition.width + 'px',
height: boundaryContainerPosition.height + 'px',
}"
>
<div :class="['boundary-item-left']" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
<div :class="['boundary-item-right']" @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"></div>
<div
class="boundary-item"
v-for="(boundaryItem, index) in boundaryList"
:key="index"
:style="{
left: boundaryItem.left + 'px',
top: boundaryItem.top + 'px',
width: boundaryItem.width + 'px',
height: boundaryItem.height + 'px',
backgroundColor: boundaryItem.backgroundColor,
borderColor: boundaryItem.borderColor,
}"
>
<div :class="['boundary-item-left']" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
<div
:class="['boundary-item-right']"
@mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"
></div>
</div>
</div>
<!-- 图表上面的四边形结束 -->
</div>
<!-- 图表上面的四边形结束 -->
<!-- 2D图表结束 -->
<!-- 3D Surface开始 -->
<CustomChart v-if="btnActive == 3" key="1" :option="threeDSurfaceOption" />
<!-- 3D Surface结束 -->
<!-- 3D Scatter -->
<CustomChart v-if="btnActive == 4" key="2" :option="threeDScatterOption" />
<!-- 3D Scatter结束 -->
</div>
</div>
</template>
@ -78,7 +94,7 @@ import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
import SampleDataMixin from '../SampleDataMixin'
import { cloneDeep } from 'lodash'
const buttons = ['Gamma', 'Beta']
const buttons = ['Gamma', 'Beta', '2D', '3D Surface', '3D Scatter']
// Beta-Gamma 的配置
const TwoDOption = {
grid: {
@ -102,7 +118,6 @@ const TwoDOption = {
},
},
xAxis: {
id: '2',
name: 'Beta Channel',
nameTextStyle: {
color: '#5b9cba',
@ -133,7 +148,6 @@ const TwoDOption = {
interval: 128,
},
yAxis: {
id: '3',
name: 'Gamma Channel',
nameTextStyle: {
color: '#5b9cba',
@ -205,6 +219,149 @@ const ChartAxis = {
},
}
//3D Surface 配置
const ThreeDSurfaceOption = {
tooltip: {
trigger: 'item',
formatter: ({ value: [x, y, z] }) => {
// 自定义 tooltip 的内容
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
},
},
visualMap: {
show: false,
min: 0,
max: 0,
inRange: {
color: ['#0DCF38', '#B5475E'],
},
},
grid3D: {
axisLabel: {
color: '#ade6ee',
},
axisPointer: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(119, 181, 213, .3)',
},
},
splitLine: {
lineStyle: {
color: 'rgba(119, 181, 213, .3)',
},
},
},
xAxis3D: {
name: 'Beta Channel',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
min: 0,
max: 512,
interval: 128,
},
yAxis3D: {
name: 'Gamma Channel',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
min: 0,
max: 4096,
interval: 512,
},
zAxis3D: {
name: 'Count',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
},
series: {
type: 'surface',
data: [],
},
}
// 3D Scatter 配置
const ThreeDScatterOption = {
tooltip: {
trigger: 'item',
formatter: ({ value: [x, y, z] }) => {
// 自定义 tooltip 的内容
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
},
},
visualMap: {
show: false,
min: 0,
max: 0,
inRange: {
color: ['#0DCF38', '#B5475E'],
},
},
grid3D: {
axisLabel: {
color: '#ade6ee',
},
axisPointer: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(119, 181, 213, .3)',
},
},
splitLine: {
lineStyle: {
color: 'rgba(119, 181, 213, .3)',
},
},
},
xAxis3D: {
name: 'Beta Channel',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
max: 512,
interval: 128,
interval: 64,
},
yAxis3D: {
name: 'Gamma Channel',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
min: 0,
max: 4096,
interval: 512,
},
zAxis3D: {
name: 'Count',
nameTextStyle: {
color: '#5b9cba',
fontSize: 14,
},
},
series: {
type: 'scatter3D',
symbolSize: 5,
emphasis: {
label: {
show: false,
},
},
data: [],
},
}
export default {
mixins: [SampleDataMixin],
components: {
@ -254,6 +411,10 @@ export default {
value: [0, 0],
max: 0,
},
btnActive: 2,
threeDSurfaceOption: cloneDeep(ThreeDSurfaceOption),
threeDScatterOption: cloneDeep(ThreeDScatterOption),
}
},
created() {
@ -303,6 +464,7 @@ export default {
this.setVisialMapParams()
this.buildScatterList()
this.initChart()
this.btnActive = 2
},
/**
@ -330,6 +492,11 @@ export default {
})
this.reDrawRect()
// 设置3D图表值
const threedData = this.histogramDataList.map(({ b, g, c }) => [b, g, c])
this.threeDSurfaceOption.series.data = threedData
this.threeDScatterOption.series.data = threedData
},
// 构造scatter列表
@ -401,6 +568,9 @@ export default {
// 要求在最大值基础上加100
this.visualMap.max = max
this.visualMap.value = [0, max]
this.threeDSurfaceOption.visualMap.max = max
this.threeDScatterOption.visualMap.max = max
},
// 右侧滑块改变
@ -472,7 +642,11 @@ export default {
// 弹出gamma或beta弹窗
handleChange(index) {
this.$emit('open-modal', index)
if ([0, 1].includes(index)) {
this.$emit('open-modal', index)
} else {
this.btnActive = index
}
},
// 点击unzoom
handleUnzoom() {
@ -717,10 +891,15 @@ export default {
text-align: center;
height: 100%;
line-height: 26px;
width: 100px;
padding: 0 13px;
background-color: #406979;
cursor: pointer;
user-select: none;
white-space: nowrap;
&.active {
background-color: #1397a3;
}
}
}
&-main {

202
src/views/spectrumAnalysis/components/Modals/SelfStation/CalibrationModal/components/BetaDetectorCalibration.vue
View File

@ -23,19 +23,36 @@
</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 class="beta-gamma-chart-container">
<CustomChart
ref="betaGammaChartRef"
:option="betaGammaChartOption"
@zr:click="handleBetaGammaChartClick"
@zr:mousemove="handleBetaGammaChartMouseMove"
autoresize
/>
<!-- 数据量太大的时候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 class="bar">
<div>{{ visualMap.max }}</div>
<div class="bar-main">
<a-slider
v-model="visualMap.value"
range
vertical
:max="visualMap.max"
@afterChange="handleSliderChange"
></a-slider>
</div>
<div>0</div>
</div>
</div>
</div>
</div>
@ -166,30 +183,6 @@
</div>
</div>
</div>
<!-- <div class="footer">
<title-over-border title="New Calibration is Applied to">
<a-radio-group v-model="newCalibrationIsAppliedTo">
<p>
<a-radio value="1">All Spectra</a-radio>
</p>
<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" @click="handleReAnalyse">Reanalyse Spectrum Using New Calibration</a-button>
<a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
</div>
</div> -->
</a-spin>
</div>
</template>
@ -624,6 +617,12 @@ export default {
count: 0, //反算时需要传递的数值 非反算的情况下不需要传递 数值大小是 第一次调用接口时返回的tableWidgets 大小
isInverse: false, // 是否需要反算
betaIsFitting: false,
// 右侧范围选择
visualMap: {
value: [0, 0],
max: 0,
},
}
},
created() {
@ -679,7 +678,10 @@ export default {
this.oldScatterSeries = oldScatterSeries
this.count = oldScatterSeries.length
this.betaGammaChartOption.series.data = histogramData.map(({ b, g, c }) => [b, g, c])
this.histogramDataList = histogramData
this.setVisialMapParams()
this.buildScatterList()
this.gammaEnergy = gammaEnergy
this.gammaGatedBetaSpectrum = gammaGatedBetaSpectrum
this.oldScatterSeries = oldScatterSeries
@ -742,6 +744,68 @@ export default {
}
},
// 构造scatter列表
buildScatterList() {
this.betaGammaChartOption.series.data = this.histogramDataList
.filter(({ c }) => c)
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
},
// 构造一个scatter 的点
buildScatterItem(xAxis, yAxis, count) {
return {
value: [xAxis, yAxis, count],
itemStyle: {
color: this.getScatterItemColor(count),
},
}
},
// 获取一个点的颜色
getScatterItemColor(count) {
const [min, max] = this.visualMap.value
let color = ''
if (count >= max) {
color = '#f00'
} else if (count <= min) {
color = '#fff'
} else {
const { r, g, b } = this.interpolateColor(1 - (count - min) / (max - min))
color = `rgb(${r}, ${g}, ${b})`
}
return color
},
// 颜色插值算法
interpolateColor(percentage) {
const color1 = { r: 255, g: 0, b: 0 },
color2 = { r: 255, g: 255, b: 255 }
const r = color1.r + (color2.r - color1.r) * percentage
const g = color1.g + (color2.g - color1.g) * percentage
const b = color1.b + (color2.b - color1.b) * percentage
return { r, g, b }
},
// 设置右侧滑块参数
setVisialMapParams() {
const counts = this.histogramDataList
.filter(({ c }) => c)
.map(({ c }) => c)
.sort((a, b) => b - a)
const max = (counts[0] || 0) + 100
// 要求在最大值基础上加100
this.visualMap.max = max
this.visualMap.value = [0, max]
},
// 右侧滑块改变
handleSliderChange() {
this.betaGammaChartOption.series.data.forEach((item) => {
item.itemStyle.color = this.getScatterItemColor(item.value[2])
})
},
// 点击左上角散点图，设置红线
handleBetaGammaChartClick(param) {
const { offsetX, offsetY } = param
@ -1159,12 +1223,22 @@ p {
.beta-gamma-chart {
height: 608px;
position: relative;
display: flex;
&-container {
position: relative;
height: 100%;
flex: 1;
.custom-chart {
height: 100%;
}
}
.markline {
position: absolute;
left: 55px;
width: 442px;
width: 406px;
height: 1px;
background-color: red;
pointer-events: none;
@ -1173,7 +1247,7 @@ p {
.rect {
position: absolute;
left: 55px;
width: 446px;
width: 406px;
border: 1px solid #0f0;
background-color: rgba(0, 255, 0, 0.4);
transform: translateY(-50%);
@ -1348,4 +1422,50 @@ p {
color: #fff;
}
}
.bar {
width: 30px;
margin-left: 10px;
color: #ade6ee;
padding-top: 5px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
&-main {
width: 14px;
flex: 1;
.ant-slider {
margin: 0;
padding: 0;
::v-deep {
.ant-slider-handle {
left: -2px;
right: -2px;
border-radius: 0;
margin-left: 0;
box-shadow: none;
border: 0;
background: #0cebc9;
height: 6px;
width: auto;
}
.ant-slider-rail {
width: 100%;
background: #084248 !important;
}
.ant-slider-track {
width: 100%;
background: linear-gradient(to bottom, #f00 0, #fff 100%);
}
}
}
}
}
</style>

32
src/views/spectrumAnalysis/components/Modals/SelfStation/CalibrationModal/components/GammaDetectorCalibration.vue
View File

@ -131,30 +131,6 @@
</div>
</div>
</div>
<!-- <div class="footer">
<title-over-border title="New Calibration is Applied to">
<a-radio-group v-model="newCalibrationIsAppliedTo">
<p>
<a-radio value="1">All Spectra</a-radio>
</p>
<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" @click="handleReAnalyse()">Reanalyse Spectrum Using New Calibration</a-button>
<a-button type="primary" class="exit" @click="handleExit()">Exit</a-button>
</div>
</div> -->
</a-spin>
</div>
</template>
@ -192,8 +168,8 @@ const initialGammaSpectrumChartOption = {
},
xAxis: {
min: 0,
max: 256,
interval: 64,
max: 4096,
interval: 512,
axisLine: {
lineStyle: {
color: 'rgb(119, 181, 213, 0.5)',
@ -316,8 +292,8 @@ const initialFigureChartOption = {
},
xAxis: {
min: 0,
max: 256,
interval: 64,
max: 4096,
interval: 512,
axisLine: {
lineStyle: {
color: 'rgb(119, 181, 213, 0.5)',

38
src/views/spectrumAnalysis/components/Modals/SelfStation/CalibrationModal/index.vue
View File

@ -19,22 +19,10 @@
<div class="footer">
<title-over-border title="New Calibration is Applied to">
<a-radio-group v-model="newCalibrationIsAppliedTo">
<p>
<a-radio value="AllSpectrum">All Spectra</a-radio>
</p>
<a-radio value="AllSpectrum">All Spectra</a-radio>
<a-radio value="CurrentSpectrum">Current Spectrum</a-radio>
</a-radio-group>
</title-over-border>
<title-over-border title="Recalculate ROI Counts For">
<a-checkbox-group v-model="recalculateROICountsFor" @change="recalculateROICountsForChange">
<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" @click="handleReAnalyse">Reanalyse Spectrum Using New Calibration</a-button>
<a-button type="primary" class="exit" @click="handleExit">Exit</a-button>
@ -64,12 +52,6 @@ export default {
visible: false,
currTab: 'gamma',
newCalibrationIsAppliedTo: 'CurrentSpectrum',
recalculateROICountsFor: [],
checkFlag: {
checkSample: false,
checkGas: false,
checkDet: false,
},
betaEnergyValid: false,
gammaEnergyValid: false,
isReanlyze: false,
@ -80,14 +62,6 @@ export default {
this.currTab = 'gamma'
this.visible = true
},
recalculateROICountsForChange(checkedVal) {
this.recalculateROICountsFor = checkedVal
this.checkFlag.checkSample = checkedVal.includes('sample') ? true : false
this.checkFlag.checkGas = checkedVal.includes('gasBg') ? true : false
this.checkFlag.checkDet = checkedVal.includes('detBg') ? true : false
this.$emit('sendInfo', this.checkFlag)
},
getFittingFlag_beta(val) {
this.betaEnergyValid = val
console.log('betaEnergyValid>>>' + this.betaEnergyValid)
@ -129,12 +103,12 @@ export default {
}
)
let params = {
const params = {
applyType: this.newCalibrationIsAppliedTo,
sampleData: this.recalculateROICountsFor.includes('sample') ? true : false,
gasBgData: this.recalculateROICountsFor.includes('gasBg') ? true : false,
detBgData: this.recalculateROICountsFor.includes('detBg') ? true : false,
qcData: this.recalculateROICountsFor.includes('qc') ? true : false,
sampleData: true,
gasBgData: false,
detBgData: false,
qcData: false,
betaEnergyValid: this.betaEnergyValid,
gammaEnergyValid: this.gammaEnergyValid,
dbNames,

19
src/views/spectrumAnalysis/components/ResultDisplay-Beta.vue
View File

@ -5,7 +5,7 @@
<a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
</template>
<template slot="concentration" slot-scope="text, record">
<div class="concentration color-box" :class="record.className">
<div class="concentration color-box" :style="{ backgroundColor: record.color }">
{{ text }}
</div>
</template>
@ -17,16 +17,13 @@
{{ text }}
</div>
</template>
<template slot="operator" slot-scope="text, record">
<div class="search" @click="handleSearch(record.nuclideName)"></div>
</template>
</a-table>
<a-table :data-source="source2" rowKey="id" :columns="columns" :pagination="false">
<template slot="flag" slot-scope="text, record">
<a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
</template>
<template slot="concentration" slot-scope="text, record">
<div class="concentration color-box" :class="record.className">
<div class="concentration color-box" :style="{ backgroundColor: record.color }">
{{ text }}
</div>
</template>
@ -38,9 +35,6 @@
{{ text }}
</div>
</template>
<template slot="operator" slot-scope="text, record">
<div class="search" @click="handleSearch(record.nuclideName)"></div>
</template>
</a-table>
</div>
</template>
@ -114,15 +108,6 @@ export default {
data: {
handler(val) {
if (val && Array.isArray(val)) {
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)
}

5
src/views/spectrumAnalysis/index.vue
View File

@ -1126,6 +1126,11 @@ export default {
// 新的beta的
handleNewBetaEnergyCalib() {
const sampleDetail = getSampleData(this.sampleData.inputFileName)
if (!sampleDetail || !sampleDetail.data.qc) {
this.$message.warning('No QC data available!')
return
}
this.$refs.newCalibrationModalRef.show()
},