fix: 去掉测试时的默认加载，改为按选择加载，对接Detailed Infomation，优化部分逻辑

src/views/spectrumAnalysis/beta-gamma-analysis.vue

@@ -1,133 +1,136 @@
 <template>
   <div class="beta-gamma-analysis">
-    <!-- 二级交互栏 -->
-    <div class="spectrum-analysis-sub-operators">
-      <pop-over-with-icon placement="bottomLeft">
-        Detailed-Information
-        <detailed-infomation slot="content" />
-      </pop-over-with-icon>
-      <pop-over-with-icon placement="bottomLeft">
-        QC Flags
-        <beta-gamma-qc-flags slot="content" :data="qcFlags" />
-      </pop-over-with-icon>
-      <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
-        Spectra
-        <spectra
-          slot="content"
-          v-model="spectraType"
-          @input="
-            spectraVisible = false
-            changeChartByType($event)
-          "
-        />
-      </pop-over-with-icon>
-    </div>
-    <!-- 二级交互栏结束 -->
-    <!-- 主体部分 -->
-    <div class="beta-gamma-analysis-main">
-      <!-- 左侧图表 -->
-      <div class="beta-gamma-spectrum-sample">
-        <beta-gamma-chart-container>
-          <template slot="title">
-            Beta-Gamma Spectrum: Sample
-          </template>
-          <beta-gamma-spectrum-chart
-            ref="betaGammaChartRef"
-            :histogramDataList="histogramDataList"
-            :histogramDataDList="histogramDataDList"
-            :boundary="boundaryList"
-            @positionChange="handlePositionChange"
-            @rangeChange="handleRangeChange"
+    <a-spin :spinning="isLoading">
+      <!-- 二级交互栏 -->
+      <div class="spectrum-analysis-sub-operators">
+        <pop-over-with-icon placement="bottomLeft">
+          Detailed-Information
+          <beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
+        </pop-over-with-icon>
+        <pop-over-with-icon placement="bottomLeft">
+          QC Flags
+          <beta-gamma-qc-flags slot="content" :data="qcFlags" />
+        </pop-over-with-icon>
+        <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
+          Spectra
+          <spectra
+            slot="content"
+            v-model="spectraType"
+            @input="
+              spectraVisible = false
+              changeChartByType($event)
+            "
           />
-        </beta-gamma-chart-container>
+        </pop-over-with-icon>
       </div>
-      <!-- 左侧图表结束 -->
 
-      <!-- 右侧 -->
-      <div class="beta-and-gamma-spectrum">
-        <!-- 四个图表开始 -->
-        <div class="spectrum-charts">
-          <div class="gamma-spectrum">
-            <div class="gamma-spectrum-item">
-              <beta-gamma-chart-container>
-                <template slot="title">
-                  Gamma Spectrum: Original
-                </template>
-                <spectrum-line-chart
-                  ref="lineChart1Ref"
-                  :data="gammaOriginalData"
-                  :energy="gammaEnergyData"
-                  @rangeChange="handleLineChartRangeChange($event, 'y')"
-                />
-              </beta-gamma-chart-container>
-            </div>
-            <div class="gamma-spectrum-item">
-              <beta-gamma-chart-container>
-                <template slot="title">
-                  Gamma Spectrum: Projected
-                </template>
-                <spectrum-line-chart
-                  ref="lineChart2Ref"
-                  :data="gammaProjectedData"
-                  :energy="gammaEnergyData"
-                  @rangeChange="handleLineChartRangeChange($event, 'y')"
-                />
-              </beta-gamma-chart-container>
-            </div>
-          </div>
-          <div class="gamma-spectrum">
-            <div class="gamma-spectrum-item">
-              <beta-gamma-chart-container>
-                <template slot="title">
-                  Beta Spectrum: Original
-                </template>
-                <spectrum-line-chart
-                  ref="lineChart3Ref"
-                  :data="betaOriginalData"
-                  :energy="betaEnergyData"
-                  title="Beta"
-                  color="#00ff1e"
-                  @rangeChange="handleLineChartRangeChange($event, 'x')"
-                />
-              </beta-gamma-chart-container>
-            </div>
-            <div class="gamma-spectrum-item">
-              <beta-gamma-chart-container>
-                <template slot="title">
-                  Beta Spectrum: Projected
-                </template>
-                <spectrum-line-chart
-                  ref="lineChart4Ref"
-                  :data="betaProjectedData"
-                  :energy="betaEnergyData"
-                  title="Beta"
-                  color="#00ff1e"
-                  @rangeChange="handleLineChartRangeChange($event, 'x')"
-                />
-              </beta-gamma-chart-container>
-            </div>
-          </div>
-        </div>
-        <!-- 四个图表结束 -->
-
-        <!-- 结果显示开始 -->
-        <div class="result-display">
+      <!-- 二级交互栏结束 -->
+      <!-- 主体部分 -->
+      <div class="beta-gamma-analysis-main">
+        <!-- 左侧图表 -->
+        <div class="beta-gamma-spectrum-sample">
           <beta-gamma-chart-container>
             <template slot="title">
