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

41
README.md
View File

@ -12,13 +12,11 @@
<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="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">
</a>
基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
@ -42,7 +40,7 @@
请作者喝杯咖啡吧！(微信号：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
<template>
<div>
<schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data: function() {
data() {
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: {
// 图表可选参数
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]
}
]
}
};
},

178
README_EN.md
View File

@ -1,107 +1,139 @@
# vue-manage-system #
The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
# vue-manage-system
<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
![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.
## 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
## 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
## Installation steps ##
## Installation steps
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
cd vue-manage-system // Enter template directory
npm install // Installation dependency
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
cd vue-manage-system // Enter template directory
npm install // Installation dependency
## Local development ##
## Local development
// Open server and access http://localhost:8080 in browser
npm run serve
// Open server and access http://localhost:8080 in browser
npm run serve
## Constructing production ##
## Constructing production
// Constructing project
npm run build
// Constructing project
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)
```JavaScript
```html
<template>
<div>
<schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart';
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data: function(){
data() {
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: {
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: {
Schart
}
}
};
</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)
### Vue-Quill-Editor ###
### 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)
### vue-cropperjs ###
### 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.
@ -110,14 +142,14 @@ The first step to remove the component of the routing. Enter 'src/router/index.j
```JavaScript
{
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.
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
```js
{
index: 'editor',
@ -126,17 +158,16 @@ The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue'
```
Finally, uninstall this component.
npm un vue-quill-editor -S
npm un vue-quill-editor -S
Complete!
### 二、How to switch themes? ###
### 二、How to switch themes?
The first step to enter 'src/main.js' and change into green theme.
```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
```
@ -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'。
## Screenshot ##
### Default theme ###
## Screenshot
### Default theme
![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)
## 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",
"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": {

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';
export const fetchData = (query) => {
export const fetchData = query => {
return request({
url: '/ms/table/list',
method: 'post',
data: query
})
}
url: './table.json',
method: 'get',
params: query
});
};

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

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

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

@ -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;
});

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

@ -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,
},
{
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
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
},
options2: {
title: '最近七天用户访问趋势',
fillColor: '#FC6FA1',
axisColor: '#008ACD',
contentColor: '#EEEEEE',
bgColor: '#F5F8FD',
bottomPadding: 30,
topPadding: 30
{
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
}
}
},
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()}`
})
],
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: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
},
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();
options2: {
type: 'line',
title: {
text: '最近几个月各品类销售趋势图'
},
labels: ['6月', '7月', '8月', '9月', '10月'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
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>
<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-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-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-2 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-avator {
width: 120px;
height: 120px;
border-radius: 50%;
}
.user-avator {
width: 120px;
height: 120px;
border-radius: 50%;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-list span {
margin-left: 70px;
}
.user-info-list span {
margin-left: 70px;
}
.mgb20 {
margin-bottom: 20px;
}
.mgb20 {
margin-bottom: 20px;
}
.todo-item {
font-size: 14px;
}
.todo-item {
font-size: 14px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
.schart {
width: 100%;
height: 300px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
.schart {
width: 100%;
height: 300px;
}
</style>

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

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

3
src/router/index.js
View File

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

45
src/utils/request.js
View File

@ -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.response.use(response => {
if(response.status === 200){
return response.data;
}else{
Promise.reject();
service.interceptors.request.use(
config => {
return config;
},
error => {
console.log(error);
return 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;