feat: Gamma主页的Peak Infomation和Nuclide Library，分析工具弹窗里的编辑斜率功能
This commit is contained in:
parent
6f9a4cbaed
commit
acf0fb4706
|
|
@ -5,7 +5,7 @@
|
|||
</div>
|
||||
<div class="color-picker-mask" :class="show ? 'show' : ''" @click="show = false">
|
||||
<div class="color-picker-panel" :style="style" @click.stop>
|
||||
<chrome v-model="color"></chrome>
|
||||
<chrome v-model="color" disableAlpha></chrome>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({ rgba: { r: 255, g: 255, b: 255, a: 1 } })
|
||||
default: () => ({ rgba: { r: 255, g: 255, b: 255 } })
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -30,13 +30,6 @@
|
|||
@input-bg: @formInputBgColor;
|
||||
@input-border-color: @formInputBorderColor;
|
||||
|
||||
.ant-btn:hover,
|
||||
.ant-btn:active,
|
||||
.ant-btn:focus {
|
||||
color: #fff !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :title="'Slope at ' + (index + 1)" :width="250">
|
||||
<a-input-number v-model="value"></a-input-number>
|
||||
<template slot="custom-footer">
|
||||
<div class="footer">
|
||||
<a-button type="primary" @click="handleOK">Ok</a-button>
|
||||
<a-button @click="visible = false">Cancel</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
index: -1,
|
||||
value: 0,
|
||||
prevValue: 0,
|
||||
allowNaN: false,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {{ index: number; value: number; allowNaN: boolean; }} config
|
||||
*/
|
||||
open(config) {
|
||||
this.index = config.index
|
||||
|
||||
this.value = config.value
|
||||
this.prevValue = config.value
|
||||
|
||||
this.allowNaN = config.allowNaN
|
||||
this.visible = true
|
||||
},
|
||||
handleOK() {
|
||||
if (this.allowNaN || this.value) {
|
||||
this.$emit('change', this.value || 0, this.index, this.prevValue)
|
||||
this.visible = false
|
||||
} else {
|
||||
this.$message.warn('Input value invalid.')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,13 +81,19 @@
|
|||
<a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleModifyCP">(M)odify CP</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
key="modify-btn"
|
||||
:class="{ 'is-modify': isModifying }"
|
||||
@click="handleModifyCP"
|
||||
>(M)odify CP</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" :disabled="isOperationStackEmpty" @click="popOperationStack">Undo</a-button>
|
||||
<a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Replot</a-button>
|
||||
|
|
@ -179,6 +185,10 @@
|
|||
<!-- Nuclide Review 弹窗开始 -->
|
||||
<nuclide-review-modal v-model="nuclideReviewModalVisible" :sampleId="sampleId" :channel="currChannel" />
|
||||
<!-- Nuclide Review 弹窗结束 -->
|
||||
|
||||
<!-- Edit Slope 弹窗 -->
|
||||
<edit-slope-modal ref="editSlopeModal" @change="handleSlopeChange" />
|
||||
<!-- Edit Slope 结束 -->
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
|
|
@ -191,9 +201,10 @@ import NuclideReviewModal from './components/NuclideReviewModal.vue'
|
|||
import ModalMixin from '@/mixins/ModalMixin'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { findSeriesByName, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
|
||||
import { buildLineSeries, findSeriesByName, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
|
||||
import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
|
||||
import GeneralCommentModal from './components/GeneralCommentModal.vue'
|
||||
import EditSlopeModal from './components/EditSlopeModal.vue'
|
||||
|
||||
// 初始配置
|
||||
const initialOption = {
|
||||
|
|
@ -388,7 +399,8 @@ const thumbnailOption = {
|
|||
export const Operators = {
|
||||
ADD: 1, // 新增
|
||||
REMOVE: 2, // 移除
|
||||
MODIFY: 3 // 改变
|
||||
MODIFY: 3, // 改变
|
||||
SLOPE_CHANGE: 4 // 改变slope
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -399,7 +411,8 @@ export default {
|
|||
PeakCommentModal,
|
||||
FitPeaksAndBaseLineModal,
|
||||
NuclideReviewModal,
|
||||
GeneralCommentModal
|
||||
GeneralCommentModal,
|
||||
EditSlopeModal
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
|
|
@ -416,6 +429,7 @@ export default {
|
|||
channelPeakChart: [],
|
||||
energy: [],
|
||||
list: [],
|
||||
BaseCtrls: {},
|
||||
sampleId: -1,
|
||||
|
||||
peakCommentModalVisible: false, // Comment 弹窗是否显示
|
||||
|
|
@ -460,6 +474,7 @@ export default {
|
|||
sampleId: this.sampleId,
|
||||
fileName: this.fileName
|
||||
})
|
||||
|
||||
if (success) {
|
||||
this.isLoading = false
|
||||
const {
|
||||
|
|
@ -469,7 +484,8 @@ export default {
|
|||
channelCountChart,
|
||||
channelPeakChart,
|
||||
energy,
|
||||
table
|
||||
table,
|
||||
BaseCtrls
|
||||
} = result
|
||||
|
||||
console.log('%c [ ]-374', 'font-size:13px; background:pink; color:#bf2c9f;', result)
|
||||
|
|
@ -479,34 +495,37 @@ export default {
|
|||
this.channelCountChart = channelCountChart
|
||||
this.channelPeakChart = channelPeakChart
|
||||
this.energy = energy
|
||||
this.BaseCtrls = BaseCtrls
|
||||
|
||||
const series = []
|
||||
|
||||
// 推入BaseLine
|
||||
series.push({
|
||||
...this.buildSeriesOption(
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'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
|
||||
})
|
||||
`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(
|
||||
buildLineSeries(
|
||||
'CountChart',
|
||||
channelCountChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${channelCountChart.color})`
|
||||
|
|
@ -517,7 +536,7 @@ export default {
|
|||
const peakSeries = []
|
||||
channelPeakChart.forEach((item, index) => {
|
||||
peakSeries.push(
|
||||
this.buildSeriesOption(
|
||||
buildLineSeries(
|
||||
'Peak_' + (index + 1),
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`
|
||||
|
|
@ -546,7 +565,7 @@ export default {
|
|||
zlevel: 20
|
||||
})
|
||||
|
||||
this.thumbnailOption.series = this.buildSeriesOption(
|
||||
this.thumbnailOption.series = buildLineSeries(
|
||||
'BarChart',
|
||||
barChart.map(({ x, y }) => [x, y]),
|
||||
'#fff',
|
||||
|
|
@ -565,29 +584,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 构建series
|
||||
buildSeriesOption(name, data, color, extra = {}) {
|
||||
return {
|
||||
name,
|
||||
type: 'line',
|
||||
data,
|
||||
itemStyle: {
|
||||
color
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
symbolSize: 1,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
silent: true,
|
||||
animation: false,
|
||||
...extra
|
||||
}
|
||||
},
|
||||
|
||||
beforeModalOpen() {
|
||||
const { sampleId, inputFileName } = this.sampleData
|
||||
this.sampleId = sampleId
|
||||
|
|
@ -644,6 +640,8 @@ export default {
|
|||
this.selectedKeys = [selectedRow.index]
|
||||
|
||||
this.getSelPosNuclide(selectedRow)
|
||||
|
||||
this.selectedTableItem = selectedRow
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -690,7 +688,6 @@ export default {
|
|||
const { success, result, message } = await getAction('/gamma/getSelPosNuclide', {
|
||||
sampleId: this.sampleId,
|
||||
channel: parseInt(row.peakCentroid),
|
||||
nuclides: row.nuclides.join(','),
|
||||
fileName: this.fileName
|
||||
})
|
||||
if (success) {
|
||||
|
|
@ -773,30 +770,32 @@ export default {
|
|||
const series = []
|
||||
|
||||
// 推入BaseLine
|
||||
series.push({
|
||||
...this.buildSeriesOption(
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'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
|
||||
})
|
||||
`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(
|
||||
buildLineSeries(
|
||||
'CountChart',
|
||||
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${this.channelCountChart.color})`
|
||||
|
|
@ -807,7 +806,7 @@ export default {
|
|||
const peakSeries = []
|
||||
channelPeakChart.forEach((item, index) => {
|
||||
peakSeries.push(
|
||||
this.buildSeriesOption(
|
||||
buildLineSeries(
|
||||
'Peak_' + (index + 1),
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`
|
||||
|
|
@ -836,7 +835,7 @@ export default {
|
|||
zlevel: 20
|
||||
})
|
||||
|
||||
this.thumbnailOption.series = this.buildSeriesOption(
|
||||
this.thumbnailOption.series = buildLineSeries(
|
||||
'BarChart',
|
||||
barChart.map(({ x, y }) => [x, y]),
|
||||
'#fff',
|
||||
|
|
@ -856,30 +855,32 @@ export default {
|
|||
const series = []
|
||||
|
||||
// 推入旧的BaseLine
|
||||
series.push({
|
||||
...this.buildSeriesOption(
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'BaseLine',
|
||||
this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${this.channelBaseLineChart.color})`
|
||||
),
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
data: [{ xAxis: -1 }]
|
||||
},
|
||||
zlevel: 10
|
||||
})
|
||||
`rgb(${this.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(
|
||||
buildLineSeries(
|
||||
'CountChart',
|
||||
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${this.channelCountChart.color})`
|
||||
|
|
@ -890,7 +891,7 @@ export default {
|
|||
const peakSeries = []
|
||||
channelPeakChart.forEach((item, index) => {
|
||||
peakSeries.push(
|
||||
this.buildSeriesOption(
|
||||
buildLineSeries(
|
||||
'Peak_' + (index + 1),
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`
|
||||
|
|
@ -978,30 +979,32 @@ export default {
|
|||
this.channelPeakChart = channelPeakChart
|
||||
const series = []
|
||||
// 推入旧的BaseLine
|
||||
series.push({
|
||||
...this.buildSeriesOption(
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'BaseLine',
|
||||
this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${this.channelBaseLineChart.color})`
|
||||
),
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
data: [{ xAxis: -1 }]
|
||||
},
|
||||
zlevel: 10
|
||||
})
|
||||
`rgb(${this.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(
|
||||
buildLineSeries(
|
||||
'CountChart',
|
||||
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${this.channelCountChart.color})`
|
||||
|
|
@ -1012,7 +1015,7 @@ export default {
|
|||
const peakSeries = []
|
||||
channelPeakChart.forEach((item, index) => {
|
||||
peakSeries.push(
|
||||
this.buildSeriesOption(
|
||||
buildLineSeries(
|
||||
'Peak_' + (index + 1),
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`
|
||||
|
|
@ -1186,11 +1189,9 @@ export default {
|
|||
// 切换到Base Line 和 Control Point 操作
|
||||
if (this.btnGroupType == 1) {
|
||||
this.btnGroupType = 2
|
||||
this.clearOperationStack()
|
||||
|
||||
const originalCPSeries = findSeriesByName(this.option.series, 'BaseLine')
|
||||
|
||||
const baseLineEditSeries = this.buildSeriesOption('BaseLine_Edit', cloneDeep(originalCPSeries.data), '#fff', {
|
||||
const baseLineEditSeries = buildLineSeries('BaseLine_Edit', cloneDeep(originalCPSeries.data), '#fff', {
|
||||
zlevel: 21
|
||||
})
|
||||
|
||||
|
|
@ -1203,6 +1204,7 @@ export default {
|
|||
})
|
||||
|
||||
this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
|
||||
this._baseCtrls = cloneDeep(this.BaseCtrls)
|
||||
}
|
||||
// 切换回 Peak 操作
|
||||
else {
|
||||
|
|
@ -1214,6 +1216,9 @@ export default {
|
|||
this.resetChartOpts()
|
||||
})
|
||||
}
|
||||
|
||||
this.isModifying = false
|
||||
this.clearOperationStack()
|
||||
},
|
||||
|
||||
buildGraphicPoint(chart, x, y) {
|
||||
|
|
@ -1274,6 +1279,8 @@ export default {
|
|||
|
||||
// 在当前选中的红线位置新增控制点
|
||||
handleAddCP() {
|
||||
this.setGraphicDraggable(false)
|
||||
|
||||
const xAxises = this.channelBaseCPChart.map(({ point: { x } }) => x)
|
||||
const min = xAxises[0]
|
||||
const max = xAxises[xAxises.length - 1]
|
||||
|
|
@ -1317,6 +1324,8 @@ export default {
|
|||
|
||||
// 移除控制点
|
||||
handleRemoveCP() {
|
||||
this.setGraphicDraggable(false)
|
||||
|
||||
// find nearest control-point
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
const controlPointList = this.option.graphic
|
||||
|
|
@ -1352,23 +1361,57 @@ export default {
|
|||
|
||||
// 编辑斜率
|
||||
handleEditSlope() {
|
||||
// if (m_baseCtrl.XCtrl.empty()) {
|
||||
// this.$message.warn('No control points to be edited')
|
||||
// return
|
||||
// }
|
||||
// // find nearest control-point
|
||||
// let i = 1,
|
||||
// n = m_baseCtrl.XCtrl.size()
|
||||
// for (; i < n; ++i) {
|
||||
// if (m_baseCtrl.XCtrl[i] >= m_curChan) {
|
||||
// if (m_baseCtrl.XCtrl[i] - m_curChan > m_curChan - m_baseCtrl.XCtrl[i - 1]) --i
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// if (i == n) i = n - 1
|
||||
this.setGraphicDraggable(false)
|
||||
|
||||
const { xctrl, yslope } = this._baseCtrls
|
||||
if (!xctrl.length) {
|
||||
this.$message.warn('No control points to be edited')
|
||||
return
|
||||
}
|
||||
// find nearest control-point
|
||||
let i = 1,
|
||||
n = xctrl.length
|
||||
for (; i < n; ++i) {
|
||||
const currXCtrl = xctrl[i]
|
||||
const prevXCtrl = xctrl[i - 1]
|
||||
if (currXCtrl >= this.currChannel) {
|
||||
if (currXCtrl - this.currChannel > this.currChannel - prevXCtrl) {
|
||||
--i
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
if (i == n) i = n - 1
|
||||
|
||||
this.$refs.editSlopeModal.open({
|
||||
index: i,
|
||||
value: yslope[i],
|
||||
allowNaN: !(i == 0 || i == n - 1)
|
||||
})
|
||||
},
|
||||
|
||||
// 确定对Control Point 的操作
|
||||
// 确认编辑斜率
|
||||
handleSlopeChange(slope, index, prevSlope) {
|
||||
if (slope === prevSlope) {
|
||||
return
|
||||
}
|
||||
|
||||
const { yslope } = this._baseCtrls
|
||||
yslope[index] = slope
|
||||
this.pushOperationStack(Operators.SLOPE_CHANGE, {
|
||||
index,
|
||||
slope: prevSlope
|
||||
})
|
||||
},
|
||||
|
||||
// 撤销
|
||||
handleUndo() {
|
||||
this.setGraphicDraggable(false)
|
||||
|
||||
this.popOperationStack()
|
||||
},
|
||||
|
||||
// 确定对Baseline Control Points 的操作
|
||||
handleAccept() {},
|
||||
|
||||
// 右下角添加当前选中的nuclide
|
||||
|
|
@ -1464,6 +1507,11 @@ export default {
|
|||
const { point } = operand
|
||||
this.option.graphic.splice(index, 0, point)
|
||||
break
|
||||
case Operators.SLOPE_CHANGE:
|
||||
const { slope } = operand
|
||||
const { yslope } = this._baseCtrls
|
||||
yslope[index] = slope
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1655,4 +1703,8 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-modify {
|
||||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@ export default {
|
|||
.analysis-settings {
|
||||
&-item {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
|
|
|
|||
|
|
@ -73,21 +73,21 @@ export default {
|
|||
this.configList = configList
|
||||
return {
|
||||
config: {
|
||||
spectrumLine: { rgba: { r: 255, g: 255, b: 0, a: 1 } },
|
||||
baseline: { rgba: { r: 0, g: 246, b: 255, a: 1 } },
|
||||
lcLine: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
|
||||
scacLine: { rgba: { r: 244, g: 112, b: 247, a: 1 } },
|
||||
peakLine: { rgba: { r: 255, g: 127, b: 39, a: 1 } },
|
||||
compareLine: { rgba: { r: 0, g: 255, b: 0, a: 1 } },
|
||||
spectSumLine: { rgba: { r: 0, g: 0, b: 255, a: 1 } },
|
||||
spectCutLine: { rgba: { r: 34, g: 90, b: 106, a: 1 } },
|
||||
fitBaseLine: { rgba: { r: 255, g: 255, b: 255, a: 1 } }
|
||||
spectrumLine: { rgba: { r: 255, g: 255, b: 0 } },
|
||||
baseline: { rgba: { r: 0, g: 246, b: 255 } },
|
||||
lcLine: { rgba: { r: 255, g: 0, b: 0 } },
|
||||
scacLine: { rgba: { r: 244, g: 112, b: 247 } },
|
||||
peakLine: { rgba: { r: 255, g: 127, b: 39 } },
|
||||
compareLine: { rgba: { r: 0, g: 255, b: 0 } },
|
||||
spectSumLine: { rgba: { r: 0, g: 0, b: 255 } },
|
||||
spectCutLine: { rgba: { r: 34, g: 90, b: 106 } },
|
||||
fitBaseLine: { rgba: { r: 255, g: 255, b: 255 } }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
combineRGBA({ rgba: { r, g, b, a } }) {
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`
|
||||
combineRGBA({ rgba: { r, g, b} }) {
|
||||
return `rgb(${r}, ${g}, ${b})`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<i @click="handleClick('left')">
|
||||
<img src="@/assets/images/spectrum/left-arrow.png" />
|
||||
</i>
|
||||
<span>
|
||||
<slot></slot>
|
||||
<span @click="handleBtnClick">
|
||||
Peak Information
|
||||
</span>
|
||||
<i @click="handleClick('right')">
|
||||
<img src="@/assets/images/spectrum/right-arrow.png" />
|
||||
|
|
@ -17,6 +17,9 @@ export default {
|
|||
methods: {
|
||||
handleClick(direction) {
|
||||
this.$emit('change', direction)
|
||||
},
|
||||
handleBtnClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,6 +28,7 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.btn-with-switch-icon {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #0a544e;
|
||||
|
|
@ -41,9 +45,9 @@ export default {
|
|||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,17 @@
|
|||
<template>
|
||||
<div class="nuclear-library">
|
||||
<div class="nuclear-library-item" v-for="item in list" :key="item.id">
|
||||
{{ item.title }}
|
||||
<div class="nuclear-library-item" v-for="(item, index) in list" :key="index">
|
||||
{{ item }}
|
||||
</div>
|
||||
<a-empty v-if="!list.length"></a-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Ac228'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Ac229'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Ac230'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Eu152'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'I132'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Ir192'
|
||||
}
|
||||
]
|
||||
props: {
|
||||
list: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,14 +22,10 @@ export default {
|
|||
width: 230px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
padding: 20px 0;
|
||||
|
||||
&-item {
|
||||
padding: 4px 14px;
|
||||
// cursor: pointer;
|
||||
|
||||
// &:hover {
|
||||
// background-color: #055565;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,12 +22,10 @@
|
|||
</pop-over-with-icon>
|
||||
<pop-over-with-icon>
|
||||
Nuclide Library
|
||||
<nuclear-library slot="content" />
|
||||
<nuclear-library slot="content" :list="nuclideLibraryList" />
|
||||
</pop-over-with-icon>
|
||||
<div class="peak-info">
|
||||
<button-with-switch-icon @change="handlePeakInfoChange">
|
||||
Peak Information
|
||||
</button-with-switch-icon>
|
||||
<button-with-switch-icon @change="handlePeakInfoChange" @click="handleTogglePeak"></button-with-switch-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二级交互栏结束 -->
|
||||
|
|
@ -53,6 +51,19 @@
|
|||
/>
|
||||
</div>
|
||||
<!-- 缩略图结束 -->
|
||||
|
||||
<!-- 自定义tooltip，用于展示Peak Infomation -->
|
||||
<div
|
||||
v-if="peakInfomationTooltip.visible"
|
||||
class="peak-infomation-tooltip"
|
||||
:style="{
|
||||
top: peakInfomationTooltip.top + 'px',
|
||||
left: peakInfomationTooltip.left + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="peak-infomation-tooltip-content" v-html="peakInfomationTooltip.content"></div>
|
||||
</div>
|
||||
<!-- tooltip结束 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主体部分结束 -->
|
||||
|
|
@ -70,7 +81,7 @@ import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
|
|||
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
|
||||
import { getAction } from '@/api/manage'
|
||||
import Response from './response.json'
|
||||
import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
|
||||
import { buildLineSeries, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
// 初始配置
|
||||
|
|
@ -240,7 +251,16 @@ export default {
|
|||
graphAssistance: {},
|
||||
|
||||
channelPeakGroup: [],
|
||||
energyPeakGroup: []
|
||||
energyPeakGroup: [],
|
||||
|
||||
nuclideLibraryList: [], // 当前鼠标点击选中的channel
|
||||
peakInfomationTooltip: {
|
||||
// Peak Infomation的位置
|
||||
visible: false,
|
||||
content: '',
|
||||
top: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -333,124 +353,88 @@ export default {
|
|||
const series = []
|
||||
|
||||
// 推入Spectrum Line
|
||||
series.push({
|
||||
name: 'Spectrum',
|
||||
type: 'line',
|
||||
data: shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${shadowChannelChart.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
symbolSize: 1,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
data: [{ xAxis: -1 }]
|
||||
},
|
||||
animation: false
|
||||
})
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'Spectrum',
|
||||
shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${shadowChannelChart.color})`,
|
||||
{
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
data: [{ xAxis: -1 }]
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// 右上角缩略图推入Spectrum Line
|
||||
this.thumbnailOption.series.push({
|
||||
name: 'Spectrum',
|
||||
type: 'line',
|
||||
data: shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${shadowChannelChart.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
symbolSize: 1,
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
silent: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#1397a3',
|
||||
width: 1
|
||||
},
|
||||
data: []
|
||||
}
|
||||
})
|
||||
this.thumbnailOption.series.push(
|
||||
buildLineSeries(
|
||||
'Spectrum',
|
||||
shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${shadowChannelChart.color})`,
|
||||
{
|
||||
silent: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#1397a3',
|
||||
width: 1
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// 推入BaseLine
|
||||
series.push({
|
||||
name: 'BaseLine',
|
||||
type: 'line',
|
||||
data: channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${channelBaseLine.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
animation: false,
|
||||
zlevel: 2
|
||||
})
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'BaseLine',
|
||||
channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${channelBaseLine.color})`,
|
||||
{
|
||||
zlevel: 2
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// 推入LcLine线
|
||||
series.push({
|
||||
name: 'LcLine',
|
||||
type: 'line',
|
||||
data: channelLcLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${channelLcLine.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
animation: false,
|
||||
zlevel: 3
|
||||
})
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'LcLine',
|
||||
channelLcLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${channelLcLine.color})`,
|
||||
{
|
||||
zlevel: 3
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// 推入Scac线
|
||||
series.push({
|
||||
name: 'ScacLine',
|
||||
type: 'line',
|
||||
data: channelScacLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${channelScacLine.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
animation: false,
|
||||
zlevel: 4
|
||||
})
|
||||
series.push(
|
||||
buildLineSeries(
|
||||
'ScacLine',
|
||||
channelScacLine.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${channelScacLine.color})`,
|
||||
{
|
||||
zlevel: 4
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
// 推入基线控制点
|
||||
series.push({
|
||||
|
|
@ -476,20 +460,16 @@ export default {
|
|||
// 推入Peak Line
|
||||
const peakLines = []
|
||||
channelPeakGroup.forEach((item, index) => {
|
||||
peakLines.push({
|
||||
name: `Peak_${index}`,
|
||||
type: 'line',
|
||||
data: item.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${item.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
animation: false,
|
||||
zlevel: 6
|
||||
})
|
||||
peakLines.push(
|
||||
buildLineSeries(
|
||||
`Peak_${index}`,
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`,
|
||||
{
|
||||
zlevel: 6
|
||||
}
|
||||
)
|
||||
)
|
||||
})
|
||||
series.push(...peakLines)
|
||||
this.option.series = series
|
||||
|
|
@ -640,19 +620,16 @@ export default {
|
|||
const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
|
||||
const peakLines = []
|
||||
data.forEach((item, index) => {
|
||||
peakLines.push({
|
||||
name: `Peak_${index}`,
|
||||
type: 'line',
|
||||
data: item.pointlist.map(({ x, y }) => [x, y]),
|
||||
itemStyle: {
|
||||
color: `rgb(${item.color})`
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'none',
|
||||
animation: false
|
||||
})
|
||||
peakLines.push(
|
||||
buildLineSeries(
|
||||
`Peak_${index}`,
|
||||
item.pointlist.map(({ x, y }) => [x, y]),
|
||||
`rgb(${item.color})`,
|
||||
{
|
||||
zlevel: 6
|
||||
}
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
this.option.series.push(...peakLines)
|
||||
|
|
@ -677,12 +654,40 @@ export default {
|
|||
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}`
|
||||
|
||||
this.getSelPosNuclide(channel)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取 Nuclide Library 数据
|
||||
async getSelPosNuclide(channel) {
|
||||
try {
|
||||
this.loading = true
|
||||
const { sampleId, inputFileName: fileName } = this.sample
|
||||
|
||||
const { success, result, message } = await getAction('/gamma/getSelPosNuclide', {
|
||||
sampleId,
|
||||
channel,
|
||||
fileName
|
||||
})
|
||||
if (success) {
|
||||
const { identify } = result
|
||||
this.nuclideLibraryList = identify
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
this.list = []
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
resize() {
|
||||
this.$refs.chartRef.resize()
|
||||
this.$refs.thumbnailChartRef.resize()
|
||||
this.closePeakInfomationTooltip()
|
||||
},
|
||||
|
||||
// peak info 点击左右方向
|
||||
|
|
@ -690,6 +695,60 @@ export default {
|
|||
this.moveMarkLine(direction)
|
||||
},
|
||||
|
||||
// 触发Peak Infomation
|
||||
handleTogglePeak() {
|
||||
const xAxis = this.option.series[0].markLine.data[0].xAxis
|
||||
const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
|
||||
const index = this.channelPeakGroup.findIndex(peakItem => {
|
||||
const allX = peakItem.pointlist.map(item => item.x)
|
||||
const max = Math.max(...allX)
|
||||
const min = Math.min(...allX)
|
||||
return channel >= min && channel <= max
|
||||
})
|
||||
console.log('%c [ index ]-732', 'font-size:13px; background:pink; color:#bf2c9f;', index)
|
||||
if (-1 !== index) {
|
||||
this.getPeakInfo(index)
|
||||
} else {
|
||||
this.closePeakInfomationTooltip()
|
||||
}
|
||||
},
|
||||
|
||||
// 获取 Peak 峰顶 信息
|
||||
async getPeakInfo(index) {
|
||||
try {
|
||||
const { inputFileName: fileName } = this.sample
|
||||
const { success, result, message } = await getAction('/gamma/clickPeakInformation', {
|
||||
fileName,
|
||||
index
|
||||
})
|
||||
if (success) {
|
||||
const html = result.replaceAll('\n', '<br>')
|
||||
const currPeak = this.channelPeakGroup[index]
|
||||
const { x, y } = currPeak.pointlist.reduce((prev, curr) => {
|
||||
return prev && prev.y > curr.y ? prev : curr
|
||||
})
|
||||
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
|
||||
const [xPix, yPix] = chart.convertToPixel({ seriesIndex: 0 }, [x, y])
|
||||
console.log('%c [ xPix, yPix ]-731', 'font-size:13px; background:pink; color:#bf2c9f;', xPix, yPix)
|
||||
this.peakInfomationTooltip.content = html
|
||||
this.peakInfomationTooltip.visible = true
|
||||
this.peakInfomationTooltip.left = xPix
|
||||
this.peakInfomationTooltip.top = yPix - 20
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭Peak Infomation
|
||||
closePeakInfomationTooltip() {
|
||||
this.peakInfomationTooltip.visible = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 向某一个方向移动标记线
|
||||
* @param { 'left'| 'right' } direction
|
||||
|
|
@ -754,6 +813,8 @@ export default {
|
|||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
this.closePeakInfomationTooltip()
|
||||
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
|
|
@ -981,6 +1042,13 @@ export default {
|
|||
return channel
|
||||
},
|
||||
|
||||
// 重置页面信息
|
||||
reset() {
|
||||
this.selectedChannel = -1
|
||||
this.nuclideLibraryList = []
|
||||
this.closePeakInfomationTooltip()
|
||||
},
|
||||
|
||||
isEnergy() {
|
||||
return this.graphAssistance.axisType == 'Energy'
|
||||
}
|
||||
|
|
@ -988,6 +1056,7 @@ export default {
|
|||
watch: {
|
||||
sample: {
|
||||
handler() {
|
||||
this.reset()
|
||||
this.getSampleDetail()
|
||||
},
|
||||
immediate: true
|
||||
|
|
@ -1034,3 +1103,19 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.peak-infomation-tooltip {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
white-space: nowrap;
|
||||
z-index: 9;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
border-color: rgb(255, 255, 255);
|
||||
pointer-events: none;
|
||||
background-color: #55a9fe;
|
||||
border-color: #55a9fe;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user