From c56f1d6c8c31a160ff4aec2c0088116dc246249c Mon Sep 17 00:00:00 2001
From: yang <30883395+webvs2@users.noreply.github.com>
Date: Tue, 7 Feb 2023 15:21:13 +0800
Subject: [PATCH] Statistic: Update code and doc (#22276)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Modifying Spaces

Modifying Spaces

* statistic：Updated countdown feature to localize lodash

* statistic: optimize

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

* statistic：Optimize the code logic and adjust the style
---
 examples/docs/zh-CN/statistic.md        | 30 ++++++------
 packages/statistic/src/main.vue         | 39 ++++++++--------
 packages/theme-chalk/src/statistic.scss | 61 +++++++++++++------------
 3 files changed, 64 insertions(+), 66 deletions(-)

diff --git a/examples/docs/zh-CN/statistic.md b/examples/docs/zh-CN/statistic.md
index 62402f986..308e3d3f8 100644
--- a/examples/docs/zh-CN/statistic.md
+++ b/examples/docs/zh-CN/statistic.md
@@ -81,8 +81,6 @@ export default {
 
 ### 倒计时
 :::warning
-suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。
-
 如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
 :::
 :::demo 通过 `value` 提供未来的时间，将开启倒计时功能
@@ -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>
@@ -136,7 +134,8 @@ 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: {
@@ -144,7 +143,8 @@ export default {
       this.$notify({
           title: '提示',
           message: '时间已到，你可知寸金难买寸光阴？',
-          duration: 0
+          duration: 0,
+
         });
     },
         clickFn(){
@@ -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
diff --git a/packages/statistic/src/main.vue b/packages/statistic/src/main.vue
index 1d7a6130c..2bf868f95 100644
--- a/packages/statistic/src/main.vue
+++ b/packages/statistic/src/main.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="el-statistic">
-    <div class="head">
+    <div class="head" v-if="title">
       <slot name="title">
         <span class="title">
           {{ title }}
@@ -8,15 +8,15 @@
       </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>
@@ -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() {
@@ -47,7 +47,7 @@ export default {
     },
     precision: {
       type: Number,
-      default: 0
+      default: null
     },
     value: {
       type: [String, Number],
@@ -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;
@@ -140,7 +139,6 @@ export default {
           clearInterval(this.timeTask);
           this.timeTask = null;
         }
-
       } else {
         this.branch();
       }
@@ -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);
diff --git a/packages/theme-chalk/src/statistic.scss b/packages/theme-chalk/src/statistic.scss
index 5c9364ec9..16a3c65f6 100644
--- a/packages/theme-chalk/src/statistic.scss
+++ b/packages/theme-chalk/src/statistic.scss
@@ -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%;
     }
-}
\ No newline at end of file
+  }
+}