解决冲突

api/statistics-api.js

@@ -35,6 +35,13 @@
        },
        articleLowlevelTotal: function(data){
            return httpRequest.get("/statistics/article_lowlevel_total", {data: data});
        },
        lowlevelData: function(url, data){
            return httpRequest.get(url, {data: data});
        },
        //获得团队的详情
        getTeamInfo: function(data){
            return httpRequest.get("doctor/admin-teams/teams/info", {data: data});
        }
    }

app/record/css/article_detail.css

@@ -0,0 +1,35 @@
.article_container{position: relative;}
.article-title{font-weight: 700;font-size: 18px;margin-bottom: 0;line-height: 2;}
.app-container{padding: 10px 35px;}
.pc-container{padding: 10px 320px 10px 20px;}
.article-info{margin-bottom: 20px;margin-top: 10px;}
.article-info p{margin-bottom: 0;line-height: 1.5;}
/*手机大小*/
.mobile{width: 240px;position: fixed;right: 30px;top: 50%;margin-top: -242.5px;}
/*手机壳大小*/
.mobile-shell,.mobile-status{width: 100%;height: auto;display: block;}
/*浏览器顶部标题*/
.mobile-browser-top{padding: 5px 10px;font-size: 13px;}
.mobile-browser-title{position: absolute;text-align: center;left: 0;right: 0;}
.mobile-browser-top>.pull-left:before{content: "〈 ";position: absolute;left: -5px;}
.mobile-browser-top>.pull-right{font-size: 14px;font-weight: bold;letter-spacing: 1px;}
/*手机顶部状态*/
.mobile-top{position: absolute;top: 53px;left: 13px;right: 12px;color: #fff;z-index: 2;background-color: #2e2d31;}
/*手机内容载体*/
.mobile-container{zoom:0.8;position: absolute;left: 15px;right: 15px;padding: 0 5px;top: 120px;bottom: 65px;overflow-y: scroll;}
.time-look{color: #888;font-size: 12px;margin-bottom: 0;}
/*颜色渐变*/
.black-grey-black {
  background: -webkit-linear-gradient(left, #1c1a1e , #2c2b30 , #1a1a1d); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #1c1a1e , #2c2b30 , #1a1a1d); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #1c1a1e , #2c2b30 , #1a1a1d); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #1c1a1e , #2c2b30 , #1a1a1d); /* 标准的语法 */
}
.shadow-gradient{border-radius: 100%;height: 4px;position: relative;top: -2px;margin: 0 5px;}
.btn-return{background: #f96565;color: #fff;width: 100px;margin: 35px auto 20px;}
/* 设置滚动条的样式 */
.scroll-style::-webkit-scrollbar {width: 5px;}/* 滚动槽 */
.scroll-style::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;}
/* 滚动条滑块 */
.scroll-style::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.1);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
.scroll-style::-webkit-scrollbar-thumb:window-inactive {background: rgba(0,0,0,0.3);}

app/record/css/census.css

@@ -0,0 +1,7 @@
.table-responsive{padding: 20px 20px 0;border: none;}
.grayish-bg{background: #f5f5fa;}
.grayish-bg>td{color: #999;}
.family-doctor{vertical-align: middle!important;font-size: 17px;letter-spacing: 1px;color: #353535;}
tr>td{color: #666;border: 1px solid #ddd!important;}
tr>td+td{color: #22bcf6;}
ul{list-style: decimal;padding-left: 35px;}

app/record/css/consultation.css

@@ -1,9 +1,9 @@
.consultation-list{padding: 10px 20px;margin: 0;overflow: hidden;height: calc(100% - 50px);}
.consultation-list-item{list-style: none;border: 1px solid #d7dce6;margin-top: 17px;min-height: 72px;border-radius: 8px;overflow: hidden;position: relative;}
.con-user-info{padding: 10px 15px;position: relative;overflow: hidden;}
.con-avatar{width: 40px;height: 40px;border-radius: 100%;position: absolute;top: 15px;left: 17px;}
.consultation-list{padding: 20px 20px 0;margin: 0;}
.consultation-list-item{cursor: pointer;list-style: none;border: 1px solid #d7dce6;margin-top: 20px;min-height: 80px;border-radius: 8px;overflow: hidden;position: relative;}
.con-user-info{padding: 10px 40px 10px 15px;position: relative;overflow: hidden;}
.con-avatar{width: 40px;height: 40px;border-radius: 100%;position: absolute;top: 20px;left: 20px;}
.con-avatar+.con-user-info{padding-left: 68px;}
.article-title,.con-user-name{font-weight: 700;color: #666;font-size: 17px;}
.article-title,.con-user-name{font-weight: 700;color: #333;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.guidance-status,.con-status{position: absolute;right: 10px;top: -1px;}
.guidance-status:before,.con-status:before{content: '进行中';background: #ff9630;width: 26px;height: 58px;color: #fff;display: inline-block;line-height: 1.2;font-size: 13px;text-align: center;padding: 5px 5px 8px;border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;}
.guidance-status:before{padding-top: 12px;}
@@ -11,6 +11,6 @@
.guidance-status[data-status="1"]:before{content: "未读";background: #fca701;}
.guidance-status[data-status="2"]:before{content: "已读";background: #12b7f5;}
.start-time{font-weight: 100;font-size: 14px;}
.con-time{margin-left: 20px;}
.user-problem{margin-bottom: 0;font-size: 13px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.pagination{margin: 20px 0px 15px;}
.con-time{margin-left: 20px;font-size: 12px;color: #999;}
.user-problem{margin-bottom: 0;font-size: 13px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

app/record/css/follow-up.css

@@ -1,11 +1,12 @@
.consultation-list{padding: 10px 20px;margin: 0;}
.consultation-list-item{list-style: none;border: 1px solid #d7dce6;margin-top: 17px;min-height: 74px;border-radius: 8px;overflow: hidden;position: relative;}
.follow-user-info{padding: 10px 15px;position: relative;overflow: hidden;}
.consultation-list{padding: 20px 20px 0;margin: 0;}
.consultation-list-item{cursor: pointer;list-style: none;border: 1px solid #d7dce6;margin-top: 20px;min-height: 80px;border-radius: 8px;overflow: hidden;position: relative;}
.follow-user-info{padding: 10px 40px 10px 15px;position: relative;overflow: hidden;height: 80px;}
.leave-word-container{min-height:69px;}
.follow-up-doctor{font-weight: 700;color: #666;font-size: 17px;border-bottom: 1px solid #d7dce6;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px 15px;margin-bottom: 0;}
.follow-up-doctor{font-weight: 700;color: #333;font-size: 16px;border-bottom: 1px solid #d7dce6;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 20px;height: 40px;line-height: 40px;margin-bottom: 0;padding-right: 10px;}
.follow-status{position: absolute;right: 10px;top: -1px;}
.follow-status:before{content: '进行中';background: #ff9630;width: 26px;height: auto;color: #fff;display: inline-block;line-height: 1.2;font-size: 13px;text-align: center;padding: 5px 5px 8px;border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;}
.follow-status:before{content: '进行中';background: #fca701;width: 26px;height: auto;color: #fff;display: inline-block;line-height: 1.2;font-size: 13px;text-align: center;padding: 5px 5px 8px;border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;}
.follow-status[data-status="2"]:before{content: '已完成';background: #12b7f5;}
.start-time{font-weight: 100;font-size: 14px;position: relative;top: 2px;}
.start-time{font-weight: 100;font-size: 14px;}
.completion-time{margin-bottom: 0;font-size: 13px;}
.leave-word{padding-right: 30px;margin-bottom: 0;font-size: 12px;text-overflow: -o-ellipsis-lastline;text-overflow: -webkit-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;text-overflow:display: -o-box;-webkit-line-clamp:3;-o-line-clamp:3;-webkit-box-orient: vertical;-o-box-orient: vertical;}
.act-type{margin-bottom: 20px;}
.leave-word{margin-bottom: 0;font-size: 12px;text-overflow: -o-ellipsis-lastline;text-overflow: -webkit-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;text-overflow:display: -o-box;-webkit-line-clamp:3;-o-line-clamp:3;-webkit-box-orient: vertical;-o-box-orient: vertical;}

app/record/css/record.css

@@ -1,5 +1,5 @@
.service-nav-tabs{margin-bottom: 10px;margin-top: 10px;}
.service-nav-tabs li a{background: #f5f5fa;border-color:#d7dce6;color: #666666;margin-left: 10px;padding: 8px 20px;}
.service-nav-tabs{padding-top: 14px;padding-left: 10px;}
.service-nav-tabs li a{background: #f5f5fa;border-color:#d7dce6;color: #666666;padding: 0;margin-right: 5px;line-height: 32px;width: 80px;text-align: center;}
.service-nav-tabs li.active a{color: #12b7f5;}
.re-title .name{font-size: 18px;font-weight: bold;color: #333;height: 40px;line-height: 40px;display: inline-block;padding: 0px 20px;}
.re-title .team{font-size: 14px;color: #333;display: inline-block;}

app/record/html/census.html

@@ -5,14 +5,7 @@
		<title>统计</title>
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../css/consultation.css" />
		<style type="text/css">
			.table-responsive{padding: 20px 20px 0;}
			.grayish-bg{background: #f5f5fa;}
			.grayish-bg>td{color: #999;}
			.family-doctor{vertical-align: middle!important;font-size: 17px;letter-spacing: 1px;color: #353535;}
			tr>td{color: #666;}
			tr>td+td{color: #22bcf6;}
		</style>
		<link rel="stylesheet" href="../css/census.css" />
	</head>
	<body>
		<div id="app" class="table-responsive">
@@ -60,7 +53,10 @@
					</tr>
				</table>
			</div>
			
			<ul>
				<li>年度为本签约年度</li>
				<li>随访为完成量/已计划量</li>
			</ul>
		</div>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../js/jquery-2.2.4.js" ></script>

app/record/html/guidance.html

@@ -8,7 +8,7 @@
	</head>
	<body>
		<div id="app">
			<consultation-list :consulta-data="list" @init-data="msgListView"></consultation-list>
			<consultation-list :guidance-data="list" @init-data="msgListView"></consultation-list>
			<navigation :pages="total" :current="currentPage" @navpage="msgListView"></navigation>
		</div>
		<script type="text/javascript" src="../../../js/vue.js"></script>

app/record/html/lay_detail_reserved.html

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>预约详情</title>
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
		<style type="text/css">
			.detail_content{margin: 0 10px;}
			.res-list{padding: 17px 10px 6px;}
			.res-title{font-weight: 700;margin-bottom: 0;font-size: 16px;color: #333;border-bottom: 1px solid #ececec;line-height: 1;padding-bottom: 10px;}
			.res-list p{margin-bottom: 16px;color: #333;}
			.res-list p>span:first-child{min-width: 70px;text-align: right;display: inline-block;color: #999;}
		</style>
	</head>
	<body>
		<div class="detail_content">
			<div class="res-list">
				<p class="res-title">预约信息</p>
				<p><span>预约状态：</span><span>预约成功</span></p>
				<p><span>挂号时间：</span><span>2018-01-10 21:00</span></p>
				<p><span>就诊时间：</span><span>2018-01-10 21:00:00</span></p>
			</div>
			<div class="res-list">
				<p class="res-title">医生信息</p>
				<p><span>医院名称：</span><span>厦门市仙岳医院</span></p>
				<p><span>科室名称：</span><span>中西医心理科门诊</span></p>
				<p><span>医生姓名：</span><span>陈进东</span></p>
			</div>
			<div class="res-list">
				<p class="res-title">就诊人信息</p>
				<p><span>就诊人：</span><span>阿打算</span></p>
				<p><span>身份证号：</span><span>23423423423523523</span></p>
				<p><span>医保卡号：</span><span>D323e423r</span></p>
				<p><span>手机号码：</span><span>17777777777</span></p>
			</div>
		</div>
	</body>
</html>

app/record/js/education.js

@@ -10,8 +10,7 @@ new Vue({
  		var vm=this;
  		if(page){
  			vm.currentPage=page;
  			var data = {patientCode:'fca8c658ffda42afa5be91e54e0268c8',
					patient:'fca8c658ffda42afa5be91e54e0268c8',
  			var data = {patientCode:'ec7572875d27446cb4f067b13a85d72a',
					teamCode:646,
					page:page,
					pagesize:10}
@@ -23,7 +22,7 @@ new Vue({
  							top.toastr.info("啊喔!没有更多内容了");
  					}
  				}else{
  					top.toastr.error(res.msg);
  					top.toastr.error(res.msg||("服务器返回状态码"+res.status));
  				}
  			})
  		}

app/record/js/follow-up.js

@@ -23,7 +23,7 @@ new Vue({
  							top.toastr.info("啊喔!没有更多内容了");
  					}
  				}else{
  					top.toastr.error(res.msg);
  					top.toastr.error(res.msg||("服务器返回状态码"+res.status));
  				}
  			})
  		}

app/record/js/guidance.js

@@ -11,19 +11,20 @@ new Vue({
  		if(page){
  			vm.currentPage=page;
  			var data = {
//				patientCode:'ec7572875d27446cb4f067b13a85d72a',
					patient:'ec7572875d27446cb4f067b13a85d72a',
					teamCode:646,
					page:page,
					pagesize:10}
  			recordAPI.guidanceList(data).then(function(res){
  				if(res.status==200){ 
  				if(res.status==200){
  					if(res.data.length){  						
  						vm.list=res.data;
  					}else{
  							top.toastr.info("啊喔!没有更多内容了");
  					}
  				}else{
  					top.toastr.error(res.msg);
  					top.toastr.error(res.msg||("服务器返回状态码"+res.status));
  				}
  			})
  		}

app/record/js/toBeReserved.js

@@ -23,7 +23,7 @@ new Vue({
  							top.toastr.info("啊喔!没有更多内容了");
  					}
  				}else{
  					top.toastr.error("获取数据失败");
  					top.toastr.error(res.msg||("服务器返回状态码"+res.status));
  				}
  			})
  		}

app/statistics/comprehensive-analysis.html

@@ -8,270 +8,120 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../fonts/font-awesome/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.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/common.css"/>
    </head>
    <body>
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>总体分析
                    <img src="../images/yiwen_icon.png" class="info-icon" width="20">
                </h1>
                <a class="header-link">
                    <img src="../images/hanbaobao_icon.png" width="25" class="mt10">
                </a>
            </div>
        </div>
        <div class="mui-scroll-wrapper" style="top: 46px">
            <div class="mui-scroll">
                <div class="ui-grid ui-grid-middle information">
                    <div class="ui-col-1 plr10 ptb5" id="infoText"></div>
                    <div class="ui-col-0" id="closeBtn"><img src="../images/guanbi_01_btn.png" width="20"></div>
                </div>
                
                <!-- 位置信息 start -->
                <div class="ui-grid ui-grid-middle location-div">
                    <div class="ui-col-0 text-box c-f13 c-nowrap" style="max-width:60%;">
                        <img src="../images/dizhi_icon.png" width="12">
                        <span id="areaTitle" class="title c-666 c-f13 ml5"></span>
                    </div>
                    <div class="ui-col-0">
                        <span class="jiezhi-time c-f13"></span>
                    </div>
                    <div class="ui-col-1 c-t-right"><span class="choose-label"></span></div>
                </div>
                <!-- 位置信息 end -->
                <div id='textTj' style="" class="clearfix ">
                    <ul class="l-banner">
                        <li class="active" data-index='3'>
                            <div id="index_3" class="c-f18">0</div>
        <div id="main">
            <header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
            <header-prompt></header-prompt>
            <div class="clearfix ">
                <ul class="l-banner">
                    <li class="active" >
                        <div class="tag" :class="{'active': index==3}" @click="changeTag(3)">
                            <div id="index_3" class="c-f18">{{topDatas['index_3']}}</div>
                            <div class="mt5 c-f14 l-name">咨询量</div>
                        </li>
                        <li data-index='4'>
                            <div id="index_4" class="c-f18">0</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==4}" @click="changeTag(4)">
                            <div id="index_4" class="c-f18">{{topDatas['index_4']}}</div>
                            <div class="mt5 c-f14 l-name">随访量</div>
                        </li>
                        <li data-index='5'>
                            <div id="index_5" class="c-f18">0</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==5}" @click="changeTag(5)">
                            <div id="index_5" class="c-f18">{{topDatas['index_5'] + topDatas['index_83']}}</div>
                            <div class="mt5 c-f14 l-name">健康教育</div>
                        </li>
                    </ul>
                    <ul class="l-banner">
                        <li data-index='27'>
                            <div id="index_27" class="c-f18">0</div>
                        </div>
                    </li>
                </ul>
                <ul class="l-banner">
                    <li>
                        <div class="tag" :class="{'active': index==27}" @click="changeTag(27)">
                            <div id="index_27" class="c-f18">{{topDatas['index_27']}}</div>
                            <div class="mt5 c-f14 l-name">代预约量</div>
                        </li>
                        <li data-index='21'>
                            <div id="index_21" class="c-f18">0</div>
                            <div class="mt5 c-f14 l-name">绑定微信</div>
                        </li>
                        <li data-index='20'>
                            <div id="index_20" class="c-f18">0</div>
                            <div class="mt5 c-f14 l-name">绑定设备</div>
                        </li>
                    </ul>
                </div>
                <div class="mb10 c-border-tb bgc-fff c-hide" id="pieChartsPanel">
                    <div class="plr10 ptb10 c-border-b">
                        <img src="../images/tuisongqingkuang_icon.png" width="22">
                        <span class="c-f16 c-333 ml5">推送情况</span>
                    </div>
                    <div class="ui-grid ui-grid-middle ptb10">
                        <div class="ui-col-0 c-t-center c-ffc800 plr10 c-w-33">
                            <div class="c-f20 wz-num">0</div>
                            <!--<div class="c-f14">39%</div>-->
                            <div class="c-f12">健康文章推送量</div>
                        </div>
                        <div class="ui-col-1 c-position-r c-t-center">
                            <div class="position-center-text c-f14">推送情况</div>
                            <div id="pieChart" style="width: 100%; height:100px;"></div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==21}" @click="changeTag(21)">
                            <div id="index_21" class="c-f18">{{topDatas['index_21']}}</div>
                            <div class="mt5 c-f14 l-name">绑定微信</div>
                        </div>
                        <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
                            <div class="c-f20 zd-num">0</div>
                            <!--<div class="c-f14">61%</div>-->
                            <div class="c-f12">健康指导推送量</div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==20}" @click="changeTag(20)">
                            <div id="index_20" class="c-f18">{{topDatas['index_20']}}</div>
                            <div class="mt5 c-f14 l-name">绑定设备</div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 折线图 -->
            <line-chart v-on:getlinedata="getNewLineData"></line-chart>
            <!-- 饼图 健康教育-->
            <div v-show="index=='5'" class="mt20 c-border bgc-fff">
                <div class="c-border-b plr10 ptb10 c-f16 c-333">全市概况</div>
                <div class="ui-grid ui-grid-middle ptb10">
                    <div class="ui-col-0 c-t-center c-ffc800 plr10 c-w-33">
                        <div class="c-f20 wz-num">{{topDatas['index_83']}}</div>
                        <div class="c-f12">健康文章推送量</div>
                    </div>
                </div>
                <div class="mtb10 bgc-fff c-border-tb pb10">
                    <div class="ui-grid ui-grid-middle plr10 c-border-b">
                        <div class="ui-col-0">
                            <img src="../images/jiaofeiqushi_icon.png" width="22">
                            <span class="c-323232 c-f16 ml5"><span id="tagName">咨询量</span>新增趋势</span>
                        </div>
                        <div class="ui-col-1 c-t-right ptb5">
                            <span class="date-tag active" data-type="1">日</span><!--
                            --><span class="date-tag" data-type="2">周</span><!--
                            --><span class="date-tag" data-type="3">月</span>
                        </div>
                    <div class="ui-col-1 c-position-r c-t-center">
                        <div class="position-center-text c-f14">推送情况</div>
                        <div id="pieChart" style="width: 100%; height:100px;"></div>
                    </div>
                    <div class="clearfix mt5 plr10">
                        <div class="fl c-f12 c-909090"><span id="startValue"></span> ~ <span id="endValue"></span>数据</div>
                        <div class="fr c-f12 c-909090">单位：人</div>
                    <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
                        <div class="c-f20 zd-num">{{topDatas['index_5']}}</div>
                        <div class="c-f12">健康指导推送量</div>
                    </div>
                    <div class="line-chart" id="lineChart" style="height: 200px; width: 100%;"></div>
                </div>
                <!--微信绑定再显示统计数据-->
                <div class="c-border-t bgc-fff c-hide" id="pieChartsPanel2">
                    <div class="plr10 ptb10 c-border-b">
                        <span class="blue-column mr5"></span>
                        <span class="c-f14 c-333 ml5 title"></span>
            </div>
            <!-- 微信绑定统计 -->
            <div v-show="index=='21'" class="mt20 c-border bgc-fff">
                <div class="c-border-b plr10 ptb10 c-f16 c-333">{{wxTotal.label}}</div>
                <div class="ui-grid ui-grid-middle ptb10">
                    <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
                        <div class="c-f20 wz-num">{{wxTotal.amount1}}</div>
                        <div class="c-f12">已缴费人数</div>
                    </div>
                    <div class="ui-grid ui-grid-middle ptb10">
                        <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
                            <div class="c-f20 jf-num"></div>
                            <div class="c-f12">已缴费人数</div>
                        </div>
                        <div class="ui-col-1 c-position-r">
                            <div class="blur-cycle-box">
                                <div class="c-f16 c-fff num mt10"></div>
                                <div class="c-f12 c-fff mt5">绑定率</div>
                            </div>
                            <div id="pieChart2" style="width: 100%; height:110px;"></div>
                        </div>
                        <div class="ui-col-0 c-t-center c-909090 plr10 c-w-33">
                            <div class="c-f20 wjf-num"></div>
                            <div class="c-f12">未缴费人数</div>
                    <div class="ui-col-1 c-position-r c-t-center">
                        <div class="blur-cycle-box">
                            <div class="c-f16 c-fff num mt15">{{wxTotal.rate}}</div>
                            <div class="c-f12 c-fff mt5">绑定率</div>
                        </div>
                        <div id="pieChart2" style="width: 100%; height:100px;"></div>
                    </div>
                </div>
                <div class="area-panel">
                    <div class="area-tab-panel">
                        <div class="area-tab active" data-val="4"><span>各区</span><i class="border-line-right"></i></div>
                        <div class="area-tab" data-val="3"><span>社区</span><i class="border-line-right"></i></div>
                        <div class="area-tab c-hide" data-val="2"><span>团队</span></div>
                    <div class="ui-col-0 c-t-center c-909090 plr10 c-w-33">
                        <div class="c-f20 zd-num">{{wxTotal.amount2}}</div>
                        <div class="c-f12">未缴费人数</div>
                    </div>
                    <table class="bottom-list-table mb20" id="listTable">
                    </table>
                </div>
            </div>
        </div>
        <!-- 团队信息模块 -->
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="div-header-title">
                <div class="div-close"></div>
                <div class="div-overlay-img"></div>
                <div class="div-overlay-title">团队详情</div>
            </div>
            <div class="div-overlay-content">
                <div class="pt15" id="teamInfoBox">
                    
                </div>
            </div>
            <!-- 底部区域图 -->
            <area-data-panel class="mt20" v-on:getnewdata="getAreaData"></area-data-panel>
            <!--模态框组件-->
            <vuedals></vuedals>
        </div>
        
        <script type="text/html" id="data-list">
            <thead>
                <tr>
                    <th>排名</th>
                    {{if index == '3'}}
                    <th>咨询量</th>
                    <th>未回复</th>
                    {{/if}}
                    {{if index == '4'}}
                    <th>随访量</th>
                    {{/if}}
                    {{if index == '5'}}
                    <th>总推送量</th>
                    <th>阅读量</th>
                    <th>阅读率</th>
                    {{/if}}
                    {{if index == '27'}}
                    <th>代预约量</th>
                    {{/if}}
                    {{if index == '21'}}
                    <th>绑定率</th>
                    <th>已缴费</th>
                    <th>未缴费</th>
                    {{/if}}
                    {{if index == '20'}}
                    <th>绑定设备</th>
                    {{/if}}
                    {{if level>2 && lowLevel != 1}}
                    <th width="20"></th>
                    {{/if}}
                </tr>
            </thead>
            <tbody>
                {{each list as v i}}
                <tr class="data-row" data-name="{{v.name}}" data-code="{{v.code}}" data-type="">
                    <td class="area-name">
                        {{if v.top == 1}}
                        <div class="ranking ranking1">{{v.top}}</div>
                        {{else if v.top == 2}}
                        <div class="ranking ranking2">{{v.top}}</div>
                        {{else if v.top == 3}}
                        <div class="ranking ranking3">{{v.top}}</div>
                        {{else}}
                        <div class="ranking">{{v.top}}</div>
                        {{/if}}
                        <div class="ui-col-1 c-nowrap-multi">{{v.name}}</div>
                    </td>
                    {{if index == '21'}}
                        <td>{{v.bindRate || 0}}%</td>
                        <td>{{v.weChatAmount1}}</td>
                        <td>{{v.weChatAmount0}}</td> 
                    {{else}}
                        <td>{{v.amount}}</td>
                        {{if index == '3'}}
                        <td>{{v.noAmount}}</td>
                        {{/if}}
                        {{if index == '5'}}
                        <td>{{v.readNum}}</td>
                        <td>{{v.readRate}}</td>
                        {{/if}}
                    {{/if}}
                    {{if level>2 && lowLevel != 1}}
                    <td><i class="fa fa-angle-right"></i></td>
                    {{/if}}
                </tr>
                {{/each}}
            </tbody>
        </script>
        
        <!-- 团队信息模板 -->
        <script type="text/html" id="teamInfo">
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队名称：</span>
                <span class="c-f14 c-333">{{team.name}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">所在社区：</span>
                <span class="c-f14 c-333">{{team.hospitalName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队长：</span>
                <span class="c-f14 c-333">{{team.leaderName}}</span>
            </div>
            <div class="plr15 pb20">
                <span class="c-f14 c-bold c-333">团队成员(<span class="span-team-count">{{memberLength}}</span>人)：</span>
                <p class="c-f14 c-333 mt10">
                    {{each members as member index}}
                    {{if index == 0}}
                        {{member.name}}
                    {{else if index < 20}}
                        、{{member.name}}
                    {{else if index == 20}}
                    、{{member.name}}等
                    {{/if}}
                    {{/each}}
                </p>
            </div>
        </script>
        
        <script src="../../../js/jquery/2.1.3/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/common_http.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="../../../widget/echarts/3.0/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/comprehensive-analysis.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/comprehensive-analysis.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

app/statistics/css/common.css

@@ -16,9 +16,15 @@
.c-ffc800{
    color: #ffc800;
}
.c-75ed59{
    color: #75ed59;
}
.c-w-33{
    width: 33%;
}
ul{
    list-style: none;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
@@ -84,7 +90,7 @@
    display: -webkit-box;
    height: 45px;
    line-height: 45px;
    margin: 0 10px;
    margin: 0 50px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-bottom: 0;
@@ -97,6 +103,19 @@
    text-align: center;
    position: relative;
}
.area-tab:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #e1e1e1;
}
.area-tab:last-child:after{
    width: 0;
}
.area-tab .border-line-right{
    display: inline-block;
    position: absolute;
@@ -121,10 +140,13 @@
}
.bottom-list-table{
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-size: 14px;
    border-spacing: 0;
}
.bottom-list-table thead{
    height: 40px;
@@ -142,10 +164,14 @@
}
.bottom-list-table td{
    padding: 10px 0;
    border-bottom: 1px solid #e1e1e1;
}
.bottom-list-table tbody>tr{
    border-bottom: 1px solid #e1e1e1;
}
.bottom-list-table tbody>tr:hover{
    background-color: #f2f4f6;
}
/*.bottom-list-table tbody>tr:first-child{
    border-top: 0;
}*/
@@ -178,24 +204,25 @@
    color: #909090;
}
.ranking{
    background-image: url(../images/paiming_4_icon.png);
    background-image: url(../../../images/paiming_4_icon.png);
    background-size: 18px 24px;
    width: 18px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    margin-right: 5px;
    margin-right: 10px;
    -webkit-box-flex: 0;
}
.ranking1{
    background-image: url(../images/paiming_1_icon.png);
    background-image: url(../../../images/paiming_1_icon.png);
}
.ranking2{
    background-image: url(../images/paiming_2_icon.png);
    background-image: url(../../../images/paiming_2_icon.png);
}
.ranking3{
    background-image: url(../images/paiming_3_icon.png);
    background-image: url(../../../images/paiming_3_icon.png);
}
.modal-overlay{
    position: absolute;
@@ -288,32 +315,34 @@
}
.l-banner li{
    -webkit-box-flex: 0;
    text-align: center;
    margin-left: 10px;
    background: #fff;
    border-radius: 5px;
    width: calc((100% - 20px) / 3);
    padding: 10px 0;
    border: 1px solid #E1E1E1;
    /*border-bottom: 5px solid transparent;*/
    position: relative;
    width: calc(100% / 3);
}
.l-banner li:first-child{
    margin-left: 0;
    /*margin-left: 0;*/
}
.l-banner li .tag{
    width: 80%;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    text-align: center;
    padding: 17px 0;
    margin: 0 auto;
    position: relative;
}
.l-banner li .l-name{
    color: #909090;
    color: #666;
}
.l-banner li.active,
.l-banner li.active .l-name
.l-banner li .tag.active,
.l-banner li .tag.active .l-name
{
    color: #17b3ec;
    color: #12B7F5;
    border-color: #12B7F5;
}
.l-banner li.active:after{
.l-banner li .tag.active:after{
    content: "";
    width: 100%;
    height: 5px;
    background-color: #17b3ec;
    height: 4px;
    background-color: #12B7F5;
    position: absolute;
    bottom: 0;
    left: 0;
@@ -341,3 +370,134 @@
    text-align: center;
    margin-top: -10px;
}
.div-header {
	padding: 0px 10px 0px 20px;
	height: 40px;
	border-bottom: 1px solid #DCDCDC;
}
.div-header img {
	cursor: pointer;
}
.fl {
	float: left;
}
.fr {
	float: right
}
.mt10 {
	margin-top: 10px;
}
.mr10 {
	margin-right: 10px;
}
.vam {
	vertical-align: middle;
}
.vertical-line {
	border-right: 1px solid #ccc;
	height: 25px;
	width: 1px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}
.application-name {
	font-size: 14px;
	color: #333;
	font-weight: bold;
	margin-right: 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}
.c-666 {
	color: #666;
}
.c-12b7f5 {
	color: #12B7F5;
}
.cb-ebebf5 {
	background: #EBEBF5;
}
.c-f12 {
	font-size: 12px;
}
.height-30 {
	height: 30px;
}
.lheight-30 {
	line-height: 30px;
}
.pl20 {
	padding-left: 20px;
}
.ml20 {
	margin-left: 20px;
}
.mr20 {
	margin-right: 20px;
}
.tac {
	text-align: center;
}
.role-select{
    height: 30px;
    min-width: 100px;
    display: inline-block;
}
.role-select select{
    width: 100%;
    height: 30px;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url(../../../images/zhankai_jiantou_icon.png) no-repeat scroll right center transparent;
    background-position-x: 95%;
    background-size: 11px 11px;
    padding-right: 30px;
    padding-left: 10px;
    border: none;
    color: #909090;
}
.section-header{
    position: relative;
}
.section-label{
    display: inline-block;
    padding: 3px 15px;
    background-color: #ebebf5;
    border-radius: 12px;
    font-size: 14px;
    position: relative;
}
.section-header .grey-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background-color: #ebebf5;
    z-index: -1;
}

app/statistics/home.html

@@ -1,9 +1,77 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
    <head>
        <meta charset="UTF-8">
        <title>统计分析</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../fonts/font-awesome/css/font-awesome.min.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 rel="stylesheet" type="text/css" href="css/common.css"/>
    </head>
    <body>
        <div id="main">
            <div class="div-header">
                <div class="fl">
                    <div class="application-name">统计分析</div>
                    <div class="vertical-line"></div>
                    <div class="role-select">
                        <select class="select" v-model="selectedRole">
                            <option v-for="role in roles" :value="role.code">{{role.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="fr mt10">
                    <img v-show="isopen" @click="open" src="../../images/zhankai_icon.png" width="18" height="18" />
                </div>
            </div>
            <!-- -->
            
            <!--签约分析-->
            <div class="mt10">
                <div class="section-header plr10">
                    <span class="section-label c-f14">签约分析</span>
                    <div class="grey-line"></div>
                </div>
                <div class="section-body mtb30">
                    <div class="c-row">
                        <div v-for="item in signAnalysis" @click="showDetail(item.url)" class="c-20 c-t-center">
                            <img :src="item.photo">
                            <div class="c-f12 c-999 mt10">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--服务分析-->
            <div class="mt10">
                <div class="section-header plr10">
                    <span class="section-label c-f14">服务分析</span>
                    <div class="grey-line"></div>
                </div>
                <div class="section-body mtb30">
                    <div class="c-row">
                        <div v-for="item in serviceAnalysis" @click="showDetail(item.url)" class="c-20 c-t-center">
                            <img :src="item.photo">
                            <div class="c-f12 c-999 mt10">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/home.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

app/statistics/js/common.js

@@ -0,0 +1,91 @@
function getStartDate(chooseYear){
    // 按年度来计算的时候，开始时间是该年度7月1号还是到下一个年的6月30号结束
    if(chooseYear == 2016){
        return chooseYear + "-08-01";
    }else{
        return chooseYear+'-07-01';
    }
}
//获取结束时间
function getEndDate(chooseYear){
    chooseYear = parseInt(chooseYear);
    var endDate = new Date((chooseYear+1) + '-06-30'),
        now = new Date();
    if(now <= endDate){
        return now.format("yyyy-MM-dd");
    }else{
        return (chooseYear+1) + '-06-30';
    }
}
/*
 * 获取用来排序的字段值，返回数组
 * 参数： list - 列表， key - 字段的名称 
 */
function getKeyValueArr(list, key){
    var arr = [];
    for(var k in list){
        arr.push(list[k][key]);
    }
    
    return arr;
}
/*
 * 排名
 */
function soreRank(arr){
    var temp = [];
    var lis = [];
    for(var i=0;i<arr.length;i++){
        lis.push(arr[i]);
    }
    lis = _.uniq(lis);
    for(var i=0;i<arr.length;i++){
        temp[i] = lis.indexOf(arr[i])+1;
    }
    
    return temp;
}
/*
 * 绘制饼图
 * arry [{name: '', value: ''}]
 * color ['#ffc800', '#17b3ec']
 */
function drawPieChart(elId, arry, color){
    var myChart = echarts.init(document.getElementById(elId));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            position: ['50%', '50%']
        },
        color: color,
        series: [
        {
            type:'pie',
            radius: ['80%', '99%'],
            startAngle: 270,
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: "#000"
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false 
                }
            },
            data:arry
        }]
    };
    $("#"+elId).removeAttr("_echarts_instance_");
    myChart.setOption(option);
}

app/statistics/js/comprehensive-analysis.js

@@ -0,0 +1,434 @@
var reqList = []; //记录请求的参数和url，用于后退时使用
Vue.use(Vuedals.default);
new Vue({
    el: "#main",
    data: {
        isback: true,
        isrefresh: true,
        isfilter: true,
        isopen: true,
        //请求页面所需参数
        level: '',
        area: '',
        areaTitle: '',
        index: '3',
        selectedDateType: 1,
        endDate: '',
        startDate: '',
        lowLevel: '',
        chooseYear: '',
        userRole: '',
        //数据结果
        topDatas: {
            index_3: 0,
            index_4: 0,
            index_5: 0,
            index_83: 0,
            index_20: 0,
            index_21: 0,
            index_27: 0
        },
        //微信绑定统计数据
        wxTotal:{
            label: '',
            amount1: '', //已缴费人数
            amount2: '', //未缴费人数
            rate: ''//绑定率
        }
    },
    components: {
        vuedals: Vuedals.Component
    },
    methods: {
        changeTag: function(val){
            this.index = val;
            loadData([1,2], this);
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                index: this.index,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel
            })
        },
        getNewLineData: function(arg){
            this.selectedDateType = arg.dateType;
            loadData([1], this);
        },
        getAreaData: function(arg){
            //如果level改变，则需要重新加载整个页面的数据，否则只需加载底部区域数据
            if(arg.level == this.level){
                this.lowLevel = arg.lowLevel;
                loadData([2], this);
            }else{
                this.level = arg.level;
                this.lowLevel = arg.lowLevel;
                this.area = arg.area;
                loadData([0,1,2], this);
            }
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                index: this.index,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel
            })
        }
    },
    mounted: function(){
        //初始化数据
        initData(this);
        
        //获得顶部各tab的值
        loadData([0,1,2], this); //参数组数表示请求的区域为上中下
        
        //存储请求所带的参数
        reqList.push({
            level: this.level,
            area: this.area,
            areaTitle: this.areaTitle,
            index: this.index,
            endDate: this.endDate,
            startDate: this.startDate,
            lowLevel: this.lowLevel
        });
        
        //设置监听器， 监听折线图日期变化
        var vm = this;
        //监听后退按钮的操作
        EventBus.$on("back-click", function(arg){
            if(reqList.length == 1){
                history.go(-1);
            } 
            else{
                var preInfo = reqList.pop();
                var info = reqList[reqList.length - 1];
                vm.level = info.level;
                vm.area = info.area;
                vm.areaTitle = info.areaTitle;
                vm.lowLevel = info.lowLevel;
                vm.index = info.index;
                
                loadData([0,1,2], vm);
            }
        });
        //监听页面刷新
        EventBus.$on("refresh-click", function(arg){
            loadData([0,1,2], vm);
        });
    }
})
function initData(vm){
    //获得缓存中缓存的角色权限
    var userRole = window.localStorage.getItem("selectedRole");
    if(!userRole){
        return false;
    }
    vm.userRole = JSON.parse(userRole);
    vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
    vm.area = vm.userRole.code;
    vm.areaTile = vm.userRole.name;
    
    var now = new Date();
    if(now.getMonth() >= 6){
        vm.chooseYear = now.getFullYear();
    }else{
        vm.chooseYear = now.getFullYear() - 1;
    }
    
    vm.startDate = getStartDate(vm.chooseYear);
    vm.endDate = getEndDate(vm.chooseYear);
}
function initReqParams(vm){
    //增量（咨询量3、随访量4、健康教育5、代预约量27），到达量（绑定微信21、绑定设备20）
    var url2 = "statistics/interval",
        url3 = "statistics/lowlevel_total";
    if(vm.index == '20' || vm.index == '21'){
        url2 = "statistics/interval_total";
        url3 = "statistics/lowlevel_all";
    }else if(vm.index == '3'){
        url3 = "statistics/lowlevel_total_mesh";
    }else if(vm.index == '5'){
        url3 = '/statistics/article_lowlevel_total';
    }
    reqParam = [{
        url: url2,
        data:{
            index: vm.index == '5' ? '5,83' : vm.index,
            level: vm.level, 
            area: vm.area, 
            startDate: vm.startDate, 
            endDate: vm.endDate,
            interval: vm.selectedDateType
        }
    },{
        url: url3,
        data: {
            index: (vm.index == '3') ? "3,22" : vm.index,
            level: vm.level,
            area: vm.area, 
            sort: 1, 
            year: vm.chooseYear
        }
    },{
        //如果是微信绑定，则增加置顶展示当面层级的总绑定率及已缴费 未缴费居民数.只针对微信绑定时使用
        url: '/statistics/getLevelTotalSingle',
        data: {
            date: vm.endDate, 
            level: vm.level, 
            area: vm.area
        }
    }];
    
    if(vm.index == '20' || vm.index == '21'){
        reqParam[1].data.date = vm.endDate;
    }else{
        reqParam[1].data.endDate = vm.endDate;
    }
    
    if(vm.lowLevel){
        reqParam[1].data.lowLevel = vm.lowLevel;
    }
    return reqParam;
}
function getTopReqParams(index1, vm){
    var url = "statistics/total",
        data = {
            index: index1 == '5' ? '5,83' : index1,
            level: vm.level, 
            area: vm.area, 
            year: vm.chooseYear,
            endDate: vm.endDate, 
            startDate: vm.startDate
        };
    if(index1 == '20' || index1 == '21'){
        url = "statistics/index_all";
    }
    if(index1 == '5'){
        url = "/statistics/article_total";
    }
    return {
        url: url,
        data: data
    };
}
function getTopTagDatas(vm){
    var reqs = [],
        indexs = ['3', '4', '5', '27', '21', '20'];
    for(i=0; i<indexs.length; i++){
        var item = getTopReqParams(indexs[i], vm);
        reqs.push(httpRequest.get(item.url, {data: item.data}));
    }
    Promise.all(reqs).then(function(ress){
        for(i=0; i<ress.length; i++){
            var res = ress[i];
            if(res.status == 200){
                for(key in res.data){
                    vm.topDatas[key] = res.data[key];
                }
            }else{
                console.log(res.msg);
            }
        }
    })
}
function loadData(loadArr, vm){
    if(loadArr.indexOf(0) > -1){
        getTopTagDatas(vm);
    }
    
    //获取其他请求的参数
    var reqParams = initReqParams(vm),
        reqPromise = [],
        newArr = []; //记录非顶部请求的请求数组
    for(i=0; i<loadArr.length; i++){
        if(loadArr[i] == 0){
            // do nothing
        }else{
            var j = loadArr[i] - 1;
            var param = reqParams[j];
            reqPromise.push(httpRequest.get(param.url, {data: param.data}));
            newArr.push(loadArr[i]);
        }
    }
    
    if(vm.index == 21){ //微信绑定的数据需要再请求一个数据
        reqPromise.push(httpRequest.get(reqParams[2].url, {data: reqParams[2].data}))
        newArr.push(3);
    }
    if(reqPromise.length > 0){
        Promise.all(reqPromise).then(function(ress){
            var res2, res3, res4;
            for(var i=0; i<newArr.length; i++){
                var j = newArr[i] + 1;
                if(j == 2){
                    res2 = ress[i];
                }
                if(j == 3){
                    res3 = ress[i];
                }
                //微信绑定时，多获取一个请求数据
                if(j == 4){
                    res4 = ress[i];
                }
            }
            if(res2){
                if(res2.status == 200){
                    handleSecondPanelData(res2.data, vm);
                    if(vm.index == '5'){
                        var arr = [{
                            name: '健康文章',
                            value: vm.topDatas.index_83
                        },{
                            name: '健康指导',
                            value: vm.topDatas.index_5
                        }];
                        drawPieChart('pieChart', arr, ['#ffc800', '#17b3ec']);
                    }
                }else{
                   console.log(res2.msg);
                }
                
            }
            if(res3){
                if(res3.status == 200){
                    listHandle(res3.data, vm);
                }else{
                    console.log(res3.msg);
                }
            }
            if(res4){
                if(res4.status == 200){
                    handleWXBindData(res4.data, vm);
                }else{
                    console.log(res4.msg);
                }
            }
        })
    }
}
function handleSecondPanelData(data, vm){
    var xDatas = [],
        yDatas = [],
        names = [],
        colors = ['#12b7f5', '#cd67fd'],
        labels = {'3': '咨询量新增趋势', '4': '随访量新增趋势', '5': '推送量新增趋势', '20': '绑定设备新增趋势', '21': '绑定微信新增趋势', '27': '代预约量新增趋势'}
        index_names = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章"};
    for(var p in data){
        names.push(index_names[p]);
        if(p == 'index_21' || p == 'index_20'){
            var xData = _.map(data[p].data, function(o){
                return o.range;
            });
            var yData = _.map(data[p].data, function(o){
                return o.amount;
            });
        }else{
            var xData = _.map(data[p], function(o){
                return o.range;
            });
            var yData = _.map(data[p], function(o){
                return o.amount;
            });
        }
        
        xDatas.push(xData);
        yDatas.push(yData);
    }
    EventBus.$emit("draw-line-chart", {
        panelName : labels[vm.index],
        quotaNames : names,
        xData : xDatas[0],
        yDatas : yDatas,
        colors : colors
    });
}
function listHandle(data, vm){
    for(i in data){
        var list = data[i];
        var topArr = [];
        if(vm.index == "21"){
            topArr = soreRank(getKeyValueArr(list, 'bindRate'));
        }else{
            topArr = soreRank(getKeyValueArr(list, 'amount'));
        }
        var arr = _.map(list, function(o, index){
            var cols = [o.name];
            if(vm.index == '3'){
                var amount = o.amount.split(","); // 咨询量, 未回复咨询量
                cols.push(amount[0]);
                cols.push(amount[1]);
            }else if(vm.index == '21'){
                cols.push(o.bindRate + '%');
                cols.push(o.weChatAmount1);
                cols.push(o.weChatAmount0);
            }else{
                cols.push(o.amount);
                if(vm.index == '5'){
                    cols.push(o.readNum);
                    cols.push(o.readRate);
                }
            }
            return {
                rank: topArr[index],
                code: o.code,
                name: o.name,
                cols: cols
            }
        });
        var headers = {
            '3': ["排名", "咨询量", "未回复"],
            '4': ["排名", "随访量"],
            '5': ["排名", "总推送量", "阅读量", "阅读率"],
            '20': ["排名", "绑定设备"],
            '21': ["排名", "绑定率", "已缴费", "未缴费"],
            "27": ["排名", "代预约量"]
        };
        
        EventBus.$emit("render-area-data",{
            level: vm.level,
            area: vm.area,
            lowLevel: vm.lowLevel,
            headers: headers[vm.index],
            rows: arr
        });
    }
}
function handleWXBindData(data, vm){
    switch(vm.level){
        case 4:
            vm.wxTotal.label = "全市概况";
            break;
        case 3: 
            vm.wxTotal.label = "全区概况";
            break;
        case 2: 
            vm.wxTotal.label = "全社区概况";
            break;
    }
    vm.wxTotal.rate = (data.bindRate || 0) + "%";
    vm.wxTotal.amount1 = data.weChatAmount1;
    vm.wxTotal.amount2 = data.weChatAmount0;
    var arr = [{
        name: '已缴费人数',
        value: data.weChatAmount1
    },{
        name: '未缴费人数',
        value: data.weChatAmount0
    }];
    drawPieChart('pieChart2', arr, ['#17b3ec', '#909090']);
}

app/statistics/js/home.js

@@ -0,0 +1,66 @@
new Vue({
    el: '#main',
    data: {
        roles: [{"high":"0","code":"3502050100","level":"4","name":"海沧区嵩屿街道社区卫生服务中心","isManage":"1","authOperate":"0","areas":"3502050100"},
            {"high":"1","code":"350200","level":"2","name":"厦门市卫生与计划生育委员会","isManage":"1","authOperate":"0","areas":"350200"}],
        selectedRole: "",
        isopen: true,
        signAnalysis: [{
            photo: '../../images/qianyujingzhan_icon.png',
            label: '签约进展',
            url: ''
        },{
            photo: '../../images/xuqianjingzhan_icon.png',
            label: '续签进展',
            url: ''
        },{
            photo: '../../images/jumingfenxi_icon.png',
            label: '居民分析',
            url: 'resident-analysis.html'
        },{
            photo: '../../images/tuigaiqian_icon.png',
            label: '退改签',
            url: ''
        },{
            photo: '../../images/lianglvfenxi_icon.png',
            label: '两率分析',
            url: ''
        }],
        serviceAnalysis: [{
            photo: '../../images/zongtifenxi_icon.png',
            label: '总体分析',
            url: 'comprehensive-analysis.html'
        },{
            photo: '../../images/zixunfenxi_icon.png',
            label: '咨询分析',
            url: ''
        },{
            photo: '../../images/pijianfenxi_icon.png',
            label: '评价分析',
            url: ''
        },{
            photo: '../../images/changcufangfenxi_icon.png',
            label: '长处方分析',
            url: ''
        }]
    },
    methods: {
        open: function(){
            EventBus.$emit('open-click', {});
        },
        showDetail: function(url){
            window.location.href = url;
        }
    },
    mounted: function(){
        this.selectedRole = this.roles[0].code;
        var selected = this.roles[0];
        window.localStorage.setItem("selectedRole", JSON.stringify(selected));
    },
    watch: {
        selectedRole: function(val){
            var selected = _.findWhere(this.roles, {code: val});
            window.localStorage.setItem("selectedRole", JSON.stringify(selected));
        }
    }
})

app/statistics/js/resident-analysis.js

@@ -0,0 +1,13 @@
new Vue({
  el: '#main',
  data: {
		isback: false,
  		isrefresh: true,
  		isfilter:true,
  		isopen:true
	},
	mounted: function() {
	
		
	},
})

app/statistics/js/test.js

@@ -0,0 +1,13 @@
new Vue({
  el: '#main',
  data: {
		isback: false,
  		isrefresh: true,
  		isfilter:true,
  		isopen:true
	},
	mounted: function() {
	
		
	},
})

app/statistics/line-chart.html

@@ -1,106 +0,0 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>折线图区域</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.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/common.css"/>
    </head>
    <body>
        <div id="main">
            <line-chart :panelName="panelName" :quotaNames="quotaNames" :xData="xData" :yDatas="yDatas" :colors="colors"></line-chart>
        </div>
        
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            (function(){
                new Vue({
                    el: '#main',
                    data:{
                        panelName: '',
                        quotaNames: [],
                        xData: [],
                        yDatas: [],
                        colors: [],
                        requestParam: {
                            index: 3,
                            level: 4,
                            area: '350200', 
                            startDate: '2017-12-01', 
                            endDate: '2018-03-08',
                            interval: 1
                        }
                    },
                    mounted: function(){
                        var vm = this;
                        EventBus.$on("get-line-chart-data", function(arg){
                            vm.requestParam.interval = arg.dateType;
                            getLineData(vm);
                        });
                        getLineData(vm);
                    }
                });
                
                function getLineData(vm){
                    statisticAPI.interval(vm.requestParam).then(function(res){
                        console.log(res);
                        var xDatas = [],
                            yDatas = [],
                            names = [],
                            colors = ['#12b7f5', '#cd67fd'],
                            data = res.data;
                        for(var p in data){
                            names.push('咨询量');
                            if(p == 'index_21' || p == 'index_20'){
                                var xData = _.map(data[p].data, function(o){
                                    return o.range;
                                });
                                var yData = _.map(data[p].data, function(o){
                                    return o.amount;
                                });
                            }else{
                                var xData = _.map(data[p], function(o){
                                    return o.range;
                                });
                                var yData = _.map(data[p], function(o){
                                    return o.amount;
                                });
                            }
                            
                            xDatas.push(xData);
                            yDatas.push(yData);
                        }
                        vm.panelName = "咨询量新增趋势";
                        vm.quotaNames = names;
                        vm.xData = xDatas[0];
                        vm.yDatas = yDatas;
                        vm.colors = colors;
                        EventBus.$emit("draw-line-chart", {
                            panelName : "咨询量新增趋势",
                            quotaNames : names,
                            xData : xDatas[0],
                            yDatas : yDatas,
                            colors : colors
                        });
                    })
                }
            })()
            
        </script>
    </body>
</html>

app/statistics/resident-analysis.html

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居民分析</title>
		<meta name="author" content="yihu.com" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.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/common.css" />
		<style>
			.c-12b7f5{color:#12B7F5;}
			.c-fb5dab{color: #fb5dab;}
			.c-cd67fd{color:#cd67fd}
		</style>
	</head>
	<body style="margin: 0;">
		<div id="main">
			<header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
			<header-prompt></header-prompt>
			<div>
				<div style="margin: 20px 18px 0px 10px;width: calc(50% - 32px);;height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: left;">
					<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
						<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">缴费情况</div>
					</div>
					<div style="height: 140px;position: relative;">
						<div class="div-yijiaofei" style="position: absolute;right: 10px;color:#12B7F5;text-align: center;top: 50%;margin-top: -25px;">
							<div class="y-amount c-f16">975</div>
							<div class="y-rate c-f14">82.42%</div>
							<div class="y-title c-f12">已缴费人数</div>
						</div>
						<div class="div-weijiaofei" style="position: absolute;left: 10px;color:#FFC800;text-align: center;top: 50%;margin-top: -25px;">
							<div class="y-amount c-f16">208</div>
							<div class="y-rate c-f14">17.58%</div>
							<div class="y-title c-f12">未缴费人数</div>
						</div>
						<div id="jiaoFeiChart" style="height: 140px;"></div>
					</div>
				</div>
				<div style="margin: 20px 10px 0px 18px;width: calc(50% - 32px);height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: right;">
					<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
						<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">健康分布</div>
					</div>
					<div style="height: 140px;position: relative;">
						<div id="healthChart" style="width: 100%;height: 140px;"></div>
						<div class="ui-col-1 ui-grid ui-grid-vertical" style="position: absolute;top: 50%;margin-top: -45px;right: 10px;">
							<div id="jkCatalogs">
								<div class="ui-col-1">
									<span style="height: 15px;background: #42C7FF;width: 15px;display: inline-block;"></span>
									<span class="div-gwrq c-f14" style="color: #42C7FF;">93.85%</span>
									<span class="c-f12 c-909090">(未标注)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #FFC84C;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #FFC84C;">2.67%</span>
									<span class="c-f12 c-909090">(健康人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #FB5DAB;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #FB5DAB;">3.08%</span>
									<span class="c-f12 c-666">(患病人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #CD67FD;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #CD67FD;">0.41%</span>
									<span class="c-f12 c-666">(高危人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #795548;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #795548;">0.00%</span>
									<span class="c-f12 c-666">(恢复期人群)</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/common/event-bus.js"></script>
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../component/statistics/header-prompt.js"></script>
		<script src="js/resident-analysis.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			var jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart'));
			var jiaoFeiOptions = {
				color: ['#FFC800', '#12b7f5'],
				series: [{
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['50%', '50%'], //饼图的位置 
					data: [{
							name: '已缴费人数',
							value: 30,
							itemStyle: {
								normal: {
									label: {
										show: false,
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							name: '未缴费人数',
							value: 70,
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'center',
										color: '#666',
										formatter: function(params) {
											return '缴费情况\n分析';
										}
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					]
				}]
			};
			jiaoFeiChart.setOption(jiaoFeiOptions);
			window.onresize = jiaoFeiChart.resize;
			var healthChart = echarts.init(document.getElementById('healthChart'));
			var healthOptions = {
				color: ['#FFC800', '#12b7f5'],
				series: [{
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['25%', '50%'], //饼图的位置 
					data: [{
							name: '已缴费人数',
							value: 30,
							itemStyle: {
								normal: {
									label: {
										show: false,
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							name: '未缴费人数',
							value: 70,
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'center',
										color: '#666',
										formatter: function(params) {
											return '缴费情况\n分析';
										}
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					]
				}]
			};
			healthChart.setOption(healthOptions);
			window.onresize = healthChart.resize;
		</script>
	</body>
</html>

app/statistics/test.html

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<meta name="author" content="yihu.com" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.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="common.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
	</head>
	<body>
		<div id="main">
			<header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
			<header-prompt></header-prompt>
		</div>
		
		
		<script type="text/javascript" src="../../js/vue.js"></script>
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../component/statistics/header-prompt.js"></script>
		<script src="js/test.js"></script>
	</body> 
</html>

component/record/education-list.js

@@ -1,10 +1,10 @@
Vue.component('follow-list', {
	template: `<ul class="consultation-list">
				<li class="consultation-list-item" @click="viewDetail(1)" v-for="(list,index) in eduList">
					<p class="follow-up-doctor"><span class="start-time pull-right">发送时间：{{list.fsrq}}</span>随访医生：{{list.doctor}}</p>
					<p class="follow-up-doctor">{{list.attachedTitle}}</p>
					<div class="follow-user-info leave-word-container">
						<span class="follow-status" :data-status="list.status" desc="1进行2结束"></span>
						<p class="leave-word">医生留言:{{list.ysly}}</p>
						<p class="leave-word">医生留言:{{list.leaveWords?list.leaveWords:"无留言信息"}}</p>
					</div>
				</li>
			</ul>`,
@@ -20,14 +20,21 @@ Vue.component('follow-list', {
			top.layer.open({
		      type: 2,
		      maxmin: true,
		      area: ['600px', '360px'],
		      title: '健康教育文章详情',
		      area: ['1000px', '650px'],
		      shadeClose: true,
		      content: 'ddd'
		      moveOut:true,
		      btn:'返回',
		      success: function(layero){
				layero.find('.layui-layer-btn').css({'text-align': 'center','border-top': '1px solid #ececec','padding-top': '7.5px'});
				layero.find('.layui-layer-btn').find('a').addClass("layui-btn").css({background: '#f96565',color: '#fff',width: '100px',border: 'none', height: '34px','line-height':'22px',padding: '6px 12px','font-size': '14px'});
			  },
		      content: '../html/lay_gui_article_detail.html'
		    });
		}
	},
	watch:{
		consultaData:function(val){
		eduData:function(val){
			this.eduList=this.eduData;
		}
	},

component/record/follow-up-list.js

@@ -4,7 +4,7 @@ Vue.component('follow-list', {
					<p class="follow-up-doctor"><span class="start-time pull-right">开始时间：{{list.createTime}}</span>随访医生：{{list.doctorName}}</p>
					<div class="follow-user-info">
						<span class="follow-status" :data-status="list.status" desc="1进行2结束"></span>
						<p>方式/类型：{{list.followupTypeName}}{{list.followupClassName?"/"+list.followupClassName:""}}</p>
						<p class="act-type">方式/类型：{{list.followupTypeName}}{{list.followupClassName?"/"+list.followupClassName:""}}</p>
						<p class="completion-time">{{list.status==1?"计划时间："+list.followupPlanDate:"完成时间："+list.followupDate}}</p>
					</div>
				</li>

component/record/guidance-list.js

@@ -2,9 +2,9 @@ Vue.component('consultation-list', {
	template: `<ul class="consultation-list">
				<li class="consultation-list-item" @click="viewDetail(1)" v-for="(list,index) in guidanceList">
					<div class="con-user-info">
						<span class="guidance-status" :data-status="list.status" desc="1未读2已读"></span>
						<p class="article-title">文章标题：{{list.title}}</p>
						<p class="user-problem">发送时间：{{list.fsrq}}</p>
						<span class="guidance-status" :data-status="list.status?list.status:1" desc="1未读2已读"></span>
						<p class="article-title">{{list.content}}</p>
						<p class="user-problem">发送时间：{{list.createTime}}</p>
					</div>
				</li>
			</ul>`,
@@ -19,15 +19,22 @@ Vue.component('consultation-list', {
		viewDetail: function(id) {
			top.layer.open({
		      type: 2,
		      title: '健康指导文章详情',
		      maxmin: true,
		      area: ['600px', '360px'],
		      area: ['1000px', '650px'],
		      shadeClose: true,
		      content: 'ddd'
		      moveOut:true,
		      btn:'返回',
		      success: function(layero){
			  	layero.find('.layui-layer-btn').css({'text-align': 'center','border-top': '1px solid #ececec','padding-top': '7.5px'});
			  	layero.find('.layui-layer-btn').find('a').addClass("layui-btn").css({background: '#f96565',color: '#fff',width: '100px',border: 'none', height: '34px','line-height':'22px',padding: '6px 12px','font-size': '14px'});
			  },
		      content: '../html/lay_gui_article_detail.html'
		    });
		}
	},
	watch:{
		consultaData:function(val){
		guidanceData:function(val){
			this.guidanceList=this.guidanceData;
		}
	},

component/record/toBeReserved-list.js

@@ -1,30 +1,39 @@
Vue.component('follow-list', {
	template: `<ul class="consultation-list">
				<li class="consultation-list-item" @click="viewDetail(1)" v-for="(list,index) in toBeReservedList">
					<p class="follow-up-doctor"><span class="start-time pull-right">开始时间：{{list.createTime}}</span>随访医生：{{list.doctorName}}</p>
					<p class="follow-up-doctor"><span class="start-time pull-right">开始时间：{{list.czrq}}</span>随访医生：{{list.doctorName}}</p>
					<div class="follow-user-info">
						<p>科室/医院：{{list.followupTypeName}}{{list.followupClassName?"/"+list.followupClassName:""}}</p>
						<p class="completion-time">预约时间：{{list.followupPlanDate}}</p>
						<p>科室/医院：{{list.deptName}}/{{list.orgName}}</p>
						<p class="completion-time">预约时间：{{list.startTime}}</p>
					</div>
				</li>
			</ul>`,
	data: function() {
		return {
			toBeReservedList: "",
			toBeReservedList: [{id:1,photo:'#',dname:'山东省地方',czrq:'2018-12-12 12:12:12',orgName:'xx医院',doctorName:'陈医生',deptName:'心理科室',startTime:'2018-12-12 12:12:12'}],
//			toBeReservedList: "",
			curPage:1
		}
	},
	props:["toBeReservedData"],
	methods: {
		viewDetail: function(id) {
		viewDetail:function(){
			top.layer.open({
		      type: 2,
		      maxmin: true,
		      area: ['600px', '360px'],
		      area: ['1000px', '650px'],
		      shadeClose: true,
		      content: 'ddd'
		    });
		      moveOut:true,
		      btn:'返回',
		      success: function(layero){
			  	layero.find('.layui-layer-btn').css({'text-align': 'center','border-top': '1px solid #ececec','padding-top': '7.5px'});
			  	layero.find('.layui-layer-btn').find('a').addClass("layui-btn").css({background: '#f96565',color: '#fff',width: '100px',border: 'none', height: '34px','line-height':'22px',padding: '6px 12px','font-size': '14px'});
			  },
		      content: '../html/lay_detail_reserved.html'
		   	});
//			top.layer.full(layerTop);
		}
		
	},
	watch:{
		followUpData:function(val){

component/statistics/area-data-panel.js

@@ -0,0 +1,85 @@
(function(){
    Vue.component('area-data-panel',{
        template: '<div class="area-panel">\
                <div class="area-tab-panel">\
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && !lowLevel}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': level==3 || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
                </div>\
                <table class="bottom-list-table mb20" id="listTable">\
                    <thead><tr>\
                        <th v-for="th in headers">{{th}}</th>\
                        <th v-show="level>2 && lowLevel != 1" width="20"></th>\
                    </tr></thead>\
                    <tbody>\
                        <tr v-for="row in rows" class="data-row" @click="getLowLeverData(row)">\
                            <td v-for="(col, index) in row.cols" :class="{\'area-name\': index == 0}">\
                                <div v-if="index==0" class="ranking" :class="{\'ranking1\': row.rank==1, \'ranking2\': row.rank==2, \'ranking3\': row.rank==3}">{{row.rank}}</div>\
                                <div v-if="index==0" class="ui-col-1 c-nowrap-multi">{{col}}</div>\
                                <span v-else>{{col}}</span>\
                            </td>\
                            <td v-show="level>2 && lowLevel != 1"><i class="fa fa-angle-right"></i></td>\
                        </tr>\
                    </tbody>\
                </table>\
            </div>',
        props:[],
        data: function(){
            return {
                level: '',
                lowLevel: '',
                area: '',
                headers: [],
                rows: []
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("render-area-data", function(arg){
                vm.level = arg.level;
                vm.lowLevel = arg.lowLevel;
                vm.area = arg.area;
                vm.headers = arg.headers;
                vm.rows = arg.rows;
            })
        },
        methods: {
            getLowLeverData: function(row){
                if(this.level > 2 && this.lowLevel != 1){
                    //跳转去下一级数据
                    this.level --;
                    this.area = row.code;
                    //触发组件监听事件,去父页面请求新的数据
                    this.$emit("getnewdata", {
                        level: this.level,
                        area: this.area,
                        lowLevel: this.lowLevel
                    });
                }else{
                    //弹框显示团队信息
                    Vuedals.Bus.$emit('new', {
                        title: '团队信息',
                        component: 'team-info',
                        props: {
                            teamId: 644
                        }
                    });
                }
            },
            getLowCodeData: function(code){
                if(code == 3){
                    this.lowLevel = '';
                }else{
                    this.lowLevel = code;
                }
                
                //触发组件监听事件,去父页面请求新的数据
                this.$emit("getnewdata", {
                    level: this.level,
                    area: this.area,
                    lowLevel: this.lowLevel
                });
            }
        }
    });
})()

component/statistics/header-prompt.js

@@ -0,0 +1,20 @@
Vue.component('header-prompt', {
	template: '<div class="cb-ebebf5 height-30 lheight-30 pl20 c-f12">\
					<span id="area_title" class="c-666">厦门市卫生与计划生育委员会</span> (\
					<span id="jiezhi_time" class="c-666">09:13</span>)\
					<span id="select_date" class="c-12b7f5 ml20 mr20">2017年</span>\
					<span id="dimension_val" class="c-12b7f5">按任务</span>\
			</div>',
	props: [],
	data: function() {
		return {
			
		}
	},
	mounted: function() {
		
	},
	methods: {
		
	}
})

component/statistics/header-tab.js

@@ -0,0 +1,41 @@
Vue.component('header-tab', {
	template: '<div class="div-header">\
			<div class="fl">\
				<div class="application-name">签约进展</div>\
				<div class="vertical-line"></div>\
				<img v-show="isback" @click="back" src="../../images/fanhui_icon.png" width="18" height="18" class="mr10 vam" />\
				<img v-show="isrefresh" @click="refresh" src="../../images/shuaxin_icon.png" width="18" height="18" class="vam" />\
			</div>\
			<div class="fr mt10">\
				<img v-show="isfilter" @click="filter" src="../../images/xuanzhe_icon.png" width="18" height="18" class="mr10" />\
				<img v-show="isopen" @click="open" src="../../images/zhankai_icon.png" width="18" height="18" />\
			</div>\
		</div>',
	props: ["code","isback", "isrefresh","isfilter","isopen"],
	data: function() {
		return {
			
		}
	},
	mounted: function() {
		
	},
	methods: {
		//返回事件
		back:function(){
			EventBus.$emit('back-click', {});
		},
		//刷新事件
		refresh:function(){
			EventBus.$emit('refresh-click', {});
		},
		//筛选事件
		filter:function(){
			EventBus.$emit('filter-click', {});
		},
		//展开事件
		open:function(){
			EventBus.$emit('open-click', {});
		}
	}
})

component/statistics/line-chart.js

@@ -29,8 +29,8 @@
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据
                EventBus.$emit("get-line-chart-data", {dateType: type});
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            }
        },
        mounted: function(){
@@ -63,15 +63,14 @@
            var val = lastValue.substr(5,2)+"月"
            vm.endDate = lastValue.substr(0,4)+"年"+val;
        }
        console.log(lastValue);
        var options = {
            tooltip: {
                trigger: 'axis'
            },
            color: colors,
            legend: {
                bottom: '0px',
                data: name,
                top: '0px',
                data: names,
                borderColor: "#f1f1f1"
            },
            grid: {
@@ -140,7 +139,7 @@
            legend = [];
        for(var i=0; i<yDatas.length; i++){
            var obj = {
                name: name[i],
                name: names[i],
                type: 'line',
                smooth: true,
                data: yDatas[i],

component/statistics/team-info.js

@@ -0,0 +1,53 @@
(function(){
    Vue.component('team-info',{
        template: '<div>\
            <div class="pt15" id="teamInfoBox">\
                <div class="plr15 pb20">\
                <span class="c-f14 c-bold c-333">团队名称：</span>\
                <span class="c-f14 c-333">{{team.name}}</span>\
            </div>\
            <div class="plr15 pb20">\
                <span class="c-f14 c-bold c-333">所在社区：</span>\
                <span class="c-f14 c-333">{{team.hospitalName}}</span>\
            </div>\
            <div class="plr15 pb20">\
                <span class="c-f14 c-bold c-333">团队长：</span>\
                <span class="c-f14 c-333">{{team.leaderName}}</span>\
            </div>\
            <div class="plr15 pb20">\
                <span class="c-f14 c-bold c-333">团队成员(<span class="span-team-count">{{memberLength}}</span>人)：</span>\
                <p class="c-f14 c-333 mt10">\
                    <span v-for="(member, index) in members">{{index==0? "": " 、"}}{{member.name}}</span>\
                </p>\
            </div>\
        </div>',
        props:['teamId'],
        data: function(){
            return {
                team: {},
                members: [],
                memberLength: 0
            }
        },
        mounted: function(){
            console.log(this.teamId);
            var vm = this;
            getTeamInfo(vm);
        }
    });
    
    function getTeamInfo(vm){
        var params = {
            teamId: vm.teamId
        };
        statisticAPI.getTeamInfo(params).then(function(res){
            if(res.status == 200){
                vm.team = res.data.team;
                vm.members = res.data.members;
                vm.memberLength = res.data.members.length;
            }else{
                console.log(res.msg);
            }
        })
    }
})()