Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

statistic:Optimize each item #22276

Merged
merged 5 commits into from
Feb 7, 2023
Merged

statistic:Optimize each item #22276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c8ae64
Modifying Spaces
webvs2 Nov 15, 2022
ab10183
statistic：Updated countdown feature to localize lodash
webvs2 Nov 17, 2022
f050077
statistic: optimize
webvs2 Dec 6, 2022
d9322b6
Statistic：优化代码逻辑 修改中文文档
webvs2 Dec 6, 2022
e512f8b
statistic：Optimize the code logic and adjust the style
webvs2 Dec 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions examples/docs/zh-CN/statistic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,6 @@ export default {

### 倒计时
:::warning
suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。

如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
:::
:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
Expand All @@ -99,7 +97,7 @@ suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为valu
</el-statistic>
</div>
<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">
<el-button type="primary " size="small" @click="add">add 10 second</el-button>
</template>
Expand Down Expand Up @@ -136,15 +134,17 @@ export default {
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
deadline2: Date.now() + 1000 * 60 * 60 * 8,
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: {
hilarity() {
this.$notify({
title: '提示',
message: '时间已到，你可知寸金难买寸光阴？',
duration: 0
duration: 0,

});
},
clickFn(){
Expand Down Expand Up @@ -174,16 +174,16 @@ export default {

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 数值内容 | string \| number | - | - |
| decimal-separator | 设置小数点 | string | - | . |
| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - |
| group-separator | 设置千分位标识符 | string | - | , |
| precision | 数值精度 | number | - | 0 |
| prefix | 设置数值的前缀 | string \| v-slot | - | - |
| suffix |设置数值的后缀 | string \| v-slot | - | - |
| title | 数值的标题 | string \| v-slot | - | - |
| value-style | 设置数值的样式 | style | - | - |
| rate | 设置倍率 | number | - | 1000 |
| value | 数值内容 | string \| number |— | — |
| decimal-separator | 设置小数点 | string | — | . |
| formatter | 自定义数值展示| v-slot \|({value}) => VNode |— | — |
| group-separator | 设置千分位标识符 | string | — | , |
| precision | 数值精度 | number | — | 0 |
| prefix | 设置数值的前缀 | string \| v-slot | — | — |
| suffix |设置数值的后缀 | string \| v-slot | — | — |
| title | 数值的标题 | string \| v-slot | — | — |
| value-style | 设置数值的样式 | object | — | — |
| rate | 设置倍率 | number | — | 1000 |


### Statistic Slots
Expand Down
39 changes: 18 additions & 21 deletions packages/statistic/src/main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<template>
<div class="el-statistic">
<div class="head">
<div class="head" v-if="title">
<slot name="title">
<span class="title">
{{ title }}
</span>
</slot>
</div>
<div class="con">
<span class="prefix">
<slot name="prefix">
<span class="prefix" v-if="!prefix">
<slot name="prefix" >
{{ prefix }}
</slot>
</span>
<span class="number" :style="valueStyle">
<slot name="formatter"> {{ disposeValue }}</slot>
</span>
<span class="suffix">
<span class="suffix" v-if="!suffix">
<slot name="suffix">
{{ suffix }}
</slot>
Expand All @@ -26,7 +26,7 @@
</template>

<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 {
name: 'ElStatistic',
data() {
Expand All @@ -47,7 +47,7 @@ export default {
},
precision: {
type: Number,
default: 0
default: null
},
value: {
type: [String, Number],
Expand Down Expand Up @@ -97,36 +97,35 @@ export default {
let { timeIndices, countDown, dispose} = this;
timeIndices ? countDown() : dispose();
},
magnification(num, _mulriple = 1000, _groupSeparator = ',') {
magnification(num, mulriple = 1000, groupSeparator = ',') {
// 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 result = String(num)
.replace(reg, '$&,')
.split(',')
.join(_groupSeparator);
.join(groupSeparator);
return result;
},
dispose() {
let { value, precision, groupSeparator, rate } = this;

if (!isNumber(value)) return false;
let [integer, decimal] = String(value).split('.');
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;
// 1000 multiplying power
if (groupSeparator) {
integer = this.magnification(integer, rate, groupSeparator);
}

result = [integer, decimals].join(
decimals ? this.decimalSeparator : ''
result = [integer, decimal].join(
decimal ? this.decimalSeparator : ''
);
this.disposeValue = result;
return result;
Expand All @@ -140,7 +139,6 @@ export default {
clearInterval(this.timeTask);
this.timeTask = null;
}

} else {
this.branch();
}
Expand Down Expand Up @@ -195,8 +193,7 @@ export default {
if (timeTask) return;
let than = this;
this.timeTask = setInterval(()=> {
let {value} = than;
let diffTiem = diffDate(value, Date.now());
let diffTiem = diffDate(than.value, Date.now());
than.disposeValue = formatTimeStr(diffTiem);
stopTime(diffTiem);
}, REFRESH_INTERVAL);
Expand Down
61 changes: 31 additions & 30 deletions packages/theme-chalk/src/statistic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,37 @@
@import "common/var";

@include b(statistic) {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
color: $--color-black;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
text-align: center;
.head {
margin-bottom: 4px;
color: #00000073;
font-size: 14px;
$statistic-justify: center;
$statistic-align: center;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
color: $--color-black;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: "tnum";
text-align: center;
.head {
margin-bottom: 4px;
color: $--color-text-regular;
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;
}

.con{
font-family: Sans-serif;
display: flex;
justify-content :center;
align-items: center ;
.number{
font-size: 20px;
padding: 0 4px;
}
span{ display: inline-block;
margin: 0;
line-height: 100%;
}
span {
display: inline-block;
margin: 0;
line-height: 100%;
}
}
}
}