<!--
|
* @Descripttion: 统计数值组件
|
* @version: 1.1
|
* @Author: sakuya
|
* @Date: 2021年6月23日13:11:32
|
* @LastEditors: sakuya
|
* @LastEditTime: 2022年5月14日19:55:09
|
-->
|
|
<template>
|
<div class="sc-statistic">
|
<div class="sc-statistic-title">
|
{{ title }}
|
<el-tooltip v-if="tips" effect="light">
|
<template #content>
|
<div style="width: 200px;line-height: 2;">
|
{{ tips }}
|
</div>
|
</template>
|
<el-icon class="sc-statistic-tips"><el-icon-question-filled/></el-icon>
|
</el-tooltip>
|
</div>
|
<div class="sc-statistic-content">
|
<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
|
<span class="sc-statistic-content-value">{{ cmtValue }}</span>
|
<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
|
</div>
|
<div v-if="description || $slots.default" class="sc-statistic-description">
|
<slot>
|
{{ description }}
|
</slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
title: { type: String, required: true, default: "" },
|
value: { type: String, required: true, default: "" },
|
prefix: { type: String, default: "" },
|
suffix: { type: String, default: "" },
|
description: { type: String, default: "" },
|
tips: { type: String, default: "" },
|
groupSeparator: { type: Boolean, default: false }
|
},
|
data() {
|
return {
|
|
}
|
},
|
computed: {
|
cmtValue(){
|
return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
|
.sc-statistic-tips {margin-left: 5px;}
|
.sc-statistic-content {font-size: 20px;color: #333;}
|
.sc-statistic-content-value {font-weight: bold;}
|
.sc-statistic-content-prefix {margin-right: 5px;}
|
.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
|
.sc-statistic-description {margin-top: 10px;color: #999;}
|
|
.dark .sc-statistic-content {color: #d0d0d0;}
|
</style>
|
