From 959032b71f4b4fd5e3435fcf1405f1ccaa7f8423 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期五, 21 十月 2022 16:45:54 +0800
Subject: [PATCH] feat: 增加左上角图表 优化整体框架
---
src/views/index/left-top.vue | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 111 insertions(+), 9 deletions(-)
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
index ea4f238..5ada865 100644
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@@ -1,20 +1,122 @@
<script setup lang="ts">
-import { ref } from "vue";
+import { reactive, ref } from "vue";
import { currentGET } from "@/api";
-currentGET("leftTop").then((res) => {
- console.log(res);
+import CountUp from "@/components/count-up";
+const duration = ref(2);
+const state = reactive({
+ alarmNum: 759,
+ offlineNum: 44,
+ onlineNum: 654,
+ totalNum: 698,
});
+
+const getData = () => {
+ currentGET("leftTop").then((res) => {
+ console.log(res);
+ if (res.success) {
+ state.alarmNum = res.data.alarmNum;
+ state.offlineNum = res.data.offlineNum;
+ state.onlineNum = res.data.onlineNum;
+ state.totalNum = res.data.totalNum;
+ }
+ });
+};
+getData();
</script>
<template>
- <div class="left-top">
-
- </div>
+ <ul class="user_Overview flex">
+ <li class="user_Overview-item" style="color: #00fdfa">
+ <div class="user_Overview_nums allnum">
+ <CountUp :endVal="state.totalNum" :duration="duration" />
+ </div>
+ <p>鎬昏澶囨暟</p>
+ </li>
+ <li class="user_Overview-item" style="color: #07f7a8">
+ <div class="user_Overview_nums online">
+ <CountUp :endVal="state.onlineNum" :duration="duration" />
+ </div>
+ <p>鍦ㄧ嚎鏁�</p>
+ </li>
+ <li class="user_Overview-item" style="color: #e3b337">
+ <div class="user_Overview_nums offline">
+ <CountUp :endVal="state.offlineNum" :duration="duration" />
+ </div>
+ <p>鎺夌嚎鏁�</p>
+ </li>
+ <li class="user_Overview-item" style="color: #f5023d">
+ <div class="user_Overview_nums laramnum">
+ <CountUp :endVal="state.alarmNum" :duration="duration" />
+ </div>
+ <p>鍛婅娆℃暟</p>
+ </li>
+ </ul>
</template>
<style scoped lang="scss">
-.left-top{
- width: 100%;
- height: 100%;
+.left-top {
+ width: 100%;
+ height: 100%;
+}
+
+.user_Overview {
+ li {
+ flex: 1;
+
+ p {
+ text-align: center;
+ height: 16px;
+ font-size: 16px;
+ }
+
+ .user_Overview_nums {
+ width: 100px;
+ height: 100px;
+ text-align: center;
+ line-height: 100px;
+ font-size: 22px;
+ margin: 50px auto 30px;
+ background-size: cover;
+ background-position: center center;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &.bgdonghua::before {
+ animation: rotating 14s linear infinite;
+ }
+ }
+
+ .allnum {
+ &::before {
+ background-image: url("@/assets/img/left_top_lan.png");
+ }
+ }
+
+ .online {
+ &::before {
+ background-image: url("@/assets/img/left_top_lv.png");
+ }
+ }
+
+ .offline {
+ &::before {
+ background-image: url("@/assets/img/left_top_huang.png");
+ }
+ }
+
+ .laramnum {
+ &::before {
+ background-image: url("@/assets/img/left_top_hong.png");
+ }
+ }
+ }
}
</style>
--
Gitblit v1.8.0