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)