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

feat: 调用wasm计算新的baseline，因echarts移动点比较复杂，重新用html实现，同时将解析完后的后续操作实现

Browse Source
This commit is contained in:
Xu Zhimeng 2023-10-12 18:24:28 +08:00
parent 4a17c09ddd
commit eca536a9e2
9 changed files with 389 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html vendored
View File

@ -251,7 +251,7 @@
<div class="loader-section section-right"></div>
</div>
</div>
<script src="/qtw.js"></script>
</body>
</html>

1
public/qtw.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
public/qtw.wasm vendored Normal file
View File

Binary file not shown.

2
src/utils/WasmHelper.js Normal file
View File

@ -0,0 +1,2 @@
const { UpdateBaseLine } = Module;
export { UpdateBaseLine as updateBaseLine };

2
src/utils/chartHelper.js
View File

@ -8,7 +8,7 @@ export function getXAxisAndYAxisByPosition(chart, offsetX, offsetY, seriesIndex
if (
chart.containPixel(
{
seriesIndex: 0
seriesIndex
},
pointInPixel
)

149
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/RectList.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div class="rect-list" :class="isMoving ? 'draggable' : ''" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
<div
class="rect-list-item"
:class="draggable && !isMoving ? 'draggable' : ''"
v-for="(item, index) in list"
:key="index"
@mousedown="handleMouseDown(item, index)"
>
<div
class="plus"
:class="isMoving ? 'will-change' : ''"
v-if="item.yslope"
:style="getPosition(item.xAxis - 2, item.yAxis - 2 * item.yslope)"
>
+
</div>
<div class="rect" :class="isMoving ? 'will-change' : ''" :style="getPosition(item.xAxis, item.yAxis)"></div>
<div
class="plus"
:class="isMoving ? 'will-change' : ''"
v-if="item.yslope"
:style="getPosition(item.xAxis + 2, item.yAxis + 2 * item.yslope)"
>
+
</div>
</div>
</div>
</template>
<script>
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
export default {
props: {
chartRef: {
type: Object,
},
baseControls: {
type: Object,
},
draggable: {
type: Boolean,
},
},
data() {
return {
list: [],
isMoving: false,
}
},
methods: {
init() {
this.chart = this.chartRef.getChartInstance()
const { xctrl: xctrlList, yctrl: yctrlList, yslope: yslopeList } = this.baseControls
this.list = xctrlList.map((xAxis, index) => {
const yAxis = yctrlList[index]
const yslope = yslopeList[index]
return {
xAxis,
yAxis,
yslope,
}
})
},
clear() {
this.list = []
},
getPosition(xAxis, yAxis) {
const [xPix, yPix] = this.chart.convertToPixel('grid', [xAxis, yAxis])
return {
position: 'absolute',
left: xPix + 'px',
top: yPix + 'px',
}
},
handleMouseDown(item, index) {
this.isMoving = true
this.currItem = item
this.prevYAxis = item.yAxis
this.currItemIndex = index
},
handleMouseMove(event) {
if (this.isMoving) {
const { offsetX, offsetY } = event
const position = getXAxisAndYAxisByPosition(this.chart, offsetX, offsetY)
if (position) {
this.currItem.yAxis = position[1]
this.$emit('move', this.list.map((item) => item.yAxis))
}
}
},
handleMouseUp() {
if (this.isMoving) {
this.isMoving = false
this.$emit('moveEnd', this.prevYAxis, this.currItemIndex)
}
},
},
}
</script>
<style lang="less" scoped>
.rect-list {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
overflow: hidden;
&.draggable {
pointer-events: all;
}
&-item {
user-select: none;
pointer-events: none;
&.draggable {
pointer-events: all;
}
}
.rect {
width: 10px;
height: 10px;
border: 2px solid red;
transform: translate(-50%, -50%);
}
.plus {
font-size: 20px;
color: #0f0;
width: 12px;
height: 12px;
line-height: 12px;
transform: translate(-50%, -50%);
}
}
.will-change {
will-change: top;
}
</style>

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

@ -13,6 +13,14 @@
@brushEnd="handleBrushEnd"
@zr:click="handleChartClick"
/>
<rect-list
ref="rectListRef"
:chartRef="$refs.chartRef"
:baseControls="baseCtrls_Copy"
:draggable="isModifying"
@move="handleMove"
@moveEnd="handleMoveEnd"
/>
</div>
<!-- 缩略图 -->
<div class="thumbnail">
@ -118,9 +126,7 @@
</a-form-model-item>
</a-form-model>
<div class="identify-item">
<div class="title">
Possible Nuclide
</div>
<div class="title">Possible Nuclide</div>
<a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
<div class="content">
<template v-if="selectedTableItem && selectedTableItem._possible">
@ -138,9 +144,7 @@
</a-spin>
</div>
<div class="identify-item">
<div class="title">
Nuclide Identified
</div>
<div class="title">Nuclide Identified</div>
<div class="content">
<template v-if="selectedTableItem">
<div
@ -206,6 +210,8 @@ import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
import GeneralCommentModal from './components/GeneralCommentModal.vue'
import EditSlopeModal from './components/EditSlopeModal.vue'
import Response from './Response.json'
import { updateBaseLine } from '@/utils/WasmHelper'
import RectList from './components/RectList.vue'
import { isNullOrUndefined } from '@/utils/util'
// 初始配置
@ -291,19 +297,7 @@ const initialOption = {
animation: false
},
series: [],
brush: {},
graphic: [
{
type: 'group',
id: 1,
children: []
},
{
type: 'group',
id: 2,
children: []
}
]
brush: {}
}
const columns = [
@ -431,7 +425,8 @@ export default {
FitPeaksAndBaseLineModal,
NuclideReviewModal,
GeneralCommentModal,
EditSlopeModal
EditSlopeModal,
RectList
},
data() {
this.columns = columns
@ -449,6 +444,7 @@ export default {
energy: [],
list: [],
BaseCtrls: {},
baseCtrls_Copy: {},
FitBaseLine: '#fff',
sampleId: -1,
@ -479,7 +475,7 @@ export default {
const channel = parseInt(params[0].value[0])
const energy = this.energy[channel - 1]
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.toFixed(2)}</div>`
<div class="energy">${isNullOrUndefined(energy) ? '' : `Energy: ${energy.toFixed(2)}`}</div>`
}
},
methods: {
@ -496,7 +492,7 @@ export default {
fileName: this.fileName
})
// const { success, result, message } = Response
// const { success, result, message } = cloneDeep(Response)
if (success) {
this.isLoading = false
@ -525,70 +521,18 @@ export default {
const series = []
// 推入BaseLine
series.push(
buildLineSeries(
'BaseLine',
channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
channelBaseLineChart.color,
{
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
}
)
)
series.push(this.buildBaseLine(channelBaseLineChart))
// 推入Count
series.push(
buildLineSeries(
'CountChart',
channelCountChart.pointlist.map(({ x, y }) => [x, y]),
channelCountChart.color
)
)
series.push(this.buildCountLine(channelCountChart))
// 推入Peak
const peakSeries = []
channelPeakChart.forEach((item, index) => {
peakSeries.push(
buildLineSeries(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
item.color
)
)
})
series.push(...peakSeries)
series.push(...this.buildPeaks(channelPeakChart))
// 推入基线控制点
series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: this.buildCPPointData(channelBaseCPChart),
silent: true,
animation: false,
zlevel: 20
})
series.push(this.buildCtrlPoint(channelBaseCPChart))
this.thumbnailOption.series = buildLineSeries(
'BarChart',
barChart.map(({ x, y }) => [x, y]),
'#fff',
{
silent: true
}
)
this.thumbnailOption.series = this.buildBarChart(barChart)
this.list = table
this.option.series = series
@ -609,13 +553,7 @@ export default {
this.option.brush = { toolbox: [] }
this.selectedKeys = []
})
this.removeGraphics()
},
// 清空graphic（小方块和加号）
removeGraphics() {
this.option.graphic[0].children = []
this.option.graphic[1].children = []
this.clearRect()
},
beforeModalOpen() {
@ -793,11 +731,8 @@ export default {
// Insert按钮
handleInsert() {
this.isFitting = false
const xAxises = this.channelBaseCPChart.map(({ point: { x } }) => x)
const min = xAxises[0]
const max = xAxises[xAxises.length - 1]
if (!this.currChannel || this.currChannel < min || this.currChannel > max) {
const { rg_high, rg_low } = this.BaseCtrls
if (!this.currChannel || this.currChannel <= rg_low + 1 || this.currChannel >= rg_high - 1) {
this.$message.warn("Couldn't insert peak, maybe out of range")
return
}
@ -819,7 +754,7 @@ export default {
table
} = result
this.$bus.$emit('refresh', {
this.$bus.$emit('gammaRefresh', {
allData,
channelPeakChart,
shadowChannelChart,
@ -834,79 +769,18 @@ export default {
const series = []
// 推入BaseLine
series.push(
buildLineSeries(
'BaseLine',
channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
channelBaseLineChart.color,
{
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
}
)
)
series.push(this.buildBaseLine(channelBaseLineChart))
// 推入旧的Count
series.push(
buildLineSeries(
'CountChart',
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
this.channelCountChart.color
)
)
series.push(this.buildCountLine(channelCountChart))
// 推入Peak
const peakSeries = []
channelPeakChart.forEach((item, index) => {
peakSeries.push(
buildLineSeries(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
item.color
)
)
})
series.push(...peakSeries)
series.push(...this.buildPeaks(channelPeakChart))
// 推入旧的基线控制点
series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: this.channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
itemStyle: {
color: 'transparent',
borderColor: color,
borderWidth: size / 2
}
}
}),
silent: true,
animation: false,
zlevel: 20
})
series.push(this.buildCtrlPoint(channelBaseCPChart))
this.thumbnailOption.series = buildLineSeries(
'BarChart',
barChart.map(({ x, y }) => [x, y]),
'#fff',
{
silent: true
}
)
this.thumbnailOption.series = this.buildBarChart(barChart)
this.list = table
this.option.series = series
@ -919,70 +793,16 @@ export default {
const series = []
// 推入旧的BaseLine
series.push(
buildLineSeries(
'BaseLine',
this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
this.channelBaseLineChart.color,
{
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
}
)
)
series.push(this.buildBaseLine(this.channelBaseLineChart))
// 推入旧的Count
series.push(
buildLineSeries(
'CountChart',
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
this.channelCountChart.color
)
)
series.push(this.buildCountLine(this.channelCountChart))
// 推入Peak
const peakSeries = []
channelPeakChart.forEach((item, index) => {
peakSeries.push(
buildLineSeries(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
item.color
)
)
})
series.push(...peakSeries)
series.push(...this.buildPeaks(channelPeakChart))
// 推入旧的基线控制点
series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: this.channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
itemStyle: {
color: 'transparent',
borderColor: color,
borderWidth: size / 2
}
}
}),
silent: true,
animation: false,
zlevel: 20
})
series.push(this.buildCtrlPoint(this.channelBaseCPChart))
this.list = table
this.option.series = series
@ -1037,7 +857,7 @@ export default {
table
} = result
this.$bus.$emit('refresh', {
this.$bus.$emit('gammaRefresh', {
allData,
channelPeakChart,
shadowChannelChart,
@ -1049,61 +869,16 @@ export default {
this.channelPeakChart = channelPeakChart
const series = []
// 推入旧的BaseLine
series.push(
buildLineSeries(
'BaseLine',
this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
this.channelBaseLineChart.color,
{
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
}
)
)
series.push(this.buildBaseLine(this.channelBaseLineChart))
// 推入旧的Count
series.push(
buildLineSeries(
'CountChart',
this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
this.channelCountChart.color
)
)
series.push(this.buildCountLine(this.channelCountChart))
// 推入Peak
const peakSeries = []
channelPeakChart.forEach((item, index) => {
peakSeries.push(
buildLineSeries(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
item.color
)
)
})
series.push(...peakSeries)
series.push(...this.buildPeaks(channelPeakChart))
// 推入旧的基线控制点
series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: this.buildCPPointData(this.channelBaseCPChart),
silent: true,
animation: false,
zlevel: 20
})
series.push(this.buildCtrlPoint(this.channelBaseCPChart))
this.list = table
this.option.series = series
@ -1219,8 +994,7 @@ export default {
this.thumbnailOption.yAxis.max = y2
if (this.btnGroupType == 2) {
this.buildGraphicRectByData()
this.buildGraphicPlusByData()
this.buildRect()
}
}
this.clearBrush(chart)
@ -1238,8 +1012,7 @@ export default {
this.thumbnailOption.yAxis.max = 'dataMax'
if (this.btnGroupType == 2) {
this.buildGraphicRectByData()
this.buildGraphicPlusByData()
this.buildRect()
}
},
@ -1248,14 +1021,12 @@ export default {
// 切换到Base Line 和 Control Point 操作
if (this.btnGroupType == 1) {
this.btnGroupType = 2
this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
this._channelBaseLineChart = cloneDeep(this.channelBaseLineChart)
this._baseCtrls = cloneDeep(this.BaseCtrls)
this.baseCtrls_Copy = cloneDeep(this.BaseCtrls)
// 供编辑的白色基线
const baseLineEditSeries = buildLineSeries(
'BaseLine_Edit',
this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
this.baseCtrls_Copy.baseline.map((val, index) => [index + 1, val]),
this.FitBaseLine,
{
zlevel: 21
@ -1263,15 +1034,16 @@ export default {
)
this.option.series.push(baseLineEditSeries)
this.buildGraphicRectByData()
this.buildGraphicPlusByData()
this.$nextTick(() => {
this.buildRect()
})
}
// 切换回 Peak 操作
else {
this.btnGroupType = 1
this.opts.notMerge = true
this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
this.removeGraphics()
this.clearRect()
const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
baseLineSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
@ -1290,121 +1062,46 @@ export default {
},
// 根据数据绘制小方块
buildGraphicRectByData() {
this.option.graphic[0].children.forEach(item => {
item.$action = 'remove'
})
this.$nextTick(() => {
this.option.graphic[0].children = this._channelBaseCPChart.map(({ point: { x, y } }) => {
return this.buildGraphicRect(x, y)
})
})
buildRect() {
this.$refs.rectListRef.init()
},
// 绘制单个红色小方块
buildGraphicRect(xAxis, yAxis) {
const chart = this.$refs.chartRef.getChartInstance()
const [xPix, yPix] = chart.convertToPixel('grid', [xAxis, yAxis])
const that = this
return {
type: 'rect',
id: Math.random().toString(),
$action: 'replace',
position: [xPix, yPix],
shape: {
x: -4,
y: -4,
width: 8,
height: 8
},
style: {
stroke: 'red',
fill: 'transparent',
lineWidth: 2
},
draggable: this.isModifying,
ondrag: function() {
const [xPixel] = chart.convertToPixel('grid', [xAxis, yAxis])
// 保持x轴不变
this.position[0] = xPixel
that.redrawBaseLine()
},
ondragend: ({ offsetY }) => {
this.setGraphicDraggable(false)
const _channelBaseCPChart = this._channelBaseCPChart
const rectIndex = _channelBaseCPChart.findIndex(item => item.point.x == xAxis)
// 拖动到的位置
const [, rectYAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
const willModifyPoint = this._channelBaseCPChart[rectIndex].point
this.pushOperationStack(Operators.MODIFY, {
index: rectIndex,
xAxis: willModifyPoint.x,
yAxis: willModifyPoint.y
})
// 改变控制点位置
willModifyPoint.y = rectYAxis
this.buildGraphicRectByData()
// 改变基线位置
const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
baseLineEditSeries.data[xAxis - 1][1] = rectYAxis
this._channelBaseLineChart.pointlist[xAxis - 1].y = rectYAxis
},
zlevel: 100
clearRect() {
const rectListRef = this.$refs.rectListRef
if (rectListRef) {
rectListRef.clear()
}
},
// 小方块移动
handleMove(yctrl) {
this.baseCtrls_Copy.yctrl = yctrl
this.redrawBaseLine()
},
// 小方块移动完毕
handleMoveEnd(prevYAxis, index) {
this.isModifying = false
this.pushOperationStack(Operators.MODIFY, {
index,
prevYAxis
})
},
// 重新生成基线
redrawBaseLine() {
console.log('%c [ 重新生成基线 ]-1355', 'font-size:13px; background:pink; color:#bf2c9f;')
},
try {
console.time('updateBaseLine')
const res = updateBaseLine(JSON.stringify(this.baseCtrls_Copy))
console.timeEnd('updateBaseLine')
const parsed = JSON.parse(res)
const { baseline } = parsed
const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
baseLineEditSeries.data = baseline.map((val, index) => [index + 1, val])
// 根据数据绘制 + 号
buildGraphicPlusByData() {
this.option.graphic[1].children.forEach(item => {
item.$action = 'remove'
})
this.$nextTick(() => {
const { xctrl: xctrlList, yctrl: yctrlList, yslope: yslopeList } = this._baseCtrls
const plusGraphic = []
xctrlList.forEach((xctrl, index) => {
const yctrl = yctrlList[index]
const yslope = yslopeList[index]
if (!isNullOrUndefined(yslope)) {
plusGraphic.push(this.buildGraphicPlus(xctrl - 2, yctrl - 2 * yslope))
plusGraphic.push(this.buildGraphicPlus(xctrl + 2, yctrl + 2 * yslope))
}
})
this.option.graphic[1].children = plusGraphic
})
},
// 绘制单个绿色加号
buildGraphicPlus(x, y) {
const chart = this.$refs.chartRef.getChartInstance()
const [xPix, yPix] = chart.convertToPixel('grid', [x, y])
return {
type: 'text',
id: Math.random().toString(),
$action: 'replace',
position: [xPix, yPix],
style: {
text: '+',
fill: '#0f0',
font: 'bolder 20px "Microsoft YaHei", sans-serif',
textAlign: 'center',
textVerticalAlign: 'middle'
},
zlevel: 101
this.baseCtrls_Copy.baseline = baseline
} catch (error) {
console.error(error)
}
},
@ -1412,9 +1109,6 @@ export default {
* 设置小方块可拖拽
*/
setGraphicDraggable(draggable) {
this.option.graphic[0].children.forEach(item => {
item.draggable = draggable
})
this.isModifying = draggable
},
@ -1427,16 +1121,13 @@ export default {
return
}
const chart = this.$refs.chartRef.getChartInstance()
const controlPointList = this.option.graphic[0].children
const { xctrl, yctrl, baseline, yslope } = this.baseCtrls_Copy
let i = 0 // 记录新控制点在列表中的位置
const [xPix] = chart.convertToPixel('grid', [this.currChannel, 0])
for (; i < controlPointList.length; ++i) {
const currCP = controlPointList[i].position[0]
if (currCP >= xPix) {
if (currCP == xPix) {
for (; i < xctrl.length; ++i) {
const currCP = xctrl[i]
if (currCP >= this.currChannel) {
if (currCP == this.currChannel) {
this.$message.warn(`The new control point in channel ${this.currChannel} exists, can't introduce twice`)
return
}
@ -1445,11 +1136,11 @@ export default {
}
// 新增的控制点跟基线的值平齐
const yAxis = this._channelBaseLineChart.pointlist[this.currChannel - 1].y
this._channelBaseCPChart.splice(i, 0, { point: { x: this.currChannel, y: yAxis } })
this.buildGraphicRectByData()
const yAxis = baseline[this.currChannel - 1]
xctrl.splice(i, 0, this.currChannel)
yctrl.splice(i, 0, yAxis)
yslope.splice(i, 0, 0)
this.buildRect()
this.pushOperationStack(Operators.ADD, { index: i })
},
@ -1457,28 +1148,34 @@ export default {
handleRemoveCP() {
this.setGraphicDraggable(false)
const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
// find nearest control-point
const controlPointList = this._channelBaseCPChart
let i = 1
for (; i < controlPointList.length; ++i) {
const { x: currXAxis } = controlPointList[i].point
for (; i < xctrl.length; ++i) {
const currXAxis = xctrl[i]
if (currXAxis >= this.currChannel) {
const { x: prevX } = controlPointList[i - 1].point
const prevX = xctrl[i - 1]
if (currXAxis - this.currChannel > this.currChannel - prevX) --i
break
}
}
if (i == 0 || i >= controlPointList.length - 1) {
if (i == 0 || i >= xctrl.length - 1) {
this.$message.warn("Can't remove first/last control point")
return
}
const [point] = controlPointList.splice(i, 1)
this.buildGraphicRectByData()
const [removeXAxis] = xctrl.splice(i, 1)
const [removeYAxis] = yctrl.splice(i, 1)
const [removeYSlope] = yslope.splice(i, 1)
this.buildRect()
this.redrawBaseLine()
this.pushOperationStack(Operators.REMOVE, {
index: i,
point: point.point
removeXAxis,
removeYAxis,
removeYSlope
})
},
@ -1491,7 +1188,7 @@ export default {
handleEditSlope() {
this.setGraphicDraggable(false)
const { xctrl, yslope } = this._baseCtrls
const { xctrl, yslope } = this.baseCtrls_Copy
if (!xctrl.length) {
this.$message.warn('No control points to be edited')
return
@ -1524,14 +1221,14 @@ export default {
return
}
const { yslope } = this._baseCtrls
const { yslope } = this.baseCtrls_Copy
yslope[index] = slope
this.pushOperationStack(Operators.SLOPE_CHANGE, {
index,
slope: prevSlope
})
this.buildGraphicPlusByData()
this.redrawBaseLine()
this.buildRect()
},
// 撤销
@ -1542,11 +1239,25 @@ export default {
// 将原先的基线和控制点移动到新位置
handleReplot() {
const { xctrl, yctrl, yslope, baseline } = this.baseCtrls_Copy
const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
baseLineSeries.data = this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y])
baseLineSeries.data = baseline.map((val, index) => [index + 1, val])
const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
baseLineCP.data = this.buildCPPointData(this._channelBaseCPChart)
// 第一个控制点（因为第一个和最后一个不会被删除）
const firstCP = this.channelBaseCPChart[0]
const { color, size } = firstCP
const baseCPPoints = xctrl.map((xAxis, index) => {
return {
size,
color,
point: {
x: xAxis,
y: yctrl[index]
}
}
})
baseLineCP.data = this.buildCPPointData(baseCPPoints)
},
/**
@ -1568,8 +1279,26 @@ export default {
// 确定对Baseline Control Points 的操作
handleAccept() {
this.channelBaseLineChart = this._channelBaseLineChart
this.channelBaseCPChart = this._channelBaseCPChart
this.BaseCtrls = cloneDeep(this.baseCtrls_Copy)
const { baseline, xctrl, yctrl } = this.BaseCtrls
this.channelBaseLineChart.pointlist = baseline.map((val, index) => {
return {
x: index + 1,
y: val
}
})
this.channelBaseCPChart = xctrl.map((val, index) => {
return {
color: this.channelBaseCPChart[0].color,
name: index.toString(),
point: {
x: val,
y: yctrl[index]
},
size: 4
}
})
this.handleSwitchOperation()
@ -1638,6 +1367,74 @@ export default {
}
},
// 构建baseline
buildBaseLine(channelBaseLineChart) {
return buildLineSeries(
'BaseLine',
channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
channelBaseLineChart.color,
{
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 1
},
data: [{ xAxis: -1 }]
},
zlevel: 10
}
)
},
// 构建count
buildCountLine(channelCountChart) {
return buildLineSeries(
'CountChart',
channelCountChart.pointlist.map(({ x, y }) => [x, y]),
channelCountChart.color
)
},
// 构建Peaks
buildPeaks(channelPeakChart) {
return channelPeakChart.map((item, index) => {
return buildLineSeries(
'Peak_' + (index + 1),
item.pointlist.map(({ x, y }) => [x, y]),
item.color
)
})
},
// 构建基线控制点
buildCtrlPoint(channelBaseCPChart) {
return {
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: this.buildCPPointData(channelBaseCPChart),
silent: true,
animation: false,
zlevel: 20
}
},
// 构建缩略图
buildBarChart(barChart) {
return buildLineSeries(
'BarChart',
barChart.map(({ x, y }) => [x, y]),
'#fff',
{
silent: true
}
)
},
/**
* 推入操作
* @param {*} operator 操作符
@ -1656,42 +1453,34 @@ export default {
popOperationStack() {
const { operator, operand } = this.operationStack.pop()
const { index } = operand
const { xctrl, yctrl, yslope } = this.baseCtrls_Copy
switch (operator) {
case Operators.ADD:
this._channelBaseCPChart.splice(index, 1)
this.buildGraphicRectByData()
xctrl.splice(index, 1)
yctrl.splice(index, 1)
yslope.splice(index, 1)
break
case Operators.MODIFY:
const { xAxis, yAxis } = operand
const { prevYAxis } = operand
// 恢复点的y轴位置
this._channelBaseCPChart[index].point.y = yAxis
this.buildGraphicRectByData()
// 恢复基线位置
const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
baseLineEditSeries.data[xAxis - 1] = [xAxis, yAxis]
this._channelBaseLineChart.pointlist[xAxis - 1].y = yAxis
yctrl[index] = prevYAxis
break
case Operators.REMOVE:
const {
point: { x, y }
} = operand
this._channelBaseCPChart.splice(index, 0, {
point: {
x,
y
}
})
this.buildGraphicRectByData()
const { removeXAxis, removeYAxis, removeYSlope } = operand
xctrl.splice(index, 0, removeXAxis)
yctrl.splice(index, 0, removeYAxis)
yslope.splice(index, 0, removeYSlope)
break
case Operators.SLOPE_CHANGE:
const { slope } = operand
const { yslope } = this._baseCtrls
yslope[index] = slope
break
}
this.buildRect()
// 恢复基线位置
this.redrawBaseLine()
},
/**
@ -1726,6 +1515,7 @@ export default {
.chart {
height: 331px;
position: relative;
}
.thumbnail {

1
src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
View File

@ -668,6 +668,7 @@ export default {
this.isUploadingZip = false
}
} else {
this.isUploadingZip = false
this.$message.error(message)
}
} catch (error) {

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

@ -1079,13 +1079,17 @@ export default {
handleRefresh(data) {
this.handleResetState()
data.DetailedInformation = this.detailedInfomation
this.clearCompareLine()
this.dataProsess(data)
},
// 分析工具Accept时刷新部分数据
handleAccept() {
console.log('%c [ 分析工具Accept时刷新部分数据 ]-1046', 'font-size:13px; background:pink; color:#bf2c9f;')
handleAccept(data) {
console.log('%c [ handleAccept ]-1088', 'font-size:13px; background:pink; color:#bf2c9f;', data)
this.handleResetState()
// data.DetailedInformation = this.detailedInfomation
this.clearCompareLine()
// this.dataProsess(data)
},
// 显示比较弹窗