From 124b9ea0ac67c17500149d40c1f646d0cc0dc495 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 31 Jul 2023 19:23:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90Statistics=20Paramer?=
 =?UTF-8?q?=20History=E4=B8=AD=E6=89=80=E6=9C=89=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=8F=8A=E4=BA=A4=E4=BA=92=EF=BC=8C=E5=92=8CAutomaticAnalysisL?=
 =?UTF-8?q?og=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomChart/index.vue          |   8 +-
 src/utils/chartHelper.js                      |   4 +-
 .../spectrumAnalysis/beta-gamma-analysis.vue  |  29 +-
 .../components/BetaGammaSpectrumChart.vue     |   1 -
 .../AutomaticAnalysisLogModal.vue             |  20 ++
 .../StatisticsParamerHistoryModal.vue         | 254 +++++++++++---
 ...tatisticsParamerHistoryModalForQCFlags.vue | 326 ++++++++++++++++++
 .../SubOperators/BetaGammaQcFlags.vue         |  10 +-
 .../components/TitleOverBorder.vue            |  14 +-
 src/views/spectrumAnalysis/index.vue          |  35 +-
 10 files changed, 640 insertions(+), 61 deletions(-)
 create mode 100644 src/views/spectrumAnalysis/components/Modals/BetaGammaModals/AutomaticAnalysisLogModal.vue
 create mode 100644 src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue

diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index dfd8df0..8c37650 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -13,6 +13,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    notMerge: {
+      type: Boolean,
+      default: false
+    },
     height: {
       type: Number,
       default: 0
@@ -59,7 +63,9 @@ export default {
     option: {
       handler() {
         if (this._chart) {
-          this._chart.setOption(this.option)
+          this._chart.setOption(this.option, {
+            notMerge: this.notMerge
+          })
         }
       },
       deep: true
diff --git a/src/utils/chartHelper.js b/src/utils/chartHelper.js
index 3909f91..684783d 100644
--- a/src/utils/chartHelper.js
+++ b/src/utils/chartHelper.js
@@ -24,11 +24,11 @@ export function getXAxisAndYAxisByPosition(chart, offsetX, offsetY, seriesIndex
  * @param {import("echarts").ECharts} chartInstance 
  * @param {'png' | 'jpeg' | 'svg'} type
  */
-export function exportEchartImg(chartInstance, type = 'png') {
+export function exportEchartImg(chartInstance, type = 'png', backgroundColor = '#022024') {
     const dataURL = chartInstance.getDataURL({
         type,
         pixelRatio: 2,
-        backgroundColor: '#022024'
+        backgroundColor
     });
 
     const link = document.createElement('a')
diff --git a/src/views/spectrumAnalysis/beta-gamma-analysis.vue b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
index 6103dff..d6ddf65 100644
--- a/src/views/spectrumAnalysis/beta-gamma-analysis.vue
+++ b/src/views/spectrumAnalysis/beta-gamma-analysis.vue
@@ -9,7 +9,7 @@
         </pop-over-with-icon>
         <pop-over-with-icon placement="bottomLeft">
           QC Flags
-          <beta-gamma-qc-flags slot="content" :data="qcFlags" />
+          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
         </pop-over-with-icon>
         <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
           Spectra
@@ -131,6 +131,8 @@
       </div>
       <!-- 主体部分结束 -->
     </a-spin>
+
+    <statistics-paramer-history-modal-for-qc-flags v-model="statisticModalVisible" :sampleId="sample.sampleId" :statisticsType="statisticsType" />
   </div>
 </template>
 
@@ -138,6 +140,7 @@
 import { getAction } from '../../api/manage'
 import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
 import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
+import StatisticsParamerHistoryModalForQcFlags from './components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue'
 import ComparisonModal from './components/Modals/ComparisonModal.vue'
 import ResultDisplay from './components/ResultDisplay.vue'
 import SpectrumLineChart from './components/SpectrumLineChart.vue'
@@ -146,6 +149,13 @@ import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
 import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
 import Spectra from './components/SubOperators/Spectra.vue'
 
+const StatisticsType = {
+  'Collection Time': 'Colloc_Time',
+  'Acq Time': 'Acq_Time',
+  'Xe Volume': 'Xe_volumn',
+  'Air Volume': 'Sample_Volumn'
+}
+
 export default {
   components: {
     BetaGammaChartContainer,
@@ -157,7 +167,8 @@ export default {
     PopOverWithIcon,
     Spectra,
     BetaGammaQcFlags,
-    BetaGammaDetailedInfomation
+    BetaGammaDetailedInfomation,
+    StatisticsParamerHistoryModalForQcFlags
   },
   props: {
     sample: {
@@ -190,7 +201,10 @@ export default {
       gammaEnergyData: [],
       betaEnergyData: [],
 
-      comparisonModalVisible: false
+      comparisonModalVisible: false,
+
+      statisticModalVisible: false, // Qc Flags 点击后的弹窗
+      statisticsType: StatisticsType['Collection Time']
     }
   },
   methods: {
@@ -312,6 +326,15 @@ export default {
       }
 
       this.$refs.betaGammaChartRef.setRange(x1, x2, type)
+    },
+
+    // QC Flags 除去GasBg 和 DetBg其他四个点击时
+    handleQcFlagClick(item) {
+      const statisticsType = StatisticsType[item]
+      if (statisticsType) {
+        this.statisticsType = statisticsType
+        this.statisticModalVisible = true
+      }
     }
   },
   watch: {
diff --git a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
index e47e728..2133edc 100644
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
@@ -448,7 +448,6 @@ export default {
 
     // 通知上层范围改变
     emitRangeChange(range) {
-      console.log('%c [ range ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', range)
       this.$emit('rangeChange', range)
     },
 
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/AutomaticAnalysisLogModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/AutomaticAnalysisLogModal.vue
new file mode 100644
index 0000000..0a6ec90
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/AutomaticAnalysisLogModal.vue
@@ -0,0 +1,20 @@
+<template>
+  <custom-modal v-model="visible" :width="800" title="Auto Process Log Viewer" :okHandler="handleOk">
+    <a-textarea :rows="18"></a-textarea>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+
+export default {
+  mixins: [ModalMixin],
+  methods: {
+    handleOk() {
+      console.log('%c [  ]-15', 'font-size:13px; background:pink; color:#bf2c9f;')
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue
index cf51ca6..1b43949 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" title="Statistics Paramer History" :width="1480" :footer="null">
+  <custom-modal v-model="visible" title="Statistics Paramer History" :width="1480" destroy-on-close :footer="null">
     <div class="statistics-paramer-history">
       <!-- 左侧配置 -->
       <title-over-border title="Query Infomation Settings" class="settings">
@@ -11,57 +11,62 @@
           >
             <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-input size="small" v-model="queryParams.stationName"></a-input>
+                <a-button type="primary" size="small" @click="handleQueryDetector">Query Detector</a-button>
+                <a-button type="primary" size="small" @click="handleReset">&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>
+              <custom-select :options="detectorList" v-model="queryParams.detectorName" size="small"></custom-select>
             </a-form-model-item>
           </a-form-model>
         </title-over-border>
         <!-- Nuclide -->
         <title-over-border 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 v-model="queryParams.nuclidesList">
+            <a-checkbox value="Xe131m">Xe131m</a-checkbox>
+            <a-checkbox value="Xe133m">Xe133m</a-checkbox>
+            <a-checkbox value="Xe133">Xe133</a-checkbox>
+            <a-checkbox value="Xe135">Xe135</a-checkbox>
           </a-checkbox-group>
         </title-over-border>
 
-        <a-checkbox-group class="other-checkbox">
-          <a-checkbox>MDC</a-checkbox>
-          <a-checkbox>Activity Concentration</a-checkbox>
-        </a-checkbox-group>
+        <div class="other-checkbox">
+          <a-checkbox v-model="queryParams.mdc">MDC</a-checkbox>
+          <a-checkbox v-model="queryParams.activity">Activity Concentration</a-checkbox>
+        </div>
         <a-divider></a-divider>
         <a-form-model class="time-setting">
           <a-form-model-item label="Start Time">
-            <custom-date-picker></custom-date-picker>
+            <custom-date-picker v-model="queryParams.startTime" valueFormat="YYYY-MM-DD"></custom-date-picker>
           </a-form-model-item>
           <a-form-model-item label="Stop Time">
-            <custom-date-picker></custom-date-picker>
+            <custom-date-picker v-model="queryParams.endTime" valueFormat="YYYY-MM-DD"></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 class="rn-setting" v-model="queryParams.dbName">
+          <a-radio value="RNAUTO">RNAUTO</a-radio>
+          <a-radio value="RNMAN">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>
+          <a-button type="primary" @click="handleStatisticsQuery">Statistics Query & Plot</a-button>
+          <a-button type="primary" @click="handleSnapshot($refs.chartRef)">Snapshot</a-button>
         </div>
+        <!-- 左侧中间俩按钮结束 -->
         <a-divider></a-divider>
         <!-- Filter -->
-        <title-over-border title="Filter">
+        <title-over-border>
+          <template slot="title">
+            <a-checkbox v-model="queryParams.filterGrpbox">Filter</a-checkbox>
+          </template>
           <a-checkbox>Xe Result Flag</a-checkbox>
           <!-- 配置详情 -->
           <div class="filter-options">
             <div class="filter-option">
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.minCollectTimeLine" :disabled="filterDisabled"></a-input>
               </div>
               <div class="text">
                 <span>&lt;</span>
@@ -69,12 +74,12 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.maxCollectTimeLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
             <div class="filter-option">
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.minAcqLiveLine" :disabled="filterDisabled"></a-input>
               </div>
               <div class="text">
                 <span>&lt;</span>
@@ -82,7 +87,7 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.maxAcqLiveLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
             <div class="filter-option">
@@ -92,7 +97,7 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.quantityLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
             <div class="filter-option">
@@ -102,7 +107,7 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.xeVolumeLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
             <div class="filter-option">
@@ -112,7 +117,7 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.mdcLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
             <div class="filter-option">
@@ -122,7 +127,7 @@
                 <span>&lt;</span>
               </div>
               <div class="input">
-                <a-input></a-input>
+                <a-input v-model="queryParams.concLine" :disabled="filterDisabled"></a-input>
               </div>
             </div>
           </div>
@@ -130,7 +135,7 @@
       </title-over-border>
       <!-- 右侧图表 -->
       <div class="statistics-paramer-history-chart">
-        <custom-chart :option="option"></custom-chart>
+        <custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
       </div>
     </div>
   </custom-modal>
@@ -140,7 +145,12 @@
 import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../../TitleOverBorder.vue'
 import CustomChart from '@/components/CustomChart/index.vue'
+import { getAction, postAction } from '@/api/manage'
+import moment from 'moment'
+import { exportEchartImg } from '@/utils/chartHelper'
+import { cloneDeep } from 'lodash'
 
+// 右侧图表配置
 const initialOption = {
   grid: {
     right: 10,
@@ -148,10 +158,25 @@ const initialOption = {
     top: 20,
     bottom: 60
   },
+  legend: {
+    show: false,
+    orient: 'vertical',
+    top: 30,
+    right: 20,
+    z: 999,
+    textStyle: {
+      color: '#fff'
+    },
+    backgroundColor: '#022024',
+    borderColor: '#0b8c82',
+    borderWidth: 1,
+    itemWidth: 50
+  },
   tooltip: {
     trigger: 'axis'
   },
   xAxis: {
+    type: 'category',
     axisLine: {
       lineStyle: {
         color: 'rgba(119, 181, 213, .3)'
@@ -161,7 +186,10 @@ const initialOption = {
       color: '#ade6ee',
       fontSize: 12,
       rotate: 45,
-      margin: 10
+      margin: 10,
+      formatter: value => {
+        return moment(value).format('YYYY/MM/DD')
+      }
     },
     splitLine: {
       show: true,
@@ -172,7 +200,7 @@ const initialOption = {
     axisTick: {
       show: false
     },
-    data: ['2023/07/09', '2023/07/09', '2023/07/09', '2023/07/09', '2023/07/10']
+    data: []
   },
   yAxis: {
     axisLine: {
@@ -194,17 +222,165 @@ const initialOption = {
       show: false
     }
   },
-  series: {
-    type: 'line',
-    data: [15, 16, 18, 20, 22]
-  }
+  series: []
+}
+
+// 左侧配置
+const initialFilterOption = {
+  dbName: 'RNAUTO',
+  detectorName: '',
+  stationId: '',
+  statisticsType: 'Nuclides',
+  mdc: false,
+  activity: false,
+  filterGrpbox: false,
+  startTime: null,
+  endTime: null,
+  minCollectTimeLine: 10.8,
+  maxCollectTimeLine: 13.2,
+  minAcqLiveLine: 10.8,
+  maxAcqLiveLine: 13.2,
+  quantityLine: 10,
+  xeVolumeLine: 0.87,
+  mdcLine: 0,
+  concLine: 0,
+  nuclidesList: []
 }
 export default {
   components: { TitleOverBorder, CustomChart },
   mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
   data() {
     return {
-      option: initialOption
+      option: cloneDeep(initialOption),
+      initialMDC: {}, // 初始化的信息，用于重置
+
+      queryParams: {},
+      detectorList: [] // 探测器列表
+    }
+  },
+  methods: {
+    // 打开弹窗时初始化左上角Station和Detector信息
+    async getMDCInitialInfo() {
+      try {
+        const { success, message, result } = await getAction('/spectrumAnalysis/viewMDC', {
+          sampleId: this.sampleId
+        })
+        if (success) {
+          this.setStationAndDetector(result)
+          this.initialMDC = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 左上角查询探测器
+    async handleQueryDetector() {
+      const stationName = this.queryParams.stationName
+      if (!stationName) {
+        return
+      }
+
+      try {
+        const { success, result } = await getAction('/spectrumAnalysis/changeDetector', { stationName })
+        if (success) {
+          this.setStationAndDetector(result)
+        } else {
+          this.detectorList = []
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 设置左上角台站和探测器列表
+    setStationAndDetector({ detectorList, stationName, stationId }) {
+      this.queryParams.stationName = stationName
+      this.detectorList = detectorList.map(item => ({
+        label: item,
+        value: item
+      }))
+      this.queryParams.detectorName = detectorList[0]
+      this.queryParams.stationId = stationId
+    },
+
+    // 重置左上角查询信息
+    handleReset() {
+      this.queryParams.stationName = this.initialMDC.stationName
+      this.detectorList = this.initialMDC.detectorList.map(item => ({
+        label: item,
+        value: item
+      }))
+    },
+
+    // 查询右侧图表信息
+    async handleStatisticsQuery() {
+      const { nuclidesList, mdc, activity } = this.queryParams
+      if (!(nuclidesList.length && (mdc || activity))) {
+        return
+      }
+
+      try {
+        const { success, message, result } = await postAction('/spectrumAnalysis/statisticsQuery', this.queryParams)
+        if (success) {
+          if (result) {
+
+            this.option.xAxis.data = result[0].m_Keys
+            this.option.legend.show = true
+
+            this.option.series = result.map(item => {
+              return {
+                type: 'line',
+                name: item.m_strGraphName,
+                data: item.m_Values,
+                itemStyle: {
+                  color: item.m_GraphPen
+                },
+                lineStyle: {
+                  color: item.m_GraphPen
+                },
+                symbol: 'circle'
+              }
+            })
+          } else {
+            this.option.series = []
+            this.option.legend.show = false
+          }
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 对右侧图表下载
+    handleSnapshot(chartRef) {
+      exportEchartImg(chartRef.getChartInstance())
+    },
+
+    beforeModalOpen() {
+      this.getMDCInitialInfo()
+
+      this.queryParams = {
+        ...initialFilterOption,
+        startTime: moment().format('YYYY-MM-DD'),
+        endTime: moment().format('YYYY-MM-DD')
+      }
+
+      this.option = cloneDeep(initialOption)
+    }
+  },
+  computed: {
+    filterDisabled() {
+      return !this.queryParams.filterGrpbox
     }
   }
 }
@@ -230,7 +406,7 @@ export default {
       margin-left: 14px;
 
       label:nth-child(2) {
-        margin-left: 28px;
+        margin-left: 26px;
       }
     }
 
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue
new file mode 100644
index 0000000..072de08
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue
@@ -0,0 +1,326 @@
+<template>
+  <custom-modal
+    v-model="visible"
+    title="Statistics Paramer History"
+    :width="1480"
+    destroy-on-close
+    :footer="null"
+    wrapClassName="statistics-paramer-history-modal"
+  >
+    <div class="statistics-paramer-history">
+      <!-- 左侧配置 -->
+      <title-over-border title="Query Infomation Settings" class="settings">
+        <!-- Station And Detector -->
+        <title-over-border 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" v-model="queryParams.stationName"></a-input>
+                <a-button type="primary" size="small" @click="handleQueryDetector">Query Detector</a-button>
+                <a-button type="primary" size="small" @click="handleReset">&lt;&lt;</a-button>
+              </a-space>
+            </a-form-model-item>
+            <a-form-model-item label="Detector">
+              <custom-select
+                :options="detectorList"
+                v-model="queryParams.detectorName"
+                size="small"
+                dropdownClassName="statistics-paramer-history-select"
+              ></custom-select>
+            </a-form-model-item>
+          </a-form-model>
+        </title-over-border>
+        <a-form-model class="time-setting">
+          <a-form-model-item label="Start Time">
+            <custom-date-picker v-model="queryParams.startTime" valueFormat="YYYY-MM-DD"></custom-date-picker>
+          </a-form-model-item>
+          <a-form-model-item label="Stop Time">
+            <custom-date-picker v-model="queryParams.endTime" valueFormat="YYYY-MM-DD"></custom-date-picker>
+          </a-form-model-item>
+        </a-form-model>
+        <a-divider></a-divider>
+        <!-- 左侧中间俩按钮 -->
+        <div class="center-btns">
+          <a-button type="primary" @click="handleStatisticsQuery">Statistics Query & Plot</a-button>
+          <a-button type="primary" @click="handleSnapshot($refs.chartRef)">Snapshot</a-button>
+        </div>
+        <!-- 左侧中间俩按钮结束 -->
+        <a-divider></a-divider>
+      </title-over-border>
+      <!-- 右侧图表 -->
+      <div class="statistics-paramer-history-chart">
+        <custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
+      </div>
+    </div>
+  </custom-modal>
+</template>
+
+<script>
+import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBorder from '../../TitleOverBorder.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
+import { getAction } from '@/api/manage'
+import moment from 'moment'
+import { exportEchartImg } from '@/utils/chartHelper'
+import { cloneDeep } from 'lodash'
+
+// 右侧图表配置
+const initialOption = {
+  grid: {
+    right: 10,
+    left: 40,
+    top: 20,
+    bottom: 60
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12,
+      rotate: 45,
+      margin: 10,
+      formatter: value => {
+        return moment(value).format('YYYY/MM/DD')
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    data: []
+  },
+  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
+    },
+    min: 0,
+    max: 0
+  },
+  series: []
+}
+
+// 左侧配置
+const initialFilterOption = {
+  detectorName: '',
+  stationId: '',
+  statisticsType: '',
+  startTime: null,
+  endTime: null
+}
+export default {
+  components: { TitleOverBorder, CustomChart },
+  mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: Number
+    },
+    statisticsType: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      option: cloneDeep(initialOption),
+      initialMDC: {}, // 初始化的信息，用于重置
+
+      queryParams: {},
+      detectorList: [] // 探测器列表
+    }
+  },
+  methods: {
+    // 打开弹窗时初始化左上角Station和Detector信息
+    async getMDCInitialInfo() {
+      try {
+        const { success, message, result } = await getAction('/spectrumAnalysis/viewMDC', {
+          sampleId: this.sampleId
+        })
+        if (success) {
+          this.setStationAndDetector(result)
+          this.initialMDC = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 左上角查询探测器
+    async handleQueryDetector() {
+      const stationName = this.queryParams.stationName
+      if (!stationName) {
+        return
+      }
+
+      try {
+        const { success, result } = await getAction('/spectrumAnalysis/changeDetector', { stationName })
+        if (success) {
+          this.setStationAndDetector(result)
+        } else {
+          this.detectorList = []
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 设置左上角台站和探测器列表
+    setStationAndDetector({ detectorList, stationName, stationId }) {
+      this.queryParams.stationName = stationName
+      this.detectorList = detectorList.map(item => ({
+        label: item,
+        value: item
+      }))
+      this.queryParams.detectorName = detectorList[0]
+      this.queryParams.stationId = stationId
+    },
+
+    // 重置左上角查询信息
+    handleReset() {
+      this.queryParams.stationName = this.initialMDC.stationName
+      this.detectorList = this.initialMDC.detectorList.map(item => ({
+        label: item,
+        value: item
+      }))
+    },
+
+    // 查询右侧图表信息
+    async handleStatisticsQuery() {
+      try {
+        const { success, message, result } = await getAction('/spectrumAnalysis/statisticsQueryBtn', this.queryParams)
+        if (success) {
+          if (result) {
+            const data = result.m_Values
+
+            this.option.xAxis.data = result.m_Keys
+
+            this.option.yAxis.max = (Math.max(...data) * 1.1).toFixed(2)
+            this.option.yAxis.min = (Math.min(...data) / 1.1).toFixed(2)
+
+            this.option.series = {
+              type: 'line',
+              data,
+              itemStyle: {
+                color: result.m_GraphPen
+              },
+              lineStyle: {
+                color: result.m_GraphPen
+              },
+              symbol: 'circle'
+            }
+          } else {
+            this.option.series = []
+          }
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    // 对右侧图表下载
+    handleSnapshot(chartRef) {
+      exportEchartImg(chartRef.getChartInstance())
+    },
+
+    beforeModalOpen() {
+      this.getMDCInitialInfo()
+
+      this.queryParams = {
+        ...initialFilterOption,
+        statisticsType: this.statisticsType,
+        startTime: moment().format('YYYY-MM-DD'),
+        endTime: moment().format('YYYY-MM-DD')
+      }
+
+      this.option = cloneDeep(initialOption)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.statistics-paramer-history {
+  display: flex;
+
+  .settings {
+    width: 405px;
+
+    .station {
+      display: flex;
+    }
+
+    .time-setting {
+      padding-left: 40px;
+    }
+
+    .center-btns {
+      > button {
+        display: block;
+        width: 100%;
+
+        &:nth-child(2) {
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+
+  &-chart {
+    flex: 1;
+    margin-left: 15px;
+    height: 600px;
+  }
+}
+
+.ant-divider {
+  margin: 15px 0;
+}
+
+.ant-form-item {
+  margin-bottom: 0;
+}
+::v-deep .title-over-border-content {
+  padding: 15px;
+}
+</style>
+<style lang="less">
+.statistics-paramer-history {
+  &-modal,
+  &-select {
+    z-index: 1040;
+  }
+}
+</style>
diff --git a/src/views/spectrumAnalysis/components/SubOperators/BetaGammaQcFlags.vue b/src/views/spectrumAnalysis/components/SubOperators/BetaGammaQcFlags.vue
index 170445a..3b86cb4 100644
--- a/src/views/spectrumAnalysis/components/SubOperators/BetaGammaQcFlags.vue
+++ b/src/views/spectrumAnalysis/components/SubOperators/BetaGammaQcFlags.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="qc-flags">
-    <div class="qc-flags-item" v-for="conf in config" :key="conf.label">
+    <div class="qc-flags-item" v-for="conf in config" :key="conf.label" @click="handleClick(conf)">
       <span :class="data[conf.name]"></span>
       {{ conf.label }}
     </div>
@@ -31,7 +31,7 @@ const config = [
     name: 'DetBgBtn'
   },
   {
-    label: 'Sample Volume',
+    label: 'Air Volume',
     name: 'SampleVolumeBtn'
   }
 ]
@@ -45,6 +45,11 @@ export default {
   },
   created() {
     this.config = config
+  },
+  methods: {
+    handleClick(conf) {
+      this.$emit('click', conf.label)
+    }
   }
 }
 </script>
@@ -58,6 +63,7 @@ export default {
     align-items: center;
     width: 150px;
     height: 30px;
+    cursor: default;
 
     &:not(:last-child) {
       margin-right: 2px;
diff --git a/src/views/spectrumAnalysis/components/TitleOverBorder.vue b/src/views/spectrumAnalysis/components/TitleOverBorder.vue
index 28d29d4..3b55e94 100644
--- a/src/views/spectrumAnalysis/components/TitleOverBorder.vue
+++ b/src/views/spectrumAnalysis/components/TitleOverBorder.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="title-over-border">
-    <div class="title-over-border-title">{{ title }}</div>
+    <div class="title-over-border-title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
     <div class="title-over-border-content">
       <slot />
     </div>
@@ -9,11 +13,11 @@
 
 <script>
 export default {
-    props: {
-        title: {
-            type: String
-        }
+  props: {
+    title: {
+      type: String
     }
+  }
 }
 </script>
 
diff --git a/src/views/spectrumAnalysis/index.vue b/src/views/spectrumAnalysis/index.vue
index 00c04af..10dd571 100644
--- a/src/views/spectrumAnalysis/index.vue
+++ b/src/views/spectrumAnalysis/index.vue
@@ -138,6 +138,8 @@
     <rlr-modal v-model="rlrModalVisible" />
     <!-- RLR 弹窗结束 -->
 
+    <automatic-analysis-log-modal v-model="autoAnalysisMogModalVisible" />
+
     <!-- Beta-Gamma 的Comments 弹窗 -->
     <beta-gamma-comments-modal
       v-model="betaGammaCommentsModalVisible"
@@ -173,7 +175,10 @@
     <!-- Beta-Gamma 的 RLR 弹窗 结束 -->
 
     <!-- Beta-Gamma 的 Statistics Paramer History 弹窗 -->
-    <statistics-paramer-history-modal v-model="statisticsParamerHistoryModalVisible" />
+    <statistics-paramer-history-modal
+      v-model="statisticsParamerHistoryModalVisible"
+      :sampleId="this.sampleData.sampleId"
+    />
     <!-- Beta-Gamma 的 Statistics Paramer History 弹窗 结束 -->
   </div>
 </template>
@@ -214,6 +219,7 @@ import StatisticsParamerHistoryModal from './components/Modals/BetaGammaModals/S
 import FtransltModal from './components/Modals/FtransltModal/index.vue'
 import BetaGammaEnergyCalibrationModal from './components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/index.vue'
 import StripModal from './components/Modals/StripModal.vue'
+import AutomaticAnalysisLogModal from './components/Modals/BetaGammaModals/AutomaticAnalysisLogModal.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -257,7 +263,8 @@ export default {
     StatisticsParamerHistoryModal,
     FtransltModal,
     BetaGammaEnergyCalibrationModal,
-    StripModal
+    StripModal,
+    AutomaticAnalysisLogModal
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
@@ -305,6 +312,8 @@ export default {
       qcResultsModalVisible: false, // Reports -> Qc Results 弹窗
       rlrModalVisible: false, // Reports -> RLR 弹窗
 
+      autoAnalysisMogModalVisible: false, // Log -> Automatic Analysis Log 弹窗
+
       /**
        *  以下是beta-gamma跟前面不同的弹窗
        **/
@@ -320,6 +329,13 @@ export default {
       statisticsParamerHistoryModalVisible: false // beta-gamma Statistics Paramer History 弹窗
     }
   },
+  created() {
+    this.loadSelectedSample({
+      sampleId: 426120,
+      dbName: 'auto',
+      sampleType: 'B'
+    })
+  },
   methods: {
     /**
      * 从数据库加载-选择完成
@@ -403,11 +419,6 @@ export default {
       }
     },
 
-    // 查看自动处理日志
-    handleAutoAnalysisLog() {
-      console.log('%c [ handleAutoAnalysisLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
-    },
-
     // 查看软件操作帮助文档
     handleHelp() {
       console.log('%c [ handleHelp ]-221', 'font-size:13px; background:pink; color:#bf2c9f;')
@@ -807,11 +818,19 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Automatic Analysis Log',
-                  handler: this.handleAutoAnalysisLog
+                  show: this.isBetaGamma,
+                  handler: () => (this.autoAnalysisMogModalVisible = true)
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'BG log viewer',
+                  show: this.isBetaGamma,
+                  handler: () => {}
                 },
                 {
                   type: 'a-menu-item',
                   title: 'GammaViewer Log',
+                  show: this.isGamma,
                   handler: () => (this.dataProcessingLogModalVisible = true)
                 }
               ]