Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/admin into dev

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"
   },
@@ -78,6 +81,7 @@
     "style-loader": "^0.22.0",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+    "vue-fullcalendar": "^1.0.9",
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",

src/components/brokenLineGraph/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="brokenLineGraph" 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: 'brokenLineGraph',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list)
+      chart.scale('y', {
+        min: 0
+      })
+      chart.scale('x', {
+        range: [0, 1]
+      })
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      })
+      chart.line().position('x*y')
+      chart.point().position('x*y').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      })
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss"
+</style>

src/components/brokenLineGraph/page.scss

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

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.list" :key="index">
+        <div :style="{background:colorList[index%colorList.length]}">
+          <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 {
+      colorList: ['#fc6243', '#409EFF', '#4ddea2', '#f6e259', '#5c59f6', '#f66f59'],
+    }
+  },
+  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/ringChart/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="ringChart" 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: 'ringChart',
+        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,
+        innerRadius: 0.6
+      })
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      var num = 0
+      for (var n = 0; n < _that.data.list.length; n++) {
+        num += _that.data.list[n].count
+      }
+      // 辅助文本
+      chart.guide().html({
+        position: ['50%', '50%'],
+        html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">' + _that.data.title + '<br><span style="color:#8c8c8c;font-size:20px">' + num + '</span></div>',
+        alignX: 'middle',
+        alignY: 'middle'
+      })
+      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: function 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()
+      interval.setSelected(_that.data.list[0])
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/ringChart/page.scss

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

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,105 @@
+<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="flex-h" v-for="(item,index) in pageData" :key="index">
+      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex">
+        <div v-if="subItem.type === 'dashboardList'">
+          <dashboardList :data="subItem.data"></dashboardList>
+        </div>
+        <div v-if="subItem.type === 'histogram'">
+          <histogram :data="subItem.data"></histogram>
+        </div>
+        <div v-if="subItem.type === 'pieDiagram'">
+          <pieDiagram :data="subItem.data"></pieDiagram>
+        </div>
+        <div v-if="subItem.type === 'brokenLineGraph'">
+          <brokenLineGraph :data="subItem.data"></brokenLineGraph>
+        </div>
+        <div v-if="subItem.type === 'ringChart'">
+          <ringChart :data="subItem.data"></ringChart>
+        </div>
+      </div>
+    </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'
+import brokenLineGraph from '../../../components/brokenLineGraph/index'
+import ringChart from '../../../components/ringChart/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        caseid: ''
+      },
+      pageData: [
+        [
+          { type: 'dashboardList', remark: '列表面板', data: { title: '', list: [{ name: '会员总数', value: '1000', }, { name: '课程预约总量', value: '1000', }, { name: '饮品下单总量', value: '1000', }] } }
+        ],
+        [
+          { type: 'histogram', remark: '柱状图', data: { title: '今日数据', list: [{ x: '推荐会员新增', y: 38 }, { x: '课程数', y: 52 }, { x: '预约数', y: 61 }, { x: '到场人次', y: 145 }] } },
+          { type: 'pieDiagram', remark: '扇形图', data: { title: '明日课程预约数据', list: [{ item: '小小体验官', count: 40, percent: 0.4 }, { item: '哈他瑜伽', count: 52, percent: 0.52 }, { item: '小小飞行家', count: 8, percent: 0.08 }] } }
+        ],
+        [
+          { type: 'brokenLineGraph', remark: '折线图', data: { title: '下单饮品数据', list: [{ x: '09/05', y: 3 }, { x: '09/06', y: 4 }, { x: '09/07', y: 3.5 }, { x: '09/08', y: 5 }, { x: '09/09', y: 4.9 }, { x: '09/10', y: 6 }, { x: '09/11', y: 7 }, { x: '09/12', y: 9 }, { x: '09/13', y: 13 }] } },
+          { type: 'ringChart', remark: '环形图', data: { title: '本月课程预约', list: [{ item: '健身课程', count: 40, percent: 0.4 }, { item: '社交课程', count: 21, percent: 0.21 }, { item: '教育课程', count: 17, percent: 0.17 }, { item: '健康课程', count: 13, percent: 0.13 }, { item: '艺术课程', count: 9, percent: 0.09 }] } },
+        ],
+        [
+          { type: '', remark: '', data: { title: '', list: [] } },
+        ],
+      ],
+    }
+  },
+  components: {
+    dashboardList,
+    histogram,
+    pieDiagram,
+    brokenLineGraph,
+    ringChart,
+  },
+  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/newOrder/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="mainPage">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  data () {
+    return {}
+  },
+  components: {}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/newOrder/newOrderList/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="danger">营业</el-button>
+        </div>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="order-list-box">
+      <div v-for="(item,index) in list" :key="index">
+        <div class="print-area">
+          <div style="padding:25px 20px 5px;border-bottom:2px solid #cccccc;">
+            <i class="iconfont icon-yinchenglogo" style="font-size:70px;color:red;position: relative;bottom: 20px;margin-right:10px;"></i>
+            <div style="display:inline-block;">
+              <span style="display:block;font-size:20px;font-weight:700;">A区域1号桌</span>
+              <span style="display:block;margin-top:10px">下单时间：21:30:39</span>
+              <span style="display:block;margin-top:10px">已等待：<span style="color:red;font-weight:700;">30:29</span></span>
+            </div>
+          </div>
+          <div style="padding:10px 20px 5px;border-bottom:1px solid #cccccc;">
+            <div>卡布奇诺</div>
+            <div style="margin-top:8px;">
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">热</span>
+              <span style="display:inline-block;width:20%;text-align:right">x 1</span>
+            </div>
+            <div style="margin-top:8px;">
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">冷</span>
+              <span style="display:inline-block;width:20%;text-align:right">x 2</span>
+            </div>
+          </div>
+          <div style="padding:10px 20px 5px;border-bottom:1px solid #cccccc;">
+            <div>卡布奇诺</div>
+            <div style="margin-top:8px;">
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">热</span>
+              <span style="display:inline-block;width:20%;text-align:right">x 1</span>
+            </div>
+            <div style="margin-top:8px;">
+              <span style="display:inline-block;width:75%;text-align:left;color:#cccccc">冷</span>
+              <span style="display:inline-block;width:20%;text-align:right">x 2</span>
+            </div>
+          </div>
+          <div style="padding:10px 20px;border-bottom:1px solid #cccccc">备注：请赶快制作</div>
+          <div style="padding:10px 20px;">下单人：xxxxx</div>
+        </div>
+        <div class="btns">
+          <span>取消</span>
+          <span>确定</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        phone: '', // 手机号
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      list: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
+    }
+  },
+  components: {
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getList()
+    })
+  },
+  methods: {
+    FormatDate (date) {
+      return this.toolClass.dateFormat(date)
+    },
+    handleCurrentChange (val) {
+      this.getList()
+    },
+    searchList (key) { // 搜索列表
+      this.postData.phone = key
+      this.postData.page = 1
+      this.getList()
+    },
+    getList () {
+      this.$ajax(this.$api.dataStatistics.getCustomerList.url, {
+        method: this.$api.dataStatistics.getCustomerList.method,
+        queryData: this.postData
+      }).then(res => {
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/newOrder/newOrderList/page.scss

@@ -0,0 +1,33 @@
+.order-list-box{
+  padding: 50px;
+  border-radius: 3px;
+  overflow: scroll;
+  width: 95%;
+  height: 100%;
+  >div{
+    display: inline-block;
+    width:300px;
+    height:400px;
+    margin:10px;
+    box-shadow: 0px 2px 10px 0px rgba(193, 204, 217, 0.5);
+  }
+  .btns{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span{
+      padding: 5px 25px;
+      border-radius: 8px;
+      display: block;
+    }
+    span:nth-of-type(1){
+      color: red;
+      border:1px solid red;
+      margin-right: 10px;
+    }
+    span:nth-of-type(2){
+      color: #fff;
+      background-color: red;
+    }
+  }
+}

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' // 添加用户
@@ -76,13 +78,21 @@ import phoneVerificationList from './verificationManager/phoneVerification/verif
 import dataStatistics from './dataStatistics/index' // 数据统计
 import frontEndUserList from './dataStatistics/frontEndUserList/index' // 课程管理
 
+import newOrder from './newOrder/index' // 商品订单系统
+import newOrderList from './newOrder/newOrderList/index' // 新订单列表
+
 export default {
   router: [
     {
       path: '/system',
       name: 'system',
       component: system,
-      children: [{ // 系统设置
+      children: [{ // 首页控制板
+        path: 'dashboard',
+        name: 'dashboard',
+        component: dashboard,
+        children: []
+      }, { // 系统设置
         path: 'systemSet',
         name: 'systemSet',
         component: systemSet,
@@ -407,6 +417,16 @@ export default {
             children: []
           }]
         }]
+      }, { // 商品订单系统
+        path: 'newOrder',
+        name: 'newOrder',
+        component: newOrder,
+        children: [{ // 新订单列表
+          path: 'newOrderList',
+          name: 'newOrderList',
+          component: newOrderList,
+          children: []
+        }]
       }, { // 数据统计
         path: 'dataStatistics',
         name: 'dataStatistics',

src/style/main.css

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