优化控制台
This commit is contained in:
zjl
parent
4904a6ce50
commit
439924715b
@ -1,6 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageWrapper>
|
<PageWrapper>
|
||||||
<el-row :gutter="12" class="pt-0">
|
<el-card shadow="hover" class="custom-box-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-base">工作台</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div>
|
||||||
|
<el-avatar :size="64" :src="schoolboy" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<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-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||||
<el-card shadow="hover" class="custom-box-card card-1">
|
<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%">
|
||||||
@ -196,7 +232,7 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="12">
|
<el-row :gutter="12">
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||||
<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">
|
||||||
@ -210,6 +246,18 @@
|
|||||||
</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%">
|
||||||
@ -239,14 +287,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20px;
|
padding: 20px;"
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<el-skeleton-item variant="text" style="width: 30%" />
|
<el-skeleton-item variant="text" style="width: 30%" />
|
||||||
<el-skeleton-item variant="text" style="width: 30%" />
|
<el-skeleton-item variant="text" style="width: 30%" />
|
||||||
<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">
|
||||||
@ -272,71 +320,12 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="12">
|
<!--访问量 | 流量趋势-->
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
<el-row :gutter="12" class="mb-3">
|
||||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||||
<el-card shadow="hover" class="custom-box-card">
|
<el-card shadow="hover" class="custom-box-card">
|
||||||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
||||||
<template #default>
|
<template #default><VisiTab /></template>
|
||||||
<el-table :data="tableData" style="width: 100%">
|
|
||||||
<el-table-column prop="date" label="姓名">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<el-avatar :size="40" :alt="scope.row.name" :src="scope.row.avatar" />
|
|
||||||
<p class="ml-4">{{ scope.row.name }}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="isMember" label="是否会员" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag :type="scope.row.isMember ? 'success' : 'danger'">{{
|
|
||||||
scope.row.isMember ? '是' : '否'
|
|
||||||
}}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="telephone" label="手机" align="center" />
|
|
||||||
<el-table-column prop="date" label="购买日期" align="center" />
|
|
||||||
|
|
||||||
<el-table-column label="操作" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-link href="javascript:;" type="primary">编辑</el-link>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<el-popconfirm :title="`您确认要删除 ${scope.row.name} 吗？`">
|
|
||||||
<template #reference>
|
|
||||||
<el-link href="javascript:;" type="primary">删除</el-link>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</template>
|
|
||||||
</el-skeleton>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
|
||||||
<el-card shadow="hover" class="custom-box-card card-6">
|
|
||||||
<template #header>
|
|
||||||
<div class="flex items-center justify-between card-header">
|
|
||||||
<span class="text-base">评论</span>
|
|
||||||
<el-link href="#" target="_blank" type="primary">更多</el-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-skeleton :rows="5" :loading="loading" style="width: 100%">
|
|
||||||
<template #default>
|
|
||||||
<ul>
|
|
||||||
<li v-for="(item, index) of comment" :key="index" class="flex py-3 items-top">
|
|
||||||
<el-avatar :size="36" :src="item.avatar" />
|
|
||||||
<div class="flex-grow ml-3">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
<span :style="`color: var(--el-text-color-secondary)`" class="text-xs">{{
|
|
||||||
item.datetime
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
<p>{{ item.content }}</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</el-skeleton>
|
</el-skeleton>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -350,6 +339,8 @@
|
|||||||
import NewVisitAmount from './components/NewVisitAmount.vue';
|
import NewVisitAmount from './components/NewVisitAmount.vue';
|
||||||
import { getConsoleInfo } from '@/api/dashboard/console';
|
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 salesDashboard from '@/assets/images/sales-dashboard.svg';
|
import salesDashboard from '@/assets/images/sales-dashboard.svg';
|
||||||
import schoolboy from '@/assets/images/schoolboy.png';
|
import schoolboy from '@/assets/images/schoolboy.png';
|
||||||
@ -474,6 +465,35 @@
|
|||||||
date: '2021-12-14',
|
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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user