shulang
/
webcons
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加一些数据展示功能

This commit is contained in:
lingling 2025-02-20 23:23:10 +08:00
parent b301439644
commit a2a18a11ac
13 changed files with 407 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/dashboard.ts
View File

@ -1,5 +1,6 @@
import axios from 'axios';
import type { TableData } from '@arco-design/web-vue/es/table/interface';
import dayjs from 'dayjs';
export interface ContentDataRecord {
x: string;
@ -36,6 +37,16 @@ export function useranalysis() {
* @param 获取仪表盘 时间查询
* @returns
*/
export function useranalysis_time() {
return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time');
export function useranalysis_time(start_time:any,end_time:any) {
const startTimestamp = dayjs(start_time).startOf('day').unix(); // 开始时间的时间戳（00:00:00）
const endTimestamp = dayjs(end_time).endOf('day').unix();
return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time',{start_time:startTimestamp,end_time:endTimestamp});
}
/**
*
* @param 获取仪表盘 第三方支付余额
* @returns
*/
export function shopGetBalance() {
return axios.post<any>('/admin/api/v1/Dashboard/shopGetBalance');
}

8
src/api/jobuser.ts
View File

@ -114,3 +114,11 @@ export function set_user_remark(id: number,remark:string) {
export function get_user_withdraw(id: number) {
return axios.post<Black>('/admin/api/v1/jobuser/get_user_withdraw', { id });
}
/**
*
* @param 获取用户在线时长
* @returns
*/
export function get_user_wphone(username:string) {
return axios.post<Black>('/admin/api/v1/jobuser/get_user_wphone', { username });
}

2
src/api/withdraw.ts
View File

@ -51,5 +51,5 @@ export function lists(params: ListParams) {
* @returns
*/
export function pushMoney(params:any) {
return axios.post<jobuser>('/api/withdraw/pushMoney',params);
return axios.post<jobuser>('/admin/api/v1/withdraw/pushMoney',params);
}

1
src/locale/en-US.ts
View File

@ -54,6 +54,7 @@ export default {
'menu.hotinformation': 'Hotinformation',
'menu.carousel': 'carousel',
'menu.volunteerservicecorps':'volunteerservicecorps',
"menu.searchusertime": '用户在线时长',
...localeSettings,
...localeMessageBox,
...localeLogin,

1
src/locale/zh-CN.ts
View File

@ -61,6 +61,7 @@ export default {
'menu.jobuser':'用户',
"menu.dictionary":'客服',
"menu.withdraw": '提现管理',
"menu.searchusertime": '用户在线时长',
...localeSettings,
...localeMessageBox,
...localeLogin,

20
src/router/routes/modules/jobuser.ts
View File

@ -22,16 +22,16 @@ const JOBUSER: AppRouteRecordRaw = {
roles: ['*'],
},
},
// {
// path: 'monitor',
// name: 'Monitor',
// component: () => import('@/views/jobuser/monitor/index.vue'),
// meta: {
// locale: 'menu.jobuser.monitor',
// requiresAuth: true,
// roles: ['admin'],
// },
// },
{
path: 'searchusertime',
name: 'searchusertime',
component: () => import('@/views/jobuser/searchusertime.vue'),
meta: {
locale: 'menu.searchusertime',
requiresAuth: true,
roles: ['admin'],
},
},
],
};

72
src/router/routes/modules/list.ts
View File

@ -1,38 +1,38 @@
import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';
// import { DEFAULT_LAYOUT } from '../base';
// import { AppRouteRecordRaw } from '../types';
const LIST: AppRouteRecordRaw = {
path: '/list',
name: 'list',
component: DEFAULT_LAYOUT,
meta: {
locale: 'menu.list',
requiresAuth: true,
icon: 'icon-list',
order: 2,
},
children: [
{
path: 'search-table', // The midline path complies with SEO specifications
name: 'SearchTable',
component: () => import('@/views/list/search-table/index.vue'),
meta: {
locale: 'menu.list.searchTable',
requiresAuth: true,
roles: ['*'],
},
},
{
path: 'card',
name: 'Card',
component: () => import('@/views/list/card/index.vue'),
meta: {
locale: 'menu.list.cardList',
requiresAuth: true,
roles: ['*'],
},
},
],
};
// const LIST: AppRouteRecordRaw = {
// path: '/list',
// name: 'list',
// component: DEFAULT_LAYOUT,
// meta: {
// locale: 'menu.list',
// requiresAuth: true,
// icon: 'icon-list',
// order: 2,
// },
// children: [
// {
// path: 'search-table', // The midline path complies with SEO specifications
// name: 'SearchTable',
// component: () => import('@/views/list/search-table/index.vue'),
// meta: {
// locale: 'menu.list.searchTable',
// requiresAuth: true,
// roles: ['*'],
// },
// },
// {
// path: 'card',
// name: 'Card',
// component: () => import('@/views/list/card/index.vue'),
// meta: {
// locale: 'menu.list.cardList',
// requiresAuth: true,
// roles: ['*'],
// },
// },
// ],
// };
export default LIST;
// export default LIST;

102
src/views/dashboard/workplace/components/amonut.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<a-spin :loading="loading" style="width: 100%">
<a-card
class="general-card"
:header-style="{ paddingBottom: '0' }"
:body-style="{
padding: '20px',
}"
>
<template #title>
第三方支付余额
</template>
<Chart height="310px" :option="chartOption" />
</a-card>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'; // 导入 onMounted 钩子
import useLoading from '@/hooks/loading';
import useChartOption from '@/hooks/chart-option';
import { shopGetBalance, useranalysis } from '@/api/dashboard';
const { loading } = useLoading();
const chartOption = ref(null); // 定义 chartOption 作为响应式数据
onMounted(async () => {
const res = await shopGetBalance();
const AmountAvailable = res.data.AmountAvailable || 0;
chartOption.value = {
legend: {
left: 'center',
data: ['余额'],
bottom: 0,
icon: 'circle',
itemWidth: 8,
textStyle: {
color: 'rgb(60, 60, 60)',
},
itemStyle: {
borderWidth: 0,
},
},
tooltip: {
show: true,
trigger: 'item',
},
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: '40%',
style: {
text: '余额',
textAlign: 'center',
fill: '#4E5969',
fontSize: 14,
},
},
{
type: 'text',
left: 'center',
top: '50%',
style: {
text: AmountAvailable,
textAlign: 'center',
fill: '#1D2129',
fontSize: 16,
fontWeight: 500,
},
},
],
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '50%'],
label: {
formatter: '{d}%',
fontSize: 14,
color: '#4E5969',
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
},
data: [
{
value: AmountAvailable,
name: '余额',
itemStyle: {
color: '#313CA9',
},
},
],
},
],
};
});
</script>

