From 4cdf634045bffa962c769cb25182607bda0008f8 Mon Sep 17 00:00:00 2001
From: johnniang <johnniang@riseup.net>
Date: Thu, 6 Jun 2019 13:15:33 +0800
Subject: [PATCH] Perfect count to function

---
 src/views/dashboard/Dashboard.vue             | 228 ++++++++++++++----
 .../dashboard/components/AnalysisCard.vue     |  20 +-
 2 files changed, 200 insertions(+), 48 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index af32dcb3..8e3016ed 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,58 +1,114 @@
 <template>
   <page-view>
     <a-row :gutter="12">
-      <a-col :xl="6" :lg="6" :md="12" :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"/>
+      <a-col
+        :xl="6"
+        :lg="6"
+        :md="12"
+        :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>
         </analysis-card>
       </a-col>
-      <a-col :xl="6" :lg="6" :md="12" :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"/>
+      <a-col
+        :xl="6"
+        :lg="6"
+        :md="12"
+        :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>
         </analysis-card>
       </a-col>
-      <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
-:style="{ marginBottom: '12px' }">
+      <a-col
+        :xl="6"
+        :lg="6"
+        :md="12"
+        :sm="12"
+        :xs="12"
+        :style="{ marginBottom: '12px' }"
+      >
         <!-- <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
           <a-tooltip slot="action">
         <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">
             <template slot="title">
               文章总访问共
-              <countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>次
+              <countTo
+                :startVal="0"
+                :endVal="countsData.visitCount"
+                :duration="3000"
+              ></countTo>次
             </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-icon type="info-circle-o"/>
+              <a-icon type="info-circle-o" />
             </a>
           </a-tooltip>
         </analysis-card>
       </a-col>
-      <a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
-:style="{ marginBottom: '12px' }">
-        <analysis-card :loading="countsLoading" title="建立天数" :number="countsData.establishDays">
+      <a-col
+        :xl="6"
+        :lg="6"
+        :md="12"
+        :sm="12"
+        :xs="12"
+        :style="{ marginBottom: '12px' }"
+      >
+        <analysis-card
+          :loading="countsLoading"
+          title="建立天数"
+          :number="countsData.establishDays"
+        >
           <a-tooltip slot="action">
             <template slot="title">博客建立于 {{ countsData.birthday | moment }}</template>
             <a href="javascript:void(0);">
-              <a-icon type="info-circle-o"/>
+              <a-icon type="info-circle-o" />
             </a>
           </a-tooltip>
         </analysis-card>
       </a-col>
     </a-row>
     <a-row :gutter="12">
-      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
-:style="{ marginBottom: '12px' }">
+      <a-col
+        :xl="8"
+        :lg="8"
+        :md="12"
+        :sm="24"
+        :xs="24"
+        :style="{ marginBottom: '12px' }"
+      >
         <a-card
           :loading="activityLoading"
           :bordered="false"
@@ -61,9 +117,16 @@
         >
           <div class="card-container">
             <a-tabs type="card">
-              <a-tab-pane key="1" tab="最近文章">
+              <a-tab-pane
+                key="1"
+                tab="最近文章"
+              >
                 <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
                         slot="title"
@@ -75,13 +138,22 @@
                   </a-list-item>
                 </a-list>
               </a-tab-pane>
-              <a-tab-pane key="2" tab="最近评论">
+              <a-tab-pane
+                key="2"
+                tab="最近评论"
+              >
                 <div class="custom-tab-wrapper">
                   <a-tabs>
-                    <a-tab-pane tab="文章" key="1">
+                    <a-tab-pane
+                      tab="文章"
+                      key="1"
+                    >
                       <recent-comment-tab type="posts"></recent-comment-tab>
                     </a-tab-pane>
-                    <a-tab-pane tab="页面" key="2">
+                    <a-tab-pane
+                      tab="页面"
+                      key="2"
+                    >
                       <recent-comment-tab type="sheets"></recent-comment-tab>
                     </a-tab-pane>
                     <!-- <a-tab-pane
@@ -97,13 +169,26 @@
           </div>
         </a-card>
       </a-col>
