fix: Nuclide Library改为点击弹出，修复切换Peak Infomation时未获取Nuclide Library问题，增加双击弹出Nuclide Review 功能

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue

@@ -159,6 +159,9 @@ export default {
   props: {
     channel: {
       type: Number
+    },
+    nuclide: {
+      type: String
     }
   },
   data() {
@@ -265,13 +268,17 @@ export default {
           }
 
           this.handleResData(result)
+          this.isLoading = false
+
+          if (this.nuclide && this.nuclideList.length) {
+            this.currNuclide = this.nuclide
+            this.getInfoByNuclide()
+          }
         } else {
           this.$message.error(message)
         }
       } catch (error) {
         console.error(error)
-      } finally {
-        this.isLoading = false
       }
     },
 
@@ -307,7 +314,6 @@ export default {
           fileName: inputFileName
         })
         if (success) {
-          console.log('%c [  ]-301', 'font-size:13px; background:pink; color:#bf2c9f;', result)
           const { chart, halfLife, halfLifeErr, lines, name, table } = result
 
           this.info = {

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue

@@ -1317,6 +1317,7 @@ export default {
           const [xPixel] = chart.convertToPixel('grid', [xAxis, yAxis])
           // 保持x轴不变
           this.position[0] = xPixel
+          this.redrawBaseLine()
         },
         ondragend: ({ offsetY }) => {
           this.setGraphicDraggable(false)
@@ -1348,6 +1349,11 @@ export default {
       }
     },
 
+    // 重新生成基线
+    redrawBaseLine() {
+      console.log('%c [ 重新生成基线 ]-1355', 'font-size:13px; background:pink; color:#bf2c9f;', )
+    },
+
     // 根据数据绘制 + 号
     buildGraphicPlusByData() {
       this.option.graphic[1].children.forEach(item => {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="nuclear-library">
-    <div class="nuclear-library-item" v-for="(item, index) in list" :key="index">
+    <div class="nuclear-library-item" v-for="(item, index) in list" :key="index" @dblclick="handleDblClick(item)">
       {{ item }}
     </div>
     <div v-if="!list.length" class="is-empty">
@@ -15,22 +15,33 @@ export default {
     list: {
       type: Array
     }
-  }
+  },
+  methods: {
+    handleDblClick(item) {
+      this.$emit('dblclick', item)
+    }
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .nuclear-library {
   width: 230px;
-  max-height: 200px;
+  height: 160px;
   overflow: auto;
 
   &-item {
     padding: 4px 14px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #055565;
+      user-select: none;
+    }
   }
 
   .is-empty {
-    padding: 20px 0;
+    padding: 15px 0;
   }
 }
 </style>

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

@@ -40,44 +40,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-.pop-over-with-icon {
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid #0a544e;
-  height: 100%;
-  padding: 0 11px;
-  cursor: pointer;
-
-  .text {
-    font-family: MicrosoftYaHei;
-    color: #ade6ee;
-    letter-spacing: 1px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: none;
-  }
-
-  img {
-    margin-left: 5px;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    flex-shrink: 0;
-  }
-
-  &.ant-popover-open {
-    img {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>
-<style lang="less">
-.popover-with-icon {
-  .ant-popover-inner-content {
-    padding: 8px;
-  }
-}
-</style>

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -20,10 +20,23 @@
             @reset="handleReset"
           />
         </pop-over-with-icon>
-        <pop-over-with-icon>
-          Nuclide Library
-          <nuclear-library slot="content" :list="nuclideLibraryList" />
-        </pop-over-with-icon>
+        <a-popover
+          overlayClassName="popover-with-icon"
+          :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>
+
         <div class="peak-info">
           <button-with-switch-icon @change="handlePeakInfoChange" @click="handleTogglePeak"></button-with-switch-icon>
         </div>
@@ -69,6 +82,13 @@
       </div>
       <!-- 主体部分结束 -->
     </a-spin>
+
+    <nuclide-review-modal
+      v-model="nuclideReview.visible"
+      :sampleId="sample.sampleId"
+      :channel="currChannel"
+      :nuclide="nuclideReview.nuclide"
+    />
   </div>
 </template>
 
@@ -78,13 +98,14 @@ import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
 import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
 import QcFlags from './components/SubOperators/QcFlags.vue'
 import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
-import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
+import NuclideLibrary from './components/SubOperators/NuclideLibrary.vue'
 import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
 import { getAction } from '@/api/manage'
 import Response from './response.json'
 import { buildLineSeries, findSeriesByName, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
 import { cloneDeep } from 'lodash'
 import axios from 'axios'
+import NuclideReviewModal from './components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue'
 
 // 初始配置
 const initialOption = {
@@ -246,12 +267,14 @@ export default {
     DetailedInfomation,
     QcFlags,
     GraphAssistance,
-    NuclearLibrary,
-    ButtonWithSwitchIcon
+    NuclideLibrary,
+    ButtonWithSwitchIcon,
+    NuclideReviewModal
   },
   data() {
     return {
       isLoading: false,
+      isLoadingNuclide: false,
       option: cloneDeep(initialOption),
       opts: {
         notMerge: false
@@ -261,6 +284,7 @@ export default {
       detailedInfomation: [],
       qcFlags: [],
       graphAssistance: cloneDeep(graphAssistance),
+      nuclideLibraryVisible: false,
 
       channelPeakGroup: [],
       energyPeakGroup: [],
@@ -272,7 +296,13 @@ export default {
         content: '',
         top: 0,
         left: 0
-      }
+      },
+
+      nuclideReview: {
+        visible: false,
+        nuclide: ''
+      },
+      currChannel: -1
     }
   },
   created() {
@@ -584,10 +614,10 @@ export default {
             this.thumbnailOption.series[0].symbol = 'none'
             break
           case 'Scatter':
-            this.option.series[0].type = 'scatterGL'
+            this.option.series[0].type = 'scatter'
             this.option.series[0].symbol = 'circle'
 
-            this.thumbnailOption.series[0].type = 'scatterGL'
+            this.thumbnailOption.series[0].type = 'scatter'
             this.thumbnailOption.series[0].symbol = 'circle'
             break
         }
@@ -618,6 +648,10 @@ export default {
       }
     },
 
+    handleChangeNuclideVisible() {
+      this.nuclideLibraryVisible = !this.nuclideLibraryVisible
+    },
+
     // 根据seriesName重绘线
     redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
       const series = findSeriesByName(this.option.series, seriesName)
@@ -695,8 +729,10 @@ export default {
 
     // 获取 Nuclide Library 数据
     async getSelPosNuclide(channel) {
+      this.currChannel = channel
+
       try {
-        this.loading = true
+        this.isLoadingNuclide = true
         const { sampleId, inputFileName: fileName } = this.sample
 
         const { success, result, message } = await getAction('/gamma/getSelPosNuclide', {
@@ -714,10 +750,17 @@ export default {
         this.list = []
         console.error(error)
       } finally {
-        this.loading = false
+        this.isLoadingNuclide = false
       }
     },
 
+    // Nuclide Library 单项双击
+    handleNuclideDblClick(nuclide) {
+      this.nuclideLibraryVisible = false
+      this.nuclideReview.nuclide = nuclide
+      this.nuclideReview.visible = true
+    },
+
     resize() {
       this.$refs.chartRef.resize()
       this.$refs.thumbnailChartRef.resize()
@@ -794,19 +837,25 @@ export default {
         const max = item.pointlist.find(point => point.y == Math.max(...allY))
         return max.x
       })
+
+      let find = null
       if (direction == 'right') {
         // 找到第一个比prevAxis大的xAxis
-        const find = maxXAxises.find(xAxis => xAxis > prevAxis)
+        find = maxXAxises.find(xAxis => xAxis > prevAxis)
         if (find) {
           this.option.series[0].markLine.data[0].xAxis = find
         }
       } else if (direction == 'left') {
         // 找到第一个比prevAxis小的xAxis
-        const find = maxXAxises.reverse().find(xAxis => xAxis < prevAxis)
+        find = maxXAxises.reverse().find(xAxis => xAxis < prevAxis)
         if (find) {
           this.option.series[0].markLine.data[0].xAxis = find
         }
       }
+
+      if (find) {
+        this.getSelPosNuclide(find)
+      }
     },
 
     // 鼠标按下时开启可刷选状态
@@ -1225,6 +1274,42 @@ export default {
     background-color: #153e44;
   }
 }
+
+::v-deep {
+  .pop-over-with-icon {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #0a544e;
+    height: 100%;
+    padding: 0 11px;
+    cursor: pointer;
+
+    .text {
+      font-family: MicrosoftYaHei;
+      color: #ade6ee;
+      letter-spacing: 1px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: none;
+    }
+
+    img {
+      margin-left: 5px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      flex-shrink: 0;
+      user-select: none;
+    }
+
+    &.ant-popover-open {
+      img {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
 </style>
 <style lang="less">
 .peak-infomation-tooltip {
@@ -1241,4 +1326,11 @@ export default {
   background-color: #55a9fe;
   border-color: #55a9fe;
 }
+
+.popover-with-icon {
+  z-index: 999;
+  .ant-popover-inner-content {
+    padding: 8px;
+  }
+}
 </style>