32
src/views/dashboard/workplace/components/data-panel-search.vue
View File

@ -37,7 +37,7 @@
<img alt="avatar"
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
</a-avatar>
<a-statistic :title="'登录人数'" :value="data.user_total" :value-from="0" animation show-group-separator>
<a-statistic :title="'登录人数'" :value="data.login" :value-from="0" animation show-group-separator>
<template #suffix>
<span class="unit">个</span>
</template>
@ -50,7 +50,7 @@
<img alt="avatar"
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
</a-avatar>
<a-statistic :title="'注册人数'" :value="data.user_phone" :value-from="0" animation show-group-separator>
<a-statistic :title="'注册人数'" :value="data.registration" :value-from="0" animation show-group-separator>
<template #suffix>
<span class="unit">{{ $t('workplace.pecs') }}</span>
</template>
@ -63,9 +63,9 @@
<img alt="avatar"
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image" />
</a-avatar>
<a-statistic :title="'提款人数'" :value="data.user_phone_onlin" :value-from="0" animation show-group-separator>
<a-statistic :title="'提款数'" :value="data.withdraw" :value-from="0" animation show-group-separator>
<template #suffix>
<span class="unit">{{ $t('workplace.pecs') }}</span>
<span class="unit">笔</span>
</template>
</a-statistic>
</a-space>
@ -90,13 +90,13 @@
</template>
<script lang="ts" setup>
import { index } from '@/api/dashboard';
import { index, useranalysis_time } from '@/api/dashboard';
import dayjs from 'dayjs';
import { Ref, onMounted, reactive, ref } from 'vue';
const data = reactive({
user_total: 0,
user_phone: 0,
login: 0,
registration: 0,
withdraw: 0,
user_phone_onlin: 0,
});
onMounted(async() => {
@ -107,16 +107,20 @@
// data.user_total=res.data.user_total
// data.withdraw=res.data.withdraw
// }, 1000)
const res = await index();
data.user_phone=res.data.user_phone
data.user_phone_onlin=res.data.user_phone_onlin
data.user_total=res.data.user_total
const res = await useranalysis_time(dayjs().format("YYYY-MM-DD HH:mm:ss"),dayjs().format("YYYY-MM-DD HH:mm:ss"));
data.login=res.data.login
data.registration=res.data.registration
data.withdraw=res.data.withdraw
})
const reset=()=>{}
const search=()=>{}
const queryParams=ref([])
const search=async ()=>{
const res = await useranalysis_time(queryParams.value[0],queryParams.value[1]);
data.login=res.data.login
data.registration=res.data.registration
data.withdraw=res.data.withdraw
}
const queryParams=ref([dayjs().subtract(1, 'day').format("YYYY-MM-DD"),dayjs().format("YYYY-MM-DD")])
</script>
<style lang="less" scoped>

13
src/views/dashboard/workplace/components/data-panel.vue
View File

