feat: 对接Energy Calibration弹窗、Nuclide Library弹窗和Config User Library弹窗中的接口和部分逻辑

2023-08-29 19:54:09 +08:00 · 2023-08-29 19:54:09 +08:00 · 62ca472c62
commit 62ca472c62
parent 0b3258f723
11 changed files with 512 additions and 257 deletions
--- 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)
          }
        }
      }
--- 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)
            }
        }
--- 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
+    }
 }
--- 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: {
--- 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() {
+
    }
  }
 }
--- 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>
--- 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;
+          }
        }
      }

--- 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,
--- 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>
--- 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 {
--- 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