github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Statistic: Update code and doc (#22276) 

* Modifying Spaces

Modifying Spaces

* statistic：Updated countdown feature to localize lodash

* statistic: optimize

* Statistic：优化代码逻辑 修改中文文档

* statistic：Optimize the code logic and adjust the style
pull/22296/merge
yang 2023-02-07 15:21:13 +08:00 committed by GitHub
parent b96d6e0372
commit c56f1d6c8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
examples/docs/zh-CN/statistic.md
View File

@ -81,8 +81,6 @@ export default {
### 倒计时 ### 倒计时
:::warning :::warning
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束 如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
::: :::
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能 :::demo 通过 `value` 提供未来的时间，将开启倒计时功能
@ -99,7 +97,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
</el-statistic> </el-statistic>
</div> </div>
<div style="width: 100%; display: inline-block; margin-top: 50px; "> <div style="width: 100%; display: inline-block; margin-top: 50px; ">
<el-statistic @finish="hilarity" :value="deadline3" time-indices title="一寸光阴一寸金"> <el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
<template slot="suffix"> <template slot="suffix">
<el-button type="primary " size="small" @click="add">add 10 second</el-button> <el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template> </template>
@ -136,7 +134,8 @@ export default {
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2, deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8, deadline2: Date.now() + 1000 * 60 * 60 * 8,
deadline3: Date.now() + 1000 * 60 *30, deadline3: Date.now() + 1000 * 60 *30,
deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) , deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
stop:true
}; };
}, },
methods: { methods: {
@ -144,7 +143,8 @@ export default {
this.$notify({ this.$notify({
title: '提示', title: '提示',
message: '时间已到，你可知寸金难买寸光阴？', message: '时间已到，你可知寸金难买寸光阴？',
duration: 0 duration: 0,
}); });
}, },
clickFn(){ clickFn(){
@ -174,16 +174,16 @@ export default {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| value | 数值内容 | string \| number | - | - | | value | 数值内容 | string \| number |— | — |
| decimal-separator | 设置小数点 | string | - | . | | decimal-separator | 设置小数点 | string | — | . |
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - | | formatter | 自定义数值展示| v-slot \|({value}) => VNode |— | — |
| group-separator | 设置千分位标识符 | string | - | , | | group-separator | 设置千分位标识符 | string | — | , |
| precision | 数值精度 | number | - | 0 | | precision | 数值精度 | number | — | 0 |
| prefix | 设置数值的前缀 | string \| v-slot | - | - | | prefix | 设置数值的前缀 | string \| v-slot | — | — |
| suffix |设置数值的后缀 | string \| v-slot | - | - | | suffix |设置数值的后缀 | string \| v-slot | — | — |
| title | 数值的标题 | string \| v-slot | - | - | | title | 数值的标题 | string \| v-slot | — | — |
| value-style | 设置数值的样式 | style | - | - | | value-style | 设置数值的样式 | object | — | — |
| rate | 设置倍率 | number | - | 1000 | | rate | 设置倍率 | number | — | 1000 |
### Statistic Slots ### Statistic Slots

39
packages/statistic/src/main.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="el-statistic"> <div class="el-statistic">
<div class="head"> <div class="head" v-if="title">
<slot name="title"> <slot name="title">
<span class="title"> <span class="title">
{{ title }} {{ title }}
@ -8,15 +8,15 @@
</slot> </slot>
</div> </div>
<div class="con"> <div class="con">
<span class="prefix"> <span class="prefix" v-if="!prefix">
<slot name="prefix"> <slot name="prefix" >
{{ prefix }} {{ prefix }}
</slot> </slot>
</span> </span>
<span class="number" :style="valueStyle"> <span class="number" :style="valueStyle">
<slot name="formatter"> {{ disposeValue }}</slot> <slot name="formatter"> {{ disposeValue }}</slot>
</span> </span>
<span class="suffix"> <span class="suffix" v-if="!suffix">
<slot name="suffix"> <slot name="suffix">
{{ suffix }} {{ suffix }}
</slot> </slot>
@ -26,7 +26,7 @@
</template> </template>
<script> <script>
import { isNumber, ceil, fill, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash'; import { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
export default { export default {
name: 'ElStatistic', name: 'ElStatistic',
data() { data() {
@ -47,7 +47,7 @@ export default {
}, },
precision: { precision: {
type: Number, type: Number,
default: 0 default: null
}, },
value: { value: {
type: [String, Number], type: [String, Number],
@ -97,36 +97,35 @@ export default {
let { timeIndices, countDown, dispose} = this; let { timeIndices, countDown, dispose} = this;
timeIndices ? countDown() : dispose(); timeIndices ? countDown() : dispose();
}, },
magnification(num, _mulriple = 1000, _groupSeparator = ',') { magnification(num, mulriple = 1000, groupSeparator = ',') {
// magnification factor // magnification factor
const level = String(_mulriple).length - 1; const level = String(mulriple).length - 1;
const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g'); const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
const result = String(num) const result = String(num)
.replace(reg, '$&,') .replace(reg, '$&,')
.split(',') .split(',')
.join(_groupSeparator); .join(groupSeparator);
return result; return result;
}, },
dispose() { dispose() {
let { value, precision, groupSeparator, rate } = this; let { value, precision, groupSeparator, rate } = this;
if (!isNumber(value)) return false; if (!isNumber(value)) return false;
let [integer, decimal] = String(value).split('.');
if (precision) { if (precision) {
value = ceil(value, precision); decimal = `${decimal || ''}${(1)
.toFixed(precision)
.replace('.', '')
.slice(1)}`;
decimal = decimal.slice(0, precision);
} }
let integer = String(value).split('.')[0];
let decimals =
String(value).split('.')[1] ||
(precision ? fill(Array(precision), 0).join('') : '');
let result = 0; let result = 0;
// 1000 multiplying power // 1000 multiplying power
if (groupSeparator) { if (groupSeparator) {
integer = this.magnification(integer, rate, groupSeparator); integer = this.magnification(integer, rate, groupSeparator);
} }
result = [integer, decimals].join( result = [integer, decimal].join(
decimals ? this.decimalSeparator : '' decimal ? this.decimalSeparator : ''
); );
this.disposeValue = result; this.disposeValue = result;
return result; return result;
@ -140,7 +139,6 @@ export default {
clearInterval(this.timeTask); clearInterval(this.timeTask);
this.timeTask = null; this.timeTask = null;
} }
} else { } else {
this.branch(); this.branch();
} }
@ -195,8 +193,7 @@ export default {
if (timeTask) return; if (timeTask) return;
let than = this; let than = this;
this.timeTask = setInterval(()=> { this.timeTask = setInterval(()=> {
let {value} = than; let diffTiem = diffDate(than.value, Date.now());
let diffTiem = diffDate(value, Date.now());
than.disposeValue = formatTimeStr(diffTiem); than.disposeValue = formatTimeStr(diffTiem);
stopTime(diffTiem); stopTime(diffTiem);
}, REFRESH_INTERVAL); }, REFRESH_INTERVAL);

59
packages/theme-chalk/src/statistic.scss
View File

@ -2,36 +2,37 @@
@import "common/var"; @import "common/var";
@include b(statistic) { @include b(statistic) {
width: 100%; $statistic-justify: center;
box-sizing: border-box; $statistic-align: center;
margin: 0; width: 100%;
padding: 0; box-sizing: border-box;
color: $--color-black; margin: 0;
font-size: 14px; padding: 0;
font-variant: tabular-nums; color: $--color-black;
line-height: 1.5715; font-variant: tabular-nums;
list-style: none; list-style: none;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
text-align: center; text-align: center;
.head { .head {
margin-bottom: 4px; margin-bottom: 4px;
color: #00000073; color: $--color-text-regular;
font-size: 14px; font-size: $--font-size-small;
}
.con {
font-family: Sans-serif;
display: flex;
justify-content: $statistic-justify;
align-items: $statistic-align;
color: $--color-text-primary;
.number {
font-size: $--font-size-extra-large;
padding: 0 4px;
} }
span {
.con{ display: inline-block;
font-family: Sans-serif; margin: 0;
display: flex; line-height: 100%;
justify-content :center;
align-items: center ;
.number{
font-size: 20px;
padding: 0 4px;
}
span{ display: inline-block;
margin: 0;
line-height: 100%;
}
} }
}
} }