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

'dashboard增加图表'

pull/124/head
lin-xin 2018-09-10 20:26:51 +08:00
parent cd96319f97
commit 865f7d53d0
2 changed files with 114 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,34 +2,30 @@
<div> <div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-row> <el-card shadow="hover" class="mgb20">
<el-col> <div class="user-info">
<el-card shadow="hover" class="mgb20"> <img src="static/img/img.jpg" class="user-avator" alt="">
<div class="user-info"> <div class="user-info-cont">
<img src="static/img/img.jpg" class="user-avator" alt=""> <div class="user-info-name">{{name}}</div>
<div class="user-info-cont"> <div>{{role}}</div>
<div class="user-info-name">{{name}}</div> </div>
<div>{{role}}</div> </div>
</div> <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
</div> <div class="user-info-list">上次登录地点：<span>东莞</span></div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div> </el-card>
<div class="user-info-list">上次登录地点：<span>东莞</span></div> <el-card shadow="hover">
</el-card> <div slot="header" class="clearfix">
<el-card shadow="hover"> <span>语言详情</span>
<div slot="header" class="clearfix"> </div>
<span>语言详情</span> Vue
</div> <el-progress :percentage="57.2" color="#42b983"></el-progress>
Vue JavaScript
<el-progress :percentage="57.2" color="#42b983"></el-progress> <el-progress :percentage="29.8" color="#f1e05a"></el-progress>
JavaScript CSS
<el-progress :percentage="29.8" color="#f1e05a"></el-progress> <el-progress :percentage="11.9"></el-progress>
CSS HTML
<el-progress :percentage="11.9"></el-progress> <el-progress :percentage="1.1" color="#f56c6c"></el-progress>
HTML </el-card>
<el-progress :percentage="1.1" color="#f56c6c"></el-progress>
</el-card>
</el-col>
</el-row>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-row :gutter="20" class="mgb20"> <el-row :gutter="20" class="mgb20">
@ -91,20 +87,32 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card> </el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<schart ref="bar" class="schart" canvasId="bar" :data="data1" type="bar" :options="options"></schart>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<schart ref="line" class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart';
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', title: '今天要修复100个bug',
status: false, status: false,
}, },
@ -127,13 +135,80 @@
title: '今天要写100行代码加几个bug吧', title: '今天要写100行代码加几个bug吧',
status: true, status: true,
} }
] ],
data1: [{
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: '最近七天用户访问趋势',
fillColor: '#FC6FA1',
axisColor: '#008ACD',
contentColor: '#EEEEEE',
bgColor: '#F5F8FD',
bottomPadding: 30,
topPadding: 30
},
collapse: false
} }
}, },
components: {
Schart
},
computed: { computed: {
role() { role() {
return this.name === 'admin' ? '超级管理员' : '普通用户'; return this.name === 'admin' ? '超级管理员' : '普通用户';
} }
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
});
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', ()=>{
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
})
},
watch: {
collapse(){
setTimeout(() => {
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
}, 300);
}
} }
} }
@ -154,7 +229,7 @@
.grid-cont-right { .grid-cont-right {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 12px; font-size: 14px;
color: #999; color: #999;
} }
@ -245,4 +320,9 @@
color: #999; color: #999;
} }
.schart {
width: 100%;
height: 300px;
}
</style> </style>

1
static/css/main.css
View File

@ -29,6 +29,7 @@ a {
right: 0; right: 0;
top: 70px; top: 70px;
bottom: 0; bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out; -webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out; transition: left .3s ease-in-out;
background: #f0f0f0; background: #f0f0f0;