refactor:dashboard
This commit is contained in:
Pan
parent
35055c5e51
commit
6d1059f6a8
20 changed files with 720 additions and 120 deletions
9
src/api/transaction.js
Normal file
9
src/api/transaction.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function fetchList(query) {
|
||||
return request({
|
||||
url: '/transaction/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
113
src/components/TextHoverEffect/Mallki.vue
Normal file
113
src/components/TextHoverEffect/Mallki.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<a class="link--mallki" :class="className" href="#">
|
||||
{{text}}
|
||||
<span :data-letters="text"></span>
|
||||
<span :data-letters="text"></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'vue-element-admin'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Mallki */
|
||||
.link--mallki {
|
||||
font-weight: 800;
|
||||
color: #4dd9d5;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
-webkit-transition: color 0.5s 0.25s;
|
||||
transition: color 0.5s 0.25s;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link--mallki:hover {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.link--mallki::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin: -3px 0 0 0;
|
||||
background: #3888fa;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--mallki:hover::before {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.link--mallki span {
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link--mallki span::before {
|
||||
content: attr(data-letters);
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #3888fa;
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2) {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.link--mallki span:first-child::before {
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2)::before {
|
||||
bottom: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
.link--mallki:hover span::before {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
1
src/icons/svg/message.svg
Normal file
1
src/icons/svg/message.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727568680" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2026" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M0 202.7V631c0 83.3 68.3 150.7 152.6 150.7h228.9l8 190.3 224.9-190.3h257c84.3 0 152.6-67.4 152.6-150.7V202.7C1024 119.4 955.7 52 871.4 52H152.6C68.3 52 0 119.4 0 202.7z m658.6 237.9c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S771 512 730.9 512c-40.2 0-72.3-31.7-72.3-71.4z m-220.9 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S550.1 512 510 512c-40.2 0-72.3-31.7-72.3-71.4z m-216.8 0c0-39.7 32.1-71.4 72.3-71.4 40.2 0 72.3 31.7 72.3 71.4S333.3 512 293.1 512c-40.1 0-72.2-31.7-72.2-71.4z" p-id="2027"></path></svg>
|
||||
|
After Width: | Height: | Size: 917 B |
1
src/icons/svg/money.svg
Normal file
1
src/icons/svg/money.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727546462" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1764" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M463.3 958.3V772.1H228.8v-77.5h234.5v-80.5H228.8v-83.5H420L191.5 128h113.7L469 420.6c18.2 33.4 32.4 62.4 42.7 86.9 9-19.8 24.6-50.5 46.8-92.1L713.9 128h120.8L605.5 530.6h192.9v83.5H564.9v80.5h233.5v77.5H564.9v186.2H463.3z" p-id="1765"></path></svg>
|
||||
|
After Width: | Height: | Size: 632 B |
1
src/icons/svg/peoples.svg
Normal file
1
src/icons/svg/peoples.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727502091" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1640" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M765.184 873.941333c0 33.28-28.501333 60.288-63.829333 60.288L63.829333 934.229333C28.501333 934.229333 0 907.221333 0 873.941333c0-120.576 123.264-233.258667 249.216-277.674667-72.789333-42.496-121.728-118.058667-121.728-204.8L127.488 331.136c0-133.248 114.346667-241.365333 255.146667-241.365333s255.146667 108.117333 255.146667 241.365333l0 60.288c0 86.826667-48.981333 162.304-121.728 204.842667C641.962667 640.725333 765.184 753.365333 765.184 873.941333L765.184 873.941333z" p-id="1641"></path><path d="M848.256 870.570667l126.933333 0c27.008 0 48.810667-20.650667 48.810667-46.08 0-92.245333-94.293333-178.346667-190.549333-212.309333 55.637333-32.512 93.098667-90.282667 93.098667-156.672L926.549333 409.344c0-101.888-87.424-184.576-195.114667-184.576-13.397333 0-26.453333 1.28-39.125333 3.712 15.488 31.146667 24.149333 65.92 24.149333 102.613333l0 60.288c0 86.826667-24.448 152.746667-88.533333 204.842667C746.666667 625.365333 846.421333 751.018667 848.256 870.570667z" p-id="1642"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/icons/svg/shoppingCard.svg
Normal file
1
src/icons/svg/shoppingCard.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727582324" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2288" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M347.136 783.36q19.456 0 36.864 7.168t30.72 19.968 20.48 30.208 7.168 36.864-7.168 36.864-20.48 30.208-30.72 20.48-36.864 7.68q-20.48 0-37.376-7.68t-30.208-20.48-20.48-30.208-7.168-36.864 7.168-36.864 20.48-30.208 30.208-19.968 37.376-7.168zM773.12 785.408q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM945.152 203.776q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-12.8 37.888-22.016 62.976-24.064 68.096-17.92 53.248q-13.312 40.96-33.792 56.832t-50.176 15.872l-34.816 0-66.56 0-87.04 0-95.232 0-253.952 0 15.36 92.16 516.096 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-95.232 0-117.76 0-119.808 0-98.304 0-56.32 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l22.528 0 20.48 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0z" p-id="2289"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -2,6 +2,7 @@ import Mock from 'mockjs'
|
|||
import loginAPI from './login'
|
||||
import articleAPI from './article'
|
||||
import remoteSearchAPI from './remoteSearch'
|
||||
import transactionAPI from './transaction'
|
||||
|
||||
Mock.setup({
|
||||
timeout: '350-600'
|
||||
|
|
@ -20,4 +21,6 @@ Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
|
|||
// 搜索相关
|
||||
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
|
||||
|
||||
// 账单相关
|
||||
Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)
|
||||
export default Mock
|
||||
|
|
|
|||
23
src/mock/transaction.js
Normal file
23
src/mock/transaction.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import Mock from 'mockjs'
|
||||
|
||||
const List = []
|
||||
const count = 20
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(Mock.mock({
|
||||
order_no: '@guid()',
|
||||
timestamp: +Mock.Random.date('T'),
|
||||
username: '@name()',
|
||||
price: '@float(1000, 15000, 0, 2)',
|
||||
'status|1': ['success', 'pending']
|
||||
}))
|
||||
}
|
||||
|
||||
export default {
|
||||
getList: () => {
|
||||
return {
|
||||
total: List.length,
|
||||
items: List
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,8 +57,9 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
|
@ -70,7 +71,10 @@ export default {
|
|||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
110
src/views/dashboard/admin/components/BoxCard.vue
Normal file
110
src/views/dashboard/admin/components/BoxCard.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<el-card class="box-card" style="margin-left:8px;">
|
||||
<div slot="header" class="box-card-header">
|
||||
<img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<pan-thumb class="panThumb" :image="avatar"></pan-thumb>
|
||||
<mallki className='mallki-text' text='vue-element-admin'></mallki>
|
||||
<div class='progress-item'>
|
||||
<span>Vue</span>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
</div>
|
||||
<div class='progress-item'>
|
||||
<span>JavaScript</span>
|
||||
<el-progress :percentage="18"></el-progress>
|
||||
</div>
|
||||
<div class='progress-item'>
|
||||
<span>Css</span>
|
||||
<el-progress :percentage="12"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
import Mallki from '@/components/TextHoverEffect/Mallki'
|
||||
|
||||
export default {
|
||||
components: { PanThumb, Mallki },
|
||||
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" >
|
||||
.box-card {
|
||||
.el-card__header {
|
||||
padding: 0px!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
filter: contrast(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mallki-text {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 0px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 70px!important;
|
||||
width: 70px!important;
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
left: 0px;
|
||||
border: 5px solid #ffffff;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
.progress-item {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,9 @@ export default {
|
|||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -60,62 +63,87 @@ export default {
|
|||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: 'visitors',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: [100, 120, 161, 134, 105, 160, 165],
|
||||
animationDuration: 2600,
|
||||
animationEasing: 'cubicInOut'
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
{
|
||||
name: 'buyers',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(2, 197, 233, 0.2)',
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: 'rgba(2, 197, 233, 0.2)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(99,194,255, 0.6)'
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [120, 82, 91, 154, 162, 140, 130],
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,10 +49,6 @@ export default {
|
|||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'WEEKLY WRITE ARTICLES',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
|
|
@ -68,7 +64,8 @@ export default {
|
|||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [10, 90],
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'industries' },
|
||||
{ value: 240, name: 'technology' },
|
||||
120
src/views/dashboard/admin/components/RaddarChart.vue
Normal file
120
src/views/dashboard/admin/components/RaddarChart.vue
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHanlder = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHanlder)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHanlder)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '70%',
|
||||
center: ['50%', '44%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 40px auto 0;
|
||||
margin: 0 auto ;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
padding: 10px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<section class="todoapp">
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<input class="new-todo" autofocus autocomplete="off" placeholder="TODO LIST?" @keyup.enter="addTodo">
|
||||
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
|
||||
</header>
|
||||
<!-- main section -->
|
||||
<section class="main" v-show="todos.length">
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
||||
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
||||
Clear completed
|
||||
</button>
|
||||
</button> -->
|
||||
</footer>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -43,7 +43,12 @@ const filters = {
|
|||
const defalutList = [
|
||||
{ text: 'star this repository', done: false },
|
||||
{ text: 'fork this repository', done: false },
|
||||
{ text: 'follow author', done: false }
|
||||
{ text: 'follow author', done: false },
|
||||
{ text: 'vue-element-admin', done: true },
|
||||
{ text: 'vue', done: true },
|
||||
{ text: 'element-ui', done: true },
|
||||
{ text: 'axios', done: true },
|
||||
{ text: 'webpack', done: true }
|
||||
]
|
||||
export default {
|
||||
components: { Todo },
|
||||
|
|
@ -51,7 +56,8 @@ export default {
|
|||
return {
|
||||
visibility: 'all',
|
||||
filters,
|
||||
todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
||||
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
||||
todos: defalutList
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
55
src/views/dashboard/admin/components/TransactionTable.vue
Normal file
55
src/views/dashboard/admin/components/TransactionTable.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;" >
|
||||
<el-table-column label="Order_No">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.order_no}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Price" width="195" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.price | toThousandslsFilter}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="Username" width="135" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.username}}
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from '@/api/transaction'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: null
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
fetchList().then(response => {
|
||||
this.list = response.data.items.slice(0, 7)
|
||||
})
|
||||
} }
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner></github-corner>
|
||||
<el-row class="btn-group">
|
||||
<!-- <el-row class="btn-group">
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
|
||||
</el-col>
|
||||
|
|
@ -20,112 +20,238 @@
|
|||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
</el-row> -->
|
||||
<el-row class="panel-group" :gutter="40">
|
||||
<el-col :span="6">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="box-card-header">
|
||||
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
<div class='card-panel no-margin-left' @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<span class="display_name">{{name}}</span>
|
||||
<div class="info-item">
|
||||
<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></count-to>
|
||||
<span class="info-item-text">文章</span>
|
||||
<svg-icon icon-class="trendChart1" class="dashboard-editor-icon"></svg-icon>
|
||||
<div class='card-panel-description'>
|
||||
<div class='card-panel-text'>New Visits</div>
|
||||
<count-to class="card-panel-num" :startVal='0' :endVal='102400' :duration='3600'></count-to>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></count-to>
|
||||
<span class="info-item-text">浏览量</span>
|
||||
<svg-icon icon-class="trendChart2" class="dashboard-editor-icon"></svg-icon>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<pie-chart></pie-chart>
|
||||
<el-col :span="6">
|
||||
<div class='card-panel' @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class='card-panel-description'>
|
||||
<div class='card-panel-text'>Messages</div>
|
||||
<count-to class="card-panel-num" :startVal='0' :endVal='81212' :duration='3600'></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<bar-chart></bar-chart>
|
||||
<el-col :span="6">
|
||||
<div class='card-panel' @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class='card-panel-description'>
|
||||
<div class='card-panel-text'>Purchases</div>
|
||||
<count-to class="card-panel-num" :startVal='0' :endVal='9280' :duration='3600'></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class='card-panel no-margin-right' @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shoppingCard">
|
||||
<svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class='card-panel-description'>
|
||||
<div class='card-panel-text'>Shoppings</div>
|
||||
<count-to class="card-panel-num" :startVal='0' :endVal='1299' :duration='3600'></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<line-chart></line-chart>
|
||||
<el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
|
||||
<line-chart :chart-data='lineChartData'></line-chart>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top:30px;">
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper no-margin-left">
|
||||
<raddar-chart></raddar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<todo-list></todo-list>
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart></pie-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-wrapper no-margin-right">
|
||||
<bar-chart></bar-chart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top:30px;">
|
||||
<el-col :span="12" style="padding-right:8px;">
|
||||
<transaction-table></transaction-table>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<todo-list style="margin:0 8px;"></todo-list>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<box-card></box-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import countTo from 'vue-count-to'
|
||||
import panThumb from '@/components/PanThumb'
|
||||
import todoList from '@/components/TodoList'
|
||||
import CountTo from 'vue-count-to'
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import pieChart from './pieChart'
|
||||
import barChart from './barChart'
|
||||
import lineChart from './lineChart'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 101, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: { countTo, panThumb, todoList, GithubCorner, pieChart, lineChart, barChart },
|
||||
components: {
|
||||
CountTo,
|
||||
GithubCorner,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
margin: 30px;
|
||||
.btn-group {
|
||||
margin-bottom: 60px;
|
||||
padding: 30px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.no-margin-left {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
.no-margin-right {
|
||||
margin-right: 0!important;
|
||||
}
|
||||
.panel-group {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.card-panel {
|
||||
// margin: 0 25px;
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
.icon-people {
|
||||
background: #36a3f7;
|
||||
}
|
||||
.icon-message {
|
||||
background: #f4516c;
|
||||
}
|
||||
.icon-money {
|
||||
background: #716aca;
|
||||
}
|
||||
.icon-shoppingCard {
|
||||
background: #34bfa3
|
||||
}
|
||||
}
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
.icon-people {
|
||||
color: #36a3f7;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
.icon-message {
|
||||
color: #f4516c;
|
||||
}
|
||||
.display_name{
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
.icon-money {
|
||||
color: #716aca;
|
||||
}
|
||||
.info-item{
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
&:last-of-type{
|
||||
margin-left: 15px;
|
||||
}
|
||||
.icon-shoppingCard {
|
||||
color: #34bfa3
|
||||
}
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
margin: 0 15px;
|
||||
padding: 15px 15px 0;
|
||||
}
|
||||
.btn-group {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@
|
|||
</el-tooltip>
|
||||
|
||||
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
|
||||
<svg-icon class-name='right-menu-item international-icon' icon-class="language" />
|
||||
<div>
|
||||
<svg-icon class-name='right-menu-item international-icon' icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
|
||||
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon :icon-class="${symbol}" />`
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
handleClipboard(text, event) {
|
||||
clipboard(text, event)
|
||||
|
|
|
|||
Loading…
Reference in a new issue