mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-03-01 00:23:11 +08:00
更新0.1.1版本
This commit is contained in:
Ah jung
287
src/views/dashboard/console/console.vue
Normal file
287
src/views/dashboard/console/console.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<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" :cols="4">
|
||||
<n-grid-item>
|
||||
<NCard title="访问量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
|
||||
<template #header-extra>
|
||||
<n-tag type="success">日</n-tag>
|
||||
</template>
|
||||
<div class="py-1 px-1 flex justify-between">
|
||||
<CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl"/>
|
||||
</div>
|
||||
<div class="py-1 px-1 flex justify-between ">
|
||||
<div class="text-sn">
|
||||
日同比<CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
|
||||
<n-icon size="12" style="color: #00ff6f">
|
||||
<component is="CaretUpOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
周同比<CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
|
||||
<n-icon size="12" style="color: #ffde66">
|
||||
<component is="CaretDownOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-between ">
|
||||
<div class="text-sn">
|
||||
总访问量：
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
<CountTo :startVal="1" :endVal="visits.amount"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<NCard title="销售额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
|
||||
<template #header-extra>
|
||||
<n-tag type="info">周</n-tag>
|
||||
</template>
|
||||
<div class="py-1 px-1 flex justify-between">
|
||||
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl"/>
|
||||
</div>
|
||||
<div class="py-2 px-2 flex justify-between ">
|
||||
<div class="text-sn flex-1">
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="saleroom.degree"
|
||||
:indicator-placement="'inside'"
|
||||
processing
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-between ">
|
||||
<div class="text-sn">
|
||||
总销售额：
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
<CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<NCard title="订单量" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
|
||||
<template #header-extra>
|
||||
<n-tag type="warning">周</n-tag>
|
||||
</template>
|
||||
<div class="py-1 px-1 flex justify-between">
|
||||
<CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl"/>
|
||||
</div>
|
||||
<div class="py-1 px-1 flex justify-between ">
|
||||
<div class="text-sn">
|
||||
日同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
|
||||
<n-icon size="12" style="color: #00ff6f">
|
||||
<component is="CaretUpOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
周同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
|
||||
<n-icon size="12" style="color: #ffde66">
|
||||
<component is="CaretDownOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-between ">
|
||||
<div class="text-sn">
|
||||
转化率：
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
<CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<NCard title="成交额" :segmented="{ content: 'hard', footer:'hard' }" size="small" :bordered="false">
|
||||
<template #header-extra>
|
||||
<n-tag type="error">月</n-tag>
|
||||
</template>
|
||||
<div class="py-1 px-1 flex justify-between">
|
||||
<CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl"/>
|
||||
</div>
|
||||
<div class="py-1 px-1 flex justify-between ">
|
||||
<div class="text-sn">
|
||||
月同比<CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
|
||||
<n-icon size="12" style="color: #00ff6f">
|
||||
<component is="CaretUpOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
月同比<CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
|
||||
<n-icon size="12" style="color: #ffde66">
|
||||
<component is="CaretDownOutlined"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-between ">
|
||||
<div class="text-sn">
|
||||
总成交额：
|
||||
</div>
|
||||
<div class="text-sn">
|
||||
<CountTo prefix="￥" :startVal="1" :endVal="volume.amount"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
|
||||
<!--导航卡片-->
|
||||
<div class="mt-4">
|
||||
<n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8" :cols="8">
|
||||
<n-grid-item v-for="(item,index) in iconList" :key="index">
|
||||
<NCard content-style="padding-top: 0;" size="small" :bordered="false">
|
||||
<template #footer>
|
||||
<div class="cursor-pointer">
|
||||
<p class="flex justify-center">
|
||||
<span>
|
||||
<n-icon :size="item.size" class="flex-1" :style="{color:`${item.color}`}">
|
||||
<component :is="item.icon" v-on="item.eventObject || {}"/>
|
||||
</n-icon>
|
||||
</span>
|
||||
</p>
|
||||
<p class="flex justify-center"><span>{{ item.title }}</span></p>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
|
||||
<!--访问量 | 流量趋势-->
|
||||
<VisiTab></VisiTab>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
|
||||
import Icons from './components/Icons'
|
||||
import VisiTab from './components/VisiTab.vue'
|
||||
import { CountTo } from '@/components/CountTo/index'
|
||||
import { getConsoleInfo } from '@/api/dashboard/console'
|
||||
|
||||
export default defineComponent({
|
||||
components: { ...Icons, VisiTab, CountTo },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
cardHeaderStyle: {
|
||||
'border-bottom': '1px solid #eee',
|
||||
'font-size': '16px'
|
||||
},
|
||||
visits:{},
|
||||
saleroom:{},
|
||||
orderLarge:{},
|
||||
volume:{},
|
||||
})
|
||||
// 图标列表
|
||||
const iconList = [
|
||||
{
|
||||
icon: 'UsergroupAddOutlined',
|
||||
size: '32',
|
||||
title: '用户',
|
||||
color: '#69c0ff',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'BarChartOutlined',
|
||||
size: '32',
|
||||
title: '分析',
|
||||
color: '#69c0ff',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'ShoppingCartOutlined',
|
||||
size: '32',
|
||||
title: '商品',
|
||||
color: '#ff9c6e',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'AccountBookOutlined',
|
||||
size: '32',
|
||||
title: '订单',
|
||||
color: '#b37feb',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'CreditCardOutlined',
|
||||
size: '32',
|
||||
title: '票据',
|
||||
color: '#ffd666',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'MailOutlined',
|
||||
size: '32',
|
||||
title: '消息',
|
||||
color: '#5cdbd3',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'TagsOutlined',
|
||||
size: '32',
|
||||
title: '标签',
|
||||
color: '#ff85c0',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'SettingOutlined',
|
||||
size: '32',
|
||||
title: '配置',
|
||||
color: '#ffc069',
|
||||
eventObject: {
|
||||
click: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
onMounted(async ()=> {
|
||||
const { visits, saleroom, orderLarge, volume} = await getConsoleInfo()
|
||||
state.visits = visits
|
||||
state.saleroom = saleroom
|
||||
state.orderLarge = orderLarge
|
||||
state.volume = volume
|
||||
})
|
||||
return {
|
||||
...toRefs(state),
|
||||
iconList
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user