parent
a81c8b8352
commit
24d6a192b1
|
|
@ -3,10 +3,10 @@ ENV = 'production'
|
|||
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
|
||||
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
|
||||
# 测试
|
||||
VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
|
||||
# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
|
||||
|
||||
# 生产
|
||||
# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
|
||||
VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
|
||||
|
||||
# 预发布接口
|
||||
# VUE_APP_BASE_API = 'https://pre-cashieradmin.sxczgkj.cn'
|
||||
|
|
|
|||
162
src/api/home.js
162
src/api/home.js
|
|
@ -1,17 +1,17 @@
|
|||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 汇总数据
|
||||
* @returns
|
||||
*/
|
||||
export function summaryGet() {
|
||||
return request({
|
||||
url: '/api/summary',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId')
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -19,13 +19,13 @@ export function summaryGet() {
|
|||
* @returns
|
||||
*/
|
||||
export function summaryTodayGet() {
|
||||
return request({
|
||||
url: '/api/summary/today',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId')
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/today",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -33,14 +33,14 @@ export function summaryTodayGet() {
|
|||
* @returns
|
||||
*/
|
||||
export function summaryDateGet(day) {
|
||||
return request({
|
||||
url: '/api/summary/date',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
day: day
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/date",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
day: day
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -48,14 +48,14 @@ export function summaryDateGet(day) {
|
|||
* @returns
|
||||
*/
|
||||
export function dateAmount(day) {
|
||||
return request({
|
||||
url: '/api/summary/dateAmount',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
day: day
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/dateAmount",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
day: day
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -63,16 +63,16 @@ export function dateAmount(day) {
|
|||
* @returns
|
||||
*/
|
||||
export function dateProduct(day, page, size) {
|
||||
return request({
|
||||
url: '/api/summary/dateProduct',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
day: day,
|
||||
page: page,
|
||||
size: size
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/dateProduct",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
day: day,
|
||||
page: page,
|
||||
size: size
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -80,14 +80,14 @@ export function dateProduct(day, page, size) {
|
|||
* @returns
|
||||
*/
|
||||
export function datePayType(day) {
|
||||
return request({
|
||||
url: '/api/summary/datePayType',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
day: day
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/datePayType",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
day: day
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -95,15 +95,15 @@ export function datePayType(day) {
|
|||
* @returns
|
||||
*/
|
||||
export function daydownload(data) {
|
||||
return request({
|
||||
url: '/api/summary/day/download',
|
||||
method: 'post',
|
||||
data: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
...data
|
||||
},
|
||||
responseType: 'blob'
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/day/download",
|
||||
method: "post",
|
||||
data: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
},
|
||||
responseType: "blob"
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -111,14 +111,14 @@ export function daydownload(data) {
|
|||
* @returns
|
||||
*/
|
||||
export function daycount(params) {
|
||||
return request({
|
||||
url: '/api/summary/day/count',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
...params
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/day/count",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...params
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -126,13 +126,27 @@ export function daycount(params) {
|
|||
* @returns
|
||||
*/
|
||||
export function summaryday(params) {
|
||||
return request({
|
||||
url: '/api/summary/day',
|
||||
method: 'get',
|
||||
params: {
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
...params
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: "/api/summary/day",
|
||||
method: "get",
|
||||
params: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...params
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 营业板块
|
||||
* @returns
|
||||
*/
|
||||
export function summarytrade(data) {
|
||||
return request({
|
||||
url: "/api/summary/trade",
|
||||
method: "post",
|
||||
data: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -6,7 +6,7 @@
|
|||
/* theme color */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #FFBA00;
|
||||
$--color-warning: #ffba00;
|
||||
$--color-danger: #ff4949;
|
||||
// $--color-info: #1E1E1E;
|
||||
|
||||
|
|
@ -17,10 +17,10 @@ $--button-font-weight: 400;
|
|||
$--border-color-light: #dfe4ed;
|
||||
$--border-color-lighter: #e6ebf5;
|
||||
|
||||
$--table-border:1px solid#dfe6ec;
|
||||
$--table-border: 1px solid#dfe6ec;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
$--font-path: "~element-ui/lib/theme-chalk/fonts";
|
||||
|
||||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
|
||||
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ $yellow: #fec171;
|
|||
$panGreen: #30b08f;
|
||||
|
||||
// sidebar
|
||||
$menuText: #bfcbd9;
|
||||
$menuText: #999;
|
||||
$menuActiveText: #409eff;
|
||||
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||
$subMenuActiveText: #555; // https://github.com/ElemeFE/element/issues/12951
|
||||
|
||||
$menuBg: #333;
|
||||
$menuHover: #444;
|
||||
$menuBg: #fff;
|
||||
$menuHover: rgba(121, 145, 188, 0.18);
|
||||
|
||||
$subMenuBg: #444;
|
||||
$subMenuHover: #555;
|
||||
$subMenuBg: #fff;
|
||||
$subMenuHover: rgba(121, 145, 188, 0.18);
|
||||
|
||||
$sideBarWidth: 205px;
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 50px;
|
||||
padding-top: 140px;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 84px;
|
||||
padding-top: 140px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@
|
|||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</template> -->
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="logo || Avatar" class="user-avatar">
|
||||
<!-- <i class="el-icon-caret-bottom" /> -->
|
||||
<i class="el-icon-caret-bottom" />
|
||||
<span class="shop_name">{{ shopName }}</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <span style="display:block;" @click="show = true">
|
||||
<span style="display:block;" @click="show = true">
|
||||
<el-dropdown-item>
|
||||
布局设置
|
||||
</el-dropdown-item>
|
||||
</span> -->
|
||||
</span>
|
||||
<router-link to="/shop/shop/shop_configuration">
|
||||
<el-dropdown-item>
|
||||
个人中心
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</el-dropdown-item>
|
||||
</span>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
<el-dialog title="修改密码" modal-append-to-body append-to-body :visible.sync="dialogVisible" width="400px">
|
||||
<el-form ref="form" :model="form" :rules="rules">
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 v-else class="sidebar-title">{{ title }} </h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 class="sidebar-title">{{ title }} </h1>
|
||||
</router-link>
|
||||
<div v-if="collapse" key="collapse" class="sidebar-logo-link">
|
||||
<img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
|
||||
<h1 v-else class="sidebar-title">{{ shopName }} </h1>
|
||||
<i class="el-icon-arrow-down icon"></i>
|
||||
</div>
|
||||
<div v-else key="expand" class="sidebar-logo-link">
|
||||
<img v-if="logo" :src="logo || Avatar" class="sidebar-logo">
|
||||
<h1 class="sidebar-title">{{ shopName }} </h1>
|
||||
<i class="el-icon-arrow-down icon"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Logo from '@/assets/images/logo.png'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
export default {
|
||||
name: 'SidebarLogo',
|
||||
props: {
|
||||
|
|
@ -25,8 +27,9 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
title: '收银机管理端',
|
||||
logo: Logo
|
||||
shopName: localStorage.getItem('shopName'),
|
||||
Avatar,
|
||||
logo: localStorage.getItem('logo'),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -53,23 +56,25 @@ export default {
|
|||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 14px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,104 @@
|
|||
<template>
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
<div class="top_container">
|
||||
<div class="content">
|
||||
<div class="logo">
|
||||
<img class="img" src="@/assets/images/default_logo.png" />
|
||||
</div>
|
||||
<div class="right-menu">
|
||||
<template v-if="device !== 'mobile'">
|
||||
<!-- <search id="header-search" class="right-menu-item" />
|
||||
<el-tooltip content="项目文档" effect="dark" placement="bottom">
|
||||
<Doc class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="布局设置" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip> -->
|
||||
|
||||
<i class="left_icon el-icon-search" />
|
||||
<i class="left_icon el-icon-warning-outline" />
|
||||
<i class="left_icon el-icon-bell" />
|
||||
</template>
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="logo || Avatar" class="user-avatar">
|
||||
<span class="shop_name">{{ shopName }}</span>
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <span style="display:block;" @click="show = true">
|
||||
<el-dropdown-item>
|
||||
布局设置
|
||||
</el-dropdown-item>
|
||||
</span> -->
|
||||
<router-link to="/shop/shop/shop_configuration">
|
||||
<el-dropdown-item>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<span @click="dialogVisible = true">
|
||||
<el-dropdown-item>
|
||||
修改密码
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
<span style="display:block;" @click="open">
|
||||
<el-dropdown-item divided>
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel v-if="showSettings">
|
||||
<settings />
|
||||
</right-panel>
|
||||
<el-dialog title="修改密码" modal-append-to-body append-to-body :visible.sync="dialogVisible" width="400px">
|
||||
<el-form ref="form" :model="form" :rules="rules">
|
||||
<el-form-item label="旧密码" prop="oldPass">
|
||||
<el-input :type="ip1Type" v-model="form.oldPass" placeholder="请输入旧密码">
|
||||
<i slot="suffix"
|
||||
:class="`el-input__icon ${ip1Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
|
||||
@click.stop="changeInputType('ip1Type')"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPass">
|
||||
<el-input :type="ip2Type" v-model="form.newPass" placeholder="请输入新密码">
|
||||
<i slot="suffix"
|
||||
:class="`el-input__icon ${ip2Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
|
||||
@click.stop="changeInputType('ip2Type')"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="rnewPass">
|
||||
<el-input :type="ip3Type" v-model="form.rnewPass" placeholder="请再次输入新密码">
|
||||
<i slot="suffix"
|
||||
:class="`el-input__icon ${ip3Type == 'text' ? 'el-icon-view' : 'el-icon-remove-outline'}`"
|
||||
@click.stop="changeInputType('ip3Type')"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="formLoading" @click="submitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel v-if="showSettings">
|
||||
<settings />
|
||||
</right-panel>
|
||||
</div>
|
||||
<!-- 防止刷新后主题丢失 -->
|
||||
<Theme v-show="false" ref="theme" />
|
||||
</div>
|
||||
<!-- 防止刷新后主题丢失 -->
|
||||
<Theme v-show="false" ref="theme" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,9 +106,10 @@
|
|||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Theme from '@/components/ThemePicker'
|
||||
import Cookies from 'js-cookie'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
|
|
@ -36,6 +122,64 @@ export default {
|
|||
Theme
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
data() {
|
||||
const validateNewPass = (rule, value, callback) => {
|
||||
if (!this.form.newPass) {
|
||||
callback(new Error(' '))
|
||||
} else if (this.form.newPass === this.form.oldPass) {
|
||||
callback(new Error('请输入与旧密码不同的新密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validateRnewPass = (rule, value, callback) => {
|
||||
if (!this.form.rnewPass) {
|
||||
callback(new Error(' '))
|
||||
} else if (this.form.rnewPass !== this.form.newPass) {
|
||||
callback(new Error('两次密码输入不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
dialogVisible: false,
|
||||
Avatar: Avatar,
|
||||
logo: localStorage.getItem('logo'),
|
||||
shopName: localStorage.getItem('shopName'),
|
||||
ip1Type: 'password',
|
||||
ip2Type: 'password',
|
||||
ip3Type: 'password',
|
||||
formLoading: false,
|
||||
form: {
|
||||
oldPass: '',
|
||||
newPass: '',
|
||||
rnewPass: ''
|
||||
},
|
||||
rules: {
|
||||
oldPass: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
newPass: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateNewPass,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
rnewPass: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateRnewPass,
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
sidebar: state => state.app.sidebar,
|
||||
|
|
@ -44,6 +188,12 @@ export default {
|
|||
needTagsView: state => state.settings.tagsView,
|
||||
fixedHeader: state => state.settings.fixedHeader
|
||||
}),
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'device',
|
||||
'user',
|
||||
'baseApi'
|
||||
]),
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
|
|
@ -65,52 +215,178 @@ export default {
|
|||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
},
|
||||
// 提交修改密码
|
||||
submitHandle() {
|
||||
this.$refs.form.validate(async vaild => {
|
||||
if (vaild) {
|
||||
try {
|
||||
this.formLoading = true
|
||||
const res = await updatePass({
|
||||
loginType: localStorage.getItem('loginType'),
|
||||
oldPass: encrypt(this.form.oldPass),
|
||||
newPass: this.form.newPass
|
||||
})
|
||||
this.$notify.success('修改成功，请重新登陆')
|
||||
setTimeout(() => {
|
||||
this.logout()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
this.formLoading = false
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
localStorage.setItem('logoutHandle', true)
|
||||
this.logout()
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
$top-c-h: 60px;
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.top_container {
|
||||
height: $top-c-h;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: $top-c-h - 10px;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
.logo {
|
||||
.img {
|
||||
display: block;
|
||||
width: 123px;
|
||||
height: auto
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left_icon {
|
||||
font-size: 18px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.shop_name {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.fixed-header {
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - #{$sideBarWidth});
|
||||
transition: width 0.28s;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar .fixed-header {
|
||||
width: calc(100% - 54px)
|
||||
}
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: $top-c-h;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - #{$sideBarWidth});
|
||||
transition: width 0.28s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hideSidebar .fixed-header {
|
||||
width: calc(100% - 54px)
|
||||
}
|
||||
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -423,7 +423,7 @@ export function isPcBowser() {
|
|||
* decimal你保留的几位,默认保留小数后两位
|
||||
* isInt 是否保留0
|
||||
*/
|
||||
export function formatDecimal(num, decimal = 2, isInt = false) {
|
||||
export function formatDecimal(num = 0, decimal = 2, isInt = false) {
|
||||
num = num.toFixed(3).toString();
|
||||
const index = num.indexOf(".");
|
||||
if (index !== -1) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container" style="padding-bottom: 100px;">
|
||||
<div class="card_wrap">
|
||||
<!-- <div class="card_wrap">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">总销售额</div>
|
||||
|
|
@ -44,30 +44,143 @@
|
|||
<i class="icon el-icon-caret-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="h_card_wrap">
|
||||
<div class="status_wrap">
|
||||
<div class="left">
|
||||
<div class="dot"></div>
|
||||
<span>营业</span>
|
||||
</div>
|
||||
<div class="time_wrap">
|
||||
<el-radio-group v-model="timeValue" @change="timeChange">
|
||||
<el-radio-button label="0">今天</el-radio-button>
|
||||
<el-radio-button label="-1">昨天</el-radio-button>
|
||||
<el-radio-button label="-7">最近7天</el-radio-button>
|
||||
<el-radio-button label="-30">最近30天</el-radio-button>
|
||||
<el-radio-button label="week">本周</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="custom">自定义</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
v-if="timeValue == 'custom'" @change="summarytrade">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-loading="tradeLoading">
|
||||
<div class="top">
|
||||
<div class="item earnings">
|
||||
<div class="num_wrap">
|
||||
<div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
|
||||
<div class="tips">营业实收（元）<el-icon class="el-icon-question" /></div>
|
||||
</div>
|
||||
<div class="line_wrap">
|
||||
<div class="line_item">
|
||||
<div class="line_item_top">
|
||||
<div>销售金额（元）</div>
|
||||
<div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div>
|
||||
</div>
|
||||
<div class="line_gropress">
|
||||
<div class="gropress l"
|
||||
:style="{ width: `${tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
|
||||
<div class="gropress r"
|
||||
:style="{ width: `${tradeSale.refundAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
|
||||
</div>
|
||||
<div class="line_btm">
|
||||
<el-icon class="icon el-icon-caret-right" />
|
||||
<div class="info">
|
||||
<span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
|
||||
<span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line_item">
|
||||
<div class="line_item_top">
|
||||
<div>充值金额（元）</div>
|
||||
<div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div>
|
||||
</div>
|
||||
<div class="line_gropress">
|
||||
<div class="gropress l" :style="{ width: `${tradeSale.inAmount / tradeSale.totalVipAmount * 100}%` }">
|
||||
</div>
|
||||
<div class="gropress r"
|
||||
:style="{ width: `${tradeSale.outAmount / tradeSale.totalVipAmount * 100}%` }"></div>
|
||||
</div>
|
||||
<div class="line_btm">
|
||||
<el-icon class="icon el-icon-caret-right" />
|
||||
<div class="info">
|
||||
<span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
|
||||
<span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item data">
|
||||
<div class="data_item">
|
||||
<div class="num_wrap">
|
||||
<div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
|
||||
<div class="tips">会员消费（元）<el-icon class="el-icon-question" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data_item_right">
|
||||
<div class="t"><span>新增会员数</span> <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span></div>
|
||||
<div class="t"><span>会员消费笔数</span> <span class="n">{{ tradeVip.useNum || 0 }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<div class="item item1">
|
||||
<div class="title">客单价</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item1_icon.png" />
|
||||
<div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item2">
|
||||
<div class="title">翻台率 <el-icon class="icon el-icon-question" /> </div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item2_icon.png" />
|
||||
<div class="t">{{ tradeCount.turnoverRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item3">
|
||||
<div class="title">优惠金额</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item3_icon.png" />
|
||||
<div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item4">
|
||||
<div class="title">优惠笔数 </div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item4_icon.png" />
|
||||
<div class="t">{{ tradeCount.saveNum || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 销售额 -->
|
||||
<div class="chart_wrap">
|
||||
<div class="chart_wrap" style="display: flex;">
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">销售额</div>
|
||||
<div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">销售趋势</div>
|
||||
<div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">支付占比</div>
|
||||
</div>
|
||||
<el-radio-group v-model="saleActive" @change="dateAmount">
|
||||
<el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
class="chart"
|
||||
ref="saleChart"
|
||||
v-loading="saleLoading"
|
||||
style="height: 400px;"
|
||||
></div>
|
||||
<div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 400px;" v-show="lineChartType == 0">
|
||||
</div>
|
||||
<div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 400px;"
|
||||
v-show="lineChartType == 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart_wrap" style="display: flex;">
|
||||
<!-- 商品销售排行 -->
|
||||
<div class="item">
|
||||
<div class="item" style="margin-left: 20px;">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">商品销售排行</div>
|
||||
|
|
@ -97,28 +210,18 @@
|
|||
<div class="table">
|
||||
<el-table :data="saleTable" v-loading="saleTableLoading">
|
||||
<el-table-column label="排名" prop="productId"></el-table-column>
|
||||
<el-table-column
|
||||
label="商品名称"
|
||||
prop="productName"
|
||||
></el-table-column>
|
||||
<el-table-column label="商品名称" prop="productName"></el-table-column>
|
||||
<el-table-column label="数量" prop="productNum"></el-table-column>
|
||||
<el-table-column label="金额" prop="amount"></el-table-column>
|
||||
</el-table>
|
||||
<div
|
||||
class="head-container"
|
||||
style="padding-top: 20px;display: flex;justify-content: flex-end;"
|
||||
>
|
||||
<el-pagination
|
||||
:total="saleTableTotal"
|
||||
:page-size="saleTableSize"
|
||||
:current-page="saleTablePage"
|
||||
@current-change="paginationChange"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
<div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
|
||||
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
|
||||
@current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付类型占比 -->
|
||||
</div>
|
||||
<!-- <div class="chart_wrap" style="display: flex;">
|
||||
<div class="item" style="margin-left: 20px;">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
|
|
@ -129,13 +232,9 @@
|
|||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
style="height: 400px;margin-top: 30px;"
|
||||
ref="payChart"
|
||||
v-loading="payChartLoading"
|
||||
></div>
|
||||
<div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -146,14 +245,17 @@ import {
|
|||
dateProduct,
|
||||
dateAmount,
|
||||
datePayType,
|
||||
summaryDateGet
|
||||
summaryDateGet,
|
||||
summarytrade
|
||||
} from "@/api/home";
|
||||
import dayjs from 'dayjs'
|
||||
import echarts from "echarts";
|
||||
import { debounce } from "@/utils";
|
||||
import { debounce, formatDecimal } from "@/utils";
|
||||
export default {
|
||||
name: "home",
|
||||
data() {
|
||||
return {
|
||||
formatDecimal,
|
||||
topData: "",
|
||||
saleTab: "sale",
|
||||
saleActive: "7",
|
||||
|
|
@ -176,15 +278,24 @@ export default {
|
|||
saleTableSize: 5,
|
||||
__resizeHandler: null,
|
||||
productCountChart: null,
|
||||
productSumChart: null
|
||||
productSumChart: null,
|
||||
lineChartType: 0,
|
||||
timeValue: "0",
|
||||
query: {
|
||||
createdAt: '',
|
||||
},
|
||||
tradeLoading: false,
|
||||
tradeSale: '',
|
||||
tradeVip: '',
|
||||
tradeCount: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.summaryGet();
|
||||
// this.summaryGet();
|
||||
this.dateAmount();
|
||||
this.dateProduct();
|
||||
this.datePayType();
|
||||
this.summaryDateGet();
|
||||
this.timeChange('0')
|
||||
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.saleChart) {
|
||||
|
|
@ -207,9 +318,110 @@ export default {
|
|||
}
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
this.initCardUserChart();
|
||||
// this.initCardUserChart();
|
||||
},
|
||||
methods: {
|
||||
// 切换时间
|
||||
timeChange(e) {
|
||||
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
|
||||
switch (e) {
|
||||
case "":
|
||||
// 全部
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
case "0":
|
||||
// 今天
|
||||
this.query.createdAt = [
|
||||
dayjs().format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-1":
|
||||
// 昨天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-1, "d")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.add(-1, "d")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-7":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-7, "d")
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-30":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-30, "d")
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "week":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf("week")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf("week")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "month":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf("month")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf("month")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "custom":
|
||||
// 自定义
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (e != 'custom') {
|
||||
this.summarytrade()
|
||||
}
|
||||
},
|
||||
// 获取营业板块数据
|
||||
async summarytrade() {
|
||||
try {
|
||||
this.tradeLoading = true
|
||||
const res = await summarytrade({
|
||||
startTime: this.query.createdAt[0],
|
||||
endTime: this.query.createdAt[1]
|
||||
})
|
||||
this.tradeLoading = false
|
||||
this.tradeSale = res.sale
|
||||
this.tradeVip = res.vip
|
||||
this.tradeCount = res.count
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
lineChartTypeChange(i) {
|
||||
this.lineChartType = i
|
||||
if (i == 0) {
|
||||
this.dateAmount()
|
||||
} else {
|
||||
this.datePayType();
|
||||
}
|
||||
},
|
||||
// 初始化支付笔数柱状图
|
||||
initCardPayChart(time = [], data = []) {
|
||||
this.cardPayChart = echarts.init(this.$refs.cardPayChart);
|
||||
|
|
@ -537,7 +749,7 @@ export default {
|
|||
async datePayType() {
|
||||
try {
|
||||
this.payChartLoading = true;
|
||||
const res = await datePayType(this.payChartDay);
|
||||
const res = await datePayType(this.saleActive);
|
||||
const data = res.countPayType.map(item => {
|
||||
return {
|
||||
value: item.count,
|
||||
|
|
@ -752,6 +964,232 @@ export default {
|
|||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.h_card_wrap {
|
||||
|
||||
.status_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dot {
|
||||
$size: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
background-color: #1890ff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
margin-top: 15px;
|
||||
padding: 20px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&.earnings {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.data {
|
||||
margin-left: 40px;
|
||||
background: url('../../assets/images/data_home_bg1.png') no-repeat center center / cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.data_item_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.t {
|
||||
width: 200px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.n {
|
||||
color: #1890ff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.num_wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.line_wrap {
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
|
||||
.line_item {
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.line_item_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
|
||||
.t {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.line_gropress {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
background-color: #F6F6F6;
|
||||
|
||||
.gropress {
|
||||
height: 5px;
|
||||
|
||||
&.l {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
&.r {
|
||||
background-color: #FF3F3F;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line_btm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
|
||||
.icon {
|
||||
color: #A2A2A2;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 12px;
|
||||
|
||||
.l_t {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.l_r {
|
||||
color: #FF3F3F;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 83px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 18px;
|
||||
|
||||
&.item1 {
|
||||
background-image: url('../../assets/images/data_home_item1.png');
|
||||
}
|
||||
|
||||
&.item2 {
|
||||
background-image: url('../../assets/images/data_home_item2.png');
|
||||
}
|
||||
|
||||
&.item3 {
|
||||
background-image: url('../../assets/images/data_home_item3.png');
|
||||
}
|
||||
|
||||
&.item4 {
|
||||
background-image: url('../../assets/images/data_home_item4.png');
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -868,10 +1306,11 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: $color;
|
||||
margin-right: 20px;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
color: $color;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,899 @@
|
|||
<template>
|
||||
<div class="app-container" style="padding-bottom: 100px;">
|
||||
<div class="card_wrap">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">总销售额</div>
|
||||
<el-tooltip effect="dark" content="订单支付金额" placement="top">
|
||||
<i class="icon el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalSales || 0 }}</div>
|
||||
<div class="row">平均每单{{ topData.averageSales || 0 }}</div>
|
||||
<div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">支付笔数</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.paymentsNumber }}</div>
|
||||
<div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
今日支付笔数{{ topData.paymentsNumberToday || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">访问量</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalVisits }}</div>
|
||||
<div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
<div class="dot"></div>
|
||||
今日访问 {{ topData.totalVisitsToday || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">用户数</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalUser }}</div>
|
||||
<div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
今日新增 {{ topData.userToday || 0 }}
|
||||
<i class="icon el-icon-caret-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 销售额 -->
|
||||
<div class="chart_wrap">
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">销售额</div>
|
||||
</div>
|
||||
<el-radio-group v-model="saleActive" @change="dateAmount">
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
class="chart"
|
||||
ref="saleChart"
|
||||
v-loading="saleLoading"
|
||||
style="height: 400px;"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart_wrap" style="display: flex;">
|
||||
<!-- 商品销售排行 -->
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">商品销售排行</div>
|
||||
</div>
|
||||
<el-radio-group v-model="saleTableActive" @change="rankChange">
|
||||
<el-radio-button label="1">今天</el-radio-button>
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="sale_data">
|
||||
<div class="card">
|
||||
<div class="sale_data_header">
|
||||
<div class="card_title">销售数量</div>
|
||||
</div>
|
||||
<div class="number">{{ productCount }}</div>
|
||||
<div class="product_chart_wrap" ref="productCountChart"></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="sale_data_header">
|
||||
<div class="card_title">销售金额</div>
|
||||
</div>
|
||||
<div class="number">￥{{ productSum }}</div>
|
||||
<div class="product_chart_wrap" ref="productSumChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table :data="saleTable" v-loading="saleTableLoading">
|
||||
<el-table-column label="排名" prop="productId"></el-table-column>
|
||||
<el-table-column
|
||||
label="商品名称"
|
||||
prop="productName"
|
||||
></el-table-column>
|
||||
<el-table-column label="数量" prop="productNum"></el-table-column>
|
||||
<el-table-column label="金额" prop="amount"></el-table-column>
|
||||
</el-table>
|
||||
<div
|
||||
class="head-container"
|
||||
style="padding-top: 20px;display: flex;justify-content: flex-end;"
|
||||
>
|
||||
<el-pagination
|
||||
:total="saleTableTotal"
|
||||
:page-size="saleTableSize"
|
||||
:current-page="saleTablePage"
|
||||
@current-change="paginationChange"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付类型占比 -->
|
||||
<div class="item" style="margin-left: 20px;">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">支付占比类型</div>
|
||||
</div>
|
||||
<el-radio-group v-model="payChartDay" @change="datePayType">
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
style="height: 400px;margin-top: 30px;"
|
||||
ref="payChart"
|
||||
v-loading="payChartLoading"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
summaryGet,
|
||||
summaryTodayGet,
|
||||
dateProduct,
|
||||
dateAmount,
|
||||
datePayType,
|
||||
summaryDateGet
|
||||
} from "@/api/home";
|
||||
import echarts from "echarts";
|
||||
import { debounce } from "@/utils";
|
||||
export default {
|
||||
name: "home",
|
||||
data() {
|
||||
return {
|
||||
topData: "",
|
||||
saleTab: "sale",
|
||||
saleActive: "7",
|
||||
cardPayChart: null,
|
||||
cardCountChart: null,
|
||||
cardUserChart: null,
|
||||
saleLoading: false,
|
||||
saleChart: null,
|
||||
payChartDay: "7",
|
||||
payChartLoading: false,
|
||||
payChart: null,
|
||||
chartType: 1,
|
||||
productCount: 0,
|
||||
productSum: 0,
|
||||
saleTableActive: "1",
|
||||
saleTable: [],
|
||||
saleTableLoading: false,
|
||||
saleTablePage: 1,
|
||||
saleTableTotal: 0,
|
||||
saleTableSize: 5,
|
||||
__resizeHandler: null,
|
||||
productCountChart: null,
|
||||
productSumChart: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.summaryGet();
|
||||
this.dateAmount();
|
||||
this.dateProduct();
|
||||
this.datePayType();
|
||||
this.summaryDateGet();
|
||||
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.saleChart) {
|
||||
this.saleChart.resize();
|
||||
}
|
||||
if (this.payChart) {
|
||||
this.payChart.resize();
|
||||
}
|
||||
if (this.cardPayChart) {
|
||||
this.cardPayChart.resize();
|
||||
}
|
||||
if (this.cardUserChart) {
|
||||
this.cardUserChart.resize();
|
||||
}
|
||||
if (this.productCountChart) {
|
||||
this.productCountChart.resize();
|
||||
}
|
||||
if (this.productSumChart) {
|
||||
this.productSumChart.resize();
|
||||
}
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
this.initCardUserChart();
|
||||
},
|
||||
methods: {
|
||||
// 初始化支付笔数柱状图
|
||||
initCardPayChart(time = [], data = []) {
|
||||
this.cardPayChart = echarts.init(this.$refs.cardPayChart);
|
||||
this.cardPayChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化访问量柱状图
|
||||
initCardCountChart(time = [], data = []) {
|
||||
this.cardCountChart = echarts.init(this.$refs.cardCountChart);
|
||||
this.cardCountChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化用户数折线图
|
||||
initCardUserChart(time = [], data = []) {
|
||||
this.cardUserChart = echarts.init(this.$refs.cardUserChart);
|
||||
this.cardUserChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 10,
|
||||
x2: 0,
|
||||
y2: 2
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "line",
|
||||
symbol: "none"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化销售额图标
|
||||
initSaleChart(time, data) {
|
||||
this.saleChart = null;
|
||||
this.saleChart = echarts.init(this.$refs.saleChart);
|
||||
this.saleChart.setOption({
|
||||
title: {
|
||||
text: "销售趋势",
|
||||
x: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: time.length <= 7 ? 0 : 45,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: "9"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ececec"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: time.length <= 7 ? "50%" : "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化销售额图表
|
||||
initPayChart(data) {
|
||||
this.payChart = echarts.init(this.$refs.payChart);
|
||||
this.payChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
left: "center"
|
||||
},
|
||||
color: [
|
||||
"#409eff",
|
||||
"#91cc75",
|
||||
"#fac858",
|
||||
"#ee6666",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#fc8452",
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 获取销售额柱状图数据
|
||||
async dateAmount() {
|
||||
try {
|
||||
this.saleLoading = true;
|
||||
const res = await dateAmount(this.saleActive);
|
||||
const data = res.total.map(item => item.amount);
|
||||
const time = res.total.map(item => item.tradeDay);
|
||||
this.initSaleChart(time, data);
|
||||
setTimeout(() => {
|
||||
this.saleLoading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
paginationChange(e) {
|
||||
this.saleTablePage = e;
|
||||
this.dateProduct();
|
||||
},
|
||||
// 获取销售额排行表格数据
|
||||
async dateProduct() {
|
||||
try {
|
||||
this.saleTableLoading = true;
|
||||
const res = await dateProduct(
|
||||
this.saleTableActive,
|
||||
this.saleTablePage,
|
||||
this.saleTableSize
|
||||
);
|
||||
this.saleTable = res.totalProduct;
|
||||
this.saleTableTotal = res.total;
|
||||
this.productCount = res.productCount;
|
||||
this.productSum = res.productSum;
|
||||
setTimeout(() => {
|
||||
this.saleTableLoading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 支付类型占比 饼图
|
||||
async datePayType() {
|
||||
try {
|
||||
this.payChartLoading = true;
|
||||
const res = await datePayType(this.payChartDay);
|
||||
const data = res.countPayType.map(item => {
|
||||
return {
|
||||
value: item.count,
|
||||
name: item.payType
|
||||
};
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.payChartLoading = false;
|
||||
}, 300);
|
||||
this.initPayChart(data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 汇总数据
|
||||
async summaryGet() {
|
||||
try {
|
||||
const res1 = await summaryGet();
|
||||
const res2 = await summaryTodayGet();
|
||||
this.topData = {
|
||||
...res1,
|
||||
...res2
|
||||
};
|
||||
let payTime = res1.countDateList.map(item => item.tradeDay);
|
||||
let payData = res1.countDateList.map(item => item.count);
|
||||
|
||||
let countTime = res1.visitsCountList.map(item => item.tradeDay);
|
||||
let countData = res1.visitsCountList.map(item => item.count);
|
||||
|
||||
this.initCardPayChart(payTime, payData);
|
||||
this.initCardCountChart(countTime, countData);
|
||||
console.log(this.topData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
rankChange() {
|
||||
this.dateProduct();
|
||||
this.summaryDateGet();
|
||||
},
|
||||
// 初始化销售图标
|
||||
initProduceChart(p1, p2) {
|
||||
this.productCountChart = echarts.init(this.$refs.productCountChart);
|
||||
this.productSumChart = echarts.init(this.$refs.productSumChart);
|
||||
|
||||
this.productCountChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
type: "category",
|
||||
data: p1[0],
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: p1[1],
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#409eff" // 渐变颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#409eff" // 渐变颜色
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
this.productSumChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
type: "category",
|
||||
data: p2[0],
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: p2[1],
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#409eff" // 渐变颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#409eff" // 渐变颜色
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 日期汇总数据
|
||||
async summaryDateGet() {
|
||||
try {
|
||||
const res = await summaryDateGet(this.saleTableActive);
|
||||
let p1 = [
|
||||
res.numList.map(item => item.tradeDay),
|
||||
res.numList.map(item => item.count)
|
||||
];
|
||||
let p2 = [
|
||||
res.amountList.map(item => item.tradeDay),
|
||||
res.amountList.map(item => item.count)
|
||||
];
|
||||
this.initProduceChart(p1, p2);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.card_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding-top: 20px;
|
||||
|
||||
.card_title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
padding: 20px 0 10px 0;
|
||||
font-size: 24px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 50px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: rgb(255, 85, 85);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
$size: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
background-color: #1890ff;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart_wrap {
|
||||
margin-top: 20px;
|
||||
|
||||
.sale_data {
|
||||
display: flex;
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
|
||||
.sale_data_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding-top: 20px;
|
||||
|
||||
.card_title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-top: 10px;
|
||||
font-size: 24px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.product_chart_wrap {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: 0 20px;
|
||||
|
||||
.tab_wrap {
|
||||
display: flex;
|
||||
$color: #1890ff;
|
||||
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: $color;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 2px solid $color;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
padding: 20px 0;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.table {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<el-dialog title="下载桌码" width="400px" :visible.sync="dialogVisible" @open="reset">
|
||||
<el-form ref="form" :model="form" label-position="left">
|
||||
<el-form-item label="下载数量">
|
||||
<el-input-number v-model="form.number" :min="1" :max="total * 2"></el-input-number>
|
||||
<el-input-number v-model="form.number" :min="1" :max="500"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
|
|
|||
Loading…
Reference in New Issue