mirror of https://github.com/halo-dev/halo-admin
Perfect count to function
johnniang
parent
3edf1af540
commit
4cdf634045
|
|
@ -1,58 +1,114 @@
|
||||||
<template>
|
<template>
|
||||||
<page-view>
|
<page-view>
|
||||||
<a-row :gutter="12">
|
<a-row :gutter="12">
|
||||||
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="6"
|
||||||
<analysis-card :loading="countsLoading" title="文章" :number="countsData.postCount">
|
:lg="6"
|
||||||
<router-link :to="{ name:'PostList' }" slot="action">
|
:md="12"
|
||||||
<a-icon type="link"/>
|
:sm="12"
|
||||||
|
: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 :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="6"
|
||||||
<analysis-card :loading="countsLoading" title="评论" :number="countsData.commentCount">
|
:lg="6"
|
||||||
<router-link :to="{ name:'Comments' }" slot="action">
|
:md="12"
|
||||||
<a-icon type="link"/>
|
:sm="12"
|
||||||
|
: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 :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="6"
|
||||||
|
:lg="6"
|
||||||
|
:md="12"
|
||||||
|
:sm="12"
|
||||||
|
:xs="12"
|
||||||
|
:style="{ marginBottom: '12px' }"
|
||||||
|
>
|
||||||
<!-- <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
|
<!-- <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
|
||||||
<a-tooltip slot="action">
|
<a-tooltip slot="action">
|
||||||
<template slot="title">文章总访问共 {{ countsData.visitCount }} 次</template>-->
|
<template slot="title">文章总访问共 {{ countsData.visitCount }} 次</template>-->
|
||||||
<analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
|
<analysis-card
|
||||||
|
:loading="countsLoading"
|
||||||
|
title="总访问"
|
||||||
|
:number="countsData.visitCount"
|
||||||
|
>
|
||||||
<a-tooltip slot="action">
|
<a-tooltip slot="action">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
文章总访问共
|
文章总访问共
|
||||||
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>次
|
<countTo
|
||||||
|
:startVal="0"
|
||||||
|
:endVal="countsData.visitCount"
|
||||||
|
:duration="3000"
|
||||||
|
></countTo>次
|
||||||
</template>
|
</template>
|
||||||
<!-- <countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo> -->
|
<!-- <countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo> -->
|
||||||
<!-- <template>
|
<!-- <template>
|
||||||
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>
|
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>
|
||||||
</template>-->
|
</template>-->
|
||||||
<a href="javascript:void(0);">
|
<a href="javascript:void(0);">
|
||||||
<a-icon type="info-circle-o"/>
|
<a-icon type="info-circle-o" />
|
||||||
</a>
|
</a>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</analysis-card>
|
</analysis-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="6"
|
||||||
<analysis-card :loading="countsLoading" title="建立天数" :number="countsData.establishDays">
|
:lg="6"
|
||||||
|
: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">博客建立于 {{ countsData.birthday | moment }}</template>
|
<template slot="title">博客建立于 {{ countsData.birthday | moment }}</template>
|
||||||
<a href="javascript:void(0);">
|
<a href="javascript:void(0);">
|
||||||
<a-icon type="info-circle-o"/>
|
<a-icon type="info-circle-o" />
|
||||||
</a>
|
</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 :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="8"
|
||||||
|
:lg="8"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
:style="{ marginBottom: '12px' }"
|
||||||
|
>
|
||||||
<a-card
|
<a-card
|
||||||
:loading="activityLoading"
|
:loading="activityLoading"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
|
|
@ -61,9 +117,16 @@
|
||||||
>
|
>
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<a-tabs type="card">
|
<a-tabs type="card">
|
||||||
<a-tab-pane key="1" tab="最近文章">
|
<a-tab-pane
|
||||||
|
key="1"
|
||||||
|
tab="最近文章"
|
||||||
|
>
|
||||||
<a-list :dataSource="postData">
|
<a-list :dataSource="postData">
|
||||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
<a-list-item
|
||||||
|
slot="renderItem"
|
||||||
|
slot-scope="item, index"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<a-list-item-meta>
|
<a-list-item-meta>
|
||||||
<a
|
<a
|
||||||
slot="title"
|
slot="title"
|
||||||
|
|
@ -75,13 +138,22 @@
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</a-list>
|
</a-list>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="最近评论">
|
<a-tab-pane
|
||||||
|
key="2"
|
||||||
|
tab="最近评论"
|
||||||
|
>
|
||||||
<div class="custom-tab-wrapper">
|
<div class="custom-tab-wrapper">
|
||||||
<a-tabs>
|
<a-tabs>
|
||||||
<a-tab-pane tab="文章" key="1">
|
<a-tab-pane
|
||||||
|
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 tab="页面" key="2">
|
<a-tab-pane
|
||||||
|
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
|
||||||
|
|
@ -97,13 +169,26 @@
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="8"
|
||||||
<a-card :bordered="false" :loading="writeLoading" :bodyStyle="{ padding: '16px' }">
|
:lg="8"
|
||||||
|
: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" title="内容将保存到页面/所有页面/日志页面">
|
<a-tooltip
|
||||||
<a-icon type="info-circle-o"/>
|
slot="action"
|
||||||
|
title="内容将保存到页面/所有页面/日志页面"
|
||||||
|
>
|
||||||
|
<a-icon type="info-circle-o" />
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-form layout="vertical">
|
<a-form layout="vertical">
|
||||||
|
|
@ -116,24 +201,47 @@
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" @click="handleCreateJournalClick">保存</a-button>
|
<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 :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
<a-col
|
||||||
:style="{ marginBottom: '12px' }">
|
:xl="8"
|
||||||
<a-card :loading="logLoading" :bordered="false" :bodyStyle="{ padding: '16px' }">
|
:lg="8"
|
||||||
|
: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" title="更多">
|
<a-tooltip
|
||||||
<a href="javascript:void(0);" @click="handleShowLogDrawer">
|
slot="action"
|
||||||
<a-icon type="ellipsis"/>
|
title="更多"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:void(0);"
|
||||||
|
@click="handleShowLogDrawer"
|
||||||
|
>
|
||||||
|
<a-icon type="ellipsis" />
|
||||||
</a>
|
</a>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-list :dataSource="formattedLogDatas">
|
<a-list :dataSource="formattedLogDatas">
|
||||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
<a-list-item
|
||||||
|
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>
|
||||||
|
|
@ -152,10 +260,17 @@
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
@close="()=>this.logDrawerVisiable = false"
|
@close="()=>this.logDrawerVisiable = false"
|
||||||
>
|
>
|
||||||
<a-row type="flex" align="middle">
|
<a-row
|
||||||
|
type="flex"
|
||||||
|
align="middle"
|
||||||
|
>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<a-list :dataSource="formattedLogsDatas">
|
<a-list :dataSource="formattedLogsDatas">
|
||||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
<a-list-item
|
||||||
|
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>
|
||||||
|
|
@ -176,9 +291,14 @@
|
||||||
</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 title="你确定要清空所有操作日志？" okText="确定" @confirm="handleClearLogs" cancelText="取消">
|
<a-popconfirm
|
||||||
|
title="你确定要清空所有操作日志？"
|
||||||
|
okText="确定"
|
||||||
|
@confirm="handleClearLogs"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
<a-button type="danger">清空操作日志</a-button>
|
<a-button type="danger">清空操作日志</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -227,7 +347,8 @@ export default {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 50,
|
size: 50,
|
||||||
sort: null
|
sort: null
|
||||||
}
|
},
|
||||||
|
interval: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -235,6 +356,10 @@ export default {
|
||||||
this.listLatestPosts()
|
this.listLatestPosts()
|
||||||
this.listLatestLogs()
|
this.listLatestLogs()
|
||||||
this.loadOptions()
|
this.loadOptions()
|
||||||
|
|
||||||
|
// this.interval = setInterval(() => {
|
||||||
|
// this.getCounts()
|
||||||
|
// }, 5000)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
formattedPostData() {
|
formattedPostData() {
|
||||||
|
|
@ -257,6 +382,21 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
beforeRouteEnter(to, from, next) {
|
||||||
|
next(vm => {
|
||||||
|
vm.interval = setInterval(() => {
|
||||||
|
vm.getCounts()
|
||||||
|
}, 5000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeRouteLeave(to, from, next) {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
this.interval = null
|
||||||
|
this.$log.debug('Cleared interval')
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadOptions() {
|
loadOptions() {
|
||||||
optionApi.listAll(this.keys).then(response => {
|
optionApi.listAll(this.keys).then(response => {
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,9 @@
|
||||||
<slot name="number">
|
<slot name="number">
|
||||||
<!-- <span>{{ typeof number === 'function' && number() || number }}</span> -->
|
<!-- <span>{{ typeof number === 'function' && number() || number }}</span> -->
|
||||||
<countTo
|
<countTo
|
||||||
:startVal="0"
|
:startVal="startNumber"
|
||||||
:endVal="typeof number === 'function' && number() || number"
|
:endVal="typeof number === 'function' && number() || number"
|
||||||
:duration="4000"
|
:duration="3000"
|
||||||
:autoplay="true"
|
:autoplay="true"
|
||||||
></countTo>
|
></countTo>
|
||||||
</slot>
|
</slot>
|
||||||
|
|
@ -38,17 +38,29 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
|
required: false,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
number: {
|
number: {
|
||||||
type: [Function, Number, String],
|
type: Number,
|
||||||
required: false,
|
required: false,
|
||||||
default: null
|
default: 0
|
||||||
},
|
},
|
||||||
loading: {
|
loading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
startNumber: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
number: function(newValue, oldValue) {
|
||||||
|
this.startNumber = oldValue
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue