wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PanelGroup组件数字使用el-statistic组件

Browse Source
This commit is contained in:
不做码农 2023-03-23 09:42:32 +08:00
parent 11bf872bb3
commit 050c261544
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/dashboard/PanelGroup.vue
View File

@ -6,8 +6,9 @@
<svg-icon name="peoples" class-name="card-panel-icon" /> <svg-icon name="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text" v-waves>{{$t('layout.onlineUsers')}}</div> <!-- <div class="card-panel-text" v-waves>{{$t('layout.onlineUsers')}}</div>
<div id="onlineNum" class="card-panel-num">{{ state.onlineUserNum }}</div> <div id="onlineNum" class="card-panel-num">{{ state.onlineUserNum }}</div> -->
<el-statistic :title="$t('layout.onlineUsers')" :value="state.onlineNum" />
</div> </div>
</div> </div>
</el-col> </el-col>
@ -17,8 +18,9 @@
<svg-icon name="message" class-name="card-panel-icon" /> <svg-icon name="message" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text" v-waves>{{$t('layout.message')}}</div> <!-- <div class="card-panel-text" v-waves>{{ $t('layout.message') }}</div>
<div class="card-panel-num" id="messageNum">{{ state.chatNum }}</div> <div class="card-panel-num" id="messageNum">{{ state.chatNum }}</div> -->
<el-statistic :value="state.order" :title="$t('layout.message')"> </el-statistic>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -28,8 +30,13 @@
<svg-icon name="money" class-name="card-panel-icon" /> <svg-icon name="money" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text" v-waves>{{$t('layout.amount')}}</div> <!-- <div class="card-panel-text" v-waves>{{ $t('layout.amount') }}</div>
<div id="amount" class="card-panel-num">{{ state.amount }}</div> <div id="amount" class="card-panel-num">{{ state.amount }}</div> -->
<el-statistic :value="state.order" v-waves :title="$t('layout.amount')">
<template #title>
<div style="display: inline-flex; align-items: center">{{ $t('layout.amount') }}</div>
</template>
</el-statistic>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -39,8 +46,24 @@
<svg-icon name="shopping" class-name="card-panel-icon" /> <svg-icon name="shopping" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text" v-waves>{{$t('layout.order')}}</div> <!-- <div class="card-panel-text" v-waves>{{ $t('layout.order') }}</div>
<div id="order" class="card-panel-num">{{ state.order }}</div> <div id="order" class="card-panel-num">{{ state.order }}</div> -->
<el-statistic :value="state.order" :title="$t('layout.order')">
<template #title>
<div style="display: inline-flex; align-items: center">{{ $t('layout.order') }}</div>
</template>
</el-statistic>
<div class="statistic-footer">
<div class="footer-item">
<span>than yesterday</span>
<span style="color: green">
16%
<el-icon>
<CaretTop />
</el-icon>
</span>
</div>
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -49,7 +72,7 @@
<script setup> <script setup>
import { CountUp } from 'countup.js' import { CountUp } from 'countup.js'
import useSocketStore from '@/store/modules/socket'; import useSocketStore from '@/store/modules/socket'
const emit = defineEmits() const emit = defineEmits()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@ -59,7 +82,7 @@ const state = reactive({
return useSocketStore().onlineNum return useSocketStore().onlineNum
}), }),
amount: 99998, amount: 99998,
order: 1999, order: 1999
}) })
onMounted(() => { onMounted(() => {
new CountUp('messageNum', state.chatNum).start(), new CountUp('messageNum', state.chatNum).start(),