From 7a7c69695d23b9dd38b56569d06402fa933bfc6a Mon Sep 17 00:00:00 2001
From: maguohua <1264889788@qq.com>
Date: Thu, 25 May 2017 21:54:42 +0800
Subject: [PATCH] add chart

---
 README.md                   |  17 +--
 package.json                |   1 +
 src/api/getData.js          |  34 +++++-
 src/components/line1.vue    | 201 ------------------------------------
 src/components/tendency.vue | 137 ++++++++++++++++++++++++
 src/page/addGoods.vue       |  20 ++--
 src/page/home.vue           |  71 +++++++++++--
 7 files changed, 248 insertions(+), 233 deletions(-)
 delete mode 100644 src/components/line1.vue
 create mode 100644 src/components/tendency.vue

diff --git a/README.md b/README.md
index 2848d02..ef2bd63 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,23 @@
 
 # project
 
-此项目是后台项目[node-elm](https://github.com/bailicangdu/node-elm) 的数据管理系统。配合前台项目[vue2-elm](https://github.com/bailicangdu/vue2-elm)组成一个 后台系统 + 数据管理 + 前台展示 的完整流程。
+此项目是后台项目[node-elm](https://github.com/bailicangdu/node-elm) 的数据管理系统。
 
 
 # 说明
 
+>  vue + element-ui 构建的后台管理系统
+
 >  如果对您对此项目有兴趣，可以点 "Star" 支持一下 谢谢！ ^_^
 
 >  或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
 
 >  开发环境 macOS 10.12.4  nodejs 6.10.0
 
-## 项目推荐:
-
-vue + vuex 大型单页面开发：[vue2-elm](https://github.com/bailicangdu/vue2-elm)
-
-vue + vuex 入门项目：[vue2-happyfri](https://github.com/bailicangdu/vue2-happyfri)
+>  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍
 
-react + redux 完整项目和个人总结：[react-pxq](https://github.com/bailicangdu/react-pxq)
+>  传送门：[前端项目地址](https://github.com/bailicangdu/vue2-elm)  、 [后台系统地址](https://github.com/bailicangdu/node-elm)  、 [原生APP项目地址](https://github.com/bailicangdu/RN-elm)
 
-nodejs + mongodb 构筑电商后台系统：[node-elm](https://github.com/bailicangdu/node-elm)
 
 
 ## 技术栈
@@ -62,10 +59,6 @@ npm run dev
 
 # 项目截图
 
-## 登陆
-
-![](https://github.com/bailicangdu/vue2-manage/blob/master/screenshots/manage_login.png)
-
 ## 添加商店
 ![](https://github.com/bailicangdu/vue2-manage/blob/master/screenshots/addshop.png)
 
diff --git a/package.json b/package.json
index 36a4335..850f523 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "echarts": "^3.5.4",
     "element-ui": "^1.2.9",
+    "time-formater": "^1.0.1",
     "vue": "^2.2.6",
     "vue-router": "^2.3.1",
     "vuex": "^2.3.1"
diff --git a/src/api/getData.js b/src/api/getData.js
index 4dcf0bb..0f0f09f 100644
--- a/src/api/getData.js
+++ b/src/api/getData.js
@@ -12,6 +12,38 @@ const login = data => fetch('/admin/login', data, 'POST');
 
 const signout = () => fetch('/admin/singout');
 
+/**
+ * api请求量
+ */
+
+const apiCount = date => fetch('/statis/api/' + date + '/count');
+
+/**
+ * 所有api请求量
+ */
+
+const apiAllCount = () => fetch('/statis/api/all/count');
+
+
+/**
+ * 所有api请求信息
+ */
+
+const apiAllRecord = () => fetch('/statis/api/all');
+
+/**
+ * 用户注册量求量
+ */
+
+const userCount = date => fetch('/statis/user/' + date + '/count');
+
+/**
+ * 某一天订单数量
+ */
+
+const orderCount = date => fetch('/statis/order/' + date + '/count');
+
+
 /**
  * 超级管理员列表
  */
@@ -176,5 +208,5 @@ const getUserInfo = user_id => fetch('/v1/user/' + user_id);
 const getAddressById = address_id => fetch('/v1/addresse/' + address_id);
 
 
-export {login, signout, adminList, adminCount, cityGuess, addShop, searchplace, getCategory, addCategory, addFood, foodCategory ,getResturants, getResturantDetail, getResturantsCount, updateResturant, deleteResturant, getFoods, getFoodsCount, getMenu, updateFood, getMenuById, deleteFood, getUserList, getUserCount, getOrderList, getOrderCount, getUserInfo, getAddressById}
+export {login, signout, apiCount, apiAllCount, apiAllRecord, userCount, orderCount, adminList, adminCount, cityGuess, addShop, searchplace, getCategory, addCategory, addFood, foodCategory ,getResturants, getResturantDetail, getResturantsCount, updateResturant, deleteResturant, getFoods, getFoodsCount, getMenu, updateFood, getMenuById, deleteFood, getUserList, getUserCount, getOrderList, getOrderCount, getUserInfo, getAddressById}
 
diff --git a/src/components/line1.vue b/src/components/line1.vue
deleted file mode 100644
index 55950e3..0000000
--- a/src/components/line1.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-    <div class="line1">
-        <div id="line1" class="" style="width: 90%;height:450px;"></div>
-    </div>
-</template>
-
-<script>
-    import echarts from 'echarts';
-
-    export default {
-    	mounted(){
-        this.myChart = echarts.init(document.getElementById('line1'));
-        this.initData();
-        },
-        methods: {
-            initData(){
-                this.myChart.setOption({
-                    backgroundColor: '#394056',
-                    title: {
-                      text: '数据走势',
-                      textStyle: {
-                        fontWeight: 'normal',
-                        fontSize: 16,
-                        color: '#F1F1F3'
-                      },
-                      left: '45%'
-                    },
-                    tooltip: {
-                      trigger: 'axis',
-                      axisPointer: {
-                        lineStyle: {
-                          color: '#57617B'
-                        }
-                      }
-                    },
-                    legend: {
-                      icon: 'rect',
-                      itemWidth: 14,
-                      itemHeight: 5,
-                      itemGap: 13,
-                      data: ['访问量', 'API请求', '新增用户'],
-                      right: '4%',
-                      textStyle: {
-                        fontSize: 12,
-                        color: '#F1F1F3'
-                      }
-                    },
-                    grid: {
-                      left: '3%',
-                      right: '4%',
-                      bottom: '3%',
-                      containLabel: true
-                    },
-                    xAxis: [{
-                      type: 'category',
-                      boundaryGap: false,
-                      axisLine: {
-                        lineStyle: {
-                          color: '#57617B'
-                        }
-                      },
-                      data: ['04/26', '04/27', '04/28', '04/29', '04/30', '05/01', '05/02', '05/03', '05/04', '05/05', '05/06', '05/07']
-                    }],
-                    yAxis: [{
-                      type: 'value',
-                      name: '单位（次）',
-                      axisTick: {
-                        show: false
-                      },
-                      axisLine: {
-                        lineStyle: {
-                          color: '#57617B'
-                        }
-                      },
-                      axisLabel: {
-                        margin: 10,
-                        textStyle: {
-                          fontSize: 14
-                        }
-                      },
-                      splitLine: {
-                        lineStyle: {
-                          color: '#57617B'
-                        }
-                      }
-                    }],
-                    series: [{
-                      name: '访问量',
-                      type: 'line',
-                      smooth: true,
-                      symbol: 'circle',
-                      symbolSize: 5,
-                      showSymbol: false,
-                      lineStyle: {
-                        normal: {
-                          width: 1
-                        }
-                      },
-                      areaStyle: {
-                        normal: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: 'rgba(137, 189, 27, 0.3)'
-                          }, {
-                            offset: 0.8,
-                            color: 'rgba(137, 189, 27, 0)'
-                          }], false),
-                          shadowColor: 'rgba(0, 0, 0, 0.1)',
-                          shadowBlur: 10
-                        }
-                      },
-                      itemStyle: {
-                        normal: {
-                          color: 'rgb(137,189,27)',
-                          borderColor: 'rgba(137,189,2,0.27)',
-                          borderWidth: 12
-
-                        }
-                      },
-                      data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-                    }, {
-                      name: 'API请求',
-                      type: 'line',
-                      smooth: true,
-                      symbol: 'circle',
-                      symbolSize: 5,
-                      showSymbol: false,
-                      lineStyle: {
-                        normal: {
-                          width: 1
-                        }
-                      },
-                      areaStyle: {
-                        normal: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: 'rgba(0, 136, 212, 0.3)'
-                          }, {
-                            offset: 0.8,
-                            color: 'rgba(0, 136, 212, 0)'
-                          }], false),
-                          shadowColor: 'rgba(0, 0, 0, 0.1)',
-                          shadowBlur: 10
-                        }
-                      },
-                      itemStyle: {
-                        normal: {
-                          color: 'rgb(0,136,212)',
-                          borderColor: 'rgba(0,136,212,0.2)',
-                          borderWidth: 12
-
-                        }
-                      },
-                      data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-                    }, {
-                      name: '新增用户',
-                      type: 'line',
-                      smooth: true,
-                      symbol: 'circle',
-                      symbolSize: 5,
-                      showSymbol: false,
-                      lineStyle: {
-                        normal: {
-                          width: 1
-                        }
-                      },
-                      areaStyle: {
-                        normal: {
-                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: 'rgba(219, 50, 51, 0.3)'
-                          }, {
-                            offset: 0.8,
-                            color: 'rgba(219, 50, 51, 0)'
-                          }], false),
-                          shadowColor: 'rgba(0, 0, 0, 0.1)',
-                          shadowBlur: 10
-                        }
-                      },
-                      itemStyle: {
-                        normal: {
-                          color: 'rgb(219,50,51)',
-                          borderColor: 'rgba(219,50,51,0.2)',
-                          borderWidth: 12
-                        }
-                      },
-                      data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-                    }]
-                });
-            }
-        },
-    }
-</script>
-
-<style lang="less">
-	@import '../style/mixin';
-    .line1{
-        display: flex;
-        justify-content: center;
-    }
-</style>
diff --git a/src/components/tendency.vue b/src/components/tendency.vue
new file mode 100644
index 0000000..a9695bf
--- /dev/null
+++ b/src/components/tendency.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="line1">
+        <div id="line1" class="" style="width: 90%;height:450px;"></div>
+    </div>
+</template>
+
+<script>
+    import echarts from 'echarts';
+
+    export default {
+        mounted(){
+            this.myChart = echarts.init(document.getElementById('line1'));
+            this.initData();
+        },
+        props: ['sevenDate', 'sevenDay'],
+        methods: {
+            initData(){
+                const colors = ['#d14a61', '#5793f3', '#675bba'];
+                const option = {
+                    color: colors,
+                    title: {
+                        text: '走势图',
+                        subtext: ''
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    legend: {
+                        data:['API请求量', '新注册用户', '新增订单']
+                    },
+                    toolbox: {
+                        show: true,
+                        feature: {
+                            dataZoom: {
+                                yAxisIndex: 'none'
+                            },
+                            dataView: {readOnly: false},
+                            magicType: {type: ['bar', 'line']},
+                            restore: {},
+                        }
+                    },
+                    xAxis:  {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: this.sevenDay
+                    },
+                    yAxis: [
+                        {
+                          type: 'value',
+                          name: 'API请求量',
+                          min: 0,
+                          max: 10000,
+                          position: 'left',
+                          axisLine: {
+                              lineStyle: {
+                                  color: '#999'
+                              }
+                          },
+                          axisLabel: {
+                              formatter: '{value}'
+                          }
+                        },
+                        {
+                          type: 'value',
+                          name: '用户、订单',
+                          min: 0,
+                          max: 100,
+                          position: 'right',
+                          axisLine: {
+                              lineStyle: {
+                                  color: '#999'
+                              }
+                          },
+                          axisLabel: {
+                              formatter: '{value}'
+                          }
+                        },
+                    ],
+                    series: [
+                        {
+                            name:'API请求量',
+                            type:'line',
+                            data:this.sevenDate[0],
+                            markPoint: {
+                                data: [
+                                    {type: 'max', name: '最大值'},
+                                    {type: 'min', name: '最小值'}
+                                ]
+                            },
+                        },
+                        {
+                            name:'新注册用户',
+                            type:'line',
+                            data:this.sevenDate[1],
+                            yAxisIndex: 1,
+                            markPoint: {
+                                data: [
+                                    {type: 'max', name: '最大值'},
+                                    {type: 'min', name: '最小值'}
+                                ]
+                            },
+                        },
+                        {
+                            name:'新增订单',
+                            type:'line',
+                            data:this.sevenDate[2],
+                            yAxisIndex: 1,
+                            markPoint: {
+                                data: [
+                                    {type: 'max', name: '最大值'},
+                                    {type: 'min', name: '最小值'}
+                                ]
+                            },
+                        }
+                    ]
+              };
+                this.myChart.setOption(option);
+            }
+        },
+        watch: {
+            sevenDate: function (){
+                this.initData()
+            },
+            sevenDay: function (){
+                this.initData()
+            }
+        }
+    }
+</script>
+
+<style lang="less">
+	@import '../style/mixin';
+    .line1{
+        display: flex;
+        justify-content: center;
+    }
+</style>
diff --git a/src/page/addGoods.vue b/src/page/addGoods.vue
index 0dd9408..75573d7 100644
--- a/src/page/addGoods.vue
+++ b/src/page/addGoods.vue
@@ -143,7 +143,7 @@
     		return {
     			baseUrl,
     			baseImgPath,
-    			restaurant_id: null,
+    			restaurant_id: 1,
     			categoryForm: {
     				categoryList: [],
     				categorySelect: '',
@@ -189,19 +189,19 @@
 		        }
     		}
     	},
