From 9faf6cbd909d8d93abca0ec5a78b821b91cf8e30 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Fri, 3 Apr 2020 17:48:28 +0800
Subject: [PATCH] dashboard

---
 test_client/package-lock.json                 |  18 +
 test_client/package.json                      |   2 +
 test_client/src/api/analyse.js                |   8 +
 test_client/src/router/index.js               |   7 +
 .../views/dashboard/components/BarChart.vue   | 102 ++++++
 .../views/dashboard/components/BoxCard.vue    | 118 +++++++
 .../views/dashboard/components/LineChart.vue  | 135 ++++++++
 .../views/dashboard/components/PanelGroup.vue | 200 +++++++++++
 .../views/dashboard/components/PieChart.vue   |  79 +++++
 .../dashboard/components/RaddarChart.vue      | 116 +++++++
 .../dashboard/components/TodoList/Todo.vue    |  81 +++++
 .../dashboard/components/TodoList/index.scss  | 320 ++++++++++++++++++
 .../dashboard/components/TodoList/index.vue   | 127 +++++++
 .../dashboard/components/TransactionTable.vue |  55 +++
 .../dashboard/components/mixins/resize.js     |  55 +++
 test_client/src/views/dashboard/index.vue     |  78 ++++-
 test_client/src/views/question/question.vue   |   5 +-
 .../src/views/question/questioncreate.vue     | 121 +++++++
 test_server/analyse/__init__.py               |   0
 test_server/analyse/admin.py                  |   3 +
 test_server/analyse/apps.py                   |   5 +
 test_server/analyse/migrations/__init__.py    |   0
 test_server/analyse/models.py                 |   3 +
 test_server/analyse/tests.py                  |   3 +
 test_server/analyse/urls.py                   |   9 +
 test_server/analyse/views.py                  |  21 ++
 test_server/crm/views.py                      |   6 +-
 test_server/question/views.py                 |   2 +-
 .../rbac/serializers/user_serializer.py       |   2 +-
 test_server/server/settings.py                |   1 +
 test_server/server/urls.py                    |   1 +
 31 files changed, 1660 insertions(+), 23 deletions(-)
 create mode 100644 test_client/src/api/analyse.js
 create mode 100644 test_client/src/views/dashboard/components/BarChart.vue
 create mode 100644 test_client/src/views/dashboard/components/BoxCard.vue
 create mode 100644 test_client/src/views/dashboard/components/LineChart.vue
 create mode 100644 test_client/src/views/dashboard/components/PanelGroup.vue
 create mode 100644 test_client/src/views/dashboard/components/PieChart.vue
 create mode 100644 test_client/src/views/dashboard/components/RaddarChart.vue
 create mode 100644 test_client/src/views/dashboard/components/TodoList/Todo.vue
 create mode 100644 test_client/src/views/dashboard/components/TodoList/index.scss
 create mode 100644 test_client/src/views/dashboard/components/TodoList/index.vue
 create mode 100644 test_client/src/views/dashboard/components/TransactionTable.vue
 create mode 100644 test_client/src/views/dashboard/components/mixins/resize.js
 create mode 100644 test_client/src/views/question/questioncreate.vue
 create mode 100644 test_server/analyse/__init__.py
 create mode 100644 test_server/analyse/admin.py
 create mode 100644 test_server/analyse/apps.py
 create mode 100644 test_server/analyse/migrations/__init__.py
 create mode 100644 test_server/analyse/models.py
 create mode 100644 test_server/analyse/tests.py
 create mode 100644 test_server/analyse/urls.py
 create mode 100644 test_server/analyse/views.py

diff --git a/test_client/package-lock.json b/test_client/package-lock.json
index 2970839..c843a54 100644
--- a/test_client/package-lock.json
+++ b/test_client/package-lock.json
@@ -4972,6 +4972,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz?cache=0&sync_timestamp=1584522755461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.7.0.tgz",
+      "integrity": "sha1-Wzh1pML5HjkpQl+rq56s5+QJiz8=",
+      "requires": {
+        "zrender": "4.3.0"
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",
@@ -15385,6 +15393,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",
+      "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
@@ -16285,6 +16298,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.0.tgz",
+      "integrity": "sha1-nwVhIbILuuREFNKHv2oRn/cEJmE="
     }
   }
 }
