From 62ca472c62a04420ad7d261b8f1db28963668622 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Tue, 29 Aug 2023 19:54:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5Energy=20Calibration?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E3=80=81Nuclide=20Library=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=92=8CConfig=20User=20Library=E5=BC=B9=E7=AA=97=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3=E5=92=8C=E9=83=A8=E5=88=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/index.vue          |   3 +
 src/mixins/ModalMixin.js                      |  11 +-
 src/utils/chartHelper.js                      |  29 ++
 .../components/FitPeaksAndBaselineModal.vue   |  15 +-
 .../AnalyzeInteractiveToolModal/index.vue     |  40 +-
 .../Modals/ConfigUserLibraryModal.vue         | 108 +++--
 .../Modals/EnergyCalibrationModal.vue         | 130 ++++--
 .../components/Modals/LoadFromDBModal.vue     |   3 +
 .../components/Modals/NuclideLibraryModal.vue | 391 +++++++++++-------
 src/views/spectrumAnalysis/gamma-analysis.vue |  31 +-
 src/views/spectrumAnalysis/index.vue          |   8 +-
 11 files changed, 512 insertions(+), 257 deletions(-)

diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
index b6921f6..99734cb 100644
--- a/src/components/CustomTable/index.vue
+++ b/src/components/CustomTable/index.vue
@@ -97,6 +97,9 @@ export default {
             }
 
             this.$emit('rowClick', record, index)
+          },
+          dblclick: () => {
+            this.$emit('rowDblClick', record, index)
           }
         }
       }
diff --git a/src/mixins/ModalMixin.js b/src/mixins/ModalMixin.js
index def5dd3..8fac17e 100644
--- a/src/mixins/ModalMixin.js
+++ b/src/mixins/ModalMixin.js
@@ -4,15 +4,20 @@ export default {
             type: Boolean
         }
     },
+    data() {
+        return {
+            isLoading: false
+        }
+    },
     computed: {
         visible: {
             get() {
-                if (this.value && this.beforeModalOpen && typeof this.beforeModalOpen == 'function') {
-                    this.beforeModalOpen()
-                }
                 return this.value
             },
             set(val) {
+                if (val && this.beforeModalOpen && typeof this.beforeModalOpen == 'function') {
+                    this.beforeModalOpen()
+                }
                 this.$emit('input', val)
             }
         }
diff --git a/src/utils/chartHelper.js b/src/utils/chartHelper.js
index 511846b..d60b6cf 100644
--- a/src/utils/chartHelper.js
+++ b/src/utils/chartHelper.js
@@ -59,4 +59,33 @@ export function splitAxis(max, min, cnt, maxBoundaryGap = 1.1) {
         interval,
         max: _max
     }
+}
+
+/**
+ * 构建线形series
+ * @param {*} name 
+ * @param {*} data 
+ * @param {*} color 
+ * @param {*} extra 
+ * @returns 
+ */
+export function buildLineSeries(name, data, color, extra = {}) {
+    return {
+      name,
+      type: 'line',
+      data,
+      itemStyle: {
+        color
+      },
+      lineStyle: {
+        width: 1
+      },
+      symbol: 'none',
+      symbolSize: 1,
+      emphasis: {
+        disabled: true
+      },
+      animation: false,
+      ...extra
+    }
 }
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
index 371ba15..f2b2774 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/FitPeaksAndBaselineModal.vue
@@ -112,20 +112,7 @@ export default {
   data() {
     this.columns = columns
     return {
-      list: [
-        {
-          peak: 'peak',
-          nuclide: 'nuclide',
-          energy: 'energy',
-          netAreaInput: 'netAreaInput',
-          fwhmInput: 'fwhmInput',
-          Step: 'Step',
-          bwGamma: 'bwGamma',
-          netAreaCheckbox: false,
-          centroid: false,
-          fwhmCheckbox: false
-        }
-      ]
+      list: []
     }
   },
   methods: {
diff --git a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
index ae37649..da79052 100644
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
@@ -46,13 +46,13 @@
               <!-- 按钮组1 -->
               <template v-if="btnGroupType == 1">
                 <div class="peak-box-item">
-                  <a-button type="primary">Insert</a-button>
+                  <a-button type="primary" @click="handleInsert">Insert</a-button>
                 </div>
                 <div class="peak-box-item">
                   <a-button type="primary" @click="handleDel">Delete</a-button>
                 </div>
                 <div class="peak-box-item">
-                  <a-button type="primary">Fit</a-button>
+                  <a-button type="primary" @click="handleFit">Fit</a-button>
                 </div>
 
                 <div class="peak-box-item symbol" :key="4">
@@ -100,7 +100,7 @@
             <title-over-border title="Nuclide Identify">
               <a-form-model class="tolerance">
                 <a-form-model-item label="Tolerance">
-                  <a-input-number></a-input-number>
+                  <a-input-number v-model="model.tolerance"></a-input-number>
                 </a-form-model-item>
               </a-form-model>
               <div class="identify-item">
@@ -119,7 +119,7 @@
                 <a-space>
                   <a-input></a-input>
                   <a-button type="primary">Add</a-button>
-                  <a-button type="primary">Del</a-button>
+                  <a-button type="primary" @click="handleDelCurrNuclide">Del</a-button>
                 </a-space>
               </div>
             </title-over-border>
@@ -360,7 +360,13 @@ export default {
       selectedKeys: [], // 选中的列表
 
       fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
-      nuclideReviewModalVisible: false // Nuclide Review 弹窗
+      nuclideReviewModalVisible: false, // Nuclide Review 弹窗
+
+      model: {
+        possibleNuclideList: [],
+        tolerance: 0.5,
+        identifiedNuclide: '',
+      }
     }
   },
   methods: {
@@ -369,6 +375,7 @@ export default {
         this.isLoading = true
         this.option.series = []
 
+        // const { success, result, message } = Response
         const { success, result, message } = await getAction('/gamma/InteractiveTool', {
           sampleId: this.sampleId
         })
@@ -506,17 +513,14 @@ export default {
 
     // 点击图表，设置红线，改变表格的选中项
     handleChartClick(param) {
-      console.log('%c [ param ]-510', 'font-size:13px; background:pink; color:#bf2c9f;', param)
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
       if (point) {
         const xAxis = parseInt(point[0].toFixed())
-        console.log('%c [ xAxis ]-515', 'font-size:13px; background:pink; color:#bf2c9f;', xAxis)
         this.option.series[0].markLine.data[0].xAxis = xAxis
 
         // 获取每一段 Channel 中的最大值
         const maxXAxises = this.getPeakMaxValues()
-        console.log('%c [ maxXAxises ]-519', 'font-size:13px; background:pink; color:#bf2c9f;', maxXAxises)
 
         let index = 0
         // 计算当前选中的xAxis跟哪条 peak的最大值 最近
@@ -529,7 +533,6 @@ export default {
             const prev = maxXAxises[i - 1]
             const curr = maxXAxises[i]
 
-            console.log('%c [  ]-533', 'font-size:13px; background:pink; color:#bf2c9f;', prev, curr)
             if (xAxis >= prev && xAxis <= curr) {
               index = xAxis - prev < curr - xAxis ? i - 1 : i
               break
@@ -537,7 +540,6 @@ export default {
             continue
           }
         }
-        console.log('%c [ index ]-541', 'font-size:13px; background:pink; color:#bf2c9f;', index)
         this.selectedKeys = [this.list[index].index]
       }
     },
@@ -590,6 +592,11 @@ export default {
       this.commentModalVisible = true
     },
 
+    // Insert按钮
+    handleInsert() {
+      this.fitPeaksAndBaselineModalVisible = true
+    },
+
     // 删除
     handleDel() {
       if (!this.selectedKeys.length) {
@@ -622,6 +629,14 @@ export default {
       })
     },
 
+    // 匹配
+    handleFit() {
+      if(!this.list.length) {
+        this.$message.warn('No peak to fit.')
+        return
+      }
+    },
+
     // 表格的行点击
     handleTableRowClick(_, index) {
       const pointlist = this.channelPeakChart[index].pointlist
@@ -643,6 +658,11 @@ export default {
           brushType: 'rect'
         }
       })
+    },
+
+    // 右下角删除当前选中的nuclide
+    handleDelCurrNuclide() {
+
     }
   }
 }
diff --git a/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
index 8bb189a..22464dd 100644
--- a/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ConfigUserLibraryModal.vue
@@ -1,55 +1,83 @@
 <template>
   <custom-modal v-model="visible" :width="490" title="Config User Library" :footer="null">
-    <div class="config-user-library">
-      <a-transfer
-        :titles="['Total Nuclides', 'User Nuclides']"
-        :dataSource="list"
-        :list-style="{
-          width: '200px',
-          height: '400px'
-        }"
-        :target-keys="targetKeys"
-        :render="item => item.title"
-        :showSearch="true"
-        @change="handleChange"
-      ></a-transfer>
+    <a-spin :spinning="isLoading">
+      <div class="config-user-library">
+        <a-transfer
+          :titles="['Total Nuclides', 'User Nuclides']"
+          :dataSource="list"
+          :list-style="{
+            width: '200px',
+            height: '400px'
+          }"
+          :target-keys="targetKeys"
+          :render="item => item.title"
+          :showSearch="true"
+          :showSelectAll="false"
+          @change="handleChange"
+        ></a-transfer>
 
-      <div class="config-user-library-btns">
-        <div>
-          <a-button type="primary">Default</a-button>
-          <a-button type="primary">Load</a-button>
-        </div>
-        <div>
-          <a-button type="primary">Save</a-button>
-          <a-button type="primary">Apply</a-button>
+        <div class="config-user-library-btns">
+          <div>
+            <a-button type="primary">Default</a-button>
+            <a-button type="primary">Load</a-button>
+          </div>
+          <div>
+            <a-button type="primary">Save</a-button>
+            <a-button type="primary">Apply</a-button>
+          </div>
         </div>
       </div>
-    </div>
+    </a-spin>
   </custom-modal>
 </template>
 
 <script>
 import ModalMixin from '@/mixins/ModalMixin'
+import { getAction } from '@/api/manage'
 export default {
   mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
   data() {
     return {
-      list: [
-        {
-          key: '1',
-          title: 'Ac228'
-        },
-        {
-          key: '2',
-          title: 'Ag106M'
-        }
-      ],
+      list: [],
       targetKeys: []
     }
   },
   methods: {
     handleChange(targetKeys) {
       this.targetKeys = targetKeys
+    },
+
+    // 获取信息
+    async getInfo() {
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/gamma/configUserLibrary', {
+          sampleId: this.sampleId
+        })
+        if (success) {
+          this.isLoading = false
+          const { AllNuclides, UserNuclides } = result
+          this.list = AllNuclides.map(item => ({
+            key: item,
+            title: item
+          }))
+
+          this.targetKeys = UserNuclides.map(item => item)
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    beforeModalOpen() {
+      this.getInfo()
     }
   }
 }
@@ -69,4 +97,20 @@ export default {
     }
   }
 }
+
+::v-deep {
+  .ant-transfer-list-header {
+    text-align: center;
+
+    &-selected {
+      span:first-child {
+        display: none;
+      }
+    }
+
+    &-title {
+      position: static;
+    }
+  }
+}
 </style>
diff --git a/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue b/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
index 1146da4..40a252a 100644
--- a/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null">
+  <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null" destroy-on-close>
     <a-spin :spinning="isLoading">
       <div class="energy-calibration">
         <div class="left">
@@ -22,29 +22,33 @@
                 }"
               >
                 <a-form-model-item label="Channel">
-                  <a-input></a-input>
+                  <a-input v-model="model.channel"></a-input>
                 </a-form-model-item>
                 <a-form-model-item label="Energy">
-                  <a-input></a-input>
+                  <a-input v-model="model.energy"></a-input>
                 </a-form-model-item>
                 <a-form-model-item :label="' '">
-                  <a-button type="primary">Insert</a-button>
+                  <a-button type="primary" @click="handleInsert">Insert</a-button>
                 </a-form-model-item>
                 <a-form-model-item :label="' '">
-                  <a-button type="primary">Modify</a-button>
+                  <a-button type="primary" @click="handleModify">Modify</a-button>
                 </a-form-model-item>
                 <a-form-model-item :label="' '">
-                  <a-button type="primary">Delete</a-button>
+                  <a-button type="primary" @click="handleDelete">Delete</a-button>
                 </a-form-model-item>
               </a-form-model>
               <!-- 表格 -->
-              <a-table
+              <custom-table
                 :columns="columns"
-                :dataSource="list"
+                :list="list"
                 :pagination="false"
+                size="small"
                 :class="list.length ? 'has-data' : ''"
                 :scroll="{ y: 182 }"
