feat: Beta Gamma的各弹窗,对接部分接口

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "target": "ES6",
+    "module": "CommonJS",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

src/style.less

@@ -24,6 +24,12 @@
 
 @text-color: #fff;
 
+@component-background: @modalBg;
+@heading-color: #fff;
+
+@input-bg: @formInputBgColor;
+@input-border-color: @formInputBorderColor;
+
 .ant-btn:hover,
 .ant-btn:active,
 .ant-btn:focus {
@@ -69,6 +75,8 @@ body {
 @table-padding-vertical-sm: 2px;
 @table-padding-vertical: 6px;
 @table-padding-horizontal: 8px;  
+@table-row-hover-bg: #0e505f;
+
 .ant-table {
   color: #ade6ee;
   font-size: 16px;
@@ -89,15 +97,12 @@ body {
       &:nth-child(2n) {
         background-color: #08373a;
       }
+
       td {
         padding: 10px 8px !important;
         border-bottom: none;
       }
-      &:hover {
+
-        td {
-          background-color: #0e505f !important;
-        }
-      }
       &.ant-table-row-selected {
         td {
           background-color: #0d4e5c !important;
@@ -337,9 +342,11 @@ body {
 @time-picker-selected-bg: @primary-color;
 @item-hover-bg: @primary-color;
 .ant-time-picker {
+  width: 100%;
+
   &-input {
-    background: @modalBg;
     border-radius: 0;
+
     &::placeholder {
       color: #fff;
     }
@@ -347,7 +354,6 @@ body {
 
   &-clear,
   &-clock-icon {
-    background-color: @modalBg !important;
     color: #01b6e3 !important;
   }
 
@@ -370,8 +376,6 @@ body {
 
 // 输入框样式
 .ant-input {
-  background-color: @formInputBgColor !important;
-  border-color: @formInputBorderColor !important;
   border-radius: 0;
   color: #fff;
   &::placeholder {

src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue

@@ -12,7 +12,7 @@
       <span @click="handleUnzoom">Unzoom</span>
     </div>
     <div class="beta-gamma-spectrum-chart-main">
-      <!-- 2D 图表 -->
+      <!-- 2D 图表，为了相应Unzoom采用的v-show -->
       <div class="_2d-chart" v-show="active == 0">
         <custom-chart
           ref="chartRef"
@@ -46,9 +46,44 @@ import CustomChart from '@/components/CustomChart/index.vue'
 import Custom3DChart from '@/components/Custom3DChart/index.vue'
 import ColorPalette from './ColorPalette.vue'
 import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper.js'
+import * as echarts from 'echarts'
 
 const buttons = ['2D', '3D Surface', '3D Scatter']
 
+function renderItem(params, api) {
+  console.log('%c [ params, api ]-54', 'font-size:13px; background:pink; color:#bf2c9f;', params, api)
+  const categoryIndex = api.value(0)
+  console.log('%c [ categoryIndex ]-56', 'font-size:13px; background:pink; color:#bf2c9f;', categoryIndex)
+  const start = api.coord([api.value(1), categoryIndex])
+  console.log('%c [ start ]-58', 'font-size:13px; background:pink; color:#bf2c9f;', start)
+  const end = api.coord([api.value(2), categoryIndex])
+  console.log('%c [ end ]-60', 'font-size:13px; background:pink; color:#bf2c9f;', end)
+  const height = api.size([0, 1])[1] * 0.6
+  console.log('%c [ height ]-62', 'font-size:13px; background:pink; color:#bf2c9f;', height)
+  const rectShape = echarts.graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height: height
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height
+    }
+  )
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style()
+    }
+  )
+}
+
 // 2D 配置
 const twoDOption = {
   grid: {
@@ -79,6 +114,11 @@ const twoDOption = {
     },
     nameLocation: 'center',
     nameGap: 30,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
     axisLabel: {
       color: '#ade6ee',
       fontSize: 12
@@ -104,6 +144,11 @@ const twoDOption = {
     },
     nameLocation: 'center',
     nameGap: 35,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
     axisLabel: {
       color: '#ade6ee',
       fontSize: 12
@@ -121,16 +166,28 @@ const twoDOption = {
     max: 256,
     interval: 64
   },
-  series: {
+  series: [
-    xAxisIndex: 0,
+    {
-    yAxisIndex: 0,
+      type: 'scatter',
-    type: 'scatter',
+      symbolSize: 5,
-    symbolSize: 5,
+      data: [],
-    data: [],
+      itemStyle: {
-    itemStyle: {
+        color: '#fff'
-      color: '#fff'
+      }
+    },
+    {
+      type: 'custom',
+      renderItem: renderItem,
+      itemStyle: {
+        opacity: 0.8
+      },
+      encode: {
+        x: [1, 2],
+        y: 0
+      },
+      data: [[]]
     }
-  },
+  ],
   brush: {}
 }
 
@@ -154,26 +211,26 @@ const threeDSurfaceOption = {
   },
   grid3D: {
     axisLabel: {
-      color: '#C4E5A6'
+      color: '#ade6ee'
     },
     axisPointer: {
       show: false
     },
     axisLine: {
       lineStyle: {
-        color: '#fff'
+        color: 'rgba(119, 181, 213, .3)'
       }
     },
     splitLine: {
       lineStyle: {
-        color: '#fff'
+        color: 'rgba(119, 181, 213, .3)'
       }
     }
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     min: 0,
@@ -183,7 +240,7 @@ const threeDSurfaceOption = {
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     min: 0,
@@ -193,7 +250,7 @@ const threeDSurfaceOption = {
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     max: 0
@@ -223,26 +280,26 @@ const threeDScatterOption = {
   },
   grid3D: {
     axisLabel: {
-      color: '#C4E5A6'
+      color: '#ade6ee'
     },
     axisPointer: {
       show: false
     },
     axisLine: {
       lineStyle: {
-        color: '#fff'
+        color: 'rgba(119, 181, 213, .3)'
       }
     },
     splitLine: {
       lineStyle: {
-        color: '#fff'
+        color: 'rgba(119, 181, 213, .3)'
       }
     }
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     min: 0,
@@ -252,7 +309,7 @@ const threeDScatterOption = {
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     min: 0,
@@ -262,7 +319,7 @@ const threeDScatterOption = {
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
-      color: '#C4E5A6',
+      color: '#5b9cba',
       fontSize: 14
     },
     max: 0
@@ -288,6 +345,10 @@ export default {
     histogramDataDList: {
       type: Array,
       default: () => []
+    },
+    boundary: {
+      type: Array,
+      default: () => []
     }
   },
   components: {
@@ -317,6 +378,13 @@ export default {
     // 点击改变Beta-Gamma Spectrum: Sample图表类型
     handleChange(index) {
       this.active = index
+
+      // 因第一个二维的图表采用的v-show，而在该图表不显示的时候，且改变了浏览器大小触发resize时，大小会变为0, 故在切换回来的时候resize一下
+      if (this.active == 0) {
+        this.$nextTick(() => {
+          this.resize()
+        })
+      }
     },
 
     // 点击unzoom
@@ -359,19 +427,23 @@ export default {
     handleMouseUp() {
       setTimeout(() => {
         const chart = this.$refs.chartRef.getChartInstance()
-        // 清理刷选的范围
+        this.clearBrush(chart)
-        chart.dispatchAction({
-          type: 'brush',
-          areas: []
-        })
-
-        // 改为不可刷选状态
-        chart.dispatchAction({
-          type: 'takeGlobalCursor'
-        })
       }, 0)
     },
 
+    clearBrush(chart) {
+      // 清理刷选的范围
+      chart.dispatchAction({
+        type: 'brush',
+        areas: []
+      })
+
+      // 改为不可刷选状态
+      chart.dispatchAction({
+        type: 'takeGlobalCursor'
+      })
+    },
+
     // 刷选完毕时
     handleBrushEnd(param) {
       const chart = this.$refs.chartRef.getChartInstance()
@@ -393,16 +465,7 @@ export default {
         this.emitRangeChange([x1, x2, y1, y2])
       }
 
-      // 清理刷选的范围
+      this.clearBrush(chart)
-      chart.dispatchAction({
-        type: 'brush',
-        areas: []
-      })
-
-      // 改为不可刷选状态
-      chart.dispatchAction({
-        type: 'takeGlobalCursor'
-      })
     },
 
     // 通知上层范围改变
@@ -435,14 +498,16 @@ export default {
     }
   },
   watch: {
+    // 2D 图表
     histogramDataList: {
       handler(newVal) {
         this.active = 0
-        this.twoDOption.series.data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
+        this.twoDOption.series[0].data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
       },
       immediate: true
     },
 
+    // 3D 图表
     histogramDataDList: {
       handler(newVal) {
         const maxCount = Math.max(...newVal.map(item => item.c))
@@ -457,6 +522,15 @@ export default {
       immediate: true
     },
 
+    // 2D 图表 上的 矩形
+    boundary: {
+      handler(newVal) {
+        console.log('%c [  ]-462', 'font-size:13px; background:pink; color:#bf2c9f;', newVal)
+        this.twoDOption.series[1].data = newVal.map(({ minX, minY, maxX, maxY }) => [minX, minY, maxX, maxY])
+      },
+      immediate: true
+    },
+
     currCount: {
       handler(val) {
         if (val <= this.maxCount) {
@@ -466,9 +540,9 @@ export default {
             val / this.maxCount
           )
 
-          this.twoDOption.series.itemStyle.color = `rgb(${r}, ${g}, ${b})`
+          this.twoDOption.series[0].itemStyle.color = `rgb(${r}, ${g}, ${b})`
         } else {
-          this.twoDOption.series.itemStyle.color = '#fff'
+          this.twoDOption.series[0].itemStyle.color = '#fff'
         }
       },
       immediate: true

src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue

@@ -4,7 +4,7 @@
     :width="900"
     title="Analysis Settings"
     class="analysis-settings"
-    :okHanlder="handleOk"
+    :okHandler="handleOk"
   >
     <!-- 第一行 -->
     <div class="analysis-settings-item">

src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue

@@ -1,9 +1,8 @@
 <template>
-  <custom-modal v-model="visible" :width="1000" :title="type == 1 ? 'ARR' : 'RRR'">
+  <custom-modal v-model="visible" :width="1000" :title="type == 1 || type == 3 ? 'ARR' : 'RRR'">
-    <pre>
+    <a-spin :spinning="isLoading">
-        {{ content }}
+      <pre>{{ content }}</pre>
-      </pre
+    </a-spin>
-    >
     <div slot="custom-footer" style="text-align: center;">
       <a-space :size="20">
         <a-button type="primary">Export</a-button>
@@ -20,45 +19,41 @@ export default {
   mixins: [ModalMixin],
   props: {
     type: {
-      type: Number,
+      type: Number
-      default: 1
+    },
+    sampleId: {
+      type: String
     }
   },
   data() {
     return {
-      content: `--------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      content: '',
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
-       `,
       isLoading: true
     }
   },
   methods: {
     async getContent() {
+      let url = ''
+      switch (this.type) {
+        case 3:
+          url = '/spectrumAnalysis/viewARR'
+          break
+      }
       try {
-        const res = getAction('/')
+        this.content = ''
+        this.isLoading = true
+        const res = await getAction(url, { sampleId: this.sampleId })
+        this.content = res
       } catch (error) {
         console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      if (this.sampleId) {
+        this.getContent()
       }
     }
   }
@@ -67,7 +62,7 @@ export default {
 
 <style lang="less" scoped>
 pre {
-  max-height: 450px;
+  height: 450px;
   padding: 5px;
   overflow: auto;
   background-color: #285367;

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <custom-modal v-model="visible" :width="800" title="Comments">
+    <a-spin :spinning="isLoading">
+      <title-over-boarder title="Spectrum Comment">
+        <a-textarea v-model="comments.spectrumCommentInfo" :rows="8" :disabled="true"></a-textarea>
+      </title-over-boarder>
+      <title-over-boarder title="Other Analyser's Comment">
+        <a-textarea v-model="comments.spectrumOtherCommentInfo" :rows="8" :disabled="true"></a-textarea>
+      </title-over-boarder>
+      <title-over-boarder title="Spectrum Analysis Comment">
+        <a-textarea v-model="comments.spectrumAnalysisCommentInfo" :rows="8" :disabled="!isAdd"></a-textarea>
+      </title-over-boarder>
+    </a-spin>
+    <a-space slot="custom-footer" :size="20">
+      <a-button v-if="isAdd" type="primary" @click="handleOk">Commit Comment Indormations</a-button>
+      <a-button type="primary" @click="visible = false">Cancel</a-button>
+    </a-space>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBoarder from '../../TitleOverBoarder.vue'
+import { getAction } from '../../../../../api/manage'
+export default {
+  components: { TitleOverBoarder },
+  mixins: [ModalMixin],
+  props: {
+    isAdd: {
+      type: Boolean,
+      default: true
+    },
+    sampleId: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      comments: {
+        spectrumAnalysisCommentInfo: '',
+        spectrumCommentInfo: '',
+        spectrumOtherCommentInfo: ''
+      },
+      isLoading: false
+    }
+  },
+  methods: {
+    async getCommets() {
+      try {
+        this.isLoading = true
+        const res = await getAction('/spectrumAnalysis/viewComment', {
+          sampleId: this.sampleId
+        })
+        console.log('%c [ res ]-44', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+        if (res.success) {
+          this.comments = res.result
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.comments = ''
+      this.getCommets()
+    },
+    handleOk() {
+      console.log('%c [  ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', this.comments)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title-over-border {
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue

@@ -0,0 +1,75 @@
+<template>
+  <custom-modal v-model="visible" :width="750" title="QC Result">
+    <a-table :columns="columns" :dataSource="list" :pagination="false">
+      <template slot="status" slot-scope="text">
+        {{ text == 0 ? 'PASS' : 'ERROR' }}
+      </template>
+    </a-table>
+    <a-space slot="custom-footer" :size="20">
+      <a-button type="primary">Save Text</a-button>
+      <a-button type="primary">Save Excel</a-button>
+      <a-button type="primary" @click="visible = false">Cancel</a-button>
+    </a-space>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+
+const columns = [
+  {
+    title: 'QC Flags',
+    dataIndex: 'qcFlags',
+    align: 'center'
+  },
+  {
+    title: 'Evaluation Metrics',
+    dataIndex: 'evaluationMetrics',
+    align: 'center'
+  },
+  {
+    title: 'Value',
+    dataIndex: 'value',
+    align: 'center'
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'status'
+    },
+    customCell: record => {
+      console.log('%c [  ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', record)
+      return {
+        style: {
+          backgroundColor: record.status == 0 ? '#008000 !important' : '#f00 !important'
+        }
+      }
+    }
+  }
+]
+export default {
+  mixins: [ModalMixin],
+  data() {
+    this.columns = columns
+    return {
+      list: [
+        {
+          qcFlags: 'qcFlags',
+          evaluationMetrics: 'evaluationMetrics',
+          value: 'value',
+          status: 0
+        },
+        {
+          qcFlags: 'qcFlags',
+          evaluationMetrics: 'evaluationMetrics',
+          value: 'value',
+          status: 1
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="less" scoped></style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AdditionalInfo.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="additional-info">
+    <a-form-model :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
+      <a-form-model-item
+        label="(rel.) Xe transfer efficiency (Xe Volume in the measurement cell/Xe colume in the archive bottle) a description, how this is calculated shall be provided in the Comment section"
+      >
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item label="uncertainty of the Xe transfer efficiency [%]">
+        <a-input></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="Comments">
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item label="Detailed description of the measurement system">
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item label="Detailed description of the sample analysis process">
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item label="Uncertainty budget">
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item
+        label="Information on any changes to the system and/or the process (including recalibrations] since the time of the previous exercise "
+      >
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+      <a-form-model-item label="ysical Constants used (branching ratios, half lifes,..)">
+        <a-textarea :rows="4"></a-textarea>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.additional-info {
+  ::v-deep {
+    .ant-form-item {
+      margin-bottom: 5px;
+
+      &-label {
+        white-space: pre-wrap;
+        padding-right: 15px;
+        line-height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AnalysisResults.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="analysis-result">
+    <div class="form">
+      <a-row v-for="(column, index) in columns" :key="index">
+        <a-col class="label" :span="12"> {{ column.label }} </a-col>
+        <a-col :span="12">
+          <component :is="column.type" v-bind="column.attrs" v-model="model[column.dataIndex]" />
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    label: 'Pressure in the archive bottle [Pa] at STP corrected',
+    type: 'a-input',
+    dataIndex: 'pressureInTheArchiveBottle'
+  },
+  {
+    label: 'Volume of Archive bottle [m3]',
+    type: 'a-input',
+    dataIndex: 'volumeOfArchiveBottle'
+  },
+  {
+    label: 'Gas composition [%]',
+    type: 'a-input',
+    dataIndex: 'gasComposition'
+  },
+  {
+    label: 'Stable Xe meas. start date [YYYY/MM/DD]',
+    type: 'a-date-picker',
+    dataIndex: 'stableXeMeasStartDate',
+    attrs: {
+      format: 'YYYY/MM/DD'
+    }
+  },
+  {
+    label: 'Stable Xe meas. start time [HH:MM:SS.S]',
+    type: 'a-time-picker',
+    dataIndex: 'stableXeMeasStartTime',
+    attrs: {
+      format: 'HH:mm:ss',
+      valueFormat: 'HH:mm:ss'
+    }
+  },
+  {
+    label: 'Stable Xenon volume in the archive bottle [cm3] STP corrected',
+    type: 'a-input',
+    dataIndex: 'stableXenonVolumeInTheArchiveBottle'
+  },
+  {
+    label: 'Uncertainty of stable Xenon volume (%)',
+    type: 'a-input',
+    dataIndex: 'uncertaintyOfStableXenonVolume'
+  },
+  {
+    label: 'Stable Xenon volume in the measurement cell [cm3] STP corrected',
+    type: 'a-input',
+    dataIndex: 'stableXenonVolumeInTheMeasurementCell'
+  },
+  {
+    label: 'Uncertainty of stable Xenon volume [%]',
+    type: 'a-input',
+    dataIndex: 'uncertaintyOfStableXenonVolume2'
+  },
+  {
+    label: 'Radioactive Xe meas. start date [YYYY/MM/DD]',
+    type: 'a-input',
+    dataIndex: 'radioactiveXeMeasStartDate'
+  },
+  {
+    label: 'Radioactive Xe meas. start time [HH:MM:SS.S]',
+    type: 'a-input',
+    dataIndex: 'radioactiveXeMeasStartTime'
+  },
+  {
+    label: 'Acquisition live time [s]',
+    type: 'a-input',
+    dataIndex: 'acquisitionLiveTime'
+  }
+]
+
+export default {
+  data() {
+    this.columns = columns
+
+    return {
+      model: {
+        pressureInTheArchiveBottle: '',
+        volumeOfArchiveBottle: '',
+        gasComposition: '',
+        stableXeMeasStartDate: '2023/07/18',
+        stableXeMeasStartTime: '17:36:21',
+        stableXenonVolumeInTheArchiveBottle: '',
+        uncertaintyOfStableXenonVolume: '',
+        stableXenonVolumeInTheMeasurementCell: '',
+        uncertaintyOfStableXenonVolume2: '',
+        radioactiveXeMeasStartDate: '',
+        radioactiveXeMeasStartTime: '',
+        acquisitionLiveTime: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form {
+  border: 1px solid #0b8c82;
+
+  .ant-row {
+    &:not(:last-child) {
+      border-bottom: 1px solid #0b8c82;
+    }
+
+    .ant-col {
+      &:first-child {
+        padding: 0 4px;
+        height: 32px;
+        line-height: 32px;
+        border-right: 1px solid #0b8c82;
+      }
+    }
+
+    .label {
+      color: @primary-color;
+    }
+
+    .ant-input {
+      border: none;
+    }
+  }
+
+  ::v-deep {
+    .ant-time-picker-input,
+    .ant-calendar-picker-input {
+      border: none;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="general-infomation">
+    <div class="text">
+      <pre>{{ text }}</pre>
+    </div>
+    <div class="form">
+      <a-row v-for="(column, index) in columns" :key="index">
+        <a-col class="label" :span="10"> {{ column.label }} </a-col>
+        <a-col :span="14">
+          <component :is="column.type" v-bind="column.attrs" v-model="model[column.dataIndex]" />
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    label: 'Laboratory (CTBTO code)',
+    type: 'a-input',
+    dataIndex: 'laboratory'
+  },
+  {
+    label: 'Sample ID (SRID or other)',
+    type: 'a-input',
+    dataIndex: 'sampleId'
+  },
+  {
+    label: 'Collection start date or reference date [YYYY/MM/DD]',
+    type: 'a-input',
+    dataIndex: 'collectionStartDate'
+  },
+  {
+    label: 'Collection start time or reference time [HH:mm:ss.S]',
+    type: 'a-input',
+    dataIndex: 'collectionStartTime'
+  },
+  {
+    label: 'Collection stop date [YYYY/MM/DD]',
+    type: 'a-input',
+    dataIndex: 'collectionStopDate'
+  },
+  {
+    label: 'Collection stop time [HH:mm:ss.S]',
+    type: 'a-input',
+    dataIndex: 'collectionStopTime'
+  },
+  {
+    label: 'Receipt date [YYYY/MM/DD]',
+    type: 'a-date-picker',
+    dataIndex: 'receiptDate',
+    attrs: {
+      format: 'YYYY/MM/DD'
+    }
+  },
+  {
+    label: 'Receipt time [HH:mm:ss.S]',
+    type: 'a-time-picker',
+    dataIndex: 'receiptTime',
+    attrs: {
+      format: 'HH:mm:ss',
+      valueFormat: 'HH:mm:ss'
+    }
+  },
+  {
+    label: 'Report transmission date [YYYY/MM/DD]',
+    type: 'a-date-picker',
+    dataIndex: 'reportTransmissionDate',
+    attrs: {
+      format: 'YYYY/MM/DD'
+    }
+  },
+  {
+    label: 'Report transmission time [HH:mm:ss.S]',
+    type: 'a-time-picker',
+    dataIndex: 'reportTransmissionTime',
+    attrs: {
+      format: 'HH:mm:ss',
+      valueFormat: 'HH:mm:ss'
+    }
+  }
+]
+export default {
+  data() {
+    this.columns = columns
+
+    return {
+      text: ` - All dates
+ - If`,
+      model: {
+        laboratory: 'CNL06',
+        sampleId: '2311G',
+        collectionStartDate: '2015/12/23',
+        collectionStartTime: '23:55:43.0',
+        collectionStopDate: '2015/10/24',
+        collectionStopTime: '11:55:44:7',
+        receiptDate: '2023/7/10',
+        receiptTime: '00:45:33',
+        reportTransmissionDate: '2023/7/10',
+        reportTransmissionTime: '13:45:33'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.general-infomation {
+  .text {
+    height: 300px;
+    overflow: auto;
+    border: 1px solid #0b8c82;
+  }
+
+  .form {
+    margin-top: 10px;
+    border: 1px solid #0b8c82;
+
+    .ant-row {
+      &:not(:last-child) {
+        border-bottom: 1px solid #0b8c82;
+      }
+
+      .ant-col {
+        &:first-child {
+          padding: 0 4px;
+          height: 32px;
+          line-height: 32px;
+          border-right: 1px solid #0b8c82;
+        }
+      }
+
+      .label {
+        color: @primary-color;
+      }
+
+      .ant-input {
+        border: none;
+      }
+    }
+
+    ::v-deep {
+      .ant-time-picker-input,
+      .ant-calendar-picker-input {
+        border: none;
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Methods.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="methods">
+    <a-form-model layout="vertical">
+      <a-form-model-item label="Sampling handling">
+        <a-input></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="Equipment used">
+        <a-input></a-input>
+      </a-form-model-item>
+      <a-form-model-item label="Software used">
+        <a-input></a-input>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.methods {
+    .ant-form-item {
+        margin-bottom: 0;
+    }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Notes.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="notes">
+    <pre>
+        {{ content }}
+    </pre>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: `--------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+      --------------------------    SampleAnalyse Beginning at 2023-07-10 11:44:56    --------------------------
+       `,
+      isLoading: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.notes {
+  height: 100%;
+  pre {
+    height: 100%;
+    padding: 5px;
+    overflow: auto;
+    background-color: #285367;
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Nuclides.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <a-table :columns="columns" :dataSource="list" :pagination="false" :scroll="{ x: true }">
+      <template v-for="slotName in slots" :slot="slotName" slot-scope="text, record">
+        <a-input v-model="record[slotName]" :key="slotName"></a-input>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    title: '',
+    dataIndex: 'name',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: 'Activity [Bq]',
+    dataIndex: 'activity',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'activity'
+    }
+  },
+  {
+    title: 'Uncert.Activity [%]',
+    dataIndex: 'uncertActivity',
+    align: 'center',
+    width: 150,
+    scopedSlots: {
+      customRender: 'uncertActivity'
+    }
+  },
+  {
+    title: 'MDA [Bq]',
+    dataIndex: 'mda',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'mda'
+    }
+  },
+  {
+    title: 'Concentration [Bq/m3]',
+    dataIndex: 'concentration',
+    align: 'center',
+    width: 180,
+    scopedSlots: {
+      customRender: 'concentration'
+    }
+  },
+  {
+    title: 'Uncert.concentration [%]',
+    dataIndex: 'uncertConcentration',
+    align: 'center',
+    width: 200,
+    scopedSlots: {
+      customRender: 'uncertConcentration'
+    }
+  },
+  {
+    title: 'MDC [Bq/m3]',
+    dataIndex: 'mdc',
+    align: 'center',
+    width: 120,
+    scopedSlots: {
+      customRender: 'mdc'
+    }
+  },
+  {
+    title: 'Lc [Bq/m3]',
+    dataIndex: 'lc',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'lc'
+    }
+  }
+]
+export default {
+  data() {
+    this.columns = columns
+
+    return {
+      list: [
+        {
+          name: 'Xe-131m',
+          activity: 'activity',
+          uncertActivity: 'uncertActivity',
+          mda: 'mda',
+          concentration: 'concentration',
+          uncertConcentration: 'uncertConcentration',
+          mdc: 'mdc',
+          lc: 'lc'
+        },
+        {
+          name: 'Xe-132m',
+          activity: 'activity2',
+          uncertActivity: 'uncertActivity2',
+          mda: 'mda2',
+          concentration: 'concentration2',
+          uncertConcentration: 'uncertConcentration2',
+          mdc: 'mdc2',
+          lc: 'lc2'
+        }
+      ]
+    }
+  },
+  computed: {
+    slots() {
+      return columns.filter(item => item.scopedSlots).map(item => item.scopedSlots.customRender)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Ratios.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <a-table :columns="columns" :dataSource="list" :pagination="false">
+      <template v-for="slotName in slots" :slot="slotName" slot-scope="text, record">
+        <a-input v-model="record[slotName]" :key="slotName"></a-input>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    title: '',
+    dataIndex: 'name',
+    align: 'center',
+    width: 100,
+    customRender: (_, __, index) => {
+      return index + 1
+    }
+  },
+  {
+    title: 'Nuclide1',
+    dataIndex: 'nuclide1',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'nuclide1'
+    }
+  },
+  {
+    title: 'Nuclide2',
+    dataIndex: 'nuclide2',
+    align: 'center',
+    width: 150,
+    scopedSlots: {
+      customRender: 'nuclide2'
+    }
+  },
+  {
+    title: 'Isotope ratio',
+    dataIndex: 'isotopeRatio',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'isotopeRatio'
+    }
+  },
+  {
+    title: 'Uncert.Ratio [%]',
+    dataIndex: 'uncertRatio',
+    align: 'center',
+    width: 200,
+    scopedSlots: {
+      customRender: 'uncertRatio'
+    }
+  }
+]
+export default {
+  data() {
+    this.columns = columns
+
+    return {
+      list: [
+        {
+          nuclide1: 'nuclide1',
+          nuclide2: 'nuclide2',
+          isotopeRatio: 'isotopeRatio',
+          uncertRatio: 'uncertRatio'
+        },
+        {
+          nuclide1: 'nuclide1',
+          nuclide2: 'nuclide2',
+          isotopeRatio: 'isotopeRatio',
+          uncertRatio: 'uncertRatio'
+        }
+      ]
+    }
+  },
+  computed: {
+    slots() {
+      return columns.filter(item => item.scopedSlots).map(item => item.scopedSlots.customRender)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/TransportInfomation.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="transport-infomation">
+    <a-form-model layout="vertical">
+        <a-form-model-item label="Comments on transport">
+            <a-textarea :rows="12"></a-textarea>
+        </a-form-model-item>
+        <a-form-model-item label="Other comments, e.g. on sample container conditions">
+            <a-textarea :rows="12"></a-textarea>
+        </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+<style lang="less" scoped>
+.transport-infomation {
+    .ant-form-item {
+        margin-bottom: 0;
+    }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <custom-modal v-model="visible" :width="1280" title="NG Lab Report" :destroyOnClose="true" :okHandler="handleOk">
+    <div class="rlr">
+      <div class="rlr-tabs">
+        <div
+          class="rlr-tabs-item"
+          :class="activeKey == index ? 'active' : ''"
+          v-for="(tab, index) in tabs"
+          :key="index"
+          @click="activeKey = index"
+        >
+          {{ tab }}
+        </div>
+      </div>
+      <div class="rlr-content">
+        <h4>{{ tabs[activeKey] }}</h4>
+        <div class="rlr-content-detail">
+          <template v-if="activeKey == 0">
+            <general-infomation />
+          </template>
+          <template v-if="activeKey == 1">
+            <transport-infomation />
+          </template>
+          <template v-if="activeKey == 2">
+            <analysis-results />
+          </template>
+          <template v-if="activeKey == 3">
+            <nuclides />
+          </template>
+          <template v-if="activeKey == 4">
+            <ratios />
+          </template>
+          <template v-if="activeKey == 5">
+            <methods />
+          </template>
+          <template v-if="activeKey == 6">
+            <additional-info />
+          </template>
+          <template v-if="activeKey == 7">
+            <notes />
+          </template>
+        </div>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import GeneralInfomation from './components/GeneralInfomation.vue'
+import TransportInfomation from './components/TransportInfomation.vue'
+import AnalysisResults from './components/AnalysisResults.vue'
+import Nuclides from './components/Nuclides.vue'
+import Ratios from './components/Ratios.vue'
+import Methods from './components/Methods.vue'
+import AdditionalInfo from './components/AdditionalInfo.vue'
+import Notes from './components/Notes.vue'
+
+const tabs = [
+  'General Infomation',
+  'Transport Infomation',
+  'Analysis Results',
+  'Nuclides',
+  'Ratios',
+  'Methods',
+  'Additional Info',
+  'Notes'
+]
+
+export default {
+  mixins: [ModalMixin],
+  components: {
+    GeneralInfomation,
+    TransportInfomation,
+    AnalysisResults,
+    Nuclides,
+    Ratios,
+    Methods,
+    AdditionalInfo,
+    Notes
+  },
+  data() {
+    this.tabs = tabs
+    return {
+      activeKey: 0
+    }
+  },
+  methods: {
+    beforeModalOpen() {
+      this.activeKey = 7
+    },
+
+    handleOk() {
+      console.log('%c [  ]-62', 'font-size:13px; background:pink; color:#bf2c9f;')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.rlr {
+  display: flex;
+
+  &-tabs {
+    width: 170px;
+    background-color: #275466;
+    padding: 3px 0;
+
+    &-item {
+      cursor: pointer;
+      user-select: none;
+      padding: 0 5px;
+      height: 32px;
+      line-height: 32px;
+
+      &.active {
+        background-color: #296d81;
+      }
+    }
+  }
+
+  &-content {
+    margin-left: 20px;
+    flex: 1;
+    overflow: hidden;
+
+    h4 {
+      color: #fff;
+    }
+
+    &-detail {
+      height: 700px;
+      padding: 20px;
+      overflow: auto;
+      background-color: #082f3e;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue

@@ -0,0 +1,70 @@
+<template>
+  <custom-modal v-model="visible" :width="1000" title="View Sample Infomation">
+    <a-spin :spinning="isLoading">
+      <pre>{{ content }}</pre>
+    </a-spin>
+
+    <div slot="custom-footer">
+      <a-space :size="20">
+        <a-button type="primary">Save Text</a-button>
+        <a-button type="primary">Save Excel</a-button>
+        <a-button @click="visible = false">Cancel</a-button>
+      </a-space>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import ModalMixin from '@/mixins/ModalMixin'
+export default {
+  mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      content: '',
+      isLoading: true
+    }
+  },
+  methods: {
+    async getContent() {
+      try {
+        this.content = ''
+        this.isLoading = true
+        const res = await getAction('/spectrumAnalysis/viewSampleInformation', {
+          sampleId: this.sampleId
+        })
+        if(res.success) {
+          this.content = res.result
+        }
+        else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      if (this.sampleId) {
+        this.getContent()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+pre {
+  height: 450px;
+  padding: 5px;
+  overflow: auto;
+  background-color: #285367;
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <custom-modal v-model="visible" :width="1000" title="View Spectrum" :footer="null" destroyOnClose>
+    <a-spin :spinning="isLoading">
+      <a-tabs :animated="false">
+        <a-tab-pane tab="Sample Spectrum" :key="1">
+          <pre>{{ content.sample.join('\n') }}</pre>
+        </a-tab-pane>
+        <a-tab-pane tab="GasBg Spectrum" :key="2">
+          <pre>{{ content.gasBg.join('\n') }}</pre>
+        </a-tab-pane>
+        <a-tab-pane tab="DetBg Spectrum" :key="3">
+          <pre>{{ content.detBg.join('\n') }}</pre>
+        </a-tab-pane>
+        <a-tab-pane tab="QC Spectrum" :key="4">
+          <pre>{{ content.qc.join('\n') }}</pre>
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import { getAction } from '../../../../../api/manage'
+export default {
+  mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      content: {
+        detBg: [],
+        gasBg: [],
+        qc: [],
+        sample: []
+      },
+      isLoading: true
+    }
+  },
+  methods: {
+    async getContent() {
+      try {
+        this.isLoading = true
+        const res = await getAction('/spectrumAnalysis/viewSpectrum', {
+          sampleId: this.sampleId
+        })
+        if (res.success) {
+          this.content = res.result
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      if (this.sampleId) {
+        this.getContent()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+pre {
+  height: 450px;
+  padding: 5px;
+  overflow: auto;
+  background-color: #285367;
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue

@@ -0,0 +1,303 @@
+<template>
+  <custom-modal v-model="visible" title="Statistics Paramer History" :width="1480" :footer="null">
+    <div class="statistics-paramer-history">
+      <!-- 左侧配置 -->
+      <title-over-boarder title="Query Infomation Settings" class="settings">
+        <!-- Station And Detector -->
+        <title-over-boarder title="Station And Detector">
+          <a-form-model
+            :labelCol="{ style: { width: '70px', textAlign: 'left', flexShrink: 0 } }"
+            :wrapperCol="{ flex: 1 }"
+          >
+            <a-form-model-item label="Station">
+              <a-space :size="10" class="station">
+                <a-input size="small"></a-input>
+                <a-button type="primary" size="small">Query Detector</a-button>
+                <a-button type="primary" size="small">&lt;&lt;</a-button>
+              </a-space>
+            </a-form-model-item>
+            <a-form-model-item label="Detector">
+              <custom-select :options="[{ label: 'test', value: 1 }]" size="small"></custom-select>
+            </a-form-model-item>
+          </a-form-model>
+        </title-over-boarder>
+        <!-- Nuclide -->
+        <title-over-boarder title="Nuclide" class="nuclide">
+          <a-checkbox-group>
+            <a-checkbox>Xe131m</a-checkbox>
+            <a-checkbox>Xe133m</a-checkbox>
+            <a-checkbox>Xe133</a-checkbox>
+            <a-checkbox>Xe135</a-checkbox>
+          </a-checkbox-group>
+        </title-over-boarder>
+
+        <a-checkbox-group class="other-checkbox">
+          <a-checkbox>MDC</a-checkbox>
+          <a-checkbox>Activity Concentration</a-checkbox>
+        </a-checkbox-group>
+        <a-divider></a-divider>
+        <a-form-model class="time-setting">
+          <a-form-model-item label="Start Time">
+            <custom-date-picker></custom-date-picker>
+          </a-form-model-item>
+          <a-form-model-item label="Stop Time">
+            <custom-date-picker></custom-date-picker>
+          </a-form-model-item>
+        </a-form-model>
+        <a-radio-group class="rn-setting">
+          <a-radio>RNAUTO</a-radio>
+          <a-radio>RNMAN</a-radio>
+        </a-radio-group>
+        <a-divider></a-divider>
+        <div class="center-btns">
+          <a-button type="primary">Statistics Query & Plot</a-button>
+          <a-button type="primary">Snapshot</a-button>
+        </div>
+        <a-divider></a-divider>
+        <!-- Filter -->
+        <title-over-boarder title="Filter">
+          <a-checkbox>Xe Result Flag</a-checkbox>
+          <!-- 配置详情 -->
+          <div class="filter-options">
+            <div class="filter-option">
+              <div class="input">
+                <a-input></a-input>
+              </div>
+              <div class="text">
+                <span>&lt;</span>
+                <span>Collection Time</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="filter-option">
+              <div class="input">
+                <a-input></a-input>
+              </div>
+              <div class="text">
+                <span>&lt;</span>
+                <span>Acq live sec</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="filter-option">
+              <div class="input"></div>
+              <div class="text right">
+                <span>Quantity</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="filter-option">
+              <div class="input"></div>
+              <div class="text right">
+                <span>Xe volume</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="filter-option">
+              <div class="input"></div>
+              <div class="text right">
+                <span>MDC</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+            <div class="filter-option">
+              <div class="input"></div>
+              <div class="text right">
+                <span>Conc</span>
+                <span>&lt;</span>
+              </div>
+              <div class="input">
+                <a-input></a-input>
+              </div>
+            </div>
+          </div>
+        </title-over-boarder>
+      </title-over-boarder>
+      <!-- 右侧图表 -->
+      <div class="statistics-paramer-history-chart">
+        <custom-chart :option="option"></custom-chart>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBoarder from '../../TitleOverBoarder.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
+
+const initialOption = {
+  grid: {
+    right: 10,
+    left: 40,
+    top: 20,
+    bottom: 60
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12,
+      rotate: 45,
+      margin: 10
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    data: ['2023/07/09', '2023/07/09', '2023/07/09', '2023/07/09', '2023/07/10']
+  },
+  yAxis: {
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  series: {
+    type: 'line',
+    data: [15, 16, 18, 20, 22]
+  }
+}
+export default {
+  components: { TitleOverBoarder, CustomChart },
+  mixins: [ModalMixin],
+  data() {
+    return {
+      option: initialOption
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.statistics-paramer-history {
+  display: flex;
+
+  .settings {
+    width: 405px;
+
+    .station {
+      display: flex;
+    }
+
+    .nuclide {
+      margin-top: 10px;
+    }
+
+    .other-checkbox {
+      margin-top: 10px;
+      margin-left: 14px;
+
+      label:nth-child(2) {
+        margin-left: 28px;
+      }
+    }
+
+    .time-setting {
+      padding-left: 40px;
+    }
+
+    .rn-setting {
+      margin-top: 10px;
+      margin-left: 50px;
+
+      label:nth-child(2) {
+        margin-left: 80px;
+      }
+    }
+
+    .center-btns {
+      > button {
+        display: block;
+        width: 100%;
+
+        &:nth-child(2) {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .filter-options {
+      .filter-option {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+
+        .input {
+          width: 100px;
+        }
+
+        .text {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          margin: 0 10px;
+
+          &.right {
+            justify-content: flex-end;
+            gap: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  &-chart {
+    flex: 1;
+    margin-left: 15px;
+  }
+}
+
+.ant-divider {
+  margin: 15px 0;
+}
+
+.ant-form-item {
+  margin-bottom: 0;
+}
+::v-deep .title-over-border-content {
+  padding: 15px;
+}
+</style>

src/views/spectrumAnalysis/components/Modals/QcResultsModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" :width="750" title="Qc Results">
+  <custom-modal v-model="visible" :width="750" title="QC Results">
     <a-table :columns="columns" :dataSource="list" :pagination="false" />
     <a-button slot="custom-footer" type="primary">Export to Excel</a-button>
   </custom-modal>

src/views/spectrumAnalysis/components/Modals/SpectrumModal.vue

@@ -4,12 +4,6 @@
         {{ content }}
       </pre
     >
-    <div slot="custom-footer" style="text-align: center;">
-      <a-space :size="20">
-        <a-button type="primary">Export</a-button>
-        <a-button @click="visible = false">Cancel</a-button>
-      </a-space>
-    </div>
   </custom-modal>
 </template>
 

src/views/spectrumAnalysis/components/ResultDisplay.vue

@@ -101,7 +101,7 @@ export default {
   props: {
     data: {
       type: Array,
-      default: []
+      default: () => []
     }
   },
   data() {

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

@@ -19,11 +19,11 @@ const list = [
   },
   {
     title: 'GasBg Data',
-    value: 'gasbg'
+    value: 'gasBg'
   },
   {
     title: 'DetBg Data',
-    value: 'detbg'
+    value: 'detBg'
   },
   {
     title: 'QC Data',

src/views/spectrumAnalysis/index.vue

@@ -2,35 +2,35 @@
   <div class="spectrum-analysis">
     <!-- 顶部操作栏 -->
     <div class="spectrum-analysis-operators">
-      <a-dropdown
+      <template v-for="operation in operations">
-        class="spectrum-analysis-operators-item"
+        <a-dropdown
-        overlayClassName="spectrum-analysis-operators-dropdown-overlay"
+          v-if="operation.show !== false"
-        :overlay-style="operation.style"
+          class="spectrum-analysis-operators-item"
-        v-for="operation in operations"
+          overlayClassName="spectrum-analysis-operators-dropdown-overlay"
-        :key="operation.title"
+          :overlay-style="operation.style"
-      >
+          :key="operation.title"
-        <a-button type="primary">{{ operation.title }}</a-button>
+        >
-        <div slot="overlay">
+          <a-button type="primary">{{ operation.title }}</a-button>
-          <template v-for="(child, index) in operation.children">
+          <div slot="overlay">
-            <component :is="child.type" :key="index" v-bind="child.attrs" v-on="child.on">
+            <template v-for="(child, index) in operation.children">
-              <component :is="item.type" v-for="item in child.children" :key="item.title" @click="item.handler">
+              <component :is="child.type" :key="index" v-bind="child.attrs" v-on="child.on">
-                {{ item.title }}
+                <template v-for="item in child.children">
+                  <component v-if="item.show !== false" :is="item.type" :key="item.title" @click="item.handler">
+                    {{ item.title }}
+                  </component>
+                </template>
               </component>
-            </component>
+            </template>
-          </template>
+          </div>
-        </div>
+        </a-dropdown>
-      </a-dropdown>
+      </template>
     </div>
     <!-- 顶部操作栏结束 -->
 
     <!-- 频谱分析部分 -->
     <div class="spectrum-analysis-main">
-      <gamma-analysis v-if="analysisType == ANALYZE_TYPE.GAMMA" ref="gammaAnalysisRef" />
+      <gamma-analysis v-if="isGamma" ref="gammaAnalysisRef" />
-      <beta-gamma-analysis
+      <beta-gamma-analysis v-if="isBetaGamma" ref="betaGammaAnalysisRef" :sample="sampleData" />
-        v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA"
-        ref="betaGammaAnalysisRef"
-        :sample="sampleData"
-      />
       <resize-observer @notify="handleResize" />
     </div>
     <!-- 频谱分析部分结束 -->
@@ -88,7 +88,7 @@
     <!-- Resolution Calibration 弹窗结束 -->
 
     <!-- SpectrumComments 弹窗开始 -->
-    <spectrum-comments-modal v-model="spectrumCommentsModalVisible" :isAdd="isSpectrumCommentsAdd" />
+    <spectrum-comments-modal v-model="gammaCommentsModalVisible" :isAdd="isGammaCommentsAdd" />
     <!-- SpectrumComments 弹窗结束 -->
 
     <!-- Color Config 弹窗开始 -->
@@ -108,11 +108,11 @@
     <!-- Config User Library 弹窗结束 -->
 
     <!-- Arr 弹窗开始 -->
-    <arr-rrr-modal v-model="arrOrRRRModalVisible" :type="arrOrRRRModalType"/>
+    <arr-rrr-modal v-model="arrOrRRRModalVisible" :type="arrOrRRRModalType" :sampleId="this.sampleData.sampleId" />
     <!-- Arr 弹窗结束 -->
 
     <!-- Spectrum 弹窗开始 -->
-    <spectrum-modal v-model="spectrumModalVisible" :type="arrOrRRRModalType"/>
+    <spectrum-modal v-model="spectrumModalVisible" :type="arrOrRRRModalType" :sampleId="this.sampleData.sampleId" />
     <!-- Spectrum 弹窗结束 -->
 
     <!-- SampleInfo 弹窗开始 -->
@@ -126,6 +126,30 @@
     <!-- RLR 弹窗开始 -->
     <rlr-modal v-model="rlrModalVisible" />
     <!-- RLR 弹窗结束 -->
+
+    <!-- Beta-Gamma 的Comments 弹窗 -->
+    <beta-gamma-comments-modal v-model="betaGammaCommentsModalVisible" :isAdd="isBetaGammaCommentsAdd" :sampleId="this.sampleData.sampleId"/>
+    <!-- Beta-Gamma 的Comments 结束 -->
+
+    <!-- Beta-Gamma 的 Spectrum 弹窗 -->
+    <beta-gamma-spectrum-modal v-model="betaGammaSpectrumModalVisible" :sampleId="this.sampleData.sampleId" />
+    <!-- Beta-Gamma 的 Spectrum 弹窗 结束 -->
+
+    <!-- Beta-Gamma 的 Sample Infomation 弹窗 -->
+    <beta-gamma-sample-infomation-modal v-model="betaGammaSampleInfomationModalVisible" :sampleId="this.sampleData.sampleId" />
+    <!-- Beta-Gamma 的 Sample Infomation 弹窗 结束 -->
+
+    <!-- Beta-Gamma 的 QC Result 弹窗 -->
+    <beta-gamma-qc-results-modal v-model="betaGammaQCResultsModalVisible" />
+    <!-- Beta-Gamma 的 QC Result 弹窗 结束 -->
+
+    <!-- Beta-Gamma 的 RLR 弹窗 -->
+    <beta-gamma-rlr-modal v-model="betaGammaRlrModalVisible" />
+    <!-- Beta-Gamma 的 RLR 弹窗 结束 -->
+
+    <!-- Beta-Gamma 的 Statistics Paramer History 弹窗 -->
+    <statistics-paramer-history-modal v-model="statisticsParamerHistoryModalVisible" />
+    <!-- Beta-Gamma 的 Statistics Paramer History 弹窗 结束 -->
   </div>
 </template>
 <script>
@@ -156,6 +180,12 @@ import SpectrumModal from './components/Modals/SpectrumModal.vue'
 import SampleInfomationModal from './components/Modals/SampleInfomationModal.vue'
 import QcResultsModal from './components/Modals/QcResultsModal.vue'
 import RlrModal from './components/Modals/RLRModal/index.vue'
+import BetaGammaCommentsModal from './components/Modals/BetaGammaModals/BetaGammaCommentsModal.vue'
+import BetaGammaSpectrumModal from './components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue'
+import BetaGammaSampleInfomationModal from './components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue'
+import BetaGammaQcResultsModal from './components/Modals/BetaGammaModals/BetaGammaQCResultsModal.vue'
+import BetaGammaRlrModal from './components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue'
+import StatisticsParamerHistoryModal from './components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -190,7 +220,13 @@ export default {
     SpectrumModal,
     SampleInfomationModal,
     QcResultsModal,
-    RlrModal
+    RlrModal,
+    BetaGammaCommentsModal,
+    BetaGammaSpectrumModal,
+    BetaGammaSampleInfomationModal,
+    BetaGammaQcResultsModal,
+    BetaGammaRlrModal,
+    StatisticsParamerHistoryModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -217,8 +253,8 @@ export default {
       energyCalibrationModalShow: false, // Calibration -> Energy 弹窗
       resolutionCalibrationModalShow: false, // Calibration -> Resolution 弹窗
 
-      spectrumCommentsModalVisible: false, // Comments -> Spectrum Comments 弹窗
+      gammaCommentsModalVisible: false, // Comments -> Spectrum Comments 弹窗
-      isSpectrumCommentsAdd: true, // Spectrum Comments 是否是新增
+      isGammaCommentsAdd: true, // Spectrum Comments 是否是新增
 
       colorConfigModalVisible: false, // Help -> Color Config 弹窗
 
@@ -230,11 +266,23 @@ export default {
       peakInfomationModalVisible: false, // Reports -> PeakInfo 弹窗
       arrOrRRRModalVisible: false, // Reports -> ARR 或RRR 弹窗
       arrOrRRRModalType: 1, // Reports -> ARR 或RRR 弹窗类型
-      nuclideActivityAndMDCModalVisible: false,  // Reports -> Radionuclide Activity 弹窗
+      nuclideActivityAndMDCModalVisible: false, // Reports -> Radionuclide Activity 弹窗
       spectrumModalVisible: false, // Reports -> Spectrum 弹窗
       sampleInfomationModalVisible: false, // Reports -> Sample Infomation 弹窗
       qcResultsModalVisible: false, // Reports -> Qc Results 弹窗
       rlrModalVisible: false, // Reports -> RLR 弹窗
+
+      /**
+       *  以下是beta-gamma跟前面不同的弹窗
+       **/
+      betaGammaCommentsModalVisible: false, // beta-gamma Comments
+      isBetaGammaCommentsAdd: false, // beta-gamma comments 是否新增
+
+      betaGammaSpectrumModalVisible: false, // beta-gamma spectrum 弹窗
+      betaGammaSampleInfomationModalVisible: false, // beta-gamma sample infomation 弹窗
+      betaGammaQCResultsModalVisible: false, // beta-gamma QC Result 弹窗
+      betaGammaRlrModalVisible: false, // beta-gamma RLR 弹窗
+      statisticsParamerHistoryModalVisible: false // beta-gamma Statistics Paramer History 弹窗
     }
   },
   created() {
@@ -242,7 +290,7 @@ export default {
     this.loadSelectedSample({
       dbName: 'auto',
       sampleType: 'B',
-      sampleId: '1523651'
+      sampleId: '423228'
     })
   },
   methods: {
@@ -254,12 +302,12 @@ export default {
     // 加载选中的样本
     async loadSelectedSample(sample) {
       // B是beta-gamma  P G是gamma
-      this.sampleData = sample
       if (sample.sampleType == 'B') {
         this.analysisType = ANALYZE_TYPE.BETA_GAMMA
       } else {
-        // gamma
+        this.analysisType = ANALYZE_TYPE.GAMMA
       }
+      this.sampleData = sample
     },
 
     // 清理全部
@@ -293,16 +341,32 @@ export default {
       console.log('%c [ handleReprocessAll ]-216', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
-    // 可浏览原始谱中台站操作员对样品采集和测量过程的注释信息；可以浏览分析人员对分析过程的注释信息
+    // 查看Comments
     handleViewComments() {
-      this.spectrumCommentsModalVisible = true
+      // 如果是gamma
-      this.isSpectrumCommentsAdd = false
+      if (this.isGamma) {
+        this.gammaCommentsModalVisible = true
+        this.isGammaCommentsAdd = false
+      }
+      // 如果是beta-gamma
+      else {
+        this.betaGammaCommentsModalVisible = true
+        this.isBetaGammaCommentsAdd = false
+      }
     },
 
-    // 可添加能谱分析注释
+    // 添加Comments
     handleAddComments() {
-      this.spectrumCommentsModalVisible = true
+      // 如果是gamma
-      this.isSpectrumCommentsAdd = true
+      if (this.isGamma) {
+        this.gammaCommentsModalVisible = true
+        this.isGammaCommentsAdd = true
+      }
+      // 如果是beta-gamma
+      else {
+        this.betaGammaCommentsModalVisible = true
+        this.isBetaGammaCommentsAdd = true
+      }
     },
 
     // 查看自动处理日志
@@ -492,6 +556,7 @@ export default {
         },
         {
           title: 'NUCLIDELIBRARY',
+          show: !this.isBetaGamma,
           children: [
             {
               type: 'a-menu',
@@ -510,6 +575,22 @@ export default {
             }
           ]
         },
+        {
+          title: 'STATISTIC',
+          show: this.isBetaGamma,
+          children: [
+            {
+              type: 'a-menu',
+              children: [
+                {
+                  type: 'a-menu-item',
+                  title: 'MDC & Activity Concentration',
+                  handler: () => (this.statisticsParamerHistoryModalVisible = true)
+                }
+              ]
+            }
+          ]
+        },
         {
           title: 'COMMENTS',
           children: [
@@ -539,7 +620,8 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Peak Infomation',
-                  handler: () => this.peakInfomationModalVisible = true
+                  handler: () => (this.peakInfomationModalVisible = true),
+                  show: this.isGamma
                 },
                 {
                   type: 'a-menu-item',
@@ -547,7 +629,8 @@ export default {
                   handler: () => {
                     this.arrOrRRRModalVisible = true
                     this.arrOrRRRModalType = 1
-                  }
+                  },
+                  show: this.isGamma
                 },
                 {
                   type: 'a-menu-item',
@@ -555,32 +638,84 @@ export default {
                   handler: () => {
                     this.arrOrRRRModalVisible = true
                     this.arrOrRRRModalType = 2
-                  }
+                  },
+                  show: this.isGamma
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Radionuclide Activity',
-                  handler: () => this.nuclideActivityAndMDCModalVisible = true
+                  handler: () => (this.nuclideActivityAndMDCModalVisible = true),
+                  show: this.isGamma
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Spectrum',
-                  handler: () => this.spectrumModalVisible = true
+                  handler: () => (this.spectrumModalVisible = true),
+                  show: this.isGamma
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Sample Infomation',
-                  handler: () => this.sampleInfomationModalVisible = true
+                  handler: () => (this.sampleInfomationModalVisible = true),
+                  show: this.isGamma
+                },
+
+                {
+                  type: 'a-menu-item',
+                  title: 'QC Results',
+                  handler: () => (this.qcResultsModalVisible = true),
+                  show: this.isGamma
+                },
+
+                {
+                  type: 'a-menu-item',
+                  title: 'RLR',
+                  handler: () => (this.rlrModalVisible = true),
+                  show: this.isGamma
+                },
+
+                // 以下是beta-gamma的下拉
+                {
+                  type: 'a-menu-item',
+                  title: 'View ARR',
+                  handler: () => {
+                    this.arrOrRRRModalVisible = true
+                    this.arrOrRRRModalType = 3
+                  },
+                  show: this.isBetaGamma
                 },
                 {
                   type: 'a-menu-item',
-                  title: 'Qc Results',
+                  title: 'View RRR',
-                  handler: () => this.qcResultsModalVisible = true
+                  handler: () => {
+                    this.arrOrRRRModalVisible = true
+                    this.arrOrRRRModalType = 4
+                  },
+                  show: this.isBetaGamma
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'View spectrum',
+                  handler: () => (this.betaGammaSpectrumModalVisible = true),
+                  show: this.isBetaGamma
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'View Sample Infomation',
+                  handler: () => (this.betaGammaSampleInfomationModalVisible = true),
+                  show: this.isBetaGamma
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'QC results',
+                  handler: () => (this.betaGammaQCResultsModalVisible = true),
+                  show: this.isBetaGamma
                 },
                 {
                   type: 'a-menu-item',
                   title: 'RLR',
-                  handler: () => this.rlrModalVisible = true
+                  handler: () => (this.betaGammaRlrModalVisible = true),
+                  show: this.isBetaGamma
                 }
               ]
             }
@@ -627,6 +762,16 @@ export default {
           ]
         }
       ]
+    },
+
+    // 当前类型是否是Gamma
+    isGamma() {
+      return this.analysisType == ANALYZE_TYPE.GAMMA
+    },
+
+    // 当前类型是否是Beta-Gamma
+    isBetaGamma() {
+      return this.analysisType == ANALYZE_TYPE.BETA_GAMMA
     }
   }
 }