-    	beforeRouteEnter (to, from, next) {
-		    if (to.query.restaurant_id) {
-		    	next()
-		    }else{
-		    	alert('请先选择店铺');
-		    	next('/shopList');
-		    }
-		},
     	components: {
     		headTop,
     	},
     	created(){
-    		this.restaurant_id = this.$route.query.restaurant_id;
+    		if (this.$route.query.restaurant_id) {
+    			this.restaurant_id = this.$route.query.restaurant_id;
+    		}else{
+    			this.restaurant_id = Math.ceil(Math.random()*10);
+    			this.$message({
+	            	type: 'error',
+	            	message: '请至商家列表页选择一个商铺'
+	          	});
+    		}
     		this.initData();
     	},
     	computed: {
diff --git a/src/page/home.vue b/src/page/home.vue
index f758de0..c0a2421 100644
--- a/src/page/home.vue
+++ b/src/page/home.vue
@@ -4,26 +4,77 @@
 		<section class="data_section">
 			<header class="section_title">当日数据统计</header>
 			<el-row :gutter="20">
-				<el-col :span="8"><div class="data_list"><span class="data_num">1,621</span> 浏览量</div></el-col>
-				<el-col :span="8"><div class="data_list"><span class="data_num">13,087</span> API请求量</div></el-col>
-				<el-col :span="8"><div class="data_list"><span class="data_num">833</span> 新增用户</div></el-col>
+				<el-col :span="8"><div class="data_list"><span class="data_num">{{apiCount}}</span> API请求量</div></el-col>
+				<el-col :span="8"><div class="data_list"><span class="data_num">{{userCount}}</span> 新注册用户</div></el-col>
+				<el-col :span="8"><div class="data_list"><span class="data_num">{{orderCount}}</span> 新增订单</div></el-col>
 			</el-row>
 		</section>
-		<line1></line1>
+		<tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
     </div>
 </template>
 
 <script>
 	import headTop from '../components/headTop'
-	import line1 from '../components/line1' 
-
-
+	import tendency from '../components/tendency' 
+	import dtime from 'time-formater'
+	import {apiCount, userCount, orderCount} from '@/api/getData'
     export default {
+    	data(){
+    		return {
+    			apiCount: null,
+    			userCount: null,
+    			orderCount: null,
+    			sevenDay: [],
+    			sevenDate: [[],[],[]],
+    		}
+    	},
     	components: {
     		headTop,
-    		line1,
+    		tendency,
+    	},
+    	mounted(){
+    		this.initData();
+    		for (let i = 6; i > -1; i--) {
+    			const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
+    			this.sevenDay.push(date)
+    		}
+    		this.getSevenData();
     	},
-    	
+    	methods: {
+    		async initData(){
+    			const today = dtime().format('YYYY-MM-DD')
+    			Promise.all([apiCount(today), userCount(today), orderCount(today)])
+    			.then(res => {
+    				this.apiCount = res[0].count;
+    				this.userCount = res[1].count;
+    				this.orderCount = res[2].count;
+    			}).catch(err => {
+    				console.log(err)
+    			})
+    		},
+    		async getSevenData(){
+    			const apiArr = [[],[],[]];
+    			this.sevenDay.forEach(item => {
+    				apiArr[0].push(apiCount(item))
+    				apiArr[1].push(userCount(item))
+    				apiArr[2].push(orderCount(item))
+    			})
+    			const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]]
+    			Promise.all(promiseArr).then(res => {
+    				const resArr = [[],[],[]];
+					res.forEach((item, index) => {
+						if (item.status == 1) {
+							//const count = index < 7 ? item.count/100 + 'x100' : item.count;
+							resArr[Math.floor(index/7)].push(item.count)
+						}
+					})
+					this.sevenDate = resArr;
+					console.log(this.sevenDate)
+    			}).catch(err => {
+    				console.log(err)
+    			})
+    		}
+    	}
     }
 </script>
 
@@ -31,6 +82,7 @@
 	@import '../style/mixin';
 	.data_section{
 		padding: 20px;
+		margin-bottom: 40px;
 		.section_title{
 			text-align: center;
 			font-size: 30px;
@@ -39,6 +91,7 @@
 		.data_list{
 			text-align: center;
 			font-size: 14px;
+			color: #666;
 			.data_num{
 				color: #333;
 				font-size: 26px;
-- 
GitLab