update

admin-update/src/Home.vue

@@ -99,7 +99,7 @@
 			</div>
 		</div>
 
-		<div class="card card-plan">
+		<!-- <div class="card card-plan">
 			<p class="card-title">计划</p>
 
 			<div class="card-body">
@@ -125,12 +125,12 @@
 					</template>
 				</cl-crud>
 			</div>
-		</div>
+		</div> -->
 	</div>
 </template>
 
 <script>
-import Echart1 from '@/components/echarts/1.vue';
+import Echart1 from '@/components/echarts/trend.vue';
 
 export default {
 	components: {

admin-update/src/components/echarts/1.vue

@@ -1,105 +0,0 @@
-<template>
-	<e-charts :options="options"></e-charts>
-</template>
-
-<script>
-import ECharts from 'vue-echarts';
-import 'echarts/lib/chart/line';
-
-export default {
-	name: 'echart1',
-
-	components: {
-		ECharts
-	},
-
-	data() {
-		return {
-			options: {
-				tooltip: {
-					trigger: 'axis'
-				},
-				xAxis: [
-					{
-						type: 'category',
-						data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
-						axisLine: {
-							lineStyle: {
-								color: '#999'
-							}
-						}
-					}
-				],
-				yAxis: [
-					{
-						type: 'value',
-						splitNumber: 4,
-						splitLine: {
-							lineStyle: {
-								type: 'dashed',
-								color: '#DDD'
-							}
-						},
-						axisLine: {
-							show: false,
-							lineStyle: {
-								color: '#333'
-							}
-						},
-						nameTextStyle: {
-							color: '#999'
-						},
-						splitArea: {
-							show: false
-						}
-					}
-				],
-				series: [
-					{
-						name: '课时',
-						type: 'line',
-						data: new Array(6).fill(1).map(() => parseInt(Math.random() * 10000)),
-						lineStyle: {
-							normal: {
-								width: 8,
-								color: {
-									type: 'linear',
-
-									colorStops: [
-										{
-											offset: 0,
-											color: '#A9F387'
-										},
-										{
-											offset: 1,
-											color: '#48D8BF'
-										}
-									],
-									globalCoord: false
-								},
-								shadowColor: 'rgba(72,216,191, 0.3)',
-								shadowBlur: 10,
-								shadowOffsetY: 20
-							}
-						},
-						itemStyle: {
-							normal: {
-								color: '#fff',
-								borderWidth: 10,
-								borderColor: '#A9F387'
-							}
-						},
-						smooth: true
-					}
-				]
-			}
-		};
-	}
-};
-</script>
-
-<style lang="stylus" scoped>
-.echarts {
-	width: 100%;
-}
-</style>

admin-update/src/components/echarts/trend.vue

@@ -0,0 +1,230 @@
+<template>
+	<e-charts :options="options"></e-charts>
+</template>
+
+<script>
+import ECharts from 'vue-echarts';
+import 'echarts/lib/chart/line';
+
+export default {
+	name: 'echart',
+	components: {
+		ECharts
+	},
+	props: {
+		chartData: {
+			type: Object
+		}
+	},
+	data() {
+		return {
+			chart: null,
+			options: {
+				// tooltip: {
+				// 	trigger: 'axis'
+				// },
+				// grid: {
+				// 	left: '3%',
+				// 	right: '3%',
+				// 	top: '30',
+				// 	bottom: '0',
+				// 	containLabel: true
+				// },
+				// xAxis: [
+				// 	{
+				// 		type: 'category',
+				// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+				// 		axisLine: {
+				// 			lineStyle: {
+				// 				color: '#999'
+				// 			}
+				// 		}
+				// 	}
+				// ],
+				// yAxis: [
+				// 	{
+				// 		type: 'value',
+				// 		splitNumber: 4,
+				// 		splitLine: {
+				// 			lineStyle: {
+				// 				type: 'dashed',
+				// 				color: '#DDD'
+				// 			}
+				// 		},
+				// 		axisLine: {
+				// 			show: false,
+				// 			lineStyle: {
+				// 				color: '#333'
+				// 			}
+				// 		},
+				// 		nameTextStyle: {
+				// 			color: '#999'
+				// 		},
+				// 		splitArea: {
+				// 			show: false
+				// 		}
+				// 	}
+				// ],
+				// series: [
+				// 	{
+				// 		name: '统计',
+				// 		type: 'line',
+				// 		data: [820, 932, 901, 934, 1290, 1330, 1320],
+				// 		lineStyle: {
+				// 			normal: {
+				// 				width: 8,
+				// 				color: {
+				// 					type: 'linear',
+				// 					colorStops: [
+				// 						{
+				// 							offset: 0,
+				// 							color: '#A9F387'
+				// 						},
+				// 						{
+				// 							offset: 1,
+				// 							color: '#48D8BF'
+				// 						}
+				// 					],
+				// 					globalCoord: false
+				// 				},
+				// 				shadowColor: 'rgba(72,216,191, 0.3)',
+				// 				shadowBlur: 10,
+				// 				shadowOffsetY: 20
+				// 			}
+				// 		},
+				// 		itemStyle: {
+				// 			normal: {
+				// 				color: '#fff',
+				// 				borderWidth: 10,
+				// 				borderColor: '#A9F387'
+				// 			}
+				// 		},
+				// 		smooth: true
+				// 	}
+				// ]
+			}
+		};
+	},
+	watch: {
+		chartData: {
+			deep: true,
+			handler: function(val) {
+				if (!this.chart) {
+					return false;
+				}
+				// let chartData = JSON.parse(JSON.stringify(val));
+				this.initChart();
+				// this.setOptions(chartData);
+			}
+		}
+	},
+	methods: {
+		initChart() {
+			// this.chart = echarts.init(this.$el, 'macarons')
+			this.chart = true;
+			if (this.$util.isEmpty(this.chartData)) return false;
+			let chartData = JSON.parse(JSON.stringify(this.chartData));
+			let nameData = [];
+			let numData = [];
+			for (let i in chartData) {
+				nameData.push(i);
+				numData.push(chartData[i]);
+			}
+			this.setOptions({ nameData: nameData, numData: numData });
+		},
+		setOptions(data) {
+			this.options = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				grid: {
+					left: '3%',
+					right: '3%',
+					top: '30',
+					bottom: '0',
+					containLabel: true
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: data.nameData,
+						axisLine: {
+							lineStyle: {
+								color: '#999'
+							}
+						}
+					}
+				],
+				yAxis: [
+					{
+						type: 'value',
+						splitNumber: 4,
+						splitLine: {
+							lineStyle: {
+								type: 'dashed',
+								color: '#DDD'
+							}
+						},
+						axisLine: {
+							show: false,
+							lineStyle: {
+								color: '#333'
+							}
+						},
+						nameTextStyle: {
+							color: '#999'
+						},
+						splitArea: {
+							show: false
+						}
+					}
+				],
+				series: [
+					{
+						name: '统计',
+						type: 'line',
+						data: data.numData,
+						lineStyle: {
+							normal: {
+								width: 8,
+								color: {
+									type: 'linear',
+
+									colorStops: [
+										{
+											offset: 0,
+											color: '#A9F387'
+										},
+										{
+											offset: 1,
+											color: '#48D8BF'
+										}
+									],
+									globalCoord: false
+								},
+								shadowColor: 'rgba(72,216,191, 0.3)',
+								shadowBlur: 10,
+								shadowOffsetY: 20
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: '#fff',
+								borderWidth: 10,
+								borderColor: '#A9F387'
+							}
+						},
+						smooth: true
+					}
+				]
+			};
+		}
+	}
+};
+</script>
+
+<style lang="stylus" scoped>
+.echarts {
+	width: 100%;
+}
+</style>

admin-update/src/cool/request/index.js

@@ -16,6 +16,7 @@ import staff from '@/service/staff/index';
 import role from '@/service/role/index';
 import single from '@/service/single/index';
 import setting from '@/service/setting/index';
+import workbench from '@/service/workbench/index';
 // sass
 import sassShop from '@/service/sass/shop/index';
 import sassOrder from '@/service/sass/order/index';
@@ -45,6 +46,7 @@ export function SET_SERVICE({ store }) {
 		role,
 		single,
 		setting,
+		workbench,
 		// sass
 		sassShop,
 		sassOrder,

admin-update/src/mock/userInfo.js

@@ -175,11 +175,11 @@ let menu = {
 			id: '1',
 			parentId: null,
 			name: '工作台',
-			type: 0,
+			type: 1,
 			icon: 'icongongzuotai',
 			orderNum: 1,
 			router: '/',
-			viewPath: null,
+			viewPath: 'views/home.vue',
 			keepAlive: 1
 		},
 		// 客户管理

admin-update/src/pages/login/index.js

@@ -63,7 +63,11 @@ export default {
 					this.$message.error('该账号没有权限');
 				} else {
 					this.$nextTick(() => {
-						this.$router.push('/');
+						if (this.$projectName == 'business') {
+							this.$router.push('/');
+						} else {
+							this.$router.push('/sass/shop-list');
+						}
 					});
 				}
 			} catch (err) {

admin-update/src/service/workbench/index.js

@@ -0,0 +1,13 @@
+import { BaseService, Service } from '@/cool';
+
+export class WorkbenchService extends BaseService {
+	// 控制台首页 b
+	index(data) {
+		return this.request({
+			url: '/console/profile',
+			params: data
+		});
+	}
+}
+
+export default new WorkbenchService();

admin-update/src/views/home.vue

@@ -0,0 +1,487 @@
+<template>
+	<div class="home">
+		<!-- total -->
+		<div class="card-statistics">
+			<div class="card block" v-for="(item, index) in totalData" :key="index">
+				<div class="val">
+					<div class="left">
+						<i :class="item.icon"></i>
+					</div>
+
+					<div class="right">
+						<p>{{ item.name }}</p>
+						<p>{{ item.val }}</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- pending -->
+		<div class="card pending-wrap">
+			<div class="card-title">待处理事务</div>
+			<div class="card-body">
+				<div class="pending-list-wrap">
+					<div class="list" v-for="(item, index) in pendingData" :key="index">
+						<span>{{ item.name }}</span>
+						<span>{{ item.val }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- entry -->
+		<div class="card entry-wrap">
+			<div class="card-title">运营快捷入口</div>
+			<div class="card-body">
+				<div class="entry-list-wrap">
+					<div class="list" v-for="(item, index) in entryData" :key="index">
+						<div class="icon-wrap">
+							<i class="iconfont" :class="[item.icon]"></i>
+						</div>
+						<div>{{ item.name }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- income -->
+		<div class="card card-income">
+			<div class="card-title">收入统计</div>
+			<div class="card-body">
+				<div class="echart-left-wrap">
+					<div>
+						<div>本月收入</div>
+						<div class="num">{{ incomeData.month || 0 }}</div>
+					</div>
+					<div>
+						<div>本周收入</div>
+						<div class="num">{{ incomeData.week || 0 }}</div>
+					</div>
+				</div>
+				<div class="echart-wrap">
+					<div class="echart-tit">最近七天收入</div>
+					<trend-echart ref="incomeEchart" :chartData="incomeData.list"></trend-echart>
+				</div>
+			</div>
+		</div>
+		<!-- visitor -->
+		<div class="card card-visitor">
+			<div class="card-title">访问统计</div>
+			<div class="card-body">
+				<div class="echart-left-wrap">
+					<div>
+						<div>本月收入</div>
+						<div class="num">{{ visitorData.month || 0 }}</div>
+					</div>
+					<div>
+						<div>本周收入</div>
+						<div class="num">{{ visitorData.week || 0 }}</div>
+					</div>
+				</div>
+				<div class="echart-wrap">
+					<div class="echart-tit">最近七天访问</div>
+					<trend-echart ref="visitorEchart" :chartData="visitorData.list"></trend-echart>
+				</div>
+			</div>
+		</div>
+		<!-- allTotal -->
+		<div class="card all-total-wrap">
+			<div class="card-title">总览</div>
+			<div class="card-body">
+				<div class="all-total-list-wrap">
+					<div class="list" v-for="(item, index) in allTotalData" :key="index">
+						<div class="num">{{ item.val }}</div>
+						<div>{{ item.name }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import TrendEchart from '@/components/echarts/trend.vue';
+
+export default {
+	components: {
+		TrendEchart
+	},
+
+	data() {
+		return {
+			// 总数
+			totalData: [
+				{
+					name: '今日访问量',
+					icon: 'el-icon-s-data',
+					val: 0
+				},
+				{
+					name: '今日收入',
+					icon: 'el-icon-s-marketing',
+					val: '￥0.00'
+				},
+				{
+					name: '今日订单',
+					icon: 'el-icon-s-order',
+					val: 0
+				},
+				{
+					name: '新增客户',
+					icon: 'el-icon-s-custom',
+					val: 0
+				},
+				{
+					name: '新增粉丝',
+					icon: 'el-icon-s-flag',
+					val: 0
+				}
+			],
+			// 待处理
+			pendingData: [
+				{
+					name: '待付款订单',
+					val: 0
+				},
+				{
+					name: '配送中订单',
+					val: 0
+				},
+				{
+					name: '已完结订单',
+					val: 0
+				},
+				{
+					name: '待配送订单',
+					val: 0
+				},
+				{
+					name: '待通知订单',
+					val: 0
+				},
+				{
+					name: '全部订单',
+					val: 0
+				}
+			],
+			// 快捷入口
+			entryData: [
+				{
+					name: '发货',
+					icon: 'icondingdanguanli',
+					path: ''
+				},
+				{
+					name: '订单管理',
+					icon: 'icondingdanguanli',
+					path: '/order/list'
+				},
+				{
+					name: '添加图库',
+					icon: 'iconshangpinguanli',
+					path: 'goods/img-store'
+				},
+				{
+					name: '客户管理',
+					icon: 'iconkehuguanli',
+					path: 'member/list'
+				},
+				{
+					name: '添加商品',
+					icon: 'icontupiantianjia',
+					path: 'goods/add'
+				},
+				{
+					name: '商品管理',
+					icon: 'iconshangpinguanli',
+					path: 'goods/list'
+				},
+				{
+					name: '邀请有礼',
+					icon: 'iconyaoqingyouli',
+					path: 'invite/list'
+				},
+				{
+					name: '广告管理',
+					icon: 'iconguanggao',
+					path: 'ad/list'
+				}
+				// {
+				// 	name: '拼团管理',
+				// 	path: ''
+				// }
+			],
+			// 总统计
+			allTotalData: [
+				{
+					name: '客户数',
+					val: 10
+				},
+				{
+					name: '粉丝数',
+					val: 10
+				},
+				{
+					name: '会员数',
+					val: 10
+				},
+				{
+					name: '总支出',
+					val: 10
+				},
+				{
+					name: '总收入',
+					val: 10
+				},
+				{
+					name: '总访问量',
+					val: 10
+				},
+				{
+					name: '剩余短信',
+					val: 10
+				},
+				{
+					name: '商品总数',
+					val: 10
+				}
+			],
+			// 收入统计
+			incomeData: {
+				list: {}
+			},
+			// 访问统计
+			visitorData: {
+				list: {}
+			}
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.getData();
+		},
+		getData() {
+			this.$service.workbench.index().then(res => {
+				if (this.$util.isEmpty(res)) return false;
+				this.incomeData = res.incomeStat;
+				this.visitorData = res.visitStat;
+				setTimeout(() => {
+					this.initChart();
+				});
+
+				// total
+				this.totalData[0].val = res.todayData.visit;
+				this.totalData[1].val = `￥${res.todayData.income || 0.0}`;
+				this.totalData[2].val = res.todayData.order;
+				this.totalData[3].val = res.todayData.user;
+				this.totalData[4].val = res.todayData.fans;
+				// pending
+				this.pendingData[0].val = res.asset.unPayOrder;
+				this.pendingData[1].val = res.asset.sendingOrder;
+				this.pendingData[2].val = res.asset.finishOrder;
+				this.pendingData[3].val = res.asset.unSendOrder;
+				this.pendingData[4].val = res.asset.unNoticeOrder;
+				this.pendingData[5].val = res.asset.totalOrder;
+				// all-total
+				this.allTotalData[0].val = res.asset.totalUser;
+				this.allTotalData[1].val = res.asset.totalFans;
+				this.allTotalData[2].val = res.asset.totalMember;
+				this.allTotalData[3].val = res.asset.totalExpend;
+				this.allTotalData[4].val = res.asset.totalIncome;
+				this.allTotalData[5].val = res.asset.totalVisit;
+				this.allTotalData[6].val = res.asset.remainSmsNum;
+				this.allTotalData[7].val = res.asset.totalGoods;
+			});
+		},
+		initChart() {
+			this.$refs.incomeEchart.initChart();
+			this.$refs.visitorEchart.initChart();
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	.card {
+		background-color: #fff;
+		border-radius: 5px;
+		margin-bottom: 20px;
+
+		.card-title {
+			color: #000;
+			padding: 20px 20px 0 20px;
+		}
+
+		.card-body {
+			padding: 10px;
+			margin-top: 20px;
+		}
+	}
+
+	.card-statistics {
+		@include disFlex(center, space-between);
+		.block {
+			width: calc(19% - 40px);
+			background-color: #fff;
+			// height: 100px;
+			padding: 20px;
+
+			.val {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.left {
+					i {
+						font-size: 34px;
+
+						&.el-icon-s-goods {
+							color: #ec5555;
+						}
+
+						&.el-icon-s-flag {
+							color: #ffb431;
+						}
+
+						&.el-icon-s-custom {
+							color: #9257db;
+						}
+
+						&.el-icon-s-marketing {
+							color: #00d06f;
+						}
+
+						&.el-icon-s-data {
+							color: red;
+						}
+					}
+				}
+
+				.right {
+					p {
+						&:first-child {
+							font-size: 13px;
+							text-align: right;
+						}
+
+						&:last-child {
+							font-size: 24px;
+							margin-top: 5px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.pending-wrap {
+		.pending-list-wrap {
+			@include disFlex(center, flex-start);
+			flex-wrap: wrap;
+			padding: 0 20px;
+			color: $fontColor2;
+			.list {
+				@include disFlex(center, space-between);
+				width: 28%;
+				margin-right: 7%;
+				margin-bottom: 18px;
+				border-bottom: 1px solid $borderColor;
+				padding-bottom: 6px;
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+				&:hover {
+					color: $mainColor;
+					cursor: pointer;
+					border-color: $borderColor;
+				}
+			}
+		}
+	}
+
+	.entry-wrap {
+		.entry-list-wrap {
+			@include disFlex(center, space-between);
+			padding: 0 20px;
+			color: $fontColor2;
+			.list {
+				text-align: center;
+				margin-bottom: 10px;
+				&:hover {
+					color: $mainColor;
+					cursor: pointer;
+				}
+				.icon-wrap {
+					margin-bottom: 10px;
+					.iconfont {
+						font-size: 30px;
+					}
+				}
+			}
+		}
+	}
+
+	.all-total-wrap {
+		.all-total-list-wrap {
+			@include disFlex(center, space-between);
+			padding: 0 20px;
+			color: $fontColor2;
+			.list {
+				text-align: center;
+				margin-bottom: 10px;
+				// &:hover {
+				// 	color: $mainColor;
+				// 	cursor: pointer;
+				// }
+				.num {
+					font-size: 24px;
+					margin-bottom: 10px;
+				}
+			}
+		}
+	}
+
+	.card-visitor,
+	.card-income {
+		.card-body {
+			@include disFlex(flex-start, flex-start);
+			.echart-left-wrap {
+				width: 140px;
+				margin-top: 20px;
+				color: $fontColor2;
+				padding-left: 10px;
+				text-align: left;
+				& > div:first-child {
+					margin-bottom: 50px;
+				}
+				.num {
+					color: #333;
+					font-size: 26px;
+					margin-top: 10px;
+				}
+			}
+			.echart-wrap {
+				width: calc(100% - 150px);
+				border-left: 1px solid $borderColor;
+				.echart-tit {
+					color: $fontColor2;
+					padding-left: 20px;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.sales-top {
+		color: red;
+	}
+
+	.sales-bottom {
+		color: green;
+	}
+}
+</style>