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

feat: 完成Channel和Energy数据的切换，并解决类型为Energy时，刷选范围不正确的问题，优化散点图在大数据下的表现

Browse Source
This commit is contained in:
Xu Zhimeng 2023-08-17 19:11:42 +08:00
parent 651c72320e
commit 75db97b2e8
5 changed files with 194 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Custom3DChart/index.vue
View File

@ -5,8 +5,8 @@
import * as echarts from 'echarts'
import 'echarts-gl'
const events = ['click']
const zrEvents = ['mousemove', 'mousedown', 'mouseup']
const events = ['click', 'brushEnd']
const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click']
export default {
props: {
option: {

6
src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
View File

@ -15,7 +15,7 @@
<div class="beta-gamma-spectrum-chart-main">
<!-- 2D 图表，为了相应Unzoom采用的v-show -->
<div class="_2d-chart" v-show="active == 0">
<custom-chart
<Custom3DChart
ref="chartRef"
:option="twoDOption"
@zr:mousemove="handleMouseMove"
@ -43,7 +43,6 @@
</template>
<script>
import CustomChart from '@/components/CustomChart/index.vue'
import Custom3DChart from '@/components/Custom3DChart/index.vue'
import ColorPalette from './ColorPalette.vue'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
@ -133,7 +132,7 @@ const twoDOption = {
interval: 64
},
series: {
type: 'scatter',
type: 'scatterGL',
symbolSize: 5,
data: [],
itemStyle: {
@ -315,7 +314,6 @@ export default {
}
},
components: {
CustomChart,
Custom3DChart,
ColorPalette
},

2
src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
View File

@ -248,7 +248,7 @@ const initialBetaGammaChartOption = {
interval: 64
},
series: {
type: 'scatter',
type: 'scatterGL',
symbolSize: 2,
data: [],
itemStyle: {

2
src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
View File

@ -58,7 +58,7 @@ export default {
}
&.BLUE {
background: radial-gradient(circle, rgb(50, 50, 255) 0, blue 100%);
background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
}
&.YELLOW {

259
src/views/spectrumAnalysis/gamma-analysis.vue
View File

@ -13,7 +13,12 @@
</pop-over-with-icon>
<pop-over-with-icon>
Graph Assistance
<graph-assistance slot="content" @change="handleGraphAssistanceChange" @reset="handleReset" />
<graph-assistance
v-if="!isLoading"
slot="content"
@change="handleGraphAssistanceChange"
@reset="handleReset"
/>
</pop-over-with-icon>
<pop-over-with-icon>
Nuclide Library
@ -29,7 +34,7 @@
<!-- 主体部分 -->
<div class="gamma-analysis-main">
<div class="gamma-analysis-chart">
<custom-chart
<custom-3d-chart
ref="chartRef"
:option="option"
@zr:click="handleChartClick"
@ -40,7 +45,7 @@
/>
<div class="gamma-analysis-thumbnail">
<custom-chart
<custom-3d-chart
ref="thumbnailChartRef"
:option="thumbnailOption"
@zr:click="handleThumbnailChartClick"
@ -55,7 +60,7 @@
</template>
<script>
import CustomChart from '@/components/CustomChart/index.vue'
import Custom3dChart from '@/components/Custom3DChart/index.vue'
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
import QcFlags from './components/SubOperators/QcFlags.vue'
@ -96,11 +101,7 @@ const initialOption = {
width: 2
}
},
formatter: params => {
const [channel] = params[0].value
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${(0).toFixed(2)}</div>`
},
formatter: undefined,
className: 'figure-chart-option-tooltip'
},
xAxis: {
@ -203,7 +204,7 @@ export default {
}
},
components: {
CustomChart,
Custom3dChart,
PopOverWithIcon,
DetailedInfomation,
QcFlags,
@ -228,18 +229,23 @@ export default {
created() {
this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
},
mounted() {
this.option.brush = { toolbox: [] }
},
methods: {
async getSampleDetail() {
const { dbName, sampleId } = this.sample
try {
this.isLoading = true
this.option.series = []
this.thumbnailOption.series = []
// const { success, result, message } = await getAction('/gamma/gammaByDB', {
// dbName,
// sampleId
// })
const { success, result, message } = Response
const { success, result, message } = await getAction('/gamma/gammaByDB', {
dbName,
sampleId
})
// const { success, result, message } = Response
console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
if (success) {
this.isLoading = false
@ -261,7 +267,6 @@ export default {
shapeEnergyData
} = result
this.detailedInfomation = DetailedInformation
this.qcFlags = QCFlag
@ -277,6 +282,9 @@ export default {
const channelScacLine = allData.find(item => item.name == 'Scac' && item.group == 'channel')
const energyScacLine = allData.find(item => item.name == 'Scac' && item.group == 'energy')
this.allEnergy = allData.find(item => item.name == 'Energy' && item.group == 'energy')
this.allChannel = allData.find(item => item.name == 'Count' && item.group == 'channel')
// 保存Peak Line
this.channelPeakGroup = channelPeakGroup
this.energyPeakGroup = energyPeakGroup
@ -331,7 +339,7 @@ export default {
},
data: [{ xAxis: -1 }]
},
zlevel: 0
animation: false
})
// 右上角缩略图推入Spectrum Line
@ -363,28 +371,10 @@ export default {
width: 2
},
data: []
},
zlevel: 0
})
// 推入Scac
this.option.series.push({
name: 'Scac',
type: 'line',
data: [].map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${shadowChannelChart.color})`
},
lineStyle: {
width: 1
},
symbol: 'none',
emphasis: {
disabled: true
}
})
// 推入基线
// 推入BaseLine
this.option.series.push({
name: 'BaseLine',
type: 'line',
@ -398,10 +388,11 @@ export default {
symbol: 'none',
emphasis: {
disabled: true
}
},
animation: false
})
// 推入LC线
// 推入LcLine线
this.option.series.push({
name: 'LcLine',
type: 'line',
@ -415,7 +406,8 @@ export default {
symbol: 'none',
emphasis: {
disabled: true
}
},
animation: false
})
// 推入Scac线
@ -432,13 +424,14 @@ export default {
symbol: 'none',
emphasis: {
disabled: true
}
},
animation: false
})
// 推入基线控制点
this.option.series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
type: 'scatterGL',
data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
@ -452,13 +445,13 @@ export default {
emphasis: {
disabled: true
},
z: 3,
animation: false
})
// 推入Peak Line
const peakLines = []
channelPeakGroup.forEach((item, index) => {
this.option.series.push({
peakLines.push({
name: `Peak_${index}`,
type: 'line',
data: item.pointlist.map(({ x, y }) => [x, y]),
@ -472,6 +465,9 @@ export default {
animation: false
})
})
this.option.series.push(...peakLines)
this.option.tooltip.formatter = this.tooltipFormatter
} else {
this.$message.error(message)
}
@ -480,6 +476,23 @@ export default {
}
},
tooltipFormatter(params) {
if (this.graphAssistance.axisType == 'Energy') {
const energy = params[0].value[0]
const channel = this.getChannelByEnergy(energy)
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.toFixed(2)}</div>`
} else {
const channel = parseInt(params[0].value[0])
const energy = this.allEnergy.pointlist[channel]
return energy
? `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
: undefined
}
},
// Graph Assistance 操作
handleGraphAssistanceChange({ type, label, value }) {
// 类型变化
@ -491,16 +504,43 @@ export default {
break
case 'Channel':
case 'Energy':
this.option.xAxis.name = label
this.graphAssistance.type = type
this.graphAssistance.axisType = label
this.handleReset()
this.redrawLineBySeriesName(
'BaseLine',
this.energyBaseLine,
this.channelBaseLine,
this.graphAssistance.Baseline
)
this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, this.graphAssistance.Lc)
this.redrawLineBySeriesName(
'ScacLine',
this.energyScacLine,
this.channelScacLine,
this.graphAssistance.SCAC
)
this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
this.redrawCtrlPointBySeriesName()
this.redrawPeakLine()
this.redrawThumbnailChart()
break
case 'Lines':
this.option.series[0].type = 'line'
this.option.series[0].symbol = 'none'
this.thumbnailOption.series[0].type = 'line'
this.thumbnailOption.series[0].symbol = 'none'
break
case 'Scatter':
this.option.series[0].type = 'scatter'
this.option.series[0].type = 'scatterGL'
this.option.series[0].symbol = 'circle'
this.thumbnailOption.series[0].type = 'scatterGL'
this.thumbnailOption.series[0].symbol = 'circle'
break
}
}
@ -518,45 +558,79 @@ export default {
}
break
case 'Baseline':
const baseLineSeries = this.findSeriesByName('BaseLine')
if (value) {
if (this.graphAssistance.type == 'Energy') {
baseLineSeries.data = this.energyBaseLine.pointlist.map(({ x, y }) => [x, y])
} else {
baseLineSeries.data = this.channelBaseLine.pointlist.map(({ x, y }) => [x, y])
}
} else {
baseLineSeries.data = []
}
this.redrawLineBySeriesName('BaseLine', this.energyBaseLine, this.channelBaseLine, value)
break
case 'Lc':
const lcLineSeries = this.findSeriesByName('LcLine')
if (value) {
if (this.graphAssistance.type == 'Energy') {
lcLineSeries.data = this.energyLcLine.pointlist.map(({ x, y }) => [x, y])
} else {
lcLineSeries.data = this.channelLcLine.pointlist.map(({ x, y }) => [x, y])
}
} else {
lcLineSeries.data = []
}
this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, value)
break
case 'SCAC':
const scacLineSeries = this.findSeriesByName('ScacLine')
if (value) {
if (this.graphAssistance.type == 'Energy') {
scacLineSeries.data = this.energyScacLine.pointlist.map(({ x, y }) => [x, y])
} else {
scacLineSeries.data = this.channelScacLine.pointlist.map(({ x, y }) => [x, y])
}
} else {
scacLineSeries.data = []
}
this.redrawLineBySeriesName('ScacLine', this.energyScacLine, this.channelScacLine, value)
break
}
}
},
// 根据seriesName重绘线
redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
const series = this.findSeriesByName(seriesName)
if (isShow) {
const data = this.graphAssistance.axisType == 'Energy' ? energyData : channelData
series.data = data.pointlist.map(({ x, y }) => [x, y])
} else {
series.data = []
}
},
// 重绘控制点
redrawCtrlPointBySeriesName() {
const series = this.findSeriesByName('BaseLine_Ctrl_Point')
const data = this.graphAssistance.axisType == 'Energy' ? this.shapeEnergyData : this.shapeChannelData
series.data = data.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
itemStyle: {
color: 'transparent',
borderColor: color,
borderWidth: size / 2
}
}
})
},
// 重绘Peak Line
redrawPeakLine() {
this.option.series = this.option.series.filter(item => {
return -1 == item.name.indexOf('Peak_')
})
const data = this.graphAssistance.axisType == 'Energy' ? this.energyPeakGroup : this.channelPeakGroup
const peakLines = []
data.forEach((item, index) => {
peakLines.push({
name: `Peak_${index}`,
type: 'line',
data: item.pointlist.map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${item.color})`
},
lineStyle: {
width: 1
},
symbol: 'none',
animation: false
})
})
this.option.series.push(...peakLines)
},
// 重绘右上角的缩略图
redrawThumbnailChart() {
const series = this.thumbnailOption.series[0]
const data = this.graphAssistance.axisType == 'Energy' ? this.shadowEnergyChart : this.shadowChannelChart
series.data = data.pointlist.map(({ x, y }) => [x, y])
},
// 点击图表，设置红线
handleChartClick(param) {
const { offsetX, offsetY } = param
@ -669,8 +743,14 @@ export default {
this.option.yAxis.min = y1
this.option.yAxis.max = y2
if (this.graphAssistance.axisType == 'Energy') {
const channel1 = this.getChannelByEnergy(x1)
const channel2 = this.getChannelByEnergy(x2)
this.setThumbnailChartRect(channel1, y2, channel2, y1)
} else {
this.setThumbnailChartRect(x1, y2, x2, y1)
}
}
this.clearBrush(chart)
},
@ -731,8 +811,17 @@ export default {
this.setThumbnailChartRect(xAxis - halfWidth, yAxis + halfHeight, xAxis + halfWidth, yAxis - halfHeight)
if (this.graphAssistance.axisType == 'Energy') {
const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
this.option.xAxis.min = x1
this.option.xAxis.max = x2
} else {
this.option.xAxis.min = xAxis - halfWidth
this.option.xAxis.max = xAxis + halfWidth
}
this.option.yAxis.min = yAxis - halfHeight
this.option.yAxis.max = yAxis + halfHeight
}
@ -780,6 +869,23 @@ export default {
return num > max ? max : num < min ? min : num
}
},
getChannelByEnergy(energy) {
let channel = 0
for (let index = 1; index < this.allEnergy.pointlist.length; index++) {
const currEnergy = this.allEnergy.pointlist[index].x
if (currEnergy >= energy) {
const prevEnergy = this.allEnergy.pointlist[index - 1].x
if (currEnergy - energy > energy - prevEnergy.x) {
channel = index
} else {
channel = index + 1
}
break
}
}
return channel
}
},
watch: {
sample: {
@ -817,6 +923,7 @@ export default {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
&-thumbnail {