AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/SubOperators/DetailedInfomation.vue

<template>
  <div class="detailed-infomation">
    <a-form :labelCol="{ style: { width: 120 } }">
      <a-row v-for="(row, index) in items" :key="index">
        <a-col v-for="(item, i) in row" :key="i" :span="item.span || 4">
          <a-form-item :label="item.label">
            {{ data[item.name] }}
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
const items = [
  [
    {
      label: 'Sample Id',
      name: 'sampleId'
    },
    {
      label: 'Data Type',
      name: 'dataType'
    },
    {
      label: 'Collection Start',
      name: 'collectionStart',
      span: 6
    },
    {
      label: 'Acquisition Start',
      name: 'acquisitionStart',
      span: 6
    },
    {
      label: 'Auto.Cat',
      name: 'autoCat'
    }
  ],
  [
    {
      label: 'Station Code',
      name: 'stationCode'
    },
    {
      label: 'Spectral Qualifier',
      name: 'spectralQualifier'
    },
    {
      label: 'Sampling Time',
      name: 'samplingTime',
      span: 6
    },
    {
      label: 'Acq.Real',
      name: 'acqReal',
      span: 6
    },
    {
      label: 'Category',
      name: 'category'
    }
  ],
  [
    {
      label: 'Detector Code',
      name: 'detectorCode'
    },
    {
      label: 'SRID',
      name: 'srid'
    },
    {
      label: 'Quantity',
      name: 'quantity',
      span: 6
    },
    {
      label: 'Acq.Live',
      name: 'acqLive',
      span: 6
    }
  ],
  [
    {
      label: 'System Type',
      name: 'systemType'
    },
    {
      label: 'Sample Status',
      name: 'sampleStatus'
    },
    {
      label: 'Flow Rate',
      name: 'flowRate',
      span: 6
    },
    {
      label: 'Decay Time',
      name: 'decayTime',
      span: 6
    }
  ]
]
export default {
  props: {
    data: {
      type: Object,
      default: () => ({
        sampleId: 1,
        dataType: 'SAMPLEPHD'
      })
    }
  },
  created() {
    this.items = items
  }
}
</script>

<style lang="less" scoped>
.detailed-infomation {
  width: 1200px;

  .ant-form-item {
    margin-bottom: 0;

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

      .ant-form-item-children {
        color: #0cecca;
      }
    }
  }
}
</style>