gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://111.229.35.227:3000/gitadmin/wms-elevue

Browse Source
This commit is contained in:
陈红丽 2024-12-17 13:48:36 +08:00
commit afdece6b4d
4 changed files with 383 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/api/dashboard/console.ts
View File

@ -31,8 +31,38 @@ export interface TypeConsole {
//获取主控台信息 //获取主控台信息
export function getConsoleInfo() { export function getConsoleInfo() {
return http.request<TypeConsole>({ return consoleInfo;
url: '/dashboard/console',
method: 'get',
});
} }
/**
* 模拟控制台数据
*/
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,
},
};

18
src/api/system/user.ts
View File

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

9
src/views/dashboard/console/components/NewVisitAmount.vue
View File

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

718
src/views/dashboard/console/index.vue
View File

@ -1,233 +1,205 @@
<template> <template>
<PageWrapper> <PageWrapper>
<el-card shadow="hover" class="custom-box-card"> <!--数据卡片-->
<template #header> <el-row :gutter="12" class="pt-0">
<div class="flex items-center justify-between"> <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<span class="text-base">工作台</span> <el-card shadow="hover" class="custom-box-card">
</div> <template #header>
</template> <div class="flex items-center justify-between">
<el-row :gutter="12"> <span class="text-base">访问量</span>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-tag class="ml-2" type="success">日</el-tag>
<div class="flex items-center">
<div>
<el-avatar :size="64" :src="schoolboy" />
</div> </div>
<div> </template>
<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">
<el-skeleton :rows="5" :loading="loading" style="width: 100%"> <el-skeleton :rows="5" :loading="loading" style="width: 100%">
<template #default> <template #default>
<el-row justify="space-between" align="middle"> <div class="flex justify-between px-1 py-1">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17"> <CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
<div> </div>
<h3 class="my-2 text-3xl">云恒WMS</h3> <div class="flex justify-between px-1 py-1">
<p class="mb-2">开箱即用的中台前端/设计解决方案</p> <div class="text-sm">
<ul class="text-xs leading-6"> 日同比
<li class="truncate" <CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
><el-badge <el-icon :color="`var(--el-color-success)`" size="14"
is-dot ><ArrowUpOutlined
type="info" /></el-icon>
class="mr-2" </div>
/>内置常用模板，无需考虑交互排版，助你高效开发</li <div class="text-sm">
> 周同比
<li class="truncate" <CountTo :startVal="1" suffix="%" :endVal="info.visits.decline" />
><el-badge is-dot type="info" class="mr-2" />样式美观大方，无缝对接 Element <el-icon :color="`var(--el-color-success)`" size="14"
Plus，随意组合页面，随心所欲</li ><ArrowUpOutlined
> /></el-icon>
<li class="truncate" </div>
><el-badge </div>
is-dot <el-divider style="margin: 16px 0 10px 0" />
type="info" <div class="flex justify-between py-1">
class="mr-2" <div class="text-sm"> 总访问量：</div>
/>丰富的布局模式，具有高可配性，满足您的各类布局需求</li <div class="text-sm">
> <CountTo :startVal="1" :endVal="info.visits.amount" />
<li class="truncate" </div>
><el-badge </div>
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>
</template> </template>
</el-skeleton> </el-skeleton>
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"> <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
<el-row :gutter="12"> <el-card shadow="hover" class="custom-box-card">
<el-col :span="12"> <template #header>
<el-card shadow="hover" class="custom-box-card"> <div class="flex items-center justify-between">
<el-skeleton :rows="2" :loading="loading" style="width: 100%"> <span class="text-base">销售额</span>
<template #default> <el-tag class="ml-2">周</el-tag>
<div class="flex justify-between mb-3"> </div>
<div> </template>
<h3 class="text-base">访问量</h3> <el-skeleton :rows="5" :loading="loading" style="width: 100%">
<div class="pt-1"> <template #default>
<CountTo :startVal="1" v-if="!visits" :endVal="14465" class="text-2xl" /> <div class="flex justify-between px-1 py-2">
</div> <CountTo
</div> prefix="￥"
<div> :startVal="1"
<el-icon :size="30" :color="`var(--el-color-primary)`"> :endVal="info.saleroom.weekSaleroom"
<SignalFilled /> class="text-3xl"
</el-icon> />
</div> </div>
</div> <div class="flex justify-between px-2 py-1">
<div class="summary" <div class="flex-1 text-sm">
>增长幅度<el-tag class="ml-2" type="success">+7%</el-tag></div <el-progress :percentage="70" />
> </div>
</template> </div>
</el-skeleton> <el-divider style="margin: 16px 0 10px 0" />
</el-card> <div class="flex justify-between py-1">
</el-col> <div class="text-sm"> 总销售额：</div>
<el-col :span="12"> <div class="text-sm">
<el-card shadow="hover" class="custom-box-card" <CountTo prefix="￥" :startVal="1" :endVal="info.saleroom.amount" />
><el-skeleton :rows="2" :loading="loading" style="width: 100%"> </div>
<template #default> </div>
<div class="flex justify-between mb-3"> </template>
<div> </el-skeleton>
<h3 class="text-base">销售额</h3> </el-card>
<div class="pt-1"> </el-col>
<CountTo <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
prefix="￥" <el-card shadow="hover" class="custom-box-card">
:startVal="1" <template #header>
v-if="!saleroom" <div class="flex items-center justify-between">
:endVal="32719" <span class="text-base">订单量</span>
class="text-2xl" <el-tag class="ml-2" type="warning">周</el-tag>
/> </div>
</div> </template>
</div> <el-skeleton :rows="5" :loading="loading" style="width: 100%">
<div> <template #default>
<el-icon :size="30" :color="`var(--el-color-warning)`"> <div class="flex justify-between px-1 py-1">
<TrophyTwotone /> <CountTo :startVal="1" :endVal="info.orderLarge.weekLarge" class="text-3xl" />
</el-icon> </div>
</div> <div class="flex justify-between px-1 py-1">
</div> <div class="text-sn">
<div class="summary">下降幅度<el-tag class="ml-2" type="danger">-3%</el-tag></div> 日同比
</template> <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.rise" />
</el-skeleton></el-card <el-icon :color="`var(--el-color-danger)`" size="14"
> ><ArrowDownOutlined
</el-col> /></el-icon>
<el-col :span="12"> </div>
<el-card shadow="hover" class="custom-box-card" <div class="text-sn">
><el-skeleton :rows="2" :loading="loading" style="width: 100%"> 周同比
<template #default> <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.decline" />
<div class="flex justify-between mb-3"> <el-icon :color="`var(--el-color-danger)`" size="14"
<div> ><ArrowDownOutlined
<h3 class="text-base">订单量</h3> /></el-icon>
<div class="pt-1"> </div>
<CountTo </div>
:startVal="1" <el-divider style="margin: 16px 0 10px 0" />
v-if="!orderLarge" <div class="flex justify-between py-1">
:endVal="46829" <div class="text-sm"> 转化率：</div>
class="text-2xl" <div class="text-sm">
/> <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.amount" />
</div> </div>
</div> </div>
<div> </template>
<el-icon :size="30" :color="`var(--el-color-success)`"> </el-skeleton>
<AccountBookTwotone /> </el-card>
</el-icon> </el-col>
</div> <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
</div> <el-card shadow="hover" class="custom-box-card">
<div class="summary" <template #header>
>下降幅度<el-tag class="ml-2" type="danger">-35%</el-tag></div <div class="flex items-center justify-between">
> <span class="text-base">成交额</span>
</template> <el-tag class="ml-2" type="danger">月</el-tag>
</el-skeleton></el-card </div>
> </template>
</el-col> <el-skeleton :rows="5" :loading="loading" style="width: 100%">
<el-col :span="12"> <template #default>
<el-card shadow="hover" class="custom-box-card" <div class="flex justify-between px-1 py-1">
><el-skeleton :rows="2" :loading="loading" style="width: 100%"> <CountTo
<template #default> prefix="￥"
<div class="flex justify-between mb-3"> :startVal="1"
<div> :endVal="info.volume.weekLarge"
<h3 class="text-base">成交额</h3> class="text-3xl"
<div class="pt-1"> />
<CountTo </div>
prefix="￥" <div class="flex justify-between px-1 py-1">
:startVal="1" <div class="text-sn">
v-if="!volume" 日同比
:endVal="41071" <CountTo :startVal="1" suffix="%" :endVal="info.volume.rise" />
class="text-2xl" <el-icon :color="`var(--el-color-success)`" size="14"
/> ><ArrowUpOutlined
</div> /></el-icon>
</div> </div>
<div> <div class="text-sn">
<el-icon :size="30" :color="`var(--el-color-danger)`"> 月同比
<DollarCircleTwotone /> <CountTo :startVal="1" suffix="%" :endVal="info.volume.decline" />
</el-icon> <el-icon :color="`var(--el-color-danger)`" size="14"
</div> ><ArrowDownOutlined
</div> /></el-icon>
<div class="summary" </div>
>增长幅度<el-tag class="ml-2" type="success">+23%</el-tag></div </div>
> <el-divider style="margin: 16px 0 10px 0" />
</template> <div class="flex justify-between py-1">
</el-skeleton></el-card <div class="text-sm"> 总成交额：</div>
> <div class="text-sm">
</el-col> <CountTo prefix="￥" :startVal="1" :endVal="info.volume.amount" />
</el-row> </div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
<!-- 快捷导航卡片 -->
<el-row :gutter="12"> <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"> <el-card shadow="hover" class="custom-box-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
@ -241,18 +213,6 @@
</el-skeleton> </el-skeleton>
</el-card> </el-card>
</el-col> </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-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<el-card shadow="hover" class="custom-box-card card-4"> <el-card shadow="hover" class="custom-box-card card-4">
<el-skeleton :rows="5" :loading="loading" style="width: 100%"> <el-skeleton :rows="5" :loading="loading" style="width: 100%">
@ -290,7 +250,6 @@
<el-skeleton-item variant="text" style="width: 30%" /> <el-skeleton-item variant="text" style="width: 30%" />
</div> </div>
</template> </template>
<!-- 自定义骨架屏 end --> <!-- 自定义骨架屏 end -->
<template #default> <template #default>
<div class="pt-4 logo"> <div class="pt-4 logo">
@ -330,184 +289,173 @@
</template> </template>
<script lang="ts" setup> <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 'element-plus/theme-chalk/display.css';
import NewVisitAmount from './components/NewVisitAmount.vue'; import NewVisitAmount from './components/NewVisitAmount.vue';
import { getConsoleInfo } from '@/api/dashboard/console';
import { CountTo } from '@/components/CountTo/index'; import { CountTo } from '@/components/CountTo/index';
import Pie from '../console/components/Pie.vue';
import VisiTab from '../console/components/VisiTab.vue'; import VisiTab from '../console/components/VisiTab.vue';
import { ElNotification} from 'element-plus'; import { getConsoleInfo } from '@/api/dashboard/console';
import salesDashboard from '@/assets/images/sales-dashboard.svg'; import { ElNotification } from 'element-plus';
import schoolboy from '@/assets/images/schoolboy.png'; import { useRouter } from 'vue-router';
import { import {
SignalFilled, UsergroupAddOutlined,
TrophyTwotone, BarChartOutlined,
DollarCircleTwotone, ShoppingCartOutlined,
AccountBookTwotone, AccountBookOutlined,
CreditCardOutlined,
MailOutlined,
TagsOutlined,
SettingOutlined,
ArrowUpOutlined,
ArrowDownOutlined,
} from '@vicons/antd'; } from '@vicons/antd';
import type {
TypeConsole,
TypeOrderLarge,
TypeSaleroom,
TypeVisits,
} from '@/api/dashboard/console';
/**
* 定义参数
*/
const router = useRouter();
const loading = ref(true); 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 () => { onMounted(async () => {
// const res: TypeConsole = await getConsoleInfo(); const res = await getConsoleInfo();
// visits.value = res.visits; info.saleroom = res.saleroom;
// saleroom.value = res.saleroom; info.orderLarge = res.orderLarge;
// orderLarge.value = res.orderLarge; info.visits = res.visits;
// volume.value = res.volume; info.volume = res.volume;
loading.value = false; loading.value = false;
if (!localStorage.getItem('adClosed')) { if (!localStorage.getItem('adClosed')) {
ElNotification({ ElNotification({
type:'info', type: 'info',
title: '双十二限时特惠', title: '双十二限时特惠',
message:h('div', [ message: h('div', [
h('span', '正在进行双十二限时促销活动，五折特平惠，'), h('span', '正在进行双十二限时促销活动，五折特平惠，'),
h( h(
'a', 'a',
{ {
href: 'https://www.baidu.com', href: 'https://www.baidu.com',
target: '_blank', target: '_blank',
}, },
'前往购买授权', '前往购买授权',
), ),
]), ]),
duration: 5000, duration: 5000,
}); });
localStorage.setItem('adClosed', 'true'); localStorage.setItem('adClosed', 'true');
} }
}); });
/**
* 跳转URL
*/
function goUrl() { function goUrl() {
window.open('https://www.baidu.com', '_blank'); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>