修改散点图覆盖方框线的问题及拖拽的逻辑调整

更新ROI 增加loading效果
处理数据更新后，回到初始界面的问题

src/views/spectrumAnalysis/beta-analysis.vue

@@ -34,6 +34,7 @@
                 :gammaEnergyData="gammaEnergyData"
                 :histogramDataList="histogramDataList"
                 :boundary="boundaryList"
+                :isLoading.sync="isLoading"
                 :currIdx="currIdx"
                 @refreshRoi="refreshRoi"
               />

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -19,6 +19,7 @@
         <CustomChart
           ref="chartTwoDRef"
           :option="twoDOption"
+          :opts="opts"
           @zr:mousedown="handleMouseDown"
           @zr:mouseup="handleMouseUp"
           @brushEnd="handleBrushEnd"
@@ -133,25 +134,23 @@ const twoDOption = {
     max: 4096,
     interval: 512,
   },
-  series: {
+  series: [
-    type: 'scatterGL',
+    {
-    z: 100,
+      type: 'scatterGL',
-    symbolSize: 4,
+      symbolSize: 4,
-    data: [],
-    itemStyle: {
-      color: '#fff',
-    },
-    markLine: {
-      silent: false,
-      symbol: 'none',
       data: [],
-      animation: false,
+      itemStyle: {
-      lineStyle: {
+        color: '#fff',
-        type: 'solid',
-        width: 2,
       },
     },
-  },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#99CA53' },
+      zlevel: 11,
+      showSymbol: false,
+    },
+  ],
   brush: {},
   animation: false,
 }
@@ -162,7 +161,7 @@ const dragOption = {
     {
       type: 'rect',
       // rotation: Math.PI/2,
-      z: 1000,
+      zlevel: 12,
       shape: {
         width: 5,
         height: 0,
@@ -181,7 +180,7 @@ const dragOption = {
     },
     {
       type: 'rect',
-      z: 1000,
+      zlevel: 12,
       shape: {
         width: 5,
         height: 0,
@@ -351,6 +350,9 @@ export default {
     ColorPalette,
   },
   props: {
+    isLoading: {
+      type: Boolean,
+    },
     histogramDataList: {
       type: Array,
       default: () => [],
@@ -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))
+          lineSeries.data = _this.drawOneRect(rect, color).data
-          _this.myChart.setOption({
+          // const lineSeries = {
-            series: {
+          //   type: 'line',
-              markLine: {
+          //   ..._this.drawOneRect(rect, color),
-                data: rectList,
+          //   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))
+          lineSeries.data = _this.drawOneRect(rect, color).data
-          _this.myChart.setOption({
-            series: {
-              markLine: {
-                data: rectList,
-              },
-            },
-          })
         }
         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],
         ]
-
+        lineSeries.data = this.drawOneRect(rect, color).data
-        rectList.push(...this.drawOneRect(rect, color))
+      } else {
+        lineSeries.data = []
       }
-      this.twoDOption.series.markLine.data = rectList
     },
     /**
      * 绘制一个矩形框区域
-     * 矩形框在这里的实现是由几条线段围起来的，但由于线段在超出图表区域显示有问题，故作了以下处理
+     * @param {*} rect  左下 右下 右上 左上 左下 的顺序
-     * @param {*} rect  左下 右下 右上 左上 的顺序
      */
     drawOneRect(rect, color) {
-      const rectList = []
+      return {
-      const {
+        data: rect,
-        xAxis: { min: minX, max: maxX },
+        symbol: 'none',
-        yAxis: { min: minY, max: maxY },
+        itemStyle: {
-      } = 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 = {
           color,
-        }
-      })
-      return rectList
-    },
-    /**
-     * 获取在框选范围内的点列表
-     * @param { Array<Array<number>> } 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)) {

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.active = 0
-        this.$emit('sendIndex', 0)
+        // this.$emit('sendIndex', 0)
-        const [ROIOneList, ...lists] = newVal
+        // const [ROIOneList, ...lists] = newVal
-        this.buildOneLineList(ROIOneList)
+        this.buildOneLineList(newVal[this.active])
       },
       // immediate: true,
     },
@@ -128,10 +128,10 @@ export default {
     // this.$bus.$off('updateRoi', this.updateRoi)
   },
   methods: {
-    updateRoi(data) {
+    // updateRoi(data) {
-      this.buildOneLineList(data)
+    //   this.buildOneLineList(data)
-      this.active = 0
+    //   this.active = 0
-    },
+    // },
     buildOneLineList(val) {
       if (val) {
         const currSeries = this.roiLimitsOption.series