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

？？工作台时间怎么回事

lihuilin/feature-20250623164044-金币前端
lihuilin 10 hours ago
parent
98ac01718d
commit
a28cf63abd
3 changed files with 103 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 27
      src/views/usergold/clientCountDetail.vue
  3. 157
      src/views/workspace/index.vue

2
.env.development
View File

@ -1,5 +1,5 @@
# VITE_API_BASE='https://hwjb.homilychart.com/admin/'
# VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
VITE_API_BASE='http://192.168.8.94:8081/'
VITE_API_BASE='http://192.168.8.242:8081/'
# VITE_API_BASE='http://18.143.76.3:10704/'

27
src/views/usergold/clientCountDetail.vue
View File

@ -259,33 +259,6 @@ const totalFreeGold = computed(() => {
}, 0);
});
// 验证页码跳转输入框的数字是否合法
const checkNumber = function () {
if (typeof parseInt(getObj.value.pageNum) === 'number') {
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
if (
getObj.value.pageNum > 0 &&
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
) {
getObj.value.pageNum = parseInt(getObj.value.pageNum)
console.log('输入的数字合法')
get()
} else {
//提示
ElMessage({
type: 'error',
message: '请检查输入内容'
})
}
} else {
//提示
ElMessage({
type: 'error',
message: '输入非法'
})
}
}
// 新增排序字段和排序方式
const sortField = ref('')
const sortOrder = ref('')

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

