mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
feat(project): 完善监控页内容
This commit is contained in:
Coffee-crocodile
parent
3c39cb08c6
commit
debedb6224
@ -19,7 +19,7 @@ const userRoutes = [
|
||||
path: '/dashboard',
|
||||
redirect: '/dashboard/workbench',
|
||||
meta: {
|
||||
title: '分析页',
|
||||
title: '仪表盘',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:analysis',
|
||||
},
|
||||
@ -49,7 +49,7 @@ const userRoutes = [
|
||||
path: '/test',
|
||||
redirect: '/test/test1',
|
||||
meta: {
|
||||
title: '测试专题',
|
||||
title: '多级菜单演示',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:ambulance',
|
||||
},
|
||||
@ -58,7 +58,7 @@ const userRoutes = [
|
||||
name: 'test1',
|
||||
path: '/test/test1',
|
||||
meta: {
|
||||
title: '测试专题1',
|
||||
title: '多级菜单1',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:alarm',
|
||||
},
|
||||
@ -67,7 +67,7 @@ const userRoutes = [
|
||||
name: 'test2',
|
||||
path: '/test/test2',
|
||||
meta: {
|
||||
title: '测试专题2',
|
||||
title: '多级菜单2',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:pic',
|
||||
},
|
||||
@ -76,7 +76,7 @@ const userRoutes = [
|
||||
name: 'test2_detail',
|
||||
path: '/test/test2/detail',
|
||||
meta: {
|
||||
title: '测试专题2的详情页',
|
||||
title: '多级菜单2的详情页',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:tool',
|
||||
hide: true,
|
||||
@ -89,7 +89,7 @@ const userRoutes = [
|
||||
name: 'test3',
|
||||
path: '/test/test3',
|
||||
meta: {
|
||||
title: '测试专题3',
|
||||
title: '多级菜单3',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:tool',
|
||||
},
|
||||
@ -98,7 +98,7 @@ const userRoutes = [
|
||||
name: 'test4',
|
||||
path: '/test/test3/test4',
|
||||
meta: {
|
||||
title: '测试专题4',
|
||||
title: '多级菜单3-1',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:tool',
|
||||
},
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
import { Icon } from '@iconify/vue';
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
icon: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
size?: number;
|
||||
depth?: 1 | 2 | 3 | 4 | 5;
|
||||
|
||||
@ -36,22 +36,31 @@
|
||||
</div>
|
||||
</n-layout-header>
|
||||
<n-layout-header
|
||||
v-if="appStore.showTabs"
|
||||
:position="appStore.fixedHeader ? 'absolute' : 'static'"
|
||||
class="z-1"
|
||||
:class="{ 'm-t-60px': appStore.fixedHeader }"
|
||||
:class="{ 'm-t-61px': appStore.fixedHeader }"
|
||||
>
|
||||
<TabBar v-if="appStore.showTabs" class="h-45px" />
|
||||
<TabBar class="h-45px" />
|
||||
</n-layout-header>
|
||||
<div class="p-16px" :class="{ 'p-t-121px': appStore.fixedHeader, 'p-b-56px': appStore.fixedFooter }">
|
||||
<n-layout-content class="bg-transparent">
|
||||
|
||||
<n-layout-content class="bg-transparent">
|
||||
<div
|
||||
class="p-16px"
|
||||
:class="{
|
||||
'p-b-56px': appStore.fixedFooter,
|
||||
'p-t-122px': appStore.fixedHeader && appStore.showTabs,
|
||||
'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
|
||||
}"
|
||||
>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade-slide" appear mode="out-in">
|
||||
<component :is="Component" v-if="appStore.loadFlag" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</n-layout-content>
|
||||
</div>
|
||||
<BackTop />
|
||||
</div>
|
||||
</n-layout-content>
|
||||
<n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px">
|
||||
{{ appStore.footerText }}
|
||||
</n-layout-footer>
|
||||
|
||||
@ -1,7 +1,161 @@
|
||||
<template>
|
||||
<div>监控页</div>
|
||||
<div>
|
||||
<n-grid :x-gap="16" :y-gap="16">
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-statistic label="访问量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
</n-statistic>
|
||||
<n-icon color="#de4307" size="42">
|
||||
<i-icon-park-outline-chart-histogram />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计访问数</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-statistic label="下载量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
</n-statistic>
|
||||
<n-icon color="#ffb549" size="42">
|
||||
<i-icon-park-outline-chart-graph />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计下载量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-statistic label="浏览量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
</n-statistic>
|
||||
<n-icon color="#1687a7" size="42">
|
||||
<i-icon-park-outline-average />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计浏览量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-statistic label="注册量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
</n-statistic>
|
||||
<n-icon color="#42218E" size="42">
|
||||
<i-icon-park-outline-chart-pie />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计注册量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="24">
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
|
||||
<n-tab-pane name="流量趋势">流量趋势</n-tab-pane>
|
||||
<n-tab-pane name="访问量趋势">访问量趋势</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="访问来源"
|
||||
:segmented="{
|
||||
content: true,
|
||||
}"
|
||||
>
|
||||
1
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="16">
|
||||
<n-card
|
||||
title="成交记录"
|
||||
:segmented="{
|
||||
content: true,
|
||||
}"
|
||||
>
|
||||
<template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
|
||||
<n-table :bordered="false" :single-line="false">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>交易名称</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>进度</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableData" :key="item.id">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.start }}</td>
|
||||
<td>{{ item.end }}</td>
|
||||
<td>{{ item.prograss }}%</td>
|
||||
<td>
|
||||
<n-tag :bordered="false" type="info">
|
||||
{{ item.status }}
|
||||
</n-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const tableData = [
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称1',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称2',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '50',
|
||||
status: '交易中',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称3',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div text-center c-yellow>I prove that you have made the ju mp test2-deail.</div>
|
||||
<div text-center>这是详情子页，他不会出现在侧边栏</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div text-center c-yellow>I prove that you have made the ju mp test2.</div>
|
||||
<div text-center>
|
||||
I prove that you have made the ju mp test2.
|
||||
<n-button @click="routerPush('/test/test2/detail')">跳转详情子页</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useAppRouter } from '@/hook';
|
||||
const { routerPush } = useAppRouter();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
<template>
|
||||
<div text-center c-red>
|
||||
I prove that you have made the jump test3.
|
||||
<n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const testMsg = () => {
|
||||
window.$message.error('Once upon a time you dressed so fine');
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user