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

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

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

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

@ -53,6 +53,10 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
canDeselect: {
type: Boolean,
default: true
},
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false default: false
@ -66,7 +70,7 @@ export default {
}, },
methods: { methods: {
// 实现单击选中/反选功能 // 实现单击选中/反选功能
customRow(record) { customRow(record, index) {
const key = record[this.rowKey] const key = record[this.rowKey]
return { return {
class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '', class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
@ -75,10 +79,15 @@ export default {
if(!this.canSelect) { if(!this.canSelect) {
return return
} }
// 反选
if (this.innerSelectedRowKeys.includes(key)) { if (this.innerSelectedRowKeys.includes(key)) {
const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key) if(this.multiple || this.canDeselect) {
this.innerSelectedRowKeys.splice(findIndex, 1) const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
} else { this.innerSelectedRowKeys.splice(findIndex, 1)
}
}
// 选中
else {
if(this.multiple) { if(this.multiple) {
this.innerSelectedRowKeys.push(key) this.innerSelectedRowKeys.push(key)
} }
@ -86,6 +95,8 @@ export default {
this.innerSelectedRowKeys = [key] 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> <template>
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null"> <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
<div class="interactive-analysis-tools"> <a-spin :spinning="isLoading">
<div class="interactive-analysis-tools-left"> <div class="interactive-analysis-tools">
<div class="chart"> <div class="interactive-analysis-tools-left">
<custom-chart :option="option" /> <div class="chart">
</div> <CustomChart ref="chartRef" :option="option" :opts="opts" @zr:click="handleChartClick" />
<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>
</div> </div>
</div> <!-- 缩略图 -->
</div> <div class="thumbnail">
<div class="interactive-analysis-tools-right"> <CustomChart :option="thumbnailOption" />
<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> </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>
<div class="identify-box">
<title-over-border title="Nuclide Identify"> <!-- 右侧 -->
<a-form-model class="tolerance"> <div class="interactive-analysis-tools-right">
<a-form-model-item label="Tolerance"> <title-over-border title="Peak">
<a-input-number></a-input-number> <div class="peak-box">
</a-form-model-item> <!-- 按钮组1 -->
</a-form-model> <template v-if="btnGroupType == 1">
<div class="identify-item"> <div class="peak-box-item">
<div class="title"> <a-button type="primary">Insert</a-button>
Possible Nuclide </div>
</div> <div class="peak-box-item">
<div class="content"></div> <a-button type="primary" @click="handleDel">Delete</a-button>
</div> </div>
<div class="identify-item"> <div class="peak-box-item">
<div class="title"> <a-button type="primary">Fit</a-button>
Nuclide Identified </div>
</div>
<div class="content"></div> <div class="peak-box-item symbol" :key="4">
</div> <a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
<div class="identify-operators"> <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
<a-space> </div>
<a-input></a-input>
<a-button type="primary">Add</a-button> <div class="peak-box-item base-line">
<a-button type="primary" @click="handleDel">Del</a-button> <a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
</a-space> </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> </div>
</title-over-border> </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> </div>
</div> </a-spin>
<!-- Comment弹窗 开始 --> <!-- Comment弹窗 开始 -->
<comment-modal v-model="commentModalVisible" :type="commentType" /> <comment-modal v-model="commentModalVisible" :type="commentType" />
<!-- Comment弹窗 结束 --> <!-- Comment弹窗 结束 -->
@ -134,91 +148,110 @@ import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
import NuclideReviewModal from './components/NuclideReviewModal.vue' import NuclideReviewModal from './components/NuclideReviewModal.vue'
import ModalMixin from '@/mixins/ModalMixin' import ModalMixin from '@/mixins/ModalMixin'
import { getAction } from '@/api/manage' import { getAction } from '@/api/manage'
import { cloneDeep } from 'lodash'
import Response from './Response.json'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
// 初始配置
const initialOption = { const initialOption = {
grid: { grid: {
top: 20, top: 40,
bottom: 20, left: 60,
left: 100, right: 50,
right: 20 containLabel: true
}, },
xAxis: { title: {
min: 1, text: '',
max: 8192, left: 'center',
interval: 1143, bottom: 10,
axisLabel: { textStyle: {
color: '#fff' color: '#8FD4F8',
}, rich: {
splitLine: { a: {
show: false padding: [0, 20, 0, 0],
}, fontSize: 16
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
} }
} }
},
{
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 = [ const columns = [
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', customRender: (_, __, index) => {
return index + 1
},
width: 60 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 { export default {
mixins: [ModalMixin], mixins: [ModalMixin],
components: { components: {
@ -269,15 +339,19 @@ export default {
}, },
props: { props: {
sampleId: { sampleId: {
type: Number, type: Number
required: true
} }
}, },
data() { data() {
this.columns = columns this.columns = columns
return { return {
option: initialOption, option: cloneDeep(initialOption),
opts: { notMerge: false },
thumbnailOption: cloneDeep(thumbnailOption),
isLoading: false,
list: [], list: [],
commentModalVisible: false, // Comment 弹窗是否显示 commentModalVisible: false, // Comment 弹窗是否显示
commentType: 'Peak', commentType: 'Peak',
@ -292,11 +366,104 @@ export default {
methods: { methods: {
async getInfo() { async getInfo() {
try { try {
this.isLoading = true
this.option.series = []
const { success, result, message } = await getAction('/gamma/InteractiveTool', { const { success, result, message } = await getAction('/gamma/InteractiveTool', {
sampleId: this.sampleId sampleId: this.sampleId
}) })
if (success) { 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 { } else {
this.$message.error(message) this.$message.error(message)
} }
@ -305,28 +472,118 @@ export default {
} }
}, },
beforeModalOpen() { // 构建series
this.getInfo() 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
}
}, },
// 切换图表上的红色竖线 beforeModalOpen() {
handleChangeMarkLine(direction) { this.getInfo()
if (direction == 'prev') { this.opts.notMerge = false
this.option.series[0].markLine.data[0].xAxis = 900
} else if (direction == 'next') { this.$nextTick(() => {
this.option.series[0].markLine.data[0].xAxis = 1100 this.option.brush = { toolbox: [] }
} this.selectedKeys = []
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'
}))
}, },
// 点击图表，设置红线，改变表格的选中项
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弹窗 // 显示comment弹窗
handleAddComment(type) { handleAddComment(type) {
this.commentType = type this.commentType = type
@ -336,7 +593,7 @@ export default {
// 删除 // 删除
handleDel() { handleDel() {
if (!this.selectedKeys.length) { if (!this.selectedKeys.length) {
this.$message.warn('Please Select At Least 1 Peak To Delete') this.$message.warn('No peak to delete.')
return return
} }
@ -344,7 +601,46 @@ export default {
title: 'Warning', title: 'Warning',
content: 'Are you sure to delete this peak?', content: 'Are you sure to delete this peak?',
onOk: () => { 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; font-size: 20px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
user-select: none;
span { span {
cursor: pointer; cursor: pointer;

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

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

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

@ -135,7 +135,7 @@
</title-over-border> </title-over-border>
<!-- 右侧图表 --> <!-- 右侧图表 -->
<div class="statistics-paramer-history-chart"> <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>
</div> </div>
</custom-modal> </custom-modal>

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

@ -51,7 +51,7 @@
</title-over-border> </title-over-border>
<!-- 右侧图表 --> <!-- 右侧图表 -->
<div class="statistics-paramer-history-chart"> <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>
</div> </div>
</custom-modal> </custom-modal>

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

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

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

@ -1,10 +1,13 @@
<template> <template>
<custom-modal v-model="visible" title="Spectrum Comments" :okHandler="handleOk" :footer="isAdd ? undefined : null"> <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> </custom-modal>
</template> </template>
<script> <script>
import { getAction } from '@/api/manage'
import ModalMixin from '@/mixins/ModalMixin' import ModalMixin from '@/mixins/ModalMixin'
export default { export default {
mixins: [ModalMixin], mixins: [ModalMixin],
@ -12,17 +15,42 @@ export default {
isAdd: { isAdd: {
type: Boolean, type: Boolean,
default: true default: true
},
sampleId: {
type: Number
} }
}, },
data() { data() {
return { return {
isLoading: false,
comments: '' comments: ''
} }
}, },
methods: { methods: {
// ModalMixin 中的生命周期方法 // ModalMixin 中的生命周期方法
beforeModalOpen() { 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() { handleOk() {
console.log('%c [ ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', this.comments) 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], mixins: [ModalMixin],
props: { props: {
sampleId: { sampleId: {
type: Number, type: Number
required: true
} }
}, },
data() { data() {

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

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

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

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