gold-vue/src/views/workspace/index.vue

<template>
  <!-- 头部 -->
        <el-header class="header">
            <div class="title">数据总览</div>
        </el-header>
  <div style="height: 100vh;">
    <el-row class="cards" >
      <el-col :span="14">
        <GoldManagement :cardData="cardData" />
      </el-col>
      <!-- 右上格子：占12列 -->
      <el-col :span="10">
        <CashManagement />
      </el-col>
    </el-row>
    <el-row class="graphs">
      <el-col :span="24">
        <GoldGraph :graphData="graphData" @tab-change="handleTabChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import API from '@/util/http'

import GoldManagement from "@/components/workspace/GoldManagement.vue"
import CashManagement from "@/components/workspace/CashManagement.vue"
import GoldGraph from "@/components/workspace/GoldGraph.vue"

const cardData = ref({})
const graphData = ref([])
const markets = ref([])
const account = ref('')
const activeTab = ref('recharge')

// tab 切换时重新调图表接口
const handleTabChange = async (tab) => {
  activeTab.value = tab
  await getGraphData()
}

// 获取用户信息（拿 account）
const getUserInfo = async () => {
  const res = await API({ url: '/admin/userinfo', data: {} })
  account.value = res?.account || ''
}

// 获取市场列表
const getMarkets = async () => {
  if (!account.value) return
  const res = await API({ url: '/general/adminMarkets', data: { account: account.value } })
  markets.value = res.data
  console.log('获取市场列表:res:', res)
  console.log('获取市场列表:market:', markets.value)
}

// 获取金币卡片数据
const getCardData = async () => {
  const res = await API({ url: '/workbench/getCard', data: {} })
  cardData.value = res?.data || {}
}

// 获取金币图表数据
const getGraphData = async () => {
  if (!markets.value.length) return

  const params = {
    markets: markets.value,
    startDate: '2025-01-01 00:00:00',
    endDate: '2025-12-31 23:59:59'
  }

  const res = await API({ url: '/workbench/getGraph', data: params })
  if (!res?.marketGraphs) return

  graphData.value = res.marketGraphs.map(m => ({
    market: m.market,
    permanent: activeTab.value === 'recharge'
        ? m.sumRechargePermanent / 100
        : m.sumConsumePermanent / 100,
    free: activeTab.value === 'recharge'
        ? m.sumRechargeFree / 100
        : m.sumConsumeFree / 100,
    task: activeTab.value === 'recharge'
        ? m.sumRechargeTask / 100
        : m.sumConsumeTask / 100,
  }))
}

onMounted(async () => {
  try {
    await getUserInfo()   // 先拿 account
    await getMarkets()    // 再拿 markets
    await getCardData()   // 卡片
    await getGraphData()  // 图表
  } catch (err) {
    console.error('初始化失败:', err)
  }
})
</script>

<style scoped>

.header {
  /* 将纯色背景替换为线性渐变 */
  background: linear-gradient(
    90deg, 
    rgba(228, 240, 252, 1) 20%, 
    rgba(190, 218, 247, 1) 50%, 
    rgba(228, 240, 252, 1) 100%
  );
  height: 6vh;
  border-radius: 12px;
  margin-bottom: 4px;
  box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
  /* 添加阴影增强层次感 */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 136px;
  color: #040a2d;
  font-family: "PingFang SC";
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
  line-height: 31.79px;
  text-align: center;
}


</style>