geekai/web/src/views/admin/Dashboard.vue
2024-03-22 16:57:30 +08:00

261 lines
6.0 KiB
Vue

<template>
<div class="dashboard" v-loading="loading">
<el-row class="mgb20" :gutter="20">
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-1">
<el-icon class="grid-con-icon">
<User/>
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ stats.users }}</div>
<div>今日新增用户</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-2">
<el-icon class="grid-con-icon">
<ChatDotRound/>
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ stats.chats }}</div>
<div>今日新增对话</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-3">
<el-icon class="grid-con-icon">
<TrendCharts/>
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">{{ stats.tokens }}</div>
<div>今日消耗 Tokens</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-3">
<el-icon class="grid-con-icon">
<i class="iconfont icon-reward"></i>
</el-icon>
<div class="grid-cont-right">
<div class="grid-num">¥{{ stats.income }}</div>
<div>今日入账</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row class="mgb20" :gutter="20">
<el-col :span="8">
<div class="e-chart">
<div id="chart-users" style="height: 400px"></div>
<div class="title">最近7日用户注册</div>
</div>
</el-col>
<el-col :span="8">
<div class="e-chart">
<div id="chart-tokens" style="height: 400px"></div>
<div class="title">最近7日Token消耗</div>
</div>
</el-col>
<el-col :span="8">
<div class="e-chart">
<div id="chart-income" style="height: 400px"></div>
<div class="title">最近7日收入</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import {ChatDotRound, TrendCharts, User} from "@element-plus/icons-vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import * as echarts from 'echarts';
const stats = ref({users: 0, chats: 0, tokens: 0, rewards: 0})
const loading = ref(true)
onMounted(() => {
const chartUsers = echarts.init(document.getElementById("chart-users"))
const chartTokens = echarts.init(document.getElementById("chart-tokens"))
const chartIncome = echarts.init(document.getElementById("chart-income"))
httpGet('/api/admin/dashboard/stats').then((res) => {
stats.value.users = res.data.users
stats.value.chats = res.data.chats
stats.value.tokens = res.data.tokens
stats.value.income = res.data.income
const chartData = res.data.chart
loading.value = false
const x = []
const dataUsers = []
for (let k in chartData.users) {
x.push(k)
dataUsers.push(chartData.users[k])
}
chartUsers.setOption({
xAxis: {
data: x
},
yAxis: {},
series: [
{
data: dataUsers,
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
fontSize: 18
}
}
}
]
})
const dataTokens = []
for (let k in chartData.historyMessage) {
dataTokens.push(chartData.historyMessage[k])
}
chartTokens.setOption({
xAxis: {
data: x
},
yAxis: {},
series: [
{
data: dataTokens,
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
fontSize: 18
}
}
}
]
})
const dataIncome = []
for (let k in chartData.orders) {
dataIncome.push(chartData.orders[k])
}
chartIncome.setOption({
xAxis: {
data: x
},
yAxis: {},
series: [
{
data: dataIncome,
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
fontSize: 18
}
}
}
]
})
}).catch((e) => {
ElMessage.error("获取统计数据失败:" + e.message)
})
window.onresize = function () { // 自适应大小
chartUsers.resize()
chartTokens.resize()
chartIncome.resize()
};
})
</script>
<style scoped lang="stylus">
.dashboard {
padding 20px
.grid-content {
display: flex;
align-items: center;
height: 100px;
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 14px;
color: #999;
}
.grid-num {
font-size: 30px;
font-weight: bold;
}
.grid-con-icon {
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
.iconfont {
font-size: 50px;
}
}
.e-chart {
.title {
text-align center
font-size 16px
color #444444
}
}
.grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-2 .grid-num {
color: rgb(100, 213, 114);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
}
</style>