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

refactor: 重构Color Config和Interactive获取和处理数据的方式，修改监听keydown事件的元素为局部元素

Browse Source
This commit is contained in:
Xu Zhimeng 2023-10-31 15:44:26 +08:00
parent 90d90da2eb
commit 3ba00dc3c7
6 changed files with 17060 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/utils/sampleHelper.js
View File

@ -18,3 +18,40 @@ export const transformPointListData = pointlist => {
}
return pointlist.map(({ x, y }) => [x, y])
}
// 查找最近的峰(C++相关)
export const findNearPeak = (channel, peakList) => {
let t_bFind = false, // 是否在峰内
i = 0,
peakNum = peakList.length
for (; i < peakNum; ++i) {
const peak = peakList[i]
if (channel >= peak.left && channel <= peak.right) {
// 如果 channel 在峰的左右边界内
if (peak.multiIndex > 0 && channel > peak.peakCentroid) {
// 如果是重峰，且 channel 在重峰的第一个峰的中心道右侧
let j = i
let temp = channel - peak.peakCentroid
while (++j < peakNum && peakList[j].multiIndex == peak.multiIndex) {
if (Math.abs(peakList[j].peakCentroid - channel) < temp) {
// 找出重峰中峰中心道离 channel 最近的峰
temp = Math.abs(peakList[j].peakCentroid - channel)
i = j
}
}
}
// channel 在索引(i)对应的峰内
t_bFind = true
break
} else if (peak.left > channel) {
// channel 不在任何峰内，找离它最近的峰
if (i > 0 && channel - peakList[i - 1].peakCentroid < peak.peakCentroid - channel) i -= 1
break
}
}
if (i >= peakNum) i -= 1
return {
index: i,
find: t_bFind
}
}

16890
src/views/spectrumAnalysis/baseCtrlJson.json Normal file
View File

File diff suppressed because it is too large Load Diff

111
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
View File

