AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/Modals/SelfStation/BetaModal.vue

<template>
  <custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close>
    <div class="beta-modal">
      <div class="beta-modal__header">
        <span class="count">Channel: {{ axisInfo.channel }}</span>
        <span class="count">Count: {{ axisInfo.count }}</span>
        <span class="energy">Energy: {{ axisInfo.energy }}</span>
      </div>
      <div class="beta-modal__content">
        <custom-chart :option="option" autoresize />
      </div>
    </div>
  </custom-modal>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import { buildLineSeries } from '@/utils/chartHelper'
import { cloneDeep } from 'lodash'

const initialOption = {
  grid: {
    top: 10,
    left: 60,
    right: 20,
    bottom: 50,
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    formatter: () => {},
  },
  xAxis: {
    type: 'value',
    name: 'Beta Channel',
    nameTextStyle: {
      color: '#5b9cba',
      fontSize: 14,
    },
    nameLocation: 'center',
    nameGap: 30,
    boundaryGap: false,
    splitLine: {
      show: true,
      interval: 'auto',
      lineStyle: {
        color: 'rgba(119, 181, 213, .3)',
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(119, 181, 213, .3)',
      },
    },
    axisLabel: {
      fontSize: 12,
      color: '#ade6ee',
    },
    min: 0,
    max: 512,
    interval: 512 / 4,
  },
  yAxis: {
    type: 'log',
    name: 'Count',
    nameTextStyle: {
      color: '#5b9cba',
      fontSize: 14,
    },
    nameLocation: 'center',
    nameGap: 40,
    splitLine: {
      lineStyle: {
        color: 'rgba(119, 181, 213, .3)',
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(119, 181, 213, .3)',
      },
    },
    axisLabel: {
      fontSize: 12,
      color: '#ade6ee',
      formatter: (value) => {
        return value.toFixed(1)
      },
    },
    min: 1,
    max: 'dataMax',
  },
  series: buildLineSeries('Line', [], 'yellow'),
}

const initialAxisInfo = {
  channel: 0,
  count: 0,
  energy: 0,
}

export default {
  components: {
    CustomChart,
  },
  data() {
    return {
      visible: false,
      option: cloneDeep(initialOption),
      axisInfo: cloneDeep(initialAxisInfo),
    }
  },
  created() {
    this.option.tooltip.formatter = this.handleTooltipFormat
  },
  methods: {
    open(seriesData, energys) {
      this.option.series.data = (seriesData || []).map(({ x, y }) => [x, y])
      this.energys = energys || []
      this.axisInfo = cloneDeep(initialAxisInfo)
      this.visible = true
    },

    handleTooltipFormat(params) {
      const [channel, count] = params[0].value
      this.axisInfo = {
        channel,
        count,
        energy: (this.energys[channel] || 0).toFixed(3),
      }
    },
  },
}
</script>

<style lang="less" scoped>
.beta-modal {
  height: 400px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;

  &__header {
    height: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;

    &-count {
      font-family: ArialMT;
      font-size: 12px;
      color: #ade6ee;
    }

    .energy {
      color: #ff5656;
    }
  }

  &__content {
    flex: 1;
    overflow: hidden;
  }
}
</style>