刷选联动
This commit is contained in:
parent
b214308e23
commit
221a097dba
|
|
@ -358,7 +358,6 @@ export default {
|
|||
|
||||
const { success, result, message } = await putAction('/selfStation/updateROI', formData)
|
||||
if (success) {
|
||||
console.log('%c [ ]-353', 'font-size:13px; background:pink; color:#bf2c9f;', result)
|
||||
const {
|
||||
ROIOneList,
|
||||
ROITwoList,
|
||||
|
|
|
|||
|
|
@ -265,6 +265,9 @@ export default {
|
|||
isLog: true, // 当前右侧的图表是否是log
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
|
||||
},
|
||||
mounted() {
|
||||
this.opts.notMerge = true
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -359,6 +362,20 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
|
||||
this.$bus.$emit('roiLimitItemUnzoom')
|
||||
},
|
||||
|
||||
// 右侧四个图表范围变化
|
||||
handleLimitItemChange(x1, x2) {
|
||||
this.twoDOption.yAxis.min = x1
|
||||
this.twoDOption.yAxis.max = x2
|
||||
|
||||
this.buildScatterList()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
},
|
||||
|
||||
// 点击Log
|
||||
|
|
@ -416,6 +433,8 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.reDrawRect()
|
||||
})
|
||||
|
||||
this.$bus.$emit('roiLimitItemChange', y1, y2)
|
||||
}
|
||||
|
||||
this.clearBrush(chart)
|
||||
|
|
@ -562,23 +581,24 @@ export default {
|
|||
.boundary-item {
|
||||
position: absolute;
|
||||
border: 1px solid transparent;
|
||||
pointer-events: all;
|
||||
overflow: visible;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
width: 4px;
|
||||
bottom: 0;
|
||||
cursor: w-resize;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
right: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,14 +92,16 @@
|
|||
</template>
|
||||
</a-table>
|
||||
<!-- 表格结束 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="figure">
|
||||
<p class="title">Figure of Beta Detector Calibration</p>
|
||||
<div class="content">
|
||||
<div class="figure-chart">
|
||||
<custom-chart ref="figureChartRef" :option="figureChartOption" />
|
||||
<a-button type="primary" size="small" @click="handleSnapshot($refs.figureChartRef)">Snapshot</a-button>
|
||||
<div class="figure">
|
||||
<p class="title">Figure of Beta Detector Calibration</p>
|
||||
<div class="content">
|
||||
<div class="figure-chart">
|
||||
<custom-chart ref="figureChartRef" :option="figureChartOption" />
|
||||
<a-button type="primary" size="small" @click="handleSnapshot($refs.figureChartRef)"
|
||||
>Snapshot</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -238,8 +240,8 @@ const initialBetaGammaChartOption = {
|
|||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64,
|
||||
max: 512,
|
||||
interval: 128,
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Gamma Channel',
|
||||
|
|
@ -268,8 +270,8 @@ const initialBetaGammaChartOption = {
|
|||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64,
|
||||
max: 4096,
|
||||
interval: 1024,
|
||||
},
|
||||
series: {
|
||||
type: 'scatterGL',
|
||||
|
|
@ -585,7 +587,7 @@ export default {
|
|||
|
||||
gammaEnergy: [],
|
||||
gammaGatedBetaSpectrum: [],
|
||||
gammaChannelWidth: 5, // 左上角 Gamma Channel Width
|
||||
gammaChannelWidth: 90, // 左上角 Gamma Channel Width
|
||||
betaGammaInfo: {}, // 左上角 鼠标悬停在散点图上时的channel和energy信息
|
||||
|
||||
markLineVisible: false,
|
||||
|
|
@ -734,8 +736,8 @@ export default {
|
|||
|
||||
this.currEnergy = this.gammaEnergy[yAxis][0].toPrecision(6) // 设置当前选中位置的Energy
|
||||
this.channelAndEnergyModel = {
|
||||
channel: undefined,
|
||||
energy: undefined,
|
||||
channel: yAxis,
|
||||
energy: this.currEnergy,
|
||||
}
|
||||
|
||||
this.getGammaGated(yAxis)
|
||||
|
|
@ -754,7 +756,7 @@ export default {
|
|||
result: { data },
|
||||
message,
|
||||
} = await getAction(
|
||||
'/spectrumAnalysis/getGammaGated',
|
||||
'/selfStation/getGammaGated',
|
||||
{
|
||||
gammaChannel,
|
||||
sampleId,
|
||||
|
|
@ -939,7 +941,7 @@ export default {
|
|||
|
||||
// 按乔的要求增加请求reset的接口 20231211：xiao
|
||||
const res = await postAction(
|
||||
'/spectrumAnalysis/resetButton?tabName=beta&sampleFileName=' + this.newSampleData.inputFileName,
|
||||
'/selfStation/resetButton?tabName=beta&sampleFileName=' + this.newSampleData.inputFileName,
|
||||
{}
|
||||
)
|
||||
|
||||
|
|
@ -958,7 +960,7 @@ export default {
|
|||
return
|
||||
}
|
||||
try {
|
||||
const { success, result, message } = await postAction('/spectrumAnalysis/fitting', {
|
||||
const { success, result, message } = await postAction('/selfStation/fitting', {
|
||||
...(this.list.length <= 0 ? this.newCalibrationFuncModel : []), // 如果list有数据则不传 C to E 表单数据 20231101：xiao
|
||||
sampleFileName: this.newSampleData.inputFileName,
|
||||
tabName: 'beta',
|
||||
|
|
@ -1089,7 +1091,7 @@ export default {
|
|||
rectHeight() {
|
||||
const { top, bottom } = initialBetaGammaChartOption.grid
|
||||
const totalHeight = 427 - top - bottom
|
||||
return (totalHeight / 256) * this.gammaChannelWidth
|
||||
return (totalHeight / 4096) * this.gammaChannelWidth
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -1137,7 +1139,7 @@ p {
|
|||
}
|
||||
|
||||
.beta-gamma-chart {
|
||||
height: 353px;
|
||||
height: 608px;
|
||||
position: relative;
|
||||
|
||||
.markline {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="roi-limit-item-content">
|
||||
<custom-chart :option="option" autoresize />
|
||||
<custom-chart
|
||||
ref="chartRef"
|
||||
:option="option"
|
||||
autoresize
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -29,7 +36,7 @@ import {
|
|||
scacLineSeries,
|
||||
spectrumSeries,
|
||||
} from '@/views/spectrumAnalysis/seriesBuilder'
|
||||
import { buildLineSeries, findSeriesByName } from '@/utils/chartHelper'
|
||||
import { buildLineSeries, findSeriesByName, getAxisMax, rangeNumber } from '@/utils/chartHelper'
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
|
|
@ -73,8 +80,9 @@ const option = {
|
|||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
min: 1,
|
||||
max: 'dataMax',
|
||||
min: 0,
|
||||
max: 4096,
|
||||
interval: 1024,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'log',
|
||||
|
|
@ -109,6 +117,7 @@ const option = {
|
|||
max: 'dataMax',
|
||||
},
|
||||
series: [spectrumSeries, baseLineSeries, lcLineSeries, scacLineSeries, baseLineCtrlPoint],
|
||||
brush: {},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -160,10 +169,15 @@ export default {
|
|||
created() {
|
||||
this.option.tooltip.formatter = this.handleTooltipFormat
|
||||
this.option.series[0].itemStyle.color = 'yellow'
|
||||
this.option.brush = { toolbox: [] }
|
||||
this.$bus.$on('changeROILimitsYAxisType', this.changeYAxisType)
|
||||
this.$bus.$on('roiLimitItemUnzoom', this.handleUnZoom)
|
||||
this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.$off('changeROILimitsYAxisType', this.changeYAxisType)
|
||||
this.$bus.$off('roiLimitItemUnzoom', this.handleUnZoom)
|
||||
this.$bus.$off('roiLimitItemChange', this.handleLimitItemChange)
|
||||
},
|
||||
methods: {
|
||||
handleTooltipFormat(params) {
|
||||
|
|
@ -321,6 +335,94 @@ export default {
|
|||
changeYAxisType(isLog) {
|
||||
this.option.yAxis.type = isLog ? 'log' : 'value'
|
||||
},
|
||||
|
||||
getChart() {
|
||||
return this.$refs.chartRef.getChartInstance()
|
||||
},
|
||||
|
||||
// 鼠标按下时开启可刷选状态
|
||||
handleMouseDown() {
|
||||
this.getChart().dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
||||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
this.$nextTick(() => {
|
||||
this.clearBrush()
|
||||
})
|
||||
},
|
||||
|
||||
clearBrush() {
|
||||
const chart = this.getChart()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: [],
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
})
|
||||
},
|
||||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.getChart()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
// 拿到之前的最大值
|
||||
const xAxisMax = getAxisMax(chart, 'xAxis')
|
||||
const yAxisMax = getAxisMax(chart, 'yAxis')
|
||||
|
||||
// 拿到之前的最小值
|
||||
const xAxisMin = this.option.xAxis.min
|
||||
const yAxisMin = this.option.yAxis.min
|
||||
|
||||
let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
const xAxisLimit = rangeNumber(xAxisMin, xAxisMax)
|
||||
const yAxisLimit = rangeNumber(yAxisMin, yAxisMax)
|
||||
|
||||
x1 = xAxisLimit(x1)
|
||||
x2 = xAxisLimit(x2)
|
||||
|
||||
y1 = yAxisLimit(y1)
|
||||
y2 = yAxisLimit(y2)
|
||||
|
||||
this.option.xAxis.min = x1
|
||||
this.option.xAxis.max = x2
|
||||
this.option.yAxis.min = y1
|
||||
this.option.yAxis.max = y2
|
||||
|
||||
this.$bus.$emit('roiLimitItemChange', x1, x2)
|
||||
}
|
||||
},
|
||||
|
||||
handleUnZoom() {
|
||||
this.option.xAxis.min = 0
|
||||
this.option.xAxis.max = 4096
|
||||
this.option.yAxis.min = 1
|
||||
this.option.yAxis.max = 'dataMax'
|
||||
},
|
||||
|
||||
handleLimitItemChange(x1, x2) {
|
||||
this.option.xAxis.min = x1
|
||||
this.option.xAxis.max = x2
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
roiList: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user