diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AnalysisResults.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AnalysisResults.vue
index b265032..1f42cf6 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AnalysisResults.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/AnalysisResults.vue
@@ -4,7 +4,7 @@
       <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]" />
+          <component :is="column.type" v-bind="column.attrs" v-model="detail[column.dataIndex]" :disabled="column.disabled" />
         </a-col>
       </a-row>
     </div>
@@ -68,40 +68,33 @@ const columns = [
   {
     label: 'Radioactive Xe meas. start date [YYYY/MM/DD]',
     type: 'a-input',
-    dataIndex: 'radioactiveXeMeasStartDate'
+    dataIndex: 'acq_start_date',
+    disabled: true
   },
   {
     label: 'Radioactive Xe meas. start time [HH:MM:SS.S]',
     type: 'a-input',
-    dataIndex: 'radioactiveXeMeasStartTime'
+    dataIndex: 'acq_start_time',
+    disabled: true
   },
   {
     label: 'Acquisition live time [s]',
     type: 'a-input',
-    dataIndex: 'acquisitionLiveTime'
+    dataIndex: 'acq_live_time',
+    disabled: true
   }
 ]
 
 export default {
+  props: {
+    detail: {
+      type: Object
+    }
+  },
   data() {
     this.columns = columns
 
-    return {
-      model: {
-        pressureInTheArchiveBottle: '',
-        volumeOfArchiveBottle: '',
-        gasComposition: '',
-        stableXeMeasStartDate: '2023/07/18',
-        stableXeMeasStartTime: '17:36:21',
-        stableXenonVolumeInTheArchiveBottle: '',
-        uncertaintyOfStableXenonVolume: '',
-        stableXenonVolumeInTheMeasurementCell: '',
-        uncertaintyOfStableXenonVolume2: '',
-        radioactiveXeMeasStartDate: '',
-        radioactiveXeMeasStartTime: '',
-        acquisitionLiveTime: ''
-      }
-    }
+    return { }
   }
 }
 </script>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue
index ef48769..f966a3f 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="general-infomation">
-    <div class="text">
-      <pre>{{ text }}</pre>
-    </div>
+    <a-textarea :rows="14" v-model="detail.text"></a-textarea>
     <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]" />
+          <component
+            :is="column.type"
+            v-bind="column.attrs"
+            v-model="detail[column.dataIndex]"
+            :disabled="column.disabled"
+          />
         </a-col>
       </a-row>
     </div>
