首页完成

src/components/statistic/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="statistic">
     <div v-for="(item, index) in tags" :style="{flex: (100 / col) + '%'}" class="item" :key="index">
-      <statistic-content :item="item"/>
+      <statistic-content :class="item.data.class" v-on="{...item.data.on}" :item="item"/>
       <el-divider class="divider" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length" direction="vertical"></el-divider>
     </div>
   </div>
@@ -30,7 +30,7 @@ export default {
       },
       render(h) {
         return (
-          <div class="statistic-content">
+          <div onClick={this.item.data.on.click} class="statistic-content">
             {this.item.children}
           </div>
         )
@@ -55,7 +55,12 @@ export default {
   },
   methods: {
     setTags() {
-      this.tags = this.$slots.default.filter(item => item.tag === 'statistic-item')
+      this.tags = (this.$slots.default || []).filter(item => item.tag === 'statistic-item').map(item => {
+        item.data = item.data || {on: {
+          click: () => {}
+        }}
+        return item
+      })
     }
   }
 }

src/views/main/api.js

@@ -3,6 +3,6 @@ import request2 from '@/utils/request2'
 // 填加学员接口
 export const getIndex = data => request2({
   url: '/api-web/newIndex',
-  data,
+  params: data,
   method: 'get',
 })

src/views/main/baseinfo/business.vue

@@ -1,28 +1,10 @@
 <template>
   <el-card header="业务数据">
     <statistic class="statistic" :cols="0">
-      <statistic-item>
-        <span>激活率</span>
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</span>
         <span>
-          <count-to :endVal="56"/>%
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>作业布置率</span>
-        <span>
-          <count-to :endVal="89"/>%
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>作业提交率</span>
-        <span>
-          <count-to :endVal="67"/>%
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>作业点评率</span>
-        <span>
-          <count-to :endVal="98"/>%
+          <count-to :endVal="item.percent" :decimals="2"/>%
         </span>
       </statistic-item>
     </statistic>
@@ -38,20 +20,28 @@ export default {
     've-histogram': veHistogram,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        ACTIVATION_RATE: this.data['ACTIVATION_RATE'] || {},
+        HOMEWORK_CREATE_RATE: this.data['HOMEWORK_CREATE_RATE'] || {},
+        HOMEWORK_SUBMIT_RATE: this.data['HOMEWORK_SUBMIT_RATE'] || {},
+        HOMEWORK_COMMENT_RATE: this.data['HOMEWORK_COMMENT_RATE'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.percent,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'ACTIVATION_RATE',
     }
   },
 }
@@ -60,6 +50,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/baseinfo/curriculum.vue

@@ -1,22 +1,10 @@
 <template>
   <el-card header="本月课程">
     <statistic class="statistic" :cols="0">
-      <statistic-item>
-        <span>乐团课</span>
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</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"/>
+          <count-to :endVal="item.percent"/>
         </span>
       </statistic-item>
     </statistic>
@@ -27,24 +15,32 @@
 import countTo from 'vue-count-to'
 import veLine from 'v-charts/lib/line.common'
 export default {
+  props: ['data'],
   components: {
     've-line': veLine,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        MUSIC_GROUP_COURSE: this.data['MUSIC_GROUP_COURSE'] || {},
+        VIP_GROUP_COURSE: this.data['VIP_GROUP_COURSE'] || {},
+        PRACTICE_GROUP_COURSE: this.data['PRACTICE_GROUP_COURSE'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'MUSIC_GROUP_COURSE',
     }
   },
 }
@@ -53,6 +49,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/baseinfo/hr.vue

@@ -1,28 +1,10 @@
 <template>
   <el-card header="人事数据">
     <statistic class="statistic" :cols="0">
-      <statistic-item>
-        <span>老师总数</span>
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</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"/>%
+          <count-to :endVal="item.percent"/>
         </span>
       </statistic-item>
     </statistic>
@@ -33,24 +15,33 @@
 import countTo from 'vue-count-to'
 import veHistogram from 'v-charts/lib/histogram.common'
 export default {
+  props: ['data'],
   components: {
     've-histogram': veHistogram,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        TEACHER_NUM: this.data['TEACHER_NUM'] || {},
+        FULL_TIME_NUM: this.data['FULL_TIME_NUM'] || {},
+        PART_TIME_NUM: this.data['PART_TIME_NUM'] || {},
+        DIMISSION_NUM: this.data['DIMISSION_NUM'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'TEACHER_NUM',
     }
   },
 }
@@ -59,6 +50,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/baseinfo/index.vue

@@ -1,5 +1,30 @@
 <template>
   <div class="container">
+    <save-form inline :model="search" @submit="FetchDetail" @reset="FetchDetail">
+      <el-form-item prop="year">
+        <el-date-picker
+          v-model="search.year"
+          type="year"
+          placeholder="请选择年份">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item prop="organIds">
+        <el-select
+          multiple
+          clearable
+          filterable
+          collapse-tags
+          v-model="search.organIds"
+        >
+          <el-option v-for="(item,index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-button native-type="submit" type="primary">搜索</el-button>
+      <el-button native-type="reset" type="danger">重置</el-button>
+    </save-form>
     <el-row class="rows" :gutter="20">
       <el-col :xs="24" :sm="24" :md="12" :span="7">
         <operate :data="dataInfo"/>
