Dashboard added "countdown" effect

pull/3445/head
853029827@qq.com 2019-06-06 11:37:39 +08:00
parent c52c7c731d
commit 8f39a318cb
3 changed files with 76 additions and 170 deletions

View File

@ -25,7 +25,8 @@
"vue-ls": "^3.2.1", "vue-ls": "^3.2.1",
"vue-router": "^3.0.6", "vue-router": "^3.0.6",
"vuejs-logger": "^1.5.3", "vuejs-logger": "^1.5.3",
"vuex": "^3.1.1" "vuex": "^3.1.1",
"vue-count-to": "^1.0.13"
}, },
"devDependencies": { "devDependencies": {
"@babel/polyfill": "^7.4.4", "@babel/polyfill": "^7.4.4",

View File

@ -1,102 +1,58 @@
<template> <template>
<page-view> <page-view>
<a-row :gutter="12"> <a-row :gutter="12">
<a-col <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
:xl="6" :style="{ marginBottom: '12px' }">
:lg="6" <analysis-card :loading="countsLoading" title="文章" :number="countsData.postCount">
:md="12" <router-link :to="{ name:'PostList' }" slot="action">
:sm="12" <a-icon type="link"/>
:xs="12"
:style="{ marginBottom: '12px' }"
>
<analysis-card
:loading="countsLoading"
title="文章"
:number="countsData.postCount"
>
<router-link
:to="{ name:'PostList' }"
slot="action"
>
<a-icon type="link" />
</router-link> </router-link>
</analysis-card> </analysis-card>
</a-col> </a-col>
<a-col <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
:xl="6" :style="{ marginBottom: '12px' }">
:lg="6" <analysis-card :loading="countsLoading" title="评论" :number="countsData.commentCount">
:md="12" <router-link :to="{ name:'Comments' }" slot="action">
:sm="12" <a-icon type="link"/>
:xs="12"
:style="{ marginBottom: '12px' }"
>
<analysis-card
:loading="countsLoading"
title="评论"
:number="countsData.commentCount"
>
<router-link
:to="{ name:'Comments' }"
slot="action"
>
<a-icon type="link" />
</router-link> </router-link>
</analysis-card> </analysis-card>
</a-col> </a-col>
<a-col <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
:xl="6" :style="{ marginBottom: '12px' }">
:lg="6" <!-- <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
:md="12" <a-tooltip slot="action">
:sm="12" <template slot="title">文章总访问共 {{ countsData.visitCount }} </template>-->
:xs="12" <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
:style="{ marginBottom: '12px' }"
>
<analysis-card
:loading="countsLoading"
title="总访问"
:number="countsData.visitCount"
>
<a-tooltip slot="action"> <a-tooltip slot="action">
<template slot="title"> <template slot="title">
文章总访问共 {{ countsData.visitCount }} 文章总访问共
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>
</template> </template>
<!-- <countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo> -->
<!-- <template>
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>
</template>-->
<a href="javascript:void(0);"> <a href="javascript:void(0);">
<a-icon type="info-circle-o" /></a> <a-icon type="info-circle-o"/>
</a>
</a-tooltip> </a-tooltip>
</analysis-card> </analysis-card>
</a-col> </a-col>
<a-col <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
:xl="6" :style="{ marginBottom: '12px' }">
:lg="6" <analysis-card :loading="countsLoading" title="建立天数" :number="countsData.establishDays">
:md="12"
:sm="12"
:xs="12"
:style="{ marginBottom: '12px' }"
>
<analysis-card
:loading="countsLoading"
title="建立天数"
:number="countsData.establishDays"
>
<a-tooltip slot="action"> <a-tooltip slot="action">
<template slot="title"> <template slot="title">博客建立于 {{ countsData.birthday | moment }}</template>
博客建立于 {{ countsData.birthday | moment }}
</template>
<a href="javascript:void(0);"> <a href="javascript:void(0);">
<a-icon type="info-circle-o" /></a> <a-icon type="info-circle-o"/>
</a>
</a-tooltip> </a-tooltip>
</analysis-card> </analysis-card>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="12"> <a-row :gutter="12">
<a-col <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
:xl="8" :style="{ marginBottom: '12px' }">
:lg="8"
:md="12"
:sm="24"
:xs="24"
:style="{ marginBottom: '12px' }"
>
<a-card <a-card
:loading="activityLoading" :loading="activityLoading"
:bordered="false" :bordered="false"
@ -105,16 +61,9 @@
> >
<div class="card-container"> <div class="card-container">
<a-tabs type="card"> <a-tabs type="card">
<a-tab-pane <a-tab-pane key="1" tab="最近文章">
key="1"
tab="最近文章"
>
<a-list :dataSource="postData"> <a-list :dataSource="postData">
<a-list-item <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
slot="renderItem"
slot-scope="item, index"
:key="index"
>
<a-list-item-meta> <a-list-item-meta>
<a <a
slot="title" slot="title"
@ -126,22 +75,13 @@
</a-list-item> </a-list-item>
</a-list> </a-list>
</a-tab-pane> </a-tab-pane>
<a-tab-pane <a-tab-pane key="2" tab="最近评论">
key="2"
tab="最近评论"
>
<div class="custom-tab-wrapper"> <div class="custom-tab-wrapper">
<a-tabs> <a-tabs>
<a-tab-pane <a-tab-pane tab="文章" key="1">
tab="文章"
key="1"
>
<recent-comment-tab type="posts"></recent-comment-tab> <recent-comment-tab type="posts"></recent-comment-tab>
</a-tab-pane> </a-tab-pane>
<a-tab-pane <a-tab-pane tab="页面" key="2">
tab="页面"
key="2"
>
<recent-comment-tab type="sheets"></recent-comment-tab> <recent-comment-tab type="sheets"></recent-comment-tab>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane <!-- <a-tab-pane
@ -149,7 +89,7 @@
key="3" key="3"
> >
<recent-comment-tab type="journals"></recent-comment-tab> <recent-comment-tab type="journals"></recent-comment-tab>
</a-tab-pane> --> </a-tab-pane>-->
</a-tabs> </a-tabs>
</div> </div>
</a-tab-pane> </a-tab-pane>
@ -157,25 +97,13 @@
</div> </div>
</a-card> </a-card>
</a-col> </a-col>
<a-col <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
:xl="8" :style="{ marginBottom: '12px' }">
:lg="8" <a-card :bordered="false" :loading="writeLoading" :bodyStyle="{ padding: '16px' }">
:md="12"
:sm="24"
:xs="24"
:style="{ marginBottom: '12px' }"
>
<a-card
:bordered="false"
:loading="writeLoading"
:bodyStyle="{ padding: '16px' }"
>
<template slot="title"> <template slot="title">
速记 <a-tooltip 速记
slot="action" <a-tooltip slot="action" title="内容将保存到页面/所有页面/日志页面">
title="内容将保存到页面/所有页面/日志页面" <a-icon type="info-circle-o"/>
>
<a-icon type="info-circle-o" />
</a-tooltip> </a-tooltip>
</template> </template>
<a-form layout="vertical"> <a-form layout="vertical">
@ -188,45 +116,24 @@
/> />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button type="primary" @click="handleCreateJournalClick"></a-button>
type="primary"
@click="handleCreateJournalClick"
>保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-card> </a-card>
</a-col> </a-col>
<a-col <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
:xl="8" :style="{ marginBottom: '12px' }">
:lg="8" <a-card :loading="logLoading" :bordered="false" :bodyStyle="{ padding: '16px' }">
:md="12"
:sm="24"
:xs="24"
:style="{ marginBottom: '12px' }"
>
<a-card
:loading="logLoading"
:bordered="false"
:bodyStyle="{ padding: '16px' }"
>
<template slot="title"> <template slot="title">
操作记录 <a-tooltip 操作记录
slot="action" <a-tooltip slot="action" title="更多">
title="更多" <a href="javascript:void(0);" @click="handleShowLogDrawer">
> <a-icon type="ellipsis"/>
<a </a>
href="javascript:void(0);"
@click="handleShowLogDrawer"
>
<a-icon type="ellipsis" /></a>
</a-tooltip> </a-tooltip>
</template> </template>
<a-list :dataSource="formattedLogDatas"> <a-list :dataSource="formattedLogDatas">
<a-list-item <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
slot="renderItem"
slot-scope="item, index"
:key="index"
>
<a-list-item-meta :description="item.createTime | timeAgo"> <a-list-item-meta :description="item.createTime | timeAgo">
<span slot="title">{{ item.type }}</span> <span slot="title">{{ item.type }}</span>
</a-list-item-meta> </a-list-item-meta>
@ -245,17 +152,10 @@
destroyOnClose destroyOnClose
@close="()=>this.logDrawerVisiable = false" @close="()=>this.logDrawerVisiable = false"
> >
<a-row <a-row type="flex" align="middle">
type="flex"
align="middle"
>
<a-col :span="24"> <a-col :span="24">
<a-list :dataSource="formattedLogsDatas"> <a-list :dataSource="formattedLogsDatas">
<a-list-item <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
slot="renderItem"
slot-scope="item, index"
:key="index"
>
<a-list-item-meta :description="item.createTime | timeAgo"> <a-list-item-meta :description="item.createTime | timeAgo">
<span slot="title">{{ item.type }}</span> <span slot="title">{{ item.type }}</span>
</a-list-item-meta> </a-list-item-meta>
@ -274,17 +174,11 @@
/> />
</div> </div>
</a-list> </a-list>
</a-col> </a-col>
</a-row> </a-row>
<a-divider class="divider-transparent" /> <a-divider class="divider-transparent"/>
<div class="bottom-control"> <div class="bottom-control">
<a-popconfirm <a-popconfirm title="你确定要清空所有操作日志?" okText="确定" @confirm="handleClearLogs" cancelText="取消">
title="你确定要清空所有操作日志?"
okText="确定"
@confirm="handleClearLogs"
cancelText="取消"
>
<a-button type="danger">清空操作日志</a-button> <a-button type="danger">清空操作日志</a-button>
</a-popconfirm> </a-popconfirm>
</div> </div>
@ -303,16 +197,19 @@ import postApi from '@/api/post'
import logApi from '@/api/log' import logApi from '@/api/log'
import adminApi from '@/api/admin' import adminApi from '@/api/admin'
import journalApi from '@/api/journal' import journalApi from '@/api/journal'
import countTo from 'vue-count-to'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
components: { components: {
PageView, PageView,
AnalysisCard, AnalysisCard,
RecentCommentTab RecentCommentTab,
countTo
}, },
data() { data() {
return { return {
startVal: 0,
logType: logApi.logType, logType: logApi.logType,
activityLoading: true, activityLoading: true,
writeLoading: true, writeLoading: true,

View File

@ -7,9 +7,7 @@
<div class="analysis-card-container"> <div class="analysis-card-container">
<div class="meta"> <div class="meta">
<span class="analysis-card-title"> <span class="analysis-card-title">
<slot name="title"> <slot name="title">{{ title }}</slot>
{{ title }}
</slot>
</span> </span>
<span class="analysis-card-action"> <span class="analysis-card-action">
<slot name="action"></slot> <slot name="action"></slot>
@ -17,7 +15,13 @@
</div> </div>
<div class="number"> <div class="number">
<slot name="number"> <slot name="number">
<span>{{ typeof number === 'function' && number() || number }}</span> <!-- <span>{{ typeof number === 'function' && number() || number }}</span> -->
<countTo
:startVal="0"
:endVal="typeof number === 'function' && number() || number"
:duration="4000"
:autoplay="true"
></countTo>
</slot> </slot>
</div> </div>
</div> </div>
@ -25,8 +29,12 @@
</template> </template>
<script> <script>
import countTo from 'vue-count-to'
export default { export default {
name: 'AnalysisCard', name: 'AnalysisCard',
components: {
countTo
},
props: { props: {
title: { title: {
type: String, type: String,