添加通知

package.json

@@ -82,7 +82,8 @@
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "worker-loader": "^3.0.7"
   },
   "engines": {
     "node": ">=8.9",

src/main.js

@@ -5,6 +5,31 @@ import dayjs from 'dayjs'
 import numeral from 'numeral'
 import lodash from 'lodash'
 import qs from 'qs'
+import NotificationWorker from 'worker-loader!./workers/notification.js'
+
+if (typeof Worker === 'function') {
+  const notificationWorker = new NotificationWorker()
+  console.log(notificationWorker)
+}
+
+// (async function() {
+//   if (Notification.requestPermission) {
+//    const res = await Notification.requestPermission()
+//    if (self.Notification.permission === 'granted') {
+//       const n = new Notification('您有代办事项', {
+//         body: '新的事项提醒',
+//         data: {
+//           url: '/setSilder/setSilder'
+//         }
+//       })
+//       // console.log(n)
+//       n.onclick = evt => {
+//         n.close()
+//         console.log(evt)
+//       }
+//     }
+//   }
+// })();
 
 import * as constant from '@/constant'
 

src/views/main/abnormal/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/main/baseinfo/curriculum.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-card header="本月课程">
+    <statistic class="statistic" :cols="0">
+      <statistic-item>
+        <span>乐团课</span>
+        <span>
+          <count-to :endVal="745"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>VIP课</span>
+        <span>
+          <count-to :endVal="1256"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>网管课</span>
+        <span>
+          <count-to :endVal="203"/>
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-line :data="chartData"/>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veLine from 'v-charts/lib/line.common'
+export default {
+  components: {
+    've-line': veLine,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>

src/views/main/baseinfo/hr.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-card header="人事数据">
+    <statistic class="statistic" :cols="0">
+      <statistic-item>
+        <span>老师总数</span>
+        <span>
+          <count-to :endVal="506"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>全职人数</span>
+        <span>
+          <count-to :endVal="132"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>兼职人数</span>
+        <span>
+          <count-to :endVal="558"/>%
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>离职人数</span>
+        <span>
+          <count-to :endVal="238"/>%
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veHistogram from 'v-charts/lib/histogram.common'
+export default {
+  components: {
+    've-histogram': veHistogram,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>

src/views/main/baseinfo/index.vue

@@ -1,15 +1,24 @@
 <template>
   <div class="container">
-    <el-row :gutter="20">
-      <el-col :span="7">
+    <el-row class="rows" :gutter="20">
+      <el-col :sm="24" :md="12" :span="7">
         <operate/>
       </el-col>
-      <el-col :span="7">
+      <el-col :sm="24" :md="12" :span="7">
         <business/>
       </el-col>
-      <el-col :span="10">
+      <el-col :md="24" :span="10">
         <management/>
       </el-col>
+      <el-col :sm="24" :md="12" :span="7">
+        <hrdata/>
+      </el-col>
+      <el-col :sm="24" :md="12" :span="7">
+        <student/>
+      </el-col>
+      <el-col :md="24" :span="10">
+        <curriculum/>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -17,11 +26,17 @@
 import operate from './operate'
 import business from './business'
 import management from './management'
+import hrdata from './hr'
+import student from './student'
+import curriculum from './curriculum'
 export default {
   components: {
     operate,
     business,
-    management
+    management,
+    hrdata,
+    student,
+    curriculum,
   },
   data () {
     return {
@@ -33,5 +48,10 @@ export default {
 <style lang="less" scoped>
   .container{
     overflow: hidden;
+    .rows{
+      >div{
+        margin-bottom: 20px;
+      }
+    }
   }
 </style>

src/views/main/baseinfo/student.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-card header="学员变动">
+    <statistic class="statistic" :cols="0">
+      <statistic-item>
+        <span>新增学员</span>
+        <span>
+          <count-to :endVal="287"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>退团学员</span>
+        <span>
+          <count-to :endVal="98"/>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>学员转化</span>
+        <span>
+          <count-to :endVal="13.04"/>%
+        </span>
+      </statistic-item>
+    </statistic>
+    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+  </el-card>
+</template>
+<script>
+import countTo from 'vue-count-to'
+import veHistogram from 'v-charts/lib/histogram.common'
+export default {
+  components: {
+    've-histogram': veHistogram,
+    'count-to': countTo
+  },
+  data () {
+    let data = []
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    /deep/ .statistic-content{
+      cursor: pointer;
+    }
+  }
+</style>

src/views/teamBuild/teamSeting/index.vue

@@ -311,4 +311,4 @@ export default {
     padding-top: 12px;
   }
 }
-</style>
+</style>

src/workers/notification.js

@@ -0,0 +1,3 @@
+self.addEventListener('message', evt => {
+  console.log(evt)
+})

vue.config.js

@@ -48,12 +48,14 @@ module.exports = {
     }
   },
   devServer: {
-    // port: port,
+    port: 443,
     open: true,
+    disableHostCheck: true,
     // overlay: {
     //   warnings: false,
     //   errors: true
     // },
+    https: true,
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy