chenyue
/
PC-application
Fork de raolu/PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>康复管理</title>
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/new_recover.css" />
		<link rel="stylesheet" type="text/css" href="../css/personal-manage.css" />
		<style>
			.content {height: calc(100% - 14px);}
		</style>
	</head>
	<body class="m0">
	<div id="app" class="c-333" v-cloak>
		<div class="content clearfix">
	        <div class="fl c-h100 w350 person_info c-border-r">
	        	<div class="plr5 c-h100">
		        	<h4 class="m0 pl15 lh40 c-border-b c-position-r"><em class="c-position-a set-blue-span"></em>个人基础信息</h4>
	    			<div class="bgc-f5f5fa mt10 ptb10 plr10">
	    				<div class="clearfix">
		    				<div class="fl w-100-66">
		    					<p class="m0 p0 mb10">
		    						<span class="c-999">姓名：</span>{{recoverPatInfo.patientInfo.patientName}}
		    						<span class="c-999 ml20">性别：</span>{{recoverPatInfo.patientInfo.sex == 1 ? "男" : "女"}}
		    						<span class="c-999 ml20">年龄：</span>{{recoverPatInfo.patientInfo.age}}岁
		    					</p>
		    					<p class="m0 p0 mb10">
		    						<span class="c-999">健康情况：</span>{{recoverPatInfo.patientInfo.healthyCondition}}
		    					</p>
		    					<p class="m0 p0 mb10">
		    						<span class="c-999">联系电话：</span><span class="c-12b7f5 cur-pit" v-if="isMobile" @click="changeStatu()">点击查看</span><span v-else>{{recoverPatInfo.patientInfo.mobile}}</span>
		    					</p>
		    				</div>
		    				<div class="fr set-photo">
		    					<img :src="setPatImg(recoverPatInfo.patientInfo.photo)" alt="居民头像" />
		    				</div>
	    				</div>
	    				<p class="m0 p0 mb10">
    						<span class="c-999">签约社区：</span>{{recoverPatInfo.patientInfo.signHospitalName}}
    					</p>
    					<p class="m0 p0">
    						<span class="c-999">康复机构：</span>{{recoverPatInfo.patientInfo.rehabilitationOrg}}
    					</p>
	    			</div>
	    			<h4 class="m0 pl15 lh40 c-border-b c-position-r"><em class="c-position-a set-blue-span"></em>服务医生</h4>
	    			<!--<div class="pt10 pb10" style="overflow: hidden; height: 190px;">-->
	    			<div class="pt10 pb10" style="overflow: hidden; height: calc(100% - 271px);">
		    			<ul class="p0 m0 c-h100" style="overflow: auto;">
		    				<li class="clearfix plr20 ptb10 doc-li" v-for="(docInfo, index) in recoverPatInfo.serviceDoctorList" :key="index">
		    					<div class="fl set-photo">
		    						<img :src="setPatImg(docInfo.doctorPhoto, 1)" alt="医生头像" />
		    					</div>
		    					<div class="fl ml10 lh18">
		    						<p class="m0 p0 c-f16">{{docInfo.doctorName}}</p>
		    						<p class="m0 p0 mt10 c-999">{{docInfo.type}}</p>
		    					</div>
		    					<div class="fr w100 ml40 lh18">
		    						<p class="m0 p0">完成项目：<span class="c-orange">{{docInfo.finishedItem}}</span></p>
		    						<p class="m0 p0 mt10">服务次数：<span class="c-orange">{{docInfo.serviceCount}}</span></p>
		    					</div>
		    				</li>
		    			</ul>
	    			</div>
	    			<!--<h4 class="m0 pl10 lh40 c-border-b">出院小结</h4>
	    			<div class="ptb10" style="overflow: hidden; height: calc(100% - 481px);">
	    				<ul class="m0 p0 c-border b-r-3 c-h100" style="overflow: auto;">
	    					<li class="pt5 plr10">
	    						<p class="c-999 lh40 clearfix">
	    							<span class="fl">冠心病诊断</span>
	    							<span class="fr">2018-08-01</span>
	    						</p>
	    						<div class="bgc-f5f5fa plr5 ptb10" style="line-height: 20px;">
	    							&emsp;&emsp;这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容这是诊断内容
	    						</div>
	    					</li>
	    				</ul>
	    			</div>-->
    			</div>
	        </div>
	        <div class="fl c-h100 w-100-350">
	        	<div class="fl w-100-300 c-h100">
	        		<div class="plr5">
		        		<h4 class="m0 pl15 lh40 c-border-b c-position-r clearfix">
		        			<em class="c-position-a set-blue-span"></em>
		        			<span class="fl">康复计划</span>
		        			<span class="fl plr20 ml20 c-f12 bgc-12b7f5 c-fff cur-pit" @click="gotoNewplan()" v-if="doctorType == 1">新建计划</span>
		        			<span class="fr w80 c-333 c-f12 c-t-center">进行中：{{recoverPatInfo.planUnderway}}</span>
		        			<span class="fr w80 c-333 c-f12 c-t-center">已完成：{{recoverPatInfo.planFinish}}</span>
		        		</h4>
		        		<div class="pb10" style="overflow: hidden; height: 230px;">
			    			<ul class="p0 plr5 m0 c-h100" style="overflow: auto;">
			    				<li class="clearfix plr5 ptb10 mt10 plan-li cur-pit c-border b-r-3" v-for="(plan, index) in recoverPatInfo.planList" :key="index" @click="jumpPlan(plan)">
			    					<div class="fl w300">
			    						<p class="p0 m0 lh22 clearfix">
			    							<span class="fl">{{plan.planTypeName}}</span>
			    							<span class="fr c-999">{{plan.time}}</span>
			    						</p>
			    						<div class="clearfix">
			    							<p class="fl w-100-78 bgc-c1c1c1 lh22 b-r-11 c-position-r c-t-center">
			    								<span class="c-position-a bgc-orange lh22 b-r-11 c-t-center c-fff" :style="{width: setPercent(plan), left: 0}"></span>
			    								<span class="c-position-r w-100 c-t-center">{{setPercent(plan)}}</span>
			    							</p>
			    							<span class="fr w60 c-999 lh22">{{plan.allFinishCount}}/{{plan.allCount}}</span>
			    						</div>
			    					</div>
			    					<div class="fr c-007cd9 lh40">{{plan.statusName}}</div>
			    				</li>
			    				<li class="ptb10 c-t-center" v-if="!recoverPatInfo.planList || !recoverPatInfo.planList.length">暂无相关计划</li>
			    			</ul>
		    			</div>
	    			</div>
	    			<h4 class="m0 pl15 pr5 lh40 c-border-tb clearfix c-position-r"><em class="c-position-a set-blue-span"></em>康复相关记录<span class="fr w80 c-333 c-f12 c-t-center">已完成：{{finishData.planDetailFinish}}</span></h4>
	    			<div style="overflow: hidden; height: calc(100% - 323px);">
	    				<ul class="p0 m0 c-h100 c-999" style="overflow: auto;">
	    					<li class="clearfix plr10 cur-pit record-li" v-for="(plan, index) in planDetailList" :class="{'bgc-dff5fc c-12b7f5':plan.istaDay}" @click="lookProject(plan)">
	    						<div class="fl w80 ptb10 c-t-right">
	    							<p class="p0 m0 lh18">{{plan.executeTime}}</p>
	    						</div>
	    						<div class="fl set-dianxian plr20 ptb10 clerfix">
	    							<span class="fl set-taday mt8 c-t-center c-fff" v-if="plan.istaDay">今</span>
	    							<span class="fl mlr5 mt13 set-row bgc-e1e1e1" v-else></span>
	    						</div>
	    						<div class="fl ptb10 w-100-220">
	    							<p class="p0 m0 lh18">{{plan.title}}</p>
	    							<p class="p0 m0 lh18 txt-ells">{{plan.content}}</p>
	    						</div>
	    						<div class="fr ptb10 w60 c-t-center">
	    							<p class="p0 m0 lh18">已完成</p>
	    							<p class="p0 m0 lh18">查看</p>
	    						</div>
	    					</li>
	    					<li class="plr20" v-if="isFinishMore">
	    						<div class="c-border lh40 b-r-3 c-t-center cur-pit" @click="addEventPage()">点击查看更早时间</div>
	    					</li>
	    					<li class="ptb10 c-t-center c-333" v-if="!planDetailList.length">暂无相关记录</li>
	    				</ul>
	    			</div>
	        	</div>
	        	<div class="fr w300 c-h100 c-border-l">
	        		<div class="plr5 c-h100">
	        			<h4 class="m0 pl15 pr5 lh40 c-border-b clearfix c-position-r"><em class="c-position-a set-blue-span"></em>就诊记录</h4>
	        			<div class="lh30 c-border-b c-t-center clearfix">
	        				<span class="fl w96 cur-pit" :class="{'active':eventType == 1}" @click="selectType(1)">门诊</span>
	        				<span class="fl w96 cur-pit c-border-l" :class="{'active':eventType == 2}" @click="selectType(2)">住院</span>
	        				<span class="fl w96 cur-pit c-border-l" :class="{'active':eventType == 3}" @click="selectType(3)">体检</span>
	        			</div>
	        			<div style="overflow: hidden; height: calc(100% - 72px);">
	        				<ul class="c-h100 p0 m0" style="overflow: auto;">
	        					<li class="clearfix" v-for="(record, index) in seeRecord" :key="index">
	        						<div class="fl set-dianxian h73 plr10 pt20 clerfix">
	    								<span class="fl mlr5 set-row bgc-red" v-if="record.eventType == 2"></span>
	    								<span class="fl mlr5 set-row bgc-green" v-if="record.eventType == 3"></span>
	    								<span class="fl mlr5 set-row bgc-orange" v-if="record.eventType == 1"></span>
	    							</div>
	    							<div class="fl w-100-60 pt15">
		    							<div class=" c-border b-r-3">
		    								<p class="m0 p0 plr5 c-fff bgc-red lh22 clearfix" v-if="record.eventType == 2">住院<span class="fr">{{record.eventDate}}</span></p>
		    								<p class="m0 p0 plr5 c-fff bgc-green lh22 clearfix" v-if="record.eventType == 3">体检<span class="fr">{{record.eventDate}}</span></p>
		    								<p class="m0 p0 plr5 c-fff bgc-orange lh22 clearfix" v-if="record.eventType == 1">门诊<span class="fr">{{record.eventDate}}</span></p>
		    								<p class="m0 p0 plr5 pt5 lh22">{{record.dianosis}}</p>
		    								<p class="m0 p0 pr5 pb5 pl20 set-hospital">{{record.orgName}}</p>
		    							</div>
	    							</div>
	        					</li>
	        					<li class="c-t-center c-12b7f5" v-if="hasMoreRecord">查看更多</li>
	        					<li class="c-t-center ptb10" v-if="!seeRecord.length">无就诊记录</li>
	        				</ul>
	        			</div>
	        		</div>
	        	</div>
		        </div>
	        </div>
	    </div>
	</div>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery-2.2.4.js"></script>
        <script src="../../../plugins/layer/layer.min.js"></script>
        <script src="../../../plugins/toastr/toastr.min.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript"></script>
		<script src="../../../api/recover_api.js" type="text/javascript"></script>
		<script type="text/javascript">
			var doctorType = (JSON.parse(window.localStorage.getItem('wlyyAgent'))||{}).doctorType
			var httpData=GetRequest()
			
			function showSuccessMessage(msg) {
				layer.msg(msg, {
					icon: 1
				})
			}
			
			function showErrorMessage(msg) {
				layer.msg(msg, {
					icon: 5
				})
			}
			
			function showWarningMessage(msg) {
				layer.msg(msg, {
					icon: 2
				})
			}
			
			function showInfoMessage(msg) {
				layer.msg(msg, {
					icon: 6
				})
			}
			var nowDate = new Date().format("yyyy/MM/dd")
			
			recoverVue = new Vue({
                el: "#app",
                data: {
                	doctorType: doctorType,
                	isMobile: true,
                	recoverPatInfo: null,
                	finishData: null,
                	seeRecord: [],
                	planDetailList: [],
                	isFinishMore: false,
                	page: 1,
                	eventPage: 1,
                	eventType: 1,
                	hasMoreRecord: null
                },
                mounted: function() {
                	this.patientRehabilitationDetail()
                	this.recentPlanDetailRecord()
                	this.archivesEvent()
                },
                methods: {
                	changeStatu: function() {
                		this.isMobile = false
                	},
                	gotoNewplan: function() {
                		location.href = "new_recover.html?patient=" + httpData.patientCode
                	},
                	jumpPlan: function(plan) {
                		location.href = "../../rehabilitation/html/rehabilitation_management.html?planId=" + plan.planId
                	},
					lookProject: function(obj) {
						layer.open({
							type: 2,
							area: ['600px', '500px'],
							shade: 0.5,
							title: '服务项目内容',
							closeBtn: 1,
							shift: 5,
							shadeClose: false, //点击遮罩关闭层
							content: "project-detail.html?planId=" + obj.id
						});
					},
					patientRehabilitationDetail: function() {
			    		var vm = this,
			    			loadding = layer.load(0, {shade: false}),
			    			params = {
			    				patientCode: httpData.patientCode || "e040dd6814b648ceb3ba8d8a04f9f22c"
			    			}
						recoverAPI.patientRehabilitationDetail(params).then(function(res) {
							layer.close(loadding)
							if(res.status == 200) {
								vm.recoverPatInfo = res.data
							} else {
								showErrorMessage(res.msg);
							}
						})
			    	},
			    	recentPlanDetailRecord: function() {
			    		var vm = this,
			    			loadding = layer.load(0, {shade: false}),
			    			params = {
			    				patientCode: httpData.patientCode || "e040dd6814b648ceb3ba8d8a04f9f22c",
			    				page: vm.eventPage,
			    				pageSize: 10
			    			}
						recoverAPI.recentPlanDetailRecord(params).then(function(res) {
							layer.close(loadding)
							if(res.status == 200) {
								vm.finishData = res.data
								vm.planDetailList = vm.planDetailList.concat(vm.finishData.planDetailList)
								vm.planDetailList = $.each(vm.planDetailList, function(index, o) {
									if(nowDate == o.executeTime.split(" ")[0]) {
										o.istaDay = true
									}
									return o
								});
								if(vm.finishData.planDetailList.length >= 10) {
									vm.isFinishMore = true
								} else {
									vm.isFinishMore = false
								}
							} else {
								showErrorMessage(res.msg);
							}
						})
			    	},
			    	selectType: function(type) {
			    		this.eventType = type
			    		this.seeRecord = []
			    		this.page = 1
			    		this.archivesEvent()
			    	},
			    	archivesEvent: function() {
			    		var vm = this,
			    			loadding = layer.load(0, {shade: false}),
			    			params = {
			    				patient: httpData.patientCode || "e040dd6814b648ceb3ba8d8a04f9f22c",
			    				type: vm.eventType,
			    				page: vm.page,
			    				pageSize: 20
			    			}
						recoverAPI.archivesEvent(params).then(function(res) {
							layer.close(loadding)
							if(res.status == 200) {
								this.hasMoreRecord = res.data.length == 20 ? true : false
								 vm.seeRecord = vm.seeRecord.concat(res.data)
							} else {
								showErrorMessage(res.msg);
							}
						})
			    	},
			    	setPatImg: function(src, doc) {
			    		if(!src) {
			    			if(doc) {
			    				return "../../../images/d-default.png"
			    			} else {
			    				return "../../../images/p-female.png"
			    			}
			    		} else {
			    			var str = httpRequest.getImgUrl(src);
			    			return str
			    		}
			    	},
			    	addEventPage: function() {
			    		this.eventPage++;
			    		this.recentPlanDetailRecord()
			    	},
			    	addPage: function() {
			    		this.page++;
			    		this.archivesEvent()
			    	},
			    	setPercent: function(plan) {
			    		return Math.floor(plan.allFinishCount / plan.allCount * 100) + "%"
			    	}
                }
            })
		</script>
	</body>
</html>