新增首页图表

README.md

@@ -54,6 +54,11 @@ npm run dev
 - [ ] Markdown编辑器
 
 
+# 项目截图
+
+### 登陆
+
+![](http://cangdu.org/files/images/manage_login.png)
 
 ## License
 

package.json

@@ -14,6 +14,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "echarts": "^3.5.4",
     "element-ui": "^1.2.9",
     "vue": "^2.2.6",
     "vue-router": "^2.3.1",

src/components/headTop.vue

@@ -2,10 +2,8 @@
     <div class="header_container">
 
 		<el-breadcrumb separator="/">
-			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-			<el-breadcrumb-item>活动管理</el-breadcrumb-item>
-			<el-breadcrumb-item>活动列表</el-breadcrumb-item>
-			<el-breadcrumb-item>活动详情</el-breadcrumb-item>
+			<el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
+			<el-breadcrumb-item v-for="(item, index) in $route.meta" key="index">{{item}}</el-breadcrumb-item>
 		</el-breadcrumb>
 		<el-dropdown @command="handleCommand" menu-align='start'>
 			<img src="../assets/img/avator.jpg" class="avator">
@@ -19,6 +17,9 @@
 
 <script>
     export default {
+    	created(){
+    		
+    	},
 		methods: {
 			handleCommand(command) {
 				this.$message(command);
@@ -40,7 +41,7 @@
 	.avator{
 		.wh(36px, 36px);
 		border-radius: 50%;
-		margin-right: 30px;
+		margin-right: 37px;
 	}
 	.el-dropdown-menu__item{
         text-align: center;

src/components/line1.vue

+<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>

src/page/home.vue

 <template>
-    <div class="fillcontain home_page">
+    <div>
         <head-top></head-top>
+		<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-row>
+		</section>
+		<line1></line1>
     </div>
 </template>
 
 <script>
 	import headTop from '../components/headTop'
+	import line1 from '../components/line1' 
+
+
     export default {
     	components: {
     		headTop,
-    	}
+    		line1,
+    	},
+    	
     }
 </script>
 
 <style lang="less">
 	@import '../style/mixin';
-	.home_page{
-		
+	.data_section{
+		padding: 20px;
+		.section_title{
+			text-align: center;
+			font-size: 30px;
+			margin-bottom: 10px;
+		}
+		.data_list{
+			text-align: center;
+			font-size: 14px;
+			.data_num{
+				color: #333;
+				font-size: 26px;
+			}
+		}
 	}
 </style>

src/page/manage.vue

@@ -12,19 +12,19 @@
 						<el-menu-item index="adminList">管理员列表</el-menu-item>
 					</el-submenu>
 					<el-submenu index="3">
-						<template slot="title"><i class="el-icon-edit"></i>添加商品</template>
+						<template slot="title"><i class="el-icon-edit"></i>添加数据</template>
 						<el-menu-item index="addShop">添加商铺</el-menu-item>
 						<el-menu-item index="addGoods">添加商品</el-menu-item>
 					</el-submenu>
 					<el-submenu index="4">
 						<template slot="title"><i class="el-icon-star-on"></i>图表</template>
-						<el-menu-item index="visitor">访问量</el-menu-item>
-						<el-menu-item index="newMember">新增用户</el-menu-item>
+						<el-menu-item index="visitor">访问数据</el-menu-item>
+						<el-menu-item index="newMember">用户数据</el-menu-item>
 					</el-submenu>
 					<el-submenu index="5">
-						<template slot="title"><i class="el-icon-upload"></i>上传文件</template>
+						<template slot="title"><i class="el-icon-upload"></i>上传</template>
 						<el-menu-item index="uploadImg">上传图片</el-menu-item>
-						<el-menu-item index="uploadFile">上传APK</el-menu-item>
+						<el-menu-item index="uploadFile">上传文件</el-menu-item>
 					</el-submenu>
 					<el-submenu index="6">
 						<template slot="title"><i class="el-icon-setting"></i>设置</template>

src/page/shopList.vue

 <template>
     <div class="fillcontain">
-        shopList
+        <head-top></head-top>
     </div>
 </template>
 
 <script>
+    import headTop from '../components/headTop'
     export default {
-    	
+    	components: {
+    		headTop,
+    	}
     }
 </script>
 

src/page/userList.vue

 <template>
     <div class="fillcontain">
-        userList
+        <head-top></head-top>
     </div>
 </template>
 
 <script>
+    import headTop from '../components/headTop'
     export default {
-    	
+    	components: {
+    		headTop,
+    	}
     }
 </script>
 

src/router/index.js

@@ -30,48 +30,63 @@ export default new Router({
 		{
 			path: '/manage',
 			component: manage,
+			name: '',
 			children: [{
 				path: '',
 				component: home,
+				meta: [],
 			},{
 				path: '/addShop',
 				component: addShop,
+				meta: ['添加数据', '添加商铺'],
 			},{
 				path: '/addGoods',
 				component: addGoods,
+				meta: ['添加数据', '添加商品'],
 			},{
 				path: '/userList',
 				component: userList,
+				meta: ['数据管理', '用户列表'],
 			},{
 				path: '/shopList',
 				component: shopList,
+				meta: ['数据管理', '商家列表'],
 			},{
 				path: '/area',
 				component: area,
+				meta: ['数据管理', '地区管理'],
 			},{
 				path: '/adminList',
 				component: adminList,
+				meta: ['数据管理', '管理员列表'],
 			},{
 				path: '/visitor',
 				component: visitor,
+				meta: ['图表', '访问数据'],
 			},{
 				path: '/newMember',
 				component: newMember,
+				meta: ['图表', '用户数据'],
 			},{
 				path: '/uploadImg',
 				component: uploadImg,
+				meta: ['上传', '上传图片'],
 			},{
 				path: '/uploadFile',
 				component: uploadFile,
+				meta: ['上传', '上传文件'],
 			},{
 				path: '/adminSet',
 				component: adminSet,
+				meta: ['设置', '管理员设置'],
 			},{
 				path: '/sendMessage',
 				component: sendMessage,
+				meta: ['设置', '发送通知'],
 			},{
 				path: '/explain',
 				component: explain,
+				meta: ['说明', '说明'],
 			}]
 		}
 	]