Skip to content

V
vue2-manage

qq_36793584 / vue2-manage
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vue2-manage

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7a7c6969 编写于 作者: M maguohua
浏览文件
操作

add chart

上级 134101b4
隐藏空白更改
内联 并排
Showing with 248 addition and 233 deletion
README.md
浏览文件 @ 7a7c6969
# 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)
......
package.json
浏览文件 @ 7a7c6969
......@@ -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"
......
src/api/getData.js
浏览文件 @ 7a7c6969
......@@ -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}
src/components/line1.vue 已删除 100644 → 0
浏览文件 @ 134101b4
<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/components/tendency.vue 0 → 100644
浏览文件 @ 7a7c6969
<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>
src/page/addGoods.vue
浏览文件 @ 7a7c6969
......@@ -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: {
......
src/page/home.vue
浏览文件 @ 7a7c6969
......@@ -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;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或