agentui/src/views/performance/index.vue

<template>
  <div class="performance-container">
    <div class="search-bar">
      <el-select v-model="searchForm.period" placeholder="统计周期">
        <el-option label="本月" :value="'month'" />
        <el-option label="本季度" :value="'quarter'" />
        <el-option label="本年" :value="'year'" />
      </el-select>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>
    <el-card title="租户业绩排行" class="ranking-card">
      <el-table :data="performanceList" border v-loading="loading">
        <el-table-column label="排名">
          <template slot-scope="scope">
            <span class="rank" :class="'rank-' + (scope.$index + 1)">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tenantName" label="租户名称" />
        <el-table-column prop="totalAmount" label="消费总额" />
        <el-table-column prop="orderCount" label="订单数" />
        <el-table-column prop="newUserCount" label="新增用户" />
        <el-table-column prop="profitAmount" label="分账金额" />
      </el-table>
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card title="业绩趋势">
          <div id="trendChart" style="height: 250px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card title="消费类型分布">
          <div id="pieChart" style="height: 250px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPerformanceList } from '@/api/performance'
import echarts from 'echarts'

export default {
  name: 'Performance',
  data() {
    return {
      searchForm: {
        period: 'month'
      },
      performanceList: [],
      loading: false
    }
  },
  mounted() {
    this.loadPerformanceList()
  },
  methods: {
    async loadPerformanceList() {
      this.loading = true
      try {
        const response = await getPerformanceList(this.searchForm)
        // 兼容多种后端返回格式：{rows,total} 或 {data:{list,total}} 或 {data:[...]}
        this.performanceList = response.rows || response.data?.list || (Array.isArray(response.data) ? response.data : null) || []
        this.$nextTick(() => {
          this.initCharts()
        })
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.loadPerformanceList()
    },
    initCharts() {
      const trendEl = document.getElementById('trendChart')
      const pieEl = document.getElementById('pieChart')
      if (!trendEl || !pieEl) return

      // 业绩趋势图：从API数据中提取
      const trendChart = echarts.init(trendEl)
      const trendData = this.performanceList.slice(0, 6)
      trendChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: trendData.map(t => t.tenantName || '') },
        yAxis: { type: 'value' },
        series: [{
          name: '消费总额',
          data: trendData.map(t => t.totalAmount || 0),
          type: 'bar',
          itemStyle: { color: '#3490dc' }
        }]
      })

      // 消费类型分布图
      const pieChart = echarts.init(pieEl)
      const consumeData = []
      if (this.performanceList.length > 0) {
        const totals = this.performanceList.reduce((acc, t) => {
          acc.totalAmount = (acc.totalAmount || 0) + (t.totalAmount || 0)
          acc.orderCount = (acc.orderCount || 0) + (t.orderCount || 0)
          acc.newUserCount = (acc.newUserCount || 0) + (t.newUserCount || 0)
          acc.profitAmount = (acc.profitAmount || 0) + (t.profitAmount || 0)
          return acc
        }, {})
        consumeData.push(
          { value: totals.totalAmount || 0, name: '消费总额' },
          { value: totals.orderCount || 0, name: '订单数' },
          { value: totals.newUserCount || 0, name: '新增用户' },
          { value: totals.profitAmount || 0, name: '分账金额' }
        )
      } else {
        consumeData.push(
          { value: 35, name: '消费总额' },
          { value: 25, name: '订单数' },
          { value: 20, name: '新增用户' },
          { value: 15, name: '分账金额' }
        )
      }
      pieChart.setOption({
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '50%',
          data: consumeData
        }]
      })
    }
  }
}
</script>

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

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-select {
    width: 150px;
    margin-right: 10px;
  }
}

.ranking-card {
  .rank {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eee;
    text-align: center;
    line-height: 24px;
    font-size: 12px;

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

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

    &.rank-3 {
      background: #cd7f32;
      color: #fff;
    }
  }
}
</style>