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

<template>
  <custom-modal v-model="visible" title="Peak Infomation" :width="1231" :footer="null" class="peak-infomation">
    <a-spin :spinning="isLoading">
      <div v-if="compareVisible" class="comparison-list">
        <div class="comparison-list-item">
          <div class="comparison-list-item-title">ARMD</div>
          <custom-table :list="list" :scroll="{ y: 230 }" :columns="columns"></custom-table>
        </div>
        <div class="comparison-list-item">
          <div class="comparison-list-item-title">IDC</div>
          <custom-table :list="compareList" :scroll="{ y: 230 }" :columns="columns"></custom-table>
        </div>
      </div>
      <custom-table v-else :columns="columns" :list="list" :scroll="{ y: 460 }" :canSelect="false"></custom-table>
    </a-spin>
    <!-- 底部按钮 -->
    <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>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import { getAction, getFileAction } from '@/api/manage'
import { saveAs } from 'file-saver'
import SampleDataMixin from '../SampleDataMixin'

const columns = [
  {
    title: 'Index',
    dataIndex: 'index',
    align: 'center',
    customRender: (_, __, index) => {
      return index + 1
    },
  },
  {
    title: 'Energy(keV)',
    dataIndex: 'energy',
    customRender: (text) => parseFloat(Number(text).toPrecision(6)),
  },
  {
    title: 'Centroid',
    dataIndex: 'centroid',
    customRender: (text) => parseFloat(Number(text).toPrecision(6)),
  },
  {
    title: 'Multiplet',
    dataIndex: 'multiplet',
  },
  {
    title: 'Fwhm(keV)',
    dataIndex: 'fwhm',
    customRender: (text) => parseFloat(Number(text).toPrecision(6)),
  },
  {
    title: 'NetArea',
    dataIndex: 'netArea',
    ellipsis: true,
    // customRender: (text) => parseFloat(Number(text).toPrecision(6)),
    customRender: (text) => text,
  },
  {
    title: 'AreaErr(%)',
    dataIndex: 'areaErr',
    ellipsis: true,
    // customRender: (text) => parseFloat(Number(text).toPrecision(6)),
    customRender: (text) => text,
  },
  {
    title: 'Significant',
    dataIndex: 'significant',
    customRender: (text) => parseFloat(Number(text).toPrecision(6)),
  },
  {
    title: 'Sensitivity',
    dataIndex: 'sensitivity',
    customRender: (text) => parseFloat(Number(text).toPrecision(6)),
  },
  {
    title: 'Indentify',
    dataIndex: 'indentify',
    ellipsis: true,
  },
]
export default {
  mixins: [ModalMixin, SampleDataMixin],
  data() {
    this.columns = columns
    return {
      list: [],
      compareList: [],
      compareVisible: false, // 是否显示比较
      isLoading: false,
      fileName: '',
    }
  },
  methods: {
    // 切换比较
    handleComparision() {
      this.compareVisible = !this.compareVisible
    },

    async getInfo() {
      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/peakInformation', {
          sampleId,
          fileName,
        })
        if (success) {
          this.list = result
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },

    beforeModalOpen() {
      this.compareVisible = false
      this.getInfo()
    },

    // 导出到Excel
    handleExportToExcel() {
      this.fileName = ''
      const { sampleId, inputFileName: fileName } = this.sampleData
      if (this.list.length > 0) {
        let name = this.newSampleData.inputFileName.split('.')[0]
        let params = {
          sampleId,
          fileName,
        }
        getFileAction('/gamma/exportPeakInformation', params).then((res) => {
          if (res.code && res.code == 500) {
            this.$message.warning('This operation fails. Contact your system administrator')
          } else {
            const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
            saveAs(blob, `${name}_Peak Infomation`)
          }
        })
        // let _this = this
        // this.$confirm({
        //   title: 'Please enter file name',
        //   content:  h => <a-input v-model={_this.fileName} />,
        //   okText: 'Cancle',
        //   cancelText: 'Save',
        //   okButtonProps: {style: {backgroundColor: "#b98326", color: "#fff", borderColor: "transparent"}},
        //   cancelButtonProps: {style: {color: "#fff", backgroundColor: "#31aab0", borderColor: "transparent"}},
        //   onOk() {
        //     console.log('Cancel');
        //   },
        //   onCancel() {
        //     if (_this.fileName) {
        //       let params = {
        //         sampleId,
        //         fileName
        //       }
        //       getFileAction('/gamma/exportPeakInformation', params).then(res => {
        //         if (res.code && res.code == 500) {
        //           this.$message.warning("This operation fails. Contact your system administrator")
        //         } else {
        //           const blob = new Blob([res], { type: "application/vnd.ms-excel" })
        //           saveAs(blob, `${_this.fileName}`)
        //         }
        //       })
        //     }
        //   },
        // });
      } else {
        this.$message.warning('No downloadable data')
      }
    },
  },
}
</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>