|
@@ -1,111 +1,138 @@
|
|
|
<template>
|
|
|
<div class="attendance">
|
|
|
- <m-header />
|
|
|
+ <!-- <m-header /> -->
|
|
|
|
|
|
<div class="section">
|
|
|
- <h2>武汉小学乐团1022班</h2>
|
|
|
+ <h2>{{ classGroupName }}</h2>
|
|
|
<div class="att">
|
|
|
<div class="circel">
|
|
|
<van-circle
|
|
|
v-model="currentRate"
|
|
|
- :rate="70"
|
|
|
+ :rate="dataInfo.rate"
|
|
|
:speed="100"
|
|
|
color="#14928A"
|
|
|
:stroke-width="65"
|
|
|
layer-color="#EEEEEE">
|
|
|
- <p><span>30</span>/32</p>
|
|
|
+ <p><span>{{ dataInfo.alreadyInClass[0] }}</span>/{{ dataInfo.alreadyInClass[1] }}</p>
|
|
|
<p>已上课时</p>
|
|
|
</van-circle>
|
|
|
- <p class="current-time">9月8号 星期二</p>
|
|
|
+ <p class="current-time">{{ dataInfo.classDate }} {{ dataInfo.classTime }}</p>
|
|
|
</div>
|
|
|
<div class="ite">
|
|
|
- <span>42</span> 学生(人)
|
|
|
+ <span>{{ dataInfo.studentNum }}</span> 学生(人)
|
|
|
</div>
|
|
|
<div class="ite">
|
|
|
- <span>02</span> 退团(人)
|
|
|
+ <span>{{ dataInfo.leagueNum }}</span> 退团(人)
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
- <h2>
|
|
|
- 考勤统计
|
|
|
- <div @click="onDropDownChange" :class="[showPicker?'down': '', 'dropdown']">{{ instrumentText }}</div>
|
|
|
- </h2>
|
|
|
+ <h2>考勤统计</h2>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="stu_info" v-for="value in 5" :key="value">
|
|
|
- <van-cell :center="true" title-class="truant">
|
|
|
- <template slot="icon">
|
|
|
- <img class="logo" src="@/assets/images/default_head_img.png" alt="">
|
|
|
- </template>
|
|
|
- <template slot="default">到课(天):21<br/>旷课(天):21<br/>请假(天):21</template>
|
|
|
- <template slot="title">阿曼湾<van-tag type="danger" size="medium">连续旷课</van-tag></template>
|
|
|
- <template slot="label">长笛</template>
|
|
|
- </van-cell>
|
|
|
- <div class="stu-detail">
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p class="leave">到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p class="truant">到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
- <div class="item"><p>09-01<br/>周三</p><p>到课</p></div>
|
|
|
+ <van-list v-model="loading" v-if="show" key="records"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="我是有底线的"
|
|
|
+ @load="statisticsList">
|
|
|
+ <div class="stu_info" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <van-cell :center="true" title-class="truant">
|
|
|
+ <template slot="icon">
|
|
|
+ <img class="logo" src="@/assets/images/default_head_img.png" alt="">
|
|
|
+ </template>
|
|
|
+ <template slot="default">到课(天):{{ item.normalDay }}<br/>旷课(天):{{ item.truantDay }}<br/>请假(天):{{ item.leaveDay }}</template>
|
|
|
+ <template slot="title">{{ item.studentName }}<van-tag v-if="item.truant" type="danger" size="medium">连续旷课</van-tag></template>
|
|
|
+ <template slot="label">{{ item.subjectName | joinArray }}</template>
|
|
|
+ </van-cell>
|
|
|
+ <div class="stu-detail">
|
|
|
+ <div class="item" v-for="(i, id) in item.list" :key="id">
|
|
|
+ <p>{{ formatDate(i.classDate) }}<br/>{{ i.classWeek }}</p><p :class="i.status">{{ i.status | clockingIn }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <van-popup v-model="showPicker" position="bottom">
|
|
|
- <van-picker show-toolbar
|
|
|
- :columns="columns"
|
|
|
- :item-height="40"
|
|
|
- :visible-item-count="4"
|
|
|
- @cancel="showPicker = false"
|
|
|
- @confirm="onConfirmPicker" />
|
|
|
- </van-popup>
|
|
|
+ </van-list>
|
|
|
+ <m-empty v-else key="records" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import MHeader from '@/components/MHeader'
|
|
|
+import MEmpty from '@/components/MEmpty'
|
|
|
import { statisticsInfo, statisticsList } from '@/api/teacher'
|
|
|
export default {
|
|
|
name: 'attendance',
|
|
|
- components: { MHeader },
|
|
|
+ components: { MEmpty },
|
|
|
data() {
|
|
|
return {
|
|
|
- showPicker: false, // 乐器列表状态
|
|
|
currentRate: 0, // 图表的进度
|
|
|
- instrumentText: '长笛', // 默认显示文字
|
|
|
- columns: [{
|
|
|
- values: ['长笛', '杭州', '宁波东', '温州', '嘉兴', '湖州'],
|
|
|
- defaultIndex: 0
|
|
|
- }]
|
|
|
+ classGroupName: this.$route.query.classGroupName,
|
|
|
+ classGroupId: this.$route.query.classGroupId,
|
|
|
+ dataInfo: {
|
|
|
+ alreadyInClass: [0, 0],
|
|
|
+ rate: 0,
|
|
|
+ }, // 基本数据
|
|
|
+ show: true,
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ params: {
|
|
|
+ groupId: this.$route.params.groupId,
|
|
|
+ page: 1,
|
|
|
+ rows: 10,
|
|
|
+ classGroupId: this.$route.query.classGroupId
|
|
|
+ },
|
|
|
+ dataList: []
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.__init()
|
|
|
+ window.document.title = '历史考勤统计'
|
|
|
+ },
|
|
|
methods: {
|
|
|
__init() {
|
|
|
- statisticsInfo()
|
|
|
+ statisticsInfo({
|
|
|
+ classGroupId: this.classGroupId
|
|
|
+ }).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 200) {
|
|
|
+ this.dataInfo = result.data
|
|
|
+ let aic = result.data.alreadyInClass
|
|
|
+ aic = aic ? aic.split('/') : [0, 0]
|
|
|
+ this.dataInfo.alreadyInClass = aic
|
|
|
+ this.dataInfo.rate = aic[0] ? (aic[0] / aic[1] * 100) : 0
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- onDropDownChange() {
|
|
|
- // dropdown 切换时
|
|
|
- this.showPicker = true
|
|
|
-
|
|
|
+ statisticsList() {
|
|
|
+ let params = this.params
|
|
|
+ statisticsList(params).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 200) {
|
|
|
+ this.dataList = this.dataList.concat(result.data.rows)
|
|
|
+ this.loading = false
|
|
|
+ if(params.page >= Math.ceil(result.data.total / params.rows)) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ params.page++
|
|
|
+ } else {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ if(this.dataList.length <= 0) {
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- onConfirmPicker(value) {
|
|
|
- // picker 确认时
|
|
|
- this.instrumentText = value[0]
|
|
|
- this.showPicker = false
|
|
|
+ formatDate(value) {
|
|
|
+ let temp = new Date(value)
|
|
|
+ let month = (temp.getMonth() + 1) >= 10 ? temp.getMonth() + 1 : '0' + (temp.getMonth() + 1)
|
|
|
+ let day = (temp.getDate() + 1) >= 10 ? temp.getDate() + 1 : '0' + (temp.getDate() + 1)
|
|
|
+ return month + '-' + day
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
@import url("../../assets/commonLess/variable.less");
|
|
|
+.attendance {
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
.section {
|
|
|
background-color: @whiteColor;
|
|
|
margin-top: .02rem;
|
|
@@ -164,6 +191,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
color: @mFontColor;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
.current-time {
|
|
|
padding-top: .04rem;
|
|
@@ -229,10 +257,10 @@ export default {
|
|
|
border-top: 1px solid #f3f4f8;
|
|
|
}
|
|
|
|
|
|
- &.leave {
|
|
|
+ &.LEAVE {
|
|
|
color: @orangeColor;
|
|
|
}
|
|
|
- &.truant {
|
|
|
+ &.TRUANT {
|
|
|
color: @redColor;
|
|
|
}
|
|
|
}
|