@ -30,7 +30,7 @@
</div>
</el-card>
</el-col>
<!-- 第二个卡片 -->
<el-col :span="6">
<el-card class="card-item">
@ -44,7 +44,7 @@
</template>
</el-card>
</el-col>
<!-- 第三个卡片 -->
<el-col :span="6">
<el-card class="card-item">
@ -60,28 +60,28 @@
</template>
</el-card>
</el-col>
<!-- 第四个卡片 -->
<el-col :span="6">
<el-card class="card-item">
<el-col class="card-title">全年累计充值人头数</el-col>
<el-col class="card-title">{{ yearlyRechargeNum }}</el-col>
<el-col class="center-card">周同比:{{ wow }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="wow > 0">
<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="wow < 0">
<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">日环比:{{ daily }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="daily > 0">
<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="daily < 0">
<template v-else-if="sumDaily < 0">
<el-icon style="color:forestgreen"><ArrowDownBold /></el-icon>
</template>
<template v-else>
@ -100,25 +100,32 @@
<el-col :span="24">
<el-card style="width: 100%">
<el-row>
<el-col :span="15">
<el-col :span="21">
<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>
</el-col>
<el-col :span="9" style="text-align: right">
<el-radio-group v-model="timeRange" @change="handleTimeRangeChange" style="margin-right: 5px; margin-top:5px">
<el-col :span="21">
<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: 200px" @change="handleDateRangeChange" value-format="YYYY-MM-DD HH:mm:ss" />
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>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="18">
<div class="bar">
@ -167,6 +174,13 @@ 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 adminData = ref({})
// 卡片数据相关
@ -188,12 +202,13 @@ const dailyReduce = ref(0)
const dailyConsume = ref(0)
const dailyRefund = ref(0)
const yearlyRechargeNum = ref(0)
const wow = ref(0)
const daily = ref(0)
const sumWow = ref(0)
const sumDaily = ref(0)
const rechargeNum = ref(0)
const firstRecharge = ref(0)
const length = ref(0)
// 处理用，因为要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务)
// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务)
const processData = (data) => {
const summary = {
currentGold: 0,
@ -221,11 +236,11 @@ const processData = (data) => {
yearlyReduce: 0,
rechargeNum: 0,
firstRecharge: 0,
wow: 0,
daily: 0,
sumWow: 0,
sumDaily: 0,
yearlyRechargeNum: 0
}
// 遍历市场
data.marketCards.forEach(market => {
for (const i in summary) {
@ -235,10 +250,14 @@ const processData = (data) => {
}
})
// 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
dailyChange.value = summary.dailyChange
@ -247,22 +266,22 @@ const processData = (data) => {
currentFreeJune.value = summary.currentFreeJune
currentFreeDecember.value = summary.currentFreeDecember
currentTask.value = summary.currentTask
yearlyRecharge.value = summary.yearlyRecharge
yearlyMoney.value = summary.yearlyMoney
recharge.value = summary.recharge
money.value = summary.money
yearlyReduce.value = summary.yearlyReduce
yearlyConsume.value = summary.yearlyConsume
yearlyRefund.value = summary.yearlyRefund
dailyReduce.value = summary.dailyReduce
dailyConsume.value = yesterdayConsume
dailyRefund.value = yesterdayRefund
yearlyRechargeNum.value = summary.yearlyRechargeNum
wow.value = summary.wow
daily.value = summary.daily
sumWow.value = summary.sumWow / length.value
sumDaily.value = summary.sumDaily / length.value
rechargeNum.value = summary.rechargeNum
firstRecharge.value = summary.firstRecharge
}
@ -291,19 +310,19 @@ const getChartData = async () => {
if (!markets.value || markets.value.length === 0) {
await getMarkets()
}
// 构建请求参数
const params = {
markets: markets.value,
startDate: dateRange.value[0] || '2025-01-01 00:00:00',
endDate: dateRange.value[1] || '2025-12-31 23:59:59'
startDate: dateRange.value[0] || formatDate(new Date(0)),
endDate: dateRange.value[1] || formatDate(new Date())
}
const response = await API({
url: '/workbench/getGraph',
data: params
})
console.log('看看params', params)
if (Array.isArray(response.marketGraphs)) {
// 处理图表数据
processChartData(response.marketGraphs)
@ -318,7 +337,6 @@ const getChartData = async () => {
ElMessage.error('获取图表数据失败')
}
}
// 处理图表数据
const processChartData = (marketCards) => {
// 准备图表数据
@ -330,7 +348,14 @@ const processChartData = (marketCards) => {
consumeFree: [],
consumeTask: []
}
// 这是图表的合计数，怎样遍历？？？？？
const sumRechargePermanent1 = ref(0)
const sumRechargeFree1 = ref(0)
const sumRechargeTask1 = ref(0)
const sumConsumePermanent1 = ref(0)
const sumConsumeFree1 = ref(0)
const sumConsumeTask1 = ref(0)
// 按市场组织数据
marketCards.forEach(market => {
chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0)
@ -339,8 +364,22 @@ const processChartData = (marketCards) => {
chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0)
chartData.consumeFree.push(market.sumConsumeFree / 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)
})
sumRechargePermanent.value = sumRechargePermanent1.value
sumRechargeFree.value = sumRechargeFree1.value
sumRechargeTask.value = 0
sumConsumePermanent.value = sumConsumePermanent1.value
sumConsumeFree.value = sumConsumeFree1.value
sumConsumeTask.value = sumConsumeTask1.value
// 根据当前选中的标签更新图表
updateChart(chartData)
}
@ -490,16 +529,27 @@ const updateChart = (chartData) => {
// 处理标签切换
const handleTabChange = () => {
getChartData()
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())
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()
@ -510,13 +560,11 @@ const handleTimeRangeChange = () => {
endDate.setDate(now.getDate() + 6)
endDate.setHours(23, 59, 59, 0)
} else if (timeRange.value === 'month') {
startDate = new Date(now.getFullYear(), now.getMonth(), 1)
endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
endDate.setHours(23, 59, 59, 0)
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)
endDate = new Date(now.getFullYear(), 11, 31)
endDate.setHours(23, 59, 59, 0)
startDate = new Date(now.getFullYear(), 0, 1, 0, 0, 0)
endDate = new Date(now.getFullYear(), 11, 31, 23, 59, 59)
}
dateRange.value = [
@ -525,24 +573,23 @@ const handleTimeRangeChange = () => {
]
getChartData()
}
// 格式化日期为字符串
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}`
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 () {
try {
@ -574,7 +621,7 @@ onMounted(async () => {
await getCardData()
await getMarkets()
await getChartData()
handleTimeRangeChange() // 初始化时间范围
console.log('挂载后调用')
})
</script>

Write Preview
Loading…
Cancel
Save