refactor: 重构二级操作栏

src/views/spectrumAnalysis/beta-gamma-analysis.vue

@@ -7,17 +7,17 @@
           Detailed-Information
           <beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
         </pop-over-with-icon>
-        <pop-over-with-icon placement="bottomLeft">
-          QC Flags
-          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
-        </pop-over-with-icon>
         <custom-select
           v-model="spectraType"
           :options="SampleType"
           @change="changeChartByType"
-          style="width: 246px"
+          style="width: 154px"
           class="sample-select"
         ></custom-select>
+        <pop-over-with-icon placement="right" v-model="qcFlagsVisible">
+          QC Flags
+          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
+        </pop-over-with-icon>
       </div>
 
       <!-- 二级交互栏结束 -->
@@ -228,14 +228,24 @@ export default {
       statisticsType: StatisticsType['Collection Time'],
       currSample: {},
       copyXeData: null,
+      qcFlagsVisible: false,
     }
   },
   created() {
     this.$bus.$on('ReAnalyses', this.handleReAnalyse)
   },
+  mounted() {
+    this.qcFlagsTimer = setTimeout(() => {
+      this.qcFlagsVisible = true
+    }, 100)
+  },
   destroyed() {
     this.cancelLastRequest()
     this.$bus.$off('ReAnalyses', this.handleReAnalyse)
+
+    if (this.qcFlagsTimer) {
+      clearTimeout(this.qcFlagsTimer)
+    }
   },
   methods: {
     // 重新绘制矩形框
@@ -441,7 +451,7 @@ export default {
           : this.resultDisplay.length > 0
           ? this.resultDisplay
           : XeData
-        
+
         this.sortResultDisplay()
 
         this.$emit('sendInfo', this.resultDisplay, this.spectrumData.stationCode, savedAnalysisResult)
@@ -702,6 +712,31 @@ export default {
     }
   }
 
+  // 二级操作栏开始
+  .spectrum-analysis-sub-operators {
+    flex-shrink: 0;
+    margin-bottom: 19px;
+    display: flex;
+    gap: 11px;
+    flex-wrap: nowrap;
+    overflow: auto;
+    height: 46px;
+    align-items: center;
+
+    .pop-over-with-icon {
+      height: 32px;
+
+      &:nth-child(1) {
+        width: 224px;
+      }
+
+      &:nth-child(3) {
+        width: 125px;
+      }
+    }
+  }
+  // 二级操作栏结束
+
   .sample-select {
     ::v-deep {
       .ant-select-selection {
@@ -712,7 +747,7 @@ export default {
   }
 
   &-main {
-    height: calc(100% - 51px);
+    height: calc(100% - 65px);
     display: flex;
     gap: 30px;
     overflow: auto hidden;

src/views/spectrumAnalysis/components/SubOperators/BetaGammaQcFlags.vue

@@ -57,20 +57,23 @@ export default {
 <style lang="less" scoped>
 .qc-flags {
   display: flex;
+  max-width: calc(100vw - 685px);
+  overflow: auto;
+
   &-item {
     background-color: #46738e;
     display: flex;
     align-items: center;
-    width: 150px;
     height: 30px;
     cursor: pointer;
+    padding: 0 10px;
+    flex-shrink: 0;
 
     &:not(:last-child) {
       margin-right: 2px;
     }
 
     span {
-      margin-left: 20px;
       margin-right: 5px;
       width: 14px;
       height: 14px;

src/views/spectrumAnalysis/components/SubOperators/PopOverWithIcon.vue

@@ -1,14 +1,21 @@
 <template>
-  <a-popover :placement="placement" overlayClassName="popover-with-icon" v-model="innerVisible">
+  <a-popover
+    v-bind="$attrs"
+    :placement="placement"
+    overlayClassName="popover-with-icon"
+    :visible="innerVisible"
+    :getPopupContainer="(ele) => ele"
+    @click="handleClick"
+  >
     <div class="pop-over-with-icon">
       <span class="text">
         <slot />
       </span>
       <img src="@/assets/images/global/select-down.png" alt="" />
     </div>
-    <template slot="content">
+    <div slot="content" @click.stop>
       <slot name="content" />
-    </template>
+    </div>
   </a-popover>
 </template>
 <script>
@@ -16,27 +23,32 @@ export default {
   props: {
     placement: {
       type: String,
-      default: 'bottom'
+      default: 'bottom',
     },
     value: {
-      type: Boolean
+      type: Boolean,
-    }
+    },
   },
   data() {
     return {
-      innerVisible: false
+      innerVisible: false,
     }
   },
+  methods: {
+    handleClick() {
+      this.innerVisible = !this.innerVisible
+    },
+  },
   watch: {
     value: {
       handler(val) {
         this.innerVisible = val
       },
-      immediate: true
+      immediate: true,
     },
     innerVisible(val) {
       this.$emit('input', val)
-    }
+    },
-  }
+  },
 }
 </script>

src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue

@@ -15,31 +15,34 @@ export default {
   props: {
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
-    }
+    },
   },
   created() {
     this.items = items
-  }
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .qc-flags {
   display: flex;
+  max-width: calc(100vw - 1120px);
+  overflow: auto;
+
   &-item {
     background-color: #46738e;
     display: flex;
     align-items: center;
-    width: 150px;
     height: 30px;
+    padding: 0 10px;
+    flex-shrink: 0;
 
     &:not(:last-child) {
       margin-right: 2px;
     }
 
     span {
-      margin-left: 20px;
       margin-right: 5px;
       width: 14px;
       height: 14px;
@@ -58,7 +61,7 @@ export default {
       }
 
       &.BLUE {
-        background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
+        background: radial-gradient(circle, #00e57d 0, #00e57d 100%);
       }
 
       &.YELLOW {

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -7,10 +7,6 @@
           Detailed-Information
           <detailed-infomation slot="content" :data="detailedInfomation" />
         </pop-over-with-icon>
-        <pop-over-with-icon placement="bottomLeft">
-          QC Flags
-          <qc-flags slot="content" :data="qcFlags" />
-        </pop-over-with-icon>
         <pop-over-with-icon>
           Graph Assistance
           <graph-assistance
@@ -20,24 +16,20 @@
             @reset="handleResetChart"
           />
         </pop-over-with-icon>
-        <a-popover
+        <pop-over-with-icon v-model="subOperatorsState.nuclideLibraryVisible">
-          overlayClassName="popover-with-icon"
+          Nuclide Library
-          :visible="nuclideLibraryVisible"
-          @click="handleChangeNuclideVisible"
-          placement="bottom"
-        >
-          <div class="pop-over-with-icon">
-            <span class="text"> Nuclide Library </span>
-            <img src="@/assets/images/global/select-down.png" alt="" />
-          </div>
           <a-spin slot="content" :spinning="isLoadingNuclide">
             <nuclide-library :list="nuclideLibraryList" @dblclick="handleNuclideDblClick" />
           </a-spin>
-        </a-popover>
+        </pop-over-with-icon>
 
         <div class="peak-info">
           <button-with-switch-icon @change="handlePeakInfoChange" @click="handleTogglePeak"></button-with-switch-icon>
         </div>
+        <pop-over-with-icon placement="right" v-model="subOperatorsState.qcFlagsVisible">
+          QC Flags
+          <qc-flags slot="content" :data="qcFlags" />
+        </pop-over-with-icon>
       </div>
       <!-- 二级交互栏结束 -->
       <!-- 主体部分 -->
@@ -184,7 +176,12 @@ export default {
       detailedInfomation: [],
       qcFlags: [],
       graphAssistance: cloneDeep(graphAssistance),
-      nuclideLibraryVisible: false,
+
+      // 子菜单状态
+      subOperatorsState: {
+        nuclideLibraryVisible: false,
+        qcFlagsVisible: false,
+      },
 
       channelData: {
         peakGroup: [],
@@ -263,13 +260,22 @@ export default {
 
     window.removeEventListener('keydown', this.handleKeyboardEvent)
     window.removeEventListener('click', this.closePeakInfomationTooltip)
+
+    if (this.qcFlagsTimer) {
+      clearTimeout(this.qcFlagsTimer)
+    }
   },
   deactivated() {
-    this.nuclideLibraryVisible = false
+    // Object.keys(this.subOperatorsState).forEach(k => {
+    //   this.subOperatorsState[k] = false
+    // })
   },
   mounted() {
     this.option.brush = { toolbox: [] }
     this.initWebSocket()
+    this.qcFlagsTimer = setTimeout(() => {
+      this.subOperatorsState.qcFlagsVisible = true
+    }, 100)
   },
   methods: {
     // 键盘事件
@@ -900,7 +906,7 @@ export default {
     changeSeriesType() {},
 
     handleChangeNuclideVisible() {
-      this.nuclideLibraryVisible = !this.nuclideLibraryVisible
+      this.subOperatorsState.nuclideLibraryVisible = !this.subOperatorsState.nuclideLibraryVisible
     },
 
     // 根据seriesName重绘线
@@ -1024,7 +1030,7 @@ export default {
           sampleId,
           channel,
           fileName,
-          energy
+          energy,
         })
         if (success) {
           const { possible } = result
@@ -1042,7 +1048,7 @@ export default {
 
     // Nuclide Library 单项双击
     handleNuclideDblClick(nuclide) {
-      this.nuclideLibraryVisible = false
+      this.subOperatorsState.nuclideLibraryVisible = false
       this.nuclideReview.nuclide = nuclide
       this.nuclideReview.visible = true
     },
@@ -2102,8 +2108,44 @@ export default {
     }
   }
 
+  // 二级操作栏开始
+  .spectrum-analysis-sub-operators {
+    flex-shrink: 0;
+    margin-bottom: 19px;
+    display: flex;
+    gap: 11px;
+    flex-wrap: nowrap;
+    overflow: auto;
+    height: 46px;
+    align-items: center;
+
+    .pop-over-with-icon {
+      height: 32px;
+
+      &:nth-child(1) {
+        width: 216px;
+      }
+      &:nth-child(2) {
+        width: 182px;
+      }
+      &:nth-child(3) {
+        width: 170px;
+      }
+      &:nth-child(5) {
+        width: 156px;
+      }
+    }
+
+    .peak-info {
+      width: 226px;
+      height: 32px;
+      display: inline-block;
+    }
+  }
+  // 二级操作栏结束
+
   &-main {
-    height: calc(100% - 51px);
+    height: calc(100% - 65px);
     display: flex;
     overflow: auto hidden;
     position: relative;

src/views/spectrumAnalysis/index.vue

@@ -1711,49 +1711,10 @@ export default {
   }
   // 顶部操作栏结束
 
-  ::v-deep {
-    // 二级操作栏开始
-    .spectrum-analysis-sub-operators {
-      flex-shrink: 0;
-      margin-bottom: 19px;
-      display: flex;
-      flex-wrap: nowrap;
-      overflow: auto;
-
-      .pop-over-with-icon {
-        height: 32px;
-
-        &:not(:last-child) {
-          margin-right: 11px;
-        }
-
-        &:nth-child(1) {
-          width: 256px;
-        }
-        &:nth-child(2) {
-          width: 186px;
-        }
-        &:nth-child(3) {
-          width: 246px;
-        }
-        &:nth-child(4) {
-          width: 246px;
-        }
-      }
-
-      .peak-info {
-        width: 306px;
-        height: 32px;
-        display: inline-block;
-      }
-    }
-    // 二级操作栏结束
-  }
-
   // 主体部分开始
   &-main {
-    margin-top: 15px;
+    padding-top: 5px;
-    height: calc(100% - 45px);
+    height: calc(100% - 15px);
     overflow: hidden;
   }
   // 主体部分结束