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

<template>
  <div class="result-display-content">
    <a-table :data-source="source1" rowKey="id" :columns="columns" :pagination="false">
      <template slot="flag">
        <a-checkbox></a-checkbox>
      </template>
      <template slot="concentration" slot-scope="text, record">
        <div class="concentration color-box" :class="record.className">
          {{ text }}
        </div>
      </template>
      <template slot="uncertainty" slot-scope="text">
        <div class="uncertainty color-box">+/-{{ text }}</div>
      </template>
      <template slot="mdc" slot-scope="text">
        <div class="mdc color-box">
          {{ text }}
        </div>
      </template>
      <template slot="operator">
        <div class="search"></div>
      </template>
    </a-table>
    <a-table :data-source="source2" rowKey="id" :columns="columns" :pagination="false">
      <template slot="flag">
        <a-checkbox></a-checkbox>
      </template>
      <template slot="concentration" slot-scope="text, record">
        <div class="concentration color-box" :class="record.className">
          {{ text }}
        </div>
      </template>
      <template slot="uncertainty" slot-scope="text">
        <div class="uncertainty color-box">+/-{{ text }}</div>
      </template>
      <template slot="mdc" slot-scope="text">
        <div class="mdc color-box">
          {{ text }}
        </div>
      </template>
      <template slot="operator">
        <div class="search"></div>
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: 'Flag',
    align: 'center',
    scopedSlots: {
      customRender: 'flag'
    },
    width: 40
  },
  {
    title: 'Isotope',
    dataIndex: 'nuclideName',
    ellipsis: true,
    width: 76
  },
  {
    title: 'Concentration',
    dataIndex: 'conc',
    scopedSlots: {
      customRender: 'concentration'
    },
    width: 128
  },
  {
    title: 'Uncertainty',
    dataIndex: 'concErr',
    scopedSlots: {
      customRender: 'uncertainty'
    },
    width: 118
  },
  {
    title: 'MDC[mBq/m3]',
    dataIndex: 'mdc',
    scopedSlots: {
      customRender: 'mdc'
    },
    width: 133
  },
  {
    title: '',
    scopedSlots: {
      customRender: 'operator'
    },
    width: 34
  }
]
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    this.columns = columns
    return {
      source1: [],
      source2: []
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val && Array.isArray(val)) {
          val.forEach(item => {
            if (item.conc < 0) {
              item.className = 'error'
            } else if (item.conc > 0 && item.conc < item.mdc) {
              item.className = 'warning'
            } else {
              item.className = 'success'
            }
          })
          this.source1 = val.slice(0, 2)
          this.source2 = val.slice(2, 4)
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.result-display-content {
  display: flex;

  .ant-table-wrapper {
    flex: 1;

    &:first-child {
      margin-right: 20px;
    }

    ::v-deep {
      .ant-table {
        border: none;
      }

      .ant-table-thead > tr th {
        color: #00e9fe;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        background-color: transparent !important;

        &:first-child {
          padding-left: 0 !important;
        }
        &:last-child {
          padding-right: 0 !important;
        }
      }

      .ant-table-tbody {
        tr {
          background-color: transparent;

          td {
            &:first-child {
              padding-left: 0 !important;
            }

            &:last-child {
              padding-right: 0 !important;
            }
          }

          &:hover {
            td {
              background-color: transparent !important;
            }
          }
        }
      }
    }
  }

  .color-box {
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
  }

  .concentration {
    background-color: #ad8815;

    &.error {
      background-color: red;
    }

    &.warning {
      background-color: #ffcc30;
    }

    &.success {
      background-color: #0f0;
    }
  }

  .uncertainty {
    background-color: rgba(57, 184, 222, 0.4);
  }

  .mdc {
    background-color: rgba(57, 184, 222, 0.4);
  }
  .search {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: url(~@/assets/images/spectrum/search.png) center no-repeat;

    &:hover {
      background: url(~@/assets/images/spectrum/search-hover.png) center no-repeat;
    }
  }
}
</style>