github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #218 from lin-xin/dev 

更新图表组件
pull/244/head
林鑫 2019-11-01 17:01:45 +08:00 committed by GitHub
parent 838a03086e 5173cac28f
commit 03f67de289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 578 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

41
README.md
View File

@ -12,13 +12,11 @@
<a href="https://github.com/lin-xin/vue-manage-system/releases"> <a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release"> <img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a> </a>
<a href="http://blog.gdfengshuo.com/example/work/#/donate"> <a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a> </a>
基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/) 基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.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) > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
@ -42,7 +40,7 @@
请作者喝杯咖啡吧！(微信号：linxin_20) 请作者喝杯咖啡吧！(微信号：linxin_20)
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg) ![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
## 前言 ## 前言
@ -94,26 +92,35 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
```html ```html
<template> <template>
<div> <div>
<schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart> <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart'; // 导入Schart组件 import Schart from 'vue-schart'; // 导入Schart组件
export default { export default {
data: function() { data() {
return { return {
canvasId: 'myCanvas', // canvas的id
type: 'bar', // 图表类型
data: [
{ name: '2014', value: 1342 },
{ name: '2015', value: 2123 },
{ name: '2016', value: 1654 },
{ name: '2017', value: 1795 }
],
options: { options: {
// 图表可选参数 type: 'bar',
title: 'Total sales of stores in recent years' title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
} }
}; };
}, },

178
README_EN.md
View File

@ -1,107 +1,139 @@
# vue-manage-system # # vue-manage-system
The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
## Donation ## Donation
![WeChat](http://blog.gdfengshuo.com/images/weixin.jpg)
## Preface ## ![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
## Preface
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color. The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
## Function ## ## Function
- [x] Element-UI
- [x] Login/Logout
- [x] Dashboard
- [x] Table
- [x] Tabs
- [x] From
- [x] Chart :bar_chart:
- [x] Editor
- [x] Markdown
- [x] Upload pictures by clipping or dragging
- [x] Support manual switch themes :sparkles:
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
- [x] Element-UI
- [x] Login/Logout
- [x] Dashboard
- [x] Table
- [x] Tabs
- [x] From
- [x] Chart :bar_chart:
- [x] Editor
- [x] Markdown
- [x] Upload pictures by clipping or dragging
- [x] Support manual switch themes :sparkles:
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
## Installation steps ## ## Installation steps
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
cd vue-manage-system // Enter template directory cd vue-manage-system // Enter template directory
npm install // Installation dependency npm install // Installation dependency
## Local development ## ## Local development
// Open server and access http://localhost:8080 in browser // Open server and access http://localhost:8080 in browser
npm run serve npm run serve
## Constructing production ## ## Constructing production
// Constructing project // Constructing project
npm run build npm run build
## Component description and presentation ## ## Component description and presentation
### vue-schart
### vue-schart ###
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart) Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
```JavaScript ```html
<template> <template>
<div> <div>
<schart :canvasId="canvasId" <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart'; import Schart from 'vue-schart'; // 导入Schart组件
export default { export default {
data: function(){ data() {
return { return {
canvasId: 'myCanvas',
type: 'bar',
width: 500,
height: 400,
data: [
{name: '2014', value: 1342},
{name: '2015', value: 2123},
{name: '2016', value: 1654},
{name: '2017', value: 1795},
],
options: { options: {
title: 'Total sales of stores in recent years' type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
} }
} };
}, },
components: { components: {
Schart Schart
} }
} };
</script> </script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
``` ```
### element-ui ### ### element-ui
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout) A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
### Vue-Quill-Editor ### ### Vue-Quill-Editor
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
### mavonEditor ### ### mavonEditor
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor) A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
### vue-cropperjs ### ### vue-cropperjs
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs) A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
## Notice
## Notice ## ### 一、If I don't want to use some components, how can I delete it?
### 一、If I don't want to use some components, how can I delete it? ###
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps. For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
@ -110,14 +142,14 @@ The first step to remove the component of the routing. Enter 'src/router/index.j
```JavaScript ```JavaScript
{ {
path: '/editor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve) component: resolve => require(['../components/page/VueEditor.vue'], resolve)
}, },
``` ```
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file. Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below. The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
```js ```js
{ {
index: 'editor', index: 'editor',
@ -126,17 +158,16 @@ The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue'
``` ```
Finally, uninstall this component. Finally, uninstall this component.
npm un vue-quill-editor -S
npm un vue-quill-editor -S
Complete! Complete!
### 二、How to switch themes? ### ### 二、How to switch themes?
The first step to enter 'src/main.js' and change into green theme. The first step to enter 'src/main.js' and change into green theme.
```javascript ```javascript
import 'element-ui/lib/theme-default/index.css'; // default theme import 'element-ui/lib/theme-default/index.css'; // default theme
// import '../static/css/theme-green/index.css'; // green theme // import '../static/css/theme-green/index.css'; // green theme
``` ```
@ -150,15 +181,16 @@ The second step to enter 'src/App.vue' and change into green theme.
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。 Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
## Screenshot ## ## Screenshot
### Default theme ###
### Default theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### Green theme ### ### Green theme
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## License ## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) [MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-manage-system", "name": "vue-manage-system",
"version": "4.1.0", "version": "4.2.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "npm run serve", "dev": "npm run serve",
@ -17,7 +17,7 @@
"vue-i18n": "^8.10.0", "vue-i18n": "^8.10.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vue-schart": "^1.0.0", "vue-schart": "^2.0.0",
"vuedraggable": "^2.17.0" "vuedraggable": "^2.17.0"
}, },
"devDependencies": { "devDependencies": {

40
public/table.json Normal file
View File

@ -0,0 +1,40 @@
{
"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
}

12
src/api/index.js
View File

@ -1,9 +1,9 @@
import request from '../utils/request'; import request from '../utils/request';
export const fetchData = (query) => { export const fetchData = query => {
return request({ return request({
url: '/ms/table/list', url: './table.json',
method: 'post', method: 'get',
data: query params: query
}) });
} };

178
src/components/page/BaseCharts.vue
View File

@ -2,108 +2,148 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <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> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<div class="plugins-tips"> <div class="plugins-tips">
vue-schart：vue.js封装sChart.js的图表组件。 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>
<div class="schart-box"> <div class="schart-box">
<div class="content-title">柱状图</div> <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>
<div class="schart-box"> <div class="schart-box">
<div class="content-title">折线图</div> <div class="content-title">折线图</div>
<schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart> <schart class="schart" canvasId="line" :options="options2"></schart>
</div> </div>
<div class="schart-box"> <div class="schart-box">
<div class="content-title">饼状图</div> <div class="content-title">饼状图</div>
<schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart> <schart class="schart" canvasId="pie" :options="options3"></schart>
</div> </div>
<div class="schart-box"> <div class="schart-box">
<div class="content-title">环形图</div> <div class="content-title">环形图</div>
<schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart> <schart class="schart" canvasId="ring" :options="options4"></schart>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart'; import Schart from 'vue-schart';
export default { export default {
name: 'basecharts', name: 'basecharts',
components: { components: {
Schart Schart
}, },
data: () => ({ data() {
data1:[ return {
{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}
],
options1: { options1: {
title: '某商店近年营业总额', type: 'bar',
autoWidth: true, // 设置宽高自适应 title: {
showValue: false, text: '最近一周各品类销售图'
bgColor: '#F9EFCC', },
fillColor: '#00887C', bgColor: '#fbfbfb',
contentColor: 'rgba(46,199,201,0.3)', labels: ['周一', '周二', '周三', '周四', '周五'],
yEqual: 7 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: { options2: {
title: '某商店近年营业总额', type: 'line',
bgColor: '#D5E4EB', title: {
titleColor: '#00887C', text: '最近几个月各品类销售趋势图'
fillColor: 'red', },
contentColor: 'rgba(46,199,201,0.3)' 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: { options3: {
title: '某商店各商品年度销量', type: 'pie',
bgColor: '#829dca', title: {
titleColor: '#ffffff', text: '服装品类销售饼状图'
legendColor: '#ffffff', },
radius: 120 legend: {
position: 'left'
},
bgColor: '#fbfbfb',
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
datasets: [
{
data: [334, 278, 190, 235, 260, 200, 141]
}
]
}, },
options4: { options4: {
title: '某商店各商品年度销量', type: 'ring',
bgColor: '#829daa', title: {
titleColor: '#ffffff', text: '环形三等分'
legendColor: '#ffffff', },
radius: 120, showValue: false,
innerRadius:80 legend: {
position: 'bottom',
bottom: 40
},
bgColor: '#fbfbfb',
labels: ['vue', 'react', 'angular'],
datasets: [
{
data: [500, 500, 500]
}
]
} }
}) };
} }
};
</script> </script>
<style scoped> <style scoped>
.schart-box{ .schart-box {
display: inline-block; display: inline-block;
margin: 20px; margin: 20px;
} }
.schart{ .schart {
width: 500px; width: 600px;
height: 400px; height: 400px;
} }
.content-title{ .content-title {
clear: both; clear: both;
font-weight: 400; font-weight: 400;
line-height: 50px; line-height: 50px;
margin: 10px 0; margin: 10px 0;
font-size: 22px; font-size: 22px;
color: #1f2f3d; color: #1f2f3d;
} }
</style> </style>

1
src/components/page/BaseTable.vue
View File

@ -130,6 +130,7 @@ export default {
// 获取 easy-mock 的模拟数据 // 获取 easy-mock 的模拟数据
getData() { getData() {
fetchData(this.query).then(res => { fetchData(this.query).then(res => {
console.log(res);
this.tableData = res.list; this.tableData = res.list;
this.pageTotal = res.pageTotal || 50; this.pageTotal = res.pageTotal || 50;
}); });

477
src/components/page/Dashboard.vue
View File

@ -4,27 +4,29 @@
<el-col :span="8"> <el-col :span="8">
<el-card shadow="hover" class="mgb20" style="height:252px;"> <el-card shadow="hover" class="mgb20" style="height:252px;">
<div class="user-info"> <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-cont">
<div class="user-info-name">{{name}}</div> <div class="user-info-name">{{name}}</div>
<div>{{role}}</div> <div>{{role}}</div>
</div> </div>
</div> </div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div> <div class="user-info-list">
<div class="user-info-list">上次登录地点：<span>东莞</span></div> 上次登录时间：
<span>2019-11-01</span>
</div>
<div class="user-info-list">
上次登录地点：
<span>东莞</span>
</div>
</el-card> </el-card>
<el-card shadow="hover" style="height:252px;"> <el-card shadow="hover" style="height:252px;">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>语言详情</span> <span>语言详情</span>
</div> </div>Vue
Vue <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
<el-progress :percentage="71.3" color="#42b983"></el-progress> <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
JavaScript <el-progress :percentage="13.7"></el-progress>HTML
<el-progress :percentage="24.1" color="#f1e05a"></el-progress> <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
CSS
<el-progress :percentage="3.7"></el-progress>
HTML
<el-progress :percentage="0.9" color="#f56c6c"></el-progress>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
@ -68,7 +70,7 @@
<span>待办事项</span> <span>待办事项</span>
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button> <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
</div> </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"> <el-table-column width="40">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox v-model="scope.row.status"></el-checkbox> <el-checkbox v-model="scope.row.status"></el-checkbox>
@ -76,11 +78,14 @@
</el-table-column> </el-table-column>
<el-table-column> <el-table-column>
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column width="60"> <el-table-column width="60">
<template slot-scope="scope"> <template>
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</template> </template>
@ -92,12 +97,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-card shadow="hover"> <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-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-card shadow="hover"> <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-card>
</el-col> </el-col>
</el-row> </el-row>
@ -105,239 +110,267 @@
</template> </template>
<script> <script>
import Schart from 'vue-schart'; import Schart from 'vue-schart';
import bus from '../common/bus'; import bus from '../common/bus';
export default { export default {
name: 'dashboard', name: 'dashboard',
data() { data() {
return { return {
name: localStorage.getItem('ms_username'), name: localStorage.getItem('ms_username'),
todoList: [{ 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: 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: {
title: '最近七天每天的用户访问量',
showValue: false,
fillColor: 'rgb(45, 140, 240)',
bottomPadding: 30,
topPadding: 30
}, },
options2: { {
title: '最近七天用户访问趋势', title: '今天要修复100个bug',
fillColor: '#FC6FA1', status: false
axisColor: '#008ACD', },
contentColor: '#EEEEEE', {
bgColor: '#F5F8FD', title: '今天要写100行代码加几个bug吧',
bottomPadding: 30, status: false
topPadding: 30 },
{
title: '今天要修复100个bug',
status: false
},
{
title: '今天要修复100个bug',
status: true
},
{
title: '今天要写100行代码加几个bug吧',
status: true
} }
} ],
}, data: [
components: { {
Schart name: '2018/09/04',
}, value: 1083
computed: { },
role() { {
return this.name === 'admin' ? '超级管理员' : '普通用户'; name: '2018/09/05',
} value: 941
}, },
created(){ {
this.handleListener(); name: '2018/09/06',
this.changeDate(); value: 1139
}, },
activated(){ {
this.handleListener(); name: '2018/09/07',
}, value: 816
deactivated(){ },
window.removeEventListener('resize', this.renderChart); {
bus.$off('collapse', this.handleBus); name: '2018/09/08',
}, value: 327
methods: { },
changeDate(){ {
const now = new Date().getTime(); name: '2018/09/09',
this.data.forEach((item, index) => { value: 228
const date = new Date(now - (6 - index) * 86400000); },
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}` {
}) name: '2018/09/10',
value: 1065
}
],
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
xRorate: 25,
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}, },
handleListener(){ options2: {
bus.$on('collapse', this.handleBus); type: 'line',
// 调用renderChart方法对图表进行重新渲染 title: {
window.addEventListener('resize', this.renderChart) text: '最近几个月各品类销售趋势图'
}, },
handleBus(msg){ labels: ['6月', '7月', '8月', '9月', '10月'],
setTimeout(() => { datasets: [
this.renderChart() {
}, 300); label: '家电',
}, data: [234, 278, 270, 190, 230]
renderChart(){ },
this.$refs.bar.renderChart(); {
this.$refs.line.renderChart(); label: '百货',
data: [164, 178, 150, 135, 160]
},
{
label: '食品',
data: [74, 118, 200, 235, 90]
}
]
} }
};
},
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> </script>
<style scoped> <style scoped>
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
} }
.grid-content { .grid-content {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100px; height: 100px;
} }
.grid-cont-right { .grid-cont-right {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
} }
.grid-num { .grid-num {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
.grid-con-icon { .grid-con-icon {
font-size: 50px; font-size: 50px;
width: 100px; width: 100px;
height: 100px; height: 100px;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;
color: #fff; color: #fff;
} }
.grid-con-1 .grid-con-icon { .grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240); background: rgb(45, 140, 240);
} }
.grid-con-1 .grid-num { .grid-con-1 .grid-num {
color: rgb(45, 140, 240); color: rgb(45, 140, 240);
} }
.grid-con-2 .grid-con-icon { .grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114); background: rgb(100, 213, 114);
} }
.grid-con-2 .grid-num { .grid-con-2 .grid-num {
color: rgb(45, 140, 240); color: rgb(45, 140, 240);
} }
.grid-con-3 .grid-con-icon { .grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67); background: rgb(242, 94, 67);
} }
.grid-con-3 .grid-num { .grid-con-3 .grid-num {
color: rgb(242, 94, 67); color: rgb(242, 94, 67);
} }
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
margin-bottom: 20px; margin-bottom: 20px;
} }
.user-avator { .user-avator {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
} }
.user-info-cont { .user-info-cont {
padding-left: 50px; padding-left: 50px;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
} }
.user-info-cont div:first-child { .user-info-cont div:first-child {
font-size: 30px; font-size: 30px;
color: #222; color: #222;
} }
.user-info-list { .user-info-list {
font-size: 14px; font-size: 14px;
color: #999; color: #999;
line-height: 25px; line-height: 25px;
} }
.user-info-list span { .user-info-list span {
margin-left: 70px; margin-left: 70px;
} }
.mgb20 { .mgb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.todo-item { .todo-item {
font-size: 14px; font-size: 14px;
} }
.todo-item-del { .todo-item-del {
text-decoration: line-through; text-decoration: line-through;
color: #999; color: #999;
} }
.schart {
width: 100%;
height: 300px;
}
.schart {
width: 100%;
height: 300px;
}
</style> </style>

16
src/components/page/Donate.vue
View File

@ -2,25 +2,23 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-redpacket_fill"></i> 支持作者</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-redpacket_fill"></i> 支持作者
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<div class="plugins-tips"> <div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div>
如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。 <div>
<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
</div> </div>
<div><img src="http://blog.gdfengshuo.com/images/weixin.jpg"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {};
}
</script> </script>
<style> <style>
</style> </style>

3
src/router/index.js
View File

@ -106,7 +106,8 @@ export default new Router({
}, },
{ {
path: '/login', path: '/login',
component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue') component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue'),
meta: { title: '登录' }
}, },
{ {
path: '*', path: '*',

45
src/utils/request.js
View File

@ -2,26 +2,33 @@ import axios from 'axios';
const service = axios.create({ const service = axios.create({
// process.env.NODE_ENV === 'development' 来判断是否开发环境 // 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 timeout: 5000
}) });
service.interceptors.request.use( config => { service.interceptors.request.use(
return config; config => {
}, error => { return config;
console.log(error); },
return Promise.reject(); error => {
}) console.log(error);
return Promise.reject();
service.interceptors.response.use(response => {
if(response.status === 200){
return response.data;
}else{
Promise.reject();
} }
}, error => { );
console.log(error);
return Promise.reject();
})
export default service; service.interceptors.response.use(
response => {
if (response.status === 200) {
return response.data;
} else {
Promise.reject();
}
},
error => {
console.log(error);
return Promise.reject();
}
);
export default service;