feat: 自建台站gamma和beta弹窗增加最大化按钮，里面的图表增加缩放功能

src/views/spectrumAnalysis/components/Modals/SelfStation/BetaModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close>
+  <custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close enable-full-screen>
     <div class="beta-modal">
       <div class="beta-modal__header">
         <span class="count">Channel: {{ axisInfo.channel }}</span>
@@ -7,15 +7,31 @@
         <span class="energy">Energy: {{ axisInfo.energy }}</span>
       </div>
       <div class="beta-modal__content">
-        <custom-chart :option="option" autoresize />
+        <CustomChart
+          ref="chartRef"
+          :option="option"
+          :opts="opts"
+          autoresize
+          @zr:mousedown="handleMouseDown"
+          @zr:mouseup="handleMouseUp"
+          @brushEnd="handleBrushEnd"
+        />
       </div>
     </div>
+    <template slot="custom-footer">
+      <div style="text-align: center">
+        <a-space>
+          <a-button type="success" @click="handleUnzoom">Unzoom</a-button>
+          <a-button type="warn" @click="visible = false">Cancel</a-button>
+        </a-space>
+      </div>
+    </template>
   </custom-modal>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
-import { buildLineSeries } from '@/utils/chartHelper'
+import { buildLineSeries, getAxisMax, rangeNumber } from '@/utils/chartHelper'
 import { cloneDeep } from 'lodash'
 
 const initialOption = {
@@ -96,6 +112,7 @@ const initialOption = {
     max: 'dataMax',
   },
   series: buildLineSeries('Line', [], 'yellow'),
+  brush: {},
 }
 
 const initialAxisInfo = {
@@ -113,6 +130,10 @@ export default {
       visible: false,
       option: cloneDeep(initialOption),
       axisInfo: cloneDeep(initialAxisInfo),
+
+      opts: {
+        notMerge: false,
+      },
     }
   },
   created() {
@@ -124,6 +145,17 @@ export default {
       this.energys = energys || []
       this.axisInfo = cloneDeep(initialAxisInfo)
       this.visible = true
+      this.$nextTick(() => {
+        this.option.brush = { toolbox: [] }
+        this.handleUnzoom()
+      })
+    },
+
+    handleUnzoom() {
+      this.option.xAxis.min = 0
+      this.option.xAxis.max = 512
+      this.option.yAxis.min = 1
+      this.option.yAxis.max = 'dataMax'
     },
 
     handleTooltipFormat(params) {
@@ -134,6 +166,81 @@ export default {
         energy: (this.energys[channel] || 0).toFixed(3),
       }
     },
+
+    getChart() {
+      return this.$refs.chartRef.getChartInstance()
+    },
+
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.getChart()
+      chart.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
+      }
+    },
   },
 }
 </script>
@@ -169,4 +276,16 @@ export default {
     overflow: hidden;
   }
 }
+
+.fullscreen {
+  ::v-deep {
+    .ant-modal-body {
+      height: calc(100% - 93px);
+
+      .beta-modal {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>

src/views/spectrumAnalysis/components/Modals/SelfStation/GammaModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" title="Gamma" width="800px" destroy-on-close>
+  <custom-modal v-model="visible" title="Gamma" width="800px" destroy-on-close enable-full-screen>
     <div class="gamma-modal">
       <div class="gamma-modal__header">
         <span class="count">Channel: {{ axisInfo.channel }}</span>
@@ -7,15 +7,31 @@
         <span class="energy">Energy: {{ axisInfo.energy }}</span>
       </div>
       <div class="gamma-modal__content">
-        <custom-chart :option="option" autoresize />
+        <CustomChart
+          ref="chartRef"
+          :option="option"
+          :opts="opts"
+          autoresize
+          @zr:mousedown="handleMouseDown"
+          @zr:mouseup="handleMouseUp"
+          @brushEnd="handleBrushEnd"
+        />
       </div>
     </div>
+    <template slot="custom-footer">
+      <div style="text-align: center">
+        <a-space>
+          <a-button type="success" @click="handleUnzoom">Unzoom</a-button>
+          <a-button type="warn" @click="visible = false">Cancel</a-button>
+        </a-space>
+      </div>
+    </template>
   </custom-modal>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
-import { buildLineSeries } from '@/utils/chartHelper'
+import { buildLineSeries, getAxisMax, rangeNumber } from '@/utils/chartHelper'
 import { cloneDeep } from 'lodash'
 
 const initialOption = {
@@ -96,6 +112,7 @@ const initialOption = {
     max: 'dataMax',
   },
   series: buildLineSeries('Line', [], 'yellow'),
+  brush: {},
 }
 
 const initialAxisInfo = {
@@ -113,6 +130,10 @@ export default {
       visible: false,
       option: cloneDeep(initialOption),
       axisInfo: cloneDeep(initialAxisInfo),
+
+      opts: {
+        notMerge: false,
+      },
     }
   },
   created() {
@@ -124,6 +145,17 @@ export default {
       this.energys = energys || []
       this.axisInfo = cloneDeep(initialAxisInfo)
       this.visible = true
+      this.$nextTick(() => {
+        this.option.brush = { toolbox: [] }
+        this.handleUnzoom()
+      })
+    },
+
+    handleUnzoom() {
+      this.option.xAxis.min = 0
+      this.option.xAxis.max = 4096
+      this.option.yAxis.min = 1
+      this.option.yAxis.max = 'dataMax'
     },
 
     handleTooltipFormat(params) {
@@ -134,6 +166,81 @@ export default {
         energy: (this.energys[channel] || 0).toFixed(3),
       }
     },
+
+    getChart() {
+      return this.$refs.chartRef.getChartInstance()
+    },
+
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.getChart()
+      chart.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
+      }
+    },
   },
 }
 </script>
@@ -169,4 +276,16 @@ export default {
     overflow: hidden;
   }
 }
+
+.fullscreen {
+  ::v-deep {
+    .ant-modal-body {
+      height: calc(100% - 93px);
+
+      .gamma-modal {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>