康复管理模块

api/rehabilitation-api.js

@@ -0,0 +1,44 @@
(function(exports) {
    var rehaAPI = {
    	//获取日历列表
		calendarPlanDetail: function(data) {
			return httpRequest.get("doctor/specialist/rehabilitation/calendarPlanDetail",{data:data})
		},
		//获取列表
		calendarPlanDetailList: function(data) {
			return httpRequest.get("doctor/specialist/rehabilitation/calendarPlanDetailList",{data:data})
		},
		serviceItemList:function(data){
			return httpRequest.get("doctor/specialist/rehabilitation/serviceItemList",{data:data})
		},
		serviceItem:function(data){
			return httpRequest.get("doctor/specialist/rehabilitation/serviceItem",{data:data})
		},
		//获取医生二维码
		createServiceQrCode: function(data){
			return httpRequest.post('doctor/specialist/rehabilitation/createServiceQrCode',{data:data})
		},
//		居民扫码后验证是否是关联的居民扫码(居民端)
		checkAfterQrCode: function(data){
			return httpRequest.post('patient/specialist/rehabilitation/checkAfterQrCode',{data:data})
		},
		upload:function(file){
			return httpRequest.post('upload/fastDFSImag',{data: file,contentType: false,
            cache: false,
            processData: false})
		},
		updateNoteAndImageRehabilitationOperate:function(data){
			return httpRequest.post('doctor/specialist/rehabilitation/updateNoteAndImageRehabilitationOperate',{data:data})
		},
//		新增operateRecodr
		saveRehabilitationOperateRecodr:function(data){
			return httpRequest.post('doctor/specialist/rehabilitation/saveRehabilitationOperateRecodr',{data:data})
		},
		
		
		
		
		
	}
    exports.rehaAPI = rehaAPI;
})(window)

app/article/html/article.html

@@ -80,6 +80,7 @@
	    <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript" src="../../../api/jbsc-api.js" ></script>
	    <script type="application/javascript" src="../../../api/rehabilitation-api.js"></script>
		<script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../../../plugins/layer/layer.min.js"></script>-->
        <script type="text/javascript">
@@ -111,6 +112,8 @@
		            levelTit2: '请选择',
		            isShowLevel2: false,
		            resultCode:httpData['resultCode'],
		            isReha:httpData['isReha'],
		            planId:httpData['planId'],
		            selectObj: {
		                firstLevelCategoryId: null, // 文章一级分类
		                secondLevelCategoryId: null, // 文章二级分类
@@ -151,10 +154,9 @@
		            allRecords: null
			    },
				 mounted: function(){
			        var  vm = this
			        this.getJkEduArticleLevel(1)
			        this.getJkEduArticleLevel(2)
			        this.queryArticlePcList(vm.selectObj)
			        this.queryArticlePcList(this.selectObj)
			    },
			    methods: {
			       	getJkEduArticleLevel:function(num, firstlevelId) {
@@ -294,11 +296,39 @@
			            jbscAPI.doctorSendArticleToPatients(obj).then(function(res){
			            	top.layer.close(loadding);
			            	if(res.status==10000){
			            		vm.updataHeathStatus();
			            		if(vm.isReha){
			            			console.log(obj.articleId)
			            			vm.saveRehabilitationOperateRecodr(obj.articleId);
			            		}else{			            			
			            			vm.updataHeathStatus();
			            		}
			            	}else{			            		
			            		top.layer.msg(res.message, {icon: 1});
			            	}
			            })   
			        },
			        saveRehabilitationOperateRecodr:function(id){
			        	var vm=this;
			        	var userInfo = JSON.parse(window.localStorage.getItem(httpRequest.agentName)); 
			        	var params={
			        		rehabilitationDetailId:vm.planId,
							node:null,
							patientCode:httpData['code'],
							doctorCode:userInfo.uid,
							relationRecordType:3,
							relation_record_code:id,
							relationRecordImg:null,
							status:0
			        	}
			        	rehaAPI.saveRehabilitationOperateRecodr({dataJson:JSON.stringify(params)}).then(function(res){
			        		var icon=5;
			        		if(res.status==200){//更新父窗体的状态
			        			icon=1
			        			parent.serviceItem.getServiceItem();
			        		}
			        		top.layer.msg(res.msg, {icon: icon});
			        	})
			        	
			        },
				    updataHeathStatus:function(){
				    	var obj={

app/rehabilitation/css/date.css

@@ -0,0 +1,44 @@
#test-n2 {
	position: relative;
	min-height: 400px !important;
	width: 100% !important;
}
#test-n2  #layui-laydate1,#test-n2  #layui-laydate1 .layui-laydate-main,#test-n2 .layui-laydate-content table{
	width: 100%;
}
#test-n2 .layui-laydate-content table tbody{
	height:calc(100vh - 240px)!important;
}
.text_box{
	padding: 15px !important;
}
#test-n3 {
	position: relative;
	min-height: 400px !important;
	width: 100% !important;
}
#layui-laydate1{
	width: 100% !important;
}
#test-n3  #layui-laydate1 .layui-laydate-main{
	width:50%;
}
#test-n3  #layui-laydate1 .layui-laydate-main table{
	width: 100% !important;
}
#test-n3 .layui-laydate-content table tbody{
	height:calc(100vh - 240px)!important;
}
.layui-laydate-content td, .layui-laydate-content th{
	width: 90px !important;
	height: 90px !important;
}

app/rehabilitation/html/guide_the_message.html

