146 lines
3.0 KiB
Vue
146 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import TrendChart from './TrendChart.vue';
|
|
|
|
|
|
// 模拟数据
|
|
const activeCallsData = ref([10, 20, 30, 40, 30, 20, 0]);
|
|
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
|
|
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<a-card>
|
|
<div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;">
|
|
Users</div>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :sm="24" :lg="8">
|
|
<a-card :bordered="false" class="metric-card">
|
|
<div class="card-title">Online Users</div>
|
|
<div class="card-content">
|
|
<div class="trend-chart">
|
|
<TrendChart :data="activeCallsData" color="#4CAF50" />
|
|
</div>
|
|
<div class="metric-info">
|
|
<div class="metric-value">
|
|
0
|
|
<a-icon class="trend-icon up" type="arrow-up" />
|
|
</div>
|
|
<div class="metric-change">-20 last 5m</div>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<a-col :xs="24" :sm="24" :lg="8">
|
|
<a-card :bordered="false" class="metric-card">
|
|
<div class="card-title">Total Users</div>
|
|
<div class="card-content">
|
|
<div class="trend-chart">
|
|
<TrendChart :data="mosData" color="#2196F3" />
|
|
</div>
|
|
<div class="metric-info">
|
|
<div class="metric-value">
|
|
70
|
|
<a-icon class="trend-icon right" type="arrow-right" />
|
|
</div>
|
|
<div class="metric-change">+40 last 5m</div>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :xs="24" :sm="24" :lg="8">
|
|
<a-card :bordered="false" class="metric-card">
|
|
<div class="card-title">Parallel Users</div>
|
|
<div class="card-content">
|
|
<div class="trend-chart">
|
|
<TrendChart :data="failedCallsData" color="#F44336" />
|
|
</div>
|
|
<div class="metric-info">
|
|
<div class="metric-value">
|
|
30
|
|
</div>
|
|
<div class="metric-change">-10 last 5m</div>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dashboard-cards {
|
|
padding: 16px;
|
|
}
|
|
|
|
.metric-card {
|
|
border-radius: 8px;
|
|
height: 100%;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.trend-chart {
|
|
flex: 1;
|
|
height: 50px;
|
|
}
|
|
|
|
.metric-info {
|
|
margin-left: 16px;
|
|
text-align: right;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.metric-change {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.trend-icon {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.up {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.down {
|
|
color: #F44336;
|
|
}
|
|
|
|
.right {
|
|
color: #2196F3;
|
|
}
|
|
</style>
|