Skip to content

Vue Manage System
Vue Manage System

绝世唐门三哥 / Vue Manage System

通知 3
Star 0
Fork 0
Vue Manage System
Vue Manage System

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

提交 c5c018ac 编写于 作者: L linxin
浏览文件
操作

fix:修复bug和更新图表组件

上级 3cfc7032
隐藏空白更改
内联 并排
Showing with 432 addition and 312 deletion
LICENSE
浏览文件 @ c5c018ac
MIT License
Copyright (c) 2016 vue-manage-system
Copyright (c) 2016-2019 vue-manage-system
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
README.md
浏览文件 @ c5c018ac
......@@ -16,9 +16,8 @@
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
......
package.json
浏览文件 @ c5c018ac
{
"name": "vue-manage-system",
"version": "4.1.0",
"version": "4.2.0",
"private": true,
"scripts": {
"dev": "npm run serve",
......@@ -17,7 +17,7 @@
"vue-i18n": "^8.10.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.3",
"vue-schart": "^1.0.0",
"vue-schart": "^2.0.0",
"vuedraggable": "^2.17.0"
},
"devDependencies": {
......
public/table.json 0 → 100644
浏览文件 @ c5c018ac
{
"list": [{
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"date": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"date": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
},
{
"id": 3,
"name": "王五",
"money": 789,
"address": "湖南省长沙市",
"state": "失败",
"date": "2019-11-11",
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
},
{
"id": 4,
"name": "赵六",
"money": 1011,
"address": "福建省厦门市鼓浪屿",
"state": "成功",
"date": "2019-10-20",
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
}
],
"pageTotal": 4
}
\ No newline at end of file
src/api/index.js
浏览文件 @ c5c018ac
import request from '../utils/request';
export const fetchData = (query) => {
export const fetchData = query => {
return request({
url: '/ms/table/list',
method: 'post',
data: query
})
}
\ No newline at end of file
url: './table.json',
method: 'get',
params: query
});
};
src/components/page/BaseCharts.vue
浏览文件 @ c5c018ac
......@@ -2,108 +2,148 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-pie-chart"></i> schart图表</el-breadcrumb-item>
<el-breadcrumb-item>
<i class="el-icon-pie-chart"></i> schart图表
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="plugins-tips">
vue-schart：vue.js封装sChart.js的图表组件。
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
访问地址：
<a
href="https://github.com/lin-xin/vue-schart"
target="_blank"
>vue-schart</a>
</div>
<div class="schart-box">
<div class="content-title">柱状图</div>
<schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
<schart class="schart" canvasId="bar" :options="options1"></schart>
</div>
<div class="schart-box">
<div class="content-title">折线图</div>
<schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
<div class="content-title">折线图</div>
<schart class="schart" canvasId="line" :options="options2"></schart>
</div>
<div class="schart-box">
<div class="content-title">饼状图</div>
<schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
<div class="content-title">饼状图</div>
<schart class="schart" canvasId="pie" :options="options3"></schart>
</div>
<div class="schart-box">
<div class="content-title">环形图</div>
<schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
<div class="content-title">环形图</div>
<schart class="schart" canvasId="ring" :options="options4"></schart>
</div>
</div>
</div>
</template>
<script>
import Schart from 'vue-schart';
export default {
name: 'basecharts',
components: {
Schart
},
data: () => ({
data1:[
{name:'2012',value:1141},
{name:'2013',value:1499},
{name:'2014',value:2260},
{name:'2015',value:1170},
{name:'2016',value:970},
{name:'2017',value:1450}
],
data2 : [
{name:'短袖',value:1200},
{name:'休闲裤',value:1222},
{name:'连衣裙',value:1283},
{name:'外套',value:1314},
{name:'羽绒服',value:2314}
],
import Schart from 'vue-schart';
export default {
name: 'basecharts',
components: {
Schart
},
data() {
return {
options1: {
title: '某商店近年营业总额',
autoWidth: true, // 设置宽高自适应
showValue: false,
bgColor: '#F9EFCC',
fillColor: '#00887C',
contentColor: 'rgba(46,199,201,0.3)',
yEqual: 7
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
bgColor: '#fbfbfb',
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
fillColor: 'rgba(241, 49, 74, 0.5)',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
},
options2: {
title: '某商店近年营业总额',
bgColor: '#D5E4EB',
titleColor: '#00887C',
fillColor: 'red',
contentColor: 'rgba(46,199,201,0.3)'
type: 'line',
title: {
text: '最近几个月各品类销售趋势图'
},
bgColor: '#fbfbfb',
labels: ['6月', '7月', '8月', '9月', '10月'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 150, 135, 160]
},
{
label: '食品',
data: [114, 138, 200, 235, 190]
}
]
},
options3: {
title: '某商店各商品年度销量',
bgColor: '#829dca',
titleColor: '#ffffff',
legendColor: '#ffffff',
radius: 120
type: 'pie',
title: {
text: '服装品类销售饼状图'
},
legend: {
position: 'left'
},
bgColor: '#fbfbfb',
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
datasets: [
{
data: [334, 278, 190, 235, 260, 200, 141]
}
]
},
options4: {
title: '某商店各商品年度销量',
bgColor: '#829daa',
titleColor: '#ffffff',
legendColor: '#ffffff',
radius: 120,
innerRadius:80
type: 'ring',
title: {
text: '环形三等分'
},
showValue: false,
legend: {
position: 'bottom',
bottom: 40
},
bgColor: '#fbfbfb',
labels: ['vue', 'react', 'angular'],
datasets: [
{
data: [500, 500, 500]
}
]
}
})
};
}
};
</script>
<style scoped>
.schart-box{
.schart-box {
display: inline-block;
margin: 20px;
}
.schart{
width: 500px;
height: 400px;
}
.content-title{
clear: both;
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.schart {
width: 600px;
height: 400px;
}
.content-title {
clear: both;
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style>
\ No newline at end of file
src/components/page/BaseTable.vue
浏览文件 @ c5c018ac
......@@ -130,6 +130,7 @@ export default {
// 获取 easy-mock 的模拟数据
getData() {
fetchData(this.query).then(res => {
console.log(res);
this.tableData = res.list;
this.pageTotal = res.pageTotal || 50;
});
......
src/components/page/Dashboard.vue
浏览文件 @ c5c018ac
......@@ -4,27 +4,29 @@
<el-col :span="8">
<el-card shadow="hover" class="mgb20" style="height:252px;">
<div class="user-info">
<img src="../../assets/img/img.jpg" class="user-avator" alt="">
<img src="../../assets/img/img.jpg" class="user-avator" alt />
<div class="user-info-cont">
<div class="user-info-name">{{name}}</div>
<div>{{role}}</div>
</div>
</div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
<div class="user-info-list">上次登录地点：<span>东莞</span></div>
<div class="user-info-list">
上次登录时间：
<span>2019-11-01</span>
</div>
<div class="user-info-list">
上次登录地点：
<span>东莞</span>
</div>
</el-card>
<el-card shadow="hover" style="height:252px;">
<div slot="header" class="clearfix">
<span>语言详情</span>
</div>
Vue
<el-progress :percentage="71.3" color="#42b983"></el-progress>
JavaScript
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>
CSS
<el-progress :percentage="3.7"></el-progress>
HTML
<el-progress :percentage="0.9" color="#f56c6c"></el-progress>
</div>Vue
<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
<el-progress :percentage="13.7"></el-progress>HTML
<el-progress :percentage="5.9" color="#f56c6c"></el-progress>
</el-card>
</el-col>
<el-col :span="16">
......@@ -68,7 +70,7 @@
<span>待办事项</span>
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
</div>
<el-table :data="todoList" :show-header="false" height="304" style="width: 100%;font-size:14px;">
<el-table :show-header="false" :data="todoList" style="width:100%;">
<el-table-column width="40">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.status"></el-checkbox>
......@@ -76,11 +78,14 @@
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
<div
class="todo-item"
:class="{'todo-item-del': scope.row.status}"
>{{scope.row.title}}</div>
</template>
</el-table-column>
<el-table-column width="60">
<template slot-scope="scope">
<template>
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</template>
......@@ -92,12 +97,12 @@
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<schart ref="bar" class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2"></schart>
<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
</el-card>
</el-col>
</el-row>
......@@ -105,239 +110,267 @@
</template>
<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
name: 'dashboard',
data() {
return {
name: localStorage.getItem('ms_username'),
todoList: [{
title: '今天要修复100个bug',
status: false,
},
{
title: '今天要修复100个bug',
status: false,
},
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
name: 'dashboard',
data() {
return {
name: localStorage.getItem('ms_username'),
todoList: [
{
title: '今天要修复100个bug',
status: false
},
{
title: '今天要修复100个bug',
status: false
},
{
title: '今天要写100行代码加几个bug吧',
status: false
},
{
title: '今天要修复100个bug',
status: false
},
{
title: '今天要修复100个bug',
status: true
},
{
title: '今天要写100行代码加几个bug吧',
status: true
}
],
data: [
{
name: '2018/09/04',
value: 1083
},
{
name: '2018/09/05',
value: 941
},
{
name: '2018/09/06',
value: 1139
},
{
name: '2018/09/07',
value: 816
},
{
name: '2018/09/08',
value: 327
},
{
name: '2018/09/09',
value: 228
},
{
name: '2018/09/10',
value: 1065
}
],
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
xRorate: 25,
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
title: '今天要写100行代码加几个bug吧',
status: false,
}, {
title: '今天要修复100个bug',
status: false,
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
title: '今天要修复100个bug',
status: true,
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
title: '今天要写100行代码加几个bug吧',
status: true,
label: '食品',
data: [144, 198, 150, 235, 120]
}
],
data: [{
name: '2018/09/04',
value: 1083
},
{
name: '2018/09/05',
value: 941
},
{
name: '2018/09/06',
value: 1139
},
{
name: '2018/09/07',
value: 816
},
]
},
options2: {
type: 'line',
title: {
text: '最近几个月各品类销售趋势图'
},
labels: ['6月', '7月', '8月', '9月', '10月'],
datasets: [
{
name: '2018/09/08',
value: 327
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
name: '2018/09/09',
value: 228
label: '百货',
data: [164, 178, 150, 135, 160]
},
{
name: '2018/09/10',
value: 1065
label: '食品',
data: [74, 118, 200, 235, 90]
}
],
options: {
title: '最近七天每天的用户访问量',
showValue: false,
fillColor: 'rgb(45, 140, 240)',
bottomPadding: 30,
topPadding: 30
},
options2: {
title: '最近七天用户访问趋势',
fillColor: '#FC6FA1',
axisColor: '#008ACD',
contentColor: '#EEEEEE',
bgColor: '#F5F8FD',
bottomPadding: 30,
topPadding: 30
}
}
},
components: {
Schart
},
computed: {
role() {
return this.name === 'admin' ? '超级管理员' : '普通用户';
}
},
created(){
this.handleListener();
this.changeDate();
},
activated(){
this.handleListener();
},
deactivated(){
window.removeEventListener('resize', this.renderChart);
bus.$off('collapse', this.handleBus);
},
methods: {
changeDate(){
const now = new Date().getTime();
this.data.forEach((item, index) => {
const date = new Date(now - (6 - index) * 86400000);
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
})
},
handleListener(){
bus.$on('collapse', this.handleBus);
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', this.renderChart)
},
handleBus(msg){
setTimeout(() => {
this.renderChart()
}, 300);
},
renderChart(){
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
]
}
};
},
components: {
Schart
},
computed: {
role() {
return this.name === 'admin' ? '超级管理员' : '普通用户';
}
},
// created() {
// this.handleListener();
// this.changeDate();
// },
// activated() {
// this.handleListener();
// },
// deactivated() {
// window.removeEventListener('resize', this.renderChart);
// bus.$off('collapse', this.handleBus);
// },
methods: {
changeDate() {
const now = new Date().getTime();
this.data.forEach((item, index) => {
const date = new Date(now - (6 - index) * 86400000);
item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
});
}
// handleListener() {
// bus.$on('collapse', this.handleBus);
// // 调用renderChart方法对图表进行重新渲染
// window.addEventListener('resize', this.renderChart);
// },
// handleBus(msg) {
// setTimeout(() => {
// this.renderChart();
// }, 200);
// },
// renderChart() {
// this.$refs.bar.renderChart();
// this.$refs.line.renderChart();
// }
}
};
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.el-row {
margin-bottom: 20px;
}
.grid-content {
display: flex;
align-items: center;
height: 100px;
}
.grid-content {
display: flex;
align-items: center;
height: 100px;
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 14px;
color: #999;
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 14px;
color: #999;
}
.grid-num {
font-size: 30px;
font-weight: bold;
}
.grid-num {
font-size: 30px;
font-weight: bold;
}
.grid-con-icon {
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
}
.grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-icon {
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-2 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.user-avator {
width: 120px;
height: 120px;
border-radius: 50%;
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-avator {
width: 120px;
height: 120px;
border-radius: 50%;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-list span {
margin-left: 70px;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.mgb20 {
margin-bottom: 20px;
}
.user-info-list span {
margin-left: 70px;
}
.todo-item {
font-size: 14px;
}
.mgb20 {
margin-bottom: 20px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
.todo-item {
font-size: 14px;
}
.schart {
width: 100%;
height: 300px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
.schart {
width: 100%;
height: 300px;
}
</style>
src/components/page/Donate.vue
浏览文件 @ c5c018ac
......@@ -10,7 +10,7 @@
<div class="container">
<div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div>
<div>
<img src="https://lin-xin.github.io/images/weixin.jpg" />
<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
</div>
</div>
</div>
......
src/utils/request.js
浏览文件 @ c5c018ac
......@@ -2,26 +2,33 @@ import axios from 'axios';
const service = axios.create({
// process.env.NODE_ENV === 'development' 来判断是否开发环境
baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
// easy-mock服务挂了，暂时不使用了
// baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
timeout: 5000
})
});
service.interceptors.request.use( config => {
return config;
}, error => {
console.log(error);
return Promise.reject();
})
service.interceptors.request.use(
config => {
return config;
},
error => {
console.log(error);
return Promise.reject();
}
);
service.interceptors.response.use(response => {
if(response.status === 200){
return response.data;
}else{
Promise.reject();
service.interceptors.response.use(
response => {
if (response.status === 200) {
return response.data;
} else {
Promise.reject();
}
},
error => {
console.log(error);
return Promise.reject();
}
}, error => {
console.log(error);
return Promise.reject();
})
);
export default service;
\ No newline at end of file
export default service;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或