huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

右下小卡好了

lihuilin/feature-20250623164044-金币前端
lihuilin 13 hours ago
parent
a28cf63abd
commit
9cf5b1bb2c
3 changed files with 197 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      package-lock.json
  2. 2
      package.json
  3. 310
      src/views/workspace/index.vue

10
package-lock.json
View File

@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"axios": "^1.7.8", "axios": "^1.7.8",
"dayjs": "^1.11.13",
"dayjs-plugin-utc": "^0.1.2",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"element-plus": "^2.8.8", "element-plus": "^2.8.8",
"lodash": "^4.17.21", "lodash": "^4.17.21",
@ -3421,10 +3423,16 @@
}, },
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.13", "version": "1.11.13",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/dayjs/-/dayjs-1.11.13.tgz",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/dayjs-plugin-utc": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dayjs-plugin-utc/-/dayjs-plugin-utc-0.1.2.tgz",
"integrity": "sha512-ExERH5o3oo6jFOdkvMP3gytTCQ9Ksi5PtylclJWghr7k7m3o2U5QrwtdiJkOxLOH4ghr0EKhpqGefzGz1VvVJg==",
"license": "MIT"
},
"node_modules/de-indent": { "node_modules/de-indent": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/de-indent/-/de-indent-1.0.2.tgz", "resolved": "https://mirrors.huaweicloud.com/repository/npm/de-indent/-/de-indent-1.0.2.tgz",

2
package.json
View File

@ -14,6 +14,8 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"axios": "^1.7.8", "axios": "^1.7.8",
"dayjs": "^1.11.13",
"dayjs-plugin-utc": "^0.1.2",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"element-plus": "^2.8.8", "element-plus": "^2.8.8",
"lodash": "^4.17.21", "lodash": "^4.17.21",

310
src/views/workspace/index.vue
View File

@ -9,15 +9,22 @@
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<div class="card-title">当前金币余量</div> <div class="card-title">当前金币余量</div>
<div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{ dailyChange / 100 }}
<div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{
dailyChange / 100 }}
<template v-if="dailyChange > 0"> <template v-if="dailyChange > 0">
<el-icon style="color:red"><ArrowUpBold /></el-icon>
<el-icon style="color:red">
<ArrowUpBold />
</el-icon>
</template> </template>
<template v-else-if="dailyChange < 0"> <template v-else-if="dailyChange < 0">
<el-icon style="color:forestgreen"><ArrowDownBold /></el-icon>
<el-icon style="color:forestgreen">
<ArrowDownBold />
</el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"><SemiSelect /></el-icon>
<el-icon style="color:grey">
<SemiSelect />
</el-icon>
</template> </template>
</div> </div>
</div> </div>
@ -25,7 +32,9 @@
<div> <div>
<div class="margin-bottom">永久金币：{{ currentPermanent / 100 }}</div> <div class="margin-bottom">永久金币：{{ currentPermanent / 100 }}</div>
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div> <div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div>
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{ currentFreeDecember / 100 }}]</div>
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{
currentFreeDecember /
100 }}]</div>
<div>任务金币：{{ currentTask / 100 }}</div> <div>任务金币：{{ currentTask / 100 }}</div>
</div> </div>
</el-card> </el-card>
@ -38,7 +47,7 @@
<div class="card-title">{{ yearlyRecharge / 100 }}</div> <div class="card-title">{{ yearlyRecharge / 100 }}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="center-card">折合新币累计金额:{{ yearlyMoney / 100 }}</div> <div class="center-card">折合新币累计金额:{{ yearlyMoney / 100 }}</div>
<template #footer >
<template #footer>
<el-col class="margin-bottom center-card">昨日新增：{{ recharge / 100 }}</el-col> <el-col class="margin-bottom center-card">昨日新增：{{ recharge / 100 }}</el-col>
<el-col class="margin-bottom center-card">其中充值：{{ money / 100 }}</el-col> <el-col class="margin-bottom center-card">其中充值：{{ money / 100 }}</el-col>
</template> </template>
@ -67,27 +76,39 @@
<el-col class="card-title">全年累计充值人头数</el-col> <el-col class="card-title">全年累计充值人头数</el-col>
<el-col class="card-title">{{ yearlyRechargeNum }}</el-col> <el-col class="card-title">{{ yearlyRechargeNum }}</el-col>
<el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp; <el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp;
<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>
<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 class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp; <el-col class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp;
<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 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> <template #footer>
<el-col class="margin-bottom center-card">昨日充值人数：{{ rechargeNum }}</el-col> <el-col class="margin-bottom center-card">昨日充值人数：{{ rechargeNum }}</el-col>
<el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col> <el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col>
@ -106,23 +127,26 @@
<el-tab-pane label="金币消费" name="consume"></el-tab-pane> <el-tab-pane label="金币消费" name="consume"></el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
<el-col :span="21">
<el-col :span="24">
<el-row> <el-row>
<div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp;
永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<el-radio-group v-model="timeRange" @change="handleTimeRangeChange" style="margin-right: 5px; margin-left:100px">
<el-radio-button label="day" style="border-color: white">今日</el-radio-button>
<el-radio-button label="week" style="border-color: white">本周</el-radio-button>
<el-radio-button label="month" style="border-color: white">本月</el-radio-button>
<el-radio-button label="year" style="border-color: white">本年</el-radio-button>
</el-radio-group>
<el-date-picker v-model="dateRange" type="daterange" range-separator="→" start-placeholder="开始时间" end-placeholder="结束时间"
style="width: 100px" @change="handleDateRangeChange" value-format="YYYY-MM-DD HH:mm:ss" />
<el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
</el-row>
<div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp;
永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
}}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
}}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
}}&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div>
<el-button @click="getToday()" label="day" style="margin-left:250px">今日</el-button>
<el-button @click="getWeek()" label="week">本周</el-button>
<el-button @click="getMonth()" label="month">本月</el-button>
<el-button @click="getYear()" label="year">本年</el-button>
</div>
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
end-placeholder="结束时间" style="margin-left:10px" />
<el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
</el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -146,7 +170,7 @@
<el-table-column prop="market" label="地区" align="center"></el-table-column> <el-table-column prop="market" label="地区" align="center"></el-table-column>
<el-table-column prop="coinAmount" label="金币数量" align="center"> <el-table-column prop="coinAmount" label="金币数量" align="center">
<template #default="{ row }"> <template #default="{ row }">
{{ row.coinAmount.toLocaleString() }}
{{ row.coinAmount.toLocaleString() }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -163,13 +187,15 @@ import * as echarts from 'echarts'
import { ref, onMounted, nextTick, watch } from 'vue' import { ref, onMounted, nextTick, watch } from 'vue'
import API from '@/util/http' import API from '@/util/http'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc'
dayjs.extend(utc)
import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue' import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
// 地区数据 // 地区数据
const markets = ref([]) const markets = ref([])
// 图表相关 // 图表相关
const activeTab = ref('recharge')
const timeRange = ref('')
const dateRange = ref([]) const dateRange = ref([])
const activeTab = ref('recharge')
const selectedType = ref('all') const selectedType = ref('all')
const tableData = ref([]) const tableData = ref([])
const chartRef = ref(null) const chartRef = ref(null)
@ -207,6 +233,47 @@ const sumDaily = ref(0)
const rechargeNum = ref(0) const rechargeNum = ref(0)
const firstRecharge = ref(0) const firstRecharge = ref(0)
const length = ref(0) const length = ref(0)
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 getToday = function () {
const today = new Date()
const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate())
const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
dateRange.value = [formatDate(startTime), formatDate(endTime)]
console.log('看看dateRange', dateRange.value)
}
// 本周
const getWeek = function () {
const today = new Date()
const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6)
const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
dateRange.value = [formatDate(startTime), formatDate(endTime)]
console.log('看看dateRange', dateRange.value)
}
// 本月
const getMonth = function () {
const today = new Date()
const startTime = new Date(today.getFullYear(), today.getMonth(), 1)
const endTime = new Date(today.getFullYear(), today.getMonth() + 1, 1)
dateRange.value = [formatDate(startTime), formatDate(endTime)]
console.log('看看dateRange', dateRange.value)
}
// 本年
const getYear = function () {
const today = new Date()
const startTime = new Date(today.getFullYear(), 0, 1)
const endTime = new Date(today.getFullYear() + 1, 0, 1)
dateRange.value = [formatDate(startTime), formatDate(endTime)]
console.log('看看dateRange', dateRange.value)
}
// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务) // 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务)
const processData = (data) => { const processData = (data) => {
@ -311,12 +378,13 @@ const getChartData = async () => {
await getMarkets() await getMarkets()
} }
// 构建请求参数
const params = { const params = {
markets: markets.value, markets: markets.value,
startDate: dateRange.value[0] || formatDate(new Date(0)),
endDate: dateRange.value[1] || formatDate(new Date())
}
startDate: dateRange.value[0],
endDate: dateRange.value[1]
};
const response = await API({ const response = await API({
url: '/workbench/getGraph', url: '/workbench/getGraph',
@ -365,13 +433,13 @@ const processChartData = (marketCards) => {
chartData.consumeFree.push(market.sumConsumeFree / 100 || 0) chartData.consumeFree.push(market.sumConsumeFree / 100 || 0)
chartData.consumeTask.push(market.sumConsumeTask / 100 || 0) chartData.consumeTask.push(market.sumConsumeTask / 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)
// 合计数合计数合计数咋算
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)
}) })
sumRechargePermanent.value = sumRechargePermanent1.value sumRechargePermanent.value = sumRechargePermanent1.value
sumRechargeFree.value = sumRechargeFree1.value sumRechargeFree.value = sumRechargeFree1.value
@ -384,17 +452,42 @@ const processChartData = (marketCards) => {
updateChart(chartData) updateChart(chartData)
} }
// 处理排名数据 - 修改点：根据接口字段计算金币数量
const processRankingData = (marketCards) => { const processRankingData = (marketCards) => {
// 根据当前选中的标签计算每个市场的总金币数量
// 根据当前选中的标签和类型计算每个市场的总金币数量
const rankingData = marketCards.map(market => { const rankingData = marketCards.map(market => {
let coinAmount = 0; let coinAmount = 0;
if (activeTab.value === 'recharge') { if (activeTab.value === 'recharge') {
// 充值排名：永久金币 + 免费金币
coinAmount = (market.sumRechargePermanent / 100 || 0) + (market.sumRechargeFree / 100 || 0);
// 充值排名
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 { } else {
// 消费排名：永久金币 + 免费金币 + 任务金币
coinAmount = (market.sumConsumePermanent / 100 || 0) + (market.sumConsumeFree / 100 || 0) + (market.sumConsumeTask / 100 || 0);
// 消费排名
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 { return {
market: market.market, // 使用 market 字段作为地区名称 market: market.market, // 使用 market 字段作为地区名称
@ -412,6 +505,10 @@ const processRankingData = (marketCards) => {
})); }));
} }
// 监听 selectedType 的变化，重新处理排名数据
watch(selectedType, () => {
getChartData();
});
// 更新图表 // 更新图表
const updateChart = (chartData) => { const updateChart = (chartData) => {
if (!chartInstance) { if (!chartInstance) {
@ -429,7 +526,7 @@ const updateChart = (chartData) => {
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
itemStyle: { color: '#5470c6' }, itemStyle: { color: '#5470c6' },
barWidth:30
barWidth: 30
}, },
{ {
name: '免费金币', name: '免费金币',
@ -437,7 +534,7 @@ const updateChart = (chartData) => {
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
itemStyle: { color: '#91cc75' }, itemStyle: { color: '#91cc75' },
barWidth:30
barWidth: 30
}, },
{ {
name: '任务金币', name: '任务金币',
@ -445,10 +542,10 @@ const updateChart = (chartData) => {
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
itemStyle: { color: '#fac858' }, itemStyle: { color: '#fac858' },
barWidth:30
barWidth: 30
} }
] ]
legend = ['永久金币', '免费金币','任务金币']
legend = ['永久金币', '免费金币', '任务金币']
} else { } else {
series = [ series = [
{ {
@ -457,7 +554,7 @@ const updateChart = (chartData) => {
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
itemStyle: { color: '#5470c6' }, itemStyle: { color: '#5470c6' },
barWidth:30
barWidth: 30
}, },
{ {
name: '免费金币', name: '免费金币',
@ -465,7 +562,7 @@ const updateChart = (chartData) => {
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
itemStyle: { color: '#91cc75' }, itemStyle: { color: '#91cc75' },
barWidth:30
barWidth: 30
}, },
{ {
name: '任务金币', name: '任务金币',
@ -473,7 +570,7 @@ const updateChart = (chartData) => {
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
itemStyle: { color: '#fac858' }, itemStyle: { color: '#fac858' },
barWidth:30
barWidth: 30
} }
] ]
legend = ['永久金币', '免费金币', '任务金币'] legend = ['永久金币', '免费金币', '任务金币']
@ -486,7 +583,7 @@ const updateChart = (chartData) => {
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
formatter: function(params) {
formatter: function (params) {
let result = params[0].name + '<br/>' let result = params[0].name + '<br/>'
params.forEach(param => { params.forEach(param => {
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>` result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
@ -515,7 +612,7 @@ const updateChart = (chartData) => {
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: function(value) {
formatter: function (value) {
return value.toLocaleString() return value.toLocaleString()
} }
} }
@ -532,65 +629,6 @@ const handleTabChange = () => {
console.log('标签切换调用图表') console.log('标签切换调用图表')
} }
// 格式化日期为字符串
const formatDate = (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 handleTimeRangeChange = () => {
const now = new Date()
let startDate, endDate
if (timeRange.value === 'day') {
startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
} else if (timeRange.value === 'week') {
const day = now.getDay()
const diff = now.getDate() - day + (day === 0 ? -6 : 1)
startDate = new Date(now.setDate(diff))
startDate.setHours(0, 0, 0, 0)
endDate = new Date(now)
endDate.setDate(now.getDate() + 6)
endDate.setHours(23, 59, 59, 0)
} else if (timeRange.value === 'month') {
startDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0)
endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59)
} else {
startDate = new Date(now.getFullYear(), 0, 1, 0, 0, 0)
endDate = new Date(now.getFullYear(), 11, 31, 23, 59, 59)
}
dateRange.value = [
formatDate(startDate),
formatDate(endDate)
]
getChartData()
console.log('时间切换调用')
}
// 处理日期范围变化
const handleDateRangeChange = () => {
timeRange.value = 'custom'
// 确保日期范围数组中的值是正确格式
if (dateRange.value.length === 2) {
dateRange.value = dateRange.value.map(date => {
if (typeof date === 'string') {
return new Date(date).toISOString().slice(0, 19).replace('T', ' ')
}
return formatDate(date)
})
}
getChartData()
console.log('日期选择器的改变调用')
}
const getAdminData = async function () { const getAdminData = async function () {
try { try {
const result = await API({ url: '/admin/userinfo', data: {} }) const result = await API({ url: '/admin/userinfo', data: {} })
@ -616,10 +654,13 @@ const getCardData = async () => {
} }
} }
onMounted(async () => { onMounted(async () => {
await getAdminData() await getAdminData()
await getCardData() await getCardData()
await getMarkets() await getMarkets()
getYear()
await getChartData() await getChartData()
console.log('挂载后调用') console.log('挂载后调用')
}) })
@ -693,7 +734,12 @@ onMounted(async () => {
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save