@@ -0,0 +1,316 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>完成项目服务</title>
		<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
	    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
	    <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
		<style type="text/css">
			[v-cloak]{display: none;}
			.flex-box{display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
				  display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
				  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
				  -webkit-box-pack: center;
				  -ms-flex-pack: center;
				  justify-content: center;
				  -webkit-box-align: center;
				  -ms-flex-align: center;
				  align-items: center;
				  -ms-flex-wrap: wrap;
				      flex-wrap: wrap;
				  }
			.flex-box-item{-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
				  -moz-box-flex: 1;         /* OLD - Firefox 19- */
				  -webkit-flex: 1;          /* Chrome */
				  -ms-flex: 1;              /* IE 10 */
				  width: 50%;               /* For old syntax, otherwise collapses. */
				  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
				 position: relative;}
			.icon{width: 12px;height: 12px;vertical-align: middle;background-size: 100% auto;background-repeat: no-repeat;display: inline-block;background-position: center center;}
			.icon-arrow-down{background-image: url(../images/icon/tiaozhuan_xia_icon.png);}
			.icon-gouxuan{background-image: url(../images/icon/gouxuan_lanse_icon.png);}
			.icon-check{background-image: url(../images/icon/zhankai_btn.png);}
			.icon-arrow-right{background-image: url(../images/icon/tiaozhuan_icon.png);background-size: auto 100%;}
			.icon-check,.icon-arrow-down{transition: all .3s ease-in-out;}
			.active .icon-check,.collapsed .icon-arrow-down{transform: rotateZ(180deg);}
			.icon-16{width: 16px;height: 16px;}
			.icon-18{width: 18px;height: 18px;}
			.service-top{font-size: 0;line-height: 1;font-weight: 500;}
			.service-name span{vertical-align: middle;font-size: 16px;}
			.service-name span+span{margin-left: 10px;}
			.service-name{line-height: 1.5;margin-bottom: 0;}
			.service-index{border: 1px solid #12b7f5;width: 16px;line-height: 1;height: 16px;font-size: 14px;display: inline-block;text-align: center;color: #12b7f5;}
			.label-group{padding-left: 26px;}
			.label-group span{color: #12b7f5;font-size: 14px;line-height: 1;margin-top: 10px;}
			.label-blue{border-radius: 5px;border: solid 1px #12b7f5;padding: 4px 15px;display: inline-block;margin-right: 27px;}
			.panel-body{padding: 20px 20px 0;font-size: 14px;color: #999;}
			.service-content{line-height: 30px;padding-bottom: 15px;border-bottom: 1px solid #d7dce6;}
			.service-address{border-bottom: 1px solid #d7dce6;}
			.btn-yuyue{background-color: #02cfb9;color: #fff;}
			.btn-yuyue:hover,.btn-yuyue:link{color: #fff;background-color: #01c1ad;}
			.btn-fuwuma{background-color: #2dbe55;color: #fff;}
			.btn-fuwuma:hover,.btn-fuwuma:link{color: #fff;background-color: #209440;}
			.btn-zhidao{background-color: #12b7f5;color: #fff;}
			.btn-zhidao:hover,.btn-zhidao:link{color: #fff;background-color: #10a0d6;}
			.service-operation .btn{width: 90px;}
			.view-detail{color: #12b7f5;cursor: pointer;}
			.record-list{max-height: 0;overflow: hidden;transition: all .3s linear;}
			.record-list.active{max-height: 999px;}
			.record-item{background-color: #f5f5fa;margin-bottom: 10px;padding: 10px;}
			.complete-title{font-size: 14px;color: #333;padding: 10px 0;border-bottom: 1px solid #D7DCE6;}
			.guanlian-list{border: 1px solid #d7dce6;padding: 3px 5px;}
			.upload-box{padding: 10px 0 10px 10px;overflow: hidden;border: 1px solid #d7dce6;}
			.upload-box li{width: 60px;height: 60px;position: relative;display: block;float: left;margin-right: 10px;}
			.upload-box li img{width: 100%;display: block;}
			.upload-img-box{width: 100%;height: 100%;overflow: hidden;}
			.delete-img{position: absolute;right: -5px;top: -5px;color: #fff;background-color: #ccc;border-radius: 100%;text-align: center;line-height: 15px;width: 15px;height: 15px;}
			.upload-img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;z-index: 3;font-size: 0;width: 100%;height: 100%;}
			.add-img{font-size: 40px;line-height: 60px;font-weight: 500;width: 60px;height: 60px;display: block;text-align: center;border: 1px dashed #d7dce6;color: #bec8d2;}
			.yslb>span:after{content: '、';}
			.yslb>span:last-child:after{display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak role="tablist" aria-multiselectable="true">
		  <div class="panelcurPage">
		    <div class="panel-heading" role="tab" @click="changeCollapseIndex(index)">
		      <h4 class="panel-title">
		        <a role="button" class="flex-box">
		          <div class="flex-box-item service-top">
		          	<p class="service-name"><span class="service-index">1</span><span>{{service.title}}</span></p>
		         	<div class="label-group">
		         		<span class="pull-right mt5"><i v-if="service.statusName=='已完成'" class="icon icon-gouxuan icon-18 mr5"></i>{{service.statusName}}</span>
		         		<span class="label-blue">{{service.shortExecuteTime}}</span>
		         		<span class="label-blue" v-for="doctor in service.executeDoctorList">{{doctor}}</span>
		         	</div>
		          </div>
		          <!--<span class="icon icon-arrow-down ml50"></span>-->
		        </a>
		      </h4>
		    </div>
		    <div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		      	<div class="panel-body">
		      		<div class="service-content">{{service.content}}</div>
		      		<div class="service-address ptb20">
		      			<div class="flex-box">
		      				<div class="flex-box-item">
		      					<p class="m0">地点：{{service.hospitalName}}</p>
		      					<p class="m0">时间：{{service.executeTime | formatDate}}</p>
		      				</div>
		      				<div class="flex-box-item">
		      					<p class="m0 yslb">执行：<span v-for="(doctor,index) in service.executeDoctorList">{{doctor}}</span></p>
		      					<p class="m0">收费：{{service.expense}}元</p>
		      				</div>
		      			</div>
		      		</div>
		   		</div>
	       </div>
		  </div>
	   		<div class="panel-body">
	      		<div class="service-operation pt10">
	      			<p><span class="pull-right view-detail" :class="{active:isCollapse}" @click="chakan"><i class="icon icon-check mr5 icon-16"></i>{{isCollapse?'收起详情':'查看详情'}}</span>指导与汇报记录</p>
	      			<div class="record-list" :class="{active:isCollapse}">
	      				<div class="record-item" v-for="item in service.messageList">
	      					<div class="flex-box c-999 f14">
		      					<div class="flex-box-item">
		      						{{item.adminTeamName}}
		      					</div>
		      					<div class="flex-box-item">
		      						{{item.createTime}}
		      					</div>
		      				</div>
		      				<div class="f14 c-333">{{item.content}}</div>
	      				</div>
	      			</div>
	      		</div>
	      		<div class="complete-info pt10">
	      			<div class="complete-title">完成情况</div>
	      			<div class="ptb10">
	      				<p class="f14 mb5"><span class="c-999">完成情况：</span>{{service.completeTime}}</p>
	      				<p class="f14 mb5"><span class="c-999">执行医生：</span>{{service.operatorDoctorName}}</p>
	      			</div>
	      		</div>
	      		<div class="note-info pt10">
	      			<p class="f14 c-333">服务完成笔记</p>
	      			<textarea v-if="service.status!=1" class="form-control" style="resize: none;" rows="4" placeholder="可备注您的服务记录" v-model="service.node"></textarea>
	      			<div v-if="service.status==1">{{service.node}}</div>
	      		</div>
	      		<div class="note-info pt10" style="display: none;">
	      			<p class="f14 c-333">关联记录</p>
	      			<p class="guanlian-list text-center">
	      				<span class="pull-right"><i class="icon icon-arrow-right"></i></span>随访记录sfs
	      			</p>
	      		</div>
	      		<div class="note-info pt10">
	      			<p class="f14 c-333">相关记录</p>
	      			<ul class="upload-box"  v-if="service.status!=1">
	      				<li class="flex-box" v-for="(img,index) in upImgs">
	      					<div class="upload-img-box">      						
		      					<img :src="img.baseUrl" />
	      					</div>
	      					<a class="delete-img" @click="deleteImg(index)">&times;</a>
	      				</li>
	      				<li class="flex-box" v-if="upImgs.length<5">
	      					<span class="add-img">＋</span>
	      					<input type="file" @change="upLoadImgToBase64" class="upload-img" />
	      				</li>
	      			</ul>
	      			<ul class="upload-box"  v-if="service.status==1">
	      				<li class="flex-box" v-for="img in service.relationRecordImg">
	      					<div class="upload-img-box">      						
		      					<img :src="img | getImgUrl" />
	      					</div>
	      				</li>
	      			</ul>
	      		</div>
	      		<div class="text-center ptb50" v-if="service.status!=1">
	      			<button class="btn btn-zhidao" @click="qrwc">确认完成</button>
	      		</div>
	      	</div>
		</div>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-2.2.4.js" ></script>
		<script type="text/javascript" src="../../../api/http-request.js"></script>
		<script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			!function(){
				var httpData=GetRequest();
				new Vue({
					el:"#app",
					data:{
						imgData: {
				            accept: 'image/gif, image/jpeg, image/png, image/jpg',
				        },
				        isCollapse:false,
				        upImgs:[],
				        upImgArr:[],
				        planid:httpData['planid'],
				        service:[]
					},
					mounted:function(){
						this.getServiceItem();
					},
					methods:{
						getServiceItem:function(){
							var vm=this;
							var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
							rehaAPI.serviceItem({planDetailId:vm.planid}).then(function(res){
								top.layer.close(loadding);
								if(res.status==200){
									vm.service=res.data;
								}else{
									top.layer.msg(res.msg,{icon:5});
								}
							})
						},
						deleteImg:function(idx){
							console.log(idx)
							this.upImgs.splice(idx,1)
						},
						chakan:function(){
							this.isCollapse=!this.isCollapse;
						},
						upLoadImgToBase64:function(){
							var vm=this;
				            var img1=event.target.files[0];  
				            console.log(img1)
				            var reader =new FileReader();  
				            var type=img1.type;//文件的类型，判断是否是图片  
				            var size=img1.size;//文件的大小，判断图片的大小  
				            if(this.imgData.accept.indexOf(type) == -1){  
				                alert('请选择我们支持的图片格式！');  
				                return false;  
				            }  
				            if(size>3145728){  
				                alert('请选择3M以内的图片！');  
				                return false;  
				            }
				            reader.readAsDataURL(img1);
			             	reader.onload = function (e) {
			             		vm.upImgs.push({baseUrl:e.target.result});
			             		vm.upImgArr.push(img1);
//			             		vm.uploadImg(vm.upImgArr);
			             	}
						},
						qrwc:function(){
							var vm=this;
							vm.uploadImg(vm.upImgArr,vm.updateNoteAndImageRehabilitationOperate);
						},
						 //上传图片
				        uploadImg:function(data,cb){
				        	var vm=this;
				        	var len = data.length;
						    if (!len){
						        cb && cb();
						    }else{
						    	var file=data[len-1];
						    	var formData = new FormData();
								formData.append('file', file);
						    	rehaAPI.upload(formData).then(function(res){
						    		console.log(res)
						    		if(res.status==200){
						    			console.log(vm.upImgs[len-1])
						    			vm.upImgs[len-1].img=res.data;
						    			data.pop();
						    			vm.uploadImg(data,cb);
						    		}
								})
						    }
						},
						updateNoteAndImageRehabilitationOperate:function(){
							var vm=this;
							var _image=[];
							for(var i in vm.upImgs){
								_image.push(vm.upImgs[i].img);
							}
							var params={
								planDetailId:vm.planid,
								node:vm.service.node,
								image:JSON.stringify(_image)
							}
							var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
							rehaAPI.updateNoteAndImageRehabilitationOperate(params).then(function(res){
					    		top.layer.close(loadding);
					    		console.log(res)
					    		if(res.status==200){
					    			vm.getServiceItem();
					    			parent.serviceItem.getServiceItemList();
					    		}
							})
						},
			       	},
					filters:{
					  	formatDate:function(value, format) {
					  		if(!value) return ;
					  		var fmt=format || "yyyy-MM-dd hh:mm";
							var date = new Date(value);
							if (/(y+)/.test(fmt)) {
								fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
							}
							let o = {
								'M+': date.getMonth() + 1,
								'd+': date.getDate(),
								'h+': date.getHours(),
								'm+': date.getMinutes(),
								's+': date.getSeconds()
							};
							for (let k in o) {
								if (new RegExp(`(${k})`).test(fmt)) {
									let str = o[k] + '';
									fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
								}
							}
							return fmt;
						},
						getImgUrl:function(value){
							var url=httpRequest.getImgUrl(value);
							return url;
						}
					}
				})
			}()
		</script>
	</body>
</html>

app/rehabilitation/html/rehabilitation_management.html

@@ -0,0 +1,522 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>康复管理</title>
		<link rel="shortcut icon" href="../../favicon.ico">
	    <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
	    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
	    <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
	    <link rel="stylesheet" type="text/css" href="../css/date.css" />
		<style type="text/css">
			.flex-box{display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
				  display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
				  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
				  -webkit-box-pack: center;
				  -ms-flex-pack: center;
				  justify-content: center;
				  -webkit-box-align: center;
				  -ms-flex-align: center;
				  align-items: center;
				  -ms-flex-wrap: wrap;
				      flex-wrap: wrap;
				  }
			.flex-box-item{-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
				  -moz-box-flex: 1;         /* OLD - Firefox 19- */
				  -webkit-flex: 1;          /* Chrome */
				  -ms-flex: 1;              /* IE 10 */
				  width: 50%;               /* For old syntax, otherwise collapses. */
				  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
				 position: relative;}
			[flex-grow="2"]{-webkit-box-flex: 2;-ms-flex-positive: 2;flex-grow: 2;}
			[flex-grow="5"]{-webkit-box-flex: 5;-ms-flex-positive: 5;flex-grow: 5;}
			body,html,.c-container{height: 100%;}
			.rehabilition{height: 100%;padding-top: 49px;max-width: 1620px;margin: 0 auto;}
			.nav-content-right{height: 100%;overflow: auto;}
			.search-left{border-right: solid 1px #d7dce6;background-color: #f5f5f5;height: 100%;}
			.mw400{max-width: 400px;}
			.search-condition{padding: 20px 10px;border-bottom: solid 1px #d7dce6;}
			.search-condition p{font-size: 14px;margin-bottom: 15px;}
			.task-list{padding-left: 10px;overflow: hidden;}
			.task-list li{width: 90px;cursor: pointer;text-align: center;display: block;float: left;border-radius: 14px;font-size: 14px;margin-left: 20px;margin-bottom: 20px;color: #333333;border: solid 1px #d7dce6;padding: 3px;}
			.task-list li.active{background-color: #12b7f5;color: #fff;}
			.btn-search{background-color: #12b7f5;color: #fff;border-radius: 0;width: 120px;margin-top: 30px;}
			.btn-search:hover,.btn-search:focus,.btn-search:active,.btn-search:hover:active{background-color: #00ADEE;color: #fff;}
			/*日历*/
			.calendar-content{margin: 0 auto;}
			/*图例注释*/
			.calendar-descript{padding: 15px 20px;background-color: #fff;}
			.calendar-descript span{vertical-align: middle;}
			.icon{width: 12px;height: 12px;vertical-align: middle;background-size: 100% 100%;background-repeat: no-repeat;display: inline-block;}
			.icon-blue{background-color: #12b7f5;border-radius: 2px;}	
			.icon-green{background-color: #2dbe55;border-radius: 2px;}
			.icon-flag{background-image: url(../images/woderenwu_icon.png);}
			.icon-shuaxin{background-image: url(../images/icon/shuaxin.png);}
			.icon-shuaxin:hover{background-image: url(../images/icon/shuaxin1.png);}
			.icon-back{background-image: url(../images/icon/fanhui_icon.png);}
			.icon-back:hover{background-image: url(../images/icon/fanhui02_icon.png);}
			.icon-check{background-image: url(../images/wancheng_icon.png);}
			.icon-prev{background-image: url(../images/icon/houtui_icon.png);}
			.icon-next{background-image: url(../images/icon/qianjing_icon.png);}
			.icon-rili{background-image: url(../images/icon/rilibiao02_icon.png);}
			.rili:hover .icon-rili,.active .icon-rili{background-image: url(../images/icon/rilibiao_icon.png);}
			.icon-liebiao{background-image: url(../images/icon/shijianzhou_icon.png);}
			.shijianzhou:hover .icon-liebiao,.active .icon-liebiao{background-image: url(../images/icon/shijianzhou02_icon.png);}
			
			.icon-20{width: 20px;height: 20px;}
			.icon-16{width: 16px;height: 16px;}
			/*周期*/
			.calendar-week{background-color: #ebebf5;border: solid 1px #d7dce6;padding: 11px;}
			/*日期*/
			.calendar-days>.flex-box{border-bottom: 1px solid #d7dce6;}
			.calendar-day{height: 135px;border-left: 1px solid #d7dce6;position: relative;padding: 5px;width: 14.28571428%;border-bottom: 1px solid #d7dce6;}
			.calendar-days .calendar-day:first-child{border-left-width: 0;}
			.calendar-day:hover{-webkit-box-shadow: 0 0 0 1px #12b7f5 inset;box-shadow: 0 0 0 1px #12b7f5 inset;}
			.calendar-day.current-day{background-color: #ddf6fe;}
			.no-server{text-align: center;top: 50%;position: absolute;left: 0;right: 0;color: #c8c8c8;font-size: 18px;}
			/*彩带*/
			.coloured-ribbon{font-size: 12px;width: 22px;text-align: center;height: 40px;display: inline-block;padding-top: 8px;line-height: 1;color: #fff;}
			.coloured-box{top: 0;position: absolute;right: 5px;}
			.coloured-ribbon-blue{background: url(../images/biaoqian-lanse_img.png) center center / 100% 100% no-repeat;}
			.coloured-ribbon-green{background: url(../images/biaoqian-lvse_img.png) center center / 100% 100% no-repeat;margin-left: 5px;}
			.task-icon{position: absolute;right: 63px;top: 10px;min-height: 20px;}
			.task-icon .icon-check{position: absolute;right: -3px;bottom: 0;width: 15px;height: 15px;}
			.day-number{font-size: 28px;color: #999999;margin-bottom: 0;line-height: 1;}
			/*进度条*/
			.progress-box{position: absolute;bottom: 0;left: 0;right: 0;padding: 5px;}
			.progress-box .progress{margin-bottom: 9px;background-color: #d7dce6;border-radius: 10px;position: relative;}
			.progress-box .progress > span{position: absolute;left: 0;right: 0;text-align: center;color: #333333;top: 2px;}
			.progress-box .progress-bar{background-color: #12b7f5;}
			.progress-box .progress-bar-success{background-color: #2dbe55;}
			/*页头*/
			.page-title{position: fixed;top: 0;left: 0;right: 0;padding: 9px;border-bottom: 1px solid #d7dce6;z-index: 5;max-width: 1620px;margin: 0 auto;background-color: #fff}
			.page-title-name{padding-right: 15px;font-size: 14px;border-right: 1px solid #d7dce6;display: inline-block;margin-right: 10px;}
			.page-title span{vertical-align: middle;}
			.mr10{margin-right: 10px;}
			.page-title .icon{cursor: pointer;}
			.currentDay{font-size: 16px;margin: 0 25px;vertical-align: middle;width: 100px;text-align: justify;text-align-last: justify;display: inline-block;}
			.switch-list{border: solid 1px #12b7f5;border-radius: 6px;overflow: hidden;}
			.switch-list .icon{position: relative;top: 3px;}
			.rili,.shijianzhou{width: 40px;height: 28px;display: inline-block;float: left;background-color: #fff;}
			.rili.active,.shijianzhou.active,.rili:hover,.shijianzhou:hover{background-color: #12b7f5;border-radius: 5px;}
			/*列表展示*/
			.time-axis td{border: none !important;color: #999;}
			.time-axis th{background-color: #f5f5fa;border-bottom: solid 1px #d7dce6;}
			.time-axis td p{color: #999;}
			.ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
			.time{position: relative;}
			.time-box{position: relative;padding: 8px 50px 8px 8px!important;}
			.cur-status{position: absolute;z-index: 3;right: 5px;top: 50%;padding: 8px;line-height: 1;margin-top: -12.5px;border-radius: 100%;color: #fff;}
			.cur-status:empty{margin-top: -8px;right: 12.5px;background-color: #d7dce6;}
			[is-future="1"]{background-color: #dff5fc;}
			.time-axis tr:hover{background-color: #f5f5fa;}
			.time-axis tr:hover p{color: #333333;}
			[is-future="1"] .cur-status,[is-future="2"] .cur-status{background-color: #12b7f5;}
			[is-future="3"] .cur-status{background-color: #5cb85c;}
			.time-box:after{content: '';position: absolute;right: 0;z-index: 2;right: 19px;height: 100%;width: 1px;background-color: #d7dce6;top: 50%;}
			.time-axis tr:nth-last-of-type(1) .time-box:after{display: none;}
			.view-task{text-align: center;}
			[v-cloak]{display: none;}
		</style>
	</head>
	<body>
		<div class="c-container" id="app" v-cloak>
			<div class="page-title flex-box">
				<div class="flex-box-item mw400" flex-grow="2">				
					<span class="page-title-name">康复计划</span><i class="icon icon-back icon-16 mr10"></i><i class="icon icon-shuaxin icon-16"></i>
				</div>
				<div class="flex-box-item text-center" flex-grow="5">
					<div class="pull-right switch-list">
						<span class="rili" :class="{active:(tabStatus==1)}" @click="tabStatus=1"><i class="icon icon-rili icon-20"></i></span>
						<span class="shijianzhou" :class="{active:(tabStatus==2)}" @click="tabStatus=2"><i class="icon icon-liebiao icon-20"></i></span>
					</div>
					<span style="position: relative;top: 5px;">
						<i class="icon icon-prev icon-20" @click="preMonth"></i>
						<span class="currentDay">{{currentDay}}</span>
						<i class="icon icon-next icon-20" @click="nextMonth"></i></span>
				</div>
			</div>
			<div class="flex-box rehabilition">
				<div class="flex-box-item search-left mw400" flex-grow="2">
					<div class="search-condition">
						<p>快速找任务</p>
						<ul class="task-list">
							<li :class="{'active':(searchTask==task.code)}" v-for="task in taskArr" @click="changeTask(task.code)">{{task.name}}</li>
						</ul>
						<p>任务状态</p>
						<ul class="task-list">
							<li :class="{'active':(status==sts.code)}" v-for="sts in statusArr" @click="changeStatus(sts.code)">{{sts.name}}</li>
						</ul>
					</div>
					<div class="text-center">
						<button class="btn btn-search" @click="goToLoadData">确认</button>
					</div>
				</div>
				<div class="flex-box-item nav-content-right" flex-grow="5">
					<div class="calendar-content" v-show="tabStatus==1">
						<div class="calendar-descript">
							<span>图例注释： </span><i class="icon icon-blue"></i> <span>专科团队</span>&emsp;<i class="icon icon-green"></i> <span>家医团队</span>&emsp; <i class="icon icon-flag"></i> <span>我的任务</span>
						</div>
						<div class="calendar-week">
							<div class="flex-box text-center">
								<div class="flex-box-item">
									周一
								</div>
								<div class="flex-box-item">
									周二
								</div>
								<div class="flex-box-item">
									周三
								</div>
								<div class="flex-box-item">
									周四
								</div>
								<div class="flex-box-item">
									周五
								</div>
								<div class="flex-box-item">
									周六
								</div>
								<div class="flex-box-item">
									周日
								</div>
							</div>
						</div>
						<div class="calendar-days">
							<div class="flex-box">
								<div class="calendar-day" v-for="item in calendarData" @click="viewDetail(item.planDetailIds)">
									<span class="day-number">{{item.day}}</span>
									<div class="task-icon">
										<i v-if="item.myTaskFlag" class="icon icon-flag icon-20"></i>
										<i v-if="item.finishFlag" class="icon icon-check"></i>
									</div>
									<div class="coloured-box">
										<span v-if="item.specialist" class="coloured-ribbon coloured-ribbon-blue">专<br />科</span>
										<span v-if="item.family" class="coloured-ribbon coloured-ribbon-green">家<br />医</span>										
									</div>
									<div class="progress-box">
										<div class="progress" :style="{opacity:item.specialist?'1':'0'}">
											<span>{{(item.specialist && item.specialist.finish)+'/'+(item.specialist && item.specialist.all)}}</span>
										  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{width: (item.specialist?(item.specialist.finish/item.specialist.all):0)*100+'%'}"></div>
										</div>
										<div class="progress" :style="{opacity:item.family?'1':'0'}">
											<span>{{(item.family && item.family.finish)+'/'+(item.family && item.family.all)}}</span>
										  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" :style="{width: (item.family?(item.family.finish/item.family.all):0)*100+'%'}"></div>
										</div>
										<p v-if="!item.noService" class="mb0 f12">{{searchTask==1?'我的任务':(searchTask==2?'随访':(searchTask==3?'复诊':(searchTask==4?'健康教育':'')))}}</p>
									</div>
									<p v-if="item.noService" class="no-server">无服务项</p>
								</div>
							</div>
						</div>
					</div>
					<div class="time-axis" v-show="tabStatus==2">
						<table class="table">
							<tr>
								<th style="padding-right: 50px;text-align: right;">时间</th>
								<th class="text-center">项目</th>
								<th>执行人员</th>
								<th>执行地点</th>
								<th>相关记录</th>
								<th class="text-center">状态</th>
							</tr>
							<tr v-for="item in timeAxisData" :is-future="item.future">
								<td class="time text-right time-box">
									<p class="mb5">{{item.date}}</p>
									<p class="mb0">{{item.time}}</p>
									<span class="cur-status">{{item.html}}</span>
								</td>
								<td class="project-name">
									<p class="mb5">{{item.title}}</p>
									<p class="ellipsis mb0">{{item.content}}</p>
								</td>
								<td class="executor">{{item.doctor_name}}</td>
								<td class="place-of-execution">{{item.hospital}}</td>
								<td class="view-task">查看</td>
								<td class="task-status">{{item.status==0?'未完成':(item.status==1?'已完成':'已预约')}}</td>
							</tr>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
		<script type="text/javascript" src="../../../api/http-request.js"></script>
		<script type="text/javascript" src="../../../plugins/layer/layer.min.js" ></script>
		<script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>		
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			!function(){
				var httpData=GetRequest();
				var currentGMT=new Date();//当前时间GMT
				new Vue({
					el:"#app",
					data:{
						ynow: currentGMT.getFullYear(),//年份
						mnow: currentGMT.getMonth(),//月份（比实际少一个月---0开始至11）
						dnow: currentGMT.getDate(),//当前日
						currentDay:null,//带中文格式的当前年月
						currentDayForEn:null,//不带中文格式年月日2018/10/01如果写成/的话  转换成时间戳会变成北京时间8点
						calendarData:[],//日历数据
						timeAxisData:[],//时间轴数据
						__Data:[],//当前的年月（日历）
						__xData:[],//当前的年月(时间轴)
						status:null,//任务状态（0未完成，1已完成，2已预约）
						searchTask:null,//快速查找任务：（1、我的任务，2、随访，3、复诊，4、健康教育）
						planId:'402803f6657f195301657f4c4ce70000' || httpData['planId'],
						taskArr:[
							{code:1,name:'我的任务'},
							{code:2,name:'随访'},
							{code:3,name:'复诊'},
							{code:4,name:'健康教育'},
						],
						statusArr:[
							{code:0,name:'未完成'},
							{code:1,name:'已完成'},
							{code:2,name:'已预约'},
						],
						tabStatus:null,
					},
					mounted:function(){
						this.tabStatus=1;
					},
					methods:{
						viewDetail:function(planids){
							if(!planids){
								layer.msg('无服务项',{icon:5})
								return ;
							}
							layer.open({
							  type: 2,
			//				  offset: ['100px'], //右下角弹出
							  area: ['600px', '650px'],
							  shade: 0.5,
							  title: '服务项目内容',
							  fixed: true, //不固定
							  maxmin: true,
							  closeBtn:1,
							  shift: 5,
							  shadeClose: false, //点击遮罩关闭层
							  content: '../../rehabilitation/html/service_item_content.html?planids='+planids
							});
						},
						changeStatus:function(val){
							this.status=this.status==val?null:val;
						},
						changeTask:function(val){
							this.searchTask=this.searchTask==val?null:val;
						},
						monDetail:function(){
						  this.currentDay = this.ynow + '年'+ (this.mnow + 1) +'月';
						  this.currentDayForEn=this.ynow+'/'+(this.mnow>=9?(this.mnow+1):"0"+(this.mnow+1))+'/'+(this.dnow>=9?this.dnow:"0"+this.dnow)
						},
						is_leap:function(year) {  //判断是否为闰年
						   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
						},
						preMonth:function(){  //上一个月
						  if(this.mnow<=0){
						    this.mnow=11;
						    this.ynow=this.ynow-1;
						  }else{
						    this.mnow--;
						  }
						  this.monDetail();
						  this.goToLoadData(true);
						},
						getPreMouth:function(){
							var pMnow,pYnow;
							if(this.mnow<=0){
							    pMnow=11;
							    pYnow=this.ynow-1;
							  }else{
							    pMnow=this.mnow-1;
							    pYnow=this.ynow;
							  }
							var m_days=new Array(31,(28+this.is_leap(pYnow)),31,30,31,30,31,31,30,31,30,31);  //每个月的天数
							return {
									days:m_days[pMnow],
									date:pYnow+'-'+(++pMnow>=10?pMnow:"0"+pMnow)
								}
						},
						nextMonth:function(){   //下一个月
						  if(this.mnow>=11){
						    this.mnow=0;
						    this.ynow=this.ynow+1;
						  }else{
						     this.mnow++;
						  }
						  this.monDetail();
						  this.goToLoadData(true);			
						},
						getNextMouth:function(){
							var nMnow,nYnow;
							if(this.mnow>=11){
							    nMnow=0;
							    nYnow=this.ynow+1;
							  }else{
							     nMnow=this.mnow+1;
							     nYnow=this.ynow;
							  }
							var m_days=new Array(31,(28+this.is_leap(nYnow)),31,30,31,01,31,31,30,31,30,31);  //每个月的天数
							return {
									days:m_days[nMnow],
									date:nYnow+'-'+(++nMnow>=10?nMnow:"0"+nMnow)
								}
						},
						goToLoadData:function(flag){//flag是否更新数据
							this.tabStatus==1 && (!this.calendarData.length || flag) && this.calendar();
							this.tabStatus==2 && (!this.timeAxisData.length || flag) && this.timeAxis();
						},
						calendar:function(){
						  var nlstr = new Date(this.ynow,this.mnow,1);  //当月第一天
						  var firstday = nlstr.getDay()-1;//第一天星期几,默认是周日  我们改成周一
						  firstday=firstday==-1?6:firstday;//如果是-1，说明当月的第一天是周日
						  var m_days=new Array(31,(28+this.is_leap(this.ynow)),31,30,31,30,31,31,30,31,30,31);  //每个月的天数
						  var tr_str=Math.ceil((m_days[this.mnow] + firstday)/7);   //当前月天数+第一天是星期几的数值   获得 表格行数
						  var c_days=m_days[this.mnow];//当前月份的天数
						  var p_arr=this.getPreMouth();
						  var n_arr=this.getNextMouth();
						  var i,k,idx,date_str;
						  var dataArr=[];//天数/年月
						  for(i=0;i<tr_str;i++) { //表格的行
						     for(k=0;k<7;k++) { //表格每行的单元格
						        idx=i*7+k; //单元格自然序列号
						        date_str=idx-firstday+1; //计算日期
						        var __ym;
						        if(date_str<=0){//过滤无效日期（小于等于零的、大于月总天数的）
						        	date_str=date_str+p_arr['days'];//当前日期+上个月的天数就是上个月的日期
						        	__ym=p_arr['date'];
						        }else if(date_str>c_days){
						        	date_str=date_str-c_days;//下个月的日期就是这个月的天数-当月的天数
						        	__ym=n_arr['date'];
						        }else{
						        	__ym=this.ynow+'-'+(this.mnow>=9?"":"0")+(this.mnow+1);
						        }
						        dataArr.push({
						        	day:date_str,
						        	date:__ym
						        });
						     }
						  }
						  this.__Data=dataArr;
						  this.monDetail();
						  this.calenderPlanDetail();
						},
//						日历请求
						calenderPlanDetail:function(){
							var vm=this;
							var __days=vm.__Data;
							var lastDay=(__days.concat()).pop().day;
							lastDay=lastDay>9?lastDay:'0'+lastDay;
							var params={
								executeStartTime:__days[0].date+'-'+__days[0].day+' 00:00:00',//日历开始时间（格式：yyyy-MM-dd HH:mm:ss）
								executeEndTime:(__days.concat()).pop().date+'-'+lastDay+' 23:59:59',//日历结束时间（格式：yyyy-MM-dd HH:mm:ss）
								planId:vm.planId,//计划id
								searchTask:vm.searchTask,//快速查找任务：（1、我的任务，2、随访，3、复诊，4、健康教育）
								status:vm.status,//任务状态（0未完成，1已完成，2已预约）
							}
							rehaAPI.calendarPlanDetail(params).then(function(res){
								vm.calendarData=[];
								if(res.status==200){
									var data=res.data
									for(var i in __days){
										var _key=__days[i].date+'-'+(__days[i].day>9?__days[i].day:'0'+__days[i].day);
										var item={
												noService:true,
												day:__days[i].day
											};
										for(var j in data){
											if(_key==j){
												item=data[j];
												item.day=__days[i].day;
												var finishFlag=false;
												var sFlag=false;
												var fFlag=false;
												if(item.specialist){
													if(item.specialist.all==item.specialist.finish){
														sFlag=true;
													}
												}else{
													sFlag = true;
												}
												if(item.family){
													if(item.family.all==item.family.finish){
														fFlag = true;
													}
												}else{
													fFlag = true;
												}
												finishFlag = sFlag && fFlag;
												item.finishFlag=finishFlag;
												data.length && data.splice(j,1);
												break;
											}
										}
										vm.calendarData.push(item);
									}
								}
							})
						},
//						时间轴请求
						timeAxis:function(){
							var m_days=new Array(31,(28+this.is_leap(this.ynow)),31,30,31,30,31,31,30,31,30,31);  //每个月的天数
							var c_days=m_days[this.mnow];//当前月份的天数
							var __ym=this.ynow+'-'+(this.mnow>=9?"":"0")+(this.mnow+1);
							var dataArr=[];//天数/年月
							for(;c_days>0;c_days--){
								dataArr.push({
						        	day:c_days,
						        	date:__ym
						        });
							}
							this.__xData=dataArr;
							this.monDetail();
							this.calendarPlanDetailList();
						},
//						时间轴请求
						calendarPlanDetailList:function(){
							var vm=this;
							var __days=vm.__xData;
							var lastDay=(__days.concat()).pop().day;
							lastDay=lastDay>9?lastDay:'0'+lastDay;
							var params={
								executeEndTime:__days[0].date+'-'+__days[0].day+' 00:00:00',//日历开始时间（格式：yyyy-MM-dd HH:mm:ss）
								executeStartTime:(__days.concat()).pop().date+'-'+lastDay+' 23:59:59',//日历结束时间（格式：yyyy-MM-dd HH:mm:ss）
								planId:vm.planId,//计划id
								searchTask:vm.searchTask,//快速查找任务：（1、我的任务，2、随访，3、复诊，4、健康教育）
								status:vm.status,//任务状态（0未完成，1已完成，2已预约）
							}
							rehaAPI.calendarPlanDetailList(params).then(function(res){
								if(res.status==200){
									var _currentTimeStamp=+new Date(vm.currentDayForEn);
									vm.timeAxisData=_.map(res.data||{},function(o){
										var _time=o.executeTime.split(' ');
										var thatTime=+new Date(_time[0]);
										console.log(_currentTimeStamp)
										console.log(thatTime)
										var future=_currentTimeStamp>thatTime?0:(_currentTimeStamp==thatTime?1:2);
										var _html=o.status==2?'预':'';
										_html=future==1?'今':_html;
										if(_html=='预') future=3;
										o.html=_html
										o.date=_time[0];
										o.time=_time[1];
										o.future=future;
										return o;
									})||[];
								}
								console.log(vm.timeAxisData)
							})
						},
					},
					watch:{
						tabStatus:function(){
							this.goToLoadData();
						}
					}
				})
			}();
		</script>
	</body>
</html>

app/rehabilitation/html/service_item_content.html

@@ -0,0 +1,335 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
	    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
	    <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
		<style type="text/css">
			[v-cloak]{display: none;}
			.flex-box{display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
				  display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
				  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
				  -webkit-box-pack: center;
				  -ms-flex-pack: center;
				  justify-content: center;
				  -webkit-box-align: center;
				  -ms-flex-align: center;
				  align-items: center;
				  -ms-flex-wrap: wrap;
				      flex-wrap: wrap;
				  }
			.flex-box-item{-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
				  -moz-box-flex: 1;         /* OLD - Firefox 19- */
				  -webkit-flex: 1;          /* Chrome */
				  -ms-flex: 1;              /* IE 10 */
				  width: 50%;               /* For old syntax, otherwise collapses. */
				  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
				 position: relative;}
			.icon{width: 12px;height: 12px;vertical-align: middle;background-size: 100% auto;background-repeat: no-repeat;display: inline-block;background-position: center center;}
			.icon-arrow-down{background-image: url(../images/icon/tiaozhuan_xia_icon.png);}
			.icon-gouxuan{background-image: url(../images/icon/gouxuan_lanse_icon.png);}
			.icon-check,.icon-arrow-down{transition: all .3s ease-in-out;}
			.active .icon-check,.collapsed .icon-arrow-down{transform: rotateZ(180deg);}
			.icon-check{background-image: url(../images/icon/zhankai_btn.png);}
			.icon-16{width: 16px;height: 16px;}
			.icon-18{width: 18px;height: 18px;}
			.record-list{max-height: 0;overflow: hidden;transition: all .3s linear;}
			.record-list.active{max-height: 500px;}
			.record-item{background-color: #f5f5fa;margin-bottom: 10px;padding: 10px;}
			.service-top{font-size: 0;line-height: 1;font-weight: 500;}
			.service-name span{vertical-align: middle;font-size: 16px;}
			.service-name span+span{margin-left: 10px;}
			.service-name{line-height: 1.5;margin-bottom: 0;}
			.service-index{border: 1px solid #12b7f5;width: 16px;line-height: 1;height: 16px;font-size: 14px;display: inline-block;text-align: center;color: #12b7f5;}
			.label-group{padding-left: 26px;}
			.label-group span{color: #12b7f5;font-size: 14px;line-height: 1;margin-top: 10px;}
			.label-blue{border-radius: 5px;border: solid 1px #12b7f5;padding: 4px 15px;display: inline-block;margin-right: 27px;}
			.panel-body{padding: 20px;font-size: 14px;color: #999;}
			.panelcurPage{border-bottom: 1px solid #d7dce6;}
			.service-content{line-height: 30px;padding-bottom: 15px;}
			.service-address{border-bottom: 1px solid #d7dce6;}
			.btn-yuyue{background-color: #02cfb9;color: #fff;}
			.btn-yuyue:hover,.btn-yuyue:link{color: #fff;background-color: #01c1ad;}
			.btn-fuwuma{background-color: #2dbe55;color: #fff;}
			.btn-fuwuma:hover,.btn-fuwuma:link{color: #fff;background-color: #209440;}
			.btn-zhidao{background-color: #12b7f5;color: #fff;}
			.btn-zhidao:hover,.btn-zhidao:link{color: #fff;background-color: #10a0d6;}
			.service-operation .btn{width: 90px;}
			.view-detail{color: #12b7f5;cursor: pointer;}
			.yslb>span:after{content: '、';}
			.yslb>span:last-child:after{display: none;}
			.btns-group{padding-left: 20px;}
			.btns-group .btn{margin-right: 20px;}
			.fuwuma-model{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;}
			.fuwuma-layer{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.35);}
			.fuwuma-content{width: 260px;height: 260px;top: 50%;position: absolute;margin-top: -130px;left: 50%;margin-left: -130px;}
			.fuwuma-content img{width: 100%;display: block;}
		</style>
	</head>
	<body>
		<div class="panel-group" id="app" v-cloak role="tablist" aria-multiselectable="true">
		  <div class="panelcurPage" v-for="(service,index) in serviceData">
		    <div class="panel-heading" role="tab" @click="changeCollapseIndex(index)">
		      <h4 class="panel-title">
		        <a role="button" class="flex-box">
		          <div class="flex-box-item service-top">
		          	<p class="service-name"><span class="service-index">{{index+1}}</span><span>{{service.title}}</span></p>
		         	<div class="label-group">
		         		<span class="pull-right mt5"><i v-if="service.statusName=='已完成'" class="icon icon-gouxuan icon-18 mr5"></i>{{service.statusName}}</span>
		         		<span class="label-blue">{{service.shortExecuteTime}}</span>
		         		<span class="label-blue" v-for="doctor in service.executeDoctorList">{{doctor}}</span>
		         	</div>
		          </div>
		          <span class="icon icon-arrow-down ml50"></span>
		        </a>
		      </h4>
		    </div>
		    <div class="panel-collapse collapse" :class="{in:collapseIndex==index}"  role="tabpanel" aria-labelledby="headingOne">
		      	<div class="panel-body">
		      		<div class="service-content">{{service.content}}</div>
		      		<div class="service-address ptb20">
		      			<div class="flex-box">
		      				<div class="flex-box-item">
		      					<p class="m0">地点：{{service.hospitalName}}</p>
		      					<p class="m0">时间：{{service.executeTime | formatDate}}</p>
		      				</div>
		      				<div class="flex-box-item">
		      					<p class="m0 yslb">执行：<span v-for="(doctor,index) in service.executeDoctorList">{{doctor}}</span></p>
		      					<p class="m0">收费：{{service.expense}}元</p>
		      				</div>
		      			</div>
		      		</div>
		      		<div class="service-operation pt10">
		      			<p><span class="pull-right view-detail" :class="{active:isCollapse}" @click="chakan"><i class="icon icon-check mr5 icon-16"></i>{{isCollapse?'收起详情':'查看详情'}}</span>指导与汇报记录</p>
		      			<div class="record-list" :class="{active:isCollapse}">
		      				<div class="record-item" v-for="item in service.messageList">
		      					<div class="flex-box c-999 f14">
			      					<div class="flex-box-item">
			      						{{item.adminTeamName}}
			      					</div>
			      					<div class="flex-box-item">
			      						{{item.createTime}}
			      					</div>
			      				</div>
			      				<div class="f14 c-333">{{item.content}}f</div>
		      				</div>
	      				</div>
		      			<div class="flex-box btns-group">
		      				<!--<button class="btn btn-yuyue" v-if="service.itemType==0 && service.operate!=1">上传附件</button>-->
		      				<button class="btn btn-yuyue" v-if="service.itemType==2 && service.operate!=1" @click="jkjy(service.patient,service.planDetaiId)">健康教育</button>
		      				<button class="btn btn-yuyue" v-if="service.itemType==3 && service.operate!=1" @click="zwkf">健康指导</button>
		      				<button class="btn btn-yuyue" v-if="service.itemType==4 && service.operate!=1" @click="zwkf">随访</button>
		      				<button class="btn btn-zhidao" @click="zdly(service)">指导留言</button>
		      				<button class="btn btn-fuwuma" v-if="service.itemType==1 && service.operate!=1" @click="fwm(service.planDetaiId)">服务码</button>
		      				<!--<button class="btn btn-fuwuma" @click="fwm(service.planDetaiId)">服务码</button>-->
		      				<button class="btn btn-fuwuma" v-if="service.operate==1" @click="goToFinish(service.planDetaiId)">完成</button>
		      			</div>
		      		</div>
		        </div>
		    </div>
		  </div>
		  <div class="fuwuma-model" v-show="qrModal">
		  	<div class="fuwuma-layer" @click="qrModal=false"></div>
		  	<div class="fuwuma-content">
		  		<img :src="qrCode" width="300px" />
		  	</div>
		  </div>
		</div>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
		<script type="text/javascript" src="../../../api/http-request.js"></script>
		<script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			!function(){
				var httpData=GetRequest();
				var userInfo = JSON.parse(window.localStorage.getItem(httpRequest.agentName));  
				window.serviceItem=new Vue({
					el:"#app",
					data:{
						planids:httpData['planids'],
						serviceData:[],
						isCollapse :false,
						collapseIndex:0,
						qrCode:'',
						qrModal:false,
					},
					mounted:function(){
						this.getServiceItemList();
					},
					methods:{
						chakan:function(){
							this.isCollapse=!this.isCollapse;
						},
						changeCollapseIndex:function(idx){
							this.collapseIndex=idx;
						},
						//获取服务列表
						getServiceItemList:function(){
							var vm=this;
							var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
							rehaAPI.serviceItemList({planDetailIds:vm.planids}).then(function(res){
								top.layer.close(loadding);
								if(res.status==200){
									vm.serviceData=res.data;
								}else{
									top.layer.msg(res.msg,{icon:5});
								}
							})
						},
						//健康教育
						jkjy:function(patient,planId){
							var vm=this
							top.layer.open({
								type: 2,
								//				  offset: ['100px'], //右下角弹出
								area: ['800px', '648px'],
								shade: 0.5,
								title: '健康教育',
								fixed: true, //不固定
								maxmin: true,
								closeBtn: 1,
								shift: 5,
								shadeClose: false, //点击遮罩关闭层
								content: '../../article/html/article.html?code='+patient+'&planId='+planId+'&isReha=true'
							});
						},
//						暂未开放
						zwkf:function(){
							top.layer.msg('此功能暂未开放',{icon:1});
						},
						goToFinish:function(planid){
							top.layer.open({
							  type: 2,
			//				  offset: ['100px'], //右下角弹出
							  area: ['600px', '650px'],
							  shade: 0.5,
							  title: '完成项目确认',
							  fixed: true, //不固定
							  maxmin: true,
							  closeBtn:1,
							  shift: 5,
							  shadeClose: false, //点击遮罩关闭层
							  content: '../../rehabilitation/html/guide_the_message.html?planid='+planid
							});
						},
						fwm:function(planid){
							this.loadSocket(planid);
						},
						zdly:function(data){
							var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
							var otherCode,otherName;
							var planDetailId=data.planDetaiId;
							if(loginDoctor.doctorType==1){
								otherCode=data.familyDoctorCode;
								otherName=data.familyDoctorName;
							}else{
								otherCode=data.specialistDoctorCode;
								otherName=data.specialistDoctorName;
							}
							top.layer.open({
							  type: 2,
			//				  offset: ['100px'], //右下角弹出
							  area: ['800px', '650px'],
							  title: false,
							  fixed: true, //不固定
							  maxmin: true,
							  content: '../../consulting/html/consulting.html?otherCode='+otherCode+'&otherName='+encodeURI(otherName)+'&planDetailId='+planDetaiId
							});
						},
						loadSocket:function(planid){
							var vm=this;
							var imurl=httpRequest.socketUrl;
						    jQuery.getScript(imurl+"/socket.io/socket.io.js").done(function() {
						    	var type=2;//咨询类型
						        var socket = io.connect(imurl);
						        var sessionId = 'system';
						        socket.emit('login', {userId: userInfo.uid, password: userInfo.uid,sessionId:sessionId,clientType:"doctor"});
						        socket.on('message', function (data) {
						      		console.log(data);
						      		if(data.type==0){
						      			vm.checkAfterQrCode(planid);
						      		}
						        });
						
						        socket.on('error', function (data) {
						          console.log(data);
						        });
						
						        socket.on('ack', function (data) {
						          console.log(data);
						          vm.getQRCode(planid);
						        }); 
						        function getLocalTime(nS) {     
						            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
						        }    
						    })
						    .fail(function() {
						        top.layer.msg('服务码创建失败',{icon:5});    
						    });
						},
						checkAfterQrCode:function(planid){
							var vm=this;
							rehaAPI.checkAfterQrCode(params).then(function(res){
								var icon=5;
								if(data.status==200){
									if(data.data){
										icon=1;
										vm.goToFinish(planid);
									}
								}
								top.layer.msg(res.msg,{icon:icon});  
							})
						},
						getQRCode:function(planid){
							var vm=this;
							var params={
								planDetailId:planid,
								sessionId: 'system'
							}
							rehaAPI.createServiceQrCode(params).then(function(res){
								console.log(res);
								if(res.status==200){
									vm.qrCode=res.data;
									setTimeout(function(){
										vm.qrModal=true;
									},100)
								}else{
									top.layer.msg('服务码获取失败',{icon:5});  
								}
							})
							
						}
					},
					filters:{
					  	formatDate:function(value, format) {
					  		if(!value) return ;
					  		var fmt=format || "yyyy-MM-dd hh:mm";
							var date = new Date(value);
							if (/(y+)/.test(fmt)) {
								fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
							}
							let o = {
								'M+': date.getMonth() + 1,
								'd+': date.getDate(),
								'h+': date.getHours(),
								'm+': date.getMinutes(),
								's+': date.getSeconds()
							};
							for (let k in o) {
								if (new RegExp(`(${k})`).test(fmt)) {
									let str = o[k] + '';
									fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
								}
							}
							return fmt;
						}
					}
				})
			}()
		</script>
		
	</body>
</html>