108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
||
<div class="inputs">
|
||
<h2 class="inputs-title">巡检次数：{{ state.counts }}次</h2>
|
||
<el-row>
|
||
<el-col v-for="item in state.list" :key="item.label" :span="12">
|
||
<div class="inputs-item flex-column">
|
||
<div class="inputs-item-value">{{ item.value }}%</div>
|
||
<div class="inputs-item-label">{{ item.label }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { reactive, watch } from 'vue';
|
||
import { isEmpty } from '@/utils';
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
});
|
||
|
||
const state = reactive({
|
||
counts: 0,
|
||
list: [
|
||
{
|
||
label: '检测合格率',
|
||
value: '98.99%',
|
||
},
|
||
{
|
||
label: '检测覆盖率',
|
||
value: '25.46%',
|
||
},
|
||
],
|
||
});
|
||
|
||
watch(
|
||
() => props.data,
|
||
(val) => {
|
||
if (!isEmpty(val)) {
|
||
state.list[0].value = val[0].JCHGL;
|
||
state.list[1].value = val[0].JCFGL;
|
||
state.counts = val[0].JCYPPC;
|
||
}
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true,
|
||
}
|
||
);
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.inputs {
|
||
&-title {
|
||
width: 240px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 24px auto 0;
|
||
background-image: url('@/assets/images/inputs/bg_title.png');
|
||
background-position: center bottom;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
text-align: center;
|
||
text-shadow:
|
||
0 0 10px #01eeff,
|
||
0 0 20px #01eeff,
|
||
0 0 30px #01eeff,
|
||
0 0 40px #01eeff;
|
||
}
|
||
&-item {
|
||
&-label {
|
||
width: 120px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
margin: 0 auto 0;
|
||
background: url('@/assets/images/inputs/bg_label.png') center center no-repeat;
|
||
background-size: 100%;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
text-align: center;
|
||
text-shadow:
|
||
0 0 10px #01eeff,
|
||
0 0 20px #01eeff,
|
||
0 0 30px #01eeff,
|
||
0 0 40px #01eeff;
|
||
}
|
||
|
||
&-value {
|
||
width: 160px;
|
||
height: 160px;
|
||
line-height: 180px;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
background-image: url('@/assets/images/inputs/bg_value.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|