林鑫
GitHub
commit
03f67de289
2
LICENSE
2
LICENSE
|
|
@ -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
41
README.md
|
|
@ -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)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 前言
|
## 前言
|
||||||
|
|
||||||
|
|
@ -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]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
120
README_EN.md
120
README_EN.md
|
|
@ -1,13 +1,33 @@
|
||||||
# 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
|
||||||
|
|
||||||
|
|
||||||
## Preface ##
|
|
||||||
|
|
||||||
|
## 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] Element-UI
|
||||||
- [x] Login/Logout
|
- [x] Login/Logout
|
||||||
- [x] Dashboard
|
- [x] Dashboard
|
||||||
|
|
@ -25,83 +45,95 @@ The scheme as a set of multi-function background frame templates, suitable for m
|
||||||
- [x] Three level menu
|
- [x] Three level menu
|
||||||
- [x] Custom icon
|
- [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.
|
||||||
|
|
||||||
|
|
@ -126,12 +158,11 @@ 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.
|
||||||
|
|
||||||
|
|
@ -150,12 +181,13 @@ 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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Green theme ###
|
### Green theme
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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": {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,29 +2,35 @@
|
||||||
<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>
|
||||||
|
|
@ -37,55 +43,90 @@
|
||||||
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>
|
||||||
|
|
@ -94,7 +135,7 @@
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
.schart {
|
.schart {
|
||||||
width: 500px;
|
width: 600px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
.content-title {
|
.content-title {
|
||||||
|
|
@ -105,5 +146,4 @@
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: #1f2f3d;
|
color: #1f2f3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -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;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -112,31 +117,34 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: localStorage.getItem('ms_username'),
|
name: localStorage.getItem('ms_username'),
|
||||||
todoList: [{
|
todoList: [
|
||||||
|
{
|
||||||
title: '今天要修复100个bug',
|
title: '今天要修复100个bug',
|
||||||
status: false,
|
status: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今天要修复100个bug',
|
title: '今天要修复100个bug',
|
||||||
status: false,
|
status: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今天要写100行代码加几个bug吧',
|
title: '今天要写100行代码加几个bug吧',
|
||||||
status: false,
|
status: false
|
||||||
}, {
|
|
||||||
title: '今天要修复100个bug',
|
|
||||||
status: false,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今天要修复100个bug',
|
title: '今天要修复100个bug',
|
||||||
status: true,
|
status: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今天要修复100个bug',
|
||||||
|
status: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '今天要写100行代码加几个bug吧',
|
title: '今天要写100行代码加几个bug吧',
|
||||||
status: true,
|
status: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
data: [{
|
data: [
|
||||||
|
{
|
||||||
name: '2018/09/04',
|
name: '2018/09/04',
|
||||||
value: 1083
|
value: 1083
|
||||||
},
|
},
|
||||||
|
|
@ -166,22 +174,49 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options: {
|
options: {
|
||||||
title: '最近七天每天的用户访问量',
|
type: 'bar',
|
||||||
showValue: false,
|
title: {
|
||||||
fillColor: 'rgb(45, 140, 240)',
|
text: '最近一周各品类销售图'
|
||||||
bottomPadding: 30,
|
},
|
||||||
topPadding: 30
|
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]
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
options2: {
|
options2: {
|
||||||
title: '最近七天用户访问趋势',
|
type: 'line',
|
||||||
fillColor: '#FC6FA1',
|
title: {
|
||||||
axisColor: '#008ACD',
|
text: '最近几个月各品类销售趋势图'
|
||||||
contentColor: '#EEEEEE',
|
},
|
||||||
bgColor: '#F5F8FD',
|
labels: ['6月', '7月', '8月', '9月', '10月'],
|
||||||
bottomPadding: 30,
|
datasets: [
|
||||||
topPadding: 30
|
{
|
||||||
|
label: '家电',
|
||||||
|
data: [234, 278, 270, 190, 230]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '百货',
|
||||||
|
data: [164, 178, 150, 135, 160]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '食品',
|
||||||
|
data: [74, 118, 200, 235, 90]
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Schart
|
Schart
|
||||||
|
|
@ -191,42 +226,41 @@
|
||||||
return this.name === 'admin' ? '超级管理员' : '普通用户';
|
return this.name === 'admin' ? '超级管理员' : '普通用户';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
// created() {
|
||||||
this.handleListener();
|
// this.handleListener();
|
||||||
this.changeDate();
|
// this.changeDate();
|
||||||
},
|
// },
|
||||||
activated(){
|
// activated() {
|
||||||
this.handleListener();
|
// this.handleListener();
|
||||||
},
|
// },
|
||||||
deactivated(){
|
// deactivated() {
|
||||||
window.removeEventListener('resize', this.renderChart);
|
// window.removeEventListener('resize', this.renderChart);
|
||||||
bus.$off('collapse', this.handleBus);
|
// bus.$off('collapse', this.handleBus);
|
||||||
},
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
changeDate() {
|
changeDate() {
|
||||||
const now = new Date().getTime();
|
const now = new Date().getTime();
|
||||||
this.data.forEach((item, index) => {
|
this.data.forEach((item, index) => {
|
||||||
const date = new Date(now - (6 - index) * 86400000);
|
const date = new Date(now - (6 - index) * 86400000);
|
||||||
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
|
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();
|
|
||||||
}
|
}
|
||||||
|
// 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>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -339,5 +373,4 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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: '*',
|
||||||
|
|
|
||||||
|
|
@ -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(
|
||||||
|
config => {
|
||||||
return config;
|
return config;
|
||||||
}, error => {
|
},
|
||||||
|
error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
return Promise.reject();
|
return Promise.reject();
|
||||||
})
|
}
|
||||||
|
);
|
||||||
|
|
||||||
service.interceptors.response.use(response => {
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
return response.data;
|
return response.data;
|
||||||
} else {
|
} else {
|
||||||
Promise.reject();
|
Promise.reject();
|
||||||
}
|
}
|
||||||
}, error => {
|
},
|
||||||
|
error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
return Promise.reject();
|
return Promise.reject();
|
||||||
})
|
}
|
||||||
|
);
|
||||||
|
|
||||||
export default service;
|
export default service;
|
||||||
Loading…
Reference in New Issue