Initial commit

2023-06-03 23:57:39 +08:00
commit 13bed2bafb
1017 changed files with 175796 additions and 0 deletions
@@ -0,0 +1,70 @@
+<template>
+  <a-card :bordered="false" title="在线人数">
+    <div class="monitor-online-num-card">
+      <div>{{ currentTime }}</div>
+      <div class="monitor-online-num-title">
+        <ele-count-up :end-val="onlineNum" />
+      </div>
+      <div class="monitor-online-num-text">在线总人数</div>
+      <a-badge status="processing" :text="updateTimeText" />
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onBeforeUnmount } from 'vue';
+  import { toDateString } from 'ele-admin-pro/es';
+  // 在线人数更新定时器
+  let onlineNumTimer: number | null = null;
+
+  // 在线总人数倒计时
+  const updateTime = ref(10);
+
+  // 当前时间
+  const currentTime = ref(toDateString(new Date(), 'HH:mm:ss'));
+
+  // 在线人数
+  const onlineNum = ref(228);
+
+  // 在线人数倒计时文字
+  const updateTimeText = computed(() => updateTime.value + ' 秒后更新');
+
+  /* 在线人数更新倒计时 */
+  const startUpdateOnlineNum = () => {
+    onlineNumTimer = window.setInterval(() => {
+      currentTime.value = toDateString(new Date(), 'HH:mm:ss');
+      if (updateTime.value === 1) {
+        updateTime.value = 10;
+        onlineNum.value = 100 + Math.round(Math.random() * 900);
+      } else {
+        updateTime.value--;
+      }
+    }, 1000);
+  };
+
+  onBeforeUnmount(() => {
+    // 销毁定时器
+    if (onlineNumTimer) {
+      clearInterval(onlineNumTimer);
+      onlineNumTimer = null;
+    }
+  });
+
+  startUpdateOnlineNum();
+</script>
+
+<style lang="less" scoped>
+  .monitor-online-num-card {
+    text-align: center;
+  }
+
+  .monitor-online-num-title {
+    line-height: 1;
+    font-size: 50px;
+    margin: 22px 0 14px;
+  }
+
+  .monitor-online-num-text {
+    margin-bottom: 22px;
+  }
+</style>