diff --git a/src/views/spectrumAnalysis/beta-analysis.vue b/src/views/spectrumAnalysis/beta-analysis.vue index 95ec126..7e4fe15 100644 --- a/src/views/spectrumAnalysis/beta-analysis.vue +++ b/src/views/spectrumAnalysis/beta-analysis.vue @@ -34,6 +34,7 @@ :gammaEnergyData="gammaEnergyData" :histogramDataList="histogramDataList" :boundary="boundaryList" + :isLoading.sync="isLoading" :currIdx="currIdx" @refreshRoi="refreshRoi" /> diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue index 209cf5d..eef4c43 100644 --- a/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue +++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue @@ -19,6 +19,7 @@ [], @@ -398,7 +400,7 @@ export default { newVal.forEach((item, index) => { item.color = '#99CA53' }) - this.boundaryData = newVal[0] + this.boundaryData = newVal[this.currIdx] this.reDrawRect() }, // immediate: true, @@ -418,6 +420,7 @@ export default { }, boundaryData: { handler(newVal) { + this.opts.notMerge = false const { minX, maxX, minY, maxY, color } = newVal this.startChannel = minX this.endChannel = maxX @@ -431,22 +434,22 @@ export default { this.myChart.convertToPixel({ yAxisId: '3' }, maxY), ] graphic1.ondrag = function () { - const rectList = [] + let [a, lineSeries] = _this.twoDOption.series _this.startChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])) const rect = [ [_this.startChannel, minY], [_this.endChannel, minY], [_this.endChannel, maxY], [_this.startChannel, maxY], + [_this.startChannel, minY], ] - rectList.push(..._this.drawOneRect(rect, color)) - _this.myChart.setOption({ - series: { - markLine: { - data: rectList, - }, - }, - }) + lineSeries.data = _this.drawOneRect(rect, color).data + // const lineSeries = { + // type: 'line', + // ..._this.drawOneRect(rect, color), + // zlevel: 11, + // } + // _this.twoDOption.series.splice(1, _this.twoDOption.series.length - 1, ...lineSeries) } graphic2.shape.height = graphicHeight graphic2.position = [ @@ -454,22 +457,16 @@ export default { this.myChart.convertToPixel({ yAxisId: '3' }, maxY), ] graphic2.ondrag = function () { - const rectList = [] + let [a, lineSeries] = _this.twoDOption.series _this.endChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])) const rect = [ [_this.startChannel, minY], [_this.endChannel, minY], [_this.endChannel, maxY], [_this.startChannel, maxY], + [_this.startChannel, minY], ] - rectList.push(..._this.drawOneRect(rect, color)) - _this.myChart.setOption({ - series: { - markLine: { - data: rectList, - }, - }, - }) + lineSeries.data = _this.drawOneRect(rect, color).data } this.myChart.setOption(this.dragOption) }, @@ -489,10 +486,17 @@ export default { myChart: null, startChannel: null, endChannel: null, + opts: { + notMerge: false, + }, } }, mounted() { - this.twoDOption.brush = { toolbox: [] } + this.opts.notMerge = true + this.$nextTick(() => { + this.opts.notMerge = false + this.twoDOption.brush = { toolbox: [] } + }) }, methods: { // Gamma 的折线图数据 @@ -512,7 +516,7 @@ export default { yAxis: { min: minY, max: maxY }, } = this.twoDOption - this.twoDOption.series.data = this.histogramDataList + this.twoDOption.series[0].data = this.histogramDataList .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY) .map(({ b, g, c }) => this.buildScatterItem(b, g, c)) }, @@ -530,215 +534,34 @@ export default { // 重绘矩形框区域 reDrawRect() { const rectList = [] - + let [a, lineSeries] = this.twoDOption.series if (this.showROI) { const { minX, maxX, minY, maxY, color } = this.boundaryData - // rect 遵循 左下 右下 右上 左上 的顺序 + // rect 遵循 左下 右下 右上 左上 左下 的顺序 const rect = [ [minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY], + [minX, minY], ] - - rectList.push(...this.drawOneRect(rect, color)) + lineSeries.data = this.drawOneRect(rect, color).data + } else { + lineSeries.data = [] } - this.twoDOption.series.markLine.data = rectList }, /** * 绘制一个矩形框区域 - * 矩形框在这里的实现是由几条线段围起来的，但由于线段在超出图表区域显示有问题，故作了以下处理 - * @param {*} rect 左下 右下 右上 左上 的顺序 + * @param {*} rect 左下 右下 右上 左上 左下 的顺序 */ drawOneRect(rect, color) { - const rectList = [] - const { - xAxis: { min: minX, max: maxX }, - yAxis: { min: minY, max: maxY }, - } = this.twoDOption - debugger - const inchartPoints = this.getInChartPoints(rect) - const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem)) - // 如果框选范围内只有俩点 - if (inchartPoints.length == 2) { - const [point1, point2] = inchartPoints - const isVerticleLine = this.isVerticleLine(point1, point2) - // 如果是纵向标记线，判断另两个点是在左边还是右边 - if (isVerticleLine) { - const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点 - // 判断在图表外的这个点是在左边还是右边 - const isLeft = find[0] <= point1[0] - /** - * 如果在左边，推入左边俩点构成矩形 - * y - * |________________ - * | | - * |________________| - * | - * |——————————————————— x - **/ - - if (isLeft) { - inchartPoints.forEach((point) => { - rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point)) - }) - - rectList.push(this.generateLineDataByTwoPoints(point1, point2)) - } - // 如果是右边，同理，推入右边俩点构成矩形 - else { - inchartPoints.forEach((point) => { - rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point)) - }) - rectList.push(this.generateLineDataByTwoPoints(point1, point2)) - } - } - // 如果是纵向标记线，判断另两个点是在上边还是下边 - else { - const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点 - // 判断在图表外的这个点是在上边还是右边 - const isBottom = find[1] <= point1[1] - /** - * 如果在下边，推入下边俩点构成矩形 - **/ - - if (isBottom) { - inchartPoints.forEach((point) => { - rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point)) - }) - - rectList.push(this.generateLineDataByTwoPoints(point1, point2)) - } - // 如果是上边，同理，推入上边俩点构成矩形 - else { - inchartPoints.forEach((point) => { - rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point)) - }) - - rectList.push(this.generateLineDataByTwoPoints(point1, point2)) - } - } - } - // 只有一个点在范围内，则是选中了矩形的一个角 - else if (inchartPoints.length == 1) { - const point = inchartPoints[0] - const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0]) - const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1]) - // 截取的右上角 - if (isLeft && isBottom) { - rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]])) - rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY])) - } - // 截取的右下角 - if (isLeft && !isBottom) { - rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]])) - rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY])) - } - // 截取的左下角 - if (!isLeft && !isBottom) { - rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]])) - rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY])) - } - // 截取的左上角 - if (!isLeft && isBottom) { - rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]])) - rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY])) - } - } - // 全在里面 - else if (inchartPoints.length == 4) { - // 按顺序挨个连起来，并且尾部连到头部 - rect.forEach((point, index) => { - if (index == rect.length - 1) { - rectList.push(this.generateLineDataByTwoPoints(point, rect[0])) - } else { - rectList.push(this.generateLineDataByTwoPoints(point, rect[index + 1])) - } - }) - } - // 全不在里面 - else { - // 筛选出所有的在框选范围内的横坐标 - const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX) - const leftBottomPoint = rect[0] - const rightBottomPoint = rect[1] - const rightTopPoint = rect[3] - const minYAxis = rightBottomPoint[1] - const maYAxis = rightTopPoint[1] - // 需要显示左右两侧的框线 - if (xAxisList.length == 4 && minYAxis < minY && maYAxis > maxY) { - const minAxis = Math.min(...xAxisList) - const maxAxis = Math.max(...xAxisList) - rectList.push(this.generateLineDataByTwoPoints([minAxis, minY], [minAxis, maxY])) - rectList.push(this.generateLineDataByTwoPoints([maxAxis, minY], [maxAxis, maxY])) - } - // 需要显示左右其中一条框线 - else if (xAxisList.length == 2 && minYAxis < minY && maYAxis > maxY) { - const xAxis = xAxisList[0] - rectList.push(this.generateLineDataByTwoPoints([xAxis, minY], [xAxis, maxY])) - } - - // 筛选出所有的在框选范围内的横坐标 - const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY) - const minXAxis = leftBottomPoint[0] - const maxXAxis = rightBottomPoint[0] - // 需要显示上下两侧的框线 - if (yAxisList.length == 4 && minXAxis < minX && maxXAxis > maxX) { - const minAxis = Math.min(...yAxisList) - const maxAxis = Math.max(...yAxisList) - rectList.push(this.generateLineDataByTwoPoints([minX, minAxis], [maxX, minAxis])) - rectList.push(this.generateLineDataByTwoPoints([minX, maxAxis], [maxX, maxAxis])) - } - // 需要显示左右其中一条框线 - else if (yAxisList.length == 2 && minXAxis < minX && maxXAxis > maxX) { - const yAxis = yAxisList[0] - rectList.push(this.generateLineDataByTwoPoints([minX, yAxis], [maxX, yAxis])) - } - } - // 补齐颜色 - rectList.forEach((item) => { - item[0].lineStyle = { + return { + data: rect, + symbol: 'none', + itemStyle: { color, - } - }) - return rectList - }, - /** - * 获取在框选范围内的点列表 - * @param { Array> } rectInfo - */ - getInChartPoints(rectInfo) { - const { - xAxis: { min: minX, max: maxX }, - yAxis: { min: minY, max: maxY }, - } = this.twoDOption - - return rectInfo.filter((point) => { - const [xAxis, yAxis] = point - return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY - }) - }, - /** - * 根据俩点判断是横向还是纵向 - * x坐标相同，则是纵向，否则横向 - */ - isVerticleLine(point1, point2) { - return point1[0] == point2[0] ? true : false - }, - /** - * 根据两个点生成一个markLine直线 - */ - generateLineDataByTwoPoints(point1, point2) { - return [ - { - xAxis: point1[0], - yAxis: point1[1], }, - { - xAxis: point2[0], - yAxis: point2[1], - }, - ] + } }, // 点击改变 ROI LIMITS handleChange(index) { @@ -752,7 +575,7 @@ export default { this.twoDOption.yAxis.max = 4096 // this.emitRangeChange([0, 256, 0, 256]) - this.reDrawRect() + // this.reDrawRect() this.buildScatterList() }, @@ -799,7 +622,7 @@ export default { // this.emitRangeChange([x1, x2, y1, y2]) - this.reDrawRect() + // this.reDrawRect() this.buildScatterList() } @@ -826,6 +649,7 @@ export default { }, // 点击Update async handleUpdate() { + this.$emit('update:isLoading', true) const { inputFileName } = this.sampleData try { const { success, result, message } = await putAction( @@ -834,6 +658,7 @@ export default { }&ROINum=${this.currIdx + 1}` ) if (success) { + this.$emit('update:isLoading', false) let obj = {} for (const key in result) { if (Object.hasOwnProperty.call(result, key)) { diff --git a/src/views/spectrumAnalysis/components/RoiLimits.vue b/src/views/spectrumAnalysis/components/RoiLimits.vue index 5dd6ff7..8e9be0d 100644 --- a/src/views/spectrumAnalysis/components/RoiLimits.vue +++ b/src/views/spectrumAnalysis/components/RoiLimits.vue @@ -23,7 +23,7 @@ const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4'] const roiLimitsOption = { grid: { top: 15, - left: 55, + left: 65, right: 18, bottom: 45, }, @@ -106,10 +106,10 @@ export default { watch: { ROILists: { handler(newVal) { - this.active = 0 - this.$emit('sendIndex', 0) - const [ROIOneList, ...lists] = newVal - this.buildOneLineList(ROIOneList) + // this.active = 0 + // this.$emit('sendIndex', 0) + // const [ROIOneList, ...lists] = newVal + this.buildOneLineList(newVal[this.active]) }, // immediate: true, }, @@ -128,10 +128,10 @@ export default { // this.$bus.$off('updateRoi', this.updateRoi) }, methods: { - updateRoi(data) { - this.buildOneLineList(data) - this.active = 0 - }, + // updateRoi(data) { + // this.buildOneLineList(data) + // this.active = 0 + // }, buildOneLineList(val) { if (val) { const currSeries = this.roiLimitsOption.series