Browse Source

一期的优化 增加 3 其他 导出问题等

lihui/feature-20250623144029-金币前端lihui
lihui 3 weeks ago
parent
commit
c4081c4b3a
  1. 1
      src/router/index.js
  2. 12
      src/views/consume/coinConsumeDetail.vue
  3. 19
      src/views/home.vue
  4. 1
      src/views/usergold/clientCountDetail.vue
  5. 144
      src/views/workspace/index.vue

1
src/router/index.js

@ -72,6 +72,7 @@ const router = createRouter({
] ]
}, },
] ]
}); });

12
src/views/consume/coinConsumeDetail.vue

@ -379,12 +379,12 @@ const handleSortChange = (column) => {
const exportExcel = async function () { const exportExcel = async function () {
const params = { const params = {
consumUser :{ consumUser :{
jwcode:consumerUser.value.jwcode || '',
payPlatform:consumerUser.value.payPlatform || '',
market:consumerUser.value.market || '',
startTime:consumerUser.value.startTime || '',
endTime:consumerUser.value.endTime || '',
goodsName:consumerUser.value.goodsName || ''
jwcode:consumeUser.value.jwcode || '',
payPlatform:consumeUser.value.payPlatform || '',
market:consumeUser.value.market || '',
startTime:consumeUser.value.startTime || '',
endTime:consumeUser.value.endTime || '',
goodsName:consumeUser.value.goodsName || ''
}, },
page:getObj.pageNum, page:getObj.pageNum,
size:getObj.pageSize size:getObj.pageSize

19
src/views/home.vue

@ -1,16 +1,13 @@
<script setup> <script setup>
// //
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ElementPlus from 'element-plus'
import { VscGlobe } from 'vue-icons-plus/vsc'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import API from '@/util/http' import API from '@/util/http'
import dmmn from '../assets/link.png' import dmmn from '../assets/link.png'
import { useRoute } from 'vue-router'
import moment from 'moment' import moment from 'moment'
import { ca } from 'element-plus/es/locales.mjs'
const router = useRouter() const router = useRouter()
const imgrule1 = dmmn const imgrule1 = dmmn
@ -149,6 +146,7 @@ const openExportList = () => {
getExportList() getExportList()
exportListVisible.value = true exportListVisible.value = true
} }
</script> </script>
<template> <template>
@ -255,6 +253,7 @@ const openExportList = () => {
<el-badge @click="openExportList" class="item" > <!-- 用的el-badgeBadge 徽章 之后可以加数字 --> <el-badge @click="openExportList" class="item" > <!-- 用的el-badgeBadge 徽章 之后可以加数字 -->
<el-button>查看导出列表</el-button> <el-button>查看导出列表</el-button>
</el-badge> </el-badge>
<el-sub-menu index="1" class="admin"> <el-sub-menu index="1" class="admin">
<template #title> <template #title>
<el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" /> <el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />
@ -262,7 +261,6 @@ const openExportList = () => {
</template> </template>
<el-menu-item @click="message()">查看个人信息</el-menu-item> <el-menu-item @click="message()">查看个人信息</el-menu-item>
<el-menu-item @click="logout">退出登录</el-menu-item> <el-menu-item @click="logout">退出登录</el-menu-item>
<el-menu-item index="1-3" @click="openExportList">查看下载列表</el-menu-item>
</el-sub-menu> </el-sub-menu>
@ -274,6 +272,7 @@ const openExportList = () => {
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
<!-- 查看个人信息 --> <!-- 查看个人信息 -->
<el-dialog v-model="messageVisible" title="查看个人信息" width="500px"> <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
<el-form :model="adminData"> <el-form :model="adminData">
@ -329,6 +328,8 @@ const openExportList = () => {
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>

1
src/views/usergold/clientCountDetail.vue

@ -424,6 +424,7 @@ onMounted(async function () {
<span v-if="scope.row.type === 0">充值</span> <span v-if="scope.row.type === 0">充值</span>
<span v-if="scope.row.type === 1">消耗</span> <span v-if="scope.row.type === 1">消耗</span>
<span v-if="scope.row.type === 2">退款</span> <span v-if="scope.row.type === 2">退款</span>
<span v-if="scope.row.type === 3">其他</span>
</template> </template>
</el-table-column> </el-table-column>

144
src/views/workspace/index.vue

@ -1,7 +1,15 @@
<template> <template>
<el-col :span="4">
<el-card class="center-card margin-bottom">数据总览</el-card>
</el-col>
<el-row>
<!-- 数据总览卡片 -->
<el-col :span="4" style="padding-right: 10px;"> <!-- 适当留白避免拥挤 -->
<el-card class="center-card margin-bottom">数据总览</el-card>
</el-col>
<!-- 剩余栅格空间可选用于占满一行 -->
<el-col :span="18"></el-col>
</el-row>
<el-row :gutter="10"> <el-row :gutter="10">
<!-- 第一个卡片 --> <!-- 第一个卡片 -->
<el-col :span="6"> <el-col :span="6">
@ -9,21 +17,23 @@
<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"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="dailyChange < 0"> <template v-else-if="dailyChange < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</div> </div>
@ -33,8 +43,10 @@
<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月到期|{{ <div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{
currentFreeDecember /
100 }}]</div>
currentFreeDecember /
100
}}]
</div>
<div>任务金币{{ currentTask / 100 }}</div> <div>任务金币{{ currentTask / 100 }}</div>
</div> </div>
</el-card> </el-card>
@ -57,14 +69,14 @@
<!-- 第三个卡片 --> <!-- 第三个卡片 -->
<el-col :span="6"> <el-col :span="6">
<el-card class="card-item"> <el-card class="card-item">
<div class="card-title">全年累计消金币数</div>
<div class="card-title">全年累计消金币数</div>
<div class="card-title">{{ yearlyReduce / 100 }}</div> <div class="card-title">{{ yearlyReduce / 100 }}</div>
<div class="center-card">消费{{ yearlyConsume / 100 }}</div> <div class="center-card">消费{{ yearlyConsume / 100 }}</div>
<div class="center-card">退款{{ yearlyRefund / 100 }}</div> <div class="center-card">退款{{ yearlyRefund / 100 }}</div>
<template #footer> <template #footer>
<div></div> <div></div>
<div class="margin-bottom center-card">昨日新增消耗{{ dailyReduce / 100 }}</div>
<div class="margin-bottom center-card">昨日新增消费{{ dailyConsume / 100 }}</div> <div class="margin-bottom center-card">昨日新增消费{{ dailyConsume / 100 }}</div>
<div class="margin-bottom center-card">昨日新增消耗{{ dailyReduce / 100 }}</div>
<div class="margin-bottom center-card">昨日新增退款{{ dailyRefund / 100 }}</div> <div class="margin-bottom center-card">昨日新增退款{{ dailyRefund / 100 }}</div>
</template> </template>
</el-card> </el-card>
@ -78,34 +90,34 @@
<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"> <template v-if="sumWow > 0">
<el-icon style="color:red"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="sumWow < 0"> <template v-else-if="sumWow < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</el-col> </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"> <template v-if="sumDaily > 0">
<el-icon style="color:red"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="sumDaily < 0"> <template v-else-if="sumDaily < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</el-col> </el-col>
@ -130,11 +142,14 @@
<el-col :span="24"> <el-col :span="24">
<el-row> <el-row>
<div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp; <div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp;
永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
永久金币 {{
activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
免费金币 {{
activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
任务金币 {{
activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
</div> </div>
<div> <div>
@ -145,14 +160,14 @@
</div> </div>
<!-- 设置日期选择器的显示和绑定值格式 --> <!-- 设置日期选择器的显示和绑定值格式 -->
<el-date-picker <el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="→"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="margin-left:10px"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
v-model="dateRange"
type="datetimerange"
range-separator="→"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="margin-left:10px"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/> />
<el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button> <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
</el-row> </el-row>
@ -193,13 +208,14 @@
<script setup> <script setup>
import * as echarts from 'echarts' 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 dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc' import utc from 'dayjs-plugin-utc'
dayjs.extend(utc) dayjs.extend(utc)
import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
import {ArrowUpBold, ArrowDownBold, SemiSelect, Refresh} from '@element-plus/icons-vue'
// //
const markets = ref([]) const markets = ref([])
// //
@ -242,20 +258,21 @@ 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 isLoading = ref(false)
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 getToday = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss') const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'day').startOf('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] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
getChartData() getChartData()
@ -263,8 +280,8 @@ const getToday = function () {
// //
const getWeek = function () { const getWeek = function () {
const today = dayjs() const today = dayjs()
const startTime = (today.startOf('week').add(1,'day')).format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'week').startOf('week').add(1,'day').format('YYYY-MM-DD HH:mm:ss')
const startTime = (today.startOf('week').add(1, 'day')).format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
getChartData() getChartData()
@ -273,7 +290,7 @@ const getWeek = function () {
const getMonth = function () { const getMonth = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss') 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.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
getChartData() getChartData()
@ -282,7 +299,7 @@ const getMonth = function () {
const getYear = function () { const getYear = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss') const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'year').startOf('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] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
getChartData() getChartData()
@ -369,7 +386,7 @@ const processData = (data) => {
// //
const getMarkets = async () => { const getMarkets = async () => {
try { try {
const response = await API({ url: '/general/market', data: {} })
const response = await API({url: '/general/market', data: {}})
if (Array.isArray(response.data)) { if (Array.isArray(response.data)) {
markets.value = response.data markets.value = response.data
console.log('市场列表获取成功:', markets.value) console.log('市场列表获取成功:', markets.value)
@ -392,7 +409,7 @@ const getChartData = async () => {
} }
// //
if(!dateRange.value || dateRange.value.length === 0){
if (!dateRange.value || dateRange.value.length === 0) {
getYear() getYear()
} }
@ -542,7 +559,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -550,7 +567,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -558,7 +575,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -570,7 +587,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -578,7 +595,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -586,7 +603,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -648,7 +665,7 @@ const handleTabChange = () => {
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: {}})
adminData.value = result adminData.value = result
console.log('用户信息', adminData.value) console.log('用户信息', adminData.value)
} catch (error) { } catch (error) {
@ -658,7 +675,7 @@ const getAdminData = async function () {
// //
const getCardData = async () => { const getCardData = async () => {
try { try {
const response = await API({ url: '/workbench/getCard', data: {} })
const response = await API({url: '/workbench/getCard', data: {}})
if (response && response.data) { if (response && response.data) {
processData(response.data) processData(response.data)
} else if (Array.isArray(response?.marketCards)) { } else if (Array.isArray(response?.marketCards)) {
@ -671,6 +688,21 @@ const getCardData = async () => {
} }
} }
const refreshWorkspace = async () => {
isLoading.value = true
try {
const result = await API({url: '/workbench/updateCard', data: {}})
if (result.code === 200) {
ElMessage.success('数据更新成功')
} else {
ElMessage.error('数据更新失败')
}
} catch (error) {
console.error('刷新工作台失败:', error)
} finally {
isLoading.value = false
}
}
onMounted(async () => { onMounted(async () => {

Loading…
Cancel
Save