|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="big">
|
|
|
- <div class="mid">
|
|
|
+ <!-- <div class="mid">
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
<div class="chart-wrapper">
|
|
|
@@ -18,10 +18,56 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- </div>
|
|
|
- <div class="top">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="top">
|
|
|
<div id="main" class="chart-container"></div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="card">
|
|
|
+ <div class="car-left">
|
|
|
+ <div>
|
|
|
+ <span class="card-img"> <img :src="userInfo.headerImg" alt="" > </span>
|
|
|
+ <div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
|
|
|
+ <p class="tips-text">
|
|
|
+ <i class="el-icon-sunny"></i>
|
|
|
+ <span>今日晴，18℃ - 28℃，出门记得防晒哦。</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="car-right">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8"><div class="car-item">
|
|
|
+ <span class="flow"><i class="el-icon-s-grid"></i></span>
|
|
|
+ <span>今日流量 </span>
|
|
|
+ <b>13260</b>
|
|
|
+ </div></el-col>
|
|
|
+ <el-col :span="8"><div class="car-item">
|
|
|
+ <span class="user-number">
|
|
|
+ <i class="el-icon-s-custom "></i>
|
|
|
+ </span>
|
|
|
+ <span>总用户 </span>
|
|
|
+ <b>48286</b>
|
|
|
+ </div></el-col>
|
|
|
+ <el-col :span="8"><div class="car-item ">
|
|
|
+ <span class="feedback">
|
|
|
+ <i class="el-icon-star-on"></i>
|
|
|
+ </span>
|
|
|
+ <span>好评率 </span>
|
|
|
+ <b>98%</b>
|
|
|
+ </div></el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shadow">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
|
|
|
+ <div class="grid-content">
|
|
|
+ <i :class="card.icon"></i>
|
|
|
+ <p>{{card.label}}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
<div class="bottom">
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :xs="24" :sm="24" :lg="12">
|
|
|
@@ -42,127 +88,167 @@
|
|
|
|
|
|
<script>
|
|
|
import echarts from 'echarts'
|
|
|
-require('echarts/theme/macarons') // echarts theme
|
|
|
-import RaddarChart from "./component/RaddarChart"
|
|
|
-import stackMap from "./component/stackMap"
|
|
|
-import Sunburst from "./component/Sunburst"
|
|
|
+// require('echarts/theme/macarons') // echarts theme
|
|
|
+// import RaddarChart from "./component/RaddarChart"
|
|
|
+// import stackMap from "./component/stackMap"
|
|
|
+// import Sunburst from "./component/Sunburst"
|
|
|
import musicPlayer from "./component/musicPlayer"
|
|
|
import TodoList from "./component/todoList"
|
|
|
-
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
name: 'Dashboard',
|
|
|
data() {
|
|
|
return {
|
|
|
+ toolCards:[
|
|
|
+ {
|
|
|
+ label:"用户管理",
|
|
|
+ icon:"el-icon el-icon-user",
|
|
|
+ name:"user"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:"角色管理",
|
|
|
+ icon:"el-icon el-icon-setting",
|
|
|
+ name:"authority"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:"菜单管理",
|
|
|
+ icon:"el-icon el-icon-menu",
|
|
|
+ name:"menu"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:"代码生成器",
|
|
|
+ icon:"el-icon el-icon-cpu",
|
|
|
+ name:"autoCode"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:"表单生成器",
|
|
|
+ icon:"el-icon el-icon-document-checked",
|
|
|
+ name:"formCreate"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:"关于我们",
|
|
|
+ icon:"el-icon el-icon-user",
|
|
|
+ name:"about"
|
|
|
+ }
|
|
|
|
|
|
+ ]
|
|
|
}
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('user', ['userInfo'])
|
|
|
},
|
|
|
components:{
|
|
|
- RaddarChart, //雷达图
|
|
|
- stackMap, //堆叠图
|
|
|
- Sunburst, //旭日图
|
|
|
musicPlayer, //音乐播放器
|
|
|
- TodoList //TodoList
|
|
|
+ TodoList, //TodoList
|
|
|
+ // RaddarChart, //雷达图
|
|
|
+ // stackMap, //堆叠图
|
|
|
+ // Sunburst, //旭日图
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ toTarget(name){
|
|
|
+ this.$router.push({name})
|
|
|
+ }
|
|
|
},
|
|
|
- mounted() {
|
|
|
- let myChart = echarts.init(document.getElementById('main'),'macarons');
|
|
|
- // let stackMap = echarts.init(document.getElementById('stackMap'));
|
|
|
- let option = {
|
|
|
- legend: {},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- showContent: false
|
|
|
- },
|
|
|
- dataset: {
|
|
|
- source: [
|
|
|
- ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
|
|
|
- ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
|
|
|
- ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
|
|
|
- ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
|
|
|
- ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
|
|
|
- ]
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
|
|
- fontSize : 14 //更改坐标轴文字大小
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine:{
|
|
|
- lineStyle:{
|
|
|
- color:'rgb(192,192,192)' //更改坐标轴颜色
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- gridIndex:0,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
|
|
- fontSize: 14 //更改坐标轴文字大小
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgb(192,192,192)' //更改坐标轴颜色
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {top: '55%'},
|
|
|
- series: [
|
|
|
- {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
- {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
- {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
- {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- id: 'pie',
|
|
|
- radius: '30%',
|
|
|
- center: ['50%', '25%'],
|
|
|
- label: {
|
|
|
- formatter: '{b}: {@2012} ({d}%)'
|
|
|
- },
|
|
|
- encode: {
|
|
|
- itemName: 'product',
|
|
|
- value: '2012',
|
|
|
- tooltip: '2012'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- //点记标记点时的动效
|
|
|
- myChart.on('updateAxisPointer', function (event) {
|
|
|
- var xAxisInfo = event.axesInfo[0];
|
|
|
- if (xAxisInfo) {
|
|
|
- var dimension = xAxisInfo.value + 1;
|
|
|
- myChart.setOption({
|
|
|
- series: {
|
|
|
- id: 'pie',
|
|
|
- label: {
|
|
|
- formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
|
- },
|
|
|
- encode: {
|
|
|
- value: dimension,
|
|
|
- tooltip: dimension
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+// mounted() {
|
|
|
+// let myChart = echarts.init(document.getElementById('main'),'macarons');
|
|
|
+// // let stackMap = echarts.init(document.getElementById('stackMap'));
|
|
|
+// let option = {
|
|
|
+// legend: {},
|
|
|
+// tooltip: {
|
|
|
+// trigger: 'axis',
|
|
|
+// showContent: false
|
|
|
+// },
|
|
|
+// dataset: {
|
|
|
+// source: [
|
|
|
+// ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
|
|
|
+// ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
|
|
|
+// ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
|
|
|
+// ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
|
|
|
+// ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
|
|
|
+// ]
|
|
|
+// },
|
|
|
+// xAxis: {
|
|
|
+// type: 'category',
|
|
|
+// axisLabel: {
|
|
|
+// show: true,
|
|
|
+// textStyle: {
|
|
|
+// color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
|
|
+// fontSize : 14 //更改坐标轴文字大小
|
|
|
+// }
|
|
|
+// },
|
|
|
+// axisTick: {
|
|
|
+// show: false
|
|
|
+// },
|
|
|
+// axisLine:{
|
|
|
+// lineStyle:{
|
|
|
+// color:'rgb(192,192,192)' //更改坐标轴颜色
|
|
|
+// }
|
|
|
+// },
|
|
|
+// },
|
|
|
+// yAxis: {
|
|
|
+// gridIndex:0,
|
|
|
+// axisLabel: {
|
|
|
+// show: true,
|
|
|
+// textStyle: {
|
|
|
+// color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
|
|
+// fontSize: 14 //更改坐标轴文字大小
|
|
|
+// }
|
|
|
+// },
|
|
|
+// axisTick: {
|
|
|
+// show: false
|
|
|
+// },
|
|
|
+// axisLine: {
|
|
|
+// lineStyle: {
|
|
|
+// color: 'rgb(192,192,192)' //更改坐标轴颜色
|
|
|
+// }
|
|
|
+// }
|
|
|
+// },
|
|
|
+// grid: {top: '55%'},
|
|
|
+// series: [
|
|
|
+// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
+// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
+// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
+// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
|
|
+// {
|
|
|
+// type: 'pie',
|
|
|
+// id: 'pie',
|
|
|
+// radius: '30%',
|
|
|
+// center: ['50%', '25%'],
|
|
|
+// label: {
|
|
|
+// formatter: '{b}: {@2012} ({d}%)'
|
|
|
+// },
|
|
|
+// encode: {
|
|
|
+// itemName: 'product',
|
|
|
+// value: '2012',
|
|
|
+// tooltip: '2012'
|
|
|
+// }
|
|
|
+// }
|
|
|
+// ]
|
|
|
+// };
|
|
|
+// //点记标记点时的动效
|
|
|
+// myChart.on('updateAxisPointer', function (event) {
|
|
|
+// var xAxisInfo = event.axesInfo[0];
|
|
|
+// if (xAxisInfo) {
|
|
|
+// var dimension = xAxisInfo.value + 1;
|
|
|
+// myChart.setOption({
|
|
|
+// series: {
|
|
|
+// id: 'pie',
|
|
|
+// label: {
|
|
|
+// formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
|
+// },
|
|
|
+// encode: {
|
|
|
+// value: dimension,
|
|
|
+// tooltip: dimension
|
|
|
+// }
|
|
|
+// }
|
|
|
+// });
|
|
|
+// }
|
|
|
+// });
|
|
|
|
|
|
- window.addEventListener('resize',function() {myChart.resize()});
|
|
|
- myChart.setOption(option);
|
|
|
+// window.addEventListener('resize',function() {myChart.resize()});
|
|
|
+// myChart.setOption(option);
|
|
|
|
|
|
- }
|
|
|
+// }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -170,7 +256,8 @@ export default {
|
|
|
.big{
|
|
|
margin:100px 0 0 0;
|
|
|
padding-top: 0;
|
|
|
- background-color: rgb(243,243,243);;
|
|
|
+ background-color: rgb(243,243,243);
|
|
|
+ padding-top: 15px;
|
|
|
.top{
|
|
|
width: 100%;
|
|
|
height: 360px;
|
|
|
@@ -197,7 +284,7 @@ export default {
|
|
|
.bottom{
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
- margin: 20px 0;
|
|
|
+ // margin: 20px 0;
|
|
|
.el-row{
|
|
|
margin-right: 4px !important;
|
|
|
}
|
1319612909