This commit is contained in:
陈红丽 2024-12-17 13:48:36 +08:00
commit afdece6b4d
4 changed files with 383 additions and 400 deletions

View File

@ -31,8 +31,38 @@ export interface TypeConsole {
//获取主控台信息
export function getConsoleInfo() {
return http.request<TypeConsole>({
url: '/dashboard/console',
method: 'get',
});
return consoleInfo;
}
/**
*
*/
const consoleInfo = {
//访问量
visits: {
dayVisits: 32335,
rise: 48,
decline: 85,
amount: 948113,
},
//销售额
saleroom: {
weekSaleroom: 90758,
amount: 411553,
degree: 38.245882,
},
//订单量
orderLarge: {
weekLarge: 35704,
rise: 28,
decline: 28,
amount: 480578,
},
//成交额度
volume: {
weekLarge: 67800,
rise: 96,
decline: 81,
amount: 826814,
},
};

View File

@ -26,14 +26,16 @@ export function getUserInfo() {
* @description:
*/
export function register(params) {
return http.request({
url: `/register`,
method: 'POST',
params,
},
{
isTransformResponse: false,
});
return http.request(
{
url: `/register`,
method: 'POST',
params,
},
{
isTransformResponse: false,
},
);
}
/**

View File

@ -18,12 +18,15 @@
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
/**
* 定义选项
*/
const option = {
tooltip: {
trigger: 'axis',
axisPointer:{
type:'shadow'
}
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '10%',

View File

@ -1,233 +1,205 @@
<template>
<PageWrapper>
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">工作台</span>
</div>
</template>
<el-row :gutter="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="flex items-center">
<div>
<el-avatar :size="64" :src="schoolboy" />
<!--数据卡片-->
<el-row :gutter="12" class="pt-0">
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">访问量</span>
<el-tag class="ml-2" type="success"></el-tag>
</div>
<div>
<p class="px-4 text-xl">早安开始您一天的工作吧</p>
<p class="px-4 font-extralight">今日阴转大雨15 - 25出门记得带伞哦</p>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="flex justify-end w-full mt-4 sm:mt-0">
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">项目数</span>
<span class="text-2xl">16</span>
</div>
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">待办</span>
<span class="text-2xl">3/15</span>
</div>
<div class="flex flex-col justify-center flex-1 text-center md:text-right">
<span class="text-secondary">消息</span>
<span class="text-2xl">35</span>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-row :gutter="12" class="mt-0">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-card shadow="hover" class="custom-box-card card-1">
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<el-row justify="space-between" align="middle">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17">
<div>
<h3 class="my-2 text-3xl">云恒WMS</h3>
<p class="mb-2">开箱即用的中台前端/设计解决方案</p>
<ul class="text-xs leading-6">
<li class="truncate"
><el-badge
is-dot
type="info"
class="mr-2"
/></li
>
<li class="truncate"
><el-badge is-dot type="info" class="mr-2" />样式美观大方无缝对接 Element
Plus随意组合页面随心所欲</li
>
<li class="truncate"
><el-badge
is-dot
type="info"
class="mr-2"
/></li
>
<li class="truncate"
><el-badge
is-dot
type="info"
class="mr-2"
/></li
>
</ul>
</div>
<div class="flex items-center mt-3">
<div class="text-xs">评价</div>
<div
><el-rate
v-model="rateValue"
disabled
show-score
text-color="#ff9900"
score-template="{value}分"
size="large"
/>
</div>
</div>
<div class="flex items-center">
<div class="text-xs">畅销</div>
<div
><el-rate
v-model="rateValue"
disabled
show-score
text-color="#ff9900"
score-template="{value}分"
size="large"
/>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="7">
<el-image :src="salesDashboard" fit="contain" />
</el-col>
</el-row>
<div class="flex justify-between px-1 py-1">
<CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sm">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
<div class="text-sm">
周同比
<CountTo :startVal="1" suffix="%" :endVal="info.visits.decline" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总访问量</div>
<div class="text-sm">
<CountTo :startVal="1" :endVal="info.visits.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row :gutter="12">
<el-col :span="12">
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="2" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between mb-3">
<div>
<h3 class="text-base">访问量</h3>
<div class="pt-1">
<CountTo :startVal="1" v-if="!visits" :endVal="14465" class="text-2xl" />
</div>
</div>
<div>
<el-icon :size="30" :color="`var(--el-color-primary)`">
<SignalFilled />
</el-icon>
</div>
</div>
<div class="summary"
>增长幅度<el-tag class="ml-2" type="success">+7%</el-tag></div
>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover" class="custom-box-card"
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between mb-3">
<div>
<h3 class="text-base">销售额</h3>
<div class="pt-1">
<CountTo
prefix="¥"
:startVal="1"
v-if="!saleroom"
:endVal="32719"
class="text-2xl"
/>
</div>
</div>
<div>
<el-icon :size="30" :color="`var(--el-color-warning)`">
<TrophyTwotone />
</el-icon>
</div>
</div>
<div class="summary">下降幅度<el-tag class="ml-2" type="danger">-3%</el-tag></div>
</template>
</el-skeleton></el-card
>
</el-col>
<el-col :span="12">
<el-card shadow="hover" class="custom-box-card"
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between mb-3">
<div>
<h3 class="text-base">订单量</h3>
<div class="pt-1">
<CountTo
:startVal="1"
v-if="!orderLarge"
:endVal="46829"
class="text-2xl"
/>
</div>
</div>
<div>
<el-icon :size="30" :color="`var(--el-color-success)`">
<AccountBookTwotone />
</el-icon>
</div>
</div>
<div class="summary"
>下降幅度<el-tag class="ml-2" type="danger">-35%</el-tag></div
>
</template>
</el-skeleton></el-card
>
</el-col>
<el-col :span="12">
<el-card shadow="hover" class="custom-box-card"
><el-skeleton :rows="2" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between mb-3">
<div>
<h3 class="text-base">成交额</h3>
<div class="pt-1">
<CountTo
prefix="¥"
:startVal="1"
v-if="!volume"
:endVal="41071"
class="text-2xl"
/>
</div>
</div>
<div>
<el-icon :size="30" :color="`var(--el-color-danger)`">
<DollarCircleTwotone />
</el-icon>
</div>
</div>
<div class="summary"
>增长幅度<el-tag class="ml-2" type="success">+23%</el-tag></div
>
</template>
</el-skeleton></el-card
>
</el-col>
</el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">销售额</span>
<el-tag class="ml-2"></el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-2">
<CountTo
prefix="¥"
:startVal="1"
:endVal="info.saleroom.weekSaleroom"
class="text-3xl"
/>
</div>
<div class="flex justify-between px-2 py-1">
<div class="flex-1 text-sm">
<el-progress :percentage="70" />
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总销售额</div>
<div class="text-sm">
<CountTo prefix="¥" :startVal="1" :endVal="info.saleroom.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">订单量</span>
<el-tag class="ml-2" type="warning"></el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-1">
<CountTo :startVal="1" :endVal="info.orderLarge.weekLarge" class="text-3xl" />
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.rise" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
<div class="text-sn">
周同比
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.decline" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 转化率</div>
<div class="text-sm">
<CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base">成交额</span>
<el-tag class="ml-2" type="danger"></el-tag>
</div>
</template>
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default>
<div class="flex justify-between px-1 py-1">
<CountTo
prefix="¥"
:startVal="1"
:endVal="info.volume.weekLarge"
class="text-3xl"
/>
</div>
<div class="flex justify-between px-1 py-1">
<div class="text-sn">
日同比
<CountTo :startVal="1" suffix="%" :endVal="info.volume.rise" />
<el-icon :color="`var(--el-color-success)`" size="14"
><ArrowUpOutlined
/></el-icon>
</div>
<div class="text-sn">
月同比
<CountTo :startVal="1" suffix="%" :endVal="info.volume.decline" />
<el-icon :color="`var(--el-color-danger)`" size="14"
><ArrowDownOutlined
/></el-icon>
</div>
</div>
<el-divider style="margin: 16px 0 10px 0" />
<div class="flex justify-between py-1">
<div class="text-sm"> 总成交额</div>
<div class="text-sm">
<CountTo prefix="¥" :startVal="1" :endVal="info.volume.amount" />
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<!-- 快捷导航卡片 -->
<el-row :gutter="12">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-col
:xs="24"
:sm="12"
:md="6"
:lg="6"
:xl="3"
v-for="(item, index) in iconList"
:key="index"
>
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="3" :loading="loading" style="width: 100%">
<template #default>
<div class="py-2 cursor-pointer">
<p class="flex justify-center">
<i :style="{ width: '32px', color: item.color, fontSize: `${item.size}px` }">
<component
:is="item.icon"
:style="{ color: item.color, fontSize: `${item.size}px` }"
v-on="item.eventObject || {}"
/>
</i>
</p>
<p class="flex justify-center mb-0"
><span>{{ item.title }}</span></p
>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<!-- 数据图标统计 -->
<el-row :gutter="12">
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
<el-card shadow="hover" class="custom-box-card">
<template #header>
<div class="card-header">
@ -241,18 +213,6 @@
</el-skeleton>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card">
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default><Pie /></template>
</el-skeleton>
<el-table :data="revenue" style="width: 100%">
<el-table-column prop="source" label="来源" />
<el-table-column prop="value" label="收入" sortable align="right" width="80" />
<el-table-column prop="address" label="占比" :formatter="formatter" align="right" />
</el-table>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card card-4">
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
@ -290,7 +250,6 @@
<el-skeleton-item variant="text" style="width: 30%" />
</div>
</template>
<!-- 自定义骨架屏 end -->
<template #default>
<div class="pt-4 logo">
@ -330,184 +289,173 @@
</template>
<script lang="ts" setup>
import { ref, onMounted,h } from 'vue';
import { ref, onMounted, h, reactive } from 'vue';
import 'element-plus/theme-chalk/display.css';
import NewVisitAmount from './components/NewVisitAmount.vue';
import { getConsoleInfo } from '@/api/dashboard/console';
import { CountTo } from '@/components/CountTo/index';
import Pie from '../console/components/Pie.vue';
import VisiTab from '../console/components/VisiTab.vue';
import { ElNotification} from 'element-plus';
import salesDashboard from '@/assets/images/sales-dashboard.svg';
import schoolboy from '@/assets/images/schoolboy.png';
import { getConsoleInfo } from '@/api/dashboard/console';
import { ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';
import {
SignalFilled,
TrophyTwotone,
DollarCircleTwotone,
AccountBookTwotone,
UsergroupAddOutlined,
BarChartOutlined,
ShoppingCartOutlined,
AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
ArrowUpOutlined,
ArrowDownOutlined,
} from '@vicons/antd';
import type {
TypeConsole,
TypeOrderLarge,
TypeSaleroom,
TypeVisits,
} from '@/api/dashboard/console';
/**
* 定义参数
*/
const router = useRouter();
const loading = ref(true);
const rateValue = ref(5);
const visits = ref<TypeVisits>();
const saleroom = ref<TypeSaleroom>();
const orderLarge = ref<TypeOrderLarge>();
const volume = ref<TypeOrderLarge>();
/**
* 定义参数
*/
const info = reactive<any>({
saleroom: {},
orderLarge: {},
visits: {},
volume: {},
});
//
const iconList = [
{
icon: UsergroupAddOutlined,
size: '32',
title: '用户管理',
color: '#69c0ff',
eventObject: {
click: () => {
router.push({ path: '/system/user' });
},
},
},
{
icon: BarChartOutlined,
size: '32',
title: '租户管理',
color: '#69c0ff',
eventObject: {
click: () => {
router.push({ path: '/system/tenant' });
},
},
},
{
icon: ShoppingCartOutlined,
size: '32',
title: '操作日志',
color: '#ff9c6e',
eventObject: {
click: () => {
router.push({ path: '/system/logger/operLog' });
},
},
},
{
icon: AccountBookOutlined,
size: '32',
title: '参数管理',
color: '#b37feb',
eventObject: {
click: () => {
router.push({ path: '/data/param' });
},
},
},
{
icon: CreditCardOutlined,
size: '32',
title: '字典管理',
color: '#ffd666',
eventObject: {
click: () => {
router.push({ path: '/data/dict' });
},
},
},
{
icon: MailOutlined,
size: '32',
title: '消息管理',
color: '#5cdbd3',
eventObject: {
click: () => {
router.push({ path: '/data/message' });
},
},
},
{
icon: TagsOutlined,
size: '32',
title: '定时任务',
color: '#ff85c0',
eventObject: {
click: () => {
router.push({ path: '/monitor/job' });
},
},
},
{
icon: SettingOutlined,
size: '32',
title: '配置管理',
color: '#ffc069',
eventObject: {
click: () => {
router.push({ path: '/data/config' });
},
},
},
];
/**
* 钩子函数
*/
onMounted(async () => {
// const res: TypeConsole = await getConsoleInfo();
// visits.value = res.visits;
// saleroom.value = res.saleroom;
// orderLarge.value = res.orderLarge;
// volume.value = res.volume;
const res = await getConsoleInfo();
info.saleroom = res.saleroom;
info.orderLarge = res.orderLarge;
info.visits = res.visits;
info.volume = res.volume;
loading.value = false;
if (!localStorage.getItem('adClosed')) {
ElNotification({
type:'info',
type: 'info',
title: '双十二限时特惠',
message:h('div', [
h('span', '正在进行双十二限时促销活动,五折特平惠,'),
h(
'a',
{
href: 'https://www.baidu.com',
target: '_blank',
},
'前往购买授权',
),
]),
message: h('div', [
h('span', '正在进行双十二限时促销活动,五折特平惠,'),
h(
'a',
{
href: 'https://www.baidu.com',
target: '_blank',
},
'前往购买授权',
),
]),
duration: 5000,
});
localStorage.setItem('adClosed', 'true');
}
});
/**
* 跳转URL
*/
function goUrl() {
window.open('https://www.baidu.com', '_blank');
}
const comment = [
{
id: 1,
name: '武军',
avatar: schoolboy,
content: '这个系统太好用了',
datetime: '5分钟前',
},
{
id: 2,
name: '顾平',
avatar: schoolboy,
content: 'UI界面有两下子',
datetime: '1小时前',
},
{
id: 3,
name: '何军',
avatar: schoolboy,
content: '颜值有点高呀',
datetime: '1天前',
},
{
id: 4,
name: '朱一龙',
avatar: schoolboy,
content: '给作者点赞',
datetime: '2个月前',
},
{
id: 5,
name: '夏勇',
avatar: schoolboy,
content: '还是多提宝贵建议吧',
datetime: '3年前',
},
];
const tableData = [
{
id: 1,
name: '黎磊',
avatar: schoolboy,
isMember: true,
telephone: '1281391234',
date: '2021-12-14',
},
{
id: 2,
name: '周强',
avatar: schoolboy,
isMember: true,
telephone: '1281391234',
date: '2021-12-14',
},
{
id: 3,
name: '常静',
avatar: schoolboy,
isMember: true,
telephone: '1281391234',
date: '2021-12-14',
},
{
id: 4,
name: '尹丽',
avatar: schoolboy,
isMember: true,
telephone: '1281391234',
date: '2021-12-14',
},
{
id: 5,
name: '江秀英',
avatar: schoolboy,
isMember: false,
telephone: '1281391234',
date: '2021-12-14',
},
{
id: 6,
name: '杜杰',
avatar: schoolboy,
isMember: true,
telephone: '1281391234',
date: '2021-12-14',
},
];
//
const revenue: any = [
// {
// id: 1,
// source: '',
// value: 525,
// answer: '',
// },
// {
// id: 2,
// source: '',
// value: 305,
// answer: '',
// },
// {
// id: 3,
// source: '',
// value: 134,
// answer: '',
// },
// {
// id: 4,
// source: '',
// value: 60,
// answer: '',
// },
];
</script>
<style lang="scss" scoped>