diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
index 85f7291..ff76c75 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -291,7 +291,18 @@ const initialOption = {
},
series: [],
brush: {},
- graphic: []
+ graphic: [
+ {
+ type: 'group',
+ id: 1,
+ children: []
+ },
+ {
+ type: 'group',
+ id: 2,
+ children: []
+ }
+ ]
}
const columns = [
@@ -555,16 +566,7 @@ export default {
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
- }
- }
- }),
+ data: this.buildCPPointData(channelBaseCPChart),
silent: true,
animation: false,
zlevel: 20
@@ -593,15 +595,18 @@ export default {
this.currChannel = undefined
this.btnGroupType = 1
this.opts.notMerge = false
-
- this.option.graphic = []
-
this.isFitting = false
-
this.$nextTick(() => {
this.option.brush = { toolbox: [] }
this.selectedKeys = []
})
+ this.removeGraphics()
+ },
+
+ // 清空graphic(小方块和加号)
+ removeGraphics() {
+ this.option.graphic[0].children = []
+ this.option.graphic[1].children = []
},
beforeModalOpen() {
@@ -804,7 +809,7 @@ export default {
table
} = result
- this.$emit('refresh', {
+ this.$bus.$emit('refresh', {
allData,
channelPeakChart,
shadowChannelChart,
@@ -1022,7 +1027,7 @@ export default {
table
} = result
- this.$emit('refresh', {
+ this.$bus.$emit('refresh', {
allData,
channelPeakChart,
shadowChannelChart,
@@ -1084,16 +1089,7 @@ export default {
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
- }
- }
- }),
+ data: this.buildCPPointData(this.channelBaseCPChart),
silent: true,
animation: false,
zlevel: 20
@@ -1213,11 +1209,8 @@ export default {
this.thumbnailOption.yAxis.max = y2
if (this.btnGroupType == 2) {
- this.$nextTick(() => {
- this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
- return this.buildGraphicPoint(chart, x, y)
- })
- })
+ this.buildGraphicRectByData()
+ this.buildGraphicPlusByData()
}
}
this.clearBrush(chart)
@@ -1235,12 +1228,8 @@ export default {
this.thumbnailOption.yAxis.max = 'dataMax'
if (this.btnGroupType == 2) {
- const chart = this.$refs.chartRef.getChartInstance()
- this.$nextTick(() => {
- this.option.graphic = this._channelBaseCPChart.map(({ point: { x, y } }) => {
- return this.buildGraphicPoint(chart, x, y)
- })
- })
+ this.buildGraphicRectByData()
+ this.buildGraphicPlusByData()
}
},
@@ -1249,32 +1238,36 @@ export default {
// 切换到Base Line 和 Control Point 操作
if (this.btnGroupType == 1) {
this.btnGroupType = 2
- const originalCPSeries = findSeriesByName(this.option.series, 'BaseLine')
-
- const baseLineEditSeries = buildLineSeries('BaseLine_Edit', cloneDeep(originalCPSeries.data), '#fff', {
- zlevel: 21
- })
+ this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
+ this._channelBaseLineChart = cloneDeep(this.channelBaseLineChart)
+ this._baseCtrls = cloneDeep(this.BaseCtrls)
+ // 供编辑的白色基线
+ const baseLineEditSeries = buildLineSeries(
+ 'BaseLine_Edit',
+ this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
+ '#fff',
+ {
+ zlevel: 21
+ }
+ )
this.option.series.push(baseLineEditSeries)
- const chart = this.$refs.chartRef.getChartInstance()
-
- this.option.graphic = this.channelBaseCPChart.map(({ point: { x, y } }) => {
- return this.buildGraphicPoint(chart, x, y)
- })
-
- this._channelBaseCPChart = cloneDeep(this.channelBaseCPChart)
- this._baseCtrls = cloneDeep(this.BaseCtrls)
+ this.buildGraphicRectByData()
+ this.buildGraphicPlusByData()
}
// 切换回 Peak 操作
else {
this.btnGroupType = 1
this.opts.notMerge = true
this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
- this.option.graphic = [] // 去掉移动控制点时的小方框
+ this.removeGraphics()
- const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine')
- baseLineEditSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
+ const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
+ baseLineSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
+
+ const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+ baseLineCP.data = this.buildCPPointData(this.channelBaseCPChart)
this.$nextTick(() => {
this.resetChartOpts()
@@ -1286,10 +1279,27 @@ export default {
this.clearOperationStack()
},
- buildGraphicPoint(chart, x, y) {
- const [xPix, yPix] = chart.convertToPixel('grid', [x, y])
+ // 根据数据绘制小方块
+ 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)
+ })
+ })
+ },
+
+ // 绘制单个红色小方块
+ buildGraphicRect(xAxis, yAxis) {
+ const chart = this.$refs.chartRef.getChartInstance()
+ const [xPix, yPix] = chart.convertToPixel('grid', [xAxis, yAxis])
return {
type: 'rect',
+ id: Math.random().toString(),
+ $action: 'replace',
position: [xPix, yPix],
shape: {
x: -4,
@@ -1304,39 +1314,87 @@ export default {
},
draggable: false,
ondrag: function() {
- const [xPixel] = chart.convertToPixel('grid', [x, y])
+ const [xPixel] = chart.convertToPixel('grid', [xAxis, yAxis])
+ // 保持x轴不变
this.position[0] = xPixel
},
ondragend: ({ offsetY }) => {
- const graphic = this.option.graphic
-
- const dataIndex = graphic.findIndex(item => item.position[0] == xPix)
-
- this.option.graphic[dataIndex].position = [xPix, offsetY]
this.setGraphicDraggable(false)
- const [xAxis, yAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
+ const _channelBaseCPChart = this._channelBaseCPChart
+ const rectIndex = _channelBaseCPChart.findIndex(item => item.point.x == xAxis)
- const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
-
- baseLineEditSeries.data[parseInt(xAxis) - 1] = [x, yAxis]
-
- this._channelBaseCPChart[dataIndex].point.y = yAxis
+ // 拖动到的位置
+ const [, rectYAxis] = getXAxisAndYAxisByPosition(chart, xPix, offsetY)
+ const willModifyPoint = this._channelBaseCPChart[rectIndex].point
this.pushOperationStack(Operators.MODIFY, {
- index: dataIndex,
- position: [xPix, yPix]
+ 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
}
},
+ // 根据数据绘制 + 号
+ 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 (yslope != 0) {
+ 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: {
+ x: -10,
+ y: -10,
+ text: '+',
+ fill: '#0f0',
+ font: 'bolder 20px "Microsoft YaHei", sans-serif'
+ },
+ zlevel: 101
+ }
+ },
+
/**
* 设置小方块可拖拽
*/
setGraphicDraggable(draggable) {
- this.option.graphic.forEach(item => {
+ this.option.graphic[0].children.forEach(item => {
item.draggable = draggable
})
this.isModifying = draggable
@@ -1345,24 +1403,15 @@ export default {
// 在当前选中的红线位置新增控制点
handleAddCP() {
this.setGraphicDraggable(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 || this.currChannel > rg_high) {
this.$message.warn("Can't insert Control Point out of range")
return
}
const chart = this.$refs.chartRef.getChartInstance()
- const controlPointList = this.option.graphic
- const find = controlPointList.find(item => {
- return item.position[0] == xPix
- })
- if (find) {
- return
- }
+ const controlPointList = this.option.graphic[0].children
let i = 0 // 记录新控制点在列表中的位置
const [xPix] = chart.convertToPixel('grid', [this.currChannel, 0])
@@ -1377,12 +1426,11 @@ export default {
}
}
- const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine_Edit')
-
- const yAxis = baseLineEditSeries.data[this.currChannel - 1][1]
- this.option.graphic.splice(i, 0, this.buildGraphicPoint(chart, this.currChannel, yAxis))
+ // 新增的控制点跟基线的值平齐
+ const yAxis = this._channelBaseLineChart.pointlist[this.currChannel - 1].y
this._channelBaseCPChart.splice(i, 0, { point: { x: this.currChannel, y: yAxis } })
+ this.buildGraphicRectByData()
this.pushOperationStack(Operators.ADD, { index: i })
},
@@ -1392,16 +1440,13 @@ export default {
this.setGraphicDraggable(false)
// find nearest control-point
- const chart = this.$refs.chartRef.getChartInstance()
- const controlPointList = this.option.graphic
+ const controlPointList = this._channelBaseCPChart
let i = 1
for (; i < controlPointList.length; ++i) {
- const [currX, currY] = controlPointList[i].position
- const [currXAxis] = getXAxisAndYAxisByPosition(chart, currX, currY)
+ const { x: currXAxis } = controlPointList[i].point
if (currXAxis >= this.currChannel) {
- const [prevX, prevY] = controlPointList[i - 1].position
- const [prevXAxis] = getXAxisAndYAxisByPosition(chart, prevX, prevY)
- if (currXAxis - this.currChannel > this.currChannel - prevXAxis) --i
+ const { x: prevX } = controlPointList[i - 1].point
+ if (currXAxis - this.currChannel > this.currChannel - prevX) --i
break
}
}
@@ -1412,10 +1457,10 @@ export default {
}
const [point] = controlPointList.splice(i, 1)
-
+ this.buildGraphicRectByData()
this.pushOperationStack(Operators.REMOVE, {
index: i,
- point
+ point: point.point
})
},
@@ -1467,6 +1512,8 @@ export default {
index,
slope: prevSlope
})
+
+ this.buildGraphicPlusByData()
},
// 撤销
@@ -1476,10 +1523,40 @@ export default {
},
// 将原先的基线和控制点移动到新位置
- handleReplot() {},
+ handleReplot() {
+ const baseLineSeries = findSeriesByName(this.option.series, 'BaseLine')
+ baseLineSeries.data = this._channelBaseLineChart.pointlist.map(({ x, y }) => [x, y])
+
+ const baseLineCP = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+ baseLineCP.data = this.buildCPPointData(this._channelBaseCPChart)
+ },
+
+ /**
+ * 构建基线控制点数据
+ * @param {Array} controlPointList
+ **/
+ buildCPPointData(controlPointList) {
+ return controlPointList.map(({ size, color, point: { x, y } }) => {
+ return {
+ value: [x, y],
+ itemStyle: {
+ color: 'transparent',
+ borderColor: color,
+ borderWidth: size / 2
+ }
+ }
+ })
+ },
// 确定对Baseline Control Points 的操作
- handleAccept() {},
+ handleAccept() {
+ this.channelBaseLineChart = this._channelBaseLineChart
+ this.channelBaseCPChart = this._channelBaseCPChart
+
+ this.handleSwitchOperation()
+
+ this.$bus.$emit('accept')
+ },
// 右下角添加当前选中的nuclide
async handleAddNuclide() {
@@ -1563,16 +1640,33 @@ export default {
const { index } = operand
switch (operator) {
case Operators.ADD:
- this.option.graphic.splice(index, 1)
this._channelBaseCPChart.splice(index, 1)
+ this.buildGraphicRectByData()
break
case Operators.MODIFY:
- const { position } = operand
- this.option.graphic[index].position = position
+ const { xAxis, yAxis } = 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
break
case Operators.REMOVE:
- const { point } = operand
- this.option.graphic.splice(index, 0, point)
+ const {
+ point: { x, y }
+ } = operand
+ this._channelBaseCPChart.splice(index, 0, {
+ point: {
+ x,
+ y
+ }
+ })
+ this.buildGraphicRectByData()
break
case Operators.SLOPE_CHANGE:
const { slope } = operand
diff --git a/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue b/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
index b87f8f1..efb6593 100644
--- a/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
@@ -76,21 +76,21 @@ export default {
this.configList = configList
return {
config: {
- Color_Spec: { hex: 'yellow' }, // Spectrum 颜色
- Color_Base: { hex: 'rgb(0, 246, 255)' }, // 基线颜色
- Color_Lc: { hex: 'red' }, // LC 颜色
- Color_Scac: { hex: 'rgb(244, 112, 247)' }, // Scac 颜色
- Color_Peak: { hex: 'rgb(255, 127, 39)' }, // Peak 颜色
- Color_Compare: { hex: 'green' }, // Sample -> Compare下的颜色
- Color_Strip: { hex: 'rgb(0, 0, 255)' }, // Sample -> Compare下的颜色
- spectCutLine: { hex: 'rgb(33, 90, 104)' }, // 无作用
- Color_Fitbase: { hex: 'white' } // Interactive Tool 弹窗中,进入BaseLine编辑模式时的基线副本的颜色
+ Color_Spec: 'yellow', // Spectrum 颜色
+ Color_Base: 'rgb(0, 246, 255)', // 基线颜色
+ Color_Lc: 'red', // LC 颜色
+ Color_Scac: 'rgb(244, 112, 247)', // Scac 颜色
+ Color_Peak: 'rgb(255, 127, 39)', // Peak 颜色
+ Color_Compare: 'green', // Sample -> Compare下的颜色
+ Color_Strip: 'rgb(0, 0, 255)', // Sample -> Compare下的颜色
+ spectCutLine: 'rgb(33, 90, 104)', // 无作用
+ Color_Fitbase: 'white' // Interactive Tool 弹窗中,进入BaseLine编辑模式时的基线副本的颜色
}
}
},
methods: {
- combineRGBA({ hex }) {
- return hex
+ combineRGBA(color) {
+ return color
},
async getData() {
@@ -99,7 +99,7 @@ export default {
const { success, result, message } = await getAction('/gamma/viewColorConfig')
if (success) {
Object.entries(result).forEach(([k, v]) => {
- this.config[k].hex = v
+ this.config[k] = v
})
} else {
this.$message.error(message)
@@ -128,20 +128,20 @@ export default {
Color_Fitbase
} = this.config
const { success, message } = await putAction('/gamma/updateColorConfig', {
- colorSpec: Color_Spec.hex,
- colorPeak: Color_Peak.hex,
- colorLc: Color_Lc.hex,
- colorBase: Color_Base.hex,
- colorScac: Color_Scac.hex,
- colorCompare: Color_Compare.hex,
- colorFitbase: Color_Fitbase.hex,
- colorStrip: Color_Strip.hex
+ colorSpec: Color_Spec,
+ colorPeak: Color_Peak,
+ colorLc: Color_Lc,
+ colorBase: Color_Base,
+ colorScac: Color_Scac,
+ colorCompare: Color_Compare,
+ colorFitbase: Color_Fitbase,
+ colorStrip: Color_Strip
})
if (success) {
this.$bus.$emit(
'colorChange',
Object.entries(this.config).reduce((prev, [key, value]) => {
- prev[key] = value.hex
+ prev[key] = value
return prev
}, {})
)
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
index 8f28d5a..fffffb5 100644
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -277,16 +277,14 @@ export default {
},
created() {
this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
- this.$bus.$on('colorChange', colorConfig => {
- // 如果还没加载完,加载新的
- if (this.isLoading) {
- this.getSampleDetail()
- }
- // 否则修改已有颜色
- else {
- this.changeColor(colorConfig)
- }
- })
+ this.$bus.$on('colorChange', this.handleColorChange)
+ this.$bus.$on('gammaRefresh', this.handleRefresh)
+ this.$bus.$on('accept', this.handleAccept)
+ },
+ destroyed() {
+ this.$bus.$off('colorChange', this.handleColorChange)
+ this.$bus.$off('gammaRefresh', this.handleRefresh)
+ this.$bus.$off('accept', this.handleAccept)
},
mounted() {
this.option.brush = { toolbox: [] }
@@ -650,7 +648,7 @@ export default {
// 重绘Peak Line
redrawPeakLine() {
this.option.series = this.option.series.filter(item => {
- return -1 == item.name.includes('Peak_')
+ return !item.name.includes('Peak_')
})
const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
@@ -985,7 +983,7 @@ export default {
},
// 从分析工具刷新部分数据
- refresh(data) {
+ handleRefresh(data) {
const { allData, shadowChannelChart, shadowEnergyChart, shapeChannelData, shapeEnergyData } = data
const channelPeakGroup = allData.filter(item => item.name == 'Peak' && item.group == 'channel')
@@ -1042,6 +1040,11 @@ export default {
})
},
+ // 分析工具Accept时刷新部分数据
+ handleAccept() {
+ console.log('%c [ 分析工具Accept时刷新部分数据 ]-1046', 'font-size:13px; background:pink; color:#bf2c9f;')
+ },
+
// 重置图表配置
resetChartOpts() {
this.opts.notMerge = false
@@ -1104,6 +1107,17 @@ export default {
this.graphAssistance = cloneDeep(graphAssistance)
},
+ handleColorChange(colorConfig) {
+ // 如果还没加载完,加载新的
+ if (this.isLoading) {
+ this.getSampleDetail()
+ }
+ // 否则修改已有颜色
+ else {
+ this.changeColor(colorConfig)
+ }
+ },
+
// 修改颜色
changeColor(colorConfig) {
const {
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 8b5a684..bc657ed 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -76,7 +76,7 @@
-
+
@@ -480,11 +480,6 @@ export default {
this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
},
- // 从分析工具刷新gamma图表
- handleRefreshGamma(data) {
- this.$refs.gammaAnalysisRef.refresh(data)
- },
-
// Beta-Gamma Energy Calibration 的重新分析
handleReanalyse(...data) {
this.$refs.betaGammaAnalysisRef.reanalyse(data)