-              Result display
+              Beta-Gamma Spectrum: Sample
             </template>
-            <result-display :data="resultDisplay"></result-display>
+            <beta-gamma-spectrum-chart
+              ref="betaGammaChartRef"
+              :histogramDataList="histogramDataList"
+              :histogramDataDList="histogramDataDList"
+              :boundary="boundaryList"
+              @positionChange="handlePositionChange"
+              @rangeChange="handleRangeChange"
+            />
           </beta-gamma-chart-container>
         </div>
-        <!-- 结果显示结束 -->
-      </div>
-      <!-- 右侧结束 -->
+        <!-- 左侧图表结束 -->
 
-      <!-- Comparison Modal 开始 -->
-      <comparison-modal v-model="comparisonModalVisible" />
-      <!-- Comparison Modal 结束 -->
-    </div>
-    <!-- 主体部分结束 -->
+        <!-- 右侧 -->
+        <div class="beta-and-gamma-spectrum">
+          <!-- 四个图表开始 -->
+          <div class="spectrum-charts">
+            <div class="gamma-spectrum">
+              <div class="gamma-spectrum-item">
+                <beta-gamma-chart-container>
+                  <template slot="title">
+                    Gamma Spectrum: Original
+                  </template>
+                  <spectrum-line-chart
+                    ref="lineChart1Ref"
+                    :data="gammaOriginalData"
+                    :energy="gammaEnergyData"
+                    @rangeChange="handleLineChartRangeChange($event, 'y')"
+                  />
+                </beta-gamma-chart-container>
+              </div>
+              <div class="gamma-spectrum-item">
+                <beta-gamma-chart-container>
+                  <template slot="title">
+                    Gamma Spectrum: Projected
+                  </template>
+                  <spectrum-line-chart
+                    ref="lineChart2Ref"
+                    :data="gammaProjectedData"
+                    :energy="gammaEnergyData"
+                    @rangeChange="handleLineChartRangeChange($event, 'y')"
+                  />
+                </beta-gamma-chart-container>
+              </div>
+            </div>
+            <div class="gamma-spectrum">
+              <div class="gamma-spectrum-item">
+                <beta-gamma-chart-container>
+                  <template slot="title">
+                    Beta Spectrum: Original
+                  </template>
+                  <spectrum-line-chart
+                    ref="lineChart3Ref"
+                    :data="betaOriginalData"
+                    :energy="betaEnergyData"
+                    title="Beta"
+                    color="#00ff1e"
+                    @rangeChange="handleLineChartRangeChange($event, 'x')"
+                  />
+                </beta-gamma-chart-container>
+              </div>
+              <div class="gamma-spectrum-item">
+                <beta-gamma-chart-container>
+                  <template slot="title">
+                    Beta Spectrum: Projected
+                  </template>
+                  <spectrum-line-chart
+                    ref="lineChart4Ref"
+                    :data="betaProjectedData"
+                    :energy="betaEnergyData"
+                    title="Beta"
+                    color="#00ff1e"
+                    @rangeChange="handleLineChartRangeChange($event, 'x')"
+                  />
+                </beta-gamma-chart-container>
+              </div>
+            </div>
+          </div>
+          <!-- 四个图表结束 -->
+
+          <!-- 结果显示开始 -->
+          <div class="result-display">
+            <beta-gamma-chart-container>
+              <template slot="title">
+                Result display
+              </template>
+              <result-display :data="resultDisplay"></result-display>
+            </beta-gamma-chart-container>
+          </div>
+          <!-- 结果显示结束 -->
+        </div>
+        <!-- 右侧结束 -->
+
+        <!-- Comparison Modal 开始 -->
+        <comparison-modal v-model="comparisonModalVisible" />
+        <!-- Comparison Modal 结束 -->
+      </div>
+      <!-- 主体部分结束 -->
+    </a-spin>
   </div>
 </template>
 
@@ -138,8 +141,8 @@ import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
 import ComparisonModal from './components/Modals/ComparisonModal.vue'
 import ResultDisplay from './components/ResultDisplay.vue'
 import SpectrumLineChart from './components/SpectrumLineChart.vue'
+import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
 import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
-import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
 import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
 import Spectra from './components/SubOperators/Spectra.vue'
 
@@ -150,11 +153,11 @@ export default {
     ResultDisplay,
     BetaGammaSpectrumChart,
     ComparisonModal,
-    DetailedInfomation,
 
     PopOverWithIcon,
     Spectra,
-    BetaGammaQcFlags
+    BetaGammaQcFlags,
+    BetaGammaDetailedInfomation
   },
   props: {
     sample: {
@@ -168,6 +171,10 @@ export default {
       spectraVisible: false,
       spectraType: 'sample',
 
+      isLoading: false,
+
+      spectrumData: {}, // Detailed Infomation 信息
+
       resultDisplay: [],
 
       histogramDataList: [],
@@ -191,15 +198,21 @@ export default {
       this.spectraType = 'sample'
 
       const { dbName, sampleId } = this.sample
-      const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
-        dbName,
-        sampleId
-      })
-      if (success) {
-        this.sampleDetail = result
-        this.changeChartByType('sample')
-      } else {
-        this.$message.error(message)
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
+          dbName,
+          sampleId
+        })
+        if (success) {
+          this.sampleDetail = result
+          this.changeChartByType('sample')
+          this.isLoading = false
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
       }
     },
 
