xcx

package.json

@@ -14,14 +14,17 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/g2": "^3.2.7",
     "axios": "^0.18.0",
     "element-ui": "^2.4.5",
+    "g2-vue": "^1.0.1",
     "js-base64": "^2.4.8",
     "js-md5": "^0.7.3",
     "vue": "^2.5.2",
     "vue-amap": "^0.5.8",
     "vue-cookie": "^1.1.4",
     "vue-fullcalendar": "^1.0.9",
+    "vue-morris": "0.0.13",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/components/dashboardList/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="dashboardList">
+    <ul class="flex-h">
+      <li class="flex-item" v-for="(item,index) in data" :key="index">
+        <div>
+          <div class="centerLabel">
+            <span>{{item.name}}</span>
+            <span>{{item.value}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {})
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/dashboardList/page.scss

@@ -0,0 +1,57 @@
+
+.dashboardList{
+  >ul{
+    >li{
+      margin-left: 20px;
+      position: relative;
+      overflow: hidden;
+      &:first-child{
+        margin-left: 0;
+      }
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 30%;
+        border-radius: 10px;
+        background: #ccc;
+        >div{
+          width: 100%;
+          >*{
+            width: 100%;
+            display: block;
+            text-align: center;
+            font-size: 18px;
+            color: #fff;
+            font-weight: bolder;
+            line-height: 1.6;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/histogram/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="histogram" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'histogram',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list)
+      chart.scale('y', {
+        tickInterval: 20
+      })
+      chart.interval().position('x*y')
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/histogram/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/pieDiagram/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="pieDiagram" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'pieDiagram',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list, {
+        percent: {
+          formatter: function formatter (val) {
+            val = val * 100 + '%'
+            return val
+          }
+        }
+      })
+      chart.coord('theta', {
+        radius: 0.75
+      })
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val
+        }
+      }).tooltip('item*percent', function (item, percent) {
+        percent = percent * 100 + '%'
+        return {
+          name: item,
+          value: percent
+        }
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      })
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/pieDiagram/page.scss

@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/siderBar/index.vue

@@ -31,7 +31,7 @@
               </el-menu-item-group>
             </el-submenu>
             <el-menu-item v-else :index="String(index)" :key="index">
-              <span slot="title">{{item.MenuName}}</span>
+              <router-link :to="{name:item.Url,query:{}}" active-class="active">{{item.MenuName}}</router-link>
             </el-menu-item>
           </template>
         </el-menu>

src/pages/login/index.vue

@@ -71,7 +71,7 @@ export default {
           duration: 1000
         })
         setTimeout(() => {
-          this.$router.push({ name: 'userManager' })
+          this.$router.push({ name: 'dashboard' })
         }, 1000)
       }).catch(msg => {
 

src/pages/system/dashboard/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="subPage">
+    <div class="selectCase">
+      <el-select v-model="CaseId" placeholder="请选择">
+        <el-option
+          v-for="item in cases"
+          :key="item.CaseId"
+          :label="item.CaseName"
+          :value="item.CaseId">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="top flex-h">
+      <div class="flex-item" v-for="(item,index) in topData" :key="index">
+        <div v-if="item.type === 'dashboardList'">
+          <dashboardList :data="item.data"></dashboardList>
+        </div>
+      </div>
+    </div>
+    <div class="body flex-h">
+      <div class="flex-item" v-for="(item,index) in bodyData" :key="index">
+        <div v-if="item.type === 'histogram'">
+          <histogram :data="item.data"></histogram>
+        </div>
+        <template v-if="item.type === 'pieDiagram'">
+          <pieDiagram :data="item.data"></pieDiagram>
+        </template>
+      </div>
+    </div>
+    <div class="bottom flex-h">
+      3
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import dashboardList from '../../../components/dashboardList/index'
+import histogram from '../../../components/histogram/index'
+import pieDiagram from '../../../components/pieDiagram/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        caseid: ''
+      },
+      topData: [{
+        type: 'dashboardList', // 列表面板
+        data: [{
+          name: '会员总数',
+          value: '1000',
+        }, {
+          name: '课程预约总量',
+          value: '1000',
+        }, {
+          name: '饮品下单总量',
+          value: '1000',
+        }]
+      }],
+      bodyData: [{
+        type: 'histogram', // 柱状图
+        data: {
+          title: '今日数据',
+          list: [{
+            x: '推荐会员新增',
+            y: 38
+          }, {
+            x: '课程数',
+            y: 52
+          }, {
+            x: '预约数',
+            y: 61
+          }, {
+            x: '到场人次',
+            y: 145
+          }]
+        },
+      }, {
+        type: 'pieDiagram', // 扇形图
+        data: {
+          title: '明日课程预约数据',
+          list: [{
+            item: '小小体验官',
+            count: 40,
+            percent: 0.4
+          }, {
+            item: '哈他瑜伽',
+            count: 52,
+            percent: 0.52
+          }, {
+            item: '小小飞行家',
+            count: 8,
+            percent: 0.08
+          }]
+        },
+      }],
+      bottomData: [{
+        type: 'brokenLineGraph', // 折线图
+        data: [],
+      }, {
+        type: 'ringChart', // 环形图
+        data: [],
+      }],
+    }
+  },
+  components: {
+    dashboardList,
+    histogram,
+    pieDiagram,
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.drawHistogram()
+    })
+  },
+  methods: {
+    drawHistogram () { // 绘制柱状图
+      // this.histogramInit.source(this.histogramParams)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/dashboard/page.scss

@@ -0,0 +1,54 @@
+
+.subPage{
+  >*{
+    width: calc(100% - 40px);
+    position: relative;
+    overflow: hidden;
+    margin: 20px auto 0;
+    >div{
+      >div{
+        >div{
+          
+        }
+      }
+    }
+  }
+  >*:last-child{
+    margin-bottom: 20px;
+  }
+  .selectCase{
+    text-align: right;
+  }
+  .top{
+    
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/page.js

@@ -1,6 +1,8 @@
 
 import system from './index' // 系统首页
 
+import dashboard from './dashboard/index' // 控制板
+
 import systemSet from './systemSet/index' // 系统设置
 import userManager from './systemSet/userManager/index' // 用户管理
 import addUser from './systemSet/userManager/add' // 添加用户
@@ -82,7 +84,12 @@ export default {
       path: '/system',
       name: 'system',
       component: system,
-      children: [{ // 系统设置
+      children: [{ // 首页控制板
+        path: 'dashboard',
+        name: 'dashboard',
+        component: dashboard,
+        children: []
+      }, { // 系统设置
         path: 'systemSet',
         name: 'systemSet',
         component: systemSet,

src/style/main.css

@@ -388,6 +388,15 @@ select:focus {
   display: inline-block;
 }
 
+.component,
+.component>div,
+#mountNode>div{
+  width: 100%;
+  height: 100%;
+}
+
+
+