forked from AkkomaGang/admin-fe
add dashboard
This commit is contained in:
parent
33e384ee95
commit
a3a331bd15
9 changed files with 67 additions and 59 deletions
|
@ -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: '折线图' },
|
||||||
|
|
5
src/views/charts/index.vue
Normal file
5
src/views/charts/index.vue
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="components-container" >
|
||||||
|
介绍
|
||||||
|
</div>
|
||||||
|
</template>
|
5
src/views/components/index.vue
Normal file
5
src/views/components/index.vue
Normal file
|
@ -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 a new issue