Compare commits
No commits in common. "0f76fd36bca065ba55a6bbf66d29c13336eaf79f" and "9d779f3dbac2b69299aa8ac258ede6343d14fae7" have entirely different histories.
0f76fd36bc
...
9d779f3dba
@ -23,19 +23,3 @@ export function queryPopularList(params: { type: string }) {
|
|||||||
export function index() {
|
export function index() {
|
||||||
return axios.post<any>('/admin/api/v1/Dashboard/index');
|
return axios.post<any>('/admin/api/v1/Dashboard/index');
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param 获取仪表盘 用户注册分析
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function useranalysis() {
|
|
||||||
return axios.post<any>('/admin/api/v1/Dashboard/useranalysis');
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param 获取仪表盘 时间查询
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function useranalysis_time() {
|
|
||||||
return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time');
|
|
||||||
}
|
|
@ -8,7 +8,7 @@
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
注册用户分析
|
{{ $t('workplace.categoriesPercent') }}
|
||||||
</template>
|
</template>
|
||||||
<Chart height="310px" :option="chartOption" />
|
<Chart height="310px" :option="chartOption" />
|
||||||
</a-card>
|
</a-card>
|
||||||
@ -16,29 +16,22 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted } from 'vue'; // 导入 onMounted 钩子
|
|
||||||
import useLoading from '@/hooks/loading';
|
import useLoading from '@/hooks/loading';
|
||||||
import useChartOption from '@/hooks/chart-option';
|
import useChartOption from '@/hooks/chart-option';
|
||||||
import { useranalysis } from '@/api/dashboard';
|
|
||||||
|
|
||||||
const { loading } = useLoading();
|
const { loading } = useLoading();
|
||||||
const chartOption = ref(null); // 定义 chartOption 作为响应式数据
|
const { chartOption } = useChartOption((isDark) => {
|
||||||
|
// echarts support https://echarts.apache.org/zh/theme-builder.html
|
||||||
onMounted(async () => {
|
// It's not used here
|
||||||
const res = await useranalysis();
|
return {
|
||||||
const userTotal = res.data.user_total || 0;
|
|
||||||
const register = res.data.register || 0;
|
|
||||||
const inviteRegistration = res.data.inviteregistration || 0;
|
|
||||||
|
|
||||||
chartOption.value = {
|
|
||||||
legend: {
|
legend: {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
data: ['自主注册', '邀请注册'],
|
data: ['纯文本', '图文类', '视频类'],
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
icon: 'circle',
|
icon: 'circle',
|
||||||
itemWidth: 8,
|
itemWidth: 8,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgb(60, 60, 60)',
|
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
@ -55,9 +48,9 @@
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
top: '40%',
|
top: '40%',
|
||||||
style: {
|
style: {
|
||||||
text: '总用户',
|
text: '内容量',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fill: '#4E5969',
|
fill: isDark ? '#ffffffb3' : '#4E5969',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -66,9 +59,9 @@
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
top: '50%',
|
top: '50%',
|
||||||
style: {
|
style: {
|
||||||
text: userTotal,
|
text: '928,531',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fill: '#1D2129',
|
fill: isDark ? '#ffffffb3' : '#1D2129',
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
},
|
},
|
||||||
@ -83,25 +76,32 @@
|
|||||||
label: {
|
label: {
|
||||||
formatter: '{d}%',
|
formatter: '{d}%',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: '#4E5969',
|
color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderColor: '#fff',
|
borderColor: isDark ? '#232324' : '#fff',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: register,
|
value: [148564],
|
||||||
name: '自主注册',
|
name: '纯文本',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#249EFF',
|
color: isDark ? '#3D72F6' : '#249EFF',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: inviteRegistration,
|
value: [334271],
|
||||||
name: '邀请注册',
|
name: '图文类',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#313CA9',
|
color: isDark ? '#A079DC' : '#313CA9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [445694],
|
||||||
|
name: '视频类',
|
||||||
|
itemStyle: {
|
||||||
|
color: isDark ? '#6CAAF5' : '#21CCFF',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -110,3 +110,5 @@
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less"></style>
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
}"
|
}"
|
||||||
:title="$t('workplace.contentData')"
|
:title="$t('workplace.contentData')"
|
||||||
>
|
>
|
||||||
<!-- <template #extra>
|
<template #extra>
|
||||||
<a-link>{{ $t('workplace.viewMore') }}</a-link>
|
<a-link>{{ $t('workplace.viewMore') }}</a-link>
|
||||||
</template> -->
|
</template>
|
||||||
<Chart height="289px" :option="chartOption" />
|
<Chart height="289px" :option="chartOption" />
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
|
@ -1,152 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-row style="padding: 20px;">
|
|
||||||
<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="12">
|
|
||||||
<a-form-item field="createdTime" :label="'按照时间查询'">
|
|
||||||
<a-range-picker v-model="queryParams" 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="search">
|
|
||||||
<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-grid :cols="24" :row-gap="16" class="panel">
|
|
||||||
<a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<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>
|
|
||||||
<template #suffix>
|
|
||||||
<span class="unit">个</span>
|
|
||||||
</template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<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>
|
|
||||||
<template #suffix>
|
|
||||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
|
||||||
</template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
<a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<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>
|
|
||||||
<template #suffix>
|
|
||||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
|
||||||
</template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item>
|
|
||||||
<!-- <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
|
||||||
style="border-right: none">
|
|
||||||
<a-space>
|
|
||||||
<a-avatar :size="54" class="col-avatar">
|
|
||||||
<img alt="avatar"
|
|
||||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image" />
|
|
||||||
</a-avatar>
|
|
||||||
<a-statistic :title="'提款人数'" :value="data.withdraw" :value-from="0" animation>
|
|
||||||
<template #suffix> 人 </template>
|
|
||||||
</a-statistic>
|
|
||||||
</a-space>
|
|
||||||
</a-grid-item> -->
|
|
||||||
<a-grid-item :span="24">
|
|
||||||
<a-divider class="panel-border" />
|
|
||||||
</a-grid-item>
|
|
||||||
</a-grid>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { index } from '@/api/dashboard';
|
|
||||||
import { Ref, onMounted, reactive, ref } from 'vue';
|
|
||||||
const data = reactive({
|
|
||||||
user_total: 0,
|
|
||||||
user_phone: 0,
|
|
||||||
withdraw: 0,
|
|
||||||
user_phone_onlin: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
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
|
|
||||||
})
|
|
||||||
|
|
||||||
const reset=()=>{}
|
|
||||||
const search=()=>{}
|
|
||||||
const queryParams=ref([])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.arco-grid.panel {
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 16px 20px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-col {
|
|
||||||
padding-left: 43px;
|
|
||||||
border-right: 1px solid rgb(var(--gray-2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-avatar {
|
|
||||||
margin-right: 12px;
|
|
||||||
background-color: var(--color-fill-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.up-icon {
|
|
||||||
color: rgb(var(--red-6));
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit {
|
|
||||||
margin-left: 8px;
|
|
||||||
color: rgb(var(--gray-8));
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.panel-border) {
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
|||||||
<a-divider class="panel-border" />
|
<a-divider class="panel-border" />
|
||||||
</a-grid-item>
|
</a-grid-item>
|
||||||
</a-grid>
|
</a-grid>
|
||||||
<!-- <a-grid :cols="24" :row-gap="16" class="panel">
|
<a-grid :cols="24" :row-gap="16" class="panel">
|
||||||
<a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
|
<a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-avatar :size="54" class="col-avatar">
|
<a-avatar :size="54" class="col-avatar">
|
||||||
@ -111,7 +111,7 @@
|
|||||||
<a-grid-item :span="24">
|
<a-grid-item :span="24">
|
||||||
<a-divider class="panel-border" />
|
<a-divider class="panel-border" />
|
||||||
</a-grid-item>
|
</a-grid-item>
|
||||||
</a-grid> -->
|
</a-grid>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -4,23 +4,14 @@
|
|||||||
<div class="panel">
|
<div class="panel">
|
||||||
<Banner />
|
<Banner />
|
||||||
<DataPanel />
|
<DataPanel />
|
||||||
<!-- <ContentChart /> -->
|
<ContentChart />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
|
||||||
<div class="left-side">
|
|
||||||
<div class="panel">
|
|
||||||
<DataPanelSearch></DataPanelSearch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
|
<a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
|
||||||
<!-- <a-grid-item
|
<a-grid-item
|
||||||
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
||||||
>
|
>
|
||||||
<PopularContent />
|
<PopularContent />
|
||||||
</a-grid-item> -->
|
</a-grid-item>
|
||||||
<a-grid-item
|
<a-grid-item
|
||||||
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
||||||
>
|
>
|
||||||
@ -34,11 +25,14 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Banner from './components/banner.vue';
|
import Banner from './components/banner.vue';
|
||||||
import DataPanel from './components/data-panel.vue';
|
import DataPanel from './components/data-panel.vue';
|
||||||
import DataPanelSearch from './components/data-panel-search.vue';
|
|
||||||
import ContentChart from './components/content-chart.vue';
|
import ContentChart from './components/content-chart.vue';
|
||||||
import PopularContent from './components/popular-content.vue';
|
import PopularContent from './components/popular-content.vue';
|
||||||
import CategoriesPercent from './components/categories-percent.vue';
|
import CategoriesPercent from './components/categories-percent.vue';
|
||||||
|
import RecentlyVisited from './components/recently-visited.vue';
|
||||||
|
import QuickOperation from './components/quick-operation.vue';
|
||||||
|
import Announcement from './components/announcement.vue';
|
||||||
|
import Carousel from './components/carousel.vue';
|
||||||
|
import Docs from './components/docs.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
|
<Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a-card class="general-card" :title="$t('menu.jobuser.userlist')">
|
<a-card class="general-card" :title="$t('menu.jobuser.userlist')">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :flex="1">
|
<a-col :flex="1">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user