AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/Modals/NuclideActivityAndMDCModal.vue

<template>
  <custom-modal
    v-model="visible"
    :width="1231"
    title="Nuclide Activity and MDC"
    class="nuclide-activity-and-mdc-modal"
    :footer="null"
  >
    <!-- 顶部搜索栏 -->
    <a-form-model class="search-form">
      <div class="time-pickers">
        <a-form-model-item label="Activity reference time">
          <custom-date-picker show-time v-model="queryParam.activityReferenceTime" />
        </a-form-model-item>
        <a-form-model-item label="Concentration reference time">
          <custom-date-picker show-time v-model="queryParam.concentrationReferenceTime" />
        </a-form-model-item>
      </div>
      <a-space class="operators" :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>
    </a-form-model>
    <!-- 顶部搜索栏结束 -->
    <!-- 主体部分 -->
    <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" :columns="columns"></custom-table>
      </div>
    </div>
    <custom-table v-else :list="list" :columns="columns"></custom-table>
  </custom-modal>
</template>

<script>
const columns = [
  {
    title: 'Nuclide',
    dataIndex: 'nuclide'
  },
  {
    title: 'HalfLife',
    dataIndex: 'halfLife'
  },
  {
    title: 'Energy (keV)',
    dataIndex: 'energy'
  },
  {
    title: 'Yield (%)',
    dataIndex: 'yield'
  },
  {
    title: 'Efficiency',
    dataIndex: 'efficiency'
  },
  {
    title: 'Activity (Bq)',
    dataIndex: 'activity'
  },
  {
    title: 'Act Err (%)',
    dataIndex: 'actErr'
  },
  {
    title: 'MDA (Bq)',
    dataIndex: 'mda'
  },
  {
    title: 'Conc (uBq/m3)',
    dataIndex: 'conc'
  },
  {
    title: 'MDC (uBq/m3)',
    dataIndex: 'mdc'
  }
]
export default {
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    return {
      queryParam: {
        activityReferenceTime: undefined,
        concentrationReferenceTime: undefined
      },
      compareVisible: false,

      list: [
        {
          nuclide: 'nuclide',
          halfLife: 'halfLife',
          energy: 'energy',
          yield: 'yield',
          efficiency: 'efficiency',
          activity: 'activity',
          actErr: 'actErr',
          mda: 'mda',
          conc: 'conc',
          mdc: 'mdc'
        }
      ],

      compareList: [
        {
          title: 'ARMD',
          list: [
            {
              nuclide: 'nuclide',
              halfLife: 'halfLife',
              energy: 'energy',
              yield: 'yield',
              efficiency: 'efficiency',
              activity: 'activity',
              actErr: 'actErr',
              mda: 'mda',
              conc: 'conc',
              mdc: 'mdc'
            }
          ]
        },
        {
          title: 'IDC',
          list: [
            {
              nuclide: 'nuclide',
              halfLife: 'halfLife',
              energy: 'energy',
              yield: 'yield',
              efficiency: 'efficiency',
              activity: 'activity',
              actErr: 'actErr',
              mda: 'mda',
              conc: 'conc',
              mdc: 'mdc'
            }
          ]
        }
      ]
    }
  },
  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>
.nuclide-activity-and-mdc-modal {
  ::v-deep {
    .ant-modal-body {
      padding: 16px;
    }
  }
}

.search-form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  .time-pickers {
    display: flex;
    .ant-form-item {
      margin-bottom: 0;

      &:nth-child(2) {
        margin-left: 20px;
      }

      ::v-deep {
        .ant-form-item {
          &-label {
            > label {
              color: #ade6ee;
            }
          }

          &-control-wrapper {
            width: 210px;
          }
        }
      }
    }
  }
  .operators {
    .ant-btn {
      display: flex;
      align-items: center;

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

.comparison-list {
  padding-top: 15px;
  border-top: 1px solid rgba(13, 109, 118, 0.5);

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

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