Jpsoft-KPI-frond-end/pages/daily_report_statistics/daily_report_statistics.vue

<template>
	<view class="content">
		<view class="head-box-date" style="border: none;">
			<uni-nav-bar class="header-nav-box"  id="header_nav" left-icon="arrowleft" type="line" title="日报统计"  @clickLeft="back" />			
			<label class="head-right-box iconfont icon-switch switch_color" @click="btnclick">切换月评</label>
			<!--
			<button class="head-right-box iconfont icon-switch switch_color" @click="btnclick">切换月评</button>
			-->
			<view class="heax-date-box">
				 <view  :class="{pre: !is_future_month(-1),
								  pre_unable: is_future_month(-1)}" @click="changeMonth('pre')">
						<label class="font_smaller iconfont icon-left-circle">上月</label>
						
						</view> 
					<view>
						<label class="font_smaller">{{year}}年{{month}}月</label>
					</view>
					 <view :class="{next: !is_future_month(1),
								   next_unable: is_future_month(1)}" @click="changeMonth('next')">
					<label class="font_smaller">下月</label>
					<label class="font_smaller iconfont icon-right-circle"></label>
					</view>				 
			</view>
			
 		</view>
		<view class="content-box_with_date_none_footer" style="background-color: #EEEEEE;" >
			 <view class="daily_report_statistics">
				 <daily-report-statistics-card  v-for="(item,index) in daily_report_statistics" :key="index"
					:onDuty="item.on_duty" :submitted="item.submitted" :unsubmitted="item.unsubmitted" :date="item.date_str"
					@onCardClick="onCardClick"
				 >
					 
				 </daily-report-statistics-card>
			 </view>
		</view>			 
	</view>
</template>

