From 6d1059f6a824e55f3eb72107c396396cbd03648f Mon Sep 17 00:00:00 2001 From: Pan 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} | 88 ++++-- .../{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 | 272 +++++++++++++----- src/views/layout/components/Navbar.vue | 4 +- src/views/svg-icons/index.vue | 2 +- 20 files changed, 720 insertions(+), 120 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 @@ + + + + + + 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + + + + + + 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: {}, - 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) } } } 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}
{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 @@ + + + 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 @@
- +
@@ -24,9 +24,9 @@ {{ key | capitalize }} -
@@ -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 @@ + + + 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 @@ + + + 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 @@ - +
+ +
中文 English 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 `` + return `` }, handleClipboard(text, event) { clipboard(text, event)