| | |
|---|
| | | <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>
|
|---|