@ -124,14 +124,19 @@ const data = reactive({
user_phone_onlin: 0,
});
onMounted(() => {
setInterval(async () => {
const res = await index();
onMounted(async () => {
// setInterval(async () => {
// const res = await index();
// data.user_phone=res.data.user_phone
// data.user_phone_onlin=res.data.user_phone_onlin
// data.user_total=res.data.user_total
// data.withdraw=res.data.withdraw
// }, 1000)
const res = await index();
data.user_phone=res.data.user_phone
data.user_phone_onlin=res.data.user_phone_onlin
data.user_total=res.data.user_total
data.withdraw=res.data.withdraw
}, 1000)
})

7
src/views/dashboard/workplace/index.vue
View File

@ -26,6 +26,11 @@
>
<CategoriesPercent />
</a-grid-item>
<a-grid-item
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
>
<amonut />
</a-grid-item>
</a-grid>
</div>
</div>
@ -38,7 +43,7 @@
import ContentChart from './components/content-chart.vue';
import PopularContent from './components/popular-content.vue';
import CategoriesPercent from './components/categories-percent.vue';
import amonut from './components/amonut.vue'
</script>
<script lang="ts">

2
src/views/jobuser/index.vue
View File

@ -60,7 +60,7 @@
<a-table-column title="备注" data-index="remark"></a-table-column>
<a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
<a-table-column title="用户积分" data-index="money"></a-table-column>
<a-table-column title="上级代理" data-index="agent"></a-table-column>
<a-table-column title="上级代理" data-index="parent_username"></a-table-column>
<a-table-column title="累计在线时长/分" data-index="time"></a-table-column>
<a-table-column title="注册时间">
<template #cell="{ record }">

201
src/views/jobuser/searchusertime.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div class="container">
<Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
<a-card class="general-card" :title="$t('menu.jobuser.userlist')">
<a-row>
<a-col :flex="1">
<a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
label-align="left">
<a-row :gutter="16">
<a-col :span="8">
<a-form-item field="name" :label="'用户名'">
<a-input v-model="queryParams.key" :placeholder="'请输入用户名'" />
</a-form-item>
</a-col>
<!-- <a-col :span="8">
<a-form-item field="createdTime" :label="$t('searchTable.form.createdTime')">
<a-range-picker v-model="formModel.createdTime" style="width: 100%" />
</a-form-item>
</a-col> -->
</a-row>
</a-form>
</a-col>
<a-col :flex="'86px'" style="text-align: right">
<a-space :size="18">
<a-button type="primary" @click="getAll">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-space>
</a-col>
</a-row>
<a-table :data="data">
<template #columns>
<a-table-column title="手机号" data-index="phone"></a-table-column>
<a-table-column title="在线时长/分" data-index="total_time"></a-table-column>
</template>
</a-table>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import { lists, black, OutBlack, del, set_user_password, set_user_remark,get_user_withdraw, get_user_wphone } from '@/api/jobuser';
import { Modal } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
interface DataItem {
id: number;
username: string;
password: string;
time: Date;
money: string;
}
let data = ref<DataItem[]>([])
//弹窗控制
const modal_visible = ref(false)
//保存需要修改的用户id
const userid = ref(0)
const show_group = (id: number) => {
userid.value = id
modal_visible.value = true
}
const queryParams = ref({
key: "1",
});
const reset=()=>{
queryParams.value.key=""
}
/**
* 获取所有的用户列表
*/
const getAll = async () => {
const res: any = await get_user_wphone(queryParams.value.key);
if (res.code == 200) {
data.value = res.data.userPhonesWithTime;
Message.success('获取数据成功')
}else{
Message.error('获取数据失败')
}
};
onMounted(async () => {
// getAll()
})
</script>
<style lang="less" scoped>
.container {
padding: 0 20px 20px 20px;
}
.left-side {
flex: 1;
overflow: auto;
}
.right-side {
width: 280px;
margin-left: 16px;
}
.panel {
background-color: var(--color-bg-2);
border-radius: 4px;
overflow: auto;
}
:deep(.panel-border) {
margin-bottom: 0;
border-bottom: 1px solid rgb(var(--gray-2));
}
.moduler-wrap {
border-radius: 4px;
background-color: var(--color-bg-2);
:deep(.text) {
font-size: 12px;
text-align: center;
color: rgb(var(--gray-8));
}
:deep(.wrapper) {
margin-bottom: 8px;
text-align: center;
cursor: pointer;
&:last-child {
.text {
margin-bottom: 0;
}
}
&:hover {
.icon {
color: rgb(var(--arcoblue-6));
background-color: #e8f3ff;
}
.text {
color: rgb(var(--arcoblue-6));
}
}
}
:deep(.icon) {
display: inline-block;
width: 32px;
height: 32px;
margin-bottom: 4px;
color: rgb(var(--dark-gray-1));
line-height: 32px;
font-size: 16px;
text-align: center;
background-color: rgb(var(--gray-1));
border-radius: 4px;
}
}
</style>
<style lang="less" scoped>
// responsive
.mobile {
.container {
display: block;
}
.right-side {
// display: none;
width: 100%;
margin-left: 0;
margin-top: 16px;
}
}
</style>