-              ></a-table>
+                :selectedRowKeys.sync="selectedRowKeys"
+                :canDeselect="false"
+                @rowClick="handleRowClick"
+              ></custom-table>
               <!-- 表格结束 -->
               <div class="operators">
                 <div>
@@ -72,13 +76,19 @@
           <title-over-border title="Data Source" style="height: 100%">
             <div class="data-source">
               <div class="content">
-                <div class="item" v-for="(item, index) in dataSourceList" :key="index">
+                <div
+                  class="item"
+                  :class="item == currSelectedDataSource? 'active': ''"
+                  v-for="(item, index) in dataSourceList"
+                  :key="index"
+                  @click="handleDataSourceClick(item)"
+                >
                   {{ item }}
                 </div>
               </div>
               <div class="footer mt-20">
-                <a-button type="primary">Set to Current</a-button>
-                <div class="mt-20">CallUpdate2</div>
+                <a-button type="primary" @click="handleSetToCurrent">Set to Current</a-button>
+                <div class="mt-20">{{ appliedDataSource }}</div>
               </div>
             </div>
           </title-over-border>
@@ -94,6 +104,7 @@ import TitleOverBorder from '../TitleOverBorder.vue'
 import CustomChart from '@/components/CustomChart/index.vue'
 import { getAction } from '@/api/manage'
 import { cloneDeep } from 'lodash'