@@ -24,27 +27,32 @@ const columns = [
   {
     label: 'Sample ID (SRID or other)',
     type: 'a-input',
-    dataIndex: 'sampleId'
+    dataIndex: 'srid',
+    disabled: true
   },
   {
     label: 'Collection start date or reference date [YYYY/MM/DD]',
     type: 'a-input',
-    dataIndex: 'collectionStartDate'
+    dataIndex: 'colloct_start_date',
+    disabled: true
   },
   {
     label: 'Collection start time or reference time [HH:mm:ss.S]',
     type: 'a-input',
-    dataIndex: 'collectionStartTime'
+    dataIndex: 'colloct_start_time',
+    disabled: true
   },
   {
     label: 'Collection stop date [YYYY/MM/DD]',
     type: 'a-input',
-    dataIndex: 'collectionStopDate'
+    dataIndex: 'colloct_stop_date',
+    disabled: true
   },
   {
     label: 'Collection stop time [HH:mm:ss.S]',
     type: 'a-input',
-    dataIndex: 'collectionStopTime'
+    dataIndex: 'colloct_stop_time',
+    disabled: true
   },
   {
     label: 'Receipt date [YYYY/MM/DD]',
@@ -82,37 +90,21 @@ const columns = [
   }
 ]
 export default {
+  props: {
+    detail: {
+      type: Object
+    }
+  },
   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'
-      }
-    }
+    return {}
   }
 }
 </script>
 
 <style lang="less" scoped>
 .general-infomation {
-  .text {
-    height: 300px;
-    overflow: auto;
-    border: 1px solid #0b8c82;
-  }
-
   .form {
     margin-top: 10px;
     border: 1px solid #0b8c82;
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Nuclides.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Nuclides.vue
index 2d86291..01e19b6 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Nuclides.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/Nuclides.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-table :columns="columns" :dataSource="list" :pagination="false" :scroll="{ x: true }">
+    <a-table size="small" :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>
@@ -14,14 +14,14 @@ const columns = [
     title: '',
     dataIndex: 'name',
     align: 'center',
-    width: 100,
+    width: 80,
     fixed: 'left'
   },
   {
     title: 'Activity [Bq]',
     dataIndex: 'activity',
     align: 'center',
-    width: 100,
+    width: 90,
     scopedSlots: {
       customRender: 'activity'
     }
@@ -30,7 +30,7 @@ const columns = [
     title: 'Uncert.Activity [%]',
     dataIndex: 'uncertActivity',
     align: 'center',
-    width: 150,
+    width: 140,
     scopedSlots: {
       customRender: 'uncertActivity'
     }
@@ -48,7 +48,7 @@ const columns = [
     title: 'Concentration [Bq/m3]',
     dataIndex: 'concentration',
     align: 'center',
-    width: 180,
+    width: 170,
     scopedSlots: {
       customRender: 'concentration'
     }
@@ -57,7 +57,7 @@ const columns = [
     title: 'Uncert.concentration [%]',
     dataIndex: 'uncertConcentration',
     align: 'center',
-    width: 200,
+    width: 190,
     scopedSlots: {
       customRender: 'uncertConcentration'
     }
@@ -81,41 +81,63 @@ const columns = [
     }
   }
 ]
+
+const nameMapper = [
+  { name: 'Xe-131m', mapTo: 'xe131m' },
+  { name: 'Xe-133m', mapTo: 'xe133m' },
+  { name: 'Xe-133', mapTo: 'xe133' },
+  { name: 'Xe-135', mapTo: 'xe135' }
+]
+
+const columnNameMapper = [
+  {
+    name: 'concentration',
+    mapTo: 'conc'
+  },
+  {
+    name: 'uncertConcentration',
+    mapTo: 'uncert_conc'
+  },
+  {
+    name: 'mdc',
+    mapTo: 'MDC'
+  },
+  {
+    name: 'lc',
+    mapTo: 'LC'
+  }
+]
 export default {
+  props: {
+    detail: {
+      type: Object
+    }
+  },
   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'
-        }
-      ]
-    }
+    return {}
   },
   computed: {
     slots() {
       return columns.filter(item => item.scopedSlots).map(item => item.scopedSlots.customRender)
+    },
+    list() {
+      return nameMapper.map(item => {
+        const obj = { name: item.name }
+        columnNameMapper.forEach(it => {
+          const key = `${item.mapTo}_${it.mapTo}`
+          obj[it.name] = this.detail[key]
+        })
+        return obj
+      })
     }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.ant-input {
+  height: 26px;
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue
index e4c89f1..6e953f6 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/index.vue
@@ -14,32 +14,34 @@
       </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>
+        <a-spin :spinning="isLoading">
+          <div class="rlr-content-detail">
+            <template v-if="activeKey == 0">
+              <general-infomation :detail="detail" />
+            </template>
+            <template v-if="activeKey == 1">
+              <transport-infomation :detail="detail" />
+            </template>
+            <template v-if="activeKey == 2">
+              <analysis-results :detail="detail" />
+            </template>
+            <template v-if="activeKey == 3">
+              <nuclides :detail="detail" />
+            </template>
+            <template v-if="activeKey == 4">
+              <ratios :detail="detail" />
+            </template>
+            <template v-if="activeKey == 5">
+              <methods :detail="detail" />
+            </template>
+            <template v-if="activeKey == 6">
+              <additional-info :detail="detail" />
+            </template>
+            <template v-if="activeKey == 7">
+              <notes :detail="detail" />
+            </template>
+          </div>
+        </a-spin>
       </div>
     </div>
   </custom-modal>
@@ -55,6 +57,7 @@ import Ratios from './components/Ratios.vue'
 import Methods from './components/Methods.vue'
 import AdditionalInfo from './components/AdditionalInfo.vue'
 import Notes from './components/Notes.vue'
+import { getAction } from '@/api/manage'
 
 const tabs = [
   'General Infomation',
@@ -79,15 +82,38 @@ export default {
     AdditionalInfo,
     Notes
   },
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
   data() {
     this.tabs = tabs
     return {
-      activeKey: 0
+      activeKey: 0,
+      detail: {},
+      isLoading: false
     }
   },
   methods: {
     beforeModalOpen() {
-      this.activeKey = 7
+      this.activeKey = 0
+      this.getInfo()
+    },
+
+    async getInfo() {
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/spectrumAnalysis/viewRLR', { sampleId: this.sampleId })
+        if (success) {
+          this.detail = result
+          this.isLoading = false
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
     },
 
     handleOk() {