| | |
| | | <div class="content-title" style="padding-left: 16px;box-sizing: border-box;"> |
| | | 人员名称 |
| | | </div> |
| | | <div class="content-user" :class="{hoverType:currentUserIndex==index}" v-for="(item,index) in list" :key="'e'+index" v-on:mouseenter="onMouseEnter(index)" |
| | | <div class="content-user" :class="{hoverType:currentUserIndex==index}" v-for="(item,index) in yearList" :key="'e'+index" v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null"> |
| | | <div class="user-pic">{{ item.name.charAt(0) }}</div> |
| | | <div class="user-info"> |
| | | <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p> |
| | | <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }}, 中: {{ item.day1 }}, 夜: {{ item.day2 }}, 休: {{ item.day3 }}, 假: {{ item.day4 }}</p> |
| | | <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px; |
| | | color: #FF4902;">{{ query.month?item.monthlyAttendance |
| | | .totalAttendance:item.sidebarAnnualAttendance |
| | | .totalAttendance }}天</span></p> |
| | | color: #FF4902;">{{ item.work_time }}天</span></p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <div |
| | | class="content-body" |
| | | v-for="(item,index) in list" |
| | | v-for="(item,index) in yearList" |
| | | :key="'c'+index" |
| | | v-on:mouseenter="onMouseEnter(index)" |
| | | v-on:mouseleave="currentUserIndex=null" |
| | | :style="`display: grid; |
| | | grid-template-columns: repeat(${monthList.length}, 1fr);`" |
| | | > |
| | | <div class="content-body-item" v-for="(m,i) in monthList.length" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> |
| | | <p style="color:rgb(153, 153, 153);font-size: 12px;">合计出勤:<span style="font-size: 14px;color:#000">12</span></p> |
| | | <div class="content-body-item" v-for="(m,i) in item.monthList" :key="'d'+i" :class="{hoverType:currentUserIndex==index}"> |
| | | <p style="color:rgb(153, 153, 153);font-size: 12px;">合计出勤:<span style="font-size: 14px;color:#000">{{ m.totalMonthAttendance }}</span></p> |
| | | <p style="color:rgb(153, 153, 153);font-size: 12px;"> |
| | | 早: 12, 中: 12, 夜: 12, 休: 12, 假: 12 |
| | | 早: {{ m.day0 }}, 中: {{ m.day1 }}, 夜: {{ m.day2 }}, 休: {{ m.day3 }}, 假: {{ m.day4 }} |
| | | </p> |
| | | </div> |
| | | </div> |
| | |
| | | total: '', |
| | | pageLoading: false, // 组件loading的展示,默认为true |
| | | finishLoding: false, // 加载完成,显示已经没有更多了 |
| | | monthList:[] |
| | | monthList:[], |
| | | yearList:[] |
| | | } |
| | | }, |
| | | watch: { |
| | | 'query.year'(val){ |
| | | this.monthList = [] |
| | | if(val.getFullYear()==new Date().getFullYear()){ |
| | | for(let i=new Date().getMonth()+1;i>0;i--){ |
| | | this.monthList.push(i) |
| | | } |
| | | }else{ |
| | | for (let i=12;i>0;i--) { |
| | | this.monthList.push(i) |
| | | } |
| | | // 'query.year'(val){ |
| | | // this.monthList = [] |
| | | // if(val.getFullYear()==new Date().getFullYear()){ |
| | | // for(let i=new Date().getMonth()+1;i>0;i--){ |
| | | // this.monthList.push(i) |
| | | // } |
| | | // }else{ |
| | | // for (let i=12;i>0;i--) { |
| | | // this.monthList.push(i) |
| | | // } |
| | | // } |
| | | // this.monthList.reverse() |
| | | // }, |
| | | 'query.month'(val){ |
| | | if(!val){ |
| | | this.currentPage = 1; |
| | | this.yearList = [] |
| | | this.initYear() |
| | | } |
| | | this.monthList.reverse() |
| | | } |
| | | }, |
| | | mounted(){ |
| | | this.selectEnumByCategory() |
| | | this.obtainItemParameterList() |
| | | this.getUsers() |
| | | this.init() |
| | | if(this.query.month){ |
| | | this.init() |
| | | }else{ |
| | | this.initYear() |
| | | } |
| | | this.monthList = [] |
| | | for(let i=new Date().getMonth()+1;i>0;i--){ |
| | | for(let i=12;i>0;i--){ |
| | | this.monthList.push(i) |
| | | } |
| | | this.monthList.reverse() |
| | |
| | | methods: { |
| | | refresh(){ |
| | | this.list = []; |
| | | this.yearList = [] |
| | | this.currentPage = 1 |
| | | this.query = { |
| | | userName:'', |
| | |
| | | year:new Date(), |
| | | month:new Date().getMonth()+1 |
| | | } |
| | | this.init() |
| | | if(this.query.month){ |
| | | this.init() |
| | | }else{ |
| | | this.initYear() |
| | | } |
| | | }, |
| | | refreshTable(){ |
| | | this.list = []; |
| | | this.yearList = [] |
| | | this.currentPage = 1 |
| | | this.init() |
| | | if(this.query.month){ |
| | | this.init() |
| | | }else{ |
| | | this.initYear() |
| | | } |
| | | }, |
| | | init(){ |
| | | if(this.currentPage==1){ |
| | |
| | | } |
| | | return item |
| | | }); |
| | | // 右侧日期获取 |
| | | // if(this.currentPage==1){ |
| | | // if(list&&list.length>0){ |
| | | // this.weeks = []; |
| | | // list[0].list&&list[0].list.forEach(item=>{ |
| | | // let obj = { |
| | | // weekNum:item.weekly, |
| | | // week:item.headerTime.split(' ')[1], |
| | | // day:item.headerTime.split(' ')[0] |
| | | // } |
| | | // this.weeks.push(obj) |
| | | // }) |
| | | // } |
| | | // } |
| | | let headerList = res.data.headerList; |
| | | this.weeks = []; |
| | | headerList.forEach(item=>{ |
| | |
| | | } |
| | | this.currentPage++; |
| | | } |
| | | console.log(this.list) |
| | | }) |
| | | }, |
| | | initYear(){}, |
| | | initYear(){ |
| | | // pageYear |
| | | if(this.currentPage==1){ |
| | | this.pageLoading = true |
| | | } |
| | | let year = this.query.year.getFullYear() |
| | | this.$axios.post(this.$api.performanceShift.pageYear, { |
| | | size:this.pageSize, |
| | | current:this.currentPage, |
| | | time:year+'-01-01 00:00:00', |
| | | userName:this.query.userName, |
| | | laboratory:this.query.laboratory, |
| | | }).then(res => { |
| | | this.pageLoading = false |
| | | if (res.code == 201) return |
| | | this.total = res.data.total |
| | | let list = res.data.records.map(item=>{ |
| | | for (let key in item.year) { |
| | | let type = this.getDayByDic(key) |
| | | if(type!=undefined||type!=null){ |
| | | item[`day${type}`] = item.year[key] |
| | | } |
| | | } |
| | | item.monthList = [] |
| | | for (let m in item.month) { |
| | | let obj = {} |
| | | for (let key in item.month[m]) { |
| | | let type = this.getDayByDic(key) |
| | | console.log(type) |
| | | if(type!=undefined||type!=null){ |
| | | obj[`day${type}`] = item.month[m][key] |
| | | } |
| | | } |
| | | obj.totalMonthAttendance = item.month[m].totalMonthAttendance |
| | | item.monthList.push(obj) |
| | | } |
| | | return item |
| | | }); |
| | | if(list.length==0){ |
| | | this.finishLoding = true; |
| | | }else{ |
| | | if(list.length<this.pageSize){ |
| | | this.finishLoding = true; |
| | | } |
| | | this.yearList = this.yearList.concat(list) |
| | | if(this.total==this.yearList.length){ |
| | | this.finishLoding = true; |
| | | } |
| | | this.currentPage++; |
| | | } |
| | | }) |
| | | }, |
| | | getPower() { |
| | | let power = JSON.parse(sessionStorage.getItem('power')) |
| | | let add = false |