|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <div class="dashboard-container">
|
|
|
+ <!-- 顶部导航切换 -->
|
|
|
+ <div class="top-nav">
|
|
|
+ <div class="nav-item" :class="{ active: activeTab === 'bandwidth' }" @click="activeTab = 'bandwidth'">
|
|
|
+ <el-icon>
|
|
|
+ <Monitor />
|
|
|
+ </el-icon>
|
|
|
+ <span>带宽图表</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">
|
|
|
+ <el-icon>
|
|
|
+ <User />
|
|
|
+ </el-icon>
|
|
|
+ <span>用户概况统计</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 过滤条件区域 -->
|
|
|
+ <div class="filter-bar">
|
|
|
+ <el-radio-group v-model="timeRange" class="dark-radio-group">
|
|
|
+ <el-radio-button label="3h">3小时</el-radio-button>
|
|
|
+ <el-radio-button label="12h">12小时</el-radio-button>
|
|
|
+ <el-radio-button label="1d">近1天</el-radio-button>
|
|
|
+ <el-radio-button label="7d">近7天</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <el-date-picker v-model="dateRange" type="datetimerange" range-separator="—" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期" class="dark-date-picker" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表展示区域 -->
|
|
|
+ <div class="charts-wrapper">
|
|
|
+ <!-- 带宽图表视图 -->
|
|
|
+ <template v-if="activeTab === 'bandwidth'">
|
|
|
+ <div class="chart-card">
|
|
|
+ <div class="chart-title">收发带宽统计</div>
|
|
|
+ <v-chart class="chart-instance" :option="bandwidthInOutOption" autoresize />
|
|
|
+ </div>
|
|
|
+ <div class="chart-card">
|
|
|
+ <div class="chart-title">连接数统计</div>
|
|
|
+ <v-chart class="chart-instance" :option="connectionsOption" autoresize />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 用户概况统计视图 -->
|
|
|
+ <template v-if="activeTab === 'users'">
|
|
|
+ <div class="chart-card">
|
|
|
+ <div class="chart-title">新增用户</div>
|
|
|
+ <v-chart class="chart-instance" :option="newUsersOption" autoresize />
|
|
|
+ </div>
|
|
|
+ <div class="chart-card">
|
|
|
+ <div class="chart-title">活跃用户</div>
|
|
|
+ <v-chart class="chart-instance" :option="activeUsersOption" autoresize />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { Monitor, User } from '@element-plus/icons-vue'
|
|
|
+import { use } from 'echarts/core'
|
|
|
+import { CanvasRenderer } from 'echarts/renderers'
|
|
|
+import { LineChart } from 'echarts/charts'
|
|
|
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
|
|
+import VChart from 'vue-echarts'
|
|
|
+import * as echarts from 'echarts/core'
|
|
|
+
|
|
|
+// 注册 ECharts 必须的组件
|
|
|
+use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
|
|
+
|
|
|
+// 状态控制
|
|
|
+const activeTab = ref('bandwidth')
|
|
|
+const timeRange = ref('3h')
|
|
|
+const dateRange = ref([new Date(2022, 9, 25, 14, 19, 39), new Date(2022, 9, 25, 14, 19, 39)])
|
|
|
+
|
|
|
+// --- Mock 数据生成工具 ---
|
|
|
+const generateTimeData = (count = 10) => {
|
|
|
+ let base = +new Date(2026, 2, 18, 11, 25, 2)
|
|
|
+ return Array.from({ length: count }, (_, i) => {
|
|
|
+ let d = new Date(base + i * 360000); // 间隔递增
|
|
|
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
|
|
|
+ })
|
|
|
+}
|
|
|
+const generateRandomData = (count = 10, min = 0, max = 10) => {
|
|
|
+ return Array.from({ length: count }, () => (Math.random() * (max - min) + min).toFixed(3))
|
|
|
+}
|
|
|
+
|
|
|
+const timeAxisData = generateTimeData(15)
|
|
|
+
|
|
|
+// --- 图表通用配置 ---
|
|
|
+const commonAxisLine = { lineStyle: { color: '#555' } }
|
|
|
+const commonSplitLine = { show: true, lineStyle: { color: '#333', type: 'dashed' } }
|
|
|
+const commonLabel = { color: '#aaa' }
|
|
|
+
|
|
|
+// 1. 收发带宽统计图表 Option
|
|
|
+const bandwidthInOutOption = computed(() => ({
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
|
|
|
+ legend: { data: ['实时上传流量', '实时下载流量'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
|
|
|
+ yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: { ...commonLabel, formatter: '{value}bps' } },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '实时上传流量', type: 'line', smooth: true,
|
|
|
+ lineStyle: { color: '#9b59b6' }, itemStyle: { color: '#9b59b6' },
|
|
|
+ areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(155,89,182,0.3)' }, { offset: 1, color: 'rgba(155,89,182,0)' }]) },
|
|
|
+ data: generateRandomData(15, 2, 8)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实时下载流量', type: 'line', smooth: true,
|
|
|
+ lineStyle: { color: '#3498db' }, itemStyle: { color: '#3498db' },
|
|
|
+ areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(52,152,219,0.3)' }, { offset: 1, color: 'rgba(52,152,219,0)' }]) },
|
|
|
+ data: generateRandomData(15, 2, 8)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+
|
|
|
+// 2. 连接数统计图表 Option
|
|
|
+const connectionsOption = computed(() => ({
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
|
|
|
+ legend: { data: ['连接数量'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
|
|
|
+ yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '连接数量', type: 'line', smooth: true,
|
|
|
+ lineStyle: { color: '#f39c12' }, itemStyle: { color: '#f39c12' },
|
|
|
+ areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(243,156,18,0.3)' }, { offset: 1, color: 'rgba(243,156,18,0)' }]) },
|
|
|
+ data: generateRandomData(15, 0, 1)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+
|
|
|
+// 3. 新增用户 Option
|
|
|
+const newUsersOption = computed(() => ({
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
|
|
|
+ legend: { data: ['Android', 'IOS', 'Windows', 'Linux', 'Unknown'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
|
|
|
+ yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
|
|
|
+ series: [
|
|
|
+ { name: 'Android', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
|
|
|
+ { name: 'IOS', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
|
|
|
+ { name: 'Windows', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
|
|
|
+ { name: 'Linux', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) },
|
|
|
+ { name: 'Unknown', type: 'line', smooth: true, data: generateRandomData(15, 0, 1) }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+
|
|
|
+// 4. 活跃用户 Option
|
|
|
+const activeUsersOption = computed(() => ({
|
|
|
+ tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,70,0.8)', textStyle: { color: '#fff' } },
|
|
|
+ legend: { data: ['活跃用户'], textStyle: { color: '#ccc' }, top: 0, left: 100 },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: { type: 'category', boundaryGap: false, data: timeAxisData, axisLine: commonAxisLine, axisLabel: commonLabel },
|
|
|
+ yAxis: { type: 'value', axisLine: commonAxisLine, splitLine: commonSplitLine, axisLabel: commonLabel },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '活跃用户', type: 'line', smooth: true,
|
|
|
+ lineStyle: { color: '#2980b9' }, itemStyle: { color: '#2980b9' },
|
|
|
+ areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(41,128,185,0.3)' }, { offset: 1, color: 'rgba(41,128,185,0)' }]) },
|
|
|
+ data: generateRandomData(15, 0, 1)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 全局暗黑背景 */
|
|
|
+.dashboard-container {
|
|
|
+ padding: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部导航 Tabs */
|
|
|
+.top-nav {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background-color: #2a2a32;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #a0a0a0;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-item.active {
|
|
|
+ background-color: #6366f1;
|
|
|
+ /* 类似截图中的紫色主色调 */
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 过滤栏 */
|
|
|
+.filter-bar {
|
|
|
+ background-color: #22222a;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 强制修改 Element Plus 组件以适应深色背景 */
|
|
|
+:deep(.el-radio-button__inner) {
|
|
|
+ background-color: #2a2a32;
|
|
|
+ border-color: #333;
|
|
|
+ color: #a0a0a0;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
|
|
+ background-color: #4a4a5a;
|
|
|
+ border-color: #555;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input__wrapper) {
|
|
|
+ background-color: #2a2a32;
|
|
|
+ box-shadow: 0 0 0 1px #333 inset;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-range-input) {
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图表区域 */
|
|
|
+.charts-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-card {
|
|
|
+ background-color: #22222a;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: absolute;
|
|
|
+ /* 让标题不影响 Echarts 的 Legend 布局 */
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-instance {
|
|
|
+ height: 350px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
piks
