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

<template>
  <div class="beta-gamma-analysis">
    <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" @click="handleQcFlagClick" />
        </pop-over-with-icon>
        <custom-select
          v-model="spectraType"
          :options="SampleType"
          @change="changeChartByType"
          style="width: 246px"
        ></custom-select>
      </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"
            />
          </beta-gamma-chart-container>
        </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>

    <statistics-paramer-history-modal-for-qc-flags
      v-model="statisticModalVisible"
      :sampleId="sample.sampleId"
      :statisticsType="statisticsType"
    />
  </div>
</template>

<script>
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'
import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import Spectra from './components/SubOperators/Spectra.vue'
import CustomSelect from '@/components/CustomSelect/index.vue'

const StatisticsType = {
  'Collection Time': 'Colloc_Time',
  'Acq Time': 'Acq_Time',
  'Xe Volume': 'Xe_volumn',
  'Air Volume': 'Sample_Volumn',
}

const SampleType = [
  {
    label: 'Sample Data',
    value: 'sample',
  },
  {
    label: 'GasBg Data',
    value: 'gasBg',
  },
  {
    label: 'DetBg Data',
    value: 'detBg',
  },
  {
    label: 'QC Data',
    value: 'qc',
  },
]

export default {
  components: {
    BetaGammaChartContainer,
    SpectrumLineChart,
    ResultDisplay,
    BetaGammaSpectrumChart,
    ComparisonModal,

    PopOverWithIcon,
    Spectra,
    BetaGammaQcFlags,
    BetaGammaDetailedInfomation,
    StatisticsParamerHistoryModalForQcFlags,
    CustomSelect,
  },
  props: {
    sample: {
      type: Object,
    },
    analyseCurrentSpectrum: {
      type: Object,
    },
  },
  data() {
    this.SampleType = SampleType

    return {
      qcFlags: {},

      spectraVisible: false,
      spectraType: 'sample',

      isLoading: false,

      spectrumData: {}, // Detailed Infomation 信息

      resultDisplay: [],
      currResultDisplay: [],

      histogramDataList: [],
      histogramDataDList: [],
      boundaryList: [],

      gammaOriginalData: [],
      gammaProjectedData: [],

      betaOriginalData: [],
      betaProjectedData: [],

      gammaEnergyData: [],
      betaEnergyData: [],

      comparisonModalVisible: false,

      statisticModalVisible: false, // Qc Flags 点击后的弹窗
      statisticsType: StatisticsType['Collection Time'],
    }
  },
  methods: {
    async getSampleDetail() {
      this.spectraType = this.SampleType[0].value

      const { dbName, sampleId } = this.sample
      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
          this.$emit('getFiles', { detFileName: result.detBg.fileName, gasFileName: result.gasBg.fileName })
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },
    async getSampleDetail_file() {
      this.spectraType = this.SampleType[0].value
      let params = {
        sampleFileName: this.sample.sampleFileName,
        gasFileName: this.sample.gasFileName,
        detFileName: this.sample.detFileName,
        qcFileName: this.sample.qcFileStatus ? this.sample.qcFileName : '',
      }
      try {
        this.isLoading = true
        const { success, result, message } = await getAction('/spectrumAnalysis/getFileSpectrumChart', params)
        if (success) {
          this.sampleDetail = result
          this.changeChartByType('sample')
          this.isLoading = false
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    changeChartByType(val) {
      if (val === 'qc' && !this.sample.qcFileStatus) {
        this.$message.warning('No qc spectrum file!')
      } else {
        const {
          betaOriginalData,
          betaProjectedData,
          betaEnergyData,

          gammaOriginalData,
          gammaProjectedData,
          gammaEnergyData,

          histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
          histogramDataDList, // 左侧 Beta-Gamma Spectrum: Sample 图表的3D部分
          Boundary, // 左侧2d图表的矩形

          XeData, // 右下角Result Display
          spectrumData,

          AcqTimeBtn, // QC Flags 相关
          CollectTimeBtn, // QC Flags 相关
          SampleVolumeBtn, // QC Flags 相关
          XeVolumeBtn, // QC Flags 相关
          GasBgBtn, // QC Flags 相关
          DetBgBtn, // QC Flags 相关
        } = this.sampleDetail[this.spectraType]

        this.spectrumData = spectrumData

        this.histogramDataList = histogramDataList
        this.histogramDataDList = histogramDataDList
        this.boundaryList = Boundary

        this.gammaOriginalData = gammaOriginalData
        this.gammaProjectedData = gammaProjectedData
        this.gammaEnergyData = gammaEnergyData

        this.betaOriginalData = betaOriginalData
        this.betaProjectedData = betaProjectedData
        this.betaEnergyData = betaEnergyData

        this.resultDisplay = this.currResultDisplay || XeData

        this.qcFlags = {
          AcqTimeBtn,
          CollectTimeBtn,
          SampleVolumeBtn,
          XeVolumeBtn,
          GasBgBtn,
          DetBgBtn,
        }
      }
    },

    resize() {
      this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
      this.$refs.lineChart1Ref && this.$refs.lineChart1Ref.resize()
      this.$refs.lineChart2Ref && this.$refs.lineChart2Ref.resize()
      this.$refs.lineChart3Ref && this.$refs.lineChart3Ref.resize()
      this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
    },

    // 鼠标在左侧2d图表上移动时
    handlePositionChange([xAxis, yAxis]) {
      // Gamma Spectrum，根据bata-gamma的gamma channel的值（y轴）进行定位
      this.$refs.lineChart1Ref.setLinePosition(yAxis)
      this.$refs.lineChart2Ref.setLinePosition(yAxis)

      // Beta Spectrum，根据bata-gamma的bata channel的值（x轴）进行定位
      this.$refs.lineChart3Ref.setLinePosition(xAxis)
      this.$refs.lineChart4Ref.setLinePosition(xAxis)
    },

    // 鼠标在左侧2d图表上刷选时
    handleRangeChange([x1, x2, y1, y2]) {
      this.$refs.lineChart1Ref.setRange(y1, y2)
      this.$refs.lineChart2Ref.setRange(y1, y2)

      this.$refs.lineChart3Ref.setRange(x1, x2)
      this.$refs.lineChart4Ref.setRange(x1, x2)
    },

    /**
     * 右侧折线图表刷选时
     * @param {number[]} range 范围
     * @param {'x'|'y'} type 类型
     **/

    handleLineChartRangeChange([x1, x2], type) {
      if (type == 'y') {
        // 如果是gamma channel变化
        this.$refs.lineChart1Ref.setRange(x1, x2)
        this.$refs.lineChart2Ref.setRange(x1, x2)
      } else if (type == 'x') {
        this.$refs.lineChart3Ref.setRange(x1, x2)
        this.$refs.lineChart4Ref.setRange(x1, x2)
      }

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

    // 重新分析，设置右侧折线图的Energy
    reanalyse([type, data]) {
      const energy = data.map((item) => [item.y])
      if (type == 'gamma') {
        this.gammaEnergyData = energy
      } else {
        this.betaEnergyData = energy
      }
    },
  },
  watch: {
    sample: {
      handler(newVal, oldVal) {
        if (newVal.sampleId) {
          this.getSampleDetail()
        } else {
          this.getSampleDetail_file()
        }
      },
      immediate: true,
    },
    analyseCurrentSpectrum: {
      handler(newVal, oldVal) {
        this.currResultDisplay = newVal.XeData
        this.resultDisplay = newVal.XeData
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>

<style lang="less" scoped>
.beta-gamma-analysis {
  height: 100%;

  .ant-spin-nested-loading {
    height: 100%;

    ::v-deep {
      .ant-spin-container {
        height: 100%;
      }
    }
  }

  &-main {
    height: calc(100% - 51px);
    display: flex;
    gap: 30px;
    overflow: auto hidden;
  }

  .beta-gamma-spectrum-sample {
    flex: 788;
  }

  .beta-and-gamma-spectrum {
    flex: 1048;
    flex-direction: column;

    .spectrum-charts {
      display: flex;
      flex-direction: column;
      height: calc(100% - 208px);

      .gamma-spectrum {
        display: flex;
        height: 50%;

        &-item {
          flex: 509px;

          &:first-child {
            margin-right: 30px;
          }
        }
      }
    }

    .result-display {
      flex-shrink: 0;
    }
  }
}
</style>