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

fix: 完成AnalyzeInteractiveTool弹窗中的部分操作，修改刷选操作以解决Log10下选框表现不正确的问题，对接Comments下的View中的接口，对接Energy Calibration接口

Browse Source
This commit is contained in:
Xu Zhimeng 2023-08-28 19:52:35 +08:00
parent 75db97b2e8
commit 0b3258f723
13 changed files with 214098 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,10 @@ export default {
type: Object,
default: () => ({})
},
opts: {
type: Object,
default: () => {}
},
height: {
type: Number,
default: 0
@ -23,7 +27,7 @@ export default {
},
mounted() {
this._chart = echarts.init(this.$refs.containerRef)
this._chart.setOption(this.option)
this._chart.setOption(this.option, this.opts)
this.initEventListener()
},
destroyed() {
@ -64,7 +68,7 @@ export default {
option: {
handler() {
if (this._chart) {
this._chart.setOption(this.option)
this._chart.setOption(this.option, this.opts)
}
},
deep: true

12
src/components/CustomChart/index.vue
View File

@ -13,9 +13,9 @@ export default {
type: Object,
default: () => ({})
},
notMerge: {
type: Boolean,
default: false
opts: {
type: Object,
default: () => {}
},
height: {
type: Number,
@ -27,7 +27,7 @@ export default {
},
mounted() {
this._chart = echarts.init(this.$refs.containerRef)
this._chart.setOption(this.option)
this._chart.setOption(this.option, this.opts)
this.initEventListener()
},
destroyed() {
@ -68,9 +68,7 @@ export default {
option: {
handler() {
if (this._chart) {
this._chart.setOption(this.option, {
notMerge: this.notMerge
})
this._chart.setOption(this.option, this.opts)
}
},
deep: true

19
src/components/CustomTable/index.vue
View File

@ -53,6 +53,10 @@ export default {
type: Boolean,
default: true
},
canDeselect: {
type: Boolean,
default: true
},
multiple: {
type: Boolean,
default: false
@ -66,7 +70,7 @@ export default {
},
methods: {
// 实现单击选中/反选功能
customRow(record) {
customRow(record, index) {
const key = record[this.rowKey]
return {
class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
@ -75,10 +79,15 @@ export default {
if(!this.canSelect) {
return
}
// 反选
if (this.innerSelectedRowKeys.includes(key)) {
const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
this.innerSelectedRowKeys.splice(findIndex, 1)
} else {
if(this.multiple || this.canDeselect) {
const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
this.innerSelectedRowKeys.splice(findIndex, 1)
}
}
// 选中
else {
if(this.multiple) {
this.innerSelectedRowKeys.push(key)
}
@ -86,6 +95,8 @@ export default {
this.innerSelectedRowKeys = [key]
}
}
this.$emit('rowClick', record, index)
}
}
}

213294
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/Response.json Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,119 +1,133 @@
<template>
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
<div class="interactive-analysis-tools">
<div class="interactive-analysis-tools-left">
<div class="chart">
<custom-chart :option="option" />
</div>
<div class="thumbnail"></div>
<div class="table">
<p class="title">
<span @click="handleChangeMarkLine('prev')">&lt; </span>
6 Peaks with Anthro.Nuclides
<span @click="handleChangeMarkLine('next')">&gt;</span>
</p>
<custom-table
:class="list.length ? 'has-data' : ''"
:list="list"
:columns="columns"
:scroll="{ y: 288 }"
:selectedRowKeys.sync="selectedKeys"
>
</custom-table>
<div class="operators">
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
<a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
<a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
<a-spin :spinning="isLoading">
<div class="interactive-analysis-tools">
<div class="interactive-analysis-tools-left">
<div class="chart">
<CustomChart ref="chartRef" :option="option" :opts="opts" @zr:click="handleChartClick" />
</div>
</div>
</div>
<div class="interactive-analysis-tools-right">
<title-over-border title="Peak">
<div class="peak-box">
<!-- 按钮组1 -->
<template v-if="btnGroupType == 1">
<div class="peak-box-item">
<a-button type="primary">Insert</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Delete</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Fit</a-button>
</div>
<div class="peak-box-item symbol" :key="4">
<a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
<a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
</div>
<div class="peak-box-item base-line">
<a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
</div>
</template>
<!-- 按钮组2 -->
<template v-if="btnGroupType == 2">
<div class="peak-box-item">
<a-button type="primary">(A)dd CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">(R)emove CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">(M)odify CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Edit (S)lope</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Undo</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Replot</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
</div>
</template>
<!-- 缩略图 -->
<div class="thumbnail">
<CustomChart :option="thumbnailOption" />
</div>
</title-over-border>
<div class="reset-btn-box">
<a-button type="primary">Reset Chart</a-button>
<!-- 缩略图结束 -->
<!-- 表格 -->
<div class="table">
<p class="title">
<span @click="handleChangeMarkLine('prev')">&lt; </span>
6 Peaks with Anthro.Nuclides
<span @click="handleChangeMarkLine('next')">&gt;</span>
</p>
<custom-table
:class="list.length ? 'has-data' : ''"
:list="list"
:columns="columns"
:scroll="{ y: 288 }"
:selectedRowKeys.sync="selectedKeys"
rowKey="index"
:canDeselect="false"
@rowClick="handleTableRowClick"
>
</custom-table>
<div class="operators">
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
<a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
<a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
</div>
</div>
<!-- 表格结束 -->
</div>
<div class="identify-box">
<title-over-border title="Nuclide Identify">
<a-form-model class="tolerance">
<a-form-model-item label="Tolerance">
<a-input-number></a-input-number>
</a-form-model-item>
</a-form-model>
<div class="identify-item">
<div class="title">
Possible Nuclide
</div>
<div class="content"></div>
</div>
<div class="identify-item">
<div class="title">
Nuclide Identified
</div>
<div class="content"></div>
</div>
<div class="identify-operators">
<a-space>
<a-input></a-input>
<a-button type="primary">Add</a-button>
<a-button type="primary" @click="handleDel">Del</a-button>
</a-space>
<!-- 右侧 -->
<div class="interactive-analysis-tools-right">
<title-over-border title="Peak">
<div class="peak-box">
<!-- 按钮组1 -->
<template v-if="btnGroupType == 1">
<div class="peak-box-item">
<a-button type="primary">Insert</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleDel">Delete</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Fit</a-button>
</div>
<div class="peak-box-item symbol" :key="4">
<a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
<a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
</div>
<div class="peak-box-item base-line">
<a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
</div>
</template>
<!-- 按钮组2 -->
<template v-if="btnGroupType == 2">
<div class="peak-box-item">
<a-button type="primary">(A)dd CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">(R)emove CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">(M)odify CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Edit (S)lope</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Undo</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary">Replot</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
</div>
</template>
</div>
</title-over-border>
<div class="reset-btn-box">
<a-button type="primary">Reset Chart</a-button>
</div>
<div class="identify-box">
<title-over-border title="Nuclide Identify">
<a-form-model class="tolerance">
<a-form-model-item label="Tolerance">
<a-input-number></a-input-number>
</a-form-model-item>
</a-form-model>
<div class="identify-item">
<div class="title">
Possible Nuclide
</div>
<div class="content"></div>
</div>
<div class="identify-item">
<div class="title">
Nuclide Identified
</div>
<div class="content"></div>
</div>
<div class="identify-operators">
<a-space>
<a-input></a-input>
<a-button type="primary">Add</a-button>
<a-button type="primary">Del</a-button>
</a-space>
</div>
</title-over-border>
</div>
</div>
<!-- 右侧结束 -->
</div>
</div>
</a-spin>
<!-- Comment弹窗 开始 -->
<comment-modal v-model="commentModalVisible" :type="commentType" />
<!-- Comment弹窗 结束 -->
@ -134,91 +148,110 @@ import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
import NuclideReviewModal from './components/NuclideReviewModal.vue'
import ModalMixin from '@/mixins/ModalMixin'
import { getAction } from '@/api/manage'
import { cloneDeep } from 'lodash'
import Response from './Response.json'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
// 初始配置
const initialOption = {
grid: {
top: 20,
bottom: 20,
left: 100,
right: 20
top: 40,
left: 60,
right: 50,
containLabel: true
},
xAxis: {
min: 1,
max: 8192,
interval: 1143,
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
min: 1,
max: 994914,
axisLabel: {
color: '#fff'
},
name: 'Counts',
nameLocation: 'center',
nameGap: 60,
nameTextStyle: {
fontSize: 16,
color: '#5b9cba'
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
type: 'line',
data: [],
itemStyle: {
color: '#FCFE02'
},
markLine: {
data: [
{
xAxis: 1000
}
],
symbol: 'none',
lineStyle: {
color: '#f00'
},
label: {
show: false
title: {
text: '',
left: 'center',
bottom: 10,
textStyle: {
color: '#8FD4F8',
rich: {
a: {
padding: [0, 20, 0, 0],
fontSize: 16
}
}
},
{
type: 'line',
data: [],
itemStyle: {
color: '#F87E28'
}
},
{
type: 'line',
data: [],
itemStyle: {
color: '#01F6FE'
}
}
]
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#3CAEBB',
width: 1
}
},
formatter: params => {
const [channel] = params[0].value
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${(0).toFixed(2)}</div>`
},
className: 'figure-chart-option-tooltip'
},
xAxis: {
name: 'Channel',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16,
align: 'right',
verticalAlign: 'top',
padding: [30, 0, 0, 0]
},
axisLine: {
lineStyle: {
color: '#ade6ee'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#ade6ee'
}
},
min: 1,
max: 'dataMax',
animation: false
},
yAxis: {
name: 'Counts',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16
},
axisLine: {
show: true,
lineStyle: {
color: '#ade6ee'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(173, 230, 238, .2)'
}
},
axisLabel: {
textStyle: {
color: '#ade6ee'
}
},
min: 1,
max: 'dataMax',
animation: false
},
series: [],
brush: {}
}
const columns = [
{
title: 'ID',
dataIndex: 'id',
customRender: (_, __, index) => {
return index + 1
},
width: 60
},
{
@ -258,6 +291,43 @@ const columns = [
}
]
// 缩略图配置
const thumbnailOption = {
grid: {
top: 0,
left: 5,
right: 5,
bottom: 0
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min: 1,
max: 'dataMax'
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min: 1
},
series: []
}
export default {
mixins: [ModalMixin],
components: {
@ -269,15 +339,19 @@ export default {
},
props: {
sampleId: {
type: Number,
required: true
type: Number
}
},
data() {
this.columns = columns
return {
option: initialOption,
option: cloneDeep(initialOption),
opts: { notMerge: false },
thumbnailOption: cloneDeep(thumbnailOption),
isLoading: false,
list: [],
commentModalVisible: false, // Comment 弹窗是否显示
commentType: 'Peak',
@ -292,11 +366,104 @@ export default {
methods: {
async getInfo() {
try {
this.isLoading = true
this.option.series = []
const { success, result, message } = await getAction('/gamma/InteractiveTool', {
sampleId: this.sampleId
})
if (success) {
console.log('%c [ ]-300', 'font-size:13px; background:pink; color:#bf2c9f;', result)
const {
barChart,
channelBaseCPChart,
channelBaseLineChart,
channelCountChart,
channelPeakChart,
table
} = result
this.isLoading = false
console.log('%c [ ]-374', 'font-size:13px; background:pink; color:#bf2c9f;', result)
this.channelPeakChart = channelPeakChart
const series = []
// 推入BaseLine
series.push({
...this.buildSeriesOption(
'BaseLine',
channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
`rgb(${channelBaseLineChart.color})`
),
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
})
// 推入Count
series.push(
this.buildSeriesOption(
'CountChart',
channelCountChart.pointlist.map(({ x, y }) => [x, y]),
`rgb(${channelCountChart.color})`
)
)
// 推入Peak
const peakSeries = []
channelPeakChart.forEach((item, index) => {
peakSeries.push(
this.buildSeriesOption(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
`rgb(${item.color})`
)
)
})
series.push(...peakSeries)
// 推入基线控制点
series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
itemStyle: {
color: 'transparent',
borderColor: color,
borderWidth: size / 2
}
}
}),
emphasis: {
disabled: true
},
animation: false,
zlevel: 20
})
this.thumbnailOption.series.push(
this.buildSeriesOption(
'BarChart',
barChart.map(({ x, y }) => [x, y])
)
)
this.list = table
this.option.series = series
} else {
this.$message.error(message)
}
@ -305,28 +472,118 @@ export default {
}
},
beforeModalOpen() {
this.getInfo()
// 构建series
buildSeriesOption(name, data, color, extra = {}) {
return {
name,
type: 'line',
data,
itemStyle: {
color
},
lineStyle: {
width: 1
},
symbol: 'none',
symbolSize: 1,
emphasis: {
disabled: true
},
animation: false,
...extra
}
},
// 切换图表上的红色竖线
handleChangeMarkLine(direction) {
if (direction == 'prev') {
this.option.series[0].markLine.data[0].xAxis = 900
} else if (direction == 'next') {
this.option.series[0].markLine.data[0].xAxis = 1100
}
this.list = new Array(20).fill(0).map((_, index) => ({
id: index.toString(),
energy: 'energy',
centroid: 'centroid',
fwhm: 'fwhm',
area: 'area',
detectability: 'detectability',
cmnt: 'cmnt',
nuclides: 'nuclides'
}))
beforeModalOpen() {
this.getInfo()
this.opts.notMerge = false
this.$nextTick(() => {
this.option.brush = { toolbox: [] }
this.selectedKeys = []
})
},
// 点击图表，设置红线，改变表格的选中项
handleChartClick(param) {
console.log('%c [ param ]-510', 'font-size:13px; background:pink; color:#bf2c9f;', param)
const { offsetX, offsetY } = param
const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
if (point) {
const xAxis = parseInt(point[0].toFixed())
console.log('%c [ xAxis ]-515', 'font-size:13px; background:pink; color:#bf2c9f;', xAxis)
this.option.series[0].markLine.data[0].xAxis = xAxis
// 获取每一段 Channel 中的最大值
const maxXAxises = this.getPeakMaxValues()
console.log('%c [ maxXAxises ]-519', 'font-size:13px; background:pink; color:#bf2c9f;', maxXAxises)
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]
console.log('%c [ ]-533', 'font-size:13px; background:pink; color:#bf2c9f;', prev, curr)
if (xAxis >= prev && xAxis <= curr) {
index = xAxis - prev < curr - xAxis ? i - 1 : i
break
}
continue
}
}
console.log('%c [ index ]-541', 'font-size:13px; background:pink; color:#bf2c9f;', index)
this.selectedKeys = [this.list[index].index]
}
},
// 切换图表上的红色竖线及表格选中
handleChangeMarkLine(direction) {
const markLineOption = this.option.series[0].markLine.data[0]
const prevAxis = markLineOption.xAxis
// 获取每一段 Channel 中的最大值
const maxXAxises = this.getPeakMaxValues()
if (direction == 'next') {
// 找到第一个比prevAxis大的xAxis
const find = maxXAxises.find(xAxis => xAxis > prevAxis)
if (find) {
markLineOption.xAxis = find
}
} else if (direction == 'prev') {
// 找到第一个比prevAxis小的xAxis
const find = cloneDeep(maxXAxises)
.reverse()
.find(xAxis => xAxis < prevAxis)
if (find) {
markLineOption.xAxis = find
}
}
const xAxis = markLineOption.xAxis
if (xAxis >= 0) {
const index = maxXAxises.findIndex(item => item == xAxis)
if (index !== -1) {
this.selectedKeys = [this.list[index].index]
}
}
},
// 获取每一段 Channel 中的最大值
getPeakMaxValues() {
const maxXAxises = this.channelPeakChart.map(item => {
const allY = item.pointlist.map(point => point.y)
const max = item.pointlist.find(point => point.y == Math.max(...allY))
return max.x
})
return maxXAxises
},
// 显示comment弹窗
handleAddComment(type) {
this.commentType = type
@ -336,7 +593,7 @@ export default {
// 删除
handleDel() {
if (!this.selectedKeys.length) {
this.$message.warn('Please Select At Least 1 Peak To Delete')
this.$message.warn('No peak to delete.')
return
}
@ -344,7 +601,46 @@ export default {
title: 'Warning',
content: 'Are you sure to delete this peak?',
onOk: () => {
console.log('%c [ ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
const [willDelKey] = this.selectedKeys
const findIndex = this.list.findIndex(item => item.index == willDelKey)
this.list.splice(findIndex, 1)
this.selectedKeys = []
const seriesIndex = this.option.series.findIndex(item => {
return item.name == 'Peak_' + willDelKey
})
this.opts.notMerge = true
this.option.series.splice(seriesIndex, 1)
this.channelPeakChart.splice(findIndex, 1)
this.$nextTick(() => {
this.opts.notMerge = false
this.option.brush = { toolbox: [] }
})
}
})
},
// 表格的行点击
handleTableRowClick(_, index) {
const pointlist = this.channelPeakChart[index].pointlist
const allY = pointlist.map(point => point.y)
const findMax = pointlist.find(point => point.y == Math.max(...allY))
this.option.series[0].markLine.data[0].xAxis = findMax.x
},
// 鼠标按下时开启可刷选状态
handleMouseDown() {
const chart = this.$refs.chartRef.getChartInstance()
chart.dispatchAction({
type: 'takeGlobalCursor',
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
key: 'brush',
brushOption: {
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
brushType: 'rect'
}
})
}
@ -377,6 +673,7 @@ export default {
font-size: 20px;
text-align: center;
margin-bottom: 10px;
user-select: none;
span {
cursor: pointer;

3
src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue
View File

@ -115,8 +115,7 @@ export default {
mixins: [ModalMixin],
props: {
sampleId: {
type: Number,
required: true
type: Number
}
},
data() {

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

@ -135,7 +135,7 @@
</title-over-border>
<!-- 右侧图表 -->
<div class="statistics-paramer-history-chart">
<custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
<custom-chart ref="chartRef" :option="option" :opts="{ notMerge: true }"></custom-chart>
</div>
</div>
</custom-modal>

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

@ -51,7 +51,7 @@
</title-over-border>
<!-- 右侧图表 -->
<div class="statistics-paramer-history-chart">
<custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
<custom-chart ref="chartRef" :option="option" :opts="{ notMerge: true }"></custom-chart>
</div>
</div>
</custom-modal>

224
src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
View File

@ -1,89 +1,90 @@
<template>
<custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null">
<div class="energy-calibration">
<div class="left">
<!-- Calibration Data -->
<title-over-border title="Calibration Data">
<div class="calibration-data">
<a-form-model
:colon="false"
:labelCol="{
style: {
width: '70px',
textAlign: 'left',
flexShrink: 0
}
}"
:wrapperCol="{
style: {
flex: 1
}
}"
>
<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-item :label="' '">
<a-button type="primary">Insert</a-button>
</a-form-model-item>
<a-form-model-item :label="' '">
<a-button type="primary">Modify</a-button>
</a-form-model-item>
<a-form-model-item :label="' '">
<a-button type="primary">Delete</a-button>
</a-form-model-item>
</a-form-model>
<!-- 表格 -->
<a-table
:columns="columns"
:dataSource="list"
:pagination="false"
:class="list.length ? 'has-data' : ''"
:scroll="{ y: 182 }"
></a-table>
<!-- 表格结束 -->
<div class="operators">
<div>
<a-button type="primary">Call</a-button>
<a-button type="primary">Save</a-button>
</div>
<div>
<a-button type="primary">Apply</a-button>
<a-spin :spinning="isLoading">
<div class="energy-calibration">
<div class="left">
<!-- Calibration Data -->
<title-over-border title="Calibration Data">
<div class="calibration-data">
<a-form-model
:colon="false"
:labelCol="{
style: {
width: '70px',
textAlign: 'left',
flexShrink: 0
}
}"
:wrapperCol="{
style: {
flex: 1
}
}"
>
<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-item :label="' '">
<a-button type="primary">Insert</a-button>
</a-form-model-item>
<a-form-model-item :label="' '">
<a-button type="primary">Modify</a-button>
</a-form-model-item>
<a-form-model-item :label="' '">
<a-button type="primary">Delete</a-button>
</a-form-model-item>
</a-form-model>
<!-- 表格 -->
<a-table
:columns="columns"
:dataSource="list"
:pagination="false"
:class="list.length ? 'has-data' : ''"
:scroll="{ y: 182 }"
></a-table>
<!-- 表格结束 -->
<div class="operators">
<div>
<a-button type="primary">Call</a-button>
<a-button type="primary">Save</a-button>
</div>
<div>
<a-button type="primary">Apply</a-button>
</div>
</div>
</div>
</div>
</title-over-border>
<!-- Equation -->
<title-over-border class="mt-20" title="Equation">
<div class="equation">
Energy = -0.056137 + C * 0.334493 + C<sup>2</sup> * 3.10365e - 08 + C<sup>3</sup> * -4.05186e - 12
</div>
</title-over-border>
<!-- curve -->
<title-over-border class="mt-20" title="curve">
<div class="curve">
<custom-chart :option="option" />
</div>
</title-over-border>
</div>
<div class="right">
<title-over-border title="Data Source" style="height: 100%">
<div class="data-source">
<div class="data-source-main">
<div class="title">PHD</div>
<div class="content"></div>
</title-over-border>
<!-- Equation -->
<title-over-border class="mt-20" title="Equation">
<div class="equation" v-html="equation"></div>
</title-over-border>
<!-- curve -->
<title-over-border class="mt-20" title="curve">
<div class="curve">
<custom-chart :option="option" />
</div>
<div class="footer mt-20">
<a-button type="primary">Set to Current</a-button>
<div class="mt-20">CallUpdate2</div>
</title-over-border>
</div>
<div class="right">
<title-over-border title="Data Source" style="height: 100%">
<div class="data-source">
<div class="content">
<div class="item" v-for="(item, index) in dataSourceList" :key="index">
{{ item }}
</div>
</div>
<div class="footer mt-20">
<a-button type="primary">Set to Current</a-button>
<div class="mt-20">CallUpdate2</div>
</div>
</div>
</div>
</title-over-border>
</title-over-border>
</div>
</div>
</div>
</a-spin>
</custom-modal>
</template>
@ -91,6 +92,8 @@
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBorder from '../TitleOverBorder.vue'
import CustomChart from '@/components/CustomChart/index.vue'
import { getAction } from '@/api/manage'
import { cloneDeep } from 'lodash'
const columns = [
{
@ -188,18 +191,46 @@ const initialOption = {
export default {
components: { TitleOverBorder, CustomChart },
mixins: [ModalMixin],
props: {
sampleId: {
type: Number
}
},
data() {
this.columns = columns
return {
list: [
{
energy: 'energy',
channel: 'channel',
fit: 'fit',
delta: 'delta'
isLoading: false,
equation: '',
dataSourceList: [],
list: [],
option: cloneDeep(initialOption)
}
},
methods: {
async getData() {
try {
this.isLoading = true
const { success, result, message } = await getAction('/gamma/energyCalibration', {
sampleId: this.sampleId
})
this.isLoading = false
if (success) {
console.log('%c [ ]-220', 'font-size:13px; background:pink; color:#bf2c9f;', result)
const { AllData, equation, list_dataSource, param, table, uncert } = result
this.dataSourceList = list_dataSource
this.equation = equation
this.list = table
} else {
this.$message.error(message)
}
],
option: initialOption
} catch (error) {
console.error(error)
}
},
beforeModalOpen() {
this.getData()
}
}
}
@ -281,7 +312,7 @@ export default {
}
.equation {
height: 32px;
height: 40px;
line-height: 32px;
text-align: center;
background-color: #1b5465;
@ -297,16 +328,17 @@ export default {
margin-left: 20px;
.data-source {
.title {
height: 32px;
line-height: 32px;
background-color: #296d81;
padding: 0 5px;
}
.content {
height: 300px;
height: 330px;
background-color: #275466;
overflow: auto;
.item {
height: 32px;
line-height: 32px;
background-color: #296d81;
padding: 0 5px;
}
}
.footer {

32
src/views/spectrumAnalysis/components/Modals/SpectrumCommentsModal.vue
View File

@ -1,10 +1,13 @@
<template>
<custom-modal v-model="visible" title="Spectrum Comments" :okHandler="handleOk" :footer="isAdd ? undefined : null">
<a-textarea v-model="comments" :rows="8" :disabled="!isAdd"></a-textarea>
<a-spin :spinning="isLoading">
<a-textarea v-model="comments" :rows="8" :disabled="!isAdd"></a-textarea>
</a-spin>
</custom-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import ModalMixin from '@/mixins/ModalMixin'
export default {
mixins: [ModalMixin],
@ -12,17 +15,42 @@ export default {
isAdd: {
type: Boolean,
default: true
},
sampleId: {
type: Number
}
},
data() {
return {
isLoading: false,
comments: ''
}
},
methods: {
// ModalMixin 中的生命周期方法
beforeModalOpen() {
this.comments = ''
if (this.isAdd) {
this.comments = ''
} else {
this.getInfo()
}
},
async getInfo() {
try {
this.isLoading = true
const { success, result, message } = await getAction('/gamma/viewComment', {
sampleId: this.sampleId
})
this.isLoading = false
if (success) {
this.comments = result
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
handleOk() {
console.log('%c [ ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', this.comments)

3
src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
View File

@ -123,8 +123,7 @@ export default {
mixins: [ModalMixin],
props: {
sampleId: {
type: Number,
required: true
type: Number
}
},
data() {

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

@ -43,7 +43,7 @@
@brushEnd="handleBrushEnd"
style="height: 100%"
/>
<!-- 右上角缩略图 -->
<div class="gamma-analysis-thumbnail">
<custom-3d-chart
ref="thumbnailChartRef"
@ -52,6 +52,7 @@
style="height: 100%"
/>
</div>
<!-- 缩略图结束 -->
</div>
</div>
<!-- 主体部分结束 -->
@ -70,6 +71,7 @@ import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon
import { getAction } from '@/api/manage'
import Response from './response.json'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
import { cloneDeep } from 'lodash'
// 初始配置
const initialOption = {
@ -97,8 +99,9 @@ const initialOption = {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#099D24',
width: 2
color: '#3CAEBB',
width: 1,
type: 'solid'
}
},
formatter: undefined,
@ -126,12 +129,18 @@ const initialOption = {
color: '#ade6ee'
}
},
min: 0,
min: 1,
max: 'dataMax',
animation: false
animation: false,
axisLabel: {
formatter: value => {
return parseInt(value)
}
}
},
yAxis: {
name: 'Counts',
type: 'value',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16
@ -153,9 +162,14 @@ const initialOption = {
color: '#ade6ee'
}
},
min: 0,
min: 1,
max: 'dataMax',
animation: false
animation: false,
axisLabel: {
formatter: (value) => {
return value.toFixed(1)
}
}
},
series: [],
brush: {}
@ -180,10 +194,11 @@ const thumbnailOption = {
axisLabel: {
show: false
},
min: 0,
min: 1,
max: 'dataMax'
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
@ -192,7 +207,9 @@ const thumbnailOption = {
},
axisLabel: {
show: false
}
},
min: 1,
max: 'dataMax',
},
series: []
}
@ -215,8 +232,8 @@ export default {
data() {
return {
isLoading: false,
option: initialOption,
thumbnailOption,
option: cloneDeep(initialOption),
thumbnailOption: cloneDeep(thumbnailOption),
detailedInfomation: [],
qcFlags: [],
@ -244,7 +261,6 @@ export default {
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
@ -310,6 +326,7 @@ export default {
this.shapeEnergyData = shapeEnergyData
this.option.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
this.thumbnailOption.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
// 推入Spectrum Line
this.option.series.push({
@ -335,7 +352,7 @@ export default {
},
lineStyle: {
color: 'red',
width: 2
width: 1
},
data: [{ xAxis: -1 }]
},
@ -368,7 +385,7 @@ export default {
lineStyle: {
type: 'solid',
color: '#1397a3',
width: 2
width: 1
},
data: []
}
@ -431,7 +448,7 @@ export default {
// 推入基线控制点
this.option.series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatterGL',
type: 'scatter',
data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
@ -445,7 +462,8 @@ export default {
emphasis: {
disabled: true
},
animation: false
animation: false,
zlevel: 20
})
// 推入Peak Line
@ -477,15 +495,15 @@ export default {
},
tooltipFormatter(params) {
if (this.graphAssistance.axisType == 'Energy') {
if (this.isEnergy()) {
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]
const channel = parseInt(params[0].value[0].toFixed())
const energy = this.allEnergy.pointlist[channel - 1]
return energy
? `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
@ -499,8 +517,14 @@ export default {
if (type == 'labelChange') {
switch (label) {
case 'Linear':
this.option.yAxis.type = 'value'
this.thumbnailOption.yAxis.type = 'value'
this.handleReset()
break
case 'Log10':
this.option.yAxis.type = 'log'
this.thumbnailOption.yAxis.type = 'log'
this.handleReset()
break
case 'Channel':
case 'Energy':
@ -574,7 +598,7 @@ export default {
redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
const series = this.findSeriesByName(seriesName)
if (isShow) {
const data = this.graphAssistance.axisType == 'Energy' ? energyData : channelData
const data = this.isEnergy() ? energyData : channelData
series.data = data.pointlist.map(({ x, y }) => [x, y])
} else {
series.data = []
@ -584,7 +608,7 @@ export default {
// 重绘控制点
redrawCtrlPointBySeriesName() {
const series = this.findSeriesByName('BaseLine_Ctrl_Point')
const data = this.graphAssistance.axisType == 'Energy' ? this.shapeEnergyData : this.shapeChannelData
const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData
series.data = data.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
@ -603,7 +627,7 @@ export default {
return -1 == item.name.indexOf('Peak_')
})
const data = this.graphAssistance.axisType == 'Energy' ? this.energyPeakGroup : this.channelPeakGroup
const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
const peakLines = []
data.forEach((item, index) => {
peakLines.push({
@ -627,7 +651,7 @@ export default {
// 重绘右上角的缩略图
redrawThumbnailChart() {
const series = this.thumbnailOption.series[0]
const data = this.graphAssistance.axisType == 'Energy' ? this.shadowEnergyChart : this.shadowChannelChart
const data = this.isEnergy() ? this.shadowEnergyChart : this.shadowChannelChart
series.data = data.pointlist.map(({ x, y }) => [x, y])
},
@ -636,8 +660,13 @@ export default {
const { offsetX, offsetY } = param
const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
if (point) {
const xAxis = parseInt(point[0].toFixed())
const xAxis = point[0]
this.option.series[0].markLine.data[0].xAxis = xAxis
const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
const energy = this.isEnergy() ? xAxis.toFixed(2) : this.allEnergy.pointlist[channel - 1].x.toFixed(2)
const counts = this.isEnergy() ? this.allEnergy.pointlist[channel - 1] : this.allChannel.pointlist[channel - 1]
this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts.y}} {a|Detectability:0}`
}
},
@ -725,12 +754,12 @@ export default {
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
const xAxisMax = chart.getModel().getComponent('xAxis').axis.scale._extent[1]
const yAxisMax = chart.getModel().getComponent('yAxis').axis.scale._extent[1]
const yAxisMax = this.option.yAxis.max
let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
const xAxisLimit = this.rangeNumber(0, xAxisMax)
const yAxisLimit = this.rangeNumber(0, yAxisMax)
const xAxisLimit = this.rangeNumber(1, xAxisMax)
const yAxisLimit = this.rangeNumber(1, yAxisMax)
x1 = xAxisLimit(x1)
x2 = xAxisLimit(x2)
@ -743,13 +772,19 @@ export default {
this.option.yAxis.min = y1
this.option.yAxis.max = y2
if (this.graphAssistance.axisType == 'Energy') {
if (this.isEnergy()) {
const channel1 = this.getChannelByEnergy(x1)
const channel2 = this.getChannelByEnergy(x2)
this.setThumbnailChartRect(channel1, y2, channel2, y1)
} else {
this.setThumbnailChartRect(x1, y2, x2, y1)
}
const thumbnailChart = this.$refs.thumbnailChartRef.getChartInstance()
const [, maxYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, y1]) // 方框的上下两条边的yAxis转为pix
const [, minYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, y2])
const rectHeightPixel = maxYPixel - minYPixel // 计算方框的左右边长(pix)
this.halfHeightPixel = rectHeightPixel / 2
}
this.clearBrush(chart)
@ -793,25 +828,31 @@ export default {
if (point && this.thumbnailChartRect && this.thumbnailChartRect.length) {
const [x1, y2, x2, y1] = this.thumbnailChartRect
const halfWidth = Math.ceil((x2 - x1) / 2)
const halfHeight = Math.ceil((y2 - y1) / 2)
const [, maxYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, this.thumbnailOption.yAxis.max]) // 缩略图最大值转为pix
const [, minYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, 1])
let [xAxis, yAxis] = point
xAxis = parseInt(xAxis)
yAxis = parseInt(yAxis)
const xAxisMax = thumbnailChart.getModel().getComponent('xAxis').axis.scale._extent[1]
const yAxisMax = thumbnailChart.getModel().getComponent('yAxis').axis.scale._extent[1]
const xAxisLimit = this.rangeNumber(halfWidth, xAxisMax - halfWidth)
const yAxisLimit = this.rangeNumber(halfHeight, yAxisMax - halfHeight)
const xAxisLimit = this.rangeNumber(1 + halfWidth, xAxisMax - halfWidth)
const halfHeightPixel = this.halfHeightPixel
const yAxisLimit = this.rangeNumber(maxYAxisPixel + halfHeightPixel, minYAxisPixel - halfHeightPixel)
xAxis = xAxisLimit(xAxis)
yAxis = yAxisLimit(yAxis)
this.setThumbnailChartRect(xAxis - halfWidth, yAxis + halfHeight, xAxis + halfWidth, yAxis - halfHeight)
let [,yAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, yAxis])
yAxisPixel = yAxisLimit(yAxisPixel)
if (this.graphAssistance.axisType == 'Energy') {
const minYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel + halfHeightPixel])[1] // 再把y轴最小值从pix转为yAxis
const maxYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel - halfHeightPixel])[1]
this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis)
if (this.isEnergy()) {
const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
@ -822,16 +863,16 @@ export default {
this.option.xAxis.max = xAxis + halfWidth
}
this.option.yAxis.min = yAxis - halfHeight
this.option.yAxis.max = yAxis + halfHeight
this.option.yAxis.min = minYAxis
this.option.yAxis.max = maxYAxis
}
},
// 重置
handleReset() {
this.option.xAxis.min = 0
this.option.xAxis.min = 1
this.option.xAxis.max = 'dataMax'
this.option.yAxis.min = 0
this.option.yAxis.min = 1
this.option.yAxis.max = Math.ceil(Math.max(...this.shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
this.thumbnailOption.series[0].markLine.data = []
@ -885,6 +926,10 @@ export default {
}
}
return channel
},
isEnergy() {
return this.graphAssistance.axisType == 'Energy'
}
},
watch: {

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

@ -96,7 +96,7 @@
<!-- Efficiency Calibration 弹窗结束 -->
<!-- Energy Calibration 弹窗开始 -->
<energy-calibration-modal v-model="energyCalibrationModalShow" />
<energy-calibration-modal v-model="energyCalibrationModalShow" :sampleId="sampleData.sampleId" />
<!-- Energy Calibration 弹窗结束 -->
<!-- Resolution Calibration 弹窗开始 -->
@ -104,7 +104,11 @@
<!-- Resolution Calibration 弹窗结束 -->
<!-- SpectrumComments 弹窗开始 -->
<spectrum-comments-modal v-model="gammaCommentsModalVisible" :isAdd="isGammaCommentsAdd" />
<spectrum-comments-modal
v-model="gammaCommentsModalVisible"
:isAdd="isGammaCommentsAdd"
:sampleId="sampleData.sampleId"
/>
<!-- SpectrumComments 弹窗结束 -->
<!-- Color Config 弹窗开始 -->
@ -124,7 +128,12 @@
<!-- Config User Library 弹窗结束 -->
<!-- Arr 和 RRR 弹窗开始 -->
<arr-rrr-modal v-model="arrOrRRRModalVisible" :type="arrOrRRRModalType" :sampleId="this.sampleData.sampleId" :extraData="this.arrOrRRRModalExtraData" />
<arr-rrr-modal
v-model="arrOrRRRModalVisible"
:type="arrOrRRRModalType"
:sampleId="this.sampleData.sampleId"
:extraData="this.arrOrRRRModalExtraData"
/>
<!-- Arr 弹窗结束 -->
<!-- Spectrum 弹窗开始 -->
@ -719,13 +728,25 @@ export default {
{
type: 'a-menu-item',
title: 'View Comments',
show: this.isBetaGamma || this.isGamma,
show: this.isBetaGamma,
handler: this.handleViewComments
},
{
type: 'a-menu-item',
title: 'Add Comments',
show: this.isBetaGamma || this.isGamma,
show: this.isBetaGamma,
handler: this.handleAddComments
},
{
type: 'a-menu-item',
title: 'View',
show: this.isGamma,
handler: this.handleViewComments
},
{
type: 'a-menu-item',
title: 'Add',
show: this.isGamma,
handler: this.handleAddComments
}
]