From 6d1059f6a824e55f3eb72107c396396cbd03648f Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 16 Nov 2017 17:25:28 +0800
Subject: [PATCH] refactor:dashboard
---
src/api/transaction.js | 9 +
src/components/TextHoverEffect/Mallki.vue | 113 ++++++++
src/icons/svg/message.svg | 1 +
src/icons/svg/money.svg | 1 +
src/icons/svg/peoples.svg | 1 +
src/icons/svg/shoppingCard.svg | 1 +
src/mock/index.js | 3 +
src/mock/transaction.js | 23 ++
.../{barChart.vue => components/BarChart.vue} | 10 +-
.../dashboard/admin/components/BoxCard.vue | 110 ++++++++
.../LineChart.vue} | 62 ++--
.../{pieChart.vue => components/PieChart.vue} | 7 +-
.../admin/components/RaddarChart.vue | 120 ++++++++
.../admin}/components/TodoList/Todo.vue | 0
.../admin}/components/TodoList/index.scss | 4 +-
.../admin}/components/TodoList/index.vue | 16 +-
.../admin/components/TransactionTable.vue | 55 ++++
src/views/dashboard/admin/index.vue | 266 +++++++++++++-----
src/views/layout/components/Navbar.vue | 4 +-
src/views/svg-icons/index.vue | 2 +-
20 files changed, 704 insertions(+), 104 deletions(-)
create mode 100644 src/api/transaction.js
create mode 100644 src/components/TextHoverEffect/Mallki.vue
create mode 100644 src/icons/svg/message.svg
create mode 100644 src/icons/svg/money.svg
create mode 100644 src/icons/svg/peoples.svg
create mode 100644 src/icons/svg/shoppingCard.svg
create mode 100644 src/mock/transaction.js
rename src/views/dashboard/admin/{barChart.vue => components/BarChart.vue} (93%)
create mode 100644 src/views/dashboard/admin/components/BoxCard.vue
rename src/views/dashboard/admin/{lineChart.vue => components/LineChart.vue} (69%)
rename src/views/dashboard/admin/{pieChart.vue => components/PieChart.vue} (93%)
create mode 100644 src/views/dashboard/admin/components/RaddarChart.vue
rename src/{ => views/dashboard/admin}/components/TodoList/Todo.vue (100%)
rename src/{ => views/dashboard/admin}/components/TodoList/index.scss (99%)
rename src/{ => views/dashboard/admin}/components/TodoList/index.vue (83%)
create mode 100644 src/views/dashboard/admin/components/TransactionTable.vue
diff --git a/src/api/transaction.js b/src/api/transaction.js
new file mode 100644
index 00000000..dfe64392
--- /dev/null
+++ b/src/api/transaction.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+ return request({
+ url: '/transaction/list',
+ method: 'get',
+ params: query
+ })
+}
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
new file mode 100644
index 00000000..7e975dc8
--- /dev/null
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -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>
diff --git a/src/icons/svg/message.svg b/src/icons/svg/message.svg
new file mode 100644
index 00000000..d807b002
--- /dev/null
+++ b/src/icons/svg/message.svg
@@ -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>
\ No newline at end of file
diff --git a/src/icons/svg/money.svg b/src/icons/svg/money.svg
new file mode 100644
index 00000000..d4fcb9ca
--- /dev/null
+++ b/src/icons/svg/money.svg
@@ -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>
\ No newline at end of file
diff --git a/src/icons/svg/peoples.svg b/src/icons/svg/peoples.svg
new file mode 100644
index 00000000..2dccfcc0
--- /dev/null
+++ b/src/icons/svg/peoples.svg
@@ -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>
\ No newline at end of file
diff --git a/src/icons/svg/shoppingCard.svg b/src/icons/svg/shoppingCard.svg
new file mode 100644
index 00000000..cdebbdb4
--- /dev/null
+++ b/src/icons/svg/shoppingCard.svg
@@ -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>
\ No newline at end of file
diff --git a/src/mock/index.js b/src/mock/index.js
index 15cea12b..951c80d5 100644
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -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
diff --git a/src/mock/transaction.js b/src/mock/transaction.js
new file mode 100644
index 00000000..a17517e4
--- /dev/null
+++ b/src/mock/transaction.js
@@ -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
+ }
+ }
+}
diff --git a/src/views/dashboard/admin/barChart.vue b/src/views/dashboard/admin/components/BarChart.vue
similarity index 93%
rename from src/views/dashboard/admin/barChart.vue
rename to src/views/dashboard/admin/components/BarChart.vue
index 4d151f60..34f32c88 100644
--- a/src/views/dashboard/admin/barChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -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',
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
new file mode 100644
index 00000000..20557c1c
--- /dev/null
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -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>
diff --git a/src/views/dashboard/admin/lineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
similarity index 69%
rename from src/views/dashboard/admin/lineChart.vue
rename to src/views/dashboard/admin/components/LineChart.vue
index 59aa61e6..df96887b 100644
--- a/src/views/dashboard/admin/lineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -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: {},
+ legend: {
+ data: ['expected', 'actual']
+ },
series: [{
- name: 'visitors',
- itemStyle: {
+ name: 'expected', itemStyle: {
normal: {
- areaStyle: {}
+ color: '#FF005A',
+ lineStyle: {
+ color: '#FF005A',
+ width: 2
+ }
}
},
smooth: true,
type: 'line',
- data: [100, 120, 161, 134, 105, 160, 165],
- animationDuration: 2600,
+ data: expectedData,
+ animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
- name: 'buyers',
+ name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
- color: 'rgba(2, 197, 233, 0.2)',
+ color: '#3888fa',
lineStyle: {
- color: 'rgba(2, 197, 233, 0.2)'
+ color: '#3888fa',
+ width: 2
},
areaStyle: {
- color: 'rgba(99,194,255, 0.6)'
+ color: '#f3f8ff'
}
}
},
- data: [120, 82, 91, 154, 162, 140, 130],
- animationDuration: 2000,
+ data: actualData,
+ animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
+ },
+ initChart() {
+ this.chart = echarts.init(this.$el, 'macarons')
+ this.setOptions(this.chartData)
}
}
}
diff --git a/src/views/dashboard/admin/pieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
similarity index 93%
rename from src/views/dashboard/admin/pieChart.vue
rename to src/views/dashboard/admin/components/PieChart.vue
index 51be373a..426653b2 100644
--- a/src/views/dashboard/admin/pieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -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' },
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
new file mode 100644
index 00000000..703ee41c
--- /dev/null
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -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>
diff --git a/src/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
similarity index 100%
rename from src/components/TodoList/Todo.vue
rename to src/views/dashboard/admin/components/TodoList/Todo.vue
diff --git a/src/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
similarity index 99%
rename from src/components/TodoList/index.scss
rename to src/views/dashboard/admin/components/TodoList/index.scss
index 4ee9aeb2..f004e6aa 100644
--- a/src/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -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);
diff --git a/src/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
similarity index 83%
rename from src/components/TodoList/index.vue
rename to src/views/dashboard/admin/components/TodoList/index.vue
index 8ce6af46..34f0241d 100644
--- a/src/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -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: {
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
new file mode 100644
index 00000000..32a1ca94
--- /dev/null
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -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>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 736387f9..032b8a38 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -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>
+ <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>
+ </el-col>
+ <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>
- <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>
+ </el-col>
+ <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="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 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>
- </el-card>
+ </div>
</el-col>
+ </el-row>
+
+ <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">
- <pie-chart></pie-chart>
+ <div class="chart-wrapper no-margin-left">
+ <raddar-chart></raddar-chart>
+ </div>
</el-col>
-
- <el-col :span="10">
- <bar-chart></bar-chart>
+ <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 :gutter="20">
- <el-col :span="15">
- <line-chart></line-chart>
+ <el-row style="margin-top:30px;">
+ <el-col :span="12" style="padding-right:8px;">
+ <transaction-table></transaction-table>
</el-col>
- <el-col :span="9">
- <todo-list></todo-list>
+ <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
+ }
+ }
+ .icon-people {
+ color: #36a3f7;
+ }
+ .icon-message {
+ color: #f4516c;
}
- .box-card-header {
- position: relative;
- height: 160px;
+ .icon-money {
+ color: #716aca;
}
- .panThumb {
- z-index: 100;
- height: 150px;
- width: 150px;
- position: absolute;
- left: 0px;
- right: 0px;
- margin: auto;
+ .icon-shoppingCard {
+ color: #34bfa3
}
- .display_name{
- font-size: 30px;
- display: block;
+ .card-panel-icon-wrapper {
+ float: left;
+ margin: 14px 0 0 14px;
+ padding: 16px;
+ transition: all 0.38s ease-out;
+ border-radius: 6px;
}
- .info-item{
- display: inline-block;
- margin-top: 10px;
- font-size: 14px;
- &:last-of-type{
- margin-left: 15px;
- }
+ .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>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 33b3c18d..b9ac899d 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -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>
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index 5fe65184..634a55be 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -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)
--
GitLab