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 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>
  </el-card>
</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'
import { isDark } from '@/composables/useTheme'

// 注册 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 chartColors = computed(() => {
  return {
    textPrimary: isDark.value ? '#e5eaf3' : '#303133',
    textSecondary: isDark.value ? '#a3a6ad' : '#909399',
    borderColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : '#e4e7ed',
    cardBg: isDark.value ? '#1d1e1f' : '#ffffff'
  }
})

const tooltip =
{
  trigger: 'axis',
  backgroundColor: 'transparent', // 必须设置为透明，否则会覆盖 extraCssText 的背景
  borderWidth: 0, // 移除默认边框，使用 CSS 处理
  padding: 0, // 移除内边距，完全由 CSS 控制
  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
    }
  }
}


// 1. 收发带宽统计图表 Option
const bandwidthInOutOption = computed(() => ({
  tooltip: 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)
    }
  ]
}))

// 2. 连接数统计图表 Option
const connectionsOption = computed(() => ({
  tooltip: 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)
    }
  ]
}))

// 3. 新增用户 Option
const newUsersOption = computed(() => ({
  tooltip: 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)
    }
  ]
}))

// 4. 活跃用户 Option
const activeUsersOption = computed(() => ({
  tooltip: 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);
}

/* 顶部导航 Tabs */
.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 {
  background-color: var(--admin-card-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* 图表区域 */
.charts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

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

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