刷选联动

src/views/spectrumAnalysis/beta-analysis.vue

@@ -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,

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -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;
     }
   }
 }

src/views/spectrumAnalysis/components/Modals/NewBetaModals/CalibrationModal/components/BetaDetectorCalibration.vue

@@ -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>
+                  <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,
+    max: 512,
-    interval: 64,
+    interval: 128,
   },
   yAxis: {
     name: 'Gamma Channel',
@@ -268,8 +270,8 @@ const initialBetaGammaChartOption = {
       show: false,
     },
     min: 0,
-    max: 256,
+    max: 4096,
-    interval: 64,
+    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,
+          channel: yAxis,
-          energy: undefined,
+          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 {

src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue

@@ -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,
+    min: 0,
-    max: 'dataMax',
+    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: {