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

优化控制台

Browse Source
This commit is contained in:
zjl 2024-12-16 19:00:30 +08:00
parent 6936835a1a
commit 7acba96117
1 changed files with 185 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,128 +1,201 @@
<template> <template>
<div class="console"> <div class="console">
<!--数据卡片-->
<n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8"> <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
<n-grid-item> <n-grid-item>
<n-card size="small" :bordered="false" hoverable> <n-card
<n-space justify="space-between" align="center"> title="访问量"
<div> :segmented="{ content: true, footer: true }"
<img src="~@/assets/images/visits.svg" class="top-card-img" /> size="small"
<div class="pt-2">访问量</div> :bordered="false"
</div> >
<div> <template #header-extra>
<n-text depth="3">周</n-text> <n-tag type="success">日</n-tag>
</div> </template>
</n-space> <div class="flex justify-between px-1 py-1">
<n-space justify="space-between" align="center"> <n-skeleton v-if="loading" :width="100" size="medium" />
<n-h1 class="mb-0">98735</n-h1> <CountTo v-else :startVal="1" :endVal="visits?.dayVisits" class="text-3xl" />
<div> </div>
<n-tag <div class="flex justify-between px-1 py-1">
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }" <div class="text-sn">
type="success" <n-skeleton v-if="loading" :width="100" size="medium" />
round <template v-else>
size="small" 日同比
> <CountTo :startVal="1" suffix="%" :endVal="visits?.rise" />
+10% <n-icon size="12" color="#00ff6f">
</n-tag> <CaretUpOutlined />
<n-text type="success" class="ml-2">
<n-icon size="16">
<ArrowUpOutlined />
</n-icon> </n-icon>
</n-text> </template>
</div> </div>
</n-space> <div class="text-sn">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
周同比
<CountTo :startVal="1" suffix="%" :endVal="visits?.decline" />
<n-icon size="12" color="#ffde66">
<CaretDownOutlined />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<n-skeleton v-if="loading" text :repeat="2" />
<template v-else>
<div class="text-sn"> 总访问量：</div>
<div class="text-sn">
<CountTo :startVal="1" :endVal="visits?.amount" />
</div>
</template>
</div>
</template>
</n-card> </n-card>
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-card size="small" :bordered="false" hoverable> <n-card
<n-space justify="space-between" align="center"> title="销售额"
<div> :segmented="{ content: true, footer: true }"
<img src="~@/assets/images/sale.svg" class="top-card-img" /> size="small"
<div class="pt-2">销售额</div> :bordered="false"
>
<template #header-extra>
<n-tag type="info">周</n-tag>
</template>
<div class="flex justify-between px-1 py-1">
<n-skeleton v-if="loading" :width="100" size="medium" />
<CountTo
v-else
prefix="￥"
:startVal="1"
:endVal="saleroom?.weekSaleroom"
class="text-3xl"
/>
</div>
<div class="flex justify-between px-2 py-2">
<div class="flex-1 text-sn">
<n-progress
type="line"
:percentage="saleroom?.degree"
:indicator-placement="'inside'"
processing
/>
</div> </div>
<div> </div>
<n-text depth="3">周</n-text> <template #footer>
<div class="flex justify-between">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 总销售额：</div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="saleroom?.amount" />
</div>
</template>
</div> </div>
</n-space> </template>
<n-space justify="space-between" align="center">
<n-h1 class="mb-0">￥3980</n-h1>
<div>
<n-tag
:color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
type="error"
round
size="small"
>
-20%
</n-tag>
<n-text type="error" class="ml-2">
<n-icon size="16">
<ArrowDownOutlined />
</n-icon>
</n-text>
</div>
</n-space>
</n-card> </n-card>
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-card size="small" :bordered="false" hoverable> <n-card
<n-space justify="space-between" align="center"> title="订单量"
<div> :segmented="{ content: true, footer: true }"
<img src="~@/assets/images/order_count.svg" class="top-card-img" /> size="small"
<div class="pt-2">订单量</div> :bordered="false"
</div> >
<div> <template #header-extra>
<n-text depth="3">周</n-text> <n-tag type="warning">周</n-tag>
</div> </template>
</n-space> <div class="flex justify-between px-1 py-1">
<n-space justify="space-between" align="center"> <n-skeleton v-if="loading" :width="100" size="medium" />
<n-h1 class="mb-0">3685</n-h1> <CountTo v-else :startVal="1" :endVal="orderLarge?.weekLarge" class="text-3xl" />
<div> </div>
<n-tag <div class="flex justify-between px-1 py-1">
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }" <div class="text-sn">
type="success" <n-skeleton v-if="loading" :width="100" size="medium" />
round <template v-else>
size="small" 日同比
> <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
+35% <n-icon size="12" color="#00ff6f">
</n-tag> <CaretUpOutlined />
<n-text type="success" class="ml-2">
<n-icon size="16">
<ArrowUpOutlined />
</n-icon> </n-icon>
</n-text> </template>
</div> </div>
</n-space> <div class="text-sn">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
周同比
<CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
<n-icon size="12" color="#ffde66">
<CaretDownOutlined />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 转化率：</div>
<div class="text-sn">
<CountTo :startVal="1" suffix="%" :endVal="orderLarge?.amount" />
</div>
</template>
</div>
</template>
</n-card> </n-card>
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-card size="small" :bordered="false" hoverable> <n-card
<n-space justify="space-between" align="center"> title="成交额"
<div> :segmented="{ content: true, footer: true }"
<img src="~@/assets/images/volume.svg" class="top-card-img" /> size="small"
<div class="pt-2">成交额</div> :bordered="false"
</div> >
<div> <template #header-extra>
<n-text depth="3">月</n-text> <n-tag type="error">月</n-tag>
</div> </template>
</n-space> <div class="flex justify-between px-1 py-1">
<n-space justify="space-between" align="center"> <n-skeleton v-if="loading" :width="100" size="medium" />
<n-h1 class="mb-0">￥29856</n-h1> <CountTo
<div> v-else
<n-tag prefix="￥"
:color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }" :startVal="1"
type="error" :endVal="volume?.weekLarge"
round class="text-3xl"
size="small" />
> </div>
-5% <div class="flex justify-between px-1 py-1">
</n-tag> <div class="text-sn">
<n-text type="error" class="ml-2"> <n-skeleton v-if="loading" :width="100" size="medium" />
<n-icon size="16"> <template v-else>
<ArrowDownOutlined /> 月同比
<CountTo :startVal="1" suffix="%" :endVal="volume?.rise" />
<n-icon size="12" color="#00ff6f">
<CaretUpOutlined />
</n-icon> </n-icon>
</n-text> </template>
</div> </div>
</n-space> <div class="text-sn">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
月同比
<CountTo :startVal="1" suffix="%" :endVal="volume?.decline" />
<n-icon size="12" color="#ffde66">
<CaretDownOutlined />
</n-icon>
</template>
</div>
</div>
<template #footer>
<div class="flex justify-between">
<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
<div class="text-sn"> 总成交额：</div>
<div class="text-sn">
<CountTo prefix="￥" :startVal="1" :endVal="volume?.amount" />
</div>
</template>
</div>
</template>
</n-card> </n-card>
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
@ -220,7 +293,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, h } from 'vue'; import { onMounted, h } from 'vue';
import { ArrowUpOutlined, ArrowDownOutlined } from '@vicons/antd';
import { useNotification } from 'naive-ui'; import { useNotification } from 'naive-ui';
import NewVisitAmount from './components/NewVisitAmount.vue'; import NewVisitAmount from './components/NewVisitAmount.vue';
import VisitSource from './components/VisitSource.vue'; import VisitSource from './components/VisitSource.vue';
@ -244,7 +316,7 @@
{ {
icon: UsergroupAddOutlined, icon: UsergroupAddOutlined,
size: '32', size: '32',
title: '用户', title: '用户管理',
color: '#69c0ff', color: '#69c0ff',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -253,7 +325,7 @@
{ {
icon: BarChartOutlined, icon: BarChartOutlined,
size: '32', size: '32',
title: '分析', title: '租户管理',
color: '#69c0ff', color: '#69c0ff',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -262,7 +334,7 @@
{ {
icon: ShoppingCartOutlined, icon: ShoppingCartOutlined,
size: '32', size: '32',
title: '商品', title: '操作日志',
color: '#ff9c6e', color: '#ff9c6e',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -271,7 +343,7 @@
{ {
icon: AccountBookOutlined, icon: AccountBookOutlined,
size: '32', size: '32',
title: '订单', title: '参数管理',
color: '#b37feb', color: '#b37feb',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -280,7 +352,7 @@
{ {
icon: CreditCardOutlined, icon: CreditCardOutlined,
size: '32', size: '32',
title: '票据', title: '字典管理',
color: '#ffd666', color: '#ffd666',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -289,7 +361,7 @@
{ {
icon: MailOutlined, icon: MailOutlined,
size: '32', size: '32',
title: '消息', title: '消息管理',
color: '#5cdbd3', color: '#5cdbd3',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -298,7 +370,7 @@
{ {
icon: TagsOutlined, icon: TagsOutlined,
size: '32', size: '32',
title: '标签', title: '定时任务',
color: '#ff85c0', color: '#ff85c0',
eventObject: { eventObject: {
click: () => {}, click: () => {},
@ -307,7 +379,7 @@
{ {
icon: SettingOutlined, icon: SettingOutlined,
size: '32', size: '32',
title: '配置', title: '配置管理',
color: '#ffc069', color: '#ffc069',
eventObject: { eventObject: {
click: () => {}, click: () => {},