From a3a331bd1594f7ab8442df062125c54665763cd3 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 21 Apr 2017 15:12:45 +0800 Subject: [PATCH] add dashboard --- package.json | 3 +- src/api/article.js | 25 +-------- src/components/Charts/barPercent.vue | 1 + src/components/Charts/line.vue | 1 + src/mock/index.js | 1 + src/router/index.js | 8 ++- src/views/charts/index.vue | 5 ++ src/views/components/index.vue | 5 ++ src/views/dashboard/editor/index.vue | 77 ++++++++++++++++------------ 9 files changed, 67 insertions(+), 59 deletions(-) create mode 100644 src/views/charts/index.vue create mode 100644 src/views/components/index.vue diff --git a/package.json b/package.json index a0409610..bf4e6041 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "vue-router": "2.3.0", "vuedraggable": "2.8.4", "vuex": "2.2.1", - "xlsx": "0.8.1" + "xlsx": "0.8.1", + "vue-count-to":"1.0.5" }, "devDependencies": { "autoprefixer": "6.7.2", diff --git a/src/api/article.js b/src/api/article.js index a359329d..c062cbb7 100644 --- a/src/api/article.js +++ b/src/api/article.js @@ -1,29 +1,8 @@ -import fetch, { tpFetch } from 'utils/fetch'; -import { param } from 'utils'; +import { tpFetch } from 'utils/fetch'; -export function getList(query) { +export function getList() { return tpFetch({ url: '/article/list', method: 'get' }); } -export function upload(data) { - return tpFetch({ - url: 'https://upload.qbox.me', - method: 'post', - data - }); -} - - -/* 外部uri转七牛uri*/ -export function netUpload(token, net_url) { - const imgData = { - net_url - }; - return fetch({ - url: '/qiniu/upload/net/async', - method: 'post', - data: imgData - }); -} diff --git a/src/components/Charts/barPercent.vue b/src/components/Charts/barPercent.vue index bdc01874..e82422fe 100644 --- a/src/components/Charts/barPercent.vue +++ b/src/components/Charts/barPercent.vue @@ -48,6 +48,7 @@ methods: { initBar() { this.chart = echarts.init(document.getElementById(this.id)); + this.setOptions(); }, setOptions() { this.chart.setOption({ diff --git a/src/components/Charts/line.vue b/src/components/Charts/line.vue index 28b22a11..ab416c76 100644 --- a/src/components/Charts/line.vue +++ b/src/components/Charts/line.vue @@ -46,6 +46,7 @@ }, mounted() { this.chart = echarts.init(document.getElementById(this.id)); + this.setLine(this.listData); }, methods: { setLine(dataList) { diff --git a/src/mock/index.js b/src/mock/index.js index e2b0edab..9a125c4f 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -7,6 +7,7 @@ const articleList = { 'data|20': [{ id: '@id', title: '@ctitle(10, 20)', + 'status|1': ['published', 'draft'], author: '@cname', display_time: '@datetime', pageviews: '@integer(300, 5000)' diff --git a/src/router/index.js b/src/router/index.js index 535da322..2bfd0d13 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -19,6 +19,7 @@ import sendPWD from '../views/login/sendpwd'; import reset from '../views/login/reset'; /* components*/ +const componentsIndex = resolve => require(['../views/components/index'], resolve); const Tinymce = resolve => require(['../views/components/tinymce'], resolve); const Markdown = resolve => require(['../views/components/markdown'], resolve); const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve); @@ -32,6 +33,7 @@ const Mixin = resolve => require(['../views/components/mixin'], resolve); /* charts*/ +const chartIndex = resolve => require(['../views/charts/index'], resolve); const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve); const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve); const LineMarker = resolve => require(['../views/charts/line'], resolve); @@ -80,10 +82,11 @@ export default new Router({ { path: '/components', component: Layout, - redirect: 'noredirect', + redirect: '/components/index', name: '组件', icon: 'zujian', children: [ + { path: 'index', component: componentsIndex, name: '介绍' }, { path: 'tinymce', component: Tinymce, name: '富文本编辑器' }, { path: 'markdown', component: Markdown, name: 'Markdown' }, { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' }, @@ -99,10 +102,11 @@ export default new Router({ { path: '/charts', component: Layout, - redirect: 'noredirect', + redirect: '/charts/index', name: '图表', icon: 'tubiaoleixingzhengchang', children: [ + { path: 'index', component: chartIndex, name: '介绍' }, { path: 'keyboard', component: KeyboardChart, name: '键盘图表' }, { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }, { path: 'line', component: LineMarker, name: '折线图' }, diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue new file mode 100644 index 00000000..af09a352 --- /dev/null +++ b/src/views/charts/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/components/index.vue b/src/views/components/index.vue new file mode 100644 index 00000000..af09a352 --- /dev/null +++ b/src/views/components/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue index ad89ef25..2ea108a7 100644 --- a/src/views/dashboard/editor/index.vue +++ b/src/views/dashboard/editor/index.vue @@ -7,32 +7,32 @@
{{name}}
- - {{statisticsData.article_count | toThousandslsFilter}} +
+ 文章 - +
- {{statisticsData.pageviews_count | toThousandslsFilter}} + 浏览量
- - {{statisticsData.comment_count | toThousandslsFilter}} +
+ 评论 - +
- 发表文章 - 发布快讯 - 推送 - 评论管理 - 文章列表 - 实时列表 + 组价 + 图表 + 错误页面 + 错误日志 + 导出excel + 实时列表
@@ -47,10 +47,10 @@
- - Show more - @@ -71,23 +68,37 @@ import PanThumb from 'components/PanThumb'; import MonthKpi from './monthKpi'; import ArticlesChart from './articlesChart'; - // import { getStatistics } from 'api/article'; - + import { getList } from 'api/article'; import emptyGif from 'assets/compbig.gif'; + import countTo from 'vue-count-to'; export default { name: 'dashboard-editor', - components: { PanThumb, MonthKpi, ArticlesChart }, + components: { PanThumb, MonthKpi, ArticlesChart, countTo }, data() { return { chart: null, statisticsData: { - article_count: undefined, - comment_count: undefined, + article_count: 1024, + comment_count: 102400, latest_article: [], - month_article_count: undefined, - pageviews_count: undefined, - week_article: [] + month_article_count: 28, + pageviews_count: 1024, + week_article: [ + { count: 30, week: '201716' }, + { count: 26, week: '201715' }, + { count: 31, week: '201714' }, + { count: 28, week: '201713' }, + { count: 40, week: '201712' }, + { count: 41, week: '201711' }, + { count: 50, week: '201710' }, + { count: 42, week: '201709' }, + { count: 36, week: '201708' }, + { count: 32, week: '201707' }, + { count: 40, week: '201706' }, + { count: 41, week: '201705' } + ] }, + list: [], emptyGif } }, @@ -104,15 +115,15 @@ 'roles' ]), recentArticles() { - return this.statisticsData.latest_article.slice(0, 7) + return this.list.slice(0, 7) } }, methods: { fetchData() { - // getStatistics().then(response => { - // this.statisticsData = response.data; - // this.statisticsData.week_article = this.statisticsData.week_article.slice().reverse(); - // }) + getList(this.listQuery).then(response => { + console.log(response.data) + this.list = response.data; + }) } }, filters: {