优化控制台
This commit is contained in:
zjl
parent
6936835a1a
commit
7acba96117
@ -1,128 +1,201 @@
|
||||
<template>
|
||||
<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-item>
|
||||
<n-card size="small" :bordered="false" hoverable>
|
||||
<n-space justify="space-between" align="center">
|
||||
<div>
|
||||
<img src="~@/assets/images/visits.svg" class="top-card-img" />
|
||||
<div class="pt-2">访问量</div>
|
||||
</div>
|
||||
<div>
|
||||
<n-text depth="3">周</n-text>
|
||||
</div>
|
||||
</n-space>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-h1 class="mb-0">98735</n-h1>
|
||||
<div>
|
||||
<n-tag
|
||||
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
|
||||
type="success"
|
||||
round
|
||||
<n-card
|
||||
title="访问量"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
size="small"
|
||||
:bordered="false"
|
||||
>
|
||||
+10%
|
||||
</n-tag>
|
||||
<n-text type="success" class="ml-2">
|
||||
<n-icon size="16">
|
||||
<ArrowUpOutlined />
|
||||
</n-icon>
|
||||
</n-text>
|
||||
<template #header-extra>
|
||||
<n-tag type="success">日</n-tag>
|
||||
</template>
|
||||
<div class="flex justify-between px-1 py-1">
|
||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
||||
<CountTo v-else :startVal="1" :endVal="visits?.dayVisits" class="text-3xl" />
|
||||
</div>
|
||||
</n-space>
|
||||
<div class="flex justify-between px-1 py-1">
|
||||
<div class="text-sn">
|
||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
||||
<template v-else>
|
||||
日同比
|
||||
<CountTo :startVal="1" suffix="%" :endVal="visits?.rise" />
|
||||
<n-icon size="12" color="#00ff6f">
|
||||
<CaretUpOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</div>
|
||||
<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-grid-item>
|
||||
<n-grid-item>
|
||||
<n-card size="small" :bordered="false" hoverable>
|
||||
<n-space justify="space-between" align="center">
|
||||
<div>
|
||||
<img src="~@/assets/images/sale.svg" class="top-card-img" />
|
||||
<div class="pt-2">销售额</div>
|
||||
</div>
|
||||
<div>
|
||||
<n-text depth="3">周</n-text>
|
||||
</div>
|
||||
</n-space>
|
||||
<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
|
||||
<n-card
|
||||
title="销售额"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
size="small"
|
||||
:bordered="false"
|
||||
>
|
||||
-20%
|
||||
</n-tag>
|
||||
<n-text type="error" class="ml-2">
|
||||
<n-icon size="16">
|
||||
<ArrowDownOutlined />
|
||||
</n-icon>
|
||||
</n-text>
|
||||
<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>
|
||||
</n-space>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-card size="small" :bordered="false" hoverable>
|
||||
<n-space justify="space-between" align="center">
|
||||
<div>
|
||||
<img src="~@/assets/images/order_count.svg" class="top-card-img" />
|
||||
<div class="pt-2">订单量</div>
|
||||
</div>
|
||||
<div>
|
||||
<n-text depth="3">周</n-text>
|
||||
</div>
|
||||
</n-space>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-h1 class="mb-0">3685</n-h1>
|
||||
<div>
|
||||
<n-tag
|
||||
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
|
||||
type="success"
|
||||
round
|
||||
<n-card
|
||||
title="订单量"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
size="small"
|
||||
:bordered="false"
|
||||
>
|
||||
+35%
|
||||
</n-tag>
|
||||
<n-text type="success" class="ml-2">
|
||||
<n-icon size="16">
|
||||
<ArrowUpOutlined />
|
||||
</n-icon>
|
||||
</n-text>
|
||||
<template #header-extra>
|
||||
<n-tag type="warning">周</n-tag>
|
||||
</template>
|
||||
<div class="flex justify-between px-1 py-1">
|
||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
||||
<CountTo v-else :startVal="1" :endVal="orderLarge?.weekLarge" class="text-3xl" />
|
||||
</div>
|
||||
</n-space>
|
||||
<div class="flex justify-between px-1 py-1">
|
||||
<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="#00ff6f">
|
||||
<CaretUpOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</div>
|
||||
<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-grid-item>
|
||||
<n-grid-item>
|
||||
<n-card size="small" :bordered="false" hoverable>
|
||||
<n-space justify="space-between" align="center">
|
||||
<div>
|
||||
<img src="~@/assets/images/volume.svg" class="top-card-img" />
|
||||
<div class="pt-2">成交额</div>
|
||||
</div>
|
||||
<div>
|
||||
<n-text depth="3">月</n-text>
|
||||
</div>
|
||||
</n-space>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-h1 class="mb-0">￥29856</n-h1>
|
||||
<div>
|
||||
<n-tag
|
||||
:color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
|
||||
type="error"
|
||||
round
|
||||
<n-card
|
||||
title="成交额"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
size="small"
|
||||
:bordered="false"
|
||||
>
|
||||
-5%
|
||||
</n-tag>
|
||||
<n-text type="error" class="ml-2">
|
||||
<n-icon size="16">
|
||||
<ArrowDownOutlined />
|
||||
</n-icon>
|
||||
</n-text>
|
||||
<template #header-extra>
|
||||
<n-tag type="error">月</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="volume?.weekLarge"
|
||||
class="text-3xl"
|
||||
/>
|
||||
</div>
|
||||
</n-space>
|
||||
<div class="flex justify-between px-1 py-1">
|
||||
<div class="text-sn">
|
||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
||||
<template v-else>
|
||||
月同比
|
||||
<CountTo :startVal="1" suffix="%" :endVal="volume?.rise" />
|
||||
<n-icon size="12" color="#00ff6f">
|
||||
<CaretUpOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</div>
|
||||
<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-grid-item>
|
||||
</n-grid>
|
||||
@ -220,7 +293,6 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, h } from 'vue';
|
||||
import { ArrowUpOutlined, ArrowDownOutlined } from '@vicons/antd';
|
||||
import { useNotification } from 'naive-ui';
|
||||
import NewVisitAmount from './components/NewVisitAmount.vue';
|
||||
import VisitSource from './components/VisitSource.vue';
|
||||
@ -244,7 +316,7 @@
|
||||
{
|
||||
icon: UsergroupAddOutlined,
|
||||
size: '32',
|
||||
title: '用户',
|
||||
title: '用户管理',
|
||||
color: '#69c0ff',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -253,7 +325,7 @@
|
||||
{
|
||||
icon: BarChartOutlined,
|
||||
size: '32',
|
||||
title: '分析',
|
||||
title: '租户管理',
|
||||
color: '#69c0ff',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -262,7 +334,7 @@
|
||||
{
|
||||
icon: ShoppingCartOutlined,
|
||||
size: '32',
|
||||
title: '商品',
|
||||
title: '操作日志',
|
||||
color: '#ff9c6e',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -271,7 +343,7 @@
|
||||
{
|
||||
icon: AccountBookOutlined,
|
||||
size: '32',
|
||||
title: '订单',
|
||||
title: '参数管理',
|
||||
color: '#b37feb',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -280,7 +352,7 @@
|
||||
{
|
||||
icon: CreditCardOutlined,
|
||||
size: '32',
|
||||
title: '票据',
|
||||
title: '字典管理',
|
||||
color: '#ffd666',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -289,7 +361,7 @@
|
||||
{
|
||||
icon: MailOutlined,
|
||||
size: '32',
|
||||
title: '消息',
|
||||
title: '消息管理',
|
||||
color: '#5cdbd3',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -298,7 +370,7 @@
|
||||
{
|
||||
icon: TagsOutlined,
|
||||
size: '32',
|
||||
title: '标签',
|
||||
title: '定时任务',
|
||||
color: '#ff85c0',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
@ -307,7 +379,7 @@
|
||||
{
|
||||
icon: SettingOutlined,
|
||||
size: '32',
|
||||
title: '配置',
|
||||
title: '配置管理',
|
||||
color: '#ffc069',
|
||||
eventObject: {
|
||||
click: () => {},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user