feats

src/api/stat.js

@@ -2,4 +2,13 @@ import request from '@/utils/request'
 
 export const getStatTotal = () => request({
   url: '/admin/stat-total'
-})
+})
+
+
+export const getStatPV = (params) => request({
+  url: '/admin/pv', params
+})
+
+export const getStatUV = (params) => request({
+  url: '/admin/uv', params
+})

src/components/ECharts/Line.vue

@@ -1,10 +1,13 @@
 <template>
-  <echarts :option="option" :loading="loading"></echarts>
+  <echarts :option="opt" :loading="loading"></echarts>
 </template>
 
 <script>
 export default {
   name: 'LineChart',
+  components: {
+    echarts: () => import('./index.vue')
+  },
   props: {
     option: {
       type: Object,
@@ -25,14 +28,19 @@ export default {
         yAxis: {
           type: 'value'
         },
+        tooltip: {
+          trigger: 'axis'
+        },
+        dataset: {
+          dimensions: ['key', 'value'],
+          source: this.value,
+        },
         series: [
           {
             type: 'line',
             smooth: true
           }
         ],
-        dimensions: ['key', 'value'],
-        source: this.value,
         ...this.option,
       }
     }

src/components/ECharts/index.vue

@@ -54,6 +54,7 @@ export default {
       handler(v) {
         if (this.echartsRef) {
           this.echartsRef.setOption(v)
+          console.log('-------------', v)
         }
       },
       immediate: true
@@ -70,7 +71,7 @@ export default {
   },
   mounted() {
     this.echartsRef = echarts.init(this.$el)
-    this.echartsRef.setOption(v)
+    this.echartsRef.setOption(this.option)
   }
 }
 </script>
@@ -79,5 +80,6 @@ export default {
 .echart {
   width: 100%;
   height: 100%;
+  min-height: 400px;
 }
 </style>

src/views/dashboard/components/Statistic.vue

@@ -9,7 +9,7 @@
 export default {
   name: 'Statistic',
   props: {
-    title: String,
+    title: [String, Number],
     value: String,
   }
 }

src/views/dashboard/index.vue

@@ -2,7 +2,7 @@
   <div class="dashboard-container">
     <div class="dashboard-text">欢迎使用{{ name }}</div>
 
-    <el-row type="flex" class="row-bg" justify="space-between">
+    <el-row class="sec" type="flex" justify="space-between">
       <el-col :span="6">
         <statistic title="报名总数" :value="total.reg" />
       </el-col>
@@ -13,34 +13,98 @@
         <statistic title="UV 总数" :value="total.uv" />
       </el-col>
     </el-row>
+
+    <el-row class="sec" type="flex" justify="space-between" gutter="24">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">
+            <span>PV访问</span>
+          </div>
+          <line-chart :value="pv" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">
+            <span>UV访问</span>
+          </div>
+          <line-chart :value="uv" />
+        </el-card>
+      </el-col>
+    </el-row>
+
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { getStatTotal } from '@/api/stat'
+import { getStatTotal, getStatPV, getStatUV } from '@/api/stat'
+
+const formateNum = n => n > 9 ? `${n}` : `0${n}`
 
 export default {
   name: 'Dashboard',
   components: {
-    Statistic: () => import('./components/Statistic.vue')
+    Statistic: () => import('./components/Statistic.vue'),
+    LineChart: () => import('@/components/ECharts/Line.vue'),
   },
   computed: {
-    ...mapGetters(['name'])
+    ...mapGetters(['name']),
+    lineParam() {
+      // 为了包含今天, 需要少计算1天
+      const mills = (this.days - 1) * 24 * 60 * 60 * 1000
+      const start = new Date(this.today - mills)
+      const year = start.getFullYear()
+      const mon = start.getMonth() + 1
+      const dt = start.getDate()
+
+      return {
+        startDate: `${year}-${formateNum(mon)}-${formateNum(dt)}`,
+        days: this.days,
+      }
+    }
   },
   data() {
     return {
-      total: {}
+      total: {},
+      today: new Date(),
+      days: 15, // 默认统计 15 天的
+      pv: [],
+      uv: [],
+      loading: {
+        pv: false,
+        uv: false,
+      }
     }
   },
   mounted() {
     this.statTotal()
+    this.statPV()
+    this.statUV()
   },
   methods: {
     statTotal() {
       getStatTotal().then(res => {
         this.total = res
       })
+    },
+    statPV() {
+      this.loading.pv = true
+      getStatPV(this.lineParam).then(res => {
+        this.pv = res
+        this.loading.pv = false
+      }).catch(() => {
+        this.loading.pv = false
+      })
+    },
+    statUV() {
+      this.loading.uv = true
+      getStatUV(this.lineParam).then(res => {
+        this.uv = res
+        this.loading.uv = false
+      }).catch(() => {
+        this.loading.uv = false
+      })
     }
   }
 }
@@ -56,4 +120,8 @@ export default {
     line-height: 46px;
   }
 }
+
+.sec {
+  margin: 24px 0;
+}
 </style>