@ -216,7 +216,7 @@ import Response from './Response.json'
import { updateBaseLine } from '@/utils/WasmHelper'
import RectList from './components/RectList.vue'
import { isNullOrUndefined } from '@/utils/util'
import { getLineData, transformPointListData } from '@/utils/sampleHelper'
import { findNearPeak, getLineData, transformPointListData } from '@/utils/sampleHelper'
// 初始配置
const initialOption = {
@ -433,6 +433,12 @@ export default {
EditSlopeModal,
RectList,
},
props: {
colorConfig: {
type: Object,
default: () => ({}),
},
},
data() {
this.columns = columns
return {
@ -450,7 +456,6 @@ export default {
list: [],
BaseCtrls: {},
baseCtrls_Copy: {},
FitBaseLine: '#fff',
sampleId: -1,
peakCommentModalVisible: false, // Comment 弹窗是否显示
@ -502,7 +507,7 @@ export default {
const currSampleDetailInfo = await this.$store.dispatch('GET_SAMPLE_DATA', inputFileName)
const {
data: { allData, shadowChannelChart, shapeChannelData, peak },
data: { allData, shadowChannelChart, shapeChannelData, peak, BaseCtrls },
} = currSampleDetailInfo
const channelBaseLine = getLineData(allData, 'BaseLine', 'channel')
@ -515,8 +520,7 @@ export default {
this.channelCountChart = shadowChannelChart
this.channelPeakChart = channelPeakGroup
this.energy = allEnergy
// this.BaseCtrls = BaseCtrls
// this.FitBaseLine = FitBaseLine
this.BaseCtrls = BaseCtrls
this.barChart = shadowChannelChart
this.setChartOption(channelBaseLine, shadowChannelChart, channelPeakGroup, shapeChannelData, shadowChannelChart)
@ -566,36 +570,15 @@ export default {
const { offsetX, offsetY } = param
const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
if (point) {
const xAxis = parseInt(point[0].toFixed())
this.option.series[0].markLine.data[0].xAxis = xAxis
const xAxis = Math.round(point[0])
this.setMarkLineXAxis(xAxis)
this.currChannel = xAxis
// 获取每一段 Channel 中的最大值
const maxXAxises = this.getPeakMaxValues()
let index = 0
// 计算当前选中的xAxis跟哪条 peak的最大值 最近
if (xAxis >= maxXAxises[maxXAxises.length - 1]) {
index = maxXAxises.length - 1
} else if (xAxis <= maxXAxises[0]) {
index = 0
} else {
for (let i = 1; i < maxXAxises.length; i++) {
const prev = maxXAxises[i - 1]
const curr = maxXAxises[i]
if (xAxis >= prev && xAxis <= curr) {
index = xAxis - prev < curr - xAxis ? i - 1 : i
break
}
continue
}
}
const { index } = findNearPeak(xAxis, this.list)
if (this.list.length) {
const selectedRow = this.list[index]
this.selectedKeys = [selectedRow.index]
this.selectTableRow(selectedRow.index)
this.getSelPosNuclide(selectedRow)
this.selectedTableItem = selectedRow
}
@ -645,34 +628,43 @@ export default {
// 切换图表上的红色竖线及表格选中
handleChangeMarkLine(direction) {
const markLineOption = this.option.series[0].markLine.data[0]
const prevAxis = markLineOption.xAxis
// 获取每一段 Channel 中的最大值
const maxXAxises = this.getPeakMaxValues()
const prevAxis = this.getMarkLineXAxis()
let i,
size = this.list.length
if (direction == 'next') {
// 找到第一个比prevAxis大的xAxis
const find = maxXAxises.find((xAxis) => xAxis > prevAxis)
if (find) {
markLineOption.xAxis = find
for (i = 0; i < size; i++) {
const centroid = Math.round(this.list[i].peakCentroid)
if (centroid > prevAxis) {
this.setMarkLineXAxis(centroid)
const selectedRow = this.list[i]
this.selectedTableItem = selectedRow
this.selectTableRow(selectedRow.index)
this.getSelPosNuclide(selectedRow)
return
}
}
} else if (direction == 'prev') {
// 找到第一个比prevAxis小的xAxis
const find = cloneDeep(maxXAxises)
.reverse()
.find((xAxis) => xAxis < prevAxis)
if (find) {
markLineOption.xAxis = find
for (i = size - 1; i >= 0; i--) {
if (Math.round(this.list[i].peakCentroid) < prevAxis) {
this.setMarkLineXAxis(Math.round(this.list[i].peakCentroid))
const selectedRow = this.list[i]
this.selectedTableItem = selectedRow
this.selectTableRow(selectedRow.index)
this.getSelPosNuclide(selectedRow)
return
}
}
}
},
const xAxis = markLineOption.xAxis
if (xAxis >= 0) {
const index = maxXAxises.findIndex((item) => item == xAxis)
if (index !== -1) {
this.selectedKeys = [this.list[index].index]
}
}
selectTableRow(key) {
this.selectedKeys = [key]
},
// 设置红色标记线的位置
setMarkLineXAxis(xAxis) {
const markLineOption = this.option.series[0].markLine.data[0]
markLineOption.xAxis = xAxis
const { xAxis: chartXAxisOption } = this.option
const { max, min } = chartXAxisOption
@ -688,6 +680,11 @@ export default {
}
},
getMarkLineXAxis() {
const markLineOption = this.option.series[0].markLine.data[0]
return markLineOption.xAxis
},
// 获取右下角possible nuclide 和 identified nuclide
async getSelPosNuclide(row) {
this.model.possibleNuclide = ''
@ -699,7 +696,7 @@ export default {
const { sampleId, inputFileName: fileName } = this.sampleData
const { success, result, message } = await getAction('/gamma/getSelPosNuclide', {
sampleId,
channel: parseInt(row.peakCentroid),
channel: Math.round(row.peakCentroid),
fileName,
})
if (success) {
@ -864,6 +861,7 @@ export default {
shadowEnergyChart,
shapeChannelData,
shapeEnergyData,
peak: table,
})
this.channelPeakChart = channelPeakChart
@ -881,7 +879,10 @@ export default {
series.push(this.buildCtrlPoint(this.channelBaseCPChart))
this.list = table
this.opts.notMerge = true
this.option.series = series
this.resetChartOpts()
this.selectedKeys = []
} else {
@ -917,7 +918,7 @@ export default {
return
}
const channel = row.peakCentroid
const channel = Math.round(row.peakCentroid)
this.currChannel = channel
this.option.series[0].markLine.data[0].xAxis = channel
@ -1041,7 +1042,7 @@ export default {
const baseLineEditSeries = buildLineSeries(
'BaseLine_Edit',
this.baseCtrls_Copy.baseline.map((val, index) => [index + 1, val]),
this.FitBaseLine,
this.colorConfig.Color_Fitbase || '#fff',
{
zlevel: 21,
}

78
src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
View File

@ -24,53 +24,59 @@ const configList = [
{
title: 'Spectrum Line',
key: 'Color_Spec',
desc: 'Color of the original spectrum line'
desc: 'Color of the original spectrum line',
},
{
title: 'Baseline',
key: 'Color_Base',
desc: 'Color of baseline'
desc: 'Color of baseline',
},
{
title: 'Lc Line',
key: 'Color_Lc',
desc: 'Color of lc line'
desc: 'Color of lc line',
},
{
title: 'Scac Line',
key: 'Color_Scac',
desc: 'Color of scac line'
desc: 'Color of scac line',
},
{
title: 'Peak Line',
key: 'Color_Peak',
desc: "Color of all peaks' curve"
desc: "Color of all peaks' curve",
},
{
title: 'Compare Line',
key: 'Color_Compare',
desc: 'Color of another spectrum line which is used to compare with current spectrum'
desc: 'Color of another spectrum line which is used to compare with current spectrum',
},
{
title: 'Spec Sum Line',
key: 'Color_Strip',
desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio'
desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio',
},
{
title: 'Spec Cut Line',
key: 'spectCutLine',
desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio'
desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio',
},
{
title: 'FitBase Line',
key: 'Color_Fitbase',
desc: 'Color of the base line in edit state'
}
desc: 'Color of the base line in edit state',
},
]
export default {
mixins: [ModalMixin],
components: {
ColorPicker
ColorPicker,
},
props: {
colorConfig: {
type: Object,
default: () => ({}),
},
},
data() {
this.configList = configList
@ -84,8 +90,8 @@ export default {
Color_Compare: 'green', // Sample -> Compare下的颜色
Color_Strip: 'rgb(0, 0, 255)', // Sample -> Compare下的颜色
spectCutLine: 'rgb(33, 90, 104)', // 无作用
Color_Fitbase: 'white' // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
}
Color_Fitbase: 'white', // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
},
}
},
methods: {
@ -93,40 +99,16 @@ export default {
return color
},
async getData() {
try {
this.isLoading = true
const { success, result, message } = await getAction('/gamma/viewColorConfig')
if (success) {
Object.entries(result).forEach(([k, v]) => {
beforeModalOpen() {
Object.entries(this.colorConfig).forEach(([k, v]) => {
this.config[k] = v
})
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
} finally {
this.isLoading = false
}
},
beforeModalOpen() {
this.getData()
},
// 应用颜色
async handleApply() {
const {
Color_Spec,
Color_Peak,
Color_Lc,
Color_Base,
Color_Scac,
Color_Compare,
Color_Strip,
Color_Fitbase
} = this.config
const { Color_Spec, Color_Peak, Color_Lc, Color_Base, Color_Scac, Color_Compare, Color_Strip, Color_Fitbase } =
this.config
const { success, message } = await putAction('/gamma/updateColorConfig', {
colorSpec: Color_Spec,
colorPeak: Color_Peak,
@ -135,22 +117,16 @@ export default {
colorScac: Color_Scac,
colorCompare: Color_Compare,
colorFitbase: Color_Fitbase,
colorStrip: Color_Strip
colorStrip: Color_Strip,
})
if (success) {
this.$bus.$emit(
'colorChange',
Object.entries(this.config).reduce((prev, [key, value]) => {
prev[key] = value
return prev
}, {})
)
this.$emit('colorChange', this.config)
} else {
this.$message.error(message)
throw new Error(message)
}
}
}
},
},
}
</script>

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

@ -42,7 +42,7 @@
<!-- 二级交互栏结束 -->
<!-- 主体部分 -->
<div class="gamma-analysis-main">
<div class="gamma-analysis-chart">
<div class="gamma-analysis-chart" ref="chartContainerRef" tabindex="0" @keydown="handleKeyboardEvent">
<CustomChart
ref="chartRef"
:option="option"
@ -140,6 +140,8 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
import StripModal from './components/Modals/StripModal.vue'
import { FilePicker } from '@/utils/FilePicker'
import { zipFile } from '@/utils/file'
import { findNearPeak } from '@/utils/sampleHelper'
import baseCtrlJson from './baseCtrlJson.json'
export default {
props: {
@ -232,20 +234,14 @@ export default {
this.setChartBottomTitle(0, 0, 0)
this.option.tooltip.formatter = this.tooltipFormatter
this.$bus.$on('colorChange', this.handleColorChange)
this.$bus.$on('gammaRefresh', this.handleRefresh)
this.$bus.$on('accept', this.handleAccept)
document.addEventListener('keydown', this.handleKeyboardEvent)
},
destroyed() {
this.cancelLastRequest()
this.$bus.$off('colorChange', this.handleColorChange)
this.$bus.$off('gammaRefresh', this.handleRefresh)
this.$bus.$off('accept', this.handleAccept)
document.removeEventListener('keydown', this.handleKeyboardEvent)
},
mounted() {
this.option.brush = { toolbox: [] }
@ -534,7 +530,7 @@ export default {
this.$store.commit('ADD_SAMPLE_DATA', {
inputFileName,
data: result,
data: Object.assign(result, { BaseCtrls: baseCtrlJson }),
from: flag,
})
@ -867,6 +863,7 @@ export default {
// 点击图表，设置红线
handleChartClick(param) {
this.$refs.chartContainerRef.focus()
const { offsetX, offsetY } = param
const point = getXAxisAndYAxisByPosition(this.getChart(), offsetX, offsetY)
if (point) {
@ -883,50 +880,13 @@ export default {
// 设置图表底部的标题
setChartBottomTitle(channel, energy, counts) {
const { index, find } = this.findNearPeak(channel)
const { index, find } = findNearPeak(channel, this.peakList)
this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy || '0.00'}} {a|Counts:${
counts || '0.0'
}} {a|Significance:${find ? this.peakList[index].significance.toFixed(2) : '0.00'}}`
},
// 查找最近的峰(C++相关)
findNearPeak(channel) {
let t_bFind = false,
i = 0,
peakNum = this.peakList.length
for (; i < peakNum; ++i) {
const peak = this.peakList[i]
if (channel >= peak.left && channel <= peak.right) {
// 如果 channel 在峰的左右边界内
if (peak.multiIndex > 0 && channel > peak.peakCentroid) {
// 如果是重峰，且 channel 在重峰的第一个峰的中心道右侧
let j = i
let temp = channel - peak.peakCentroid
while (++j < peakNum && this.peakList[j].multiIndex == peak.multiIndex) {
if (Math.abs(this.peakList[j].peakCentroid - channel) < temp) {
// 找出重峰中峰中心道离 channel 最近的峰
temp = Math.abs(this.peakList[j].peakCentroid - channel)
i = j
}
}
}
// channel 在索引(i)对应的峰内
t_bFind = true
break
} else if (peak.left > channel) {
// channel 不在任何峰内，找离它最近的峰
if (i > 0 && channel - this.peakList[i - 1].peakCentroid < peak.peakCentroid - channel) i -= 1
break
}
}
if (i >= peakNum) i -= 1
return {
index: i,
find: t_bFind,
}
},
// 根据xAixs值找channel、energy和counts
getEnergyAndCountsByXAxis(xAxis) {
let channel, energy, counts
@ -1341,7 +1301,9 @@ export default {
// 从分析工具刷新部分数据
handleRefresh(data) {
console.log('%c [ data ]-1304', 'font-size:13px; background:pink; color:#bf2c9f;', data)
data.DetailedInformation = this.detailedInfomation
data.QCFlag = this.qcFlags
this.clearCompareLine()
this.redrawPeakLine()
this.dataProcess(data)
@ -1349,36 +1311,29 @@ export default {
// 分析工具Accept时刷新部分数据
handleAccept(data) {
console.log('%c [ data ]-1166', 'font-size:13px; background:pink; color:#bf2c9f;', data)
const {
allData,
barChart,
channelBaseLineChart,
peakSet,
shadowChannelChart,
shadowEnergyChart,
shapeChannelData,
shapeData,
shapeEnergyData,
} = data
const result = {
DetailedInformation: this.detailedInfomation,
QCFlag: this.qcFlags,
allData,
shadowChannelChart,
shadowEnergyChart,
shapeChannelData,
shapeEnergyData,
peak: peakSet,
}
this.clearCompareLine()
this.channelData.peakGroup = this.getLineData(allData, 'Peak', 'channel', true)
this.energyData.peakGroup = this.getLineData(allData, 'Peak', 'energy', true)
this.redrawPeakLine()
this.channelData.baseLine = this.getLineData(allData, 'BaseLine', 'channel')
this.energyData.baseLine = this.getLineData(allData, 'BaseLine', 'energy')
this.redrawLineBySeriesName(
'BaseLine',
this.energyData.baseLine,
this.channelData.baseLine,
this.graphAssistance.Baseline
)
this.channelData.baseLineCP = shapeChannelData
this.energyData.baseLineCP = shapeEnergyData
this.redrawCtrlPointBySeriesName()
this.dataProcess(result)
},
// 显示比较弹窗

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

@ -91,7 +91,11 @@
<!-- 分析-设置弹窗结束 -->
<!-- 分析工具弹窗开始 -->
<analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" :sampleId="sampleData.sampleId" />
<analyze-interactive-tool-modal
v-model="analyzeInteractiveToolModalVisible"
:sampleId="sampleData.sampleId"
:colorConfig="colorConfig"
/>
<!-- 分析工具弹窗结束 -->
<!-- Korsum 弹窗开始 -->
@ -119,7 +123,7 @@
<!-- SpectrumComments 弹窗结束 -->
<!-- Color Config 弹窗开始 -->
<color-config-modal v-model="colorConfigModalVisible" />
<color-config-modal v-model="colorConfigModalVisible" :colorConfig="colorConfig" @colorChange="handleColorChange" />
<!-- Color Config 弹窗结束 -->
<!-- Data Processing Log 弹窗开始 -->
@ -397,6 +401,8 @@ export default {
isReAnalyed_beta: false,
isSaving: false,
colorConfig: {}, // 颜色配置
}
},
created() {
@ -407,6 +413,7 @@ export default {
// dbName: 'auto',
// inputFileName: 'CAX05_001-20230731_1528_S_FULL_37563.6.PHD',
// })
this.getColorConfig()
},
destroyed() {
@ -764,6 +771,26 @@ export default {
}
}
},
// 获取颜色配置
async getColorConfig() {
try {
const { success, result, message } = await getAction('/gamma/viewColorConfig')
if (success) {
this.colorConfig = result
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
// 颜色修改
handleColorChange(colorConfig) {
this.colorConfig = colorConfig
this.$refs.gammaAnalysisRef.handleColorChange(colorConfig)
},
},
computed: {
// 顶部菜单栏配置