-      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
-:style="{ marginBottom: '12px' }">
-        <a-card :bordered="false" :loading="writeLoading" :bodyStyle="{ padding: '16px' }">
+      <a-col
+        :xl="8"
+        :lg="8"
+        :md="12"
+        :sm="24"
+        :xs="24"
+        :style="{ marginBottom: '12px' }"
+      >
+        <a-card
+          :bordered="false"
+          :loading="writeLoading"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <template slot="title">
             速记
-            <a-tooltip slot="action" title="内容将保存到页面/所有页面/日志页面">
-              <a-icon type="info-circle-o"/>
+            <a-tooltip
+              slot="action"
+              title="内容将保存到页面/所有页面/日志页面"
+            >
+              <a-icon type="info-circle-o" />
             </a-tooltip>
           </template>
           <a-form layout="vertical">
@@ -116,24 +201,47 @@
               />
             </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>
         </a-card>
       </a-col>
-      <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
-:style="{ marginBottom: '12px' }">
-        <a-card :loading="logLoading" :bordered="false" :bodyStyle="{ padding: '16px' }">
+      <a-col
+        :xl="8"
+        :lg="8"
+        :md="12"
+        :sm="24"
+        :xs="24"
+        :style="{ marginBottom: '12px' }"
+      >
+        <a-card
+          :loading="logLoading"
+          :bordered="false"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <template slot="title">
             操作记录
-            <a-tooltip slot="action" title="更多">
-              <a href="javascript:void(0);" @click="handleShowLogDrawer">
-                <a-icon type="ellipsis"/>
+            <a-tooltip
+              slot="action"
+              title="更多"
+            >
+              <a
+                href="javascript:void(0);"
+                @click="handleShowLogDrawer"
+              >
+                <a-icon type="ellipsis" />
               </a>
             </a-tooltip>
           </template>
           <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">
                 <span slot="title">{{ item.type }}</span>
               </a-list-item-meta>
@@ -152,10 +260,17 @@
       destroyOnClose
       @close="()=>this.logDrawerVisiable = false"
     >
-      <a-row type="flex" align="middle">
+      <a-row
+        type="flex"
+        align="middle"
+      >
         <a-col :span="24">
           <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">
                 <span slot="title">{{ item.type }}</span>
               </a-list-item-meta>
@@ -176,9 +291,14 @@
           </a-list>
         </a-col>
       </a-row>
-      <a-divider class="divider-transparent"/>
+      <a-divider class="divider-transparent" />
       <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-popconfirm>
       </div>
@@ -227,7 +347,8 @@ export default {
         page: 1,
         size: 50,
         sort: null
-      }
+      },
+      interval: null
     }
   },
   created() {
@@ -235,6 +356,10 @@ export default {
     this.listLatestPosts()
     this.listLatestLogs()
     this.loadOptions()
+
+    // this.interval = setInterval(() => {
+    //   this.getCounts()
+    // }, 5000)
   },
   computed: {
     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: {
     loadOptions() {
       optionApi.listAll(this.keys).then(response => {
diff --git a/src/views/dashboard/components/AnalysisCard.vue b/src/views/dashboard/components/AnalysisCard.vue
index 847eee2a..0ff834c8 100644
--- a/src/views/dashboard/components/AnalysisCard.vue
+++ b/src/views/dashboard/components/AnalysisCard.vue
@@ -17,9 +17,9 @@
         <slot name="number">
           <!-- <span>{{ typeof number === 'function' && number() || number }}</span> -->
           <countTo
-            :startVal="0"
+            :startVal="startNumber"
             :endVal="typeof number === 'function' && number() || number"
-            :duration="4000"
+            :duration="3000"
             :autoplay="true"
           ></countTo>
         </slot>
@@ -38,17 +38,29 @@ export default {
   props: {
     title: {
       type: String,
+      required: false,
       default: ''
     },
     number: {
-      type: [Function, Number, String],
+      type: Number,
       required: false,
-      default: null
+      default: 0
     },
     loading: {
       type: Boolean,
+      required: false,
       default: false
     }
+  },
+  data() {
+    return {
+      startNumber: 0
+    }
+  },
+  watch: {
+    number: function(newValue, oldValue) {
+      this.startNumber = oldValue
+    }
   }
 }
 </script>