Browse Source
Merge branch 'refs/heads/lihui/feature-20251104165712-现金二期' into milestone-20251104-现金二期
lihui/feature-20251104165712-现金二期
Merge branch 'refs/heads/lihui/feature-20251104165712-现金二期' into milestone-20251104-现金二期
lihui/feature-20251104165712-现金二期
lihui
2 weeks ago
10 changed files with 1492 additions and 284 deletions
-
41src/__tests__/environment.test.ts
-
5src/main.ts
-
141src/router/index.js
-
33src/store/index.js
-
71src/utils/getMessage.js
-
36src/utils/goToCheck.js
-
127src/views/bankPaymentPage.vue
-
279src/views/home.vue
-
132src/views/permissions/rolePermission.vue
-
911src/views/workspace/index_.vue
@ -0,0 +1,41 @@ |
|||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'; |
|||
|
|||
describe('Environment Variables', () => { |
|||
const originalEnv = process.env; |
|||
|
|||
beforeEach(() => { |
|||
// 保存原始环境变量
|
|||
vi.resetModules(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
// 恢复原始环境变量
|
|||
process.env = { ...originalEnv }; |
|||
}); |
|||
|
|||
it('should load development environment variables', async () => { |
|||
// 在实际项目中，您可能需要根据具体框架加载环境变量
|
|||
const env = import.meta.env; |
|||
|
|||
// 验证环境变量是否存在
|
|||
expect(env).toBeDefined(); |
|||
|
|||
// 注意：由于 .env.development 是空的，这里不会有很多变量可以测试
|
|||
// 但在实际项目中，您可以添加类似这样的测试：
|
|||
// expect(env.VITE_API_BASE).toBe('expected_development_api_url');
|
|||
}); |
|||
|
|||
it('should have required environment variables', () => { |
|||
// 检查生产环境中必需的变量是否已定义
|
|||
const requiredVars = [ |
|||
// 'VITE_API_BASE',
|
|||
// 'VITE_UPLOAD_URL'
|
|||
]; |
|||
|
|||
requiredVars.forEach((varName) => { |
|||
// 由于 .env.development 是空的，这些测试会失败
|
|||
// 请根据实际情况取消注释并修改
|
|||
// expect(import.meta.env[varName]).toBeDefined();
|
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,71 @@ |
|||
// 所有导入放在顶部
|
|||
import API from '@/util/http.js'; |
|||
import {ref} from "vue"; |
|||
|
|||
// 声明变量
|
|||
const messageList1 = ref() |
|||
|
|||
/** |
|||
* 格式化时间为相对时间 |
|||
* @param {String} timeStr - 原始时间字符串 |
|||
* @returns {String} 格式化后的时间 |
|||
*/ |
|||
function formatTime(timeStr) { |
|||
// 函数逻辑不变...
|
|||
const now = new Date(); |
|||
const msgTime = new Date(timeStr); |
|||
const diffMs = now - msgTime; |
|||
const diffMins = Math.floor(diffMs / (1000 * 60)); |
|||
const diffHours = Math.floor(diffMins / 60); |
|||
const diffDays = Math.floor(diffHours / 24); |
|||
|
|||
if (diffHours < 1) { |
|||
return `${diffMins}分钟前`; |
|||
} else if (diffDays < 1) { |
|||
return `${diffHours}小时前`; |
|||
} else if (diffDays === 1) { |
|||
return '昨天'; |
|||
} else { |
|||
return `${msgTime.getFullYear()}-${String(msgTime.getMonth() + 1).padStart(2, '0')}-${String(msgTime.getDate()).padStart(2, '0')}`; |
|||
} |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 按日期分组消息（返回扁平化列表，每条消息包含group字段） |
|||
* @param {Array} messages - 原始消息列表 |
|||
* @returns {Array} 带分组信息的消息列表 |
|||
*/ |
|||
export function groupMessages(messages) { |
|||
const today = new Date(); |
|||
today.setHours(0, 0, 0, 0); |
|||
const yesterday = new Date(today); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
|
|||
// 直接返回处理后的消息数组（每条消息带group字段）
|
|||
return messages |
|||
.filter(msg => msg.flag !== 1) |
|||
.map(msg => { |
|||
|
|||
const msgTime = new Date(msg.czTime); |
|||
const formattedTime = formatTime(msg.czTime); |
|||
let group; |
|||
|
|||
if (msgTime >= today) { |
|||
group = '今天'; |
|||
} else if (msgTime >= yesterday) { |
|||
group = '昨天'; |
|||
} else { |
|||
group = '更早'; |
|||
} |
|||
|
|||
return {...msg, czTime: formattedTime, group}; |
|||
}); |
|||
} |
|||
|
|||
// // 异步获取消息
|
|||
// export const newMessageRes = await API({
|
|||
// url: '/getMessage',
|
|||
// method: 'POST',
|
|||
// data: {}
|
|||
// });
|
|||
@ -0,0 +1,36 @@ |
|||
export function getOrderPage(status) { |
|||
// 收款相关状态（0-5）
|
|||
const receiveStatusMap = { |
|||
0: '/moneyManage/receiveDetail/receiveFinance', // 线下财务待审核
|
|||
1: '/moneyManage/receiveDetail/receiveService', // 线下财务审核通过待填手续费
|
|||
2: '/moneyManage/receiveDetail/receiveService', // 线下财务审核驳回
|
|||
3: '/moneyManage/receiveDetail/receiveService', // link线上财务复核待填手续费
|
|||
// 4: '/moneyManage/receiveDetail', // 收款流程全部结束
|
|||
5: '/moneyManage/receiveDetail/receiveService' // 手动撤回待编辑提交
|
|||
}; |
|||
|
|||
// 退款相关状态（6及10-41中退款流程状态）
|
|||
const refundStatusMap = { |
|||
6: '/moneyManage/refundDetail', // 退款
|
|||
10: '/moneyManage/refundDetail/refundFinance', // 地区财务待审核
|
|||
11: '/moneyManage/refundDetail/refundFinance', // 地区财务手动撤回待编辑提交
|
|||
12: '/moneyManage/refundDetail/refundFinance', // 地区财务驳回
|
|||
20: '/moneyManage/refundDetail/refundCharge', // 地区负责人待审核
|
|||
22: '/moneyManage/refundDetail/refundCharge', // 地区负责人驳回
|
|||
30: '/moneyManage/refundDetail/refundHeader', // 总部财务待审核
|
|||
32: '/moneyManage/refundDetail/refundHeader', // 总部财务驳回
|
|||
40: '/moneyManage/refundDetail/refundService', // 执行人待处理
|
|||
41: '/moneyManage/refundDetail/refundService' // 执行人已处理，退款结束
|
|||
}; |
|||
|
|||
// 优先匹配退款状态（包含6和10-41区间）
|
|||
if (refundStatusMap.hasOwnProperty(status)) { |
|||
return refundStatusMap[status]; |
|||
} |
|||
// 匹配收款状态（0-5）
|
|||
if (receiveStatusMap.hasOwnProperty(status)) { |
|||
return receiveStatusMap[status]; |
|||
} |
|||
// 未知状态返回工作台
|
|||
return '/workbench'; |
|||
} |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<div class="payment-table-container"> |
|||
<h3 class="table-title">支付记录详情</h3> |
|||
|
|||
<div class="filter-container"> |
|||
<el-date-picker |
|||
v-model="selectedDate" |
|||
type="date" |
|||
placeholder="选择日期" |
|||
value-format="YYYYMMDD" |
|||
format="YYYY-MM-DD" |
|||
/> |
|||
<el-button type="primary" @click="fetchPaymentList">查询</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="paymentList" style="width: 100%" v-loading="loading"> |
|||
<el-table-column prop="type" label="交易类型" align="center" width="120" /> |
|||
<el-table-column prop="provider" label="支付渠道" align="center" width="120" /> |
|||
<el-table-column prop="request_reference" label="请求编号" align="center" width="120" show-overflow-tooltip/> |
|||
<el-table-column prop="merchant_reference" label="商户订单号" align="center" width="120" show-overflow-tooltip/> |
|||
<el-table-column prop="provider_reference" label="渠道参考号" align="center" width="120" show-overflow-tooltip /> |
|||
<el-table-column prop="currency" label="货币类型" align="center" width="100" /> |
|||
<el-table-column |
|||
prop="order_amount" |
|||
label="订单金额" |
|||
align="center" |
|||
width="120" |
|||
/> |
|||
<el-table-column |
|||
prop="charge" |
|||
label="手续费" |
|||
align="center" |
|||
width="120" |
|||
/> |
|||
<el-table-column |
|||
prop="net_amount" |
|||
label="净收入" |
|||
align="center" |
|||
width="120" |
|||
/> |
|||
<el-table-column prop="status" label="交易状态" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-tag :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'" size="small"> |
|||
{{ scope.row.status }} |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="created_time" label="创建时间" align="center" width="180" /> |
|||
<el-table-column prop="completed_time" label="完成时间" align="center" width="180" /> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http' |
|||
import 'element-plus/dist/index.css' |
|||
|
|||
const paymentList = ref([]) |
|||
const selectedDate = ref('') |
|||
const loading = ref(false) |
|||
|
|||
// 金额格式化 |
|||
const formatAmount = (row, column) => { |
|||
const value = row[column.prop] |
|||
return `${row.currency} ${Number(value).toFixed(2)}` |
|||
} |
|||
|
|||
// 获取支付数据 |
|||
const fetchPaymentList = async () => { |
|||
if (!selectedDate.value) { |
|||
ElMessage.warning('请先选择日期') |
|||
return |
|||
} |
|||
|
|||
loading.value = true |
|||
try { |
|||
const res = await API({ |
|||
url: '/admin/cash/bank/payment', |
|||
data: { time: selectedDate.value }, |
|||
}) |
|||
|
|||
if (res.code === 200) { |
|||
paymentList.value = res.data.paymentDTOList || [] |
|||
} else { |
|||
ElMessage.error(res.msg || '加载失败') |
|||
} |
|||
} catch (err) { |
|||
console.error(err) |
|||
ElMessage.error('请求出错，请稍后再试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 默认加载今天数据 |
|||
onMounted(() => { |
|||
const today = new Date() |
|||
const y = today.getFullYear() |
|||
const m = String(today.getMonth() + 1).padStart(2, '0') |
|||
const d = String(today.getDate()).padStart(2, '0') |
|||
selectedDate.value = `${y}${m}${d}` |
|||
fetchPaymentList() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.payment-table-container { |
|||
padding: 20px; |
|||
max-width: 1400px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.table-title { |
|||
margin-bottom: 16px; |
|||
color: #1989fa; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.filter-container { |
|||
margin-bottom: 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,911 @@ |
|||
<template> |
|||
<div class="top"> |
|||
<el-card style="width:10vw" class="center-card">数据总览</el-card> |
|||
<span class="text"> |
|||
最后更新时间：{{ |
|||
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据' |
|||
}} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="card"> |
|||
<!-- 第一个卡片 --> |
|||
<el-card class="card-item"> |
|||
<template #header> |
|||
<div class="card-title">当前金币余量</div> |
|||
<div> |
|||
<span style="font-weight: bold">{{ currentGold / 100 |
|||
}}</span> 较前一日 |
|||
{{ dailyChange / 100 }} |
|||
<template v-if="dailyChange > 0"> |
|||
<el-icon style="color:red"> |
|||
<ArrowUpBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else-if="dailyChange < 0"> |
|||
<el-icon style="color:forestgreen"> |
|||
<ArrowDownBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else> |
|||
<el-icon style="color:grey"> |
|||
<SemiSelect /> |
|||
</el-icon> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
<div> |
|||
<div class="margin-bottom">永久金币：{{ currentPermanent / 100 }}</div> |
|||
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div> |
|||
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}] |
|||
[十二月到期|{{ currentFreeDecember / 100 }}] |
|||
</div> |
|||
<div>任务金币：{{ currentTask / 100 }}</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<!-- 第二个卡片 --> |
|||
<el-card class="card-item"> |
|||
<div class="card-title">全年累计充值金币数</div> |
|||
<div class="card-title">{{ yearlyRecharge / 100 }}</div> |
|||
<div> </div> |
|||
<div class="center-card">折合新币累计金额:{{ yearlyMoney / 100 }}</div> |
|||
<template #footer> |
|||
<el-col class="margin-bottom center-card">昨日新增金币：{{ recharge / 100 }}</el-col> |
|||
<el-col class="margin-bottom center-card">其中永久金币：{{ money / 100 }}</el-col> |
|||
</template> |
|||
</el-card> |
|||
|
|||
<!-- 第三个卡片 --> |
|||
<el-card class="card-item"> |
|||
<div class="card-title">全年累计消费金币数</div> |
|||
<div class="card-title">{{ yearlyReduce / 100 }}</div> |
|||
<div style="padding-left: 30%;">消耗：{{ yearlyConsume / 100 }}</div> |
|||
<div style="padding-left: 30%;">退款：{{ yearlyRefund / 100 }}</div> |
|||
<template #footer> |
|||
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消费：{{ dailyConsume / 100 }}</div> |
|||
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增消耗：{{ dailyReduce / 100 }}</div> |
|||
<div style="margin-bottom:0.5%;padding-left: 30%;">昨日新增退款：{{ dailyRefund / 100 }}</div> |
|||
</template> |
|||
</el-card> |
|||
|
|||
<!-- 第四个卡片 --> |
|||
<el-card class="card-item"> |
|||
<el-col class="card-title">全年累计充值人头数</el-col> |
|||
<el-col class="card-title">{{ yearlyRechargeNum }}</el-col> |
|||
<el-col style="padding-left: 35%;">周同比:{{ sumWow }}% |
|||
<template v-if="sumWow > 0"> |
|||
<el-icon style="color:red"> |
|||
<ArrowUpBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else-if="sumWow < 0"> |
|||
<el-icon style="color:forestgreen"> |
|||
<ArrowDownBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else> |
|||
<el-icon style="color:grey"> |
|||
<SemiSelect /> |
|||
</el-icon> |
|||
</template> |
|||
</el-col> |
|||
<el-col style="padding-left: 35%;">日环比:{{ sumDaily }}% |
|||
<template v-if="sumDaily > 0"> |
|||
<el-icon style="color:red"> |
|||
<ArrowUpBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else-if="sumDaily < 0"> |
|||
<el-icon style="color:forestgreen"> |
|||
<ArrowDownBold /> |
|||
</el-icon> |
|||
</template> |
|||
<template v-else> |
|||
<el-icon style="color:grey"> |
|||
<SemiSelect /> |
|||
</el-icon> |
|||
</template> |
|||
</el-col> |
|||
<template #footer> |
|||
<el-col style="padding-left: 35%;margin-bottom:0.5%">昨日充值人数：{{ ydayRechargeNum }}</el-col> |
|||
<el-col style="padding-left: 35%;">其中首充：{{ firstRecharge }}</el-col> |
|||
</template> |
|||
</el-card> |
|||
</div> |
|||
|
|||
<div class="graph"> |
|||
<el-card style="width:84vw;"> |
|||
<div> |
|||
<el-tabs v-model="activeTab" @tab-change="handleTabChange"> |
|||
<el-tab-pane label="金币充值" name="recharge"></el-tab-pane> |
|||
<el-tab-pane label="金币消费" name="consume"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="condition"> |
|||
<div class="stats"> |
|||
<div v-if="activeTab === 'consume'">合计：{{ sumConsume / 100 }}</div> |
|||
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }} |
|||
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }} |
|||
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }} |
|||
</div> |
|||
<div> |
|||
<el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天 |
|||
</el-button> |
|||
<el-button @click="getToday()" size="small" :type="activeTimeRange === 'today' ? 'primary' : ''">今天 |
|||
</el-button> |
|||
<el-button @click="getWeek()" size="small" :type="activeTimeRange === 'week' ? 'primary' : ''">本周 |
|||
</el-button> |
|||
<el-button @click="getMonth()" size="small" :type="activeTimeRange === 'month' ? 'primary' : ''">本月 |
|||
</el-button> |
|||
<el-button @click="getYear()" size="small" :type="activeTimeRange === 'year' ? 'primary' : ''">本年 |
|||
</el-button> |
|||
</div> |
|||
<div> |
|||
<el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→" |
|||
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" |
|||
style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" |
|||
:disabled-date="disabledDate" @change="handleDatePickerChange" /> |
|||
<el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">查询</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="graph-content"> |
|||
<div ref="chartRef" class="left"></div> |
|||
<div class="right"> |
|||
<el-card> |
|||
<div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div> |
|||
<el-select v-model="selectedType" style="width: 100%; margin-bottom: 15px"> |
|||
<el-option label="全部类型" value="all"></el-option> |
|||
<el-option label="永久金币" value="permanent"></el-option> |
|||
<el-option label="免费金币" value="free"></el-option> |
|||
<el-option label="任务金币" value="task"></el-option> |
|||
</el-select> |
|||
<el-table :data="tableData" height="320px"> |
|||
<el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column> |
|||
<el-table-column prop="market" label="地区" align="center"> |
|||
<template #default="scope"> |
|||
<span>{{ marketMapping[scope.row.market] || scope.row.market }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="coinAmount" label="金币数量" align="center"> |
|||
<template #default="{ row }"> |
|||
{{ row.coinAmount.toLocaleString() }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import * as echarts from 'echarts' |
|||
import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue' |
|||
import API from '@/util/http' |
|||
import { ElMessage } from 'element-plus' |
|||
import dayjs from 'dayjs'; |
|||
import utc from 'dayjs-plugin-utc' |
|||
import weekday from 'dayjs/plugin/weekday' |
|||
dayjs.extend(utc) |
|||
import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue' |
|||
import { marketMapping } from "@/utils/marketMap.js"; |
|||
|
|||
const defaultTime = [ |
|||
new Date(2000, 1, 1, 0, 0, 0), |
|||
new Date(2000, 2, 1, 23, 59, 59), |
|||
] |
|||
|
|||
// 地区数据 |
|||
const markets = ref([]) |
|||
// 图表相关 |
|||
const dateRange = ref([]) |
|||
const activeTab = ref('recharge') |
|||
const selectedType = ref('all') |
|||
const tableData = ref([]) |
|||
const chartRef = ref(null) |
|||
let chartInstance = null |
|||
// 图表合计数 |
|||
const sumRechargePermanent = ref(0) |
|||
const sumRechargeFree = ref(0) |
|||
const sumRechargeTask = ref(0) |
|||
const sumConsumePermanent = ref(0) |
|||
const sumConsumeFree = ref(0) |
|||
const sumConsumeTask = ref(0) |
|||
const sumConsume = ref(0) |
|||
// 用户信息 |
|||
const adminData = ref({}) |
|||
// 卡片数据相关 |
|||
const currentGold = ref(0) |
|||
const dailyChange = ref(0) |
|||
const currentPermanent = ref(0) |
|||
const currentFree = ref(0) |
|||
const currentFreeJune = ref(0) |
|||
const currentFreeDecember = ref(0) |
|||
const currentTask = ref(0) |
|||
const yearlyRecharge = ref(0) |
|||
const yearlyMoney = ref(0) |
|||
const recharge = ref(0) |
|||
const money = ref(0) |
|||
const yearlyReduce = ref(0) |
|||
const yearlyConsume = ref(0) |
|||
const yearlyRefund = ref(0) |
|||
const dailyReduce = ref(0) |
|||
const dailyConsume = ref(0) |
|||
const dailyRefund = ref(0) |
|||
const yearlyRechargeNum = ref(0) |
|||
const sumWow = ref(0) |
|||
const sumDaily = ref(0) |
|||
const rechargeNum = ref(0) |
|||
const ydayRechargeNum = ref(0) |
|||
const firstRecharge = ref(0) |
|||
const length = ref(0) |
|||
// 加载状态 |
|||
const chartLoading = ref(true) |
|||
|
|||
const handleResize = () => { |
|||
if (chartInstance.value) { |
|||
try { |
|||
chartInstance.value.resize() |
|||
console.log('resize一下') |
|||
} catch (error) { |
|||
console.error('图表resize失败:', error) |
|||
} |
|||
} |
|||
} |
|||
// 初始化图表 |
|||
const initChart = () => { |
|||
if (!chartInstance && chartRef.value) { |
|||
chartInstance = echarts.init(chartRef.value) |
|||
window.addEventListener('resize', handleResize) |
|||
} |
|||
} |
|||
// 销毁图表 |
|||
const destroyChart = () => { |
|||
if (chartInstance.value) { |
|||
try { |
|||
chartInstance.value.dispose() |
|||
} catch (error) { |
|||
console.error('图表销毁失败:', error) |
|||
} |
|||
chartInstance.value = null |
|||
} |
|||
window.removeEventListener('resize', handleResize) |
|||
} |
|||
const formatDate = function (date) { |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
const hours = String(date.getHours()).padStart(2, '0'); |
|||
const minutes = String(date.getMinutes()).padStart(2, '0'); |
|||
const seconds = String(date.getSeconds()).padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
} |
|||
// 昨天 |
|||
const getYes = function () { |
|||
const yesterday = dayjs().subtract(1, 'day') |
|||
const startTime = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
const endTime = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
dateRange.value = [startTime, endTime] |
|||
console.log('看看dateRange', dateRange.value) |
|||
activeTimeRange.value = 'yes' // 标记当前激活状态 |
|||
|
|||
getChartData() |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = dayjs() |
|||
const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
const endTime = today.endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
dateRange.value = [startTime, endTime] |
|||
console.log('看看dateRange', dateRange.value) |
|||
activeTimeRange.value = 'today' // 标记当前激活状态 |
|||
|
|||
getChartData() |
|||
} |
|||
// 本周 |
|||
const getWeek = function () { |
|||
const today = dayjs(); |
|||
// 获取今天是星期几（0是周日，1是周一，...，6是周六） |
|||
const day = today.day(); |
|||
|
|||
// 计算本周一（如果今天是周一，就取今天；如果是周日，就减6天） |
|||
let monday = today.subtract(day === 0 ? 6 : day - 1, 'day'); |
|||
// 计算本周日（如果今天是周日，就取今天；否则就加(7 - day)天） |
|||
let sunday = today.add(day === 0 ? 0 : 7 - day, 'day'); |
|||
|
|||
// 设置时间为起始和结束 |
|||
const startTime = monday.startOf('day').format('YYYY-MM-DD HH:mm:ss'); |
|||
const endTime = sunday.endOf('day').format('YYYY-MM-DD HH:mm:ss'); |
|||
|
|||
dateRange.value = [startTime, endTime]; |
|||
console.log('本周时间范围（周一到周日）：', dateRange.value); |
|||
activeTimeRange.value = 'week'; |
|||
|
|||
getChartData(); |
|||
}; |
|||
// 本月 |
|||
const getMonth = function () { |
|||
const today = dayjs() |
|||
const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss') |
|||
// const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss') |
|||
const endTime = today.endOf('month').format('YYYY-MM-DD HH:mm:ss') |
|||
dateRange.value = [startTime, endTime] |
|||
console.log('看看dateRange', dateRange.value) |
|||
activeTimeRange.value = 'month' // 标记当前激活状态 |
|||
|
|||
getChartData() |
|||
} |
|||
// 本年 |
|||
const getYear = function () { |
|||
const today = dayjs() |
|||
const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss') |
|||
const endTime = today.endOf('year').format('YYYY-MM-DD HH:mm:ss') |
|||
// const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss') |
|||
dateRange.value = [startTime, endTime] |
|||
console.log('看看dateRange', dateRange.value) |
|||
activeTimeRange.value = 'year' // 标记当前激活状态 |
|||
|
|||
getChartData() |
|||
} |
|||
|
|||
// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务) |
|||
const processData = (data) => { |
|||
const summary = { |
|||
currentGold: 0, |
|||
dailyChange: 0, |
|||
currentPermanent: 0, |
|||
currentFreeJune: 0, |
|||
currentFreeDecember: 0, |
|||
currentTask: 0, |
|||
currentFree: 0, |
|||
recharge: 0, |
|||
money: 0, |
|||
yearlyRecharge: 0, |
|||
yearlyMoney: 0, |
|||
consumePermanent: 0, |
|||
consumeFreeJune: 0, |
|||
consumeFreeDecember: 0, |
|||
consumeTask: 0, |
|||
refundPermanent: 0, |
|||
refundFreeJune: 0, |
|||
refundFreeDecember: 0, |
|||
refundTask: 0, |
|||
dailyReduce: 0, |
|||
yearlyConsume: 0, |
|||
yearlyRefund: 0, |
|||
yearlyReduce: 0, |
|||
rechargeNum: 0, |
|||
ydayRechargeNum: 0, |
|||
firstRecharge: 0, |
|||
sumWow: 0, |
|||
sumDaily: 0, |
|||
yearlyRechargeNum: 0 |
|||
} |
|||
|
|||
// 遍历市场 |
|||
data.marketCards.forEach(market => { |
|||
for (const i in summary) { |
|||
if (market[i] !== undefined && market[i] !== null) { // 其实还应该卡一个number |
|||
summary[i] += market[i] |
|||
} |
|||
} |
|||
}) |
|||
|
|||
// wow和daily除一下 |
|||
length.value = data.markets.length |
|||
console.log(length.value) |
|||
|
|||
// 计算昨日新增消费和退款 |
|||
const yesterdayConsume = summary.consumePermanent + summary.consumeFreeJune + summary.consumeFreeDecember + summary.consumeTask |
|||
const yesterdayRefund = summary.refundPermanent + summary.refundFreeJune + summary.refundFreeDecember + summary.refundTask |
|||
|
|||
// 更新卡片数据 |
|||
currentGold.value = summary.currentGold.toFixed(2) |
|||
dailyChange.value = summary.dailyChange.toFixed(2) |
|||
currentPermanent.value = summary.currentPermanent.toFixed(2) |
|||
currentFree.value = summary.currentFree.toFixed(2) |
|||
currentFreeJune.value = summary.currentFreeJune.toFixed(2) |
|||
currentFreeDecember.value = summary.currentFreeDecember.toFixed(2) |
|||
currentTask.value = summary.currentTask.toFixed(2) |
|||
|
|||
yearlyRecharge.value = summary.yearlyRecharge.toFixed(2) |
|||
yearlyMoney.value = summary.yearlyMoney.toFixed(2) |
|||
recharge.value = summary.recharge.toFixed(2) |
|||
money.value = summary.money.toFixed(2) |
|||
|
|||
yearlyReduce.value = summary.yearlyReduce.toFixed(2) |
|||
yearlyConsume.value = summary.yearlyConsume.toFixed(2) |
|||
yearlyRefund.value = summary.yearlyRefund.toFixed(2) |
|||
dailyReduce.value = summary.dailyReduce.toFixed(2) |
|||
dailyConsume.value = yesterdayConsume.toFixed(2) |
|||
dailyRefund.value = yesterdayRefund.toFixed(2) |
|||
|
|||
yearlyRechargeNum.value = summary.yearlyRechargeNum |
|||
|
|||
// // 周同比 |
|||
// sumWow.value = (marketCards.sumWow / length.value).toFixed(2) |
|||
// // 日环比 |
|||
// sumDaily.value = (marketCards.sumDaily / length.value).toFixed(2) |
|||
|
|||
// rechargeNum.value = summary.rechargeNum |
|||
ydayRechargeNum.value = summary.ydayRechargeNum |
|||
firstRecharge.value = summary.firstRecharge |
|||
} |
|||
|
|||
//无法选择的时间 |
|||
const disabledDate = (time) => { |
|||
const limitDate = new Date(2025, 0, 1); |
|||
return time.getTime() < limitDate.getTime(); |
|||
} |
|||
|
|||
// 获取市场列表 |
|||
const getMarkets = async () => { |
|||
console.log("adminData", adminData.value.account) |
|||
try { |
|||
const response = await API({ |
|||
url: '/general/adminMarkets', |
|||
data: { |
|||
account: adminData.value.account |
|||
} |
|||
}) |
|||
if (Array.isArray(response.data)) { |
|||
// markets.value = response.data.filter(data => data !== "1") |
|||
markets.value = response.data |
|||
console.log('市场列表获取成功:', markets.value) |
|||
} else { |
|||
console.error('获取市场列表失败', response) |
|||
ElMessage.error('获取市场列表失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('获取市场列表失败:', error) |
|||
ElMessage.error('获取市场列表失败') |
|||
} |
|||
} |
|||
|
|||
// 获取图表数据 |
|||
const getChartData = async () => { |
|||
try { |
|||
// 校验市场数据到底有没有 |
|||
if (!markets.value || markets.value.length === 0) { |
|||
await getMarkets() |
|||
} |
|||
// 本年 |
|||
if (!dateRange.value || dateRange.value.length === 0) { |
|||
getYear() |
|||
} |
|||
const params = { |
|||
markets: markets.value, |
|||
startDate: dateRange.value[0], |
|||
endDate: dateRange.value[1] |
|||
}; |
|||
|
|||
|
|||
const response = await API({ |
|||
url: '/workbench/getGraph', |
|||
data: params |
|||
}) |
|||
console.log('看看params', params) |
|||
if (Array.isArray(response.marketGraphs)) { |
|||
// const filteredGraphs = response.marketGraphs.filter(data => data.market !== "1"); |
|||
// 处理图表数据 |
|||
processChartData(response.marketGraphs) |
|||
// 处理排名数据 |
|||
processRankingData(response.marketGraphs) |
|||
} else { |
|||
console.error('获取图表数据失败:', response) |
|||
ElMessage.error('获取图表数据失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('获取图表数据失败:', error) |
|||
ElMessage.error('获取图表数据失败') |
|||
} |
|||
} |
|||
// 处理图表数据 |
|||
const processChartData = (marketCards) => { |
|||
const chartData = { |
|||
rechargePermanent: [], |
|||
rechargeFree: [], |
|||
rechargeTask: [], |
|||
consumePermanent: [], |
|||
consumeFree: [], |
|||
consumeTask: [], |
|||
sumConsume: [] |
|||
} |
|||
// 这是图表的合计数，怎样遍历？？？？？ |
|||
const sumRechargePermanent1 = ref(0) |
|||
const sumRechargeFree1 = ref(0) |
|||
const sumRechargeTask1 = ref(0) |
|||
const sumConsumePermanent1 = ref(0) |
|||
const sumConsumeFree1 = ref(0) |
|||
const sumConsumeTask1 = ref(0) |
|||
const sumConsume1 = ref(0) |
|||
|
|||
|
|||
marketCards.forEach(market => { |
|||
chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0) |
|||
chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0) |
|||
chartData.rechargeTask.push(market.sumRechargeTask / 100 || 0) |
|||
chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0) |
|||
chartData.consumeFree.push(market.sumConsumeFree / 100 || 0) |
|||
chartData.consumeTask.push(market.sumConsumeTask / 100 || 0) |
|||
chartData.sumConsume.push(market.sumConsume / 100 || 0) |
|||
|
|||
// 合计数合计数合计数咋算 |
|||
sumRechargePermanent1.value += (market.sumRechargePermanent || 0) |
|||
sumRechargeFree1.value += (market.sumRechargeFree || 0) |
|||
//sumRechargeTask1.value += (market.sumRechargeTask || 0) |
|||
sumConsumePermanent1.value += (market.sumConsumePermanent || 0) |
|||
sumConsumeFree1.value += (market.sumConsumeFree || 0) |
|||
sumConsumeTask1.value += (market.sumConsumeTask || 0) |
|||
sumConsume1.value += (market.sumConsume || 0) |
|||
}) |
|||
sumRechargePermanent.value = sumRechargePermanent1.value |
|||
sumRechargeFree.value = sumRechargeFree1.value |
|||
sumRechargeTask.value = 0 |
|||
sumConsumePermanent.value = sumConsumePermanent1.value |
|||
sumConsumeFree.value = sumConsumeFree1.value |
|||
sumConsumeTask.value = sumConsumeTask1.value |
|||
sumConsume.value = sumConsume1.value |
|||
|
|||
updateChart(chartData) |
|||
} |
|||
|
|||
const processRankingData = (marketCards) => { |
|||
// 每个市场的总金币数 |
|||
const rankingData = marketCards.map(market => { |
|||
let coinAmount = 0; |
|||
if (activeTab.value === 'recharge') { |
|||
// 充值排名 |
|||
switch (selectedType.value) { |
|||
case 'all': |
|||
coinAmount = (market.sumRechargePermanent / 100 || 0) + (market.sumRechargeFree / 100 || 0) + (market.sumRechargeTask / 100 || 0); |
|||
break; |
|||
case 'permanent': |
|||
coinAmount = market.sumRechargePermanent / 100 || 0; |
|||
break; |
|||
case 'free': |
|||
coinAmount = market.sumRechargeFree / 100 || 0; |
|||
break; |
|||
case 'task': |
|||
coinAmount = market.sumRechargeTask / 100 || 0; |
|||
break; |
|||
} |
|||
} else { |
|||
// 消费排名 |
|||
switch (selectedType.value) { |
|||
case 'all': |
|||
coinAmount = (market.sumConsumePermanent / 100 || 0) + (market.sumConsumeFree / 100 || 0) + (market.sumConsumeTask / 100 || 0); |
|||
break; |
|||
case 'permanent': |
|||
coinAmount = market.sumConsumePermanent / 100 || 0; |
|||
break; |
|||
case 'free': |
|||
coinAmount = market.sumConsumeFree / 100 || 0; |
|||
break; |
|||
case 'task': |
|||
coinAmount = market.sumConsumeTask / 100 || 0; |
|||
break; |
|||
} |
|||
} |
|||
return { |
|||
market: market.market, |
|||
coinAmount: coinAmount |
|||
}; |
|||
}); |
|||
|
|||
// 按金币数量排序 |
|||
rankingData.sort((a, b) => b.coinAmount - a.coinAmount); |
|||
|
|||
// 排名序号 |
|||
tableData.value = rankingData.map((item, index) => ({ |
|||
rank: index + 1, |
|||
...item |
|||
})); |
|||
} |
|||
|
|||
watch(selectedType, () => { |
|||
getChartData(); |
|||
}); |
|||
// 更新图表 |
|||
const updateChart = (chartData) => { |
|||
if (!chartInstance) { |
|||
initChart() |
|||
} |
|||
chartLoading.value = true |
|||
try { |
|||
let series = [] |
|||
let legend = [] |
|||
|
|||
if (activeTab.value === 'recharge') { |
|||
series = [ |
|||
{ |
|||
name: '永久金币', |
|||
type: 'bar', |
|||
stack: 'recharge', |
|||
data: chartData.rechargePermanent, |
|||
itemStyle: { color: '#5470c6' }, |
|||
barWidth: 30 |
|||
}, |
|||
{ |
|||
name: '免费金币', |
|||
type: 'bar', |
|||
stack: 'recharge', |
|||
data: chartData.rechargeFree, |
|||
itemStyle: { color: '#91cc75' }, |
|||
barWidth: 30 |
|||
}, |
|||
{ |
|||
name: '任务金币', |
|||
type: 'bar', |
|||
stack: 'recharge', |
|||
data: chartData.rechargeTask, |
|||
itemStyle: { color: '#fac858' }, |
|||
barWidth: 30 |
|||
} |
|||
] |
|||
legend = ['永久金币', '免费金币', '任务金币'] |
|||
} else { |
|||
series = [ |
|||
{ |
|||
name: '永久金币', |
|||
type: 'bar', |
|||
stack: 'consume', |
|||
data: chartData.consumePermanent, |
|||
itemStyle: { color: '#5470c6' }, |
|||
barWidth: 30 |
|||
}, |
|||
{ |
|||
name: '免费金币', |
|||
type: 'bar', |
|||
stack: 'consume', |
|||
data: chartData.consumeFree, |
|||
itemStyle: { color: '#91cc75' }, |
|||
barWidth: 30 |
|||
}, |
|||
{ |
|||
name: '任务金币', |
|||
type: 'bar', |
|||
stack: 'consume', |
|||
data: chartData.consumeTask, |
|||
itemStyle: { color: '#fac858' }, |
|||
barWidth: 30 |
|||
} |
|||
] |
|||
legend = ['永久金币', '免费金币', '任务金币'] |
|||
} |
|||
|
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
}, |
|||
formatter: function (params) { |
|||
let result = params[0].name + '<br/>' |
|||
let total = 0; |
|||
params.forEach(param => { |
|||
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`; |
|||
total += param.value; |
|||
}) |
|||
result += `总${activeTab.value === 'recharge' ? '充值' : '消费'}: ${total.toLocaleString()}`; |
|||
return result |
|||
} |
|||
}, |
|||
legend: { |
|||
data: legend, |
|||
bottom: 10 |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: markets.value, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: 30 |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisLabel: { |
|||
formatter: function (value) { |
|||
return value.toLocaleString() |
|||
} |
|||
} |
|||
}, |
|||
series: series, |
|||
// dataZoom: [ |
|||
// { |
|||
// type: 'slider', |
|||
// show: true, |
|||
// start: 0, |
|||
// end: 100, |
|||
// maxSpan: 100, |
|||
// minSpan: 100, |
|||
// |
|||
// height: 2, |
|||
// }, |
|||
// ] |
|||
} |
|||
|
|||
chartInstance.setOption(option) |
|||
} catch (error) { |
|||
console.error('图表更新失败:', error) |
|||
ElMessage.error('图表渲染失败') |
|||
} finally { |
|||
setTimeout(() => { |
|||
chartLoading.value = false |
|||
}, 300) |
|||
} |
|||
} |
|||
|
|||
// 处理标签切换 |
|||
const handleTabChange = () => { |
|||
getChartData() |
|||
console.log('标签切换调用图表') |
|||
} |
|||
|
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 获取卡片数据 |
|||
const getCardData = async () => { |
|||
try { |
|||
const response = await API({ url: '/workbench/getCard', data: {} }) |
|||
workDataUpdateTime.value = response.updateTime |
|||
// 周同比 |
|||
sumWow.value = response.sumWow.toFixed(2) |
|||
// 日环比 |
|||
sumDaily.value = response.sumDaily.toFixed(2) |
|||
|
|||
if (response && response.data) { |
|||
processData(response.data) |
|||
} else if (Array.isArray(response?.marketCards)) { |
|||
processData(response) |
|||
} else { |
|||
console.error('无效的API响应结构:', response) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取卡片数据失败:', error) |
|||
} |
|||
} |
|||
const workDataUpdateTime = ref(null) |
|||
|
|||
// 标记当前激活的时间范围按钮 |
|||
const activeTimeRange = ref('') |
|||
// 日期选择器变化时清除按钮激活状态 |
|||
const handleDatePickerChange = () => { |
|||
activeTimeRange.value = '' |
|||
} |
|||
|
|||
onMounted(async () => { |
|||
await getAdminData() |
|||
await getCardData() |
|||
await getMarkets() |
|||
getYear() |
|||
window.addEventListener('resize', () => { |
|||
chartInstance.resize() |
|||
}) |
|||
}) |
|||
onUnmounted(() => { |
|||
destroyChart() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.top { |
|||
height: 5.5vh; |
|||
width: 80vw; |
|||
display: flex; |
|||
margin-bottom: 0.5vh; |
|||
|
|||
.text { |
|||
margin-left: 2vw; |
|||
width: 20vw; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
height: 28vh; |
|||
margin-bottom: 0.5vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.graph { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 64%; |
|||
|
|||
.condition { |
|||
width: 100%; |
|||
height: 1%; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.stats { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 35vw; |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
|
|||
.graph-content { |
|||
flex: 1; |
|||
height: auto; |
|||
display: flex; |
|||
|
|||
.left { |
|||
width: 70%; |
|||
height: auto; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
padding: 0.5vw 2vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.center-card { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.margin-bottom { |
|||
margin-bottom: 0.5vh; |
|||
} |
|||
|
|||
.card-item { |
|||
width: 25%; |
|||
height: 28vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
margin-right: 0.25vw; |
|||
} |
|||
|
|||
.card-title { |
|||
font-weight: bold; |
|||
margin-bottom: 1vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.card-large { |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
text-align: center; |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue