feats

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npm.taobao.org

package.json

@@ -19,6 +19,7 @@
     "axios-retry": "^3.2.4",
     "core-js": "^2.6.12",
     "dayjs": "^1.10.7",
+    "echarts": "^5.3.0",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",

src/api/stat.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+
+export const getStatTotal = () => request({
+  url: '/admin/stat-total'
+})

src/components/ECharts/Line.vue

@@ -0,0 +1,45 @@
+<template>
+  <echarts :option="option" :loading="loading"></echarts>
+</template>
+
+<script>
+export default {
+  name: 'LineChart',
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    loading: Boolean
+  },
+  computed: {
+    opt() {
+      return {
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'line',
+            smooth: true
+          }
+        ],
+        dimensions: ['key', 'value'],
+        source: this.value,
+        ...this.option,
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  }
+}
+</script>

src/components/ECharts/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="echart"></div>
+</template>
+
+<script>
+// 按需导入模块
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入图表，图表后缀都为 Chart
+import { LineChart } from 'echarts/charts';
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent
+} from 'echarts/components';
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+
+export default {
+  name: 'ECharts',
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    loading: Boolean
+  },
+  data() {
+    return {
+      echartsRef: undefined,
+    }
+  },
+  watch: {
+    option: {
+      handler(v) {
+        if (this.echartsRef) {
+          this.echartsRef.setOption(v)
+        }
+      },
+      immediate: true
+    },
+    loading(nw) {
+      if (!this.echartsRef) return;
+
+      if (nw) {
+        this.echartsRef.showLoading()
+      } else {
+        this.echartsRef.hideLoading()
+      }
+    }
+  },
+  mounted() {
+    this.echartsRef = echarts.init(this.$el)
+    this.echartsRef.setOption(v)
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/utils/request.js

@@ -54,7 +54,7 @@ service.interceptors.response.use(
       })
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
-      return res
+      return res.data
     }
   },
   error => {

src/views/dashboard/components/Statistic.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-card class="stat-card">
+    <div class="stat-card_title">{{title}}</div>
+    <div class="stat-card_content">{{value}}</div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Statistic',
+  props: {
+    title: String,
+    value: String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.stat-card {
+  width: 100%;
+
+  &_title {
+    margin-bottom: 4px;
+    color: #00000073;
+    font-size: 14px;
+  }
+
+  &_content {
+    font-size: 24px;
+    color: #000;
+  }
+}
+</style>

src/views/dashboard/index.vue

@@ -1,16 +1,47 @@
 <template>
   <div class="dashboard-container">
     <div class="dashboard-text">欢迎使用{{ name }}</div>
+
+    <el-row type="flex" class="row-bg" justify="space-between">
+      <el-col :span="6">
+        <statistic title="报名总数" :value="total.reg" />
+      </el-col>
+      <el-col :span="6">
+        <statistic title="PV 总数" :value="total.pv" />
+      </el-col>
+      <el-col :span="6">
+        <statistic title="UV 总数" :value="total.uv" />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { getStatTotal } from '@/api/stat'
 
 export default {
   name: 'Dashboard',
+  components: {
+    Statistic: () => import('./components/Statistic.vue')
+  },
   computed: {
     ...mapGetters(['name'])
+  },
+  data() {
+    return {
+      total: {}
+    }
+  },
+  mounted() {
+    this.statTotal()
+  },
+  methods: {
+    statTotal() {
+      getStatTotal().then(res => {
+        this.total = res
+      })
+    }
   }
 }
 </script>

yarn.lock

@@ -4176,6 +4176,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.3.0.tgz#39342fcf0f763413fecd9d2afd1c415163de694d"
+  integrity sha512-zENufmwFE6WjM+24tW3xQq4ICqQtI0CGj4bDVDNd3BK3LtaA/5wBp+64ykIyKy3QElz0cieKqSYP4FX9Lv9MwQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.3.0"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.npmmirror.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
@@ -10811,6 +10819,11 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -11760,3 +11773,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.0.tgz#297c05dc2521362816c4ddced10a1e306646bbc8"
+  integrity sha512-Ln2QB5uqI1ftNYMtCRxd+XDq6MOttLgam2tmhKAVA+j0ko47UT+VNlDvKTkqe4K2sJhBvB0EhYNLebqlCTjatQ==
+  dependencies:
+    tslib "2.3.0"