jp-xpgj-GA-file/src/projects/business/views/Master/Health/WorkerReport.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack" :checkOpenId="checkOpenId"></common>
		<top-header :pageTitle="pageTitle"  :leftShow="leftShow" ></top-header>

		<div class="mui-content vongi-qingjiadt">
			<div class="mui-content-padded">
				<h5>身份信息</h5>
			</div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>姓名</label>
					<span>{{student&&student.name}}</span>
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<span>{{showTel(student&&student.phone)}}</span>
				</div>

				<div class="mui-input-row">
					<label>所属单位</label>
					<span v-text="student.position1"></span>
				</div>
				<div class="mui-input-row" v-if="student.position2" >
					<label>所属部门</label>
					<span v-text="student.position2"></span>
				</div>
				<div class="mui-input-row" v-if="student.position3">
					<label>岗位</label>
					<span v-text="student.position3"></span>
				</div>
			</form>
			<div class="mui-content-padded">
				<h5>健康状态</h5>
			</div>
			<form class="mui-input-group vongi-editme">
				
				
				<div class="mui-input-row">
					<label style="width:50%">健康码颜色<i class="colorfe616c" v-if="!curDateIsUpload">*</i></label>
					<span v-if="curDateIsUpload" style="width:50%" v-text="report.healthCodeN">其他</span>
				
					<button class="mui-btn mui-btn-block mui-navigate-right" v-if="!curDateIsUpload" @click="selectHealth" type='button'
					 style="width:50%">
						{{report.healthCodeN?report.healthCodeN:'请选择'}}
					</button>
					<i style="
						margin-left: 14px;
						font-size: 10px;
					"
					 v-if="!curDateIsUpload">以湖北健康码的颜色为准</i>
				</div>
				<div class="mui-input-row">
					<label style="width:50%">自身健康情况<i class="colorfe616c" v-if="!curDateIsUpload">*</i></label>
					<span v-if="curDateIsUpload" style="width:50%" v-text="report.healthStatusN">其他</span>

					<button class="mui-btn mui-btn-block mui-navigate-right" v-if="!curDateIsUpload" @click="selectHealthStatus" type='button'
					 style="width:50%">
						{{report.healthStatusN?report.healthStatusN:'请选择'}}
					</button>
				</div>
				
				<div class="mui-input-row">
					<label style="width:50%">疫苗接种情况<i class="colorfe616c" v-if="!curDateIsUpload">*</i></label>
					<span v-if="curDateIsUpload" style="width:50%" v-text="report.vaccinationStatusN">其他</span>
				
					<button class="mui-btn mui-btn-block mui-navigate-right" v-if="!curDateIsUpload" @click="selectHealthStatusVaccination" type='button'
					 style="width:50%">
						{{report.vaccinationStatusN?report.vaccinationStatusN:'请选择'}}
					</button>
				</div>
				
				<div class="mui-input-row">
					<label>今日体温<i class="colorfe616c" v-if="!curDateIsUpload">*</i></label>
					<span v-if="curDateIsUpload" style="width:50%" v-text="report.temperature"></span>

					<input type="text" class="mui-input-clear" v-if="!curDateIsUpload" v-model="report.temperature" placeholder="请输入体温度数  ">
				</div>
				<div class="mui-input-row">
					<label>其他情况</label>
					<span v-if="curDateIsUpload" style="width:50%" v-text="report.healthRemark"></span>
					<input type="text" class="mui-input-clear" v-if="!curDateIsUpload" v-model="report.healthRemark" placeholder="请填写具体情况  ">



				</div>
				<div class="mui-input-row">
					<label style="width:70%">家庭成员身体健康情况<i class="colorfe616c" v-if="!curDateIsUpload">*</i></label>
					<span v-if="curDateIsUpload" style="width:30%" v-text="report.familyStatusN">其他</span>

					<button v-if="!curDateIsUpload" @click="selectFamilyHealthStatus" class="mui-btn mui-btn-block mui-navigate-right"
					 type='button' style="width:30%">
						{{report.familyStatusN?report.familyStatusN:'请选择'}}
					</button>
				</div>
				<div class="mui-input-row vongi-wordcard vongi-input-up">
					<div class="mui-media-body">上传家庭成员健康码</div>
					<div class="fyy-upphoto">
						<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(picture,index) in report.pictures" :key="index">
							<img v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'" />
							<a class="mui-icon mui-icon-closeempty" v-if="!curDateIsUpload" @click="delImg(index)"></a>
						</div>
						<div class="mui-col-xs-3" v-if="!curDateIsUpload" @click="changeImg">
							<a><i class="mui-icon mui-icon-plusempty"></i></a>
						</div>
					</div>
				</div>
				<div class="mui-input-row " :class="!curDateIsUpload?'vongi-pad':''">
					<div class="mui-media-body" v-if="!curDateIsUpload">假期是否曾前往重点疫区<i class="colorfe616c">*</i></div>
					<label v-if="curDateIsUpload" style="width:70%;">假期是否曾前往重点疫区</label>
					<span v-if="curDateIsUpload" style="width:30%" v-text="report.isGoto ? '是' : '否'">是</span>

					<div class="mui-input-group flew" v-if="!curDateIsUpload">

						<div class="mui-radio mui-left mui-col-xs-6">
							<label>是</label>
							<input v-model="report.isGoto" name="isGoto" value="true" type="radio">
						</div>
						<div class="mui-radio mui-left mui-col-xs-6">
							<label>否</label>
							<input v-model="report.isGoto" name="isGoto" value="false" type="radio">
						</div>

					</div>
				</div>
				<div class="mui-input-row " :class="!curDateIsUpload?'vongi-pad':''">
					<div class="mui-media-body" v-if="!curDateIsUpload">是否接触重点疫区高危人群<i class="colorfe616c">*</i></div>

					<label v-if="curDateIsUpload" style="width:70%;">是否接触重点疫区高危人群</label>

					<span v-if="curDateIsUpload" style="width:30%" v-text="report.isTouch ? '是' : '否'">是</span>

					<div class="mui-input-group flew" v-if="!curDateIsUpload">

						<div class="mui-radio mui-left mui-col-xs-6">
							<label>是</label>
							<input v-model="report.isTouch" name="isTouch" value="true" type="radio">
						</div>
						<div class="mui-radio mui-left mui-col-xs-6">
							<label>否</label>
							<input v-model="report.isTouch" name="isTouch" value="false" type="radio">
						</div>

					</div>
				</div>

			 

				 

				<div class="mui-input-row"   style="height: 100px" >
					<label  style="width:30%;height: 100px;">定位<i class="colorfe616c"  v-if="!curDateIsUpload">*</i></label>
					<span v-if="!curDateIsUpload" style="text-align: left;" class="vongi-yidi-location" @click="getPoint"

					>{{report.address}}<i class="mui-icon mui-icon-location" style="color: #096DD9;font-size: 13px;">重新定位</i></span>
					<span v-if="curDateIsUpload" class="vongi-yidi-location aaa" style="text-align: left;" >{{address?address:report.address}}</span>

				</div>

			</form>
			<div class="vongi-btn vongi-login-btn" v-if="!curDateIsUpload&&!send">
				<button class="mui-btn mui-btn-primary " @click="submitReport()">
					提交
				</button>
			</div>
			<div class="fyy-popup-button" v-if="curDateIsUpload&&!send">
				<div class="mui-col-xs-6">
					<button class="mui-btn mui-btn-primary " @click="sendReport()">
						确认提交
					</button>
				</div>
				<div class="mui-col-xs-6">
					<button class="mui-btn mui-btn-warning " @click="noSubmitReport()">
						撤回编辑
					</button>
				</div>

			</div>

		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>


