add dashboard
							parent
							
								
									33e384ee95
								
							
						
					
					
						commit
						a3a331bd15
					
				|  | @ -31,7 +31,8 @@ | ||||||
|     "vue-router": "2.3.0", |     "vue-router": "2.3.0", | ||||||
|     "vuedraggable": "2.8.4", |     "vuedraggable": "2.8.4", | ||||||
|     "vuex": "2.2.1", |     "vuex": "2.2.1", | ||||||
|     "xlsx": "0.8.1" |     "xlsx": "0.8.1", | ||||||
|  |     "vue-count-to":"1.0.5" | ||||||
|   }, |   }, | ||||||
|   "devDependencies": { |   "devDependencies": { | ||||||
|     "autoprefixer": "6.7.2", |     "autoprefixer": "6.7.2", | ||||||
|  |  | ||||||
|  | @ -1,29 +1,8 @@ | ||||||
| import fetch, { tpFetch } from 'utils/fetch'; | import { tpFetch } from 'utils/fetch'; | ||||||
| import { param } from 'utils'; |  | ||||||
| 
 | 
 | ||||||
| export function getList(query) { | export function getList() { | ||||||
|   return tpFetch({ |   return tpFetch({ | ||||||
|     url: '/article/list', |     url: '/article/list', | ||||||
|     method: 'get' |     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 |  | ||||||
|   }); |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  | @ -48,6 +48,7 @@ | ||||||
|       methods: { |       methods: { | ||||||
|         initBar() { |         initBar() { | ||||||
|           this.chart = echarts.init(document.getElementById(this.id)); |           this.chart = echarts.init(document.getElementById(this.id)); | ||||||
|  |           this.setOptions(); | ||||||
|         }, |         }, | ||||||
|         setOptions() { |         setOptions() { | ||||||
|           this.chart.setOption({ |           this.chart.setOption({ | ||||||
|  |  | ||||||
|  | @ -46,6 +46,7 @@ | ||||||
|       }, |       }, | ||||||
|       mounted() { |       mounted() { | ||||||
|         this.chart = echarts.init(document.getElementById(this.id)); |         this.chart = echarts.init(document.getElementById(this.id)); | ||||||
|  |         this.setLine(this.listData); | ||||||
|       }, |       }, | ||||||
|       methods: { |       methods: { | ||||||
|         setLine(dataList) { |         setLine(dataList) { | ||||||
|  |  | ||||||
|  | @ -7,6 +7,7 @@ const articleList = { | ||||||
|   'data|20': [{ |   'data|20': [{ | ||||||
|     id: '@id', |     id: '@id', | ||||||
|     title: '@ctitle(10, 20)', |     title: '@ctitle(10, 20)', | ||||||
|  |     'status|1': ['published', 'draft'], | ||||||
|     author: '@cname', |     author: '@cname', | ||||||
|     display_time: '@datetime', |     display_time: '@datetime', | ||||||
|     pageviews: '@integer(300, 5000)' |     pageviews: '@integer(300, 5000)' | ||||||
|  |  | ||||||
|  | @ -19,6 +19,7 @@ import sendPWD from '../views/login/sendpwd'; | ||||||
| import reset from '../views/login/reset'; | import reset from '../views/login/reset'; | ||||||
| 
 | 
 | ||||||
| /* components*/ | /* components*/ | ||||||
|  | const componentsIndex = resolve => require(['../views/components/index'], resolve); | ||||||
| const Tinymce = resolve => require(['../views/components/tinymce'], resolve); | const Tinymce = resolve => require(['../views/components/tinymce'], resolve); | ||||||
| const Markdown = resolve => require(['../views/components/markdown'], resolve); | const Markdown = resolve => require(['../views/components/markdown'], resolve); | ||||||
| const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve); | const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve); | ||||||
|  | @ -32,6 +33,7 @@ const Mixin = resolve => require(['../views/components/mixin'], resolve); | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| /* charts*/ | /* charts*/ | ||||||
|  | const chartIndex = resolve => require(['../views/charts/index'], resolve); | ||||||
| const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve); | const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve); | ||||||
| const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve); | const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve); | ||||||
| const LineMarker = resolve => require(['../views/charts/line'], resolve); | const LineMarker = resolve => require(['../views/charts/line'], resolve); | ||||||
|  | @ -80,10 +82,11 @@ export default new Router({ | ||||||
|     { |     { | ||||||
|       path: '/components', |       path: '/components', | ||||||
|       component: Layout, |       component: Layout, | ||||||
|       redirect: 'noredirect', |       redirect: '/components/index', | ||||||
|       name: '组件', |       name: '组件', | ||||||
|       icon: 'zujian', |       icon: 'zujian', | ||||||
|       children: [ |       children: [ | ||||||
|  |         { path: 'index', component: componentsIndex, name: '介绍' }, | ||||||
|         { path: 'tinymce', component: Tinymce, name: '富文本编辑器' }, |         { path: 'tinymce', component: Tinymce, name: '富文本编辑器' }, | ||||||
|         { path: 'markdown', component: Markdown, name: 'Markdown' }, |         { path: 'markdown', component: Markdown, name: 'Markdown' }, | ||||||
|         { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' }, |         { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' }, | ||||||
|  | @ -99,10 +102,11 @@ export default new Router({ | ||||||
|     { |     { | ||||||
|       path: '/charts', |       path: '/charts', | ||||||
|       component: Layout, |       component: Layout, | ||||||
|       redirect: 'noredirect', |       redirect: '/charts/index', | ||||||
|       name: '图表', |       name: '图表', | ||||||
|       icon: 'tubiaoleixingzhengchang', |       icon: 'tubiaoleixingzhengchang', | ||||||
|       children: [ |       children: [ | ||||||
|  |         { path: 'index', component: chartIndex, name: '介绍' }, | ||||||
|         { path: 'keyboard', component: KeyboardChart, name: '键盘图表' }, |         { path: 'keyboard', component: KeyboardChart, name: '键盘图表' }, | ||||||
|         { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }, |         { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }, | ||||||
|         { path: 'line', component: LineMarker, name: '折线图' }, |         { path: 'line', component: LineMarker, name: '折线图' }, | ||||||
|  |  | ||||||
|  | @ -0,0 +1,5 @@ | ||||||
|  | <template> | ||||||
|  |   <div class="components-container" > | ||||||
|  |     介绍 | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | @ -0,0 +1,5 @@ | ||||||
|  | <template> | ||||||
|  |   <div class="components-container" > | ||||||
|  |     介绍 | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | @ -7,32 +7,32 @@ | ||||||
|             <div class="info-container"> |             <div class="info-container"> | ||||||
|                 <span class="display_name">{{name}}</span> |                 <span class="display_name">{{name}}</span> | ||||||
|                 <div class="info-wrapper"> |                 <div class="info-wrapper"> | ||||||
|                     <router-link class="info-item" :to="'/article/wscnlist?uid='+uid"> |                     <div class="info-item" :to="'/article/wscnlist?uid='+uid"> | ||||||
|                         <span class="info-item-num">{{statisticsData.article_count | toThousandslsFilter}}</span> |                          <countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo> | ||||||
|                         <span class="info-item-text">文章</span> |                         <span class="info-item-text">文章</span> | ||||||
|                         <wscn-icon-svg icon-class="a" class="dashboard-editor-icon"/> |                         <wscn-icon-svg icon-class="a" class="dashboard-editor-icon"/> | ||||||
|                     </router-link> |                     </div> | ||||||
|                     <div class="info-item" style="cursor: auto"> |                     <div class="info-item" style="cursor: auto"> | ||||||
|                         <span class="info-item-num"> {{statisticsData.pageviews_count | toThousandslsFilter}}</span> |                         <countTo class="info-item-num"  :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo> | ||||||
|                         <span class="info-item-text">浏览量</span> |                         <span class="info-item-text">浏览量</span> | ||||||
|                         <wscn-icon-svg icon-class="b" class="dashboard-editor-icon"/> |                         <wscn-icon-svg icon-class="b" class="dashboard-editor-icon"/> | ||||||
|                     </div> |                     </div> | ||||||
|                     <router-link class="info-item" :to="'/comment/commentslist?res_author_id='+uid"> |                     <div class="info-item" :to="'/comment/commentslist?res_author_id='+uid"> | ||||||
|                         <span class="info-item-num">{{statisticsData.comment_count | toThousandslsFilter}}</span> |                          <countTo class="info-item-num" ref='countTo3' :startVal='0' :endVal='statisticsData.comment_count' :duration='3800'></countTo> | ||||||
|                         <span class="info-item-text">评论</span> |                         <span class="info-item-text">评论</span> | ||||||
|                         <wscn-icon-svg icon-class="c" class="dashboard-editor-icon"/> |                         <wscn-icon-svg icon-class="c" class="dashboard-editor-icon"/> | ||||||
|                     </router-link> |                     </div> | ||||||
|                 </div> |                 </div> | ||||||
|             </div> |             </div> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div class="btn-group"> |         <div class="btn-group"> | ||||||
|             <router-link class="pan-btn blue-btn" to="/article/create">发表文章</router-link> |             <router-link class="pan-btn blue-btn" to="/components/index">组价</router-link> | ||||||
|             <router-link class="pan-btn light-blue-btn" to="/livenews/create">发布快讯</router-link> |             <router-link class="pan-btn light-blue-btn" to="/charts/index">图表</router-link> | ||||||
|             <router-link class="pan-btn red-btn" to="/push/create">推送</router-link> |             <router-link class="pan-btn red-btn" to="/errorpage/404">错误页面</router-link> | ||||||
|             <router-link class="pan-btn pink-btn" to="/comment/commentslist">评论管理</router-link> |             <router-link class="pan-btn pink-btn" to="/errlog/log">错误日志</router-link> | ||||||
|             <router-link class="pan-btn green-btn" to="/article/wscnlist">文章列表</router-link> |             <router-link class="pan-btn green-btn" to="/article/wscnlist">导出excel</router-link> | ||||||
|             <router-link class="pan-btn tiffany-btn" to="/livenews/list">实时列表</router-link> |             <router-link class="pan-btn tiffany-btn" to="/excel/download">实时列表</router-link> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div class="clearfix main-dashboard-container"> |         <div class="clearfix main-dashboard-container"> | ||||||
|  | @ -47,10 +47,10 @@ | ||||||
|                     <template v-if="recentArticles.length!=0"> |                     <template v-if="recentArticles.length!=0"> | ||||||
|                         <div class="recent-articles-item" v-for="item in  recentArticles"> |                         <div class="recent-articles-item" v-for="item in  recentArticles"> | ||||||
|                             <span class="recent-articles-status">{{item.status | statusFilter}}</span> |                             <span class="recent-articles-status">{{item.status | statusFilter}}</span> | ||||||
|                             <router-link class="recent-articles-content" :to="'/article/edit/'+item.id"> |                              <span class="recent-articles-content" :to="'/article/edit/'+item.id"> | ||||||
|                                 <span>{{item.title}}</span> |                                 {{item.title}} | ||||||
|                             </router-link> |                             </span> | ||||||
|                             <span class="recent-articles-time"><i style="padding-right: 4px;" class="el-icon-time"></i>{{item.display_time | parseTime('{m}-{d} {h}:{i}')}}</span> |                             <span class="recent-articles-time">{{item.author}}</span> | ||||||
|                         </div> |                         </div> | ||||||
|                     </template> |                     </template> | ||||||
|                     <template v-else> |                     <template v-else> | ||||||
|  | @ -58,9 +58,6 @@ | ||||||
|                         <!--<img class="emptyGif" :src="emptyGif">--> |                         <!--<img class="emptyGif" :src="emptyGif">--> | ||||||
|                     </template> |                     </template> | ||||||
|                 </div> |                 </div> | ||||||
|                 <router-link class="recent-articles-more" :to="'/article/wscnlist?uid='+uid"> |  | ||||||
|                     Show more |  | ||||||
|                 </router-link> |  | ||||||
|             </div> |             </div> | ||||||
|         </div> |         </div> | ||||||
|     </div> |     </div> | ||||||
|  | @ -71,23 +68,37 @@ | ||||||
|     import PanThumb from 'components/PanThumb'; |     import PanThumb from 'components/PanThumb'; | ||||||
|     import MonthKpi from './monthKpi'; |     import MonthKpi from './monthKpi'; | ||||||
|     import ArticlesChart from './articlesChart'; |     import ArticlesChart from './articlesChart'; | ||||||
|     // import { getStatistics } from 'api/article'; |     import { getList } from 'api/article'; | ||||||
| 
 |  | ||||||
|     import emptyGif from 'assets/compbig.gif'; |     import emptyGif from 'assets/compbig.gif'; | ||||||
|  |     import countTo from 'vue-count-to'; | ||||||
|     export default { |     export default { | ||||||
|       name: 'dashboard-editor', |       name: 'dashboard-editor', | ||||||
|       components: { PanThumb, MonthKpi, ArticlesChart }, |       components: { PanThumb, MonthKpi, ArticlesChart, countTo }, | ||||||
|       data() { |       data() { | ||||||
|         return { |         return { | ||||||
|           chart: null, |           chart: null, | ||||||
|           statisticsData: { |           statisticsData: { | ||||||
|             article_count: undefined, |             article_count: 1024, | ||||||
|             comment_count: undefined, |             comment_count: 102400, | ||||||
|             latest_article: [], |             latest_article: [], | ||||||
|             month_article_count: undefined, |             month_article_count: 28, | ||||||
|             pageviews_count: undefined, |             pageviews_count: 1024, | ||||||
|             week_article: [] |             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 |           emptyGif | ||||||
|         } |         } | ||||||
|       }, |       }, | ||||||
|  | @ -104,15 +115,15 @@ | ||||||
|           'roles' |           'roles' | ||||||
|         ]), |         ]), | ||||||
|         recentArticles() { |         recentArticles() { | ||||||
|           return this.statisticsData.latest_article.slice(0, 7) |           return this.list.slice(0, 7) | ||||||
|         } |         } | ||||||
|       }, |       }, | ||||||
|       methods: { |       methods: { | ||||||
|         fetchData() { |         fetchData() { | ||||||
|         //   getStatistics().then(response => { |           getList(this.listQuery).then(response => { | ||||||
|         //     this.statisticsData = response.data; |             console.log(response.data) | ||||||
|         //     this.statisticsData.week_article = this.statisticsData.week_article.slice().reverse(); |             this.list = response.data; | ||||||
|         //   }) |           }) | ||||||
|         } |         } | ||||||
|       }, |       }, | ||||||
|       filters: { |       filters: { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 Pan
						Pan