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
-
3src/main.ts
-
25src/router/index.js
-
33src/store/index.js
-
71src/utils/getMessage.js
-
36src/utils/goToCheck.js
-
127src/views/bankPaymentPage.vue
-
275src/views/home.vue
-
20src/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