添加统计

src/api/teacher.js

@@ -239,6 +239,15 @@ const querySubByMusicGroupId = (data) => {
   })
 }
 
+// 获取报名/预报名列表
+const getRegisterOrPreList = (data) => {
+  return axios({
+    url: api + '/teacher/getRegisterOrPreList',
+    method: 'get',
+    params: data
+  })
+}
+
 // 调剂
 const updateSubject = (data) => {
   return axios({
@@ -464,6 +473,7 @@ export {
   statisticsList,
   queryStudentApply,
   querySubByMusicGroupId,
+  getRegisterOrPreList,
   updateSubject,
   findVipSchoolByTeacher2,
   getFortuneBag,

src/views/teacher/order.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="order">
-        <header>支付列表
+        <header>缴费详情
             <van-dropdown-menu>
                 <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" />
             </van-dropdown-menu>
@@ -47,11 +47,11 @@
                             <span> {{ data.currentClass }} </span>
                             <span> {{ data.subjectName }} </span>
                             <span> {{ data.remark }} </span>
-                            <span><van-button 
-                                    :disabled="data.paymentStatus == 2 ? true : false" 
-                                    round 
+                            <span><van-button
+                                    :disabled="data.paymentStatus == 2 ? true : false"
+                                    round
                                     @click = "adjust(data)"
-                                    type = "danger" 
+                                    type = "danger"
                                     size = "small">调剂</van-button> </span>
                         </div>
                     </div>
@@ -63,12 +63,57 @@
                     @cancel="adjustStatus = false"
                     @select="adjustSelect" />
             </van-tab>
+            <van-tab title="数据统计">
+                <div style="width: 100%;overflow-x: auto;">
+                    <div class="table" style="width: 145%;">
+                        <van-row style="border: 1px solid #eaeaea">
+                            <van-col span="1">&nbsp;</van-col>
+                            <van-col span="3">学员编号</van-col>
+                            <van-col span="2">姓名</van-col>
+                            <van-col span="2">声部</van-col>
+                            <van-col span="4">
+                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('1')">
+                                    预报名时间
+                                    <div>
+                                        <i class="box box-up" :class="[orderByPerRegister == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i>
+                                        <i class="box box-down" :class="[orderByPerRegister == 'DESC' ? 'active' : null]"></i>
+                                    </div>
+                                </div>
+                            </van-col>
+                            <van-col span="4">预报名时间差</van-col>
+                            <van-col span="4">
+                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('2')">
+                                    缴费时间
+                                    <div>
+                                        <i class="box box-up" :class="[orderByPayTime == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i>
+                                        <i class="box box-down" :class="[orderByPayTime == 'DESC' ? 'active' : null]"></i>
+                                    </div>
+                                </div>
+                            </van-col>
+                            <van-col span="4">缴费时间差</van-col>
+                        </van-row>
+                        <van-row v-for="(data, index) in countList" :key="data.id" style="border: 1px solid #ebedf0">
+                            <van-col span="1">{{ ++index }}</van-col>
+                            <van-col span="3">{{ data.userId }}</van-col>
+                            <van-col span="2">{{ data.studentName }}</van-col>
+                            <van-col span="2">{{ data.actualSubjectName }}</van-col>
+                            <van-col span="4">{{ data.perRegisterTime }}</van-col>
+                            <van-col span="4">{{ data.perRegInterval | formatterTimes }}</van-col>
+                            <van-col span="4">{{ data.payTime }}</van-col>
+                            <van-col span="4">{{ data.payInterval | formatterTimes }}</van-col>
+                        </van-row>
+                    </div>
+                </div>
+            </van-tab>
         </van-tabs>
     </div>
 </template>
 
 <script>
-import { queryStudentApply, querySubByMusicGroupId, updateSubject } from '@/api/teacher'
+import { queryStudentApply, querySubByMusicGroupId, getRegisterOrPreList, updateSubject } from '@/api/teacher'
+import setLoading from '@/utils/loading'
+import moment from 'moment'
+import cleanDeep from 'clean-deep'
 export default {
     name: 'order',
     data() {
@@ -79,6 +124,7 @@ export default {
             amountCount: 0, // 总额
             studentList: {}, // 学生列表
             couresList: [],
+            countList: [],
             voicyPart: 0,
             voicyPartList: [{
                 text: '全部声部',
@@ -86,13 +132,15 @@ export default {
             }],
             adjustStatus: false, //
             changeStudent: null, // 修改的学生对象
+            orderByPerRegister: null, // 预报名时间排序状态
+            orderByPayTime: null, // 缴费时间排序状态
         }
     },
-    mounted() {
+    async mounted() {
         window.localStorage.removeItem('userInfo') // 删除用户信息
         window.localStorage.removeItem('Authorization') // 删除用户信息
-
-        querySubByMusicGroupId({ musicGroupId: this.musicGroupId }).then(res => {
+        setLoading(true)
+        await querySubByMusicGroupId({ musicGroupId: this.musicGroupId }).then(res => {
             let result = res.data
             if(result.code == 200) {
                 result.data.forEach(r => {
@@ -108,11 +156,11 @@ export default {
                 })
             }
         })
-        
+        setLoading(false)
         // 获取订单信息
         this.getOrderList()
         this.getOrderStudentList()
-        
+        this.getRegisterOrPreList()
     },
     methods: {
         adjust(item) {
@@ -171,11 +219,67 @@ export default {
                 }
             })
         },
+        async getRegisterOrPreList() {
+            setLoading(true)
+            // 获取订单信息
+            await getRegisterOrPreList(cleanDeep({
+                musicGroupId: this.musicGroupId,
+                rows: 9999,
+                subjectId: this.voicyPart ? this.voicyPart : '',
+                orderByPerRegister: this.orderByPerRegister,
+                orderByPayTime: this.orderByPayTime,
+                page: 1
+            })).then(res => {
+                let result = res.data
+                if(result.code == 200) {
+                    this.countList = result.data.rows
+                }
+            })
+            setLoading(false)
+        },
         onChange() {
             // 切换声部时
             // let subId = value ? value : ''
             this.getOrderList(this.voicyPart)
             this.getOrderStudentList(this.voicyPart)
+            this.getRegisterOrPreList(this.voicyPart)
+        },
+        async onChangeSort(sort) {
+            if(sort == 1) {
+                this.orderByPayTime = null
+                if(this.orderByPerRegister == 'ASC') {
+                    this.orderByPerRegister = 'DESC'
+                } else if(this.orderByPerRegister == 'DESC') {
+                    this.orderByPerRegister = null
+                } else {
+                    this.orderByPerRegister = 'ASC'
+                }
+            } else if(sort == 2) {
+                this.orderByPerRegister = null
+                if(this.orderByPayTime == 'ASC') {
+                    this.orderByPayTime = 'DESC'
+                } else if(this.orderByPayTime == 'DESC') {
+                    this.orderByPayTime = null
+                } else {
+                    this.orderByPayTime = 'ASC'
+                }
+            }
+            await this.getRegisterOrPreList()
+        }
+    },
+    filters: {
+        formatterTimes(second){
+            if(second<60){
+                return second+'秒'
+            }else if(60<second&&second<3600){
+                return moment(second*1000).format('m分钟');
+            }else if(3600<second&&second<86400){
+                return moment(second*1000).format('HH小时mm分钟');
+            }else if (second > 86400){
+                return moment(second*1000).format('DD天HH小时');
+            }else{
+                return '--'
+            }
         }
     }
 }
@@ -223,9 +327,6 @@ h2 {
     }
 
     .content > div{
-        // border: 1px solid #ccc;
-        // border-left: 0;
-        // border-right: 0;
         width: 100%;
         display: flex;
         align-items: center;
@@ -246,4 +347,42 @@ h2 {
         box-shadow: none;
     }
 }
+
+/deep/.van-col {
+    font-size: 0.14rem;
+    text-align: center;
+    padding: .08rem 0;
+}
+/deep/.van-row {
+    &:nth-child(2n+3) {
+        background: #eaeaea;
+    }
+}
+
+.box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: .02rem;
+}
+.box-up {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 6px solid #ccc;
+    &.active {
+        border-bottom-color: #14928a;
+    }
+}
+.box-down {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid #ccc;
+    &.active {
+        border-top-color: #14928a;
+    }
+}
 </style>