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

<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
        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
      </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"
            @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>
    <!-- 主体部分结束 -->
  </div>
</template>

<script>
import { getAction } from '../../api/manage'
import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
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 DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import QcFlags from './components/SubOperators/QcFlags.vue'
import Spectra from './components/SubOperators/Spectra.vue'

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

    PopOverWithIcon,
    QcFlags,
    Spectra
  },
  props: {
    sample: {
      type: Object
    }
  },
  data() {
    return {
      spectraVisible: false,
      spectraType: 'sample',

      resultDisplay: [],

      histogramDataList: [],
      histogramDataDList: [],

      gammaOriginalData: [],
      gammaProjectedData: [],

      betaOriginalData: [],
      betaProjectedData: [],

      gammaEnergyData: [],
      betaEnergyData: [],

      comparisonModalVisible: false
    }
  },
  methods: {
    async getSampleDetail() {
      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)
      }
    },

    changeChartByType(type) {
      const {
        betaOriginalData,
        betaProjectedData,
        betaEnergyData,

        gammaOriginalData,
        gammaProjectedData,
        gammaEnergyData,

        histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
        histogramDataDList, // 左侧 Beta-Gamma Spectrum: Sample 图表的3D部分
        XeData, // 右下角Result Display
        spectrumData
      } = this.sampleDetail[type]

      this.histogramDataList = histogramDataList
      this.histogramDataDList = histogramDataDList

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

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

      this.resultDisplay = XeData
    },

    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)
    }
  },
  watch: {
    sample: {
      handler() {
        this.getSampleDetail()
      },
      immediate: true
    }
  }
}
</script>

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

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

  .beta-gamma-spectrum-sample {
    width: calc(100% - 1111px);
  }

  .beta-and-gamma-spectrum {
    width: 1081px;
    margin-left: 30px;
    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>