agentui/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon tenant-icon">
            <i class="el-icon-user" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ dashboardData.tenantCount }}</div>
            <div class="stat-label">下属租户数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon profit-icon">
            <i class="el-icon-money" />
          </div>
          <div class="stat-info">
            <div class="stat-value">¥{{ dashboardData.monthProfit }}</div>
            <div class="stat-label">本月分账</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon withdraw-icon">
            <i class="el-icon-wallet" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ dashboardData.pendingWithdraw }}</div>
            <div class="stat-label">待审核提现</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon active-icon">
            <i class="el-icon-trending-up" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ dashboardData.activeTenant }}</div>
            <div class="stat-label">活跃租户</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card title="租户业绩排行" class="chart-card">
          <div class="ranking-list">
            <div v-for="(item, index) in topTenants" :key="item.tenantId" class="ranking-item">
              <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
              <span class="name">{{ item.tenantName }}</span>
              <span class="amount">¥{{ item.amount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card title="本月消费趋势" class="chart-card">
          <div id="consumeChart" style="height: 250px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDashboardData } from '@/api/dashboard'
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      dashboardData: {
        tenantCount: 0,
        monthProfit: 0,
        pendingWithdraw: 0,
        activeTenant: 0
      },
      topTenants: []
    }
  },
  mounted() {
    this.loadDashboardData()
  },
  methods: {
    async loadDashboardData() {
      try {
        const response = await getDashboardData()
        const d = response.data
        this.dashboardData = d
        this.topTenants = d.topTenants || []
        this.renderChart(d.trendData || [])
      } catch (error) {
        console.error('加载数据失败', error)
      }
    },
    renderChart(trendData) {
      const el = document.getElementById('consumeChart')
      if (!el) return
      const chart = echarts.init(el)
      const dates = trendData.map(t => t.date || t.statDate || '')
      const values = trendData.map(t => t.amount || t.consumeAmount || 0)
      chart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value' },
        series: [{
          name: '消费金额',
          data: values,
          type: 'line',
          smooth: true,
          areaStyle: { color: 'rgba(52,144,220,0.2)' },
          lineStyle: { color: '#3490dc' }
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: #fff;

  &.tenant-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  &.profit-icon {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  }

  &.withdraw-icon {
    background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
  }

  &.active-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
}

.stat-info {
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }

  .stat-label {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
  }
}

.chart-card {
  height: 320px;
}

.ranking-list {
  .ranking-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .rank {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-right: 10px;

      &.rank-1 {
        background: #ffd700;
        color: #fff;
      }

      &.rank-2 {
        background: #c0c0c0;
        color: #fff;
      }

      &.rank-3 {
        background: #cd7f32;
        color: #fff;
      }
    }

    .name {
      flex: 1;
      font-size: 14px;
      color: #333;
    }

    .amount {
      font-size: 14px;
      font-weight: bold;
      color: #3490dc;
    }
  }
}
</style>