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

<template>
  <custom-modal v-model="visible" title="Comparison" :width="800" :footer="null" class="comparison-modal">
    <div 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-modal>
</template>

<script>
const columns = [
  {
    title: 'Isotope',
    dataIndex: 'isotope'
  },
  {
    title: 'Concentration',
    dataIndex: 'concentration'
  },
  {
    title: 'Uncertainty',
    dataIndex: 'uncertainty'
  },
  {
    title: 'MDC[mBq / m3 ]',
    dataIndex: 'mdc'
  }
]

export default {
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    return {
      compareList: [
        {
          title: 'ARMD',
          list: [
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            },
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            },
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            }
          ]
        },
        {
          title: 'IDC',
          list: [
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            },
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            },
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            },
            {
              isotope: 'isotope',
              concentration: 'concentration',
              uncertainty: 'uncertainty',
              mdc: 'mdc'
            }
          ]
        }
      ]
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

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

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

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