<script>
    import utils from '../../utils/common.js'
	import store from '../../utils/store.js'
	
	//Vue.component('uni-collapse-item',uniCollapseItem)
	//Vue.component('uni-collapse',uniCollapse)
	import dailyReportStatisticsCard from '@/components/daily_report_statistics_card/daily_report_statistics_card.vue'
	var _self;
	export default {
         components:{
             dailyReportStatisticsCard
         },
		data() {
			return {
				kpi_url:'',
				employeeID:'',
				workMonth:'',
				date:'09-01 2021',
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1,
				day:new Date().getDate(),
//				holidays:[],
				workTags:[],
				daily_report_statistics:[
					 {on_duty:true,date_str:'2021-09-29',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-28',submitted:2,unsubmitted:4},
					 {on_duty:true,date_str:'2021-09-27',submitted:3,unsubmitted:3},
					 {on_duty:false,date_str:'2021-09-26',submitted:0,unsubmitted:0},
					 {on_duty:true,date_str:'2021-09-25',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-24',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-23',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-22',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-21',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-20',submitted:5,unsubmitted:1},
					 {on_duty:false,date_str:'2021-09-19',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-18',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-17',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-16',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-15',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-14',submitted:5,unsubmitted:1},
					 {on_duty:true,date_str:'2021-09-13',submitted:5,unsubmitted:1},
				]
			}
		},
		 onLoad(options)
		 {
			 //console.log('data stattistics'+JSON.stringify(options));
			 _self = this;
			 if(options.date)
			 {
			 	const date1 = JSON.parse(decodeURIComponent(options.date));
				//console.log('data'+JSON.stringify(date1));
				if(date1)
				{
					this.year = date1.year;
					this.month = date1.month;
					
				}
				//
			 }
		 	this.kpi_url=  uni.getStorageSync('kpi-url');
		 	this.employeeID =  uni.getStorageSync('usId');
		 },
/**		 onUnload() {
		 	uni.navigateBack({
		 		delta: 10
		 	})
		 },*/
		onReady() {
			if(this.year<2000)
			{
				 let date = new Date();
				 this.year = date.getFullYear();
				 this.month = date.getMonth()+1;				
			}
			 this.refreshEmployeeList();
			 
			 
			 // #ifdef APP-NVUE
			 const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			 // #endif
			 // #ifndef APP-NVUE
			 const eventChannel = this.getOpenerEventChannel();
			 // #endif
			 eventChannel.on('acceptDataFromOpenerPage', function(data) {
			 	   if(data)
			 	   {
			 		    let param = data.data;
			 		   if(param)
			 		   {
			 			   console.log('employee_list activated'+JSON.stringify(data));
			 			   if(param.action && param.action=='employee_list')//employee_daily_report
			 			   {
			 				    if(param.year && param.month)
								{
									_self.year = param.year;
									_self.month =param.month;
									_self.refreshEmployeeList();
									
								}
			 			   }
			 		   }
			 	   }
			 });
		},
		methods: {
			onCardClick(data)
			{
				uni.navigateTo({
					url:'../daily_report_detail/daily_report_detail', //?date='+encodeURIComponent(JSON.stringify(data.date)) 
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
						//console.log('fill xxxx')
					    res.eventChannel.emit('acceptDataFromOpenerPage', { data: data })
					  }
				})
				
				
				//console.log('index:'+JSON.stringify(data));
			},
			btnclick()
			{
				//uni.navigateTo({
				let date = {year:_self.year,month:_self.month};//new Date(_self.year,_self.month,_self.day);	
				//console.log('daily date'+ JSON.stringify(date));
				uni.redirectTo({
					url:'../employee_list/employee_list?date='+encodeURIComponent(JSON.stringify(date))
						
//					url:'../employee_list/employee_list', //?date='+encodeURIComponent(JSON.stringify(data.date)) 
///					success: function(res) {
					 // 通过eventChannel向被打开页面传送数据
					 //console.log('fill xxxx')
//					 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 
//					 {action:'daily_report_statistics',year:_self.year,month:_self.month} })
//					}
				})
				
			},
			/*
			_holidays(_year,_month)
			{ 
				//console.log('xxx'+_year+'xxx');
				let monthstr = _year.toString() + this.formatNum(_month);
				let yearstr = _year.toString();
				let keystr = 'holidays_'+yearstr+monthstr;
				//console.log('xx'+keystr+'xx');
				let valuestr = uni.getStorageSync(keystr);
				if(valuestr)
				{			
					this.holidays = valuestr;
					return;
				}
			 
				//let urlStr = 'https://api.apihubs.cn/holiday/get?field=year,month,date&year=' + _year.toString() + '&' + 'month=' +monthstr + '&holiday_recess=1&cn=1&size=31';
				//console.log(urlStr);
				uni.request({
					url:'https://api.apihubs.cn/holiday/get',
					data: 
					{
						field:'year,month,date',
						year:yearstr,
						month:monthstr,
						holiday_recess:1,
						cn:1,
						size:31
					},
					method:'GET',
					sslVerify:false,
					timeout:2000,
					
					success:(res)=>{
						//console.log('res success'+JSON.stringify(res.data));
						if(res.data)
						{
							if(res.data.msg =='ok')
							{
								if(res.data.data)
								{
									if(res.data.data.list)
									{										 
										uni.setStorageSync(keystr,res.data.data.list);
										this.holidays = res.data.data.list;
									}
								}
							}
						}
					},
					fail:(res)=>{
						console.log('res failed'+JSON.stringify(res.data));
					}
				});		
			},*/
			isHoliday(_date)
			{
				//console.log('date' + JSON.stringify(_date) +'tag'+ JSON.stringify(this.workTags));
				//return false;
				for(let i = 0;i< this.workTags.length;i++)
				{
					
					if(_date == this.workTags[i].date)
					{
						if(this.workTags[i].flag ==0)
						{
							//console.log('假期 ' + this.workTags[i].date);
							//console.log('xxxx' + this.holidays[i].date.toString());
							return true;
							
						}
					}
				}
/*				let date = _date.replace(new RegExp(/-/g), ""); 
				//console.log('date:'+date);
				for(let i = 0;i< this.holidays.length;i++)
				{
					
					if(date == this.holidays[i].date.toString())
					{
						//console.log('xxxx' + this.holidays[i].date.toString());
						return true;
					}
				}*/
				return false;
			},
			isWorkDay(ymd) {
			    //是否工作日
			    //let ymd = `${y}/${m}/${d}`;
			    let formatDY = new Date(ymd.replace(/-/g, '/'));
			    let week = formatDY.getDay();
			    if (week == 0 ) {//|| week == 6
			        return false;
			    } else {
			        return true;
			    }
			},
			refreshEmployeeList()
			{ 
				this.daily_report_statistics = [];
				//this._holidays(this.year,this.month);	
				let today = new Date();
				let todaystr = this.year + '-' + this.formatNum(today.getMonth()+1) +'-' + this.formatNum(today.getDate());
			    this.workMonth= this.year +'-'+ this.formatNum(this.month);
				//console.log('日报统计 ID:'+this.employeeID+'month:'+this.workMonth);
				uni.request({
				    url: this.kpi_url+ '/api/rptDailySubmitData.do',//'http://192.168.77.99:8080/api/loadMonthWorkSummary.do',//?workNum='+this.employeeNumber+'&workMonth='+this.workMonth, //仅为示例，并非真实接口地址。
				    data:{usId:this.employeeID,workMonth:this.workMonth},
					method:'GET',
					timeout:20000,
				   
				    success: (res) => {
						//console.log('res'+JSON.stringify(res.data));
						 
				       if(res.data.success){
						  if(res.data.data)
						  {
							  let total = 0;
							  if(res.data.data.total)
							  {
								  total = res.data.data.total;
								  //console.log('total'+total);
							  }
							  let daily_report_statistics = res.data.data.rpt;
							  //this.$refs.ren.set_status(year,month);
							  let workTags = res.data.data.workTags;
							  for(let i = 0;i< workTags.length;i++)
							  {
								  let workTag = {date:this.year.toString()+'-' + utils.formatNum(this.month)+'-' +utils.formatNum(i+1),flag:Number(workTags[i])};
								  this.workTags.push(workTag);		
							  }
							  //console.log('data '+JSON.stringify(this.workTags));
							  //return;
								if(daily_report_statistics)
								{
									//console.log('res'+JSON.stringify(daily_report_statistics));
									this.daily_report_statistics = [];
									for(let i = 0;i< daily_report_statistics.length;i++)
									{
										//console.log('xxxx')
										let statistics = daily_report_statistics[i];
										if(statistics.submitDate>todaystr)
											continue;
										let _unsubmitted = total-statistics.submitCount;
										let _onDuty = true;
										//if(!statistics.submitCount)
										//{
											if(this.isHoliday(statistics.submitDate))
												_onDuty=false;
										//	if(!this.isWorkDay(statistics.submitDate))
										//		_onDuty = false;
										//}
										this.daily_report_statistics.push({on_duty:_onDuty,date_str:statistics.submitDate,submitted:statistics.submitCount,unsubmitted:_unsubmitted})	
											//console.log('Date: '+statistics.submitDate);
									}
									 
								}
						  }

										 
					   }
					   else{
					   console.log('fail')
						  uni.showToast({
						      title: res.data.exception,
							  icon: 'error',
						      duration: 2000
						  }); 
					   }
				      
				    },
					fail:(res)=>{
						
						console.log('requrest failed')
						 console.log(res);
						 uni.showModal({
						 	title:'提示',
							content:'请求服务失败，请检查网络！',
							showCancel:false
						 })
						
						 
					},
					complete:()=>{
						//uni.hideLoading();
					}
				});
			}, 
			back() {
				console.log('test')
				uni.navigateBack({
					delta: 10
				})
			},
			formatNum(num) {
			    let res = Number(num);
			    return res < 10 ? '0' + res : res;
			},
			addMonth(date, months) {
				    let y = date.getFullYear();
				    let m = date.getMonth();
				    var d = date.getDate();
				
			//		console.log('add month y' + y + ' m:' + m + ' d: ' + d + ' month: ' + months);
				    y += Math.floor((m + 1 + months) / 12); //计算年
				    m = Math.floor((m + 1 + months) % 12) - 1; //计算月
					let _date = new Date(y,m,d);
			//		console.log('result y:' + y + ' m: ' + m + '_date:' + _date);
					return _date;
				},
			is_future_month(increment)
			{
				let date = new Date();
				let page_date = new Date(this.year,this.month-1,1);
				page_date = this.addMonth(page_date,increment)
				let _y = date.getFullYear();//当前年
				let _m = date.getMonth();//当前月
				let _y1 = page_date.getFullYear();
				let _m1 = page_date.getMonth(); 
				if(_y1>_y)
					return true;
				if(_y1<_y)
					return false;
				if(_m1 > _m)
					return true;
				return false;
			},
			changeMonth(type){
			    if(type=='pre'){
			       if (this.month + 1 == 2) {
			           this.month = 12;
			           this.year = this.year - 1;
			       } else {
			           this.month = this.month - 1;
			       } 
			    }else{
			        if (this.month + 1 == 13) {
			            this.month = 1;
			            this.year = this.year + 1;
			        } else {
			            this.month = this.month + 1;
			        }
			    } 
				this.refreshEmployeeList();
				 
			}
		}
	}
</script>

<style lang="scss">
	@import url("/static/font/iconfont.css");
	@import "@/common/pa_main.scss";
	button::after { border: none }
	#header_nav {
		color: #007AFF;
		box-shadow: 0 0px 0px #FFFFFF;
		
		border-bottom-width: 10rpx;
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;	
	} 
	.pre,.next{
	      color: #4d7df9;
	      font-size: 28rpx;
	      font-weight: normal;
	      padding: 8rpx 15rpx;
	      //border-radius: 10rpx;
	      //border: 2rpx solid #dcdfe6;
	}
	
	.pre_unable,.next_unable
	{
		color: #B5B5B5;
		font-size: 28rpx;
		font-weight: normal;
		padding: 8rpx 15rpx;
	}
	.pre{
	    margin-right: 30rpx;
	}
	.next{
	    margin-left: 30rpx;
	}
     .daily_report_statistics
     {
     		padding-top: 10rpx;
     		padding-left: 0rpx;
     		padding-right: 0rpx;
			height: auto;
			background-color: #EEEEEE!important;
     }
     ::-webkit-scrollbar {  
         display: none;  
         width: 0 !important;  
         height: 0 !important;  
         -webkit-appearance: none;  
         background: transparent;  
     }
</style>