图标添加拖拽功能，接口对接，参数调整

src/views/spectrumAnalysis/beta-analysis.vue

@@ -176,8 +176,9 @@ export default {
       this.currIdx = val
     },
     async handleDetalSelfStationCache() {
+      const { inputFileName } = this.sample
       let params = {
-        sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
+        sampleFileName: inputFileName,
       }
       try {
         const { success, result, message } = await deleteAction('/selfStation/deleteSelfStationCache', params)
@@ -188,9 +189,10 @@ export default {
     async getSelfStationSampleDetail() {
       const { inputFileName, detFileName } = this.sample
       let params = {
-        // sampleFileName: inputFileName,
+        sampleFileName: inputFileName,
-        sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
+        detFileName: detFileName,
-        detFileName: detFileName || 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
+        // sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
+        // detFileName: detFileName || 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
       }
       try {
         this.isLoading = true

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
-      <div class="_2d-chart" v-show="active == 0">
+      <div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
         <CustomChart
           ref="chartTwoDRef"
           :option="twoDOption"
@@ -43,6 +43,8 @@
 import CustomChart from '@/components/CustomChart/index.vue'
 import ColorPalette from './ColorPalette.vue'
 import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
+import { getAction, postAction, deleteAction } from '../../../api/manage'
+import SampleDataMixin from '../SampleDataMixin'
 const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
 // Beta-Gamma 的配置
 const twoDOption = {
@@ -67,6 +69,7 @@ const twoDOption = {
     },
   },
   xAxis: {
+    id: '2',
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
@@ -97,6 +100,7 @@ const twoDOption = {
     interval: 128,
   },
   yAxis: {
+    id: '3',
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
@@ -128,6 +132,7 @@ const twoDOption = {
   },
   series: {
     type: 'scatterGL',
+    z: 100,
     symbolSize: 4,
     data: [],
     itemStyle: {
@@ -147,6 +152,53 @@ const twoDOption = {
   brush: {},
   animation: false,
 }
+
+const dragOption = {
+  // 绘制阈值的graphic line
+  graphic: [
+    {
+      type: 'rect',
+      // rotation: Math.PI/2,
+      z: 1000,
+      shape: {
+        width: 5,
+        height: 0,
+      },
+
+      //构造坐标扔进去
+      position: [],
+      draggable: true,
+      style: {
+        fill: 'rgba(255,0,255,0.3)', // fill: 'rgba(0,0,0,0.03)',  方便观察
+        stroke: 'rgba(255,0,255,0.3)', // stroke: 'rgba(0,0,0,0.03)',  方便观察
+        lineWidth: 10,
+      },
+      cursor: 'move',
+      ondrag: null,
+    },
+    {
+      type: 'rect',
+      // rotation: Math.PI/2,
+      z: 1000,
+      shape: {
+        width: 5,
+        height: 0,
+      },
+
+      //构造坐标扔进去
+      position: [],
+      draggable: true,
+      style: {
+        fill: 'rgba(255,0,255,0.3)', // fill: 'rgba(0,0,0,0.03)',  方便观察
+        stroke: 'rgba(255,0,255,0.3)', // stroke: 'rgba(0,0,0,0.03)',  方便观察
+        lineWidth: 10,
+      },
+      cursor: 'move',
+      ondrag: null,
+    },
+  ],
+}
+
 // Gamma 的配置
 const gammaOption = {
   grid: {
@@ -292,6 +344,7 @@ const betaOption = {
   },
 }
 export default {
+  mixins: [SampleDataMixin],
   components: {
     CustomChart,
     ColorPalette,
@@ -362,22 +415,106 @@ export default {
       },
       // immediate: true,
     },
+    boundaryData: {
+      handler(newVal) {
+        const { minX, maxX, minY, maxY, color } = newVal
+        const [graphic1, graphic2] = this.dragOption.graphic
+        const _this = this
+        this.myChart = this.$refs.chartTwoDRef.getChartInstance()
+        let graphicHeight = this.$refs.TwoChartRef.clientHeight
+        graphic1.shape.height = graphicHeight
+        graphic1.position = [
+          this.myChart.convertToPixel({ xAxisId: '2' }, minX),
+          this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
+        ]
+        graphic1.ondrag = function () {
+          const rectList = []
+          this.startChannel = _this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])
+          const rect = [
+            [this.startChannel, minY],
+            [maxX, minY],
+            [maxX, maxY],
+            [this.startChannel, maxY],
+          ]
+          rectList.push(..._this.drawOneRect(rect, color))
+          console.log(rectList)
+          _this.myChart.setOption({
+            series: {
+              markLine: {
+                data: rectList,
+              },
+            },
+          })
+        }
+        graphic2.shape.height = graphicHeight
+        graphic2.position = [
+          this.myChart.convertToPixel({ xAxisId: '2' }, maxX),
+          this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
+        ]
+        graphic2.ondrag = function () {
+          const rectList = []
+          this.endChannel = _this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])
+          const rect = [
+            [minX, minY],
+            [this.endChannel, minY],
+            [this.endChannel, maxY],
+            [minX, maxY],
+          ]
+          rectList.push(..._this.drawOneRect(rect, color))
+          console.log(rectList)
+          _this.myChart.setOption({
+            series: {
+              markLine: {
+                data: rectList,
+              },
+            },
+          })
+        }
+        this.myChart.setOption(this.dragOption)
+      },
+    },
   },
   data() {
     this.buttons = buttons
     return {
       active: 0,
       twoDOption,
+      dragOption,
       gammaOption,
       betaOption,
       currCount: 50,
+      boundaryData: [],
       showROI: true,
+      myChart: null,
+      startChannel: null,
+      endChannel: null,
     }
   },
   mounted() {
     this.twoDOption.brush = { toolbox: [] }
   },
   methods: {
+    // onLineDragging(position, data) {
+    //   const { minX, maxX, minY, maxY, color } = data
+    //   console.log(this)
+    //   const rectList = []
+    //   let xAxis = this.myChart.convertFromPixel({ xAxisId: '2' }, position[0])
+    //   const rect = [
+    //     [xAxis, minY],
+    //     [maxX, minY],
+    //     [maxX, maxY],
+    //     [xAxis, maxY],
+    //   ]
+    //   rectList.push(...this.drawOneRect(rect, color))
+    //   console.log(rectList)
+    //   this.myChart.setOption({
+    //     series: {
+    //       markLine: {
+    //         data: rectList,
+    //       },
+    //     },
+    //   })
+    // },
     // Gamma 的折线图数据
     buildGammaLineList(val) {
       const gammaSeries = this.gammaOption.series
@@ -398,7 +535,6 @@ export default {
       this.twoDOption.series.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))
-      console.log('this.twoDOption.series.data', this.twoDOption.series.data)
     },
 
     // 构造一个scatter 的点
@@ -702,7 +838,20 @@ export default {
       this.reDrawRect()
     },
     // 点击Update
-    handleUpdate() {},
+    async handleUpdate() {
+      const { inputFileName } = this.sampleData
+      let params = {
+        sampleFileName: inputFileName,
+        startChannel: this.startChannel,
+        endChannel: this.endChannel,
+        ROINum: this.currCount + 1,
+      }
+      try {
+        const { success, result, message } = await postAction('/selfStation/updateROI', params)
+      } catch (error) {
+        console.error(error)
+      }
+    },
 
     // 颜色插值算法
     interpolateColor(percentage) {

src/views/spectrumAnalysis/index.vue

@@ -566,6 +566,8 @@ export default {
             return item
           } else if (!item.gasFileName && !item.detFileName && !item.qcFileName) {
             return item
+          } else {
+            return item
           }
         }
       })