新增宝宝详情

master
chen 2021-12-27 13:59:27 +08:00
parent b3ae7796c6
commit 5b13e3dc14
5 changed files with 162 additions and 48 deletions

View File

@ -395,6 +395,7 @@ img {
flex-wrap: wrap;
overflow: hidden;
overflow-y: scroll;
position: relative;
}
.attendance-right::-webkit-scrollbar{
display: none;
@ -577,6 +578,25 @@ img {
.baby-album-box > img {width: 58px;height: 58px;}
.introduce-img {display: flex;flex-wrap: wrap;}
.introduce-img img {margin: 10px 10px 0 0;}
.attenddetail-ring{display: flex;width: 100%;margin-left: 40px;font-size: 16px;color: #666666;}
.top-row {display: flex;align-items: center;}
.attenddetail-ring >div{margin-right: 90px;}
.attenddetail-ring >div div:last-child{margin-top: 20px;}
.attendance-con{
font-size: 16px;
font-weight: 400;
color: #666666;
border-top: 1px solid #D3D3D3;
padding-top: 15px;
margin-top: 15px;
margin-bottom: 78px;
}
.baby-img01{width: 119px;height: 119px;background: #D3D3D3;border: 5px solid #ECE6FF;border-radius: 50%;}
.baby-img02{width: 245px;height: 154px;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #F3F3F3;margin-right: 20px;}
.attend-title {text-align: left;padding-right: 50px;width: 100%;}
.chengjian{display: flex;margin-top: 5px;font-size: 16px;color: #666666;}
.chengjian>div{display: flex;align-items: flex-end;width: 50%;line-height: 30px;}
@media screen and (min-width:768px) and (max-width:1400px) {
.header-box {
height: 70px;

View File

@ -0,0 +1,76 @@
<template>
<div style="width: 100%;">
<div class="yiqing-title attend-title">何雨桐</div>
<img src="../../static/img/kindergartenIntroduce/icon-back.png" class="back-img" @click="backNews">
<div class="attendance-con">
<div class="top-row">
<img src="../../static/img/seconds/tu-01.png" class="baby-img01" alt="">
<div class="attenddetail-ring">
<div>
<div>性别</div>
<div>班级中二班</div>
</div>
<div>
<div>生日2017-08-21</div>
<div>考勤卡20152222</div>
</div>
<div>
<div>家长母亲 何智刚</div>
<div>电话号码181****258</div>
</div>
</div>
</div>
</div>
<div class="yiqing-title attend-title">今日晨检考勤</div>
<div class="attendance-con">
<div class="chengjian">
<div>
<img class="baby-img02" src="../../static/img/seconds/tu-01.png" >
<div>
<div>入院时间</div>
<div>08:20:04</div>
</div>
</div>
<div>
<div class="baby-img02" >
<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
</div>
<div>
<div>离院时间</div>
<div>暂无数据展示</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'attendanceBabuDetail',
props:{
dataObj:{
type:Object,
default:()=>{
return ''
}
}
},
data() {
return {
}
},
methods: {
backNews(){
this.$emit('backNews',false);
}
},
mounted() {
}
}
</script>
<style>
</style>

View File

@ -9,46 +9,54 @@
</div>
</div>
<div class="attendance-right">
<div v-if="!isNothing" class="attendance-right-item-box" v-for="(item,index) in babyArr" :key="index">
<img :src="item.Head_Img" alt="">
<span>{{item.DisplayName}}</span>
<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
</div>
<div v-if="isNothing" class="nothing-box">
<img src="../../static/img/attendancedetail/icon-nothing.png">
<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
<div v-if="!showDetail" style="display: flex;flex-wrap: wrap;">
<div v-if="!isNothing" class="attendance-right-item-box" @click="goDetail(index)" v-for="(item,index) in babyArr" :key="index">
<img :src="item.Head_Img" alt="">
<span>{{item.DisplayName}}</span>
<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
</div>
<div v-if="isNothing" class="nothing-box">
<img src="../../static/img/attendancedetail/icon-nothing.png">
<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
</div>
</div>
<attendanceBabuDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews"></attendanceBabuDetail>
</div>
</div>
</div>
</template>
<script>
import attendanceBabuDetail from '@/components/attendanceBabuDetail.vue';
export default {
components:{
attendanceBabuDetail
},
name: 'babyActivity',
data() {
return {
navArr:[
{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:12},
{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:0},
{icon:require('../../static/img/attendancedetail/icon-lixiao.png'),title:'离校情况',num:0},
{icon:require('../../static/img/attendancedetail/icon-weidao.png'),title:'未到校宝宝',num:0},
{icon:require('../../static/img/attendancedetail/icon-qingj.png'),title:'请假宝宝',num:0},
],
navIndex:0,
babyArr:[
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:1},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:2},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:3},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
],
babyArr:[],
isNothing:false,
cunArr:[]
cunArr:[],
showDetail:false,
dataObj:''
}
},
methods: {
goDetail(e){
console.log(e);
this.showDetail = true;
},
//
backNews(e){
this.showDetail = e;
},
chooseNavEv(e){
this.navIndex = e;
if(e==0){
@ -76,10 +84,26 @@
this.navArr[3].num = leftInfo.leaveSchoolNum;
this.babyArr = leftInfo.list;
this.cunArr = leftInfo.list;
}
},
//
async queryattendancebyidEv(){
let data = await this.$axios({
// serviceAPI
url: this.$https.queryattendancebyid,
methods: "get",
params: {
EquipmentGuid: "yaohaotest001"
},
});
console.log(data.data.data);
},
},
mounted() {
//
this.checkAttendanceNum();
//
this.queryattendancebyidEv();
}
}
</script>

View File

@ -25,29 +25,13 @@
</div>
</div>
<!-- 当前活动 -->
<div v-for="(item,index) in dangArr" :key="index" class="class-item-box" style="height: 210px;">
<div v-for="(item,index) in dangArr.Content" :key="index" class="class-item-box" style="height: 210px;">
<div class="teather-title">当前活动</div>
<div class="class-active">
<label>{{item.TimePart}}</label>
<label>{{item.Name}}</label>
</div>
</div>
<!-- 当前活动 -->
<div class="class-item-box" style="height: 210px;">
<div class="teather-title">当前活动</div>
<div class="class-active">
<label>13:00-15:00</label>
<label>户外体育</label>
</div>
</div>
<!-- 当前活动 -->
<div class="class-item-box" style="height: 210px;">
<div class="teather-title">当前活动</div>
<div class="class-active">
<label>13:00-15:00</label>
<label>户外体育</label>
</div>
</div>
</div>
</div>
</div>
@ -90,19 +74,14 @@
data() {
return {
weekNum:0,
dateTime:'2021年12月28日',
dateTime:'',
className:'',
teatherArr:[
{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
],
teatherArr:[],
kebiaoArr:['时间','星期一','星期二','星期三','星期四','星期五'],
dataArr:[],
isNothing:false,
dangArr:[]
dangArr:[],
timer:null
}
},
methods: {
@ -135,7 +114,15 @@
},
});
let newData = data.data.data;
this.dangArr = newData[0].WeekData;
let newDate = new Date();
let timeDate = `${newDate.getHours()}.${newDate.getMinutes()}`;
if('8.00' <= timeDate && timeDate <= '11.55') {
this.dangArr = newData[0].WeekData[0];
} else if('11.55' <= timeDate && timeDate <= '15.00') {
this.dangArr = newData[0].WeekData[1];
} else if('15.00' <= timeDate && timeDate <= '17.00') {
this.dangArr = newData[0].WeekData[2];
}
},
//
async classStatusEv() {
@ -158,6 +145,13 @@
this.schedulingWebEv();
//
this.classStatusEv();
//
this.timer = setInterval(()=>{
this.schedulingWebEv();
},1000)
},
destroyed(){
clearInterval(this.timer);
}
}
</script>

BIN
static.zip Normal file

Binary file not shown.