AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/PeakInfomation.vue

<template>
  <a-modal v-model="visible" title="Peak Infomation" :width="1231" :footer="null" class="peak-infomation">
    <div v-if="compareVisible" class="comparison-list">
      <div class="comparison-list-item" v-for="(item, index) in compareList" :key="index">
        <div class="comparison-list-item-title">{{ item.title }}</div>
        <custom-table :list="item.list" :scroll="{ y: 230 }" :columns="columns"></custom-table>
      </div>
    </div>
    <custom-table v-else :columns="columns" :list="list"></custom-table>

    <!-- 底部按钮 -->
    <div class="peak-infomation-footer">
      <a-space :size="20">
        <a-button :type="compareVisible ? 'grey' : 'primary'" @click="handleComparision">
          <img src="@/assets/images/spectrum/comparation.png" />
          {{ compareVisible ? 'Cancel comparison' : 'Comparison' }}
        </a-button>
        <a-button type="primary" @click="handleExportToExcel">
          <img src="@/assets/images/spectrum/download.png" />
          Export to Excel
        </a-button>
      </a-space>
    </div>
  </a-modal>
</template>

<script>
const columns = [
  {
    title: 'Index',
    dataIndex: 'index',
    align: 'center',
    customRender: (_, __, index) => {
      return index + 1
    }
  },
  {
    title: 'Energy(keV)',
    dataIndex: 'energy'
  },
  {
    title: 'Centroid',
    dataIndex: 'centroid'
  },
  {
    title: 'Multiplet',
    dataIndex: 'multiplet'
  },
  {
    title: 'Fwhm(keV)',
    dataIndex: 'fwhm'
  },
  {
    title: 'NetArea',
    dataIndex: 'netArea'
  },
  {
    title: 'AreaErr(%)',
    dataIndex: 'areaErr'
  },
  {
    title: 'Significant',
    dataIndex: 'significant'
  },
  {
    title: 'Sensitivity',
    dataIndex: 'sensitivity'
  },
  {
    title: 'Indentify',
    dataIndex: 'indentify'
  }
]
export default {
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    return {
      list: [
        {
          id: 1,
          energy: 'energy',
          centroid: 'centroid',
          multiplet: 'multiplet',
          fwhm: 'fwhm',
          netArea: 'netArea',
          areaErr: 'areaErr',
          significant: 'significant',
          sensitivity: 'sensitivity',
          indentify: 'indentify'
        }
      ],
      compareList: [
        {
          title: 'ARMD',
          list: [
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            },
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            }
          ]
        },
        {
          title: 'IDC',
          list: [
            {
              id: 1,
              energy: 'energy',
              centroid: 'centroid',
              multiplet: 'multiplet',
              fwhm: 'fwhm',
              netArea: 'netArea',
              areaErr: 'areaErr',
              significant: 'significant',
              sensitivity: 'sensitivity',
              indentify: 'indentify'
            }
          ]
        }
      ],
      compareVisible: true
    }
  },
  methods: {
    // 切换比较
    handleComparision() {
      this.compareVisible = !this.compareVisible
    },

    // 导出到Excel
    handleExportToExcel() {}
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.peak-infomation {
  ::v-deep {
    .ant-modal-body {
      padding: 20px 16px 16px;
    }
  }

  &-footer {
    margin-top: 10px;
    text-align: right;

    .ant-btn {
      display: flex;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }
  }
}

.comparison-list {
  &-item {
    &-title {
      color: #0cebc9;
    }

    &:last-child {
      margin-top: 12px;
    }
  }
}
</style>