add 统计数值组件
This commit is contained in:
sc
parent
cd95d6867c
commit
d315607a06
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!--
|
||||||
|
* @Descripttion: 统计数值组件
|
||||||
|
* @version: 1.0
|
||||||
|
* @Author: sakuya
|
||||||
|
* @Date: 2021年6月23日13:11:32
|
||||||
|
* @LastEditors:
|
||||||
|
* @LastEditTime:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<i class="el-icon-question sc-statistic-tips"></i>
|
||||||
|
</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;}
|
||||||
|
.sc-statistic-tips {margin-left: 5px;}
|
||||||
|
.sc-statistic-content {font-size: 21px;color: #333;}
|
||||||
|
.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;}
|
||||||
|
</style>
|
||||||
|
|
@ -9,3 +9,8 @@
|
||||||
.user-info-main li i {margin-right: 10px;}
|
.user-info-main li i {margin-right: 10px;}
|
||||||
.user-info-bottom {border-top: 1px solid #e6e6e6;}
|
.user-info-bottom {border-top: 1px solid #e6e6e6;}
|
||||||
.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
|
.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
|
||||||
|
|
||||||
|
/*static-table*/
|
||||||
|
.static-table {border-collapse: collapse;width: 100%;font-size: 14px;margin-bottom: 45px;line-height: 1.5em;}
|
||||||
|
.static-table th {text-align: left;white-space: nowrap;color: #909399;font-weight: 400;border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;}
|
||||||
|
.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ const tool = {
|
||||||
return fmt;
|
return fmt;
|
||||||
},
|
},
|
||||||
/* 千分符 */
|
/* 千分符 */
|
||||||
thousands(num){
|
groupSeparator(num){
|
||||||
num = num + '';
|
num = num + '';
|
||||||
if(!num.includes('.')){
|
if(!num.includes('.')){
|
||||||
num += '.'
|
num += '.'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
<!--
|
||||||
|
* @Descripttion: 统计数值组件演示
|
||||||
|
* @version: 1.0
|
||||||
|
* @Author: sakuya
|
||||||
|
* @Date: 2021年6月23日10:28:17
|
||||||
|
* @LastEditors:
|
||||||
|
* @LastEditTime:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-row :gutter="15">
|
||||||
|
<el-col :lg="4">
|
||||||
|
<sc-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></sc-statistic>
|
||||||
|
</el-col>
|
||||||
|
<el-col :lg="4">
|
||||||
|
<sc-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
|
||||||
|
比昨日<span class="up"><i class="el-icon-top"></i>+7.7%</span>
|
||||||
|
</sc-statistic>
|
||||||
|
</el-col>
|
||||||
|
<el-col :lg="4">
|
||||||
|
<sc-statistic title="留言" value="112893" suffix="条" groupSeparator>
|
||||||
|
比昨日<span class="down"><i class="el-icon-bottom"></i>-18.9%</span>
|
||||||
|
</sc-statistic>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<el-card shadow="never" style="margin-top: 15px;">
|
||||||
|
<h2 style="margin: 20px 0;">Attributes</h2>
|
||||||
|
<table class="static-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>参数</th>
|
||||||
|
<th>说明</th>
|
||||||
|
<th>类型</th>
|
||||||
|
<th>可选值</th>
|
||||||
|
<th>默认值</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>title</td>
|
||||||
|
<td>标题</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>value</td>
|
||||||
|
<td>数值</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prefix</td>
|
||||||
|
<td>数值的前缀</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>suffix</td>
|
||||||
|
<td>数值的后缀</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>description</td>
|
||||||
|
<td>描述</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>tips</td>
|
||||||
|
<td>显示在标题右侧的提示图标</td>
|
||||||
|
<td>String</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>groupSeparator</td>
|
||||||
|
<td>是否格式化千分符</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>false</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h2 style="margin: 20px 0;">Slots</h2>
|
||||||
|
<table class="static-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>说明</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>default</td>
|
||||||
|
<td>自定义描述内容</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scStatistic from '@/components/scStatistic';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'statistic',
|
||||||
|
components: {
|
||||||
|
scStatistic
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.up {color: #F56C6C;margin-left: 5px;}
|
||||||
|
.down {color: #67C23A;margin-left: 5px;}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue