<template>
|
<BaseCard>
|
<el-row> 巡查汇总 </el-row>
|
<el-segmented v-model="value" :options="options" />
|
<div><el-text tag="i"> 评估 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="总计" :value="10"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="高风险" :value="2" :value-style="styleRed"> </el-statistic>
|
<el-statistic title="中风险" :value="6" :value-style="styleYellow"> </el-statistic>
|
<el-statistic title="低风险" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
<div><el-text tag="i"> 复核 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="需复核" :value="2"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="已完成" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
<div><el-text tag="i"> 问题 </el-text></div>
|
<el-row justify="space-evenly">
|
<div>
|
<el-statistic title="总计" :value="10"> </el-statistic>
|
<div class="statistic-footer">
|
<div class="footer-item">
|
<span>对比昨日</span>
|
<span class="green">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
<el-statistic title="待审核" :value="2" :value-style="styleRed"> </el-statistic>
|
<el-statistic title="已审核" :value="6" :value-style="styleYellow"> </el-statistic>
|
<el-statistic title="待整改" :value="2" :value-style="styleGreen"> </el-statistic>
|
<el-statistic title="已整改" :value="2" :value-style="styleGreen"> </el-statistic>
|
<el-statistic title="待确认" :value="2" :value-style="styleGreen"> </el-statistic>
|
</el-row>
|
</BaseCard>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
height: String
|
},
|
emits: ['update:height'],
|
data() {
|
return {
|
value: '今日汇总',
|
options: ['今日汇总', '周度汇总', '月度汇总', '季度汇总', '年度汇总'],
|
styleRed: 'color:var(--el-color-danger);',
|
styleYellow: 'color:var(--el-color-warning);',
|
styleGreen: 'color:var(--el-color-success);'
|
}
|
},
|
mounted() {}
|
}
|
</script>
|
|
<style scoped>
|
.el-segmented {
|
--el-segmented-item-selected-color: var(--el-text-color-primary);
|
--el-segmented-item-selected-bg-color: #ffd100;
|
--el-border-radius-base: 16px;
|
}
|
|
.el-statistic {
|
--el-statistic-content-font-size: var(--el-font-size-base);
|
/* background-color: aliceblue; */
|
}
|
|
.statistic-footer {
|
background-color: #ffd100;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
font-size: 12px;
|
color: var(--el-text-color-regular);
|
/* margin-top: 16px; */
|
}
|
|
.statistic-footer .footer-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.statistic-footer .footer-item span:last-child {
|
display: inline-flex;
|
align-items: center;
|
margin-left: 4px;
|
}
|
|
.green {
|
color: var(--el-color-success);
|
}
|
.red {
|
color: var(--el-color-error);
|
}
|
</style>
|