diff --git a/test_client/package.json b/test_client/package.json
index c26bf00..c47aa17 100644
--- a/test_client/package.json
+++ b/test_client/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "0.18.1",
+    "echarts": "^4.7.0",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",
     "js-cookie": "2.2.0",
@@ -23,6 +24,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "xlsx": "^0.15.5"
diff --git a/test_client/src/api/analyse.js b/test_client/src/api/analyse.js
new file mode 100644
index 0000000..b452ad7
--- /dev/null
+++ b/test_client/src/api/analyse.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getBasicCount() {
+  return request({
+    url: '/analyse/basic/',
+    method: 'get',
+  })
+}
diff --git a/test_client/src/router/index.js b/test_client/src/router/index.js
index b5297fa..16dc0af 100644
--- a/test_client/src/router/index.js
+++ b/test_client/src/router/index.js
@@ -109,6 +109,13 @@ export const asyncRoutes = [
         component: () => import('@/views/question/question.vue'),
         meta: { title: '题目列表', icon: '', perms: ['question_manage'] }
       },
+      {
+        path: 'question/create',
+        name: 'CreateQuestion',
+        component: () => import('@/views/question/questioncreate.vue'),
+        meta: { title: '新建题目', noCache: true, icon: '', perms: ['question_create']},
+        hidden: true
+      }
     ]
   },
   {
diff --git a/test_client/src/views/dashboard/components/BarChart.vue b/test_client/src/views/dashboard/components/BarChart.vue
new file mode 100644
index 0000000..be0af34
--- /dev/null
+++ b/test_client/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/BoxCard.vue b/test_client/src/views/dashboard/components/BoxCard.vue
new file mode 100644
index 0000000..dff8462
--- /dev/null
+++ b/test_client/src/views/dashboard/components/BoxCard.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-card class="box-card-component" style="margin-left:8px;">
+    <div slot="header" class="box-card-header">
+      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
+    </div>
+    <div style="position:relative;">
+      <pan-thumb :image="avatar" class="panThumb" />
+      <mallki class-name="mallki-text" text="vue-element-admin" />
+      <div style="padding-top:35px;" class="progress-item">
+        <span>Vue</span>
+        <el-progress :percentage="70" />
+      </div>
+      <div class="progress-item">
+        <span>JavaScript</span>
+        <el-progress :percentage="18" />
+      </div>
+      <div class="progress-item">
+        <span>Css</span>
+        <el-progress :percentage="12" />
+      </div>
+      <div class="progress-item">
+        <span>ESLint</span>
+        <el-progress :percentage="100" status="success" />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: { PanThumb, Mallki },
+
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  }
+}
+</script>
+
+<style lang="scss" >
+.box-card-component{
+  .el-card__header {
+    padding: 0px!important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.box-card-component {
+  .box-card-header {
+    position: relative;
+    height: 220px;
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.2s linear;
+      &:hover {
+        transform: scale(1.1, 1.1);
+        filter: contrast(130%);
+      }
+    }
+  }
+  .mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .panThumb {
+    z-index: 100;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
+    top: -45px;
+    left: 0px;
+    border: 5px solid #ffffff;
+    background-color: #fff;
+    margin: auto;
+    box-shadow: none!important;
+    /deep/ .pan-info {
+      box-shadow: none!important;
+    }
+  }
+  .progress-item {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/test_client/src/views/dashboard/components/LineChart.vue b/test_client/src/views/dashboard/components/LineChart.vue
new file mode 100644
index 0000000..e654168
--- /dev/null
+++ b/test_client/src/views/dashboard/components/LineChart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/PanelGroup.vue b/test_client/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..ea77989
--- /dev/null
+++ b/test_client/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,200 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('注册用户')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            注册用户
+          </div>
+          <count-to :start-val="0" v-bind:end-val="ret.consumer1_count" :duration="1600" class="card-panel-num"  />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('缴费学员')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="people" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            缴费学员
+          </div>
+          <count-to :start-val="0" v-bind:end-val="ret.consumer2_count" :duration="1600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('模考次数')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="chart" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            模考次数
+          </div>
+          <count-to :start-val="0" v-bind:end-val="ret.test_count" :duration="1600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('题目总数')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="form" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            题目总数
+          </div>
+          <count-to :start-val="0" v-bind:end-val="ret.question_count" :duration="1600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import { getBasicCount } from '@/api/analyse'
+export default {
+  components: {
+    CountTo
+  },
+  data() {
+    return {
+      ret:{
+        consumer1_count:0,
+        consumer2_count:0,
+        test_count:0,
+        question_count:0
+      }
+    };
+  },
+  created() {
+    this.getBasicCount();
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    },
+    getBasicCount() {
+      this.listLoading = true;
+      getBasicCount().then(response => {
+        this.ret = response.data;
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/test_client/src/views/dashboard/components/PieChart.vue b/test_client/src/views/dashboard/components/PieChart.vue
new file mode 100644
index 0000000..4d2ef32
--- /dev/null
+++ b/test_client/src/views/dashboard/components/PieChart.vue
@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/RaddarChart.vue b/test_client/src/views/dashboard/components/RaddarChart.vue
new file mode 100644
index 0000000..6823af3
--- /dev/null
+++ b/test_client/src/views/dashboard/components/RaddarChart.vue
@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/TodoList/Todo.vue b/test_client/src/views/dashboard/components/TodoList/Todo.vue
new file mode 100644
index 0000000..c4b3cae
--- /dev/null
+++ b/test_client/src/views/dashboard/components/TodoList/Todo.vue
@@ -0,0 +1,81 @@
+<template>
+  <li :class="{ completed: todo.done, editing: editing }" class="todo">
+    <div class="view">
+      <input
+        :checked="todo.done"
+        class="toggle"
+        type="checkbox"
+        @change="toggleTodo( todo)"
+      >
+      <label @dblclick="editing = true" v-text="todo.text" />
+      <button class="destroy" @click="deleteTodo( todo )" />
+    </div>
+    <input
+      v-show="editing"
+      v-focus="editing"
+      :value="todo.text"
+      class="edit"
+      @keyup.enter="doneEdit"
+      @keyup.esc="cancelEdit"
+      @blur="doneEdit"
+    >
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'Todo',
+  directives: {
+    focus(el, { value }, { context }) {
+      if (value) {
+        context.$nextTick(() => {
+          el.focus()
+        })
+      }
+    }
+  },
+  props: {
+    todo: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editing: false
+    }
+  },
+  methods: {
+    deleteTodo(todo) {
+      this.$emit('deleteTodo', todo)
+    },
+    editTodo({ todo, value }) {
+      this.$emit('editTodo', { todo, value })
+    },
+    toggleTodo(todo) {
+      this.$emit('toggleTodo', todo)
+    },
+    doneEdit(e) {
+      const value = e.target.value.trim()
+      const { todo } = this
+      if (!value) {
+        this.deleteTodo({
+          todo
+        })
+      } else if (this.editing) {
+        this.editTodo({
+          todo,
+          value
+        })
+        this.editing = false
+      }
+    },
+    cancelEdit(e) {
+      e.target.value = this.todo.text
+      this.editing = false
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/TodoList/index.scss b/test_client/src/views/dashboard/components/TodoList/index.scss
new file mode 100644
index 0000000..74ce0d5
--- /dev/null
+++ b/test_client/src/views/dashboard/components/TodoList/index.scss
@@ -0,0 +1,320 @@
+.todoapp {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto ;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  :focus {
+    outline: 0;
+  }
+  .hidden {
+    display: none;
+  }
+  .todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+  .todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+  .todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+  .new-todo,
+  .edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 18px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .new-todo {
+    padding: 10px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  }
+  .main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+  }
+  .toggle-all {
+    text-align: center;
+    border: none;
+    /* Mobile Safari */
+    opacity: 0;
+    position: absolute;
+  }
+  .toggle-all+label {
+    width: 60px;
+    height: 34px;
+    font-size: 0;
+    position: absolute;
+    top: -52px;
+    left: -13px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+  .toggle-all+label:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+  }
+  .toggle-all:checked+label:before {
+    color: #737373;
+  }
+  .todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+  }
+  .todo-list li:last-child {
+    border-bottom: none;
+  }
+  .todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+  }
+  .todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 12px 16px;
+    margin: 0 0 0 43px;
+  }
+  .todo-list li.editing .view {
+    display: none;
+  }
+  .todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none;
+    /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .todo-list li .toggle {
+    opacity: 0;
+  }
+  .todo-list li .toggle+label {
+    /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center left;
+    background-size: 36px;
+  }
+  .todo-list li .toggle:checked+label {
+    background-size: 36px;
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+  }
+  .todo-list li label {
+    word-break: break-all;
+    padding: 15px 15px 15px 50px;
+    display: block;
+    line-height: 1.0;
+        font-size: 14px;
+    transition: color 0.4s;
+  }
+  .todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+  .todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    transition: color 0.2s ease-out;
+    cursor: pointer;
+  }
+  .todo-list li .destroy:hover {
+    color: #af5b5e;
+  }
+  .todo-list li .destroy:after {
+    content: '×';
+  }
+  .todo-list li:hover .destroy {
+    display: block;
+  }
+  .todo-list li .edit {
+    display: none;
+  }
+  .todo-list li.editing:last-child {
+    margin-bottom: -1px;
+  }
+  .footer {
+    color: #777;
+    position: relative;
+    padding: 10px 15px;
+    height: 40px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+  }
+  .footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+  .todo-count {
+    float: left;
+    text-align: left;
+  }
+  .todo-count strong {
+    font-weight: 300;
+  }
+  .filters {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+    list-style: none;
+  }
+  .filters li {
+    display: inline;
+  }
+  .filters li a {
+    color: inherit;
+    font-size: 12px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+  }
+  .filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+  }
+  .filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+  }
+  .clear-completed,
+  html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .clear-completed:hover {
+    text-decoration: underline;
+  }
+  .info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+  }
+  .info p {
+    line-height: 1;
+  }
+  .info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+  }
+  .info a:hover {
+    text-decoration: underline;
+  }
+  /*
+  Hack to remove background from Mobile Safari.
+  Can't use it globally since it destroys checkboxes in Firefox
+*/
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+      background: none;
+    }
+    .todo-list li .toggle {
+      height: 40px;
+    }
+  }
+  @media (max-width: 430px) {
+    .footer {
+      height: 50px;
+    }
+    .filters {
+      bottom: 10px;
+    }
+  }
+}
diff --git a/test_client/src/views/dashboard/components/TodoList/index.vue b/test_client/src/views/dashboard/components/TodoList/index.vue
new file mode 100644
index 0000000..8000d41
--- /dev/null
+++ b/test_client/src/views/dashboard/components/TodoList/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <section class="todoapp">
+    <!-- header -->
+    <header class="header">
+      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+    </header>
+    <!-- main section -->
+    <section v-show="todos.length" class="main">
+      <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all" />
+      <ul class="todo-list">
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"
+        />
+      </ul>
+    </section>
+    <!-- footer -->
+    <footer v-show="todos.length" class="footer">
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize('item') }} left
+      </span>
+      <ul class="filters">
+        <li v-for="(val, key) in filters" :key="key">
+          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+        </li>
+      </ul>
+      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+        Clear completed
+      </button> -->
+    </footer>
+  </section>
+</template>
+
+<script>
+import Todo from './Todo.vue'
+
+const STORAGE_KEY = 'todos'
+const filters = {
+  all: todos => todos,
+  active: todos => todos.filter(todo => !todo.done),
+  completed: todos => todos.filter(todo => todo.done)
+}
+const defalutList = [
+  { text: 'star this repository', done: false },
+  { text: 'fork this repository', done: false },
+  { text: 'follow author', done: false },
+  { text: 'vue-element-admin', done: true },
+  { text: 'vue', done: true },
+  { text: 'element-ui', done: true },
+  { text: 'axios', done: true },
+  { text: 'webpack', done: true }
+]
+export default {
+  components: { Todo },
+  filters: {
+    pluralize: (n, w) => n === 1 ? w : w + 's',
+    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+  },
+  data() {
+    return {
+      visibility: 'all',
+      filters,
+      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+      todos: defalutList
+    }
+  },
+  computed: {
+    allChecked() {
+      return this.todos.every(todo => todo.done)
+    },
+    filteredTodos() {
+      return filters[this.visibility](this.todos)
+    },
+    remaining() {
+      return this.todos.filter(todo => !todo.done).length
+    }
+  },
+  methods: {
+    setLocalStorage() {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+    },
+    addTodo(e) {
+      const text = e.target.value
+      if (text.trim()) {
+        this.todos.push({
+          text,
+          done: false
+        })
+        this.setLocalStorage()
+      }
+      e.target.value = ''
+    },
+    toggleTodo(val) {
+      val.done = !val.done
+      this.setLocalStorage()
+    },
+    deleteTodo(todo) {
+      this.todos.splice(this.todos.indexOf(todo), 1)
+      this.setLocalStorage()
+    },
+    editTodo({ todo, value }) {
+      todo.text = value
+      this.setLocalStorage()
+    },
+    clearCompleted() {
+      this.todos = this.todos.filter(todo => !todo.done)
+      this.setLocalStorage()
+    },
+    toggleAll({ done }) {
+      this.todos.forEach(todo => {
+        todo.done = done
+        this.setLocalStorage()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  @import './index.scss';
+</style>
diff --git a/test_client/src/views/dashboard/components/TransactionTable.vue b/test_client/src/views/dashboard/components/TransactionTable.vue
new file mode 100644
index 0000000..d07b0ed
--- /dev/null
+++ b/test_client/src/views/dashboard/components/TransactionTable.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-table :data="list" style="width: 100%;padding-top: 15px;">
+    <el-table-column label="Order_No" min-width="200">
+      <template slot-scope="scope">
+        {{ scope.row.order_no | orderNoFilter }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Price" width="195" align="center">
+      <template slot-scope="scope">
+        ¥{{ scope.row.price | toThousandFilter }}
+      </template>
+    </el-table-column>
+    <el-table-column label="Status" width="100" align="center">
+      <template slot-scope="{row}">
+        <el-tag :type="row.status | statusFilter">
+          {{ row.status }}
+        </el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import { transactionList } from '@/api/remote-search'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    },
+    orderNoFilter(str) {
+      return str.substring(0, 30)
+    }
+  },
+  data() {
+    return {
+      list: null
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      transactionList().then(response => {
+        this.list = response.data.items.slice(0, 8)
+      })
+    }
+  }
+}
+</script>
diff --git a/test_client/src/views/dashboard/components/mixins/resize.js b/test_client/src/views/dashboard/components/mixins/resize.js
new file mode 100644
index 0000000..234953b
--- /dev/null
+++ b/test_client/src/views/dashboard/components/mixins/resize.js
@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}
diff --git a/test_client/src/views/dashboard/index.vue b/test_client/src/views/dashboard/index.vue
index bfd075e..28c544e 100644
--- a/test_client/src/views/dashboard/index.vue
+++ b/test_client/src/views/dashboard/index.vue
@@ -1,32 +1,78 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
-    <div class="dashboard-text">perms: <span v-for="perm in perms" :key="perm">{{ perm }}</span></div>
+  <div class="dashboard-editor-container">
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import LineChart from './components/LineChart'
+
+const lineChartData = {
+  '注册用户': {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  '缴费学员': {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  '模考次数': {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  '题目总数': {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
 
 export default {
-  name: 'Dashboard',
-  computed: {
-    ...mapGetters([
-      'name',
-      'perms'
-    ])
+  name: 'DashboardAdmin',
+  components: {
+    PanelGroup,
+    LineChart,
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
   }
 }
 </style>
diff --git a/test_client/src/views/question/question.vue b/test_client/src/views/question/question.vue
index 5f2f01d..e61c172 100644
--- a/test_client/src/views/question/question.vue
+++ b/test_client/src/views/question/question.vue
@@ -62,6 +62,7 @@
   <el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button>
 </el-upload>
   </div>
+  <el-button type="primary" slot="reference" @click="handleAdd()">新增</el-button>
   <el-button slot="reference">Excel导入</el-button>
 </el-popover>
 </div>
@@ -143,7 +144,6 @@
 import {
   getQuestioncatAll,
   getQuestionList,
-  createQuestion,
   deleteQuestion,
   importQuestion
 } from "@/api/question";
@@ -256,6 +256,9 @@ export default {
     handleSearch() {
       this.getList({ search: this.search });
     },
+    handleAdd() {
+      this.$router.push({path:"/Qmanage/question/create"})
+    },
     handleDetail(scope) {
       this.dialogVisible = true
       this.question = scope.row
diff --git a/test_client/src/views/question/questioncreate.vue b/test_client/src/views/question/questioncreate.vue
new file mode 100644
index 0000000..d2a0d0e
--- /dev/null
+++ b/test_client/src/views/question/questioncreate.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="Form"
+      :rules="rules"
+      ref="Form"
+      label-width="100px"
+      status-icon
+    >
+      <el-form-item label="题型" prop="type">
+        <el-select
+        v-model="Form.type"
+       >
+        <el-option
+          v-for="item in typeOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      </el-form-item>
+      <el-form-item label="题干" prop="name">
+        <el-input v-model="Form.name" style="width:600px" type="textarea" :rows=3></el-input>
+      </el-form-item>
+      <el-form-item label="选项A" prop="optionA" >
+        <el-input v-model="Form.options.A" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item label="选项B" >
+        <el-input v-model="Form.options.B" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item label="选项C"  v-show="Form.type!='判断'">
+        <el-input v-model="Form.options.C" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item label="选项D"  v-show="Form.type!='判断'">
+        <el-input v-model="Form.options.D" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item label="选项E" v-show="Form.type!='判断'">
+        <el-input v-model="Form.options.E" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item label="选项F" v-show="Form.type!='判断'">
+        <el-input v-model="Form.options.F" style="width:600px"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>
+        <el-button @click="resetForm('Form')">重置</el-button>
+        <el-button type="warning" @click="goBack()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { createQuestion } from "@/api/question";
+export default {
+  data() {
+    return {
+      Form: {
+        name: "",
+        type:"",
+        options:{
+          A:'',
+          B:''
+        }
+      },
+      submitLoding:false,
+      rules: {
+        type: [
+          { required: true, message: "请选择", trigger: "blur" }
+        ],
+        name: [
+          { required: true, message: "名称不能为空", trigger: "blur" }
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        limit: [
+          { required: true, message: "时间限制不能为空"},
+          { type: "number", message: "时间限制必须是数字"}
+        ],
+        pass_score: [
+          { required: true, message: "及格分数不能为空"},
+          { type: "number", message: "及格分数必须是数字"}
+        ]
+
+      },
+      typeOptions: [
+        { key: 1, label: "单选", value: "单选" },
+        { key: 2, label: "多选", value: "多选"},
+        { key: 3, label: "判断", value: "判断" }
+      ],
+    };
+  },
+  watch:{
+
+  },
+  created() {
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.submitLoding = true
+              createQuestion(this.Form).then(response => {
+                this.submitLoding = false
+                this.$message({
+            type: "success",
+            message: "新建成功!"
+          });
+                this.goBack()
+              });
+        } else {
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/test_server/analyse/__init__.py b/test_server/analyse/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/test_server/analyse/admin.py b/test_server/analyse/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/test_server/analyse/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/test_server/analyse/apps.py b/test_server/analyse/apps.py
new file mode 100644
index 0000000..77d532a
--- /dev/null
+++ b/test_server/analyse/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class AnalyseConfig(AppConfig):
+    name = 'analyse'
diff --git a/test_server/analyse/migrations/__init__.py b/test_server/analyse/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/test_server/analyse/models.py b/test_server/analyse/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/test_server/analyse/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/test_server/analyse/tests.py b/test_server/analyse/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/test_server/analyse/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/test_server/analyse/urls.py b/test_server/analyse/urls.py
new file mode 100644
index 0000000..e598c48
--- /dev/null
+++ b/test_server/analyse/urls.py
@@ -0,0 +1,9 @@
+from django.urls import path,include
+from .views import *
+
+
+
+
+urlpatterns = [
+    path('basic/', BasicCount.as_view()),
+]
diff --git a/test_server/analyse/views.py b/test_server/analyse/views.py
new file mode 100644
index 0000000..f3923e5
--- /dev/null
+++ b/test_server/analyse/views.py
@@ -0,0 +1,21 @@
+from django.shortcuts import render
+from rest_framework.views import APIView
+from rest_framework.response import Response
+
+from crm.models import Consumer
+from examtest.models import ExamTest
+from question.models import Question
+
+# Create your views here.
+
+class BasicCount(APIView):
+    '''
+    获取基本统计数据
+    '''
+    def get(self, request, format=None):
+        ret={}
+        ret['consumer1_count'] = Consumer.objects.filter(is_delete=False).exclude(username=None).count()
+        ret['consumer2_count'] = Consumer.objects.filter(is_delete=False).exclude(subjects=None).count()
+        ret['test_count'] = ExamTest.objects.filter(is_delete=False).count()
+        ret['question_count'] = Question.objects.filter(is_delete=False).count()
+        return Response(ret)
diff --git a/test_server/crm/views.py b/test_server/crm/views.py
index 5af9f71..2f76d58 100644
--- a/test_server/crm/views.py
+++ b/test_server/crm/views.py
@@ -30,8 +30,8 @@ from .serializers import CompanySerializer, ConsumerSerializer
 
 appid = 'wxf1e9471c93f05ad6'
 secret = '4bf7f9bd6c52634586bbe792a1f0a834'
-sms_appid = '104951'
-sms_appsecret = '3d0ccaf9-f680-47e3-ad93-9e83093c5a04'
+sms_appid = '105036'
+sms_appsecret = '9b4edac9-ac1a-4c68-af2c-b56f0b765a5c'
 sms_url = 'https://sms_developer.zhenzikj.com'
 
 def jwt_payload_handler(user):
@@ -260,8 +260,6 @@ class ConsumerRegister(APIView):
     '''
     验证码登陆和注册
     '''
-    authentication_classes = []
-    permission_classes = []
     def post(self, request, *args, **kwargs):
         data = request.data
         phone = data.get('phone', None)
diff --git a/test_server/question/views.py b/test_server/question/views.py
index d3da7a2..bb1fe9c 100644
--- a/test_server/question/views.py
+++ b/test_server/question/views.py
@@ -94,7 +94,7 @@ class QuestionViewSet(ModelViewSet):
     serializer_class = QuestionSerializer
     pagination_class = CommonPagination
     ordering_fields = ['id']
-    ordering = ['id']
+    ordering = ['-create_time']
     filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
     filterset_fields = ['questioncat','level', 'type']
     search_fields = ['^name']
diff --git a/test_server/rbac/serializers/user_serializer.py b/test_server/rbac/serializers/user_serializer.py
index 80dfe2f..d992cb8 100644
--- a/test_server/rbac/serializers/user_serializer.py
+++ b/test_server/rbac/serializers/user_serializer.py
@@ -49,7 +49,7 @@ class UserCreateSerializer(serializers.ModelSerializer):
     class Meta:
         model = UserProfile
         fields = ['id', 'username', 'name', 'mobile', 'email', 'department', 'position', 'is_active', 'roles',
-                  'password']
+                  'password','is_superuser']
 
     def validate_username(self, username):
         if UserProfile.objects.filter(username=username):
diff --git a/test_server/server/settings.py b/test_server/server/settings.py
index c71794c..acb0e16 100644
--- a/test_server/server/settings.py
+++ b/test_server/server/settings.py
@@ -46,6 +46,7 @@ INSTALLED_APPS = [
     'crm',
     'question',
     'examtest',
+    'analyse'
 ]
 
 MIDDLEWARE = [
diff --git a/test_server/server/urls.py b/test_server/server/urls.py
index daa4077..b71fda0 100644
--- a/test_server/server/urls.py
+++ b/test_server/server/urls.py
@@ -28,6 +28,7 @@ urlpatterns = [
     path('crm/', include('crm.urls')),
     path('question/', include('question.urls')),
     path('examtest/', include('examtest.urls')),
+    path('analyse/', include('analyse.urls')),
     path('token/', obtain_jwt_token),
     path('token/refresh/', refresh_jwt_token),
     path('token/verify/', verify_jwt_token),