feat: 自建台站增加各自控制各自ROI展示状态功能

src/views/spectrumAnalysis/beta-analysis.vue

@@ -230,6 +230,8 @@ export default {
             this.getDetailFromFile()
           }
         }
+
+        this.$bus.$emit('resetROIRectState')
       },
       immediate: true,
       deep: true,
@@ -626,7 +628,7 @@ export default {
 
       const { success, message, result } = await getAction('/selfStation/saveToDB', {
         fileName,
-        comment: sampleData.data.comment
+        comment: sampleData.data.comment,
       })
       if (success) {
         Object.entries(result).forEach(([k, v]) => {

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -54,25 +54,33 @@
             height: boundaryContainerPosition.height + 'px',
           }"
         >
-          <div
+          <template v-for="(boundaryItem, index) in boundaryList">
-            class="boundary-item"
-            v-for="(boundaryItem, index) in boundaryList"
-            :key="index"
-            :style="{
-              left: boundaryItem.left + 'px',
-              top: boundaryItem.top + 'px',
-              width: boundaryItem.width + 'px',
-              height: boundaryItem.height + 'px',
-              backgroundColor: boundaryItem.backgroundColor,
-              borderColor: boundaryItem.borderColor,
-            }"
-          >
-            <div :class="['boundary-item-left']" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
             <div
-              :class="['boundary-item-right']"
+              v-if="showState[index]"
-              @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"
+              class="boundary-item"
-            ></div>
+              :key="index"
-          </div>
+              :style="{
+                left: boundaryItem.left + 'px',
+                top: boundaryItem.top + 'px',
+                width: boundaryItem.width + 'px',
+                height: boundaryItem.height + 'px',
+                backgroundColor: boundaryItem.backgroundColor,
+                borderColor: boundaryItem.borderColor,
+              }"
+            >
+              <!-- 左侧拖动 -->
+              <div
+                :class="['boundary-item-left']"
+                @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"
+              ></div>
+
+              <!-- 右侧拖动 -->
+              <div
+                :class="['boundary-item-right']"
+                @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"
+              ></div>
+            </div>
+          </template>
         </div>
         <!-- 图表上面的四边形结束 -->
       </div>
@@ -392,7 +400,6 @@ export default {
     this.buttons = buttons
 
     return {
-      showROI: true,
       startChannel: null,
       endChannel: null,
       boundaryList: [], // 最终生成的框
@@ -417,15 +424,22 @@ export default {
       },
 
       btnActive: 2,
+
+      showState: [],
     }
   },
   created() {
     this.scatterList = []
     this.boundary = []
+    this.setAllShowState(true)
     this.$bus.$on('roiLimitItemChange', this.handleLimitItemChange)
+    this.$bus.$on('toggleROIRect', this.handleToggleROIRect)
+    this.$bus.$on('resetROIRectState', this.resetROIRectState)
   },
   beforeDestroy() {
     this.$bus.$off('roiLimitItemChange', this.handleLimitItemChange)
+    this.$bus.$off('toggleROIRect', this.handleToggleROIRect)
+    this.$bus.$off('resetROIRectState', this.resetROIRectState)
   },
   mounted() {
     const newOption = cloneDeep(TwoDOption)
@@ -608,27 +622,23 @@ export default {
         height: containerBottom - containerTop,
       }
 
-      if (this.showROI) {
+      this.boundaryList = this.boundary.map((item, index) => {
-        this.boundaryList = this.boundary.map((item, index) => {
+        const color = ColorList[index]
-          const color = ColorList[index]
+        const [start, end] = item
-          const [start, end] = item
 
-          const [left, top] = chart.convertToPixel({ seriesIndex: 0 }, [start, 4096]) // 拿到矩形左上角坐标
+        const [left, top] = chart.convertToPixel({ seriesIndex: 0 }, [start, 4096]) // 拿到矩形左上角坐标
-          const [right, bottom] = chart.convertToPixel({ seriesIndex: 0 }, [end, 0]) // 拿到矩形右下角坐标
+        const [right, bottom] = chart.convertToPixel({ seriesIndex: 0 }, [end, 0]) // 拿到矩形右下角坐标
 
-          // 因为外层容器已经提供了 上/左 边距的定位，把这部分减去
+        // 因为外层容器已经提供了 上/左 边距的定位，把这部分减去
-          return {
+        return {
-            borderColor: color.borderColor,
+          borderColor: color.borderColor,
-            backgroundColor: color.bgColor,
+          backgroundColor: color.bgColor,
-            top: top - containerTop,
+          top: top - containerTop,
-            height: bottom - top,
+          height: bottom - top,
-            left: left - containerLeft,
+          left: left - containerLeft,
-            width: right - left,
+          width: right - left,
-          }
+        }
-        })
+      })
-      } else {
-        this.boundaryList = []
-      }
     },
 
     handleChartResize() {
@@ -781,8 +791,12 @@ export default {
 
     // 点击ROI
     handleROI() {
-      this.showROI = !this.showROI
+      // 如果有某些Rect处于显示状态，则都隐藏
-      this.reDrawRect()
+      if (this.showState.some((state) => state)) {
+        this.setAllShowState(false)
+      } else {
+        this.setAllShowState(true)
+      }
     },
 
     // 矩形周边点击
@@ -876,6 +890,22 @@ export default {
         this.currBoundaryItem = null
       }
     },
+
+    setAllShowState(state) {
+      this.showState = new Array(4).fill(state)
+    },
+
+    // 切换显示隐藏状态
+    handleToggleROIRect(index) {
+      this.$set(this.showState, index, !this.showState[index])
+    },
+
+    // 重置显示隐藏状态
+    resetROIRectState() {
+      this.setAllShowState(true)
+      this.boundary = []
+      this.boundaryList = []
+    },
   },
 }
 </script>

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

@@ -1,14 +1,15 @@
 <template>
   <div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
     <roi-limit-item
-      v-for="(title, index) in RoiTitles"
+      v-for="(_, index) in 4"
-      :key="title"
+      :key="index"
-      :title="title"
+      :title="`ROI${index + 1}`"
       :title-color="RoiTitleColors[index]"
       :energys="gammaEnergyData"
       :roi-list="ROILists[index]"
       :analyze-result="ROIAnalyzeLists[index]"
       @toggle="handleToggle"
+      @title-click="handleToggleROIRect(index)"
     />
   </div>
 </template>
@@ -16,7 +17,6 @@
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
 import RoiLimitItem from './components/RoiLimitItem.vue'
-const RoiTitles = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
 const RoiTitleColors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
 
 // 折线图配置
@@ -40,7 +40,6 @@ export default {
     },
   },
   data() {
-    this.RoiTitles = RoiTitles
     this.RoiTitleColors = RoiTitleColors
 
     return {
@@ -51,6 +50,11 @@ export default {
     handleToggle(isMax) {
       this.isMax = isMax
     },
+
+    // 切换ROI显隐
+    handleToggleROIRect(index) {
+      this.$bus.$emit('toggleROIRect', index)
+    },
   },
 }
 </script>

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

@@ -1,7 +1,9 @@
 <template>
   <div class="roi-limit-item" :class="{ 'is-max': isMax }">
     <div class="roi-limit-item__header">
-      <div class="roi-limit-item__header-title" :style="{ backgroundColor: titleColor }">{{ title }}</div>
+      <div class="roi-limit-item__header-title" :style="{ backgroundColor: titleColor }" @click="handleTitleClick">
+        {{ title }}
+      </div>
       <div class="roi-limit-item__header-count">
         <span>Channel: {{ axisInfo.channel }}</span>
         <span>Count: {{ axisInfo.count }}</span>
@@ -120,7 +122,7 @@ const option = {
   brush: {},
 }
 
-const initialAxisInfo = {
+const InitialAxisInfo = {
   channel: 0,
   count: 0,
   energy: 0,
@@ -167,7 +169,7 @@ export default {
       opts: {
         notMerge: false,
       },
-      axisInfo: cloneDeep(initialAxisInfo),
+      axisInfo: cloneDeep(InitialAxisInfo),
       isMax: false,
     }
   },
@@ -200,7 +202,7 @@ export default {
       }
     },
 
-    // 切换
+    // 切换全屏
     toggleFullScreen() {
       this.isMax = !this.isMax
 
@@ -453,7 +455,12 @@ export default {
     },
 
     resetAxiosInfo() {
-      this.axisInfo = cloneDeep(initialAxisInfo)
+      this.axisInfo = cloneDeep(InitialAxisInfo)
+    },
+
+    // 切换四个黄色的圈
+    handleTitleClick() {
+      this.$emit('title-click')
     },
   },
   watch: {
@@ -504,6 +511,8 @@ export default {
       text-align: center;
       font-family: ArialMT;
       font-size: 12px;
+      cursor: pointer;
+      user-select: none;
     }
 
     &-count {