ddac-front/src/views/sdk/components/UsageAnalysis.vue

<template>
  <el-card class="dashboard-container" shadow="never">
    <div class="top-nav">
      <div class="nav-item" :class="{ active: activeTab === 'bandwidth' }" @click="activeTab = 'bandwidth'">
        <SvgIcon iconClass="Database-network-point" />
        <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 value="3h">3小时</el-radio-button>
        <el-radio-button value="12h">12小时</el-radio-button>
        <el-radio-button value="1d">1天</el-radio-button>
        <el-radio-button value="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-else>
        <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>
  </el-card>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
import { isDark } from '@/composables/useTheme'

type UsageTab = 'bandwidth' | 'users'
type TimeRange = '3h' | '12h' | '1d' | '7d'

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

const activeTab = ref<UsageTab>('bandwidth')
const timeRange = ref<TimeRange>('3h')
const dateRange = ref<[Date, Date]>([
  new Date(2026, 2, 18, 8, 0, 0),
  new Date(2026, 2, 18, 11, 0, 0),
])

function generateTimeData(count = 10) {
  const base = +new Date(2026, 2, 18, 11, 25, 2)
  return Array.from({ length: count }, (_, i) => {
    const date = new Date(base + i * 360000)
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
  })
}

function generateRandomData(count = 10, min = 0, max = 10) {
  return Array.from({ length: count }, () => Number((Math.random() * (max - min) + min).toFixed(3)))
}

const timeAxisData = generateTimeData(15)

const chartColors = computed(() => ({
  textPrimary: isDark.value ? '#e5eaf3' : '#303133',
  textSecondary: isDark.value ? '#a3a6ad' : '#909399',
  borderColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : '#e4e7ed',
}))

const tooltip = {
  trigger: 'axis',
  backgroundColor: 'transparent',
  borderWidth: 0,
  padding: 0,
  extraCssText:
    'background: linear-gradient(180deg, rgba(101, 70, 255, 0.40) 0.33%, rgba(101, 70, 255, 0.10) 93.25%) !important; border: 1px solid #C6BAFF; border-radius: 4px; backdrop-filter: blur(4px); padding: 10px 16px; text-align: left;',
  textStyle: {
    color: '#fff',
    align: 'left',
  },
  axisPointer: {
    type: 'line',
    lineStyle: {
      color: '#ffffff',
      type: 'dashed',
      opacity: 0.5,
    },
  },
} as const

const bandwidthInOutOption = computed(() => ({
  tooltip,
  legend: {
    data: ['实时上传流量', '实时下载流量'],
    textStyle: { color: chartColors.value.textSecondary },
    top: 0,
    left: 100,
  },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeAxisData,
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
    axisLabel: { color: chartColors.value.textSecondary, formatter: '{value}bps' },
  },
  series: [
    {
      name: '实时上传流量',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#C9AAFF' },
      itemStyle: { color: '#C9AAFF' },
      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: '#60CFFF' },
      itemStyle: { color: '#60CFFF' },
      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),
    },
  ],
}))

const connectionsOption = computed(() => ({
  tooltip,
  legend: {
    data: ['连接数量'],
    textStyle: { color: chartColors.value.textSecondary },
    top: 0,
    left: 100,
  },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeAxisData,
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  series: [
    {
      name: '连接数量',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#FFBB5C' },
      itemStyle: { color: '#FFBB5C' },
      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),
    },
  ],
}))

const newUsersOption = computed(() => ({
  tooltip,
  legend: {
    data: ['Android', 'iOS', 'Windows', 'Linux', 'Unknown'],
    textStyle: { color: chartColors.value.textSecondary },
    top: 0,
    left: 100,
  },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeAxisData,
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  series: [
    {
      name: 'Android',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#60FFC7' },
      itemStyle: { color: '#60FFC7' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(96,255,199,0.3)' },
          { offset: 1, color: 'rgba(96,255,199,0)' },
        ]),
      },
      data: generateRandomData(15, 0, 1),
    },
    {
      name: 'iOS',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#FFFAC3' },
      itemStyle: { color: '#FFFAC3' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255,250,195,0.3)' },
          { offset: 1, color: 'rgba(255,250,195,0)' },
        ]),
      },
      data: generateRandomData(15, 0, 1),
    },
    {
      name: 'Windows',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#FF611D' },
      itemStyle: { color: '#FF611D' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255,97,29,0.3)' },
          { offset: 1, color: 'rgba(255,97,29,0)' },
        ]),
      },
      data: generateRandomData(15, 0, 1),
    },
    {
      name: 'Linux',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#E084FF' },
      itemStyle: { color: '#E084FF' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(224,132,255,0.3)' },
          { offset: 1, color: 'rgba(224,132,255,0)' },
        ]),
      },
      data: generateRandomData(15, 0, 1),
    },
    {
      name: 'Unknown',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#6863FF' },
      itemStyle: { color: '#6863FF' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(104,99,255,0.3)' },
          { offset: 1, color: 'rgba(104,99,255,0)' },
        ]),
      },
      data: generateRandomData(15, 0, 1),
    },
  ],
}))

const activeUsersOption = computed(() => ({
  tooltip,
  legend: {
    data: ['活跃用户'],
    textStyle: { color: chartColors.value.textSecondary },
    top: 0,
    left: 100,
  },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeAxisData,
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
    axisLabel: { color: chartColors.value.textSecondary },
  },
  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 {
  color: var(--admin-text-primary);
}

.top-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background-color: var(--admin-btn-bg);
  border-radius: 4px;
  cursor: pointer;
  color: var(--admin-text-secondary);
  transition: all 0.3s;
}

.nav-item.active {
  background-color: var(--el-color-primary);
  color: #fff;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--admin-card-bg);
}

.charts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  padding: 20px;
  border: 1px solid var(--admin-border-color);
  border-radius: 6px;
  background-color: var(--admin-card-bg);
}

.chart-title {
  margin-bottom: 10px;
  color: var(--admin-text-primary);
  font-size: 14px;
  font-weight: 700;
}

.chart-instance {
  width: 100%;
  height: 350px;
}
</style>