You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.4 KiB
137 lines
3.4 KiB
<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>
|