fix:修复bug和更新图表组件
linxin
parent
3cfc7032bc
commit
c5c018ac0f
2
LICENSE
2
LICENSE
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
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
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue