From 2e14531745929390aeef67f51ccc23aebd72c613 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 19 Jan 2024 18:06:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                    |  1 +
 locales/zh-CN.yaml                 |  1 +
 src/router/modules/components.ts   |  8 +++
 src/views/components/statistic.vue | 84 ++++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 src/views/components/statistic.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 82686ba92..29f983d7a 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -60,6 +60,7 @@ menus:
   hsDatePicker: Date Picker
   hsDateTimePicker: DateTimePicker
   hsTimePicker: TimePicker
+  hsStatistic: Statistic
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index f1081ba04..5c7f396c9 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -60,6 +60,7 @@ menus:
   hsDatePicker: 日期选择器
   hsDateTimePicker: 日期时间选择器
   hsTimePicker: 时间选择器
+  hsStatistic: 统计组件
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 142e2df73..978a933c8 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -107,6 +107,14 @@ export default {
         title: $t("menus.hsbutton")
       }
     },
+    {
+      path: "/components/statistic",
+      name: "Statistic",
+      component: () => import("@/views/components/statistic.vue"),
+      meta: {
+        title: $t("menus.hsStatistic")
+      }
+    },
     {
       path: "/components/cascader",
       name: "Cascader",
diff --git a/src/views/components/statistic.vue b/src/views/components/statistic.vue
new file mode 100644
index 000000000..478ba59c0
--- /dev/null
+++ b/src/views/components/statistic.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import ReCol from "@/components/ReCol";
+import { useTransition } from "@vueuse/core";
+
+defineOptions({
+  name: "Statistic"
+});
+
+const value = ref(Date.now() + 1000 * 60 * 60 * 7);
+const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
+const value2 = ref(dayjs().add(1, "month").startOf("month"));
+
+const source = ref(0);
+const outputValue = useTransition(source, {
+  duration: 1500
+});
+source.value = 36000;
+
+function reset() {
+  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
+}
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/statistic.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            统计组件
+          </el-link>
+        </div>
+      </template>
+
+      <el-row :gutter="24">
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-statistic title="需求人数" :value="outputValue" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown title="距离答疑结束还剩" :value="value" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown
+            title="VIP到期时间还剩"
+            format="HH:mm:ss"
+            :value="value1"
+          />
+          <el-button class="mt-2" type="primary" @click="reset">
+            Reset
+          </el-button>
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown format="DD 天 HH 时 mm 分 ss 秒" :value="value2">
+            <template #title>
+              <div style="display: inline-flex; align-items: center">
+                <IconifyIconOnline icon="ep:calendar" class="mr-2" />
+                距离下个月还剩
+              </div>
+            </template>
+          </el-countdown>
+          <div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
+        </re-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-col {
+  text-align: center;
+}
+</style>