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

<template>
  <div class="beta-gamma-analysis">
    <div class="beta-gamma-spectrum-sample">
      <beta-gamma-chart-container>
        <template slot="title">
          Beta-Gamma Spectrum: Sample
        </template>
        <beta-gamma-spectrum-chart
          ref="betaGammaChartRef"
          :data="twoDData"
          @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" @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" @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"
                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"
                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>
</template>

<script>
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 twoDData from './data.json'

export default {
  components: {
    BetaGammaChartContainer,
    SpectrumLineChart,
    ResultDisplay,
    BetaGammaSpectrumChart,
    ComparisonModal
  },
  data() {
    return {
      resultDisplay: [
        {
          id: 1,
          isotope: 'Xe131m',
          concentration: '0.03464',
          uncertainty: '+/-0.01988',
          mdc: '0.03464'
        },
        {
          id: 2,
          isotope: 'Xe131m',
          concentration: '0.03464',
          uncertainty: '+/-0.01988',
          mdc: '0.03464'
        },
        {
          id: 3,
          isotope: 'Xe131m',
          concentration: '0.03464',
          uncertainty: '+/-0.01988',
          mdc: '0.03464'
        },
        {
          id: 4,
          isotope: 'Xe131m',
          concentration: '0.03464',
          uncertainty: '+/-0.01988',
          mdc: '0.03464'
        }
      ],
      twoDData: {},
      comparisonModalVisible: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    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()
    },

    async getData() {
      await 0
      this.twoDData = twoDData
    },

    // 鼠标在左侧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)
    }
  }
}
</script>

<style lang="less" scoped>
.beta-gamma-analysis {
  height: 100%;
  display: flex;
  overflow: auto hidden;

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

  .beta-and-gamma-spectrum {
    width: 1048px;
    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>