@@ -228,6 +241,8 @@ export default {
         DetBgBtn // QC Flags 相关
       } = this.sampleDetail[type]
 
+      this.spectrumData = spectrumData
+
       this.histogramDataList = histogramDataList
       this.histogramDataDList = histogramDataDList
       this.boundaryList = Boundary

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

@@ -107,7 +107,7 @@ export default {
     this.disableMixinCreated = true
     return {
       queryParam: {
-        menuTypes: undefined,
+        menuTypes: 'G,B',
         startDate: moment()
           .add(-7, 'd')
           .format('YYYY-MM-DD'),

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="detailed-infomation">
+    <a-form :labelCol="{ style: { width: 120 } }">
+      <a-row v-for="(row, index) in items" :key="index">
+        <a-col v-for="(item, i) in row" :key="i" :span="item.span || 4">
+          <a-form-item :label="item.label">
+            {{ data[item.name] }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+const items = [
+  [
+    {
+      label: 'Sample Id',
+      name: 'sampleId'
+    },
+    {
+      label: 'Status',
+      name: 'status'
+    },
+    {
+      label: 'Data Type',
+      name: 'dataType'
+    },
+    {
+      label: 'Collection Start',
+      name: 'collectionStart',
+      span: 6
+    },
+    {
+      label: 'Acquisition Start',
+      name: 'acquisitionStart',
+      span: 6
+    }
+  ],
+  [
+    {
+      label: 'Station Code',
+      name: 'stationCode'
+    },
+    {
+      label: 'Real Time[s]',
+      name: 'acquisitionRealTime'
+    },
+    {
+      label: 'Collection Time[s]',
+      name: 'collectionTime'
+    },
+    {
+      label: 'Collection Stop',
+      name: 'collectionStop',
+      span: 6
+    },
+    {
+      label: 'Live Time[s]',
+      name: 'acquisitionLiveTime',
+      span: 6
+    }
+  ],
+  [
+    {
+      label: 'Detector Code',
+      name: 'detectorCode'
+    },
+    {
+      label: 'Air Volume[m³]',
+      name: 'airVolume'
+    },
+    {
+      label: 'Xe Volume[cm³]',
+      name: 'xeVolume'
+    }
+  ]
+]
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        sampleId: 1,
+        dataType: 'SAMPLEPHD'
+      })
+    }
+  },
+  created() {
+    this.items = items
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detailed-infomation {
+  width: 1200px;
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    ::v-deep {
+      .ant-form-item-label > label {
+        color: #ade6ee;
+      }
+
+      .ant-form-item-children {
+        color: #0cecca;
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/index.vue

@@ -30,7 +30,10 @@
     <!-- 频谱分析部分 -->
     <div class="spectrum-analysis-main">
       <gamma-analysis v-if="isGamma" ref="gammaAnalysisRef" />
-      <beta-gamma-analysis v-if="isBetaGamma" ref="betaGammaAnalysisRef" :sample="sampleData" />
+      <beta-gamma-analysis v-else-if="isBetaGamma" ref="betaGammaAnalysisRef" :sample="sampleData" />
+      <div v-else class="empty">
+        Please Select a Sample
+      </div>
       <resize-observer @notify="handleResize" />
     </div>
     <!-- 频谱分析部分结束 -->
@@ -298,7 +301,7 @@ export default {
       betaGammaCommentsModalVisible: false, // beta-gamma Comments
       isBetaGammaCommentsAdd: false, // beta-gamma comments 是否新增
 
-      betaGammaEnergyCalibrationModalVisible: true, // beta-gamma 的 Energy Calibration 弹窗
+      betaGammaEnergyCalibrationModalVisible: false, // beta-gamma 的 Energy Calibration 弹窗
 
       betaGammaSpectrumModalVisible: false, // beta-gamma spectrum 弹窗
       betaGammaSampleInfomationModalVisible: false, // beta-gamma sample infomation 弹窗
@@ -307,14 +310,6 @@ export default {
       statisticsParamerHistoryModalVisible: false // beta-gamma Statistics Paramer History 弹窗
     }
   },
-  created() {
-    // 测试
-    this.loadSelectedSample({
-      dbName: 'auto',
-      sampleType: 'B',
-      sampleId: 426120
-    })
-  },
   methods: {
     // 从数据库加载-选择完成
     handleLoadSampleFromDB(sampleList) {
@@ -335,6 +330,7 @@ export default {
     // 清理全部
     handleCleanAll() {
       this.sampleList = []
+      this.sampleData = {}
     },
 
     // 保存结果到文件， 服务端生成文件，前端下载
@@ -970,4 +966,11 @@ export default {
     }
   }
 }
+
+.empty {
+  padding-top: 100px;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+}
 </style>