85 lines
1.3 KiB
Vue
85 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="qc-flags">
|
||
|
|
<div class="qc-flags-item" v-for="conf in config" :key="conf.label">
|
||
|
|
<span :class="'dot' + (data[conf.name] ? ' green' : '')"></span>
|
||
|
|
{{ conf.label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 配置
|
||
|
|
const config = [
|
||
|
|
{
|
||
|
|
label: 'Collection Time',
|
||
|
|
name: 'collectionTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Acq Time',
|
||
|
|
name: 'acqTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Decay Time',
|
||
|
|
name: 'decayTime'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'SampVol',
|
||
|
|
name: 'sampVol'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Be7-FWHM',
|
||
|
|
name: 'be7Fwhm'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Ba140-MDC',
|
||
|
|
name: 'ba140Mdc'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Xe133-MDC',
|
||
|
|
name: 'xe133Mdc'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.config = config
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.qc-flags {
|
||
|
|
display: flex;
|
||
|
|
&-item {
|
||
|
|
background-color: #46738e;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 150px;
|
||
|
|
height: 30px;
|
||
|
|
|
||
|
|
&:not(:last-child) {
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
margin-left: 20px;
|
||
|
|
margin-right: 5px;
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, #979797 0, #777a7c 100%);
|
||
|
|
|
||
|
|
&.green {
|
||
|
|
background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|