smart-app/pages/securityLog/securityLog.vue

<template>
	<view style="overflow: hidden;">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">安全日志</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center">
				 	<!-- <button  class="margin-top-ssm cu-btn round bg-blue text-blue"><text class="cuIcon-add"></text></button> -->
				</view>
			</block>
		</cu-custom>	
		<!-- 项目合同信息 -->
		<!-- <view style="padding: 22rpx 0;background-color: #F7F7F7;">
			<cu-project :projectList="projectList" style="height: 236rpx;background-color: #C6E6FF;"></cu-project>
		</view> -->
		<view style="padding: 0rpx 0rpx 22rpx;background-color: #F7F7F7;">
			<view class="cu-item shadowType" style="height: 100%;background-color: #FFFFFF;border-radius: 0 0 20rpx 20rpx;border-top: 2rpx solid#0A8CD5;" >
				<calendar @selected-change="datechange" ref="calendarData" :showBack="true" :dotList="dotList"  :dotStyle="dotStyle"></calendar>
			</view>
		</view>
		<!-- 日志 -->
		<view class="journal_b">
			<view class="journal_1">
				<view :class="chooseTime=='' ? 'journal_ts':'journal_time'">
					{{chooseTime=='' ? '请选择时间':chooseTime}}
					({{personLength}}人)
				</view>
				<view>
					<button @click="navTo()"  v-if="type==0 && chooseTime!=''"  class="journal-btn" >立即填报</button>
					<button @click="navTo()"   v-if="type==1 && chooseTime!=''" class="journal-btn" >编辑</button>
					<text v-if="type==2 && chooseTime!=''" class="text-gray">未开始</text>
					<text v-if="type==4" class="text-gray"></text><!-- 别人的日志只能看不能操作 -->
				</view>
			</view>
		</view>
		<view>
			<view style="overflow-x: scroll;width: 100%;margin: 20rpx 0 0 16rpx ;display: flex;">
				<view class="name-box" style="flex-shrink: 0;" 
				:class="index == curPersonIndex ? 'name-sele' : '' " 
				v-for="(person,index) in personList" :key="index"
				@click="selectPerson(index)">{{person.username}}</view>
			</view>
		</view>
		<view v-if="type==0 || type==2 || type ==null || chooseTime==''" class="padding bg-white text-center">
			<view class="padding">
				<image  class="menuImageNoTask" src="../../static/task/noTask.png"></image>
			</view>
			<view class="padding">暂时没有提交日志~</view>
		</view>
		<view v-else style="padding: 22rpx 22rpx 80rpx;">
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">天气：
				   <text class="margin-right-sm2">{{logData.weather}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">编号：
				   <text class="margin-right-sm2">{{logData.serialNumber}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">巡查施工部位：
				   <text class="margin-right-sm2">{{logData.buildParts}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">施工内容及预警等级：
				   <text class="margin-right-sm2">{{logData.buildContent}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">施工人数：
				   <text class="margin-right-sm2">{{logData.peopleAndFacility}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">工班长：
				   <text class="margin-right-sm2">{{logData.monitor}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">是否召开班前会：
				   <text class="margin-right-sm2" v-if="logData.isOpenMeeting == '1'">是</text>
				   <text class="margin-right-sm2" v-if="logData.isOpenMeeting == '2'">否</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">有无事故发生：
					<text class="margin-right-sm2" v-if="logData.isAccident == '1'">有</text>
					<text class="margin-right-sm2" v-if="logData.isAccident == '2'">无</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">事故简要经过：
				   <text class="margin-right-sm2">{{logData.accidentContent}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">巡视检查情况：
				   <text class="margin-right-sm2">{{logData.acceptance}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">现场存在隐患问题：
				   <text class="margin-right-sm2">{{logData.problem}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">隐患问题整改措施：
				   <text class="margin-right-sm2">{{logData.problemRectify}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">存在重大危险隐患：
				   <text class="margin-right-sm2">{{logData.danger}}</text>
				</text>
			</view>
			<view class="margin-bottom-sm">
				<text class="margin-right-sm">隐患整改结果：
				   <text class="margin-right-sm2">{{logData.dangerRectify}}</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:"",
				projectList:'',
				index:0,
				content:"",
				dotList:[],
				dotStyle:{color: 'black'},
			    type:null,
				chooseTime:"",
				logData:"",
				chooseData:"",
				
				personList:[],
				curPersonIndex:0,
			}
		},
		computed:{
			personLength: function () {
				var num = 0;
				for (let i = 0; i < this.personList.length; i++) {
					if(this.personList[i].id){
						num ++;
					}
				}
				return num;
			}
		},
		onShow() {
			var that = this;
			that.onLoadData();	
			that.chooseTime='';
			/* 监听今天 */
			uni.$on("clickToday", res => {
			    that.findDiaryByToday();
			});		
		},
		methods: {
			datechange(e){
				var nowDate =new Date().toISOString().slice(0, 10);
				this.chooseTime = e.fullDate;
				if(nowDate<e.fullDate || !e.info){//超出今天或者在项目开始前都算 未开始
					this.type=2;
					this.personList = [];
					return;
				}
				
				//未填写过不查询
				if(!(e.info && e.info.id)){
					this.type = 0;
					this.personList = [];
					return;
				}
				
				
				this.curPersonIndex = [0];
				this.http.request('/app/security/getDataByDate', { recorderId:'',contractId:this.projectList.contractId,date:e.fullDate}).then((res)=>{
					//如果没人填写过
					if(!res.datas || res.datas.length < 1){
						this.type = 0;
						this.personList = [];
						return;
					}
					
					//console.log(res)
					
					//根据数据获取当前是否 已经填写了
					let myIndex = -1;
					res.datas.forEach((item,index)=>{
						if(item.recorderId == this.userInfo.id){
							myIndex = index;
							return;
						}
					})
					if(myIndex > -1){
						this.type = 1;
						//把自己放到第一位
						let myData = res.datas.splice(myIndex,1);
						res.datas.unshift(myData[0]);
					}else{
						this.type = 0;
						res.datas.unshift({
							username:this.userInfo.userName,
							recorderId:this.userInfo.id,
							id:''
						});
					}
					this.personList = res.datas;
					
					this.chooseData = res.datas[0];
					this.logData = res.datas[0];
				})
			},
			// datechange(e) {
			// 	console.log(e);
			// 	//debugger
			// 	if(e.isToday){//判断是否为今天
			// 	    if(e.info){
			// 			if(e.info.id){//判断是否有施工日志
			// 				this.type=1;
			// 				this.logData=e.info;
			// 			}else{
			// 				this.type=0
			// 			}
			// 		}else{
			// 			this.type=2
			// 		}
					
			// 	}else{
			// 		var nowDate =new Date().toISOString().slice(0, 10);
			// 		if(nowDate<e.fullDate){//判断是否为超前时间
			// 		     this.type=2 
			// 		}else{
			// 			if(e.info){//判断是否在合同段的计划时间内
			// 				if(e.info.id){//判断是否有施工日志
			// 					this.type=1;
			// 					this.logData=e.info;
			// 				}else{
			// 					this.type=0
			// 				}
			// 			}else{
			// 				this.type=2
			// 			}
			// 		}
			// 	}
			// 	this.chooseTime =e.fullDate;
			// 	this.chooseData =e.info;
			// },
			navTo(){
				uni.navigateTo({
					url:"update/update?time="+this.chooseTime+"&type="+this.type+"&id="+this.chooseData.id
				})
			},
			/* 刷新方法 */
			onLoadData(){
				var userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = userInfo;
				}
				var project =  uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
				if(project){
					this.projectList =project;//获取选中的当前项目
				}else{
					this.findProject(); 
				}
				this.findDiaryDate();
			},
			 /* 查询项目 */
			findProject(){
				 var that =this;
				   that.http.request('/app/login', { userId:this.userInfo.id }).then((result)=>{
					   if(result.datas.length!=0){
					   	that.projectList=result.datas[0];
					   	//默认选中第一条
					   	uni.setStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id,that.projectList);	
					   }
				   })
				 
			},
		    /* 获取施工日志*/
			findDiaryDate(){
				 var that =this;
				 that.http.request('/app/security/list', { recorderId:that.userInfo.id,contractId:that.projectList.contractId }).then((result)=>{
					that.dotList = result;
					if(!that.$refs.calendarData || !that.$refs.calendarData.selectedItem){
						//如果当前没有选择的日期获取今天的
						let today =that.intervalTime.getTime();
						this.chooseTime = today
						//如果不在日期范围内不请求
						let dateListSort = JSON.parse(JSON.stringify(result));
						dateListSort.sort(function(a, b) {
							return b.date < a.date ? -1 : 1
						})
						//console.log(dateListSort)
						
						if(today>dateListSort[0].date || today<dateListSort[dateListSort.length-1].date){
							return
						}
						
						that.findDiaryByToday();
					}
					if(that.$refs.calendarData && that.$refs.calendarData.selectedItem){
						//如果有获取当前的
						var selectedItem = that.$refs.calendarData.selectedItem
						var time = selectedItem.fullDate;
						//console.log(that.dotList)
						that.dotList.forEach(item=>{
							if(item.date == time){
								that.datechange(Object.assign(selectedItem,{'info':item}));
								return;
							}
						})
					}
				 })
			},
			/* 根据当前时间获取施工日志数据*/
			findDiaryByToday(){
				 var that =this;
				 var time =that.intervalTime.getTime();
				 //console.log(time)
				
				this.http.request('/app/security/getDataByDate', { recorderId:'',contractId:this.projectList.contractId,date:time}).then((res)=>{
					//如果没人填写过
					if(!res.datas || res.datas.length < 1){
						this.chooseTime = time;
						this.type = 0;
						this.personList = [];
						return;
					}
					
					//console.log(res)
					this.chooseTime = time;
					//根据数据获取当前是否 已经填写了
					let myIndex = -1;
					res.datas.forEach((item,index)=>{
						if(item.recorderId == this.userInfo.id){
							myIndex = index;
							return;
						}
					})
					if(myIndex > -1){
						this.type = 1;
						//把自己放到第一位
						let myData = res.datas.splice(myIndex,1);
						res.datas.unshift(myData[0]);
					}else{
						this.type = 0;
						res.datas.unshift({
							username:this.userInfo.userName,
							recorderId:this.userInfo.id,
							id:''
						});
					}
					this.personList = res.datas;
					
					this.chooseData = res.datas[0];
					this.logData = res.datas[0];
				})
			},
			selectPerson(index){
				this.curPersonIndex = index;
				//是否有填写日志
				if(this.personList[index].id){
					//只能看别人
					if(this.personList[index].recorderId == this.userInfo.id){
						this.type = 1;
					}else{
						this.type = 4;
					}
					this.chooseData = this.personList[index];
					this.logData = this.personList[index];
				}else{
					this.type = 0;
				}
			}
		}
	}
</script>

<style>
	page{background-color: #fff;}
   .solid-bottom-type{
   	   border-bottom: 0.5px solid #eee;
   }
   .solid-top-type{
      	border-top: 2px solid #0A8CD5;
    }
	.shadowType {
		-moz-box-shadow: 0px 1px 4px #D0D0D0;
		-webkit-box-shadow: 0px 1px 4px #D0D0D0;
		box-shadow: 0px 1px 4px #D0D0D0;
	}
	.journal_b{background-color: #F7F7F7;}
	.journal_1{background-color: #FFFFFF;border-bottom: 1rpx solid #E3E1E1;border-radius: 20rpx 20rpx 0 0;height: 100rpx;display: flex;align-items: center;justify-content: space-between;padding: 0 22rpx;box-shadow: 1px -1px 2px #D0D0D0}
	.journal_ts{font-size: 30rpx;}
	.journal_time{font-size: 30rpx;color: #101010;font-weight: bold;}
	.journal-btn{width: 100%;height: 60rpx;line-height: 60rpx;font-size: 26rpx;color: #0A8CD5;border-radius: 100rpx;border: 2rpx solid #0A8CD5;background-color: #fff;}
	.journal-btn::after{
		border: none;
	}
	.margin-bottom-sm{margin-bottom: 22rpx;}
	.margin-right-sm{margin-right: 16rpx;font-size: 30rpx;color: #101010;}
	.margin-right-sm2{font-size: 30rpx;color: #8a8a8a;}
	
	.name-box{
		/* width: 140rpx;
		height: 50rpx;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center; */
		
		background-color: #F7F7F7;
		margin-right: 20rpx;
		padding: 10rpx 26rpx;
		border-radius: 50rpx;
	}
	.name-sele{
		background-color: #E2F3FD;
	}
</style>