<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
    import MapLoader from '$project/utils/AMap'
	import * as WxJsApi from '$project/utils/wxJsApi'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
        showTel,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterHealthWorkerReport',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '健康打卡',
				id: '',
				student: {},
				report: {
                    isJingzhou:null,
                    isProvince:null,
					healthCode: "",
					healthCodeN: "请选择",
					healthStatus: "",
					healthStatusN: "请选择",
					vaccinationStatus: "",
					vaccinationStatusN: "请选择",
					healthRemark: "",
					familyStatus: "",
					familyStatusN: "请选择",
					pictures: [],
					isGoto: false,
					isTouch: false,

                    longitude: 112.276527,
                    latitude: 30.306427,
                    address: '定位中……',
                },
                address:'',
				curDateIsUpload: false,
				send: false,
				isLoading: false,
                leftShow:true,
                checkOpenId:true,
				max: 37.3,
				healthStatusList: [],
					healthStatusListVaccination: [],
					healthCodeList:[{
						text: "绿码",
						value: "00"
					},
					{
						text: "黄码",
						value: "01"
					},
					{
						text: "红码",
						value: "10"
					}
				],
				healthCodeObj:{
					"00":"绿码",
					"01":"黄码",
					"10":"红码",
				}
				
			}
		},
		created() {
            if(this.$route.query.token){
                this.leftShow=false;
                this.checkOpenId=false;
            }

			this.id = this.$route.query.id;


		},
		methods: {
            showTel(val){
                return showTel(val);
            },
            getPoint(){
                this.report.address='定位中……';
                //this.isLoading = true;
                WxJsApi.getLocation().then((res) => {
                    this.isLoading = false;

                    this.report.latitude = parseFloat(res.latitude);
                    this.report.longitude = parseFloat(res.longitude);
                    mui.toast("经纬度已经获取，正在转换地址...");

                    //获取定位地址
                    this.getPositionByLonLats()
                }).catch(error => {

                    this.isLoading = false;
                    console.log(error)
                    WxJsApi.addSysLog(error)
                })
			},  //获取定位地址
            getPositionByLonLats() {
                var _this = this;
                MapLoader().then(AMap => {
                    var lnglatXY = [_this.report.longitude, _this.report.latitude];
                    AMap.service('AMap.Geocoder', function() {
                        let geocoder = new AMap.Geocoder({});
                        geocoder.getAddress(lnglatXY, function(status, result) {
                            console.log(lnglatXY);
                            mui.toast("定位成功！");
                            console.log(status, result);
                            if (status === 'complete' && result.info === 'OK') {
                                var address = result.regeocode.formattedAddress;
                                console.log(address);
                                _this.report.address = address;
                            } else {
                                _this.report.address = '无法获取定位';
                            }
                        });
                    });
                }).catch(error => {
                    console.log(error)
                    mui.toast(JSON.stringify(error));
                })
            },
			asynCallBack() {},
			delImg(index) {

				this.report.pictures.splice(index, 1);
			},
			changeImg() {
				if (this.report.pictures.length >= 3) {
					mui.toast("只能上传3张家庭成员健康码");
					return;
				}
				var _this = this;

				WxJsApi.chooseImage().then(res => {
					var localData = res.localData;

					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					this.imgBase64 = localData;
					//显示裁剪图片
					//_this.showCropper(field);
					this.uploadpic();
				}).catch(error => {
					mui.toast(error);
				})


			},
			//上传图片
			uploadpic() {
				this.isLoading = true;

				WxJsApi.uploadPic(this.imgBase64).then(response => {
					this.isLoading = false;
					this.report.pictures.push(response);
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			
			selectHealthStatusVaccination() {
				var picker = new mui.PopPicker();
				picker.setData(this.healthStatusListVaccination);
			
				picker.show((selectItems) => {
					this.report.vaccinationStatusN = selectItems[0].text;
					this.report.vaccinationStatus = selectItems[0].value;
				});
			},
			selectHealthStatus() {
				var picker = new mui.PopPicker();
				picker.setData(this.healthStatusList);

				picker.show((selectItems) => {
					this.report.healthStatusN = selectItems[0].text;
					this.report.healthStatus = selectItems[0].value;
				});
			},
			selectFamilyHealthStatus() {
				var picker = new mui.PopPicker();
				picker.setData(this.healthStatusList);

				picker.show((selectItems) => {
					this.report.familyStatusN = selectItems[0].text;
					this.report.familyStatus = selectItems[0].value;
				});

			},
			uploadPicture(event) {
				if (this.report.pictures.length >= 3) {
					mui.toast("只能上传3张家庭成员健康码");
					return;
				}
				var fileData = event.target.files[0];

				this.isLoading = true;

				API_Health.uploadPicture(fileData).then(data => {
					this.report.pictures.push(data);

					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			fatherMethod(idCard) {
				this.student.idCard = idCard
			},
			selectGoto() {
				var picker = new mui.PopPicker();

				picker.setData([{
						text: "是",
						value: true
					},
					{
						text: "否",
						value: false
					}
				]);

				picker.show((selectItems) => {
					this.report.isGoto = selectItems[0].value;
				});
			},
			selectHealth() {
				var picker = new mui.PopPicker();
			
				picker.setData(this.healthCodeList);
			
				picker.show((selectItems) => {
					this.report.healthCode = selectItems[0].value;
					this.report.healthCodeN = selectItems[0].text;
				});
			},
			selectTouch() {
				var picker = new mui.PopPicker();

				picker.setData([{
						text: "是",
						value: true
					},
					{
						text: "否",
						value: false
					}
				]);

				picker.show((selectItems) => {
					this.report.isTouch = selectItems[0].value;
				});
			},
			sendReport() {
				this.isLoading = true;
				API_Health.save({
					...this.report,
					personId: this.student.id,
					familyGreenCode: this.report.pictures.join(",")
				}).then(data => {
					mui.toast("已提交");
					this.send = true;
					this.isLoading = false;

                    if(this.student.url&&this.student.url!='#'&&this.student.url!=''){
                        setTimeout(()=>{
                            window.location=this.student.url;
                        }, 2000);
                    }
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			noSubmitReport() {
				this.curDateIsUpload = false;
			},
			submitReport() {

                if(!this.student.id){
                    mui.toast("页面加载失败!");
                    return;
                }
				if (process.env.VUE_APP_NODE_NAME != 'devlopment') {
					if (this.report.address=='定位中……'||this.report.address=='无法获取定位') {
					    mui.alert("定位失败，请检查手机权限后，点击<span class=\"mui-icon mui-icon-location\" style=\"color: #096DD9;font-size: 16px;\"></span>蓝色定位图标重新获取位置信息!");
					    return;
					}
				}
               
				// if (this.report.healthStatus.length == 0) {
				// 	mui.toast("请选择自身健康情况!");
				// 	return;
				// }

				// if (this.report.vaccinationStatus.length == 0) {
				// 	mui.toast("请选择疫苗接种情况!");
				// 	return;
				// }
			
				if (!this.report.healthCodeN||this.report.healthCodeN=='请选择') {
					mui.toast("请选择健康码颜色!");
					return;
				}
				// if (this.report.familyStatus.length == 0) {
				// 	mui.toast("请选择家庭成员身体健康情况!");
				// 	return;
				// }
                if (!this.report.healthStatusN||this.report.healthStatusN=='请选择') {
                    mui.toast("请选择自身健康情况!");
                    return;
                }
				if (!this.report.vaccinationStatusN||this.report.vaccinationStatusN=='请选择') {
					mui.toast("请选择疫苗接种情况!");
					return;
				}
                if (!this.report.familyStatusN||this.report.familyStatusN=='请选择') {
                    mui.toast("请选择家庭成员身体健康情况!");
                    return;
                }
				if (!this.report.temperature) {
					mui.toast('请输入体温度数');
					return;
				}
				var reg = new RegExp("^((3\\d)|(3\\d\\.\\d|40|40.0))$");

				if (!reg.test(this.report.temperature)) {
					mui.toast('请输入正确的数字[30.0-40.0]');
					return;
				}
              

				if (this.report.isGoto == "true" || this.report.isGoto == true) {
					this.report.isGoto = true;
				} else {
					this.report.isGoto = false;
				}
				if (this.report.isTouch == "true" || this.report.isTouch == true) {
					this.report.isTouch = true;
				} else {
					this.report.isTouch = false;
				}
             
				// if (this.report.pictures.length == 0) {
				// 	mui.toast("请上传家庭成员健康码!");
				// 	return;
				// }
				this.curDateIsUpload = true;

				if (this.report.temperature > this.max) {
					//	mui.alert("提交温度大于等于<span style='color: red'>37.2°</span><br/>需要点击下方【确认提交】<br/>确认后不能修改！");
					//	mui.alert("提交温度大于等于<span style='color: red'>37.2°</span><br/><ul><li>1、过高体温将会上报至平台管理人员</li><li>2、过高体温将会上报至学校领导</li></ul><br/>需要点击下方【确认提交】<br/>确认后不能修改！");
					mui.alert("提交体温<span style='color: red'>" + this.report.temperature +
						"℃</span>为异常体温，系统会将异常数据通报公司相关负责人。<br>如体温属实请点击下方【确认提交】按钮，确认后无法修改！");
				} else {
					mui.alert("需要点击下方【确认提交】<br/>确认后不能修改！");
				}
				//mui.alert("需要点击下方确认提交，确认后不能修改！");


			},
            getInfo() {
                this.isLoading = true;
                API_Health.curDateIsUpload().then(data => {
                    this.curDateIsUpload = data;
                    this.send = data;

                    if (data) {
                        API_Health.getDetail(this.id, '1').then(response => {
                            this.isLoading = false;
                            this.student = response;

                            if (response.personHealthLedger != null) {
								this.report.vaccinationStatusN = response.personHealthLedger.vaccinationStatusN;
								if(response.personHealthLedger.healthCode){
									this.report.healthCodeN = this.healthCodeObj[response.personHealthLedger.healthCode];
								}
								
								
                                this.report.healthStatusN = response.personHealthLedger.healthStatusN;
                                this.report.healthRemark = response.personHealthLedger.healthRemark;
                                this.report.familyStatusN = response.personHealthLedger.familyStatusN;
                                this.report.isGoto = response.personHealthLedger.isGoto;
                                this.report.isTouch = response.personHealthLedger.isTouch;
                                this.report.pictures = response.personHealthLedger.familyGreenCode.split(',');
                                this.report.temperature = response.personHealthLedger.temperature;
                                this.address=response.personHealthLedger.address;

                            }

                        }).catch(error => {
                            this.isLoading = false;
                            mui.toast(error);
                        })

                    } else {
                        this.getPoint();
                        API_Health.getPersonInfo('1').then(response => {
                            this.isLoading = false;
                            this.student = response;
                            if (response.personHealthLedger != null) {
								
                                this.report.healthRemark = response.personHealthLedger.healthRemark;
                                //this.report.temperature=response.personHealthLedger.temperature;
                                this.report.healthStatusN = response.personHealthLedger.healthStatusN;
                                this.report.familyStatusN = response.personHealthLedger.familyStatusN;
                                this.report.vaccinationStatusN = response.personHealthLedger.vaccinationStatusN;
                                this.report.vaccinationStatus = response.personHealthLedger.vaccinationStatus;
							
								this.report.healthCode = response.personHealthLedger.healthCode;
								if(response.personHealthLedger.healthCode){
									this.report.healthCodeN = this.healthCodeObj[response.personHealthLedger.healthCode];
								}
                                this.report.healthStatus = response.personHealthLedger.healthStatus;
                                this.report.familyStatus = response.personHealthLedger.familyStatus;
                               
                                this.report.isGoto = response.personHealthLedger.isGoto;
                                this.report.isTouch = response.personHealthLedger.isTouch;
                                //this.report.pictures=response.personHealthLedger.familyGreenCode.split(',');
                            }
                            this.id = response.id;




                        }).catch(error => {
                            this.isLoading = false;
                            mui.toast(error);
                        })
                    }
                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
			},
			getStatus() {

				API_Health.getHealthStatusList("健康情况").then(data => {
					var arr = data.map(item => {
						return {
							value: item.value,
							text: item.name
						};
					});
					this.healthStatusList = arr


				}).catch(error => {
					//this.isLoading = false;
					mui.toast(error);
				})
				API_Health.getHealthStatusList("疫苗接种情况").then(data => {
					var arr = data.map(item => {
						return {
							value: item.value,
							text: item.name
						};
					});
					this.healthStatusListVaccination = arr
				
				
				}).catch(error => {
					//this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取详情
			getDetail() {
				this.isLoading = true;

				API_Health.getDetail(this.id, '3').then(response => {
					this.isLoading = false;

					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {},
		},
		mounted() {
            WxJsApi.getWxConfig(['chooseImage', 'getLocalImgData', 'getLocation']);
            //获取经纬度
            this.getStatus();
            this.getInfo();

		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.fyy-popup-button {
		display: flex;
		padding: 10px
	}

	.fyy-popup-button .mui-col-xs-6 {
		padding: 0 5px
	}

	.fyy-popup-button button {
		width: 100%
	}
</style>