+import { buildLineSeries } from '@/utils/chartHelper'
 
 const columns = [
   {
@@ -132,8 +143,8 @@ const initialOption = {
     bottom: 0
   },
   xAxis: {
-    min: 42,
-    max: 2740,
+    min: 1,
+    max: 'dataMax',
     axisLabel: {
       color: '#fff'
     },
@@ -169,23 +180,7 @@ const initialOption = {
       fontSize: 14
     }
   },
-  series: [
-    {
-      type: 'line',
-      symbol: 'square',
-      itemStyle: {
-        color: '#FF0000' // 设置符号的颜色
-      },
-      lineStyle: {
-        color: '#C2CC11' // 设置折线的颜色
-      },
-      data: [
-        [42, 0],
-        [100, 0.2],
-        [978, 0.1]
-      ]
-    }
-  ]
+  series: []
 }
 
 export default {
@@ -203,7 +198,11 @@ export default {
       equation: '',
       dataSourceList: [],
       list: [],
-      option: cloneDeep(initialOption)
+      option: cloneDeep(initialOption),
+      selectedRowKeys: [],
+      model: {},
+      currSelectedDataSource: '',
+      appliedDataSource: ''
     }
   },
   methods: {
@@ -217,10 +216,45 @@ export default {
         if (success) {
           console.log('%c [  ]-220', 'font-size:13px; background:pink; color:#bf2c9f;', result)
           const { AllData, equation, list_dataSource, param, table, uncert } = result
+          const [linePoint, scatterPoint] = AllData
+
+          this.dataSourceList = [...list_dataSource, 'other']
+          this.currSelectedDataSource = list_dataSource[0]
+          this.appliedDataSource = list_dataSource[0]
 
-          this.dataSourceList = list_dataSource
           this.equation = equation
+
+          table.forEach((item, index) => {
+            item.id = index
+          })
           this.list = table
+
+          const series = []
+          series.push(
+            buildLineSeries(
+              'LineSeries',
+              linePoint.pointlist.map(({ x, y }) => [x, y]),
+              `rgb(${linePoint.color})`
+            )
+          )
+          series.push({
+            type: 'scatter',
+            data: scatterPoint.pointlist.map(({ x, y }) => {
+              return {
+                value: [x, y],
+                itemStyle: {
+                  color: scatterPoint.color,
+                  borderWidth: 0
+                }
+              }
+            }),
+            emphasis: {
+              disabled: true
+            },
+            animation: false,
+            zlevel: 20
+          })
+          this.option.series = series
         } else {
           this.$message.error(message)
         }
@@ -231,6 +265,30 @@ export default {
 
     beforeModalOpen() {
       this.getData()
+    },
+
+    // 表格单行点击
+    handleRowClick(row, index) {
+      this.model = cloneDeep(row)
+      this.currSelectedIndex = index
+    },
+
+    // 插入
+    handleInsert() {},
+
+    // 修改
+    handleModify() {},
+
+    // 删除
+    handleDelete() {},
+
+    // 右侧DataSource中的选项点击
+    handleDataSourceClick(item) {
+      this.currSelectedDataSource = item
+    },
+
+    handleSetToCurrent() {
+      this.appliedDataSource = this.currSelectedDataSource
     }
   }
 }
@@ -336,8 +394,12 @@ export default {
         .item {
           height: 32px;
           line-height: 32px;
-          background-color: #296d81;
           padding: 0 5px;
+          cursor: pointer;
+
+          &.active {
+            background-color: #296d81;
+          }
         }
       }
 
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
index 099be4b..fffabdb 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue
@@ -193,6 +193,9 @@ export default {
     // 获取台站和探测器列表
     async getStationAndDetectorList(value) {
       try {
+        this.stationList = []
+        this.detectorList = []
+
         const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
           menuTypes: value,
           dbName: this.queryParam.dbName,
diff --git a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
index d494997..5acad82 100644
--- a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
@@ -1,110 +1,134 @@
 <template>
-  <custom-modal v-model="visible" :width="1100" title="Nuclide Library" :footer="null">
-    <div class="nuclide-library">
-      <div class="nuclide-library-list">
-        <div
-          class="nuclide-library-list-item"
-          :class="{ active: currNuclide == item }"
-          v-for="(item, index) in nuclideList"
-          :key="index"
-          @click="handleNuclideItemClick(item)"
-        >
-          {{ item.title }}
+  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
+    <a-spin :spinning="isLoading">
+      <div class="nuclide-library">
+        <div class="nuclide-library-list">
+          <div
+            class="nuclide-library-list-item"
+            :class="{ active: selectedNuclide == item }"
+            v-for="(item, index) in nuclideList"
+            :key="index"
+            @click="handleNuclideItemClick(item)"
+          >
+            {{ item }}
+          </div>
         </div>
-      </div>
-      <div class="nuclide-library-settings">
-        <div class="nuclide-library-settings-select">
-          <title-over-border class="select-library" title="Select Library">
-            <a-radio-group>
-              <a-radio>User Library</a-radio>
-              <a-radio>Full Library</a-radio>
-              <a-radio>Relevant Library</a-radio>
-            </a-radio-group>
-          </title-over-border>
-          <div class="parent-and-daughters">
-            <div class="parents">
-              <div class="title">Parents</div>
-              <div class="content"></div>
-            </div>
-            <div class="daughters">
-              <div class="title">Daughters</div>
-              <div class="content">
-                <a-table
-                  size="small"
-                  :class="daughterList.length ? 'has-data' : ''"
-                  :columns="daughterColumns"
-                  :dataSource="daughterList"
-                  :pagination="false"
-                  :scroll="{ y: 123 }"
-                ></a-table>
+        <div class="nuclide-library-settings">
+          <div class="nuclide-library-settings-select">
+            <title-over-border class="select-library" title="Select Library">
+              <a-radio-group v-model="model.libraryName" @change="handleSearch">
+                <a-radio value="UserLibrary">User Library</a-radio>
+                <a-radio value="FULLLibrary">Full Library</a-radio>
+                <a-radio value="RelevantLibrary">Relevant Library</a-radio>
+              </a-radio-group>
+            </title-over-border>
+            <div class="parent-and-daughters">
+              <div class="parents">
+                <div class="title">Parents</div>
+                <div class="content">
+                  <div
+                    class="parent-item"
+                    :class="selectedParent == parentItem ? 'active' : ''"
+                    v-for="(parentItem, index) in parentList"
+                    :key="index"
+                    @dblclick="handleParentDBClick(parentItem)"
+                    @click="handleParentClick(parentItem)"
+                  >
+                    {{ parentItem }}
+                  </div>
+                </div>
+              </div>
+              <div class="daughters">
+                <div class="title">Daughters</div>
+                <div class="content">
+                  <custom-table
+                    size="small"
+                    :class="daughterList.length ? 'has-data' : ''"
+                    :columns="daughterColumns"
+                    :list="daughterList"
+                    :pagination="false"
+                    :scroll="{ y: 123 }"
+                    @rowDblClick="handleParentDBClick($event.daughters)"
+                  ></custom-table>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="nuclide-library-settings-main">
-          <a-form-model layout="inline">
-            <a-form-model-item label="Name">
-              <div class="nuclide-name">Co57</div>
-            </a-form-model-item>
-            <a-form-model-item label="Half Life">
-              271.740D
-            </a-form-model-item>
-            <a-form-model-item label="Half Life Err">
-              0.022%
-            </a-form-model-item>
-            <a-form-model-item label="Lines">
-              14
-            </a-form-model-item>
-          </a-form-model>
-          <!-- 主体表格 -->
-          <a-table
-            size="small"
-            :class="mainList.length ? 'has-data' : ''"
-            :columns="mainColumns"
-            :dataSource="mainList"
-            :pagination="false"
-            :scroll="{ y: 175 }"
-          >
-          </a-table>
-        </div>
-        <div class="nuclide-library-settings-operation">
-          <a-space :size="10">
-            <span>
-              Energy:
-            </span>
-            <a-input></a-input>
-            <a-input-number></a-input-number>
-            <a-button type="primary">Search</a-button>
-          </a-space>
-          <a-space :size="10">
-            <a-button type="primary">Reset</a-button>
-            <a-button type="primary" @click="visible = false">Close</a-button>
-          </a-space>
+          <div class="nuclide-library-settings-main">
+            <a-form-model layout="inline">
+              <a-form-model-item label="Name">
+                <a-input v-model="model.nuclideName"></a-input>
+              </a-form-model-item>
+              <a-form-model-item label="Half Life">
+                {{ nuclideInfo.lab_halfLife }}
+              </a-form-model-item>
+              <a-form-model-item label="Half Life Err">
+                {{ nuclideInfo.lab_halfLifeErr }}
+              </a-form-model-item>
+              <a-form-model-item label="Lines">
+                {{ nuclideInfo.lab_lines }}
+              </a-form-model-item>
+            </a-form-model>
+            <!-- 主体表格 -->
+            <a-table
+              size="small"
+              :class="nuclLinesLibs.length ? 'has-data' : ''"
+              :columns="mainColumns"
+              :dataSource="nuclLinesLibs"
+              :pagination="false"
+              :scroll="{ y: 175 }"
+            >
+              <template slot="keyLine" slot-scope="text">
+                <span v-if="text == 1" class="green-check-mark"> </span>
+              </template>
+            </a-table>
+          </div>
+          <div class="nuclide-library-settings-operation">
+            <a-space :size="10">
+              <span>
+                Energy:
+              </span>
+              <a-input v-model="model.editEnergy"></a-input>
+              <a-input-number
+                v-model="model.err"
+                :min="0"
+                :step="0.5"
+                :precision="2"
+                @blur="handleErrInputBlur"
+              ></a-input-number>
+              <a-button type="primary" @click="handleSearch">Search</a-button>
+            </a-space>
+            <a-space :size="10">
+              <a-button type="primary" @click="handleReset">Reset</a-button>
+              <a-button type="primary" @click="visible = false">Close</a-button>
+            </a-space>
+          </div>
         </div>
       </div>
-    </div>
+    </a-spin>
   </custom-modal>
 </template>
 
 <script>
 import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../TitleOverBorder.vue'
+import { getAction } from '@/api/manage'
 
 // 右上角表格配置
 const daughterColumns = [
   {
     title: 'Name',
-    dataIndex: 'name',
+    dataIndex: 'daughters',
     align: 'center'
   },
   {
     title: 'Ratio',
-    dataIndex: 'ratio',
+    dataIndex: 'branchingratios',
     align: 'center'
   },
   {
     title: 'Status',
-    dataIndex: 'status',
+    dataIndex: 'daughtersstable',
     align: 'center'
   }
 ]
@@ -113,7 +137,10 @@ const daughterColumns = [
 const mainColumns = [
   {
     title: 'Id',
-    dataIndex: 'id'
+    width: 80,
+    customRender: (_, __, index) => {
+      return index + 1
+    }
   },
   {
     title: 'Full Name',
@@ -121,23 +148,32 @@ const mainColumns = [
   },
   {
     title: 'Energy(keV)',
-    dataIndex: 'energy'
+    dataIndex: 'energy',
+    width: 100
   },
   {
     title: 'Energy Uncert(%)',
-    dataIndex: 'energyUncert'
+    dataIndex: 'energyUncert',
+    width: 120
   },
   {
     title: 'Yield',
-    dataIndex: 'yield'
+    dataIndex: 'yield',
+    width: 80
   },
   {
     title: 'Yield Uncert(%)',
-    dataIndex: 'yieldUncert'
+    dataIndex: 'yieldUncert',
+    width: 120
   },
   {
     title: 'KeyLine',
-    dataIndex: 'keyLine'
+    dataIndex: 'keyFlag',
+    width: 100,
+    align: 'center',
+    scopedSlots: {
+      customRender: 'keyLine'
+    }
   }
 ]
 
@@ -146,44 +182,106 @@ export default {
   components: {
     TitleOverBorder
   },
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
   data() {
     this.daughterColumns = daughterColumns
     this.mainColumns = mainColumns
     return {
-      nuclideList: [
-        {
-          id: 1,
-          title: 'Ac228'
-        },
-        {
-          id: 2,
-          title: 'Ag106M'
-        }
-      ],
-      currNuclide: {}, // 当前选中的Nuclide
-      daughterList: [
-        {
-          name: 'name',
-          ratio: 'ratio',
-          status: 'status'
-        }
-      ],
-      mainList: [
-        {
-          id: 'id',
-          fullName: 'fullName',
-          energy: 'energy',
-          energyUncert: 'energyUncert',
-          yield: 'yield',
-          yieldUncert: 'yieldUncert',
-          keyLine: 'keyLine'
-        }
-      ]
+      isLoading: false,
+      nuclideList: [],
+      nuclideInfo: {},
+      daughterList: [],
+      parentList: [],
+      nuclLinesLibs: [],
+      model: {},
+
+      selectedNuclide: {}, // 当前选中的Nuclide
+      selectedParent: {} // 当前选中的Parent
     }
   },
   methods: {
+    // 获取详情
+    async getInfo(selectFirst = false) {
+      this.selectedParent = {}
+
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/gamma/NuclideLibrary', {
+          sampleId: this.sampleId,
+          ...this.model
+        })
+        if (success) {
+          const {
+            daughter: { list_parent, table_daughter },
+            nuclLinesLibs,
+            nuclideInfo,
+            nuclides
+          } = result
+
+          this.nuclideList = nuclides
+          this.parentList = list_parent ? list_parent.filter(item => item) : []
+          this.daughterList = table_daughter ? table_daughter.filter(item => item.daughters) : []
+          this.nuclideInfo = nuclideInfo
+          this.nuclLinesLibs = nuclLinesLibs
+
+          if (selectFirst) {
+            this.selectedNuclide = nuclides[0]
+            this.model.nuclideName = nuclides[0]
+          }
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.model = {
+        libraryName: 'UserLibrary',
+        err: 0.5,
+        editEnergy: '',
+        nuclideName: ''
+      }
+      this.getInfo(true)
+    },
     handleNuclideItemClick(item) {
-      this.currNuclide = item
+      this.selectedNuclide = item
+      this.model.nuclideName = item
+      this.getInfo()
+    },
+
+    handleErrInputBlur() {
+      if (!this.model.err) {
+        this.model.err = 0
+      }
+    },
+
+    // 搜索
+    handleSearch() {
+      this.getInfo(true)
+    },
+
+    // 重置
+    handleReset() {
+      this.model.editEnergy = ''
+      this.getInfo(true)
+    },
+
+    handleParentClick(item) {
+      this.selectedParent = item
+    },
+
+    // 在Parents选项上双击
+    handleParentDBClick(item) {
+      this.model.nuclideName = item
+      this.getInfo()
     }
   }
 }
@@ -197,7 +295,7 @@ export default {
   &-list {
     padding: 5px;
     width: 150px;
-    height: 502px;
+    height: 516px;
     overflow: auto;
     background-color: #275466;
 
@@ -206,10 +304,6 @@ export default {
       line-height: 32px;
       padding: 0 4px;
       cursor: pointer;
-
-      &.active {
-        background-color: #296d81;
-      }
     }
   }
 
@@ -253,6 +347,13 @@ export default {
 
           .content {
             background-color: #275466;
+            overflow: auto;
+
+            .parent-item {
+              padding: 3px 5px;
+              cursor: pointer;
+              user-select: none;
+            }
           }
         }
 
@@ -289,32 +390,7 @@ export default {
 
       .ant-form {
         display: flex;
-
-        .nuclide-name {
-          background-color: #285367;
-          padding: 0 3px;
-        }
-
-        &-item {
-          flex: 1;
-          display: flex;
-
-          ::v-deep {
-            .ant-form-item {
-              &-label {
-                line-height: 26px;
-              }
-
-              &-control {
-                line-height: 26px;
-
-                &-wrapper {
-                  flex: 1;
-                }
-              }
-            }
-          }
-        }
+        justify-content: space-between;
       }
 
       .ant-table {
@@ -351,4 +427,23 @@ export default {
     }
   }
 }
+
+.active {
+  background-color: #296d81;
+}
+
+.green-check-mark {
+  &::after {
+    @color: #3df9a7;
+
+    content: '';
+    border-radius: 0px;
+    width: 16px;
+    height: 9px;
+    display: inline-block;
+    border-bottom: 3px solid @color;
+    border-left: 3px solid @color;
+    transform: rotate(-45deg);
+  }
+}
 </style>
diff --git a/src/views/spectrumAnalysis/gamma-analysis.vue b/src/views/spectrumAnalysis/gamma-analysis.vue
index 5601281..cec04b1 100644
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/gamma-analysis.vue
@@ -256,7 +256,7 @@ export default {
         this.isLoading = true
         this.option.series = []
         this.thumbnailOption.series = []
-
+        // const { success, result, message } = Response
         const { success, result, message } = await getAction('/gamma/gammaByDB', {
           dbName,
           sampleId
@@ -328,8 +328,10 @@ export default {
           this.option.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
           this.thumbnailOption.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
 
+          const series = []
+
           // 推入Spectrum Line
-          this.option.series.push({
+          series.push({
             name: 'Spectrum',
             type: 'line',
             data: shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
@@ -392,7 +394,7 @@ export default {
           })
 
           // 推入BaseLine
-          this.option.series.push({
+          series.push({
             name: 'BaseLine',
             type: 'line',
             data: channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
@@ -406,11 +408,12 @@ export default {
             emphasis: {
               disabled: true
             },
-            animation: false
+            animation: false,
+            zlevel: 2
           })
 
           // 推入LcLine线
-          this.option.series.push({
+          series.push({
             name: 'LcLine',
             type: 'line',
             data: channelLcLine.pointlist.map(({ x, y }) => [x, y]),
@@ -424,11 +427,12 @@ export default {
             emphasis: {
               disabled: true
             },
-            animation: false
+            animation: false,
+            zlevel: 3
           })
 
           // 推入Scac线
-          this.option.series.push({
+          series.push({
             name: 'ScacLine',
             type: 'line',
             data: channelScacLine.pointlist.map(({ x, y }) => [x, y]),
@@ -442,11 +446,12 @@ export default {
             emphasis: {
               disabled: true
             },
-            animation: false
+            animation: false,
+            zlevel: 4
           })
 
           // 推入基线控制点
-          this.option.series.push({
+          series.push({
             name: 'BaseLine_Ctrl_Point',
             type: 'scatter',
             data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
@@ -463,7 +468,7 @@ export default {
               disabled: true
             },
             animation: false,
-            zlevel: 20
+            zlevel: 5
           })
 
           // 推入Peak Line
@@ -480,10 +485,12 @@ export default {
                 width: 1
               },
               symbol: 'none',
-              animation: false
+              animation: false,
+              zlevel: 6
             })
           })
-          this.option.series.push(...peakLines)
+          series.push(...peakLines)
+          this.option.series = series
 
           this.option.tooltip.formatter = this.tooltipFormatter
         } else {
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 3061e62..1bd9f35 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -120,12 +120,12 @@
     <!-- Data Processing Log 弹窗结束 -->
 
     <!-- Config User Library 弹窗开始 -->
-    <config-user-library-modal v-model="configUserLibModalVisible" />
+    <config-user-library-modal v-model="configUserLibModalVisible" :sampleId="sampleData.sampleId" />
     <!-- Config User Library 弹窗结束 -->
 
-    <!-- Config User Library 弹窗开始 -->
-    <nuclide-library-modal v-model="nuclideLibraryModalVisible" />
-    <!-- Config User Library 弹窗结束 -->
+    <!-- Nuclide Library 弹窗开始 -->
+    <nuclide-library-modal v-model="nuclideLibraryModalVisible" :sampleId="sampleData.sampleId" />
+    <!-- Nuclide Library 弹窗结束 -->
 
     <!-- Arr 和 RRR 弹窗开始 -->
     <arr-rrr-modal