121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<custom-modal v-model="visible" :width="750" title="Sample Infomation">
|
||
|
|
<div class="sample-infomation">
|
||
|
|
<a-form-model :labelCol="{ style: { width: '150px', textAlign: 'left' } }">
|
||
|
|
<a-row>
|
||
|
|
<a-col :span="12" v-for="(item, index) in columns" :key="index">
|
||
|
|
<a-form-model-item :label="item.title">
|
||
|
|
{{ data[item.key] }}
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</a-form-model>
|
||
|
|
</div>
|
||
|
|
<div slot="custom-footer" style="text-align: center;">
|
||
|
|
<a-space :size="20">
|
||
|
|
<a-button type="primary">Export to Excel</a-button>
|
||
|
|
<a-button @click="visible = false">Close</a-button>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</custom-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ModalMixin from '@/mixins/ModalMixin'
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: 'Station Id',
|
||
|
|
key: 'stationId'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Detector Id',
|
||
|
|
key: 'detectorId'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sample Id',
|
||
|
|
key: 'sampleId'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sample Geometry',
|
||
|
|
key: 'sampleGeometry'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sample Quantity',
|
||
|
|
key: 'sampleQuantity'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sample Type',
|
||
|
|
key: 'sampleType'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Collection Start',
|
||
|
|
key: 'collectionStart'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Sampling Time',
|
||
|
|
key: 'samplingTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Collection Stop',
|
||
|
|
key: 'collectionStop'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Decay Time',
|
||
|
|
key: 'decayTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Acquisition Start',
|
||
|
|
key: 'acquisitionStart'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Acquisition Time',
|
||
|
|
key: 'acquisitionTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Acquisition Stop',
|
||
|
|
key: 'acquisitionStop'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Avg Flow Rate',
|
||
|
|
key: 'avgFlowRate'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [ModalMixin],
|
||
|
|
data() {
|
||
|
|
this.columns = columns
|
||
|
|
return {
|
||
|
|
data: {
|
||
|
|
stationId: 'stationId',
|
||
|
|
detectorId: 'detectorId',
|
||
|
|
sampleId: 'sampleId',
|
||
|
|
sampleGeometry: 'sampleGeometry',
|
||
|
|
sampleQuantity: 'sampleQuantity',
|
||
|
|
sampleType: 'sampleType',
|
||
|
|
collectionStart: 'collectionStart',
|
||
|
|
samplingTime: 'samplingTime',
|
||
|
|
collectionStop: 'collectionStop',
|
||
|
|
decayTime: 'decayTime',
|
||
|
|
acquisitionStart: 'acquisitionStart',
|
||
|
|
acquisitionTime: 'acquisitionTime',
|
||
|
|
acquisitionStop: 'acquisitionStop',
|
||
|
|
avgFlowRate: 'avgFlowRate'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.sample-infomation {
|
||
|
|
background-color: #143644;
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
.ant-form-item {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|