优化专科康复管理

api/rehabilitation-api.js

@@ -60,8 +60,19 @@
		// 终止专科计划详情
		getServiceItemsAfterStop: function(data) {
			return httpRequest.get("doctor/specialist/rehabilitation/getServiceItemsAfterStop", {data: data})
		}
		
		},
		//获取计划表
		planSchedule: function(data) {
			return httpRequest.get("doctor/specialist/rehabilitation/planSchedule", {data: data})
		},
		//获取服务医生列表
		serviceDoctorList: function(data) {
			return httpRequest.get("doctor/specialist/rehabilitation/serviceDoctorList", {data: data})
		},
		//发送模板信息给居民确认
		sendWxMsg: function(data) {
			return httpRequest.post("doctor/specialist/rehabilitationPlan/sendWxMsg", {data: data})
		},
		
	}
    exports.rehaAPI = rehaAPI;

app/rehabilitation/css/rehabilitation_management.css

@@ -1,187 +1,764 @@
.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%;*/
    overflow: hidden;
    overflow-y: scroll;
    /*padding-top: 49px;*/
    /*max-width: 1620px;*/
    margin: 0 auto;
    padding-bottom: 50px;
}
.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: #1c9aca;color: #fff;outline: none;outline-color: transparent;}
.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%;*/
	overflow: hidden;
	/*overflow-y: scroll;*/
	/*padding-top: 49px;*/
	/*max-width: 1620px;*/
	margin: 0 auto;
	padding-bottom: 50px;
}
.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: #1c9aca;
	color: #fff;
	outline: none;
	outline-color: transparent;
}
/*日历*/
.calendar-content{margin: 0 auto;}
.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);
    background-size: 100% 100%;
}
.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);
    background-size: 100% 100%;
}
.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-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);
	background-size: 100% 100%;
}
.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);
	background-size: 100% 100%;
}
.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-week {
	background-color: #ebebf5;
	border: solid 1px #d7dce6;
	padding: 11px;
}
/*日期*/
.calendar-days>.flex-box{
    border-bottom: 1px solid #d7dce6;
    border-right: 1px solid #D7DCE6;
    border-left: 1px solid #D7DCE6;
.calendar-days>.flex-box {
	border-bottom: 1px solid #d7dce6;
	border-right: 1px solid #D7DCE6;
	/*border-left: 1px solid #D7DCE6;*/
}
.calendar-day {
    height: 135px;
    border-left: 1px solid #d7dce6;
    cursor: pointer;
    position: relative;
    padding: 5px;
    width: 14.28571428%;
    /*border-bottom: 1px solid #d7dce6;*/
	height: 135px;
	border-left: 1px solid #d7dce6;
	cursor: pointer;
	position: relative;
	padding: 5px;
	width: 14.28571428%;
	/*border-bottom: 1px solid #d7dce6;*/
}
.calendar-days .calendar-day:first-child {
    border-left-width: 0;
	border-left-width: 0;
}
.calendar-day:hover {
    -webkit-box-shadow: 0 0 0 1px #12b7f5 inset;
    box-shadow: 0 0 0 1px #12b7f5 inset;
	-webkit-box-shadow: 0 0 0 1px #12b7f5 inset;
	box-shadow: 0 0 0 1px #12b7f5 inset;
}
.calendar-day.current-day {
    background-color: #ddf6fe;
	background-color: #ddf6fe;
}
.no-server{text-align: center;top: 50%;position: absolute;left: 0;right: 0;color: #c8c8c8;font-size: 18px;}
.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 {
	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-image: url(../images/biaoqian-lanse_img.png);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	background-image: url(../images/biaoqian-lanse_img.png);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.coloured-ribbon-green {
    background-image: url(../images/biaoqian-lvse_img.png);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 5px;
}
.task-icon{position: absolute;left: 50px;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;}
	background-image: url(../images/biaoqian-lvse_img.png);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-left: 5px;
}
.task-icon {
	position: absolute;
	left: 50px;
	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: 10px 5px;text-align: center;}
.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; border-radius: 10px;}
.progress-box .progress-bar-success{background-color: #2dbe55; border-radius: 10px;}
/*页头*//*max-width: 1620px;*/
.progress-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 5px;
	text-align: center;
}
.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;
	border-radius: 10px;
}
.progress-box .progress-bar-success {
	background-color: #2dbe55;
	border-radius: 10px;
}
/*页头*/
/*max-width: 1620px;*/
.page-title {
    /*position: fixed;
	/*position: fixed;
    top: 0;
    left: 0;
    right: 0;*/
    padding: 9px;
    border-bottom: 1px solid #d7dce6;
    z-index: 5;
    /*margin: 0 auto;*/
    background-color: #fff
	padding: 9px;
	border-bottom: 1px solid #d7dce6;
	z-index: 5;
	/*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;
	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;}
	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: inherit;}
.time-axis th{background-color: #f5f5fa;border-bottom: solid 1px #d7dce6;}
.time-axis td p{color: inherit;}
.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;}
.time-axis [is-future="1"]{background-color: #dff5fc;color: #12b7f5;}
.time-axis td {
	border: none !important;
	color: inherit;
}
.time-axis th {
	background-color: #f5f5fa;
	border-bottom: solid 1px #d7dce6;
}
.time-axis td p {
	color: inherit;
}
.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;
}
.time-axis [is-future="1"] {
	background-color: #dff5fc;
	color: #12b7f5;
}
/*.time-axis [is-future="1"] td p,.time-axis [is-future="1"] td{}*/
.time-axis tr:hover{background-color: #f5f5fa;color: #333333;}
.time-axis tr:hover {
	background-color: #f5f5fa;
	color: #333333;
}
/*.time-axis tr:hover p{}*/
[is-future="1"] .cur-status,[is-future="2"] .cur-status{background-color: #12b7f5;}
[is-future="-1"] .cur-status{background-color: #ff3b30;}
.c-ff3b30{color: #ff3b30!important;}
[is-future="1"] .day-number{color: #12B6F4;}
[is-future="2"] .day-number{color: #333;}
[is-future="3"] .cur-status{background-color: #5cb85c;}
.calendar-day[is-future="0"]{background-color: #f5f5fa;}
.calendar-day[is-future="1"]{background-color: rgba(18, 182, 244, 0.25);}
.calendar-day[is-future="3"]{background-color: #efefef;}
.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;cursor: pointer;}
.task-status{text-align: center;}
[v-cloak]{display: none;}
.visibility-hide{visibility: hidden;}
.c-666{color: #666!important;}
[is-future="1"] .cur-status,
[is-future="2"] .cur-status {
	background-color: #12b7f5;
}
[is-future="-1"] .cur-status {
	background-color: #ff3b30;
}
.c-ff3b30 {
	color: #ff3b30!important;
}
[is-future="1"] .day-number {
	color: #12B6F4;
}
[is-future="2"] .day-number {
	color: #333;
}
[is-future="3"] .cur-status {
	background-color: #5cb85c;
}
.calendar-day[is-future="0"] {
	background-color: #f5f5fa;
}
.calendar-day[is-future="1"] {
	background-color: rgba(18, 182, 244, 0.25);
}
.calendar-day[is-future="3"] {
	background-color: #efefef;
}
.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;
	cursor: pointer;
}
.task-status {
	text-align: center;
}
[v-cloak] {
	display: none;
}
.visibility-hide {
	visibility: hidden;
}
.c-666 {
	color: #666!important;
}
.w-80 {
	width: 80%;
	margin: 0 auto;
}
.w400 {
	width: 400px;
}
.bgc-f5f5f5 {
	background-color: #f5f5f5;
}
.search-left {
	height: 100%;
	right: -400px;
	z-index: 999;
}
.tac{
	text-align: center;
}
.c-h100 {
	height: 100%;
}
.set-open {
	width: 40px;
	left: -40px;
	top: 0;
	cursor: pointer;
}
.set-close {
	width: 14px;
	height: 14px;
	top: 15px;
	right: 15px;
	background: url(../../../images/guanbi_icon.png) no-repeat no-repeat center center;
	background-size: 12px 12px;
	cursor: pointer;
}
.div-kuaisu-task {
	width: 98px;
	height: 28px;
	line-height: 28px;
	background-color: #ffffff;
	border-radius: 2px;
	border: solid 1px #d7dce6;
	position: absolute;
	right: 102px;
}
.calendar-descript {
	text-align: right;
}
.div-left {
	width: 460px;
	background-color: #ffffff;
	border-right: 1px solid #E1E1E1;
}
.div-right {
	width: calc(100% - 460px);
}
.rehabilition {
	height: calc(100% - 49px);
	padding-bottom: 0;
}
.tag {
	display: inline-block;
	/*background-image: url(../images/yuanjiao_biaoqian_img.png);*/
	background-repeat: no-repeat;
	background-size: 100%;
	width: 60px;
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #fff;
	padding-left: 15px;
	position: absolute;
	left: 191px;
	top: 46px;
}
.tag-1 {
	background-image: url(../images/yuanjiao_biaoqian02_img.png);
}
.tag-2 {
	background-image: url(../images/yuanjiao_biaoqian03_img.png);
}
.tag-3 {
	background-image: url(../images/yuanjiao_biaoqian04_img.png);
}
.tag-4 {
	background-image: url(../images/yuanjiao_biaoqian01_img.png);
}
.div-patient-home {
	width: 98px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 2px;
	border: solid 1px #d7dce6;
	margin-top: 5px;
	cursor: pointer;
}
.div-patient-comfirm {
	width: 98px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 2px;
	border: solid 1px #12b7f5;
	margin-top: -4px;
	cursor: pointer;
}
.progress-bar {
	position: relative;
	width: 100%;
	height: 28px;
	border-radius: 28px;
	background-color: #ebebf5;
}
.progress-bar .progress {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 28px;
	border-radius: 28px;
}
.progress-bar .p-text {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 14px;
	height: 28px;
	line-height: 28px;
	z-index: 2;
}
.progress-bar.h15,
.progress-bar.h15 .progress,
.progress-bar.h15 .p-text {
	height: 15px;
	border-radius: 15px;
	line-height: 15px;
	font-size: 12px;
}
.bgc-ff9526 {
	background-color: #ff9526;
}
.bgc-12b7f5 {
	background-color: #12b7f5;
}

app/rehabilitation/html/rehabilitation_management.html

@@ -1,57 +1,70 @@
<!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 href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
	    <link rel="stylesheet" type="text/css" href="../css/date.css" />
		<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 href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/date.css" />
		<link rel="stylesheet" href="../css/rehabilitation_management.css" />
		<style>
			.w-80 {width: 80%; margin: 0 auto;}
			.w400 {width: 400px;}
			.bgc-f5f5f5 {background-color: #f5f5f5;}
			.search-left {
				height: calc(100% - 49px);
				left: -400px;
				z-index: 999;
			.plr11{
				padding-left: 11px;
				padding-right: 11px;
			}
			.c-h100 {height: 100%;}
			.set-open {
				width: 40px;
				left: -40px;
				top: 0;
				cursor: pointer;
			.div-line{
				width: 4px; height: 20px;background: #12b7f5;
				margin-right: 9px;
				margin-top: 5px;
			}
			.set-close {
				width: 14px;
				height: 14px;
				top: 15px;
				right: 15px;
				background: url(../../../images/guanbi_icon.png) no-repeat no-repeat  center center;
				background-size: 12px 12px;
				cursor: pointer;
			.lh30{
				height: 30px;
				line-height: 30px;
			}
			.mr21{
				margin-right: 21px;
			}
			.c-ff9630{
				color: #ff9630;
			}
			.pb23{
				padding-bottom: 23px;
			}
			.plr13{
				padding-left: 13px;
				padding-right: 13px;
			}
			.dialos-textarea{
				padding: 25px 10px 25px 15px;
				min-height: 140px;
				width: 100%;
				background: #F5F5FA;
				border: 0;
				margin-top: 5px;
				text-indent: 28px;
				resize: none;
				line-height: 28px;
			}
		</style>
	</head>
	<body>
		<div class="c-container ui-grid ui-grid-vertical" id="app" v-cloak>
			<div class="page-title flex-box ui-col-0">
				<div class="flex-box-item mw400" flex-grow="2">				
					<span class="page-title-name">康复计划</span><a class="icon icon-back icon-16 mr10" href="javascript:history.back();"></a><i class="icon icon-shuaxin icon-16" @click="refreshPage"></i>
				<div class="flex-box-item mw400" flex-grow="2">
					<span class="page-title-name">康复计划</span>
					<a class="icon icon-back icon-16 mr10" href="javascript:history.back();"></a><i class="icon icon-shuaxin icon-16" @click="refreshPage"></i>
				</div>
				<div class="flex-box-item text-center" flex-grow="5">
					<div class="pull-right switch-list">
					<div class="div-kuaisu-task" @click="changeSearch(1)" v-show="tabStatus!=3">快速找任务</div>
					<div class="pull-right switch-list" v-show="tabStatus!=3">
						<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="rehabilition c-position-r bgc-f5f5f5 ui-col-1">
@@ -71,110 +84,182 @@
						<button class="btn btn-search" @click="goToLoadData">确认</button>
					</div>
				</div>
				<div class="w-80 nav-content-center bgc-fff c-position-r c-h100">
					<span class="c-position-a bgc-fff ptb15 c-999 set-open c-t-center" @click="changeSearch(1)">快<br />速<br />找<br />任<br />务</span>
					<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 class="ui-grid c-h100">
					<div class="div-left ui-col-0 plr11" style="position: fixed;height: 100%;overflow: auto;">
						<div class="ui-grid c-border-b lh30">
							<div class="ui-col-0 div-line"></div>
							<div class="ui-col-1 c-f16 c-333">居民信息</div>
						</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 class="ui-grid c-border-b pb15 pt15">
							<div class="ui-col-0 mr10">
								<img :src="setImgSrc(planInfo.patientPhoto)" width="40" class="c-images-cycle">
							</div>
							<div class="ui-col-1">
								<div class="mt10"><span class="c-f16 mr5">{{planInfo.patientName}}</span><span class="c-f16 c-999">({{planInfo.sex}} {{planInfo.age}}岁)</span></div>
								<div class="tag mt10 tag-1 ml20"></div>
							</div>
							<div class="ui-col-0 div-patient-home c-f14 c-333">进入居民首页</div>
						</div>
						<div class="ui-grid mt15 pb15">
							<div class="ui-col-1 c-f16 c-333">冠心病康复计划</div>
							<div class="ui-col-1 c-f14 c-999">总进度：</div>
							<div class="ui-col-0 div-patient-comfirm c-f14 c-fff bgc-12b7f5" v-show="planInfo.status==2" @tap="weiXinConfirmClick">邀请居民确认</div>
						</div>
						<div class="ui-grid">
							<div class="ui-col-1">
								<div class="progress-bar">
									<span class="progress bgc-ff9526" :style="{width: (planInfo.finishedCount/planInfo.allCount*100)+'%'}"></span>
									<span class="p-text">{{planInfo.finishedCount}}/{{planInfo.allCount}}</span>
								</div>
							</div>
						</div>
						<div class="calendar-days">
							<div v-for="items in calendarData" class="flex-box"><!--
								--><div class="calendar-day" v-for="item in items" @click="viewDetail(item.planDetailIds)" :is-future="item.future">
									<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 class="ui-grid c-border-b lh30 mt15">
							<div class="ui-col-0 div-line"></div>
							<div class="ui-col-1 c-f16 c-333">服务医生</div>
						</div>
						<div class="ui-grid pt15" v-for="doc in docList">
							<div class="ui-col-0 ml30 mr21">
								<img :src="setImgSrc(doc.doctorPhoto)" width="40" class="c-images-cycle">
							</div>
							<div class="ui-col-0 mr100">
								<div class="c-f16 c-333">{{doc.doctorName}}</div>
								<div class="c-f14 c-999">{{doc.type}}</div>
							</div>
							<div class="ui-col-0">
								<div class="c-f14 c-333">完成项目：<span class="c-f14 c-ff9630">{{doc.finishedItem}}</span></div>
								<div class="c-f14 c-333">服务次数：<span class="c-f14 c-ff9630">{{doc.serviceCount}}</span></div>
							</div>
						</div>
						<!--<div class="ui-grid c-border-b lh30 mt15">
							<div class="ui-col-0 div-line"></div>
							<div class="ui-col-1 c-f16 c-333">出院医嘱</div>
						</div>
						<div class="w-100 c-border pb23 plr13 mt10 mb50">
							<div class="ui-grid pt20">
								<div class="ui-col-1">
									<div class="ui-grid">
										<div class="c-f14 c-999 ui-col-1">冠心病诊断</div>
										<div class="c-f14 c-999 ui-col-0">2018/08/01</div>
									</div>
									<div class="dialos-textarea c-f14 c-333">我们的冠心病发病率和死亡率呈快速上升趋势。40岁以后每增加10岁，患者率就要递增1倍左右，发病年龄有越来越年轻的人趋势。我们的冠心病发病率和死亡率呈快速上升趋势。40岁以后每增加10岁，患者率就要递增1倍左右，发病年龄有越来越年轻的人趋势。</div>
								</div>
							</div>
						</div>-->
					</div>
					<div class="nav-content-center bgc-fff c-position-r c-h100 div-right ui-col-1" style="margin-left: 460px;" v-show="tabStatus==3">
						<iframe id="framePage" src="" style="width: 100%;height: 100%;border: 0;"></iframe>
					</div>
					<div class="nav-content-center bgc-fff c-position-r c-h100 div-right ui-col-1" style="margin-left: 460px;" v-show="tabStatus!=3">
						<span style="position: absolute;top: 15px;left: 101px;">
						<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 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="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 class="flex-box-item">
										周二
									</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 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 v-for="items in calendarData" class="flex-box">
									<!--
								-->
									<div class="calendar-day" v-for="item in items" @click="viewDetail(item.planDetailIds)" :is-future="item.future">
										<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" :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 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" :class="{'visibility-hide':!curTask}" style="line-height: 1;">{{curTaskName || '&emsp;'}}</p>
										</div>
										<p v-if="!item.noService" class="mb0 f12" :class="{'visibility-hide':!curTask}" style="line-height: 1;">{{curTaskName || '&emsp;'}}</p>
										<p v-if="item.noService" class="no-server">无服务项</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>项目</th>
								<th>执行人员</th>
								<th>执行地点</th>
								<th class="text-center">相关记录</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 mw400">
									<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_name}}</td>
								<td class="view-task" @click="viewDetail(item.id,item.status,1)">查看</td>
								<td class="task-status" :class="item.future==-1?'c-ff3b30':(item.status==0?'c-666':'')">{{item.status==0?'未完成':(item.status==1?'已完成':'已预约')}}</td>
							</tr>
							<tr v-if="!timeAxisData.length">
								<td colspan="6" class="f16 ptb10 text-center">
									<img src="../../../images/wushuju_img.png" />
									<p class="c-666">暂无数据</p>
								</td>
							</tr>
						<div class="time-axis mt50" v-show="tabStatus==2">
							<table class="table">
								<tr>
									<th style="padding-right: 50px;text-align: right;">时间</th>
									<th>项目</th>
									<th>执行人员</th>
									<th>执行地点</th>
									<th class="text-center">相关记录</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 mw400">
										<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_name}}</td>
									<td class="view-task" @click="viewDetail(item.id,item.status,1)">查看</td>
									<td class="task-status" :class="item.future==-1?'c-ff3b30':(item.status==0?'c-666':'')">{{item.status==0?'未完成':(item.status==1?'已完成':'已预约')}}</td>
								</tr>
								<tr v-if="!timeAxisData.length">
									<td colspan="6" class="f16 ptb10 text-center">
										<img src="../../../images/wushuju_img.png" />
										<p class="c-666">暂无数据</p>
									</td>
								</tr>
						</div>
					</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 src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../plugins/toastr/toastr.min.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="../../../plugins/layer/layer.min.js"></script>
		<script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
		<script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/rehabilitation_management.js"></script>
	</body>
</html>
</html>

app/rehabilitation/js/health_control.js

@@ -393,7 +393,7 @@ layui.use('element', function () {
            },
            checkPlan: function (data) {
                var vm = this
                location.href = "../../rehabilitation/html/rehabilitation_management.html?planId=" + data.id
                location.href = "../../rehabilitation/html/rehabilitation_management.html?planId=" + data.id+"&patientCode=" + data.patientCode
            },
            modelControl: function () {

app/rehabilitation/js/rehabilitation_management.js

@@ -17,6 +17,7 @@
			searchTask:null,//快速查找任务：（1、我的任务，2、健康教育，3、健康指导，4、随访，5、复诊）
			searchTaskName:null,//快速查找任务：（1、我的任务，2、健康教育，3、健康指导，4、随访，5、复诊）
			planId: httpData['planId'],
			patientCode: httpData['patientCode'],
			taskArr:[
				{code:1,name:'我的任务'},
				{code:2,name:'健康教育'},
@@ -32,6 +33,8 @@
			curTask:'',//快速查找是否点击了搜索按钮
			curTaskName:'',//快速查找是否点击了搜索按钮
			tabStatus:null,
			planInfo:{},
			docList:[]
		},
		mounted:function(){
			if(!this.planId){
@@ -39,8 +42,69 @@
			}else{							
				this.tabStatus=1;
			}
			this.planSchedule();
			this.serviceDoctorList();//获取服务医生列表
			this.bindEvents();
		},
		methods:{
			//获取计划表
			planSchedule:function(){
				var vm = this;
				var  params = {
		            planId: this.planId,
		            patientCode: this.patientCode
		        };
				rehaAPI.planSchedule(params).then(function(res){
					 if(res.status == 200){
			            vm.planInfo = res.data;
			            vm.planInfo.tagClass = "tag-"+res.data.healthyConditionType;
			            //patientImg：居民签名照/证件照,如果不为null的话说明居民已确认，显示康复完成明细
			            if(vm.planInfo.status==2 && !vm.planInfo.patientImg){//任务全部完成时，显示完成提示框
							vm.showCompleteDailog();
			            }
			        }else{
			        	layer.msg(res.msg,{icon:5});
			        }
				})
			},
			serviceDoctorList:function(){
				var vm = this;
				rehaAPI.serviceDoctorList({patientCode: this.patientCode}).then(function(res){
					 if(res.status == 200){
					 	vm.docList = res.data;
					 }else{
			        	layer.msg(res.msg,{icon:5});
			        }
				})
			},
			weiXinConfirmClick:function(){
				var vm = this;
				rehaAPI.sendWxMsg({planId: this.planId}).then(function(res){
					 if(res.status == 200){
					 	layer.msg("发送成功，等待居民确认");
					 	setTimeout(function(){
					 		vm.tabStatus=3;
							$("#framePage").attr("src","stop_special_service.html?planids="+vm.planId)
					 	},1000)
					 }else{
			        	layer.msg(res.msg,{icon:5});
			        }
				})
			},
			setImgSrc: function (src) {
                var str = httpRequest.getImgUrl(src)
                return str
            },
			showCompleteDailog:function(){
				layer.confirm('<div class="mt10 tac"><image src="../images/yiwancheng_icon.png" width="100" height="100"/><div class="mt20 c-f20 c-333 mb40">本次康复计划已完成</div><div class="div-patient-comfirm c-f14 c-fff bgc-12b7f5" style="margin:40px auto 20px;">邀请居民确认</div></div>', { 
		    		btn: [],
		    		area: ["400px", "340px"],
		    		title: "完成提示"
		    	}, function (index) {
		    		
	//	            layer.close(index);
		        });
			},
			refreshPage:function(){
				if(!this.planId){
					layer.msg('未传入计划id（planId）',{icon:2})
@@ -48,6 +112,13 @@
				}
				this.goToLoadData(true);
			},
			bindEvents:function(){
				var vm = this;
				$("body").on("click",".div-patient-comfirm",function(){
					layer.closeAll();
					vm.weiXinConfirmClick();
				})
			},
			viewDetail:function(planids,status,type){
				var vm=this;
				if(!planids){
@@ -308,7 +379,7 @@
				var i = status == 1 ? -400 : 0;
				var timer1 = setInterval(function() {
					i += (5 * status)
					$(".search-left").css("left", i + "px")
					$(".search-left").css("right", i + "px")
					if(status == 1 && i >= 0) {
						clearInterval(timer1)
					}