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

切换谱数据之后标题没有改名称

Browse Source 
beta 散点图放大之后，切换其他图，右侧曲线图要还原
This commit is contained in:
任珮宇 2024-01-25 11:06:55 +08:00
parent 9f6575ff04
commit 2ab2dd1b1e
2 changed files with 102 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/spectrumAnalysis/beta-gamma-analysis.vue
View File

@ -26,7 +26,7 @@
<!-- 左侧图表 --> <!-- 左侧图表 -->
<div class="beta-gamma-spectrum-sample"> <div class="beta-gamma-spectrum-sample">
<beta-gamma-chart-container> <beta-gamma-chart-container>
<template slot="title"> Beta-Gamma Spectrum: Sample </template> <template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
<beta-gamma-spectrum-chart <beta-gamma-spectrum-chart
ref="betaGammaChartRef" ref="betaGammaChartRef"
:histogramDataList="histogramDataList" :histogramDataList="histogramDataList"
@ -191,6 +191,7 @@ export default {
this.SampleType = SampleType this.SampleType = SampleType
return { return {
currSpectrum: '',
// analyseCurrentSpectrum: {}, // analyseCurrentSpectrum: {},
qcFlags: {}, qcFlags: {},
@ -386,6 +387,11 @@ export default {
if (val === 'qc' && !this.sampleDetail.qc) { if (val === 'qc' && !this.sampleDetail.qc) {
this.$message.warning('No qc spectrum file!') this.$message.warning('No qc spectrum file!')
} else { } else {
if (val == 'sample') this.currSpectrum = 'Sample'
if (val == 'gasBg') this.currSpectrum = 'Gas'
if (val == 'detBg') this.currSpectrum = 'Det'
if (val == 'qc') this.currSpectrum = 'QC'
const { const {
betaOriginalData, betaOriginalData,
betaProjectedData, betaProjectedData,

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

@ -57,11 +57,11 @@ const twoDOption = {
top: 15, top: 15,
left: 55, left: 55,
right: 10, right: 10,
bottom: 45 bottom: 45,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: params => { formatter: (params) => {
const [b, g, c] = params.value const [b, g, c] = params.value
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}` return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
}, },
@ -69,69 +69,69 @@ const twoDOption = {
animation: false, animation: false,
type: 'cross', type: 'cross',
lineStyle: { lineStyle: {
type: 'dashed' type: 'dashed',
} },
} },
}, },
xAxis: { xAxis: {
name: 'Beta Channel', name: 'Beta Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 16 fontSize: 16,
}, },
nameLocation: 'center', nameLocation: 'center',
nameGap: 30, nameGap: 30,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
axisLabel: { axisLabel: {
color: '#ade6ee', color: '#ade6ee',
fontSize: 12 fontSize: 12,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
yAxis: { yAxis: {
name: 'Gamma Channel', name: 'Gamma Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 16 fontSize: 16,
}, },
nameLocation: 'center', nameLocation: 'center',
nameGap: 35, nameGap: 35,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
axisLabel: { axisLabel: {
color: '#ade6ee', color: '#ade6ee',
fontSize: 12 fontSize: 12,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
series: [ series: [
{ {
@ -139,12 +139,12 @@ const twoDOption = {
symbolSize: 4, symbolSize: 4,
data: [], data: [],
itemStyle: { itemStyle: {
color: '#fff' color: '#fff',
} },
} },
], ],
brush: {}, brush: {},
animation: false animation: false,
} }
//3D Surface 配置 //3D Surface 配置
@ -155,66 +155,66 @@ const threeDSurfaceOption = {
formatter: ({ value: [x, y, z] }) => { formatter: ({ value: [x, y, z] }) => {
// 自定义 tooltip 的内容 // 自定义 tooltip 的内容
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}` return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
} },
}, },
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 0, max: 0,
inRange: { inRange: {
color: ['#0DCF38', '#B5475E'] color: ['#0DCF38', '#B5475E'],
} },
}, },
grid3D: { grid3D: {
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
}, },
axisPointer: { axisPointer: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
} },
}, },
xAxis3D: { xAxis3D: {
name: 'Beta Channel', name: 'Beta Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
yAxis3D: { yAxis3D: {
name: 'Gamma Channel', name: 'Gamma Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
zAxis3D: { zAxis3D: {
name: 'Count', name: 'Count',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
max: 0 max: 0,
}, },
series: { series: {
type: 'surface', type: 'surface',
data: [] data: [],
} },
} }
// 3D Scatter 配置 // 3D Scatter 配置
@ -224,92 +224,92 @@ const threeDScatterOption = {
formatter: ({ value: [x, y, z] }) => { formatter: ({ value: [x, y, z] }) => {
// 自定义 tooltip 的内容 // 自定义 tooltip 的内容
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}` return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
} },
}, },
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 0, max: 0,
inRange: { inRange: {
color: ['#0DCF38', '#B5475E'] color: ['#0DCF38', '#B5475E'],
} },
}, },
grid3D: { grid3D: {
axisLabel: { axisLabel: {
color: '#ade6ee' color: '#ade6ee',
}, },
axisPointer: { axisPointer: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(119, 181, 213, .3)' color: 'rgba(119, 181, 213, .3)',
} },
} },
}, },
xAxis3D: { xAxis3D: {
name: 'Beta Channel', name: 'Beta Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
yAxis3D: { yAxis3D: {
name: 'Gamma Channel', name: 'Gamma Channel',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
min: 0, min: 0,
max: 256, max: 256,
interval: 64 interval: 64,
}, },
zAxis3D: { zAxis3D: {
name: 'Count', name: 'Count',
nameTextStyle: { nameTextStyle: {
color: '#5b9cba', color: '#5b9cba',
fontSize: 14 fontSize: 14,
}, },
max: 0 max: 0,
}, },
series: { series: {
type: 'scatter3D', type: 'scatter3D',
symbolSize: 5, symbolSize: 5,
emphasis: { emphasis: {
label: { label: {
show: false show: false,
} },
}, },
data: [] data: [],
} },
} }
export default { export default {
props: { props: {
histogramDataList: { histogramDataList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
histogramDataDList: { histogramDataDList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
boundary: { boundary: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
components: { components: {
CustomChart, CustomChart,
ColorPalette ColorPalette,
}, },
data() { data() {
this.buttons = buttons this.buttons = buttons
@ -323,8 +323,8 @@ export default {
threeDScatterOption, threeDScatterOption,
showROI: true, showROI: true,
opts: { opts: {
notMerge: false notMerge: false,
} },
} }
}, },
@ -340,6 +340,7 @@ export default {
// 点击改变Beta-Gamma Spectrum: Sample图表类型 // 点击改变Beta-Gamma Spectrum: Sample图表类型
handleChange(index) { handleChange(index) {
this.active = index this.active = index
this.handleUnzoom()
// 因第一个二维的图表采用的v-show(为了响应Unzoom事件)，而在该图表不显示的时候，且改变了浏览器大小触发resize时，大小会变为0, 故在切换回来的时候resize一下 // 因第一个二维的图表采用的v-show(为了响应Unzoom事件)，而在该图表不显示的时候，且改变了浏览器大小触发resize时，大小会变为0, 故在切换回来的时候resize一下
if (this.active == 0) { if (this.active == 0) {
@ -388,8 +389,8 @@ export default {
key: 'brush', key: 'brush',
brushOption: { brushOption: {
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。 // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
brushType: 'rect' brushType: 'rect',
} },
}) })
}, },
@ -404,12 +405,12 @@ export default {
// 清理刷选的范围 // 清理刷选的范围
chart.dispatchAction({ chart.dispatchAction({
type: 'brush', type: 'brush',
areas: [] areas: [],
}) })
// 改为不可刷选状态 // 改为不可刷选状态
chart.dispatchAction({ chart.dispatchAction({
type: 'takeGlobalCursor' type: 'takeGlobalCursor',
}) })
}, },
@ -421,8 +422,8 @@ export default {
const range = areas.range const range = areas.range
const [[minX, maxX], [minY, maxY]] = range const [[minX, maxX], [minY, maxY]] = range
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map(num => parseInt(num.toFixed())) const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed())) const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围 const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
@ -444,7 +445,7 @@ export default {
buildScatterList() { buildScatterList() {
const { const {
xAxis: { min: minX, max: maxX }, xAxis: { min: minX, max: maxX },
yAxis: { min: minY, max: maxY } yAxis: { min: minY, max: maxY },
} = this.twoDOption } = this.twoDOption
this.twoDOption.series[0].data = this.histogramDataDList this.twoDOption.series[0].data = this.histogramDataDList
@ -458,8 +459,8 @@ export default {
return { return {
value: [xAxis, yAxis], value: [xAxis, yAxis],
itemStyle: { itemStyle: {
color: `rgb(${r}, ${g}, ${b})` color: `rgb(${r}, ${g}, ${b})`,
} },
} }
}, },
@ -498,16 +499,16 @@ export default {
[maxX, minY], [maxX, minY],
[maxX, maxY], [maxX, maxY],
[minX, maxY], [minX, maxY],
[minX, minY] [minX, minY],
] ]
rectList.push(this.drawOneRect(rect, color)) rectList.push(this.drawOneRect(rect, color))
}) })
} }
const lineSeries = rectList.map(rect => ({ const lineSeries = rectList.map((rect) => ({
type: 'line', type: 'line',
...rect, ...rect,
zlevel: 11 zlevel: 11,
})) }))
this.opts.notMerge = true this.opts.notMerge = true
@ -527,8 +528,8 @@ export default {
data: rect, data: rect,
symbol: 'none', symbol: 'none',
itemStyle: { itemStyle: {
color color,
} },
} }
}, },
@ -549,7 +550,7 @@ export default {
const g = color1.g + (color2.g - color1.g) * percentage const g = color1.g + (color2.g - color1.g) * percentage
const b = color1.b + (color2.b - color1.b) * percentage const b = color1.b + (color2.b - color1.b) * percentage
return { r, g, b } return { r, g, b }
} },
}, },
watch: { watch: {
// 2D 图表 // 2D 图表
@ -558,22 +559,22 @@ export default {
this.active = 0 this.active = 0
this.buildScatterList() this.buildScatterList()
}, },
immediate: true immediate: true,
}, },
// 3D 图表 // 3D 图表
histogramDataDList: { histogramDataDList: {
handler(newVal) { handler(newVal) {
const maxCount = Math.max(...newVal.map(item => item.c)) const maxCount = Math.max(...newVal.map((item) => item.c))
this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2) this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据 this.threeDSurfaceOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D surface数据
this.threeDSurfaceOption.visualMap.max = maxCount this.threeDSurfaceOption.visualMap.max = maxCount
this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2) this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据 this.threeDScatterOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D scatter数据
this.threeDScatterOption.visualMap.max = maxCount this.threeDScatterOption.visualMap.max = maxCount
}, },
immediate: true immediate: true,
}, },
// 2D 图表 上的 矩形 // 2D 图表 上的 矩形
@ -585,16 +586,16 @@ export default {
this.boundaryData = newVal this.boundaryData = newVal
this.reDrawRect() this.reDrawRect()
}, },
immediate: true immediate: true,
}, },
currCount: { currCount: {
handler() { handler() {
this.buildScatterList() this.buildScatterList()
}, },
immediate: true immediate: true,
} },
} },
} }
</script> </script>