@@ -42,18 +67,27 @@ export default {
   },
   data () {
     return {
+      search: {
+        year: '',
+        organIds: []
+      },
       dataInfo: {},
       business: {},
     }
   },
   mounted () {
     this.FetchDetail();
+    this.$store.dispatch('setBranchs')
   },
   methods: {
     async FetchDetail() {
       const data = {}
       try {
-        const res = await getIndex()
+        const res = await getIndex({
+          ...this.search,
+          year: this.$helpers.dayjs(this.search.year).year() || '',
+          organIds: this.search.organIds.join(',')
+        })
         for (const item of res.data) {
           data[item.dataType] = item
         }
@@ -61,7 +95,7 @@ export default {
         console.log(error)
       }
       this.dataInfo = data
-    }
+    },
   }
 }
 </script>

src/views/main/baseinfo/management.vue

@@ -1,34 +1,10 @@
 <template>
   <el-card header="经营数据">
-    <statistic class="statistic" :cols="0" :col="5">
-      <statistic-item>
-        <span>应收金额</span>
+    <statistic class="statistic" :cols="0">
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</span>
         <span>
-          <count-to :endVal="5604"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>预收金额</span>
-        <span>
-          <count-to :endVal="6256"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>预付金额</span>
-        <span>
-          <count-to :endVal="6203"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>应付金额</span>
-        <span>
-          <count-to :endVal="21642"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>营收金额</span>
-        <span>
-          <count-to :endVal="41642"/>
+          <count-to :endVal="item.percent"/>
         </span>
       </statistic-item>
     </statistic>
@@ -39,24 +15,33 @@
 import countTo from 'vue-count-to'
 import veLine from 'v-charts/lib/line.common'
 export default {
+  props: ['data'],
   components: {
     've-line': veLine,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        SHOULD_INCOME_MONEY: this.data['SHOULD_INCOME_MONEY'] || {},
+        MUSIC_GROUP_NUM: this.data['MUSIC_GROUP_NUM'] || {},
+        MUSIC_GROUP_STUDENT: this.data['MUSIC_GROUP_STUDENT'] || {},
+        OTHER_STUDENT: this.data['OTHER_STUDENT'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'SHOULD_INCOME_MONEY',
     }
   },
 }
@@ -65,6 +50,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/baseinfo/operate.vue

@@ -1,28 +1,10 @@
 <template>
   <el-card header="运营数据">
     <statistic class="statistic" :cols="0">
-      <statistic-item>
-        <span>合作单位</span>
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</span>
         <span>
-          <count-to :endVal="56"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>乐团数量</span>
-        <span>
-          <count-to :endVal="62"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>乐团学员</span>
-        <span>
-          <count-to :endVal="6203"/>
-        </span>
-      </statistic-item>
-      <statistic-item>
-        <span>其它学员</span>
-        <span>
-          <count-to :endVal="2162"/>
+          <count-to :endVal="item.percent"/>
         </span>
       </statistic-item>
     </statistic>
@@ -33,24 +15,33 @@
 import countTo from 'vue-count-to'
 import veHistogram from 'v-charts/lib/histogram.common'
 export default {
+  props: ['data'],
   components: {
     've-histogram': veHistogram,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        SCHOOL: this.data['SCHOOL'] || {},
+        MUSIC_GROUP_NUM: this.data['MUSIC_GROUP_NUM'] || {},
+        MUSIC_GROUP_STUDENT: this.data['MUSIC_GROUP_STUDENT'] || {},
+        OTHER_STUDENT: this.data['OTHER_STUDENT'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'SCHOOL',
     }
   },
 }
@@ -59,6 +50,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/baseinfo/student.vue

@@ -1,22 +1,10 @@
 <template>
   <el-card header="学员变动">
     <statistic class="statistic" :cols="0">
-      <statistic-item>
-        <span>新增学员</span>
+      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+        <span>{{item.title}}</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"/>%
+          <count-to :endVal="item.percent"/>
         </span>
       </statistic-item>
     </statistic>
@@ -27,24 +15,32 @@
 import countTo from 'vue-count-to'
 import veHistogram from 'v-charts/lib/histogram.common'
 export default {
+  props: ['data'],
   components: {
     've-histogram': veHistogram,
     'count-to': countTo
   },
+  computed: {
+    items() {
+      return {
+        NEWLY_STUDENT_NUM: this.data['NEWLY_STUDENT_NUM'] || {},
+        QUIT_MUSIC_GROUP_STUDENT_NUM: this.data['QUIT_MUSIC_GROUP_STUDENT_NUM'] || {},
+        STUDENT_CONVERSION: this.data['STUDENT_CONVERSION'] || {},
+      }
+    },
+    chartData() {
+      const data = this.data[this.active] || {}
+      return {
+        columns: ['月份', data.title],
+        rows: (data.indexMonthData || []).map(item => ({
+          '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
+        }))
+      }
+    }
+  },
   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 }
-        ]
-      }
+      active: 'NEWLY_STUDENT_NUM',
     }
   },
 }
@@ -53,6 +49,9 @@ export default {
   .statistic{
     /deep/ .statistic-content{
       cursor: pointer;
+      &.active > span{
+        color: #14928a !important;
+      }
     }
   }
 </style>

src/views/main/index.vue

@@ -8,9 +8,9 @@
         <el-tab-pane lazy label="基本信息" name="baseinfo">
           <baseinfo/>
         </el-tab-pane>
-        <el-tab-pane lazy label="异常处理" name="abnormal">
+        <!-- <el-tab-pane lazy label="异常处理" name="abnormal">
           <abnormal/>
-        </el-tab-pane>
+        </el-tab-pane> -->
       </tab-router>
     </div>
   </div>