统计，上门服务、专病分析

api/statistics-api.js

@@ -101,6 +101,14 @@
        exportTreeList: function(data){
            return httpRequest.get("statisticsExport/treeList", {data: data});
        },
        // 专病分析-疾病类型
        specialistAnalysisDiseaseType: function(data){
            return httpRequest.get("specialistStatistics/specialistAnalysisDiseaseType", {data: data});
        },
        selectHospital: function(data){
            return httpRequest.get("specialistStatistics/selectHospital", {data: data});
        },
        
    }
    exports.statisticAPI = statisticAPI;

app/statistics/css/common.css

@@ -13,17 +13,25 @@
.c-323232 {
	color: #323232;
}
.c-FF9526{
	color: #FF9526;
}
.c-19d5c5 {
	color: #19d5c5;
}
.bgc-f2f3f5{
	background: #f2f3f5;
}
.bgc-f2f3f4{
	background: #f2f3f4;
}
.c-ffc800 {
	color: #ffc800;
}
.c-FF5E6C{
	color: #FF5E6C;
}
.c-75ed59 {
	color: #75ed59;
@@ -32,14 +40,24 @@
.c-w-33 {
	width: 33%;
}
.ptb60{
	padding-top: 60px;
	padding-bottom: 60px;
}
.plr25{
	padding-right: 25px;
	padding-left: 25px;
}
.mt60{
	margin-top: 60px;
}
.mlr25{
	margin-right: 25px;
	margin-left: 25px;
}
.pr40{
	padding-right: 40px;
}
ul {
	list-style: none;
}
@@ -526,6 +544,10 @@ ul {
	margin-right: 20px;
}
.c-border-17b3ec{
	border:1px solid #17b3ec;
}
.tac {
	text-align: center;
}
@@ -700,15 +722,18 @@ a {
.vuedal.lg header {
.vuedal.lg header ,.vuedal.w90 header{
	font-size: 18px;
    color: #333333;
    padding-bottom: 15px;
}
.vuedal.lg header .close {
.vuedal.lg header .close ,.vuedal.w90 header .close {
    font-size: 32px;
    line-height: 30px;
}
.vuedal.w90{
	width: 90%;
}
.mod {
@@ -873,6 +898,7 @@ body .el-table th.gutter{
    font-weight: normal;
}
.c-border-r-4{border-radius: 4px;}
.c-border-r-5{border-radius: 5px;}
.bgc-ebebf5{
	background-color: #ebebf5;
}
@@ -941,4 +967,64 @@ body .el-table th.gutter{
    color: #ffffff;
    border-color: #FFAA00;
    background-color: #FFAA00;
}
.el-button--17b3ec{
	background: #17b3ec;
    border: 1px solid #17b3ec;
    color: #ffffff;
}
.el-button--17b3ec:focus, .el-button--17b3ec:hover {
    color: #ffffff;
    border-color: #00a5e0;
    background-color: #00a5e0;
}
.left-17B3EC:before{
	content:"";
	width:4px;
	height:16px;
	background-color: #17B3EC;
	position: absolute;
	margin-top: 3px;
	margin-left: 0px;
}
.left-17B3EC-div:before{
	content:"";
	width:4px;
	height:16px;
	background-color: #17B3EC;
	position: absolute;
	margin-top: 25px;
    margin-left: 0px;
    z-index: 1;
}
.legend-icon{
	color:#333333;
	font-size: 12px;
	position: absolute;
	right:15px;
	top: 0px;
	line-height: 45px;
}
.legend-icon div:first-child{
	margin-right: 30px;
}
.legend-icon .legend-17B3EC:before{
	content: "";
	position: absolute;
	background:#17B3EC;
	width: 12px;
	height: 12px;
	border-radius: 1px;
	top: 17px;
	margin-left:-16px;
}
.legend-icon .legend-20D7AD:before{
	content: "";
	position: absolute;
	background:#20D7AD;
	width: 12px;
	height: 12px;
	border-radius: 1px;
	top: 17px;
	margin-left:-16px;
}

app/statistics/html/home.html

@@ -32,10 +32,6 @@
                <div class="fr mt10">
                    <img v-show="false" @click="open" src="../../../images/zhankai_icon.png" width="18" height="18" />
                </div>
                <div class="fr mt10 c-cursor-p" @click="goToPage(3)">
                    <img @click="open" src="../../../images/download.png" width="18" height="18" />
                    <span class="pl5 c-333">数据导出</span>
                </div>
            </div>
            <!-- 饼图 -->
            <div class="mt10 mb30">
@@ -105,6 +101,20 @@
                    </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 mb30 mt10">
                    <div class="c-row n-row">
                        <div @click="goToPage(3)" class="c-20 mt20 c-t-center clearfix">
                            <img src="../../../images/shujudaochu_icon.png">
                            <div class="c-f12 c-999 mt10">数据导出</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>

app/statistics/html/smfw-analysis.html

@@ -3,7 +3,7 @@
	<head>
		<meta charset="UTF-8">
		<title>资质分析</title>
		<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" />
@@ -24,85 +24,156 @@
	</style>
	<body>
		<div id="main" class="c-hide" v-cloak>
			<header-tab appname="上门服务" isback="true" isrefresh="true"></header-tab>
			<div class="mt20">
				<div class="c-border mlr20  c-border-r-4">
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('smfw-comprehensive-analysis.html')">
			        	<img src="../../../images/bingtu_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">总体分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('smfw-ruhufangshi-analysis.html')">
			        	<img src="../../../images/bingtu_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">入户访视分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('qualifications-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">资质分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('subsidy-cost.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">补助费用分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('service-sheet-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">服务工单分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid pt15 pb10 plr30 c-cursor-p" @click="goPage('response-speed-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">响应速度分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			    </div>
		<div id="main" class="c-hide" v-cloak  v-loading.fullscreen.lock="isloading">
			<header-tab :appname="appname" isback="true" isrefresh="true" :isfilter="true"></header-tab>
			<header-prompt></header-prompt>
			<div class="ptb20 plr20">
				<div class="ui-grid" style="overflow:auto;">
					<div class="ui-col-0 pr20">
						<div class="ui-grid">
							<div class="ui-col-1 pr20 mt20">
								<div  v-show="pageIndex==1" class="c-t-center">
									<div class="c-border c-border-r-5 ptb10" style="min-width: 100px;">
										<div class="c-f24 c-17b3ec"><span class="c-f18">{{pageData.servedPatientNum||'0'}}</span></div>
				    					<div class="c-f14 c-999 pt10">已服务居民</div>
									</div>
									<div class="c-border c-border-r-5 ptb10 mt10">
										<div class="c-f24 c-17b3ec pt10"><span class="c-f18">{{pageData.doorPrescriptionNum||'0'}}</span></div>
			    						<div class="c-f14 c-999 pt10">开具处方</div>
									</div>
									<div class="c-border c-border-r-5 ptb10 mt10">
										<div class="c-f24 c-17b3ec pt10"><span class="c-f18">{{pageData.serviceOrderNum||'0'}}</span></div>
			    						<div class="c-f14 c-999 pt10">服务工单</div>
									</div>
									<div class="c-border c-border-r-5 ptb10 mt10">
										<div class="c-f24 c-FF9526 pt10"><span class="c-f18">￥{{pageData.totalPrice||'0'}}</span></div>
			    						<div class="c-f14 c-999 pt10">服务费用</div>
									</div>
								</div>
								<div  v-show="pageIndex==2" class="c-t-center">
									<div class="c-border c-border-r-5 ptb10 mt60" style="min-width: 160px;">
		            					<div class="c-f24 c-17b3ec pt10"><span class="c-f18">{{pageData2.numTotal||'0'}}</span></div>
					    				<div class="c-f14 c-999 pt10">已访视居民</div>
									</div>
									<div class="c-border c-border-r-5 ptb10 mt60">
										<div class="c-f24 c-FF9526 pt10"><span class="c-f18">{{pageData2.timesTotal||'0'}}</span></div>
			    						<div class="c-f14 c-999 pt10">访视量</div>
									</div>
								</div>
							</div>
							<div class="ui-col-0" style="width:400px;">
								<div class="mt20 c-border c-border-r-5 plr20 c-position-r" v-show="pageIndex==1">
						        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b">
							    		<span class="pl15">服务类型分析</span>
							    	</div>
							    	<div class="pie-chart ptb60" id="pieChart0" style="height: 197px; width: 100%;" v-show="pieShow0"></div>
					            	<div  v-show="!pieShow0" class="c-t-center pt10"  style="height: 197px; width: 100%;">
					            		<img src="../../../images/wushuju_img.png" alt="" style="width: 197px;"/>    
					            		<div class="pt5 c-f16 c-666">无数据</div>
					            	</div>
						        </div>
								<div class="mt20 c-border c-border-r-5 plr20 c-position-r" v-show="pageIndex==2">
						        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b">
							    		<span class="pl15">访视人群分析</span>
							    	</div>
							    	<div class="pie-chart ptb60" id="pieChart2" style="height: 197px; width: 100%;" v-show="pieShow2"></div>
					            	<div  v-show="!pieShow2" class="c-t-center pt10"  style="height: 197px; width: 100%;">
					            		<img src="../../../images/wushuju_img.png" alt="" style="width: 197px;"/>    
					            		<div class="pt5 c-f16 c-666">无数据</div>
					            	</div>
						        </div>
							</div>
						</div>
						<div class="mt20 c-border c-border-r-5 plr20 c-position-r" v-show="pageIndex==1">
				        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b  c-position-r">
					    		<span class="pl15">新增服务工单趋势</span>
					    		<div class="c-position-a" style="right: 10px;top: 5px;" >
					    			<el-button type="17b3ec" size="mini" round @click="gotoServerList">服务工单记录</el-button>
					    		</div>
					    	</div>
        					<line-chart lineid="lineChart1"></line-chart>
				        </div>
						<div class="mt20 c-border c-border-r-5 plr20 c-position-r" v-show="pageIndex==2">
				        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b">
					    		<span class="pl15">访视量新增趋势</span>
					    	</div>
        					<line-chart lineid="lineChart2"></line-chart>
				        </div>
					</div>
					<div class="ui-col-1">
						<div v-show="pageIndex==1">
							<div class="ui-grid">
								<div class="ui-col-0 pr20" style="width:400px;">
									<div class="mt20 c-border c-border-r-5 plr20 c-position-r">
							        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b">
								    		<span class="pl15">服务类型分析</span>
								    	</div>
								    	<div class="pie-chart ptb60" id="pieChart1" style="height: 197px; width: 100%;" v-show="pieShow1"></div>
						            	<div  v-show="!pieShow1" class="c-t-center pt10"  style="height: 197px; width: 100%;">
						            		<img src="../../../images/wushuju_img.png" alt="" style="width: 197px;"/>    
						            		<div class="pt5 c-f16 c-666">无数据</div>
						            	</div>
							        </div>
								</div>
								<div class="ui-col-1" style="min-width:450px;">
									<div class="mt20 c-border c-border-r-5 c-position-r">
							        	<div class="c-f16 c-333333 ptb8 mb20  mlr20 left-17B3EC c-border-b">
								    		<span class="pl15">服务类型分析</span>
								    	</div>
								    	<div style="overflow:auto;height: 318px;">
											<table-panel ref="tableRef_0" :tabledata="tabledata0" @getnewdata="getnewdata0" :reqlength="reqListLength0" @backtobefore="backClick0" :hastopbar="hastopbar0" :cantclick="true"></table-panel>
								        </div>
							        </div>
								</div>
							</div>
							<div class="mt20 c-border c-border-r-5 c-position-r">
					        	<div class="c-f16 c-333333 ptb8 mb20 mlr20 left-17B3EC c-border-b">
						    		<span class="pl15">服务项目排名分析</span>
						    	</div>
						    	<div style="overflow:auto;height: 355px;">
									<table-panel ref="tableRef_1" :tabledata="tabledata1" @getnewdata="getnewdata1" :reqlength="reqListLength1" @backtobefore="backClick1"></table-panel>
						        </div>
					        </div>
						</div>
						<div v-show="pageIndex==2" style="width:100%;">
							<div class="mt20 c-border c-border-r-5 c-position-r">
					        	<div class="c-f16 c-333333 ptb8 mb20 mlr20 left-17B3EC c-border-b">
						    		<span class="pl15">访视量排行</span>
						    	</div>
						    	<div style="overflow:auto;height: 750px;">
									<table-panel ref="tableRef_2" :tabledata="tabledata2" @getnewdata="getnewdata2" :reqlength="reqListLength2" @backtobefore="backClick2"></table-panel>
						        </div>
					        </div>
						</div>
					</div>
				</div>
			</div>
	        <!--模态框组件-->
	        <vuedals></vuedals>
		</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="../../../plugins/toastr/toastr.min.js"></script>
		<script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/home-api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/event-bus.js"></script>
		<script src="../../../component/statistics/header-tab.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/element-ui.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../plugins/toastr/toastr.min.js"></script>
	    <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
	    <!--<script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
	    <script src="../js/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-single.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../component/statistics/table-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="../../../component/statistics/smfw-filter.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../component/statistics/iframe-page.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			new Vue({
				el: "#main",
				data: {
					
				},
				mounted: function() {
					var vm = this
					//初始化数据
					$("#main").removeClass("c-hide");
					//监听后退按钮的操作
					EventBus.$on("back-click", function(arg) {
						history.go(-1);
					});
					//监听页面刷新
					EventBus.$on("refresh-click", function(arg) {
						vm.$forceUpdate();
					});
				},
				methods: {
					initData:function(){
						var vm = this
					},
					goPage: function(url) {
						window.location.href = url;
					},
				}
			});
		</script>
		<script src="../js/smfw-analysis.js"></script>
	</body>
</html>

app/statistics/html/smfw-analysis1.html

@@ -0,0 +1,108 @@
<!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="shortcut icon" href="../../../favicon.ico">
		<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/flex.css" />
		<link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../../../css/element-ui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
	</head>
	<style>
		.c-border-r-4{border-radius: 4px;}
		.c-arrow-r{position:absolute;top:50%;right:20px;margin-top:-5px;content:"";display:block;width:11px;height:11px;border:solid #999999;border-width:1px 1px 0 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
	</style>
	<body>
		<div id="main" class="c-hide" v-cloak>
			<header-tab appname="上门服务" isback="true" isrefresh="true"></header-tab>
			<div class="mt20">
				<div class="c-border mlr20  c-border-r-4">
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('smfw-comprehensive-analysis.html')">
			        	<img src="../../../images/bingtu_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">总体分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('smfw-ruhufangshi-analysis.html')">
			        	<img src="../../../images/bingtu_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">入户访视分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('qualifications-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">资质分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('subsidy-cost.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;" class="ui-col-0"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">补助费用分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid c-border-b pt15 pb10 plr30 c-cursor-p" @click="goPage('service-sheet-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">服务工单分析</div>
			            <div class="c-arrow-r"></div>
			        </div>
			        <div class="c-position-r ui-grid pt15 pb10 plr30 c-cursor-p" @click="goPage('response-speed-analysis.html')">
			        	<img src="../../../images/erweibiao_icon.png" style="width: 30px;"/>
			        	<div  class="ui-col-0 c-f16 c-333 pl20">响应速度分析</div>
			            <div class="c-arrow-r"></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="../../../plugins/toastr/toastr.min.js"></script>
		<script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/home-api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/event-bus.js"></script>
		<script src="../../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			new Vue({
				el: "#main",
				data: {
					
				},
				mounted: function() {
					var vm = this
					//初始化数据
					$("#main").removeClass("c-hide");
					//监听后退按钮的操作
					EventBus.$on("back-click", function(arg) {
						history.go(-1);
					});
					//监听页面刷新
					EventBus.$on("refresh-click", function(arg) {
						vm.$forceUpdate();
					});
				},
				methods: {
					initData:function(){
						var vm = this
					},
					goPage: function(url) {
						window.location.href = url;
					},
				}
			});
		</script>
	</body>
</html>

app/statistics/html/special-analysis.html

@@ -0,0 +1,239 @@
<!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/flex.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/element-ui.css" />
    <link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
</head>
<style>
.el-radio-button:first-child .el-radio-button__inner{
	border-radius: 15px 0 0 15px;
}
.el-radio-button:last-child .el-radio-button__inner{
	border-radius:  0 15px 15px 0;
}
.el-tabs__header{
	margin: 0;
}
</style>
<body style="margin: 0;overflow-x: auto;">
    <div id="main" class="c-hide"  v-cloak v-loading.fullscreen.lock="isloading">
        <header-tab appname="专病分析" isback="true" isrefresh="true" :isfilter="true" ></header-tab>
        <header-prompt></header-prompt>
        <div class="pt20 plr20">        
	        <div class="ui-grid">
	        	<div class="ui-col-1 pr40">
	        		<el-select v-model="valueName" placeholder="请选择" @change="seleName" style="width:100%;">
                        <el-option v-for="item in optionsName" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                   </el-select>
			    	<div class="c-t-center plr15">
			    		<div class="ui-grid ptb20">
				    		<div class="ui-col-0 c-33 c-border-r">
				    			<div class="c-f24 c-12b7f5">{{pageData.specialistHospital||0}}家</div>
	            				<div class="c-f14 c-666">医院</div>
				    		</div>
				    		<div class="ui-col-0 c-33 c-border-r">
				    			<div class="c-f24 c-12b7f5">{{pageData.specialist||0}}人</div>
	            				<div class="c-f14 c-666">专科医生</div>
				    		</div>
				    		<div class="ui-col-1">
				    			<div class="c-f24 c-12b7f5">{{pageData.communityHospital||0}}家</div>
	            				<div class="c-f14 c-666">基层医疗机构</div>
				    		</div>
			    		</div>
			    	</div>
                    <div class="flex f_x_s">
                    	<div class="c-border c-20 c-border-r-5 ptb30 c-t-center">
                    		<img src="../../../images/zongfuwurenshu_icon.png" width="100" height="100"/>
                    		<div class="c-f14 pt10 c-666">总服务人数/人次</div>
            				<div class="c-f24 c-333 mt5"><span class="c-17b3ec">{{pageData1.totalServiceNum||'0'}}</span>/{{pageData1.totalServiceTimes||'0'}}</div>
                    	</div>
                    	<div class="c-border c-20 c-border-r-5 ptb30 c-t-center">
                    		<img src="../../../images/gongguanhuanzheshu_icon.png" width="100" height="100"/>
                    		<div class="c-f14 pt10 c-666">共管患者人数</div>
            				<div class="c-f24 c-333 mt5"><span class="c-17b3ec">{{pageData1.coManagementNum||'0'}}</div>
                    	</div>
                    	<div class="c-border c-20 c-border-r-5 ptb30 c-t-center">
                    		<img src="../../../images/zhuanzhenrenshu_icon.png" width="100" height="100"/>
                    		<div class="c-f14 pt10 c-666">转诊人数/人次</div>
            				<div class="c-f24 c-333 mt5"><span class="c-17b3ec">{{pageData1.referralNum||'0'}}</span>/{{pageData1.referralTimes||'0'}}</div>
                    	</div>
                    	<div class="c-border c-20 c-border-r-5 ptb30 c-t-center">
                    		<img src="../../../images/xiazhuanrenshu_icon.png" width="100" height="100"/>
                    		<div class="c-f14 pt10 c-666">下转人数/人次</div>
            				<div class="c-f24 c-333 mt5"><span class="c-17b3ec">{{pageData1.rehabilitationNum||'0'}}</span>/{{pageData1.rehabilitationTimes||'0'}}</div>
                    	</div>
                    </div>
	        	</div>
	        	<div class="ui-col-0 pr5 plr20 c-border-r-5 c-border" style="width:600px;">
	        		<div class="c-f16 c-333333 ptb8 left-17B3EC c-border-b c-position-r">
			    		<span class="pl15">疾病类型分析</span>
			    		<div class="c-position-a" style="right: 15px;top: 2px;">
	            			<el-radio-group v-model="ptab" size="small" @change="showTab">
							    <el-radio-button label="1">转诊趋势</el-radio-button>
							    <el-radio-button label="2">服务人数</el-radio-button>
						    </el-radio-group>
	            		</div>
			    	</div>
	            	<!-- 折线图 -->
        			<line-chart v-show="ptab==1"  lineid="lineChart1"></line-chart>
        			<line-chart v-show="ptab==2"  lineid="lineChart2"></line-chart>
	        	</div>
	        </div>
	        <div class="mt20 c-border c-border-r-5 plr20 c-position-r">
	        	<div class="c-f16 c-333333 ptb8 mb20 left-17B3EC c-border-b">
		    		<span class="pl15">疾病类型分析</span>
		    		<div class="legend-icon flex f_wrap">
				  		<div class="legend-17B3EC">下转人数</div><div class="legend-20D7AD">下转人次</div>
				  	</div>
		    	</div>
		    	<div class="line-chart" id="barChart" style="height: 240px; width: 100%;"></div>
		    	<div class="mb10 c-t-center" v-if="initlevel>2">
	        		<div class="c-border-17b3ec c-border-r-5 c-17b3ec c-f16 c-t-center c-cursor-p" style="line-height: 38px;width:800px;margin: 0 auto;" @click="hopitalListShow">
	        			医院服务情况
	        		</div>
	        	</div>
	        </div>	        
	        <div class="mt20 c-border c-border-r-5 plr20 c-position-r">
	        	<div class="c-f16 c-333333 ptb8 left-17B3EC c-border-b">
		    		<span class="pl15">具体服务分析</span>
		    	</div>
		    	<div class="ui-grid">
		    		<div class="ui-col-0 c-25 c-border c-border-r-5 mt20 mr40">
			    		<div class="c-f14 c-333" style="line-height: 38px;">
			    			<span class="bgc-f2f3f4 pl15 pr30" style="border-bottom-right-radius: 38px;border-top-left-radius: 5px;padding-top: 11px;padding-bottom: 12px;">1.诊前-日常健康服务</span>
			    		</div>
			    		<div class="ptb20 pl40">
				    		<div class="c-333333 c-f16 ptb8">
				    			<span class="c-999999 ">疾病筛查　</span><span class="c-17b3ec">{{pageData2.screeningReferralNum||0}}</span><span>人</span> /  高危病人<span class="c-17b3ec">{{pageData2.highRiskNum||0}}</span><span c>人</span>
				    		</div>
				    		<div class="c-333333 c-f16 ptb8">
				    			<span class="c-999999">健康教育　</span><span class="c-17b3ec">{{pageData2.healthEducationTimes||0}}</span><span>人次</span>
				    		</div>
			    		</div>
			    	</div>
			    	<div class="ui-col-1 c-border c-border-r-5 mt20">
			    		<div class="c-f14 c-333" style="line-height: 38px;">
			    			<span class="bgc-f2f3f4 pl15 pr30" style="border-bottom-right-radius: 38px;border-top-left-radius: 5px;padding-top: 11px;padding-bottom: 12px;">2.就诊-在线诊疗情况</span>
			    		</div>
				    	<div class="ui-grid ptb20 clearfix">
				    		<div class="ui-col-0 c-20 c-border-r pl40">
				    			<div class="c-f16 ptb8 c-t-left" >
		                            <div class="c-999999">预约挂号    <span class="pl15 c-17b3ec">{{pageData3.appointmentTimes||0}}</span><span class="c-333">人</span></div>
		                        </div>
					    		<div class="c-f14 ptb10 c-t-left">
		                            <div class="c-999999">本周新增    <span class="pl15 c-FF5E6C">+{{pageData3.appointmentTimesAdd||0}}</span></div>
		                        </div>
				    		</div>
				    		<div class="ui-col-0 c-20 c-border-r pl40">
				    			<div class="c-f16 ptb8 c-t-left">
		                            <div class="c-999999">专家咨询    <span class="pl15 c-17b3ec">{{pageData3.specialistConsultTimes||0}}</span><span class="c-333">人</span></div>
		                        </div>
					    		<div class="c-f14 ptb10 c-t-left">
		                            <div class="c-999999">本周新增    <span class="pl15 c-FF5E6C">+{{pageData3.specialistConsultTimesAdd||0}}</span></div>
		                        </div>
				    		</div>
				    		<div class="ui-col-0 c-20 c-border-r pl40">
				    			<div class="c-f16 ptb8 c-t-left">
		                            <div class="c-999999">在线复诊    <span class="pl15 c-17b3ec">{{pageData3.onlineReferralTimes||0}}</span><span class="c-333">人</span></div>
		                        </div>
					    		<div class="c-f14 ptb10 c-t-left">
		                            <div class="c-999999">本周新增    <span class="pl15 c-FF5E6C">+{{pageData3.onlineReferralTimesAdd||0}}</span></div>
		                        </div>
				    		</div>
				    		<div class="ui-col-0 c-20 c-border-r pl40">
				    			<div class="c-f16 ptb8 c-t-left">
		                            <div class="c-999999">远程协诊    <span class="pl15 c-17b3ec">{{pageData3.remoteDiagnosisTimes||0}}</span><span class="c-333">人</span></div>
		                        </div>
					    		<div class="c-f14 ptb10 c-t-left">
		                            <div class="c-999999">本周新增    <span class="pl15 c-FF5E6C">+{{pageData3.remoteDiagnosisTimesAdd||0}}</span></div>
		                        </div>
				    		</div>
				    		<div class="ui-col-0 c-20 pl40">
				    			<div class="c-f16 ptb8 c-t-left">
		                            <div class="c-999999">上门看诊    <span class="pl15 c-17b3ec">{{pageData3.visitTimes||0}}</span><span class="c-333">人</span></div>
		                        </div>
					    		<div class="c-f14 ptb10 c-t-left">
		                            <div class="c-999999">本周新增    <span class="pl15 c-FF5E6C">+{{pageData3.visitTimesAdd||0}}</span></div>
		                        </div>
				    		</div>
			    		</div>
				    </div>
		    	</div>
		    	<div class="mtb20 c-border c-border-r-5">
		    		<div class="c-f14 c-333" style="line-height: 38px;width: 100%;">
		    			<span class="bgc-f2f3f4 pl15 pr30" style="border-bottom-right-radius: 38px;border-top-left-radius: 5px;padding-top: 11px;padding-bottom: 12px;">3.诊后康复共管情况</span>
		    		</div>
		    		<div class="ui-grid c-f16 pl40 ptb20 clearfix">
		    			<div class="c-999999">电话/短信关怀率　</div>
		    			<div class="c-17b3ec pl15">{{pageData4.rehabilitationPhoneTimes||0}}<span class="c-333">/{{pageData4.rehabilitationTimes||0}}（{{pageData4.rate||0}}）</span></div>
		    		</div>
		    		<div class="c-t-center pb20 c-border-b">
			    		<el-radio-group v-model="ttab" size="small" @change="showtTab">
						    <el-radio-button :label="1">等级医院</el-radio-button>
						    <el-radio-button :label="2">社区医院</el-radio-button>
					    </el-radio-group>
		    		</div>
		    		<table-panel v-show="ttab==1" ref="tableRef_1" :tabledata="tabledata1" @getnewdata="getnewdata1" :reqlength="reqListLength8" @backtobefore="backClick0" :hastopbar="hastopbar1"></table-panel>
		    		<table-panel v-show="ttab==2" ref="tableRef_2" :tabledata="tabledata2" @getnewdata="getnewdata2" :reqlength="reqListLength9" @backtobefore="backClick1" :hastopbar="hastopbar2"></table-panel>
		    	</div>
	        </div>
	        <div class="mt20 c-border c-border-r-5 plr20 c-position-r">
	        	<div class="c-f16 c-333333 ptb8 left-17B3EC c-border-b">
		    		<span class="pl15">医院总体服务情况</span>
		    	</div>
	    		<div class="c-t-center ptb20 c-border-b" v-if="initlevel>2">
		    		<el-radio-group v-model="tbtab" size="small" @change="showtbTab">
					    <el-radio-button :label="1">等级医院</el-radio-button>
					    <el-radio-button :label="2">社区医院</el-radio-button>
				    </el-radio-group>
	    		</div>
	    		<table-panel v-show="tbtab==1" ref="tableRef_01" :tabledata="tabledata01" @getnewdata="getnewdata01" :reqlength="reqListLength10" @backtobefore="backClick2"></table-panel>
	    		<table-panel v-show="tbtab==2" ref="tableRef_02" :tabledata="tabledata02" @getnewdata="getnewdata02" :reqlength="reqListLength11" @backtobefore="backClick3"></table-panel>
        	</div>
        </div>
        <!--模态框组件-->
        <vuedals></vuedals>
    </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/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="../js/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/jbsc-api.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-single.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/table-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="../../../component/statistics/special-filter.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/hospital-filter.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/special-analysis.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

app/statistics/js/common.js

@@ -1,6 +1,15 @@
var indexName = {'index_128': '预约总量', 'index_129': '居民预约量', 'index_130': '代预约量'};
function getSignDate(){   //获取初始化签约年
	var nowdate = new Date();
    var year = nowdate.getFullYear();
    var month = nowdate.getMonth() + 1;
    if(month<=6){
    	year = year - 1
    }
    return year
}
function getStartDate(chooseYear){
    // 按年度来计算的时候，开始时间是该年度7月1号还是到下一个年的6月30号结束
    if(chooseYear == 2016){
@@ -83,7 +92,7 @@ function soreRank(arr){
function handlePieData(arg){	
	var legend = {
        orient: 'vertical',
        right: '15%',
        right: arg.legendRight||'15%',
        y:'center',
   	};
   	var colorList=[]
@@ -331,4 +340,286 @@ function getChartData(elId, data, selectedDateType,hasLegend,title,unit){
    	});
	},10)
    
}
/**
 * 绘制柱状图数据处理
 * @param {Object} elId  div的id值
 * @param {Object} data  数据值
 */
function getBarData(arg){
	var dataZoom_end,
        xDatas = [],
        yDatas = [],
        names = [],
        colors = ['#12b7f5', '#cd67fd','#FF9526'];
    if(arg.colors){
    	colors = arg.colors
    }
    for(var p in arg.data){
    	if(arg.hasLegend){
        	names.push(arg.indexNames[p]);
    	}
        var xData = _.map(arg.data[p].data||arg.data[p], function(o){
            return o[arg.rangeParams]||o.range;
        });
        var yData = _.map(arg.data[p].data||arg.data[p], function(o){
            return o[arg.amountParams]||o.amount;
        });			        
        xDatas.push(xData);
        yDatas.push(yData);
        var lastIndex = yData.length % 10;
        if(yData.length >10 ){  
            dataZoom_end = 100-(9/yData.length)*100;  
        }else{  
            dataZoom_end = 0;  
        }
    }
    if(arg.typeV){
    	drawBarV({elId:arg.elId, name:names, dataZoom_end:dataZoom_end,
    		xData:xDatas[0], yDatas:yDatas, colors:colors,barCategoryGap:arg.barCategoryGap,argInit:arg})
    }else{
    	drawBarH({elId:arg.elId, name:names, dataZoom_end:dataZoom_end,
    		xData:xDatas[0], yDatas:yDatas, colors:colors,barCategoryGap:arg.barCategoryGap,argInit:arg})
    }
}
function drawBarH(arg){
    var barCharts = echarts.init(document.getElementById(arg.elId));
	var options = {
		tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            	type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        },
	        textStyle:{
	            align:'left'
			},
			formatter:function(datas){
				var res = datas[0].name + '<br/>'
		        for (var i = 0, length = datas.length; i < length; i++) {
	           		var unit = ""
	           		if(arg.argInit.units){
	           			unit = arg.argInit.units[datas[i].seriesName]
	           		}
		           	res += datas[i].seriesName + '：' 
		               	+ datas[i].value + unit +'<br/>'
		        }
		        return res
	       	}
		},
		calculable: false,
		grid: {
			borderWidth: 0,
			top:'20px',
			left: '20px',
	        right: '20px',
	        bottom: '20px',
	        containLabel: true
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: '#333333', //左边线的颜色
					width: '1' //坐标线的宽度
				}
			},
			axisTick: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: arg.xData
		}],
		yAxis: [{
			type: 'value',
			axisTick: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: '#333333', //左边线的颜色
					width: '1' //坐标线的宽度
				}
			},
		}],
	}
    var series = [];
    for(var i=0; i<arg.yDatas.length; i++){
        var obj = {
            name: arg.name[i],
        	data: arg.yDatas[i],
	        type: 'bar',
            barGap: 0,
			barWidth: 30, //柱图宽度 
            itemStyle:{
                normal:{
                	barBorderRadius: [50, 50, 0, 0],
					color: arg.colors[i],
					label: {
						show: true,
						position: 'top',
						textStyle: {
							color: "#333333",
							fontSize: 12
						}
					}
                }
            },
        };
        series.push(obj);
    }
    options.series = series;
	$("#"+arg.elId).removeAttr('_echarts_instance_')
    barCharts.setOption(options);
}
function drawBarV(arg){
    var barCharts = echarts.init(document.getElementById(arg.elId));
	var options = {
		tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            	type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        },
	        textStyle:{
	            align:'left'
			},
			formatter:function(datas){
				var res = datas[0].name + '<br/>'
		        for (var i = 0, length = datas.length; i < length; i++) {
	           		var unit = ""
	           		if(arg.argInit.units){
	           			unit = arg.argInit.units[datas[i].seriesName]
	           		}
		           	res += datas[i].seriesName + '：' 
		               	+ datas[i].value + unit +'<br/>'
		        }
		        return res
	       	}
		},
		calculable: false,
		grid: {
			borderWidth: 0,
			top:'5%',
			left: '3%',
	        right: '10%',
	        bottom: '5%',
	        containLabel: true
		},
		yAxis: [{
			type: 'category',
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: '#333333', //左边线的颜色
					width: '1' //坐标线的宽度
				}
			},
			axisTick: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: arg.xData
		}],
		xAxis: [{
			type: 'value',
			axisTick: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: '#333333', //左边线的颜色
					width: '1' //坐标线的宽度
				}
			},
		}],
	}
    var series = [];
    for(var i=0; i<arg.yDatas.length; i++){
        var obj = {
            name: arg.name[i],
        	data: arg.yDatas[i],
	        type: 'bar',
            barGap: 0,
			barWidth: 12, //柱图宽度 
            itemStyle:{
                normal:{
                	barBorderRadius: [0, 50, 50, 0],
					color: arg.colors[i],
					label: {
						show: true,
						position: 'right',
						textStyle: {
							color: "#333333",
							fontSize: 12
						}
					}
                }
            },
        };
        series.push(obj);
    }
	options = newline(options, 4, 'yAxis')
    options.series = series;
	$("#"+arg.elId).removeAttr('_echarts_instance_')
    barCharts.setOption(options);
}
function newline(option, number, axis){
    /* 此处注意你的json是数组还是对象 */
    option[axis][0]['axisLabel']={
        interval: 0,
        formatter: function(params){
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
}

app/statistics/js/home.js

@@ -72,6 +72,12 @@ new Vue({
			label: '筛查分析',
			url: 'jbsc-analysis.html',
			allowArea:"",
		},
		 {
			photo: '../../../images/zhuanbingfenxi_icon.png',
			label: '专病分析',
			url: 'special-analysis.html',
			allowArea:"",
		},
		],
		signRateData: {
@@ -121,6 +127,20 @@ new Vue({
	        httpRequest.getDoctorInfo().then(function(res){
	            var docInfo = res.data,
                userRole = docInfo.userRole;
                _.each(userRole,function(item,index){
					if(item.areas!="350200"){
						item.roleType='2'
					}
				})
				if(docInfo.specialistRole&&docInfo.specialistRole.length){  //如果有专科权限
					_.each(docInfo.specialistRole,function(item,index){
						var hasIndex = _.findIndex(userRole,{areas:item.areas})
						if(hasIndex == -1){   //去重
							item.roleType='1'
							userRole.push(item)
						}
					})
				}
                if(userRole.length>0){
                    window.sessionStorage.setItem("userRole", JSON.stringify(userRole));
                    window.sessionStorage.setItem("docInfo", JSON.stringify(docInfo));

app/statistics/js/smfw-analysis.js

@@ -0,0 +1,619 @@
var reqList = [],reqLists = [[],[],[]]; //记录请求的参数和url，用于后退时使用
var colors={"0":"#73acff","1":"#fdd56a","2":"#fdb36a",
	"3":"#fd866a","4":"#9e87ff","5":"#58d5ff",
	"6":"#20d7ad","7":"#fd866a","8":"#fdb36a","9":"#fdd56a","10":"#264478","11":"#43682b","12":"#5b9db5"}
Vue.use(Vuedals.default);
new Vue({
	el: "#main",
	data: {
        isloading:false,  //加载中
        pageData2:{},
        pageData:{},  
		tabledata0:[],    
		tabledata1:[],   
		tabledata2:[],
		hastopbar0:true,
		slaveKey1:"",
		reqListLength0:1,
		reqListLength1:1,
		reqListLength2:1,
		data0:[],
		data1:[],
		data2:[],
		pieShow0:true,
		pieShow1:true,
		pieShow2:true,
		selDateType:undefined,  // 1-日，2-周， 3-月
		index:150,
		pageIndex:1,
		rhfs:"",
		informationList:[{},{code:"1",title:"上门服务",name:"smfu",tip:"统计当前年度至今上门服务情况，点击右上角可切换时间范围查询",lineChartTitle:"新增服务工单趋势",lineChartIndex:"",lineChartName:"服务工单"},
		{code:"2",title:"入户访视",name:"rhfs",tip:"统计当前年度至今入户访视情况，点击右上角可切换时间范围查询",lineChartTitle:"访视量新增趋势",lineChartIndex:"",lineChartName:"访视量"}],
		informationShow:true,
		information:{},
		ltabList:[{},{indexNames:{"serviceOrderTrend": "服务工单"},xDatas:{},yDatas:{},names:[]},
		{indexNames:{"serviceOrderTrend": "访视量"},xDatas:{},yDatas:{},names:[]},],
		//请求页面所需参数
		levelList:[{level:"4",areaLevel:"2"},{level:"3",areaLevel:"3"},{level:"2",areaLevel:"4"}],  //两种搜索，地区等级对比
		areaLevel:"",  // 2、市，3、区，4、社区，5、团队\
		initareaLevel:"",
		initlevel: '',
		initarea: '',
		level: '',
		area: '',
		areaTitle: '',
		initareaTitle: '',
		lowLevel:3,
		initlowLevel:3,
		selectedDateType: 1, //折线图坐标值1-日，2-周，3-月
		lowCode: '',
		chooseYear: '',
		start: "",
		end: "",
		userRole: '',
		tabnumber:3,
		reqListLength:1,
		appname:"上门服务",
	},
	components: {
		vuedals: Vuedals.Component
	},
	watch:{
		areaTitle:function(val){
			//更新区域名称
			EventBus.$emit('update-area-name', {
				'areaName': val
			});
		},
		chooseYear:function(val){
			//更新年份
			EventBus.$emit('update-statistics-year', {
				'selectDate': val
			});
		},
	},
	mounted: function () {
		var vm=this
		//初始化数据
		initData(vm);
		vm.bindEvent()
	},
	methods: {
		getData:function(isNext,index  ){  //是否下转
			var vm = this
			var params={
				areaTitle:vm.areaTitle,
				areaLevel: vm.areaLevel,
				level: vm.level,
				area: vm.area,
				endDate: vm.end,
				startDate: vm.start,
				lowLevel: vm.lowLevel,
				index:index
			}
//			if(index!=undefined){
//				loadData([index], vm); //刷新数据
//			}else 
			if(vm.pageIndex == 1){
				loadData([1,3,4,5], vm); //刷新数据
			}else{
				loadData([2,6,7,8], vm); //刷新数据
			}
			if(isNext){
				//存储请求所带的参数
				reqList.push(params);
				if(index!=undefined){
					reqLists[index].push(params)
					vm["reqListLength"+index] = reqLists[index].length+1
				}				
			}
		},
		//表格tab切换/下转
		getnewdata:function(arg,index){
			var vm = this
			if(arg.level){
				vm.level = arg.level
				vm.areaLevel = _.find(vm.levelList,{level:vm.level}).areaLevel
			}
			if(arg.area){
				vm.area = arg.area
			}
			if(arg.areaTitle){
				vm.areaTitle = arg.areaTitle
			}
			
			if(arg.lowLevel){
				vm.lowLevel=arg.lowLevel
			}else{
				if(vm.areaLevel){
					vm.lowLevel=arg.area == '350200' ? 3 : vm.area.length == 6 ? 4 : 5;
				}else{
					vm.lowLevel = arg.lowLevel || ""
				}
			}
			
			vm.getData(arg.level,index)   //有传level，说明是下转
		},
		getnewdata0:function(arg){
			var vm = this
			if(vm.hastopbar0){   //服务项时
				vm.hastopbar0 = false
				vm.slaveKey1 = arg.area
				vm.area=vm.initarea
				vm.areaLevel=vm.initareaLevel
				vm.level=vm.initlevel
				vm.lowLevel = vm.initlowLevel
				vm.getData(true,0)
			}else{
				vm.getnewdata(arg,0)
			}
		},
		getnewdata1:function(arg){
			var vm = this
			vm.getnewdata(arg,1)
		},
		getnewdata2:function(arg){
			var vm = this
			vm.getnewdata(arg,2)
		},
		backClickHandel:function(index,lIndex,refIndex){
			var vm=this		
			var hasIndex = _.findLastIndex(reqList,{index:index})
			reqList.splice(hasIndex,1);
			var preInfo = reqLists[lIndex].pop();
			var info = reqLists[lIndex][reqLists[lIndex].length - 1];
			if(reqLists[lIndex].length==0){
				if(refIndex=='0'){
					vm["hastopbar"+refIndex] = true
					vm["slaveKey1"] = ""
					info = preInfo
				}else{
					info = reqList[0]
				}
			}
			vm.areaLevel = info.areaLevel;
			vm.level = info.level;
			vm.area = info.area;
			vm.lowLevel = info.lowLevel;
			vm.areaTitle = info.areaTitle;
			vm["reqListLength"+index] = reqLists[lIndex].length+1
			
			if(reqLists[lIndex].length==0 && refIndex=='0'){
				vm.getData(false,3)
			}else{
				vm.getData(false,index)
			}
			
			vm.$refs["tableRef_"+refIndex].changeTab({level:vm.level,lowlevel:vm.lowLevel})   //表格tab
		},
		backClick0:function(){
			var vm=this	
			vm.backClickHandel(0,0,'0')
		},
		backClick1:function(){
			var vm=this	
			vm.backClickHandel(1,1,'1')
		},
		backClick2:function(){
			var vm=this	
			vm.backClickHandel(2,2,'2')	
		},
		//时间选择
		changeDate: function () {
			var vm=this
			//搜索时，取消下转记录
			vm.area=vm.initarea
			vm.areaLevel=vm.initareaLevel
			vm.areaTitle=vm.initareaTitle
			vm.level=vm.initlevel
			vm.lowLevel = vm.initlowLevel				
			reqHistoryInit(vm)
			vm.getData(true)
			vm.initTable()
		},
		//切换line
		showTab:function(ptab){
			var vm=this
			setTimeout(function(){
				EventBus.$emit("draw-line-chart", {
			        panelName : "分级诊疗情况",
			        quotaNames : vm.ltabList[ptab].names,
			        xData : vm.ltabList[ptab].xDatas[0],
			        yDatas : vm.ltabList[ptab].yDatas,
			        colors : ["#17b3ec",'#FF9526'],
			        nowlineid : 'lineChart'+ptab,
			        noDateType: true,
			        chartheight:"320",
			        unit:"人",
			        noshowDate:false,
			   });
			},300)
		},
		backClick:function(){
			var vm=this
//			if (reqList.length == 1) {
				history.go(-1);
//			} else {
//				var lastInfo = reqList[reqList.length-1]
//				if(lastInfo.index){
//					var idx = lastInfo.index - 8
//					vm["backClick"+idx]()
//				}
//			}
		},
		bindEvent:function(){
			var vm=this
			//监听后退按钮的操作
			EventBus.$on("back-click", function (arg) {
				EventBus.$emit('update-statistics-time', {}); //更新统计时间
				vm.backClick()
			});
			//监听页面刷新
			EventBus.$on("refresh-click", function (arg) {
				EventBus.$emit('update-statistics-time', {}); //更新统计时间
				initData(vm)
			});
	        //弹出筛选框
	        EventBus.$on('filter-click', function(arg) {
	            //弹框显示筛选条件
	            Vuedals.Bus.$emit('new', {
	                title: '条件筛选',
	                onClose:function(data){
	                    vm.chooseYear = data.chooseYear;
	                    if(vm.chooseYear){
							vm.selDateType = undefined
							vm.end = getEndDate(vm.chooseYear)
							vm.start = getStartDate(vm.chooseYear)
	                    }else{
	                    	vm.selDateType = "按"+data.dimensionVal
							vm.end = getDateBefore(0)
	                    	if(data.dimensionVal == '日'){
								vm.start = getDateBefore(1)
	                    	}else if(data.dimensionVal == '周'){
								vm.start = getDateBefore(7)
	                    	}else if(data.dimensionVal == '月'){
								vm.start = getDateBefore(30)
	                    	}
	                    }
	                    
	                    vm.rhfs = data.rhfs
	                    vm.pageIndex = data.smfu
	                    vm.pageIndex == 1?vm.appname="上门服务":vm.appname="入户访视"
	                    
						vm.changeDate()
						
	                    EventBus.$emit('update-statistics-time', {});//更新统计时间
	                    
	                    //更新维度名称
						EventBus.$emit('update-dimension-name', {
							"dimensionVal" : vm.selDateType
						});
	                },
	                component: 'smfw-filter',
	                props: {
	                    chooseYear: vm.chooseYear,
	                    minYear:2016,
	                    dimensionValList:['日','周','月'],
	                }
	            });
	        });	 
			$("#main").removeClass("c-hide");
		},
		initTable:function(){
			var vm=this
			var tabList = [{name:"各区",level:"4",lowlevel:"3",isShow:true},{name:"社区",level:"3",lowlevel:"4",isShow:true},{name:"团队",level:"2",lowlevel:"5",isShow:true}]
			var tabList1 = JSON.parse(JSON.stringify(tabList))
			vm.$refs.tableRef_1.initTable({
				//表格表头
				tabList:tabList1,
				headers:[{thead:"地区",param:"name",canclick:true},{thead:"服务工单（个）",param:"num"},{thead:"服务费用（元）",param:"price"}],
				tabnumber:vm.tabnumber,
			})
			vm.$refs.tableRef_2.initTable({
				//表格表头
				tabList:tabList1,
				headers:[{thead:"地区",param:"name",canclick:true},{thead:"访视量",param:"num"}],
				tabnumber:vm.tabnumber,
			})
			var tabItem = {name:"服务项目"}
			tabList.splice(3-vm.tabnumber,0,tabItem)
			vm.$refs.tableRef_0.initTable({
				//表格表头
				tabList:tabList,
				headers:[{thead:"服务项目",param:"name"},{thead:"服务次数（次）",param:"num"},{thead:"服务费用（元）",param:"price"}],
				tabnumber:vm.tabnumber+1,
			})
		},
		gotoServerList:function(){
			var vm = this
			var hreftext = httpRequest.server+"ichat-web/#/service-order-List?roleCode="+vm.area  //"http://192.168.131.103:8080/" + vm.hreftext +"?roleCode="+vm.area
            window.open(hreftext)
            //弹框显示筛选条件
//          Vuedals.Bus.$emit('new', {
//              title: '服务工单记录',
//              onClose:function(data){
//              },
//              component: 'iframe-page',
//              props: {
//                  hreftext: hreftext,
//              },
//              size:'w90'
//          });
		},
   }
})
function initData(vm) {	
	//获得缓存中缓存的角色权限
	var userRole = window.sessionStorage.getItem("selectedRole");
	if (!userRole) {
		return false;
	}
	vm.userRole = JSON.parse(userRole);
	//level:2、市，3、区，4、社区，5、团队
	vm.initareaLevel = vm.areaLevel = vm.userRole.code == '350200' ? 2 : vm.userRole.code.length == 6 ? 3 : 4;
	vm.initlevel = vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
	vm.initlowLevel  = vm.lowLevel  = vm.userRole.code == '350200' ? 3 : vm.userRole.code.length == 6 ? 4 : 5;
	vm.initarea =vm.area = vm.userRole.code;
	vm.initareaTitle = vm.areaTitle = vm.userRole.name;
	
	vm.tabnumber=vm.areaLevel==4?1:vm.areaLevel==3?2:3   //表格显示的tab数
	
	//初始化时间		
	vm.chooseYear = getSignDate()
	
	vm.selDateType = undefined
	vm.end = getEndDate(vm.chooseYear)
	vm.start = getStartDate(vm.chooseYear)
	
	vm.changeDate()
}
function reqHistoryInit(vm){
	reqList = []
	reqLists = [[],[],[],[]]
	_.each(reqLists,function(item,idx){
		var index = 8+idx
		vm["reqListLength"+index] = item.length+1
	})
	vm.slaveKey1_1 = ""
	vm.slaveKey1_2 = ""
	vm.hastopbar1 = true
	vm.hastopbar2 = true
}
function initReqParams(vm) {
	var reqParam = [{
		url: "/doctor/statisticAnalyze/doorServiceOrderLowlevelAll",     //服务项目分析(下转)
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    lowLevel:vm.lowLevel,  //等级 1:团队 2社区机构 3区级 4市级
		    slaveKey1:vm.slaveKey1,
		},
	},{
		url: "/doctor/statisticAnalyze/doorServiceOrderLowlevelAll",     //服务项目排名分析
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    lowLevel:vm.lowLevel,  //等级 1:团队 2社区机构 3区级 4市级
		    slaveKey1:'',
		},
	},{
		url: "/doctor/statisticAnalyze/generalLowlevelAll",     //入户访视-访视量排行
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    slaveKey1:vm.rhfs,
		    index:vm.index,
		    lowLevel:vm.lowLevel,  //等级 1:团队 2社区机构 3区级 4市级
		},
	},{
		url: "/doctor/statisticAnalyze/doorServiceItemAnalysis",     //服务项目分析
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    pageSize:999,
		},
	},{
		url: "/doctor/statisticAnalyze/doorServiceAnalysis",   //总体分析
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		},
	},{
		url: "/doctor/statisticAnalyze/serviceOrderTrend",   //新增服务工单趋势
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    interval:1,
		},
	},{
		url: "/doctor/statisticAnalyze/getHomeVisitTotalHead",     //入户访视-总体分析
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    slaveKey1:vm.rhfs,
		},
	},{
		url: "/doctor/statisticAnalyze/generalSingleLineChartTrend",     //入户访视-访视量新增趋势
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    interval:1,
		    slaveKey1:vm.rhfs,
		    index:vm.index
		},
	},{
		url: "/doctor/statisticAnalyze/generalPieChartTrend",     //入户访视-访视人群分析
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		    slaveKey1:vm.rhfs,
		    index:vm.index
		},
	}];
	return reqParam;
}
function loadData(loadArr, vm) {
	//获取其他请求的参数
	var reqParams = initReqParams(vm),
		reqPromise = [],
		newArr = []; //记录非顶部请求的请求数组
	for (i = 0; i < loadArr.length; i++) {
		var j = loadArr[i];
		var param = reqParams[j];
		reqPromise.push(httpRequest.get(param.url, {
			data: param.data
		}));
		newArr.push(loadArr[i]);
	}
	vm.isloading=true    
	if (reqPromise.length > 0) {
		Promise.all(reqPromise).then(function (ress) {
			var res1, res2, res3, res4, res5, res6, res7, res8, res9;
			for (var i = 0; i < loadArr.length; i++) {
				var j = loadArr[i] + 1;
				if (j == 1) { res1 = ress[i]; }
				if (j == 2) { res2 = ress[i]; }
				if (j == 3) { res3 = ress[i]; }
				if (j == 4) { res4 = ress[i]; }
				if (j == 5) { res5 = ress[i]; }
				if (j == 6) { res6 = ress[i]; }
				if (j == 7) { res7 = ress[i]; }
				if (j == 8) { res8 = ress[i]; }
				if (j == 9) { res9 = ress[i]; }
			}
			if(res1&& res1.status == 200){
				vm.tabledata0=listHandle(res1.data.index_177,"num");
			}
			if(res2&& res2.status == 200){
				vm.tabledata1=listHandle(res2.data.index_177,"num");
			}
			if(res3&& res3.status == 200){
				vm.tabledata2=listHandle(res3.data,"num");
			}
			if(res4&& res4.status == 200){
				vm.tabledata0=listHandle(res4.data,"num");
			}
			if(res5&& res5.status == 200){
				vm.pageData=res5.data
				vm.data0=_.map(vm.pageData.doorServiceTypeList,function(item,index){
					return {
						code:item.code,
						amount:item.num,
						name:item.name,
					}
				})
				vm.data1=_.map(vm.pageData.voucherList,function(item,index){
					return {
						code:item.code,
						amount:item.num,
						name:item.name,
					}
				})	
				pieChartShow(vm,0)
				pieChartShow(vm,1)
			}
			if (res6 && res6.status == 200) {
				var data1={}
				data1.serviceOrderTrend = res6.data
				handleSecondPanelData(data1 ,1, vm)
			}
			if(res7&& res7.status == 200){
				vm.pageData2=res7.data
			}
			if (res8 && res8.status == 200) {
				var data2={}
				data2.serviceOrderTrend = res8.data
				handleSecondPanelData(data2 ,2, vm)
			}
			if(res9&& res9.status == 200){
				vm.data2=_.map(res9.data,function(item,index){
					return {
						code:item.code,
						amount:item.num,
						name:item.name,
					}
				})
				pieChartShow(vm,2)
			}
			vm.isloading=false
		})
	}
}
function pieChartShow(vm,index){
	if(vm['data'+index].length==0||(vm['data'+index].length==1&&!vm['data'+index][0].name)){
		vm["pieShow"+index]=false
	}else{
		vm["pieShow"+index]=true
	}
	setTimeout(function(){						
		//服务人群分析-饼图
		handlePieData({elId:"pieChart"+index,arry: vm['data'+index], title:{},colors: colors,position:['25%', '45%'],radius:['61%', '90%'],hasNum:true,legendRight:"7%"})
	},100)
}
function handleSecondPanelData(data,index, vm) {
	var xDatas = [],
        yDatas = [],
        names = []
    for(var p in data){
        names.push(vm.ltabList[index].indexNames[p]);
        xData = _.map(data[p], function(o){
            return o.range;
        });
        yData = _.map(data[p], function(o){
            return o.amount;
        });
        xDatas.push(xData);
        yDatas.push(yData);
    }
    vm.ltabList[index].xDatas = xDatas
    vm.ltabList[index].yDatas = yDatas
    vm.ltabList[index].names = names
	vm.showTab(index)
}
function listHandle(list, sort){
    var topArr = [],newList=[];
    if(list.length==1&&!list[0].name){
    	list=[]
    }
    topArr = soreRank(getKeyValueArr(list, sort||'total'));
    newList = _.map(list, function(o, index){
    	o.rank=topArr[index]
    	return o
    });
    return newList
}

app/statistics/js/special-analysis.js

@@ -0,0 +1,755 @@
var reqList = [],reqLists = [[],[],[],[]]; //记录请求的参数和url，用于后退时使用
var colors={"0":"#5b9db5","1":"#ed7d31","2":"#a5a5a5",
	"3":"#ffc000","4":"#44c274","5":"#70ad47",
	"6":"#255e91","7":"#9e480e","8":"#7e7e7e","9":"#997300","10":"#264478","11":"#43682b","12":"#5b9db5"}
Vue.use(Vuedals.default);
new Vue({
	el: "#main",
	data: {
        isloading:false,  //加载中
        pageData4:{},
        pageData3:{},
        pageData2:{},
        pageData1:{},
        pageData:{},  
		tabledata01:[], 
		tabledata02:[],    
		tabledata1:[],   
		tabledata2:[],
		hastopbar1:true,
		hastopbar2:true,
		slaveKey1_1:"",
		slaveKey1_2:"",
		reqListLength8:1,
		reqListLength9:1,
		reqListLength10:1,
		reqListLength11:1,
		ttab:1,
		tbtab:1,
		ltabList:[{},{indexNames:{'turnUpList':"上转人次",'rehabilitationList':'康复下转人次'},xDatas:{},yDatas:{},names:[]},
		{indexNames:{'totalServiceList':"总服务人次"},xDatas:{},yDatas:{},names:[]},],
        selDateType:undefined,  // 1-日，2-周， 3-月
		informationShow:true,
		information:{code:"1",title:"专病分析",name:"zbfx",tip:"专病分析为统计当前年度至今各个专病康复管理业务动态"},
		optionsName:[],
		valueName:"",
		ptab:1,
		//请求页面所需参数
		levelList:[{level:"4",areaLevel:"2"},{level:"3",areaLevel:"3"},{level:"2",areaLevel:"4"}],  //两种搜索，地区等级对比
		areaLevel:"",  // 2、市，3、区，4、社区，5、团队\
		initareaLevel:"",
		initlevel: '',
		initarea: '',
		level: '',
		area: '',
		areaTitle: '',
		lowLevel:3,
		initlowLevel:3,
		selectedDateType: 1, //折线图坐标值1-日，2-周，3-月
		lowCode: '',
		chooseYear: '',
		start: "",
		end: "",
		userRole: '',
		reqListLength:1,
		activeAreaIndex:0,
		hopitalList:[],
		chopitalList:[],
		hospitalItem:{},
		hospitalCode:"",
		tabnumber:3,
		activeIndex:0,
		isHospital:false,   //判断是否切换到医院权限
	},
	components: {
		vuedals: Vuedals.Component
	},
	mounted: function () {
		var vm=this
		//初始化数据
		initData(vm);
		vm.bindEvent()
	},
	watch:{
		areaTitle:function(val){
			//更新区域名称
			EventBus.$emit('update-area-name', {
				'areaName': val
			});
		},
		chooseYear:function(val){
			//更新年份
			EventBus.$emit('update-statistics-year', {
				'selectDate': val
			});
		},
	},
	methods: {
		getData:function(isNext,index){  //是否下转
			var vm = this
			var params={
				areaLevel: vm.areaLevel,
				level: vm.level,
				area: vm.area,
				endDate: vm.end,
				startDate: vm.start,
				lowLevel: vm.lowLevel,
				index:index
			}
			if(index){
				loadData([index], vm);
			}else{
				loadData([0,1,2,3,4,5,6,7,8,9,10,11], vm); //刷新数据
			}
			if(isNext){
				//存储请求所带的参数
				reqList.push(params);
				if(index){
					reqLists[index-8].push(params)
					vm["reqListLength"+index] = reqLists[index-8].length+1
				}				
			}
		},
		//表格tab切换/下转
		getnewdata:function(arg,index){
			var vm = this
			if(arg.level){
				vm.level = arg.level
				vm.areaLevel = _.find(vm.levelList,{level:vm.level}).areaLevel
			}
			if(arg.area){
				vm.area = arg.area
			}
			if(arg.areaTitle){
				vm.areaTitle = arg.areaTitle
			}
			
			if(arg.lowLevel){
				vm.lowLevel=arg.lowLevel
			}else{
				if(vm.areaLevel){
					vm.lowLevel=arg.area == '350200' ? 3 : vm.area.length == 6 ? 4 : 5;
				}else{
					vm.lowLevel = arg.lowLevel || ""
				}
			}
			
			vm.getData(arg.level,index)   //有传level，说明是下转
		},
		getnewdata1:function(arg){
			var vm = this
			if(vm.hastopbar1){   //服务项时
				vm.hastopbar1 = false
				vm.slaveKey1_1 = arg.area
				vm.area=vm.initarea
				vm.areaLevel=vm.initareaLevel
				vm.level=vm.initlevel
				vm.lowLevel = vm.initlowLevel
				vm.getData(true,8)
			}else{
				vm.getnewdata(arg,8)
			}
		},
		getnewdata2:function(arg){
			var vm = this
			if(vm.hastopbar2){   //服务项时
				vm.hastopbar2 = false
				vm.slaveKey1_2 = arg.area
				vm.area=vm.initarea
				vm.areaLevel=vm.initareaLevel
				vm.level=vm.initlevel
				vm.lowLevel = vm.initlowLevel
				vm.getData(true,9)
			}else{
				vm.getnewdata(arg,9)
			}
		},
		getnewdata01:function(arg){
			var vm = this
			vm.getnewdata(arg,10)
		},
		getnewdata02:function(arg){
			var vm = this
			vm.getnewdata(arg,11)
		},
		backClickHandel:function(index,lIndex,refIndex){
			var vm=this			
			var hasIndex = _.findLastIndex(reqList,{index:index})
			reqList.splice(hasIndex,1);
			var preInfo = reqLists[lIndex].pop();
			var info = reqLists[lIndex][reqLists[lIndex].length - 1];
			if(reqLists[lIndex].length==0){
				if(refIndex=='1'||refIndex=='2'){
					vm["hastopbar"+refIndex] = true
					vm["slaveKey1_"+refIndex] = ""
					info = preInfo
				}else{
					info = reqList[0]
				}
			}
			vm.areaLevel = info.areaLevel;
			vm.level = info.level;
			vm.area = info.area;
			vm.lowLevel = info.lowLevel;
			vm["reqListLength"+index] = reqLists[lIndex].length+1
			
			vm.getData(false,index)
			
			vm.$refs["tableRef_"+refIndex].changeTab({level:vm.level,lowlevel:vm.lowLevel})   //表格tab
		},
		backClick2:function(){
			var vm=this	
			vm.backClickHandel(10,2,'01')
		},
		backClick3:function(){
			var vm=this	
			vm.backClickHandel(11,3,'02')
		},
		backClick0:function(){
			var vm=this	
			vm.backClickHandel(8,0,'1')	
		},
		backClick1:function(){
			var vm=this	
			vm.backClickHandel(9,1,'2')
		},
		//时间选择
		changeDate: function () {
			var vm=this
			//搜索时，取消下转记录
			vm.area=vm.initarea
			vm.areaLevel=vm.initareaLevel
			vm.level=vm.initlevel
			vm.lowLevel = vm.initlowLevel				
			reqHistoryInit(vm)
			vm.getData(true)
			vm.initTable()
		},
		//获取疾病筛查表
		getOptionsName:function(){
			var vm=this
			vm.optionsName = [{code:"",name:"全部病种"}]
            params = {
				area:vm.initarea,
				level:vm.initareaLevel
			};
            statisticAPI.specialistAnalysisDiseaseType(params).then(function(res) {
                if(res.status == 200) {
                	vm.optionsName = [{code:"",name:"全部病种（"+res.data.length+"个）"}]
                    vm.optionsName=vm.optionsName.concat(res.data)
                } else {
                    vm.$message.error(res.msg)
                }
            })
		},
		//筛查表切换
		seleName:function(){
			var vm=this	
			vm.changeDate()
		},
		//切换line
		showTab:function(ptab){
			var vm=this
			if(ptab){
				vm.ptab=ptab
			}
			setTimeout(function(){
				EventBus.$emit("draw-line-chart", {
			        panelName : "分级诊疗情况",
			        quotaNames : vm.ltabList[vm.ptab].names,
			        xData : vm.ltabList[vm.ptab].xDatas[0],
			        yDatas : vm.ltabList[vm.ptab].yDatas,
			        colors : ["#17b3ec",'#FF9526'],
			        nowlineid : 'lineChart'+vm.ptab,
			        noDateType: true,
			        chartheight:"260",
			        unit:"人",
			        noshowDate:false,
			   });
			},300)
		},
		showtTab:function(ttab){
			var vm=this
		},
		showtbTab:function(tbtab){
			var vm=this
		},
		backClick:function(){
			var vm=this
			if(vm.isHospital){
				initData(vm)
			}else{
				history.go(-1);
			}
//			if (reqList.length == 1) {
//				history.go(-1);
//			} else {
//				var lastInfo = reqList[reqList.length-1]
//				if(lastInfo.index){
//					var idx = lastInfo.index - 8
//					vm["backClick"+idx]()
//				}
//			}
		},
		bindEvent:function(){
			var vm=this
			//监听后退按钮的操作
			EventBus.$on("back-click", function (arg) {
				EventBus.$emit('update-statistics-time', {}); //更新统计时间
				vm.backClick()
			});
			//监听页面刷新
			EventBus.$on("refresh-click", function (arg) {
				EventBus.$emit('update-statistics-time', {}); //更新统计时间
				initData(vm)
			});
	        //弹出筛选框
	        EventBus.$on('filter-click', function(arg) {
	            //弹框显示筛选条件
	            Vuedals.Bus.$emit('new', {
	                title: '条件筛选',
	                onClose:function(data){
	                    vm.chooseYear = data.chooseYear;
	                    if(vm.chooseYear){
							vm.selDateType = undefined
							vm.end = getEndDate(vm.chooseYear)
							vm.start = getStartDate(vm.chooseYear)
	                    }else{
	                    	vm.selDateType = "按"+data.dimensionVal
							vm.end = getDateBefore(0)
	                    	if(data.dimensionVal == '日'){
								vm.start = getDateBefore(1)
	                    	}else if(data.dimensionVal == '周'){
								vm.start = getDateBefore(7)
	                    	}else if(data.dimensionVal == '月'){
								vm.start = getDateBefore(30)
	                    	}
	                    }
						vm.changeDate()
	                    
	                    EventBus.$emit('update-statistics-time', {});//更新统计时间
	                    //更新维度名称
						EventBus.$emit('update-dimension-name', {
							"dimensionVal" : vm.selDateType
						});
	                },
	                component: 'special-filter',
	                props: {
	                    selectedYear: vm.chooseYear,
	                    minYear:2020,
	                    dimensionValList:['日','周','月'],
	                }
	            });
	        });	 
			$("#main").removeClass("c-hide");
		},
		initTable:function(){
			var vm=this
			var tabList1 = [{name:"各区",level:"4",lowlevel:"3",isShow:true},{name:"医院",level:"3",lowlevel:"4",isShow:true},{name:"团队",level:"2",lowlevel:"5",isShow:true}]
			var tabList2 = [{name:"各区",level:"4",lowlevel:"3",isShow:true},{name:"社区",level:"3",lowlevel:"4",isShow:true},{name:"团队",level:"2",lowlevel:"5",isShow:true}]
			var tabList01 = JSON.parse(JSON.stringify(tabList1)),tabList02 = JSON.parse(JSON.stringify(tabList2))
			vm.$refs.tableRef_01.initTable({
				//表格表头
				tabList:tabList01,
				headers:[{thead:"地区",param:"name",canclick:true},{thead:"共管患者数",param:"coManagementNum"},
				{thead:"转诊人数",param:"referralNum"},{thead:"下转人数",param:"rehabilitationNum"},{thead:"总服务人数",param:"totalServiceNum"}],
				tabnumber:vm.tabnumber,
			})
			vm.$refs.tableRef_02.initTable({
				//表格表头
				tabList:tabList02,
				headers:[{thead:"地区",param:"name",canclick:true},{thead:"共管患者数",param:"coManagementNum"},
				{thead:"转诊人数",param:"referralNum"},{thead:"下转人数",param:"rehabilitationNum"},{thead:"总服务人数",param:"totalServiceNum"}],
				tabnumber:vm.tabnumber,
			})
			var tabItem = {name:"服务项名称"}
			tabList1.splice(3-vm.tabnumber,0,tabItem)
			tabList2.splice(3-vm.tabnumber,0,tabItem)
			vm.$refs.tableRef_1.initTable({
				//表格表头
				tabList:tabList1,
				headers:[{thead:"服务项名称",param:"name",canclick:true},{thead:"合计",param:"num"}],
				tabnumber:vm.tabnumber+1,
			})
			vm.$refs.tableRef_2.initTable({
				//表格表头
				tabList:tabList2,
				headers:[{thead:"服务项名称",param:"name",canclick:true},{thead:"合计",param:"num"}],
				tabnumber:vm.tabnumber+1,
			})
		},
		comfireHospital:function(){
			var vm = this
			if(vm.hospitalCode){
				vm.loadding = true
				vm.isHospital = true
				//level:2、市，3、区，4、社区，5、团队
				vm.initareaLevel = vm.areaLevel =  vm.hospitalCode == '350200' ? 2 :  vm.hospitalCode.length == 6 ? 3 : 4;
				vm.initlevel = vm.level =  vm.hospitalCode == '350200' ? 4 :  vm.hospitalCode.length == 6 ? 3 : 2;
				vm.initlowLevel  = vm.lowLevel  =  vm.hospitalCode == '350200' ? 3 :  vm.hospitalCode.length == 6 ? 4 : 5;
				vm.initarea =vm.area =  vm.hospitalCode;
				vm.areaTitle =  vm.hospitalItem.name;
				
				if(vm.activeAreaIndex=="1"){   //0:等级医院 1社区医院
					vm.tbtab = 2
				}else{
					vm.tbtab = 1
				}
				
				vm.tabnumber=vm.areaLevel==4?1:vm.areaLevel==3?2:3   //表格显示的tab数
				
				//初始化时间		
				vm.chooseYear = getSignDate()
				
				vm.selDateType = undefined
				vm.end = getEndDate(vm.chooseYear)
				vm.start = getStartDate(vm.chooseYear)
				
				vm.changeDate()
				vm.getOptionsName()  //获取搜索疾病列表
				
				vm.initTable()
			}
		},
		hopitalListShow:function(){
			var vm = this
			//弹框显示筛选条件
            Vuedals.Bus.$emit('new', {
                title: '条件筛选',
                onClose:function(data){
                	if(data){
	                	vm.hospitalItem = data.hospitalItem
		         		vm.hospitalCode = data.hospitalCode
		         		vm.activeAreaIndex = data.activeName
	                	vm.comfireHospital()
                	}
                },
                component: 'hospital-filter',
                props: {
                	chopitalList:vm.chopitalList,
                	hopitalList:vm.hopitalList,
                }
            });
		}
   }
})
function initData(vm) {	
	//获得缓存中缓存的角色权限
	var userRole = window.sessionStorage.getItem("selectedRole");
	if (!userRole) {
		return false;
	}
	vm.userRole = JSON.parse(userRole);
	//level:2、市，3、区，4、社区，5、团队
	vm.initareaLevel = vm.areaLevel = vm.userRole.code == '350200' ? 2 : vm.userRole.code.length == 6 ? 3 : 4;
	vm.initlevel = vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
	vm.initlowLevel  = vm.lowLevel  = vm.userRole.code == '350200' ? 3 : vm.userRole.code.length == 6 ? 4 : 5;
	vm.initarea =vm.area = vm.userRole.code;
	vm.areaTitle = vm.userRole.name;
	
	if(vm.initlevel==2){
		if(vm.userRole.roleType == '2'){
			vm.tbtab = 2
		}else if(vm.userRole.roleType == '1'){
			vm.tbtab = 1
		}
	}else{
		if(vm.isHospital){
			vm.isHospital = false
			vm.hospitalCode = ""
			vm.hospitalItem = {}
		}else{
			selectHospital(vm,1,'hopitalList')
			selectHospital(vm,2,'chopitalList')
		}
	}
	
	vm.tabnumber=vm.areaLevel==4?1:vm.areaLevel==3?2:3   //表格显示的tab数
	
	//初始化时间		
	vm.chooseYear = getSignDate()
	
	vm.selDateType = undefined
	vm.end = getEndDate(vm.chooseYear)
	vm.start = getStartDate(vm.chooseYear)
	
	vm.changeDate()
	vm.getOptionsName()  //获取搜索疾病列表
	
	vm.initTable()
}
function reqHistoryInit(vm){
	reqList = []
	reqLists = [[],[],[],[]]
	_.each(reqLists,function(item,idx){
		var index = 8+idx
		vm["reqListLength"+index] = item.length+1
	})
	vm.slaveKey1_1 = ""
	vm.slaveKey1_2 = ""
	vm.hastopbar1 = true
	vm.hastopbar2 = true
}
function initReqParams(vm) {
	var param = {
		startDate: vm.start,
		endDate: vm.end,
		area: vm.area,
	    level: vm.areaLevel,			    
		diseaseType:vm.valueName,
	}
	var reqParam = [{
		url: "/specialistStatistics/specialistAnalysisHead",   //头部
		reqType: 'get',
		data:{
			diseaseType:vm.valueName,
			area: vm.area,
		    level: vm.areaLevel, //2、市，3、区，4、社区，5、团队
		},
	},{
		url: "/specialistStatistics/specialistAnalysisHeadCount",   //头部统计
		reqType: 'get',
		data:param,
	},{
		url: "/specialistStatistics/diagnosisTreatment",     //分级诊疗形式（转诊趋势）
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			interval:1,
			type:1,    //转诊趋势
		},
	},{
		url: "/specialistStatistics/diagnosisTreatment",     //分级诊疗形式（服务人数）
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			interval:1,
			type:2,    //服务人数
		},
	},{
		url: "/specialistStatistics/diseaseTypeAnalysis",     //疾病类型分析
		reqType: 'get',
		data:param,
	},{
		url: "/specialistStatistics/dailyHealthServices",     //日常健康服务
		reqType: 'get',
		data:param,
	},{
		url: "/specialistStatistics/onlineDiagnosisTreatment",     //在线诊疗情况
		reqType: 'get',
		data:param,
	},{
		url: "/specialistStatistics/rehabilitationPhoneRange",     //电话/短信关怀率
		reqType: 'get',
		data:param,
	},{
		url: "/specialistStatistics/coManagementRehabilitation",     //康复共管情况
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			type:1,    //等级医院
			slaveKey1:vm.slaveKey1_1,
			lowLevel:vm.slaveKey1_1?vm.lowLevel:""
		},
	},{
		url: "/specialistStatistics/coManagementRehabilitation",     //康复共管情况
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			type:2,    //社区医院
			slaveKey1:vm.slaveKey1_2,
			lowLevel:vm.slaveKey1_2?vm.lowLevel:""
		},
	},{
		url: "/specialistStatistics/serviceRankingAnalysis",     //-专病服务排名分析/医院总体服务情况
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			type:1,
			lowLevel:vm.lowLevel
		},
	},{
		url: "/specialistStatistics/serviceRankingAnalysis",     //-专病服务排名分析/医院总体服务情况
		reqType: 'get',
		data:{
			startDate: vm.start,
			endDate: vm.end,
			area: vm.area,
		    level: vm.areaLevel,			    
			diseaseType:vm.valueName,
			type:2,
			lowLevel:vm.lowLevel
		},
	}];
	return reqParam;
}
function loadData(loadArr, vm) {
	//获取其他请求的参数
	var reqParams = initReqParams(vm),
		reqPromise = [],
		newArr = []; //记录非顶部请求的请求数组
	for (i = 0; i < loadArr.length; i++) {
		var j = loadArr[i];
		var param = reqParams[j];
		reqPromise.push(httpRequest.get(param.url, {
			data: param.data
		}));
		newArr.push(loadArr[i]);
	}
	vm.isloading=true    
	if (reqPromise.length > 0) {
		Promise.all(reqPromise).then(function (ress) {
			var res1, res2, res3, res4, res5, res6, res7, res8, res9, res10, res11, res12;
			for (var i = 0; i < loadArr.length; i++) {
				var j = loadArr[i] + 1;
				if (j == 1) { res1 = ress[i]; }
				if (j == 2) { res2 = ress[i]; }
				if (j == 3) { res3 = ress[i]; }
				if (j == 4) { res4 = ress[i]; }
				if (j == 5) { res5 = ress[i]; }
				if (j == 6) { res6 = ress[i]; }
				if (j == 7) { res7 = ress[i]; }
				if (j == 8) { res8 = ress[i]; }
				if (j == 9) { res9 = ress[i]; }
				if (j == 10) { res10 = ress[i]; }
				if (j == 11) { res11 = ress[i]; }
				if (j == 12) { res12 = ress[i]; }
			}
			if(res1&& res1.status == 200){
				vm.pageData=res1.data
			}
			if(res2&& res2.status == 200){
				vm.pageData1=res2.data
			}
			if(res3&& res3.status == 200){
				handleSecondPanelData(res3.data ,1, vm)
			}
			if(res4&& res4.status == 200){
				handleSecondPanelData(res4.data ,2, vm)
			}
			if(res5&& res5.status == 200){
				var barData = {rehabilitationNum:[],rehabilitationTimes:[]}
				_.each(res5.data,function(item,index){
					barData.rehabilitationNum.push({
						range:item.name,
						amount:item.num
					})
					barData.rehabilitationTimes.push({
						range:item.name,
						amount:item.times
					})
				})
				getBarData({elId:'barChart', data:barData,
					indexNames:{"rehabilitationNum":"下转人数","rehabilitationTimes":"下转人次"},selectedDateType:vm.selectedDateType,hasLegend:true,colors:["#17b3ec",'#20D7AD'],units:{"下转人数":"人","下转人次":"人次"}})
			}
			if(res6&& res6.status == 200){
				vm.pageData2=res6.data
			}
			if(res7&& res7.status == 200){
				vm.pageData3=res7.data
			}
			if(res8&& res8.status == 200){
				vm.pageData4=res8.data
			}
			if(res9&& res9.status == 200){
				var data9 = _.map(res9.data,function(item){
					item.num = item.num||item.amount||0
					return item
				})
				vm.tabledata1=listHandle(data9,"num");
			}
			if(res10&& res10.status == 200){
				var data10 = _.map(res10.data,function(item){
					item.num = item.num||item.amount||0
					return item
				})
				vm.tabledata2=listHandle(data10,"num");
			}
			if(res11&& res11.status == 200){
				vm.tabledata01=listHandle(res11.data,"totalServiceNum");
			}
			if(res12&& res12.status == 200){
				vm.tabledata02=listHandle(res12.data,"totalServiceNum");
			}
			vm.isloading=false
		})
	}
}
function handleSecondPanelData(data,index, vm) {
	var xDatas = [],
        yDatas = [],
        names = []
    for(var p in data){
        names.push(vm.ltabList[index].indexNames[p]);
        xData = _.map(data[p], function(o){
            return o.range;
        });
        yData = _.map(data[p], function(o){
            return o.amount;
        });
        xDatas.push(xData);
        yDatas.push(yData);
    }
    vm.ltabList[index].xDatas = xDatas
    vm.ltabList[index].yDatas = yDatas
    vm.ltabList[index].names = names
	if(vm.ptab == index){
		vm.showTab()
	}
}
function listHandle(list, sort){
    var topArr = [],newList=[];
    if(list.length==1&&!list[0].name){
    	list=[]
    }
    topArr = soreRank(getKeyValueArr(list, sort||'total'));
    newList = _.map(list, function(o, index){
    	o.rank=topArr[index]
    	return o
    });
    return newList
}
function selectHospital(vm,index,param) {
	var url = "/specialistStatistics/selectHospital",
		params = {
			town:vm.initarea,
			level:index
		};
	statisticAPI.selectHospital(params).then(function(res) {
        if(res.status == 200) {
            vm[param] = res.data
        } else {
            vm.$message.error(res.msg)
        }
    })
}

component/statistics/hospital-filter.js

@@ -0,0 +1,66 @@
(function(){
    Vue.component('hospital-filter',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<el-tabs v-model="activeName" :stretch="true">\
				    <el-tab-pane label="等级医院" name="0">\
				    	<div class="ptb10 c-f14 plr15 c-border-b ui-grid c-cursor-p" :class="{\'bgc-f2f3f4\':hospitalCode==item.code}" v-for="(item,index) in hopitalList" :key="index" @click="selHospitalItem(item)" >\
				            <div class="ui-col-1">\
				           		{{item.name}}\
				            </div>\
				       	</div>\
				    </el-tab-pane>\
				    <el-tab-pane label="社区医院" name="1">\
				    	<div class="ptb10 c-f14 plr15 c-border-b ui-grid c-cursor-p"  :class="{\'bgc-f2f3f4\':hospitalCode==item.code}" v-for="(item,index) in chopitalList" :key="index" @click="selHospitalItem(item)" >\
				            <div class="ui-col-1">\
				           		{{item.name}}\
				            </div>\
				       	</div>\
				    </el-tab-pane>\
				</el-tabs>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">取消</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">确认</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['chopitalList','hopitalList'],
        data: function(){
            return {
            	activeName:0,
            	hospitalCode:"",
				hospitalItem:{},
            }
        },
        mounted: function(){
        },
        methods: {
	         resetClick:function(){
				this.$emit('vuedals:close', {});
	         },
	         confirmClick:function(){
	         	var vm = this;
	         	if(vm.hospitalCode){
					//触发刷新
					this.$emit('vuedals:close', {
						hospitalItem: vm.hospitalItem,
						hospitalCode: vm.hospitalCode,
						activeName:vm.activeName,
					});
	         	}else{
	         		vm.$message.error("请选择医院")
	         	}
	         },
	         selHospitalItem:function(item){
	         	var vm = this;
	         	vm.hospitalItem = item
	         	vm.hospitalCode = item.code
	         }
        }
    });
    
})()

component/statistics/iframe-page.js

@@ -0,0 +1,29 @@
(function(){
    Vue.component('iframe-page',{
        template:'<div style="height: 100%;overflow: auto;margin-bottom: 50px;">\
				<iframe :src="hreftext" frameborder="0" width="100%" height="600px"></iframe>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">保存</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['hreftext'],
        data: function(){
            return {
            }
        },
        mounted: function(){
        },
        methods: {
	        confirmClick:function(){
	         	var vm = this;
				//触发刷新
				this.$emit('vuedals:close', {});
	        },
        }
    });
    
})()

component/statistics/line-chart-single.js

@@ -0,0 +1,257 @@
(function(){
    var startDate,
        endDate,
        chooseYear;
    Vue.component('line-chart',{
        template: '<div>\
            <div class="ui-grid ui-grid-middle mt5 plr10" v-if="!noshowDate">\
                <div v-if="showDatePanel" class="ui-col-1" >\
                    <span>数据时间:</span>\
                    <el-date-picker\
                      v-model="defaultValue[0]"\
                      type="date"\
                      unlink-panels\
                      placeholder="开始日期"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                      value-format="yyyy-MM-dd"\
                    >\
                    </el-date-picker>\
                    <span>—</span>\
                    <el-date-picker\
                      v-model="defaultValue[1]"\
                      type="date"\
                      unlink-panels\
                      placeholder="结束日期"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                      value-format="yyyy-MM-dd"\
                    >\
                    </el-date-picker>\
                </div>\
                <div v-if="!showDatePanel" class="ui-col-1 c-f12 mtb10 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="ui-col-0 c-f12 c-909090 mtb10 pr15">单位：{{unit}}</div>\
            </div>\
            <div v-else class="c-f12 c-909090 mtb10 pl15">单位：{{unit}}</div>\
            <div class="line-chart" :id="lineid" style="width: 100%;" :style="{ height: chartheight + \'px\' }"></div>\
        </div>',
        props:['lineid', 'showDatePanel'],
        data: function(){
            return {
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人",
                dateValue: "",
                defaultValue: [],
                pickerOptions2: {
                    disabledDate: function(d){
                        var start = new Date(getStartDate(chooseYear)+" 00:00:00"),
                            end = new Date(getEndDate(chooseYear)+" 23:59:59");
                        return d < start || d > end;
                    }
                },
                chooseYear:"",
                noDateType:false,   //不显示年月日
                chartheight:200,   //表格高度
                noshowDate:false,   //显示统计时间
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            },
            dateChange: function(){
            	var vm=this
            	if(vm.defaultValue[0]&&vm.defaultValue[1]){
            		if(vm.defaultValue[0]>vm.defaultValue[1]){
            			vm.$message.warning("开始时间应小于结束时间")
            		}else{
            			this.$emit("getlinedata", {dateType: this.selectedDateType, dateValue: [vm.defaultValue[0], vm.defaultValue[1]]});
            		}
            	}
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
            	if(!arg.nowlineid||arg.nowlineid == vm.lineid){            		
	                vm.panelName = arg.panelName;
	                if(arg.selectedDateType){
	                    vm.selectedDateType = arg.selectedDateType;
	                }
	                if(arg.unit){
	                    vm.unit = arg.unit;
	                }
	                vm.dateValue = arg.dateValue;
//	                vm.chooseYear = arg.chooseYear;
	                chooseYear = arg.chooseYear;
	                vm.noDateType=arg.noDateType;
	                vm.noshowDate=arg.noshowDate;
	                if(arg.chartheight){
	                	vm.chartheight=arg.chartheight
	                }
					vm.$nextTick(function(){
	                	drawLine(vm, arg);
					})
            	}
            })
            
            EventBus.$on("change-date-value", function(arg){
                this.defaultValue = arg;
            })
        }
    });
    
    function drawLine(vm, arg){
        var lineCharts = echarts.init(document.getElementById(vm.lineid));
        var xData = arg.xData,
            yDatas = arg.yDatas,
            names = arg.quotaNames,
            colors = arg.colors,
            markLineValue = arg.markLineValue,
            markLineName = arg.markLineName;
        //处理数据, 数据按照20条数一屏展示
//      var lastIndex = xData.length % 20;
        if(xData.length > 20 ){  
            dataZoom_end = 100-(19/xData.length)*100;  
        }else{  
            dataZoom_end = 0;
        }
        //初始结束时间
        var lastValue = xData[xData.length - 1];
        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
            vm.endDate = lastValue;
        }else if(vm.selectedDateType == 3){
            var val = lastValue.substr(5,2)+"月"
            vm.endDate = lastValue.substr(0,4)+"年"+val;
        }
        var options = {
            tooltip: {
                trigger: 'axis'
            },
            color: colors,
            legend: {
                top: '0px',
                data: names,
                borderColor: "#f1f1f1"
            },
            grid: {
                show: false,
                left: '20px',
                right: '20px',
                bottom: '40px',
                top: '20px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
                            if(index == 0){
                                vm.startDate = value;
                                return value.substr(5,2)+"月"+value.substr(8,2);
                            }else{
                                if(index == 19){
                                    vm.endDate = value;
                                }
                                return value.substr(8,2);
                            }
                        }else if(vm.selectedDateType == 3){
                            var val = value.substr(5,2)+"月"
                            if(index == 0){
                                vm.startDate = value.substr(0,4)+"年"+val;
                            }else{
                                if(index == 19){
                                    vm.endDate = value.substr(0,4)+"年"+val;
                                }
                            }
                            return val;
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%'],
                splitLine: {show:false}
            },
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: false,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: false,
            }]
        };
        var series = [];
        for(var i=0; i<yDatas.length; i++){
            var obj = {
                name: names[i],
                type: 'line',
                smooth: true,
                data: yDatas[i],
                lineStyle:{
                    normal:{
                        color: colors[i]
                    }
                }
            };
            series.push(obj);
        }
        options.series = series;
        if(markLineValue){ 
            //目前统计只有签约统计页面有目标量
            $.extend(options.yAxis, {
                min: function(value) {
                    if(value.min > markLineValue){
                        return markLineValue / 2;
                    }else{
                        return value.min / 2;
                    }
                },
                max: function(value){
                    if(value.max > markLineValue){
                        return parseInt(value.max * 1.5);
                    }else{
                        return parseInt(markLineValue * 1.2);
                    }
                }
            });
            $.extend(options.series[0], {markLine: {
                    data:[
                        {yAxis: markLineValue, name: markLineName}
                    ],
                    label:{
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}'
                    },
                    lineStyle:{
                        color: 'rgb(194,53,49)'
                    }
            }});
        }
//          console.log(JSON.stringify(options));
        $("#"+vm.lineid).removeAttr('_echarts_instance_')
        lineCharts.setOption(options);
        window.lineCharts = lineCharts;
    }
})()

component/statistics/line-chart.js

@@ -39,8 +39,8 @@
                    >\
                    </el-date-picker>\
                </div>\
                <div v-if="!showDatePanel" class="ui-col-1 c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="ui-col-0 c-f12 c-909090 pr15">单位：{{unit}}</div>\
                <div v-if="!showDatePanel" class="ui-col-1 c-f12 mtb10 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="ui-col-0 c-f12 c-909090 mtb10 pr15">单位：{{unit}}</div>\
            </div>\
            <div v-else class="c-f12 c-909090 mtb10 pl15">单位：{{unit}}</div>\
            <div class="line-chart" :id="lineid" style="width: 100%;" :style="{ height: chartheight + \'px\' }"></div>\

component/statistics/smfu-serviceList.js

@@ -0,0 +1,104 @@
(function(){
    Vue.component('smfu-serviceList',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row ml40 mr10" id="signYear">\
				    <div v-for="year in years"  class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==chooseYear}" @click="yearClick(year)"><a>{{year}}</a></div>\
				</div>\
				<div class="mt20 ml10 filter-title">统计指标</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" v-for="item in smfuList" :class="{\'active\': smfu==item.code}" @click="selItem(item,\'smfu\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</div>\
				</div>\
				<div class="mt20 ml10 filter-title" v-if="smfu == 2">统计维度</div>\
				<div class="div-content" v-if="smfu == 2">\
					<div class="c-row ml40 mr10">\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" :class="{\'active\': rhfs.length==0}" @click="selItems(\'\',\'rhfs\')">\
							<a href="#" class="f-fs14">全部</a>\
						</div>\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" v-for="item in rhfsList" :class="{\'active\': rhfs.indexOf(item.code)>-1}" @click="selItems(item,\'rhfs\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</div>\
				</div>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">重置</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">保存</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['chooseYear','minYear'],
        data: function(){
            return {
                years: [],
                smfuList:[{code:1,name:'上门服务'},{code:2,name:'入户访视'}],	//上门服务
				smfu:1,
				rhfsList:[{code:"5",name:'孕产妇'},{code:"6",name:'新生儿'},
				{code:"9",name:'肺结核'},{code:"8",name:'80岁以上老人'},{code:"7",name:'重性精神疾病'}],  //入户访视
				rhfs:[],
            }
        },
        mounted: function(){
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
             
            if(now.getMonth() < 6){
                year --;
            }
            for(i=year; i>=this.minYear; i--){
                this.years.push(i);
            }
        },
        methods: {
        	 yearClick:function(val){
	          this.chooseYear = val;
	         },
	         resetClick:function(){
				this.chooseYear=this.years[0]
				this.rhfs = []
				this.smfu = 1
	         },
	         confirmClick:function(){
	         	var vm = this;
				//触发刷新
				this.$emit('vuedals:close', {
					chooseYear: vm.chooseYear,
					rhfs: vm.rhfs.join(","),
					smfu: vm.smfu
				});
	         },
	        selItem:function(item,index){
				var vm = this
				vm[index] = item.code
			},
			selItems:function(item,index){
				var vm=this
				if(item){
					var code = item.code
					var hasIndex = vm[index].indexOf(code)
					if(hasIndex>-1){
						vm[index].splice(hasIndex,1)
					}else{
						vm[index].push(code)
					}
				}else{
					vm[index] = []
				}
			},
        }
    });
    
})()

component/statistics/smfw-filter.js

@@ -0,0 +1,125 @@
(function(){
    Vue.component('smfw-filter',{
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row ml40 mr10" id="signYear">\
				    <div v-for="year in years"  class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selyear}" @click="yearClick(year)"><a>{{year}}</a></div>\
				</div>\
	            <div class="mt10 ml10 filter-title" v-if="dimensionValList&&dimensionValList.length">统计维度</div>\
	            <div class="c-row ml40 mr10" v-if="dimensionValList&&dimensionValList.length">\
	                <div v-for="item in dimensionValList" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': item==dimensionVal}" @click="chooseItem(item,\'dimensionVal\')"><a>{{item}}</a></div>\
	            </div>\
				<div class="mt20 ml10 filter-title">统计指标</div>\
				<div class="div-content">\
					<div class="mt20 div-group-btn c-row ml40 mr10">\
						<div class="div-btn c-33" v-for="item in smfuList" :class="{\'active\': smfu==item.code}" @click="selItem(item,\'smfu\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</div>\
				</div>\
				<div class="mt20 ml10 filter-title" v-if="smfu == 2">统计维度</div>\
				<div class="div-content" v-if="smfu == 2">\
					<div class="c-row ml40 mr10">\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" :class="{\'active\': rhfs.length==0}" @click="selItems(\'\',\'rhfs\')">\
							<a href="#" class="f-fs14">全部</a>\
						</div>\
						<div class="c-33 mt20"  style="margin-left:0;margin-right:3%;" v-for="item in rhfsList" :class="{\'active\': rhfs.indexOf(item.code)>-1}" @click="selItems(item,\'rhfs\')">\
							<a href="#" class="f-fs14">{{item.name}}</a>\
						</div>\
					</div>\
				</div>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">重置</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">保存</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['chooseYear','minYear',"dimensionValList"],
        data: function(){
            return {
            	selyear:"",
                years: [],
                smfuList:[{code:1,name:'上门服务'},{code:2,name:'入户访视'}],	//上门服务
				smfu:1,
				rhfsList:[{code:"5",name:'孕产妇'},{code:"6",name:'新生儿'},
				{code:"9",name:'肺结核'},{code:"8",name:'80岁以上老人'},{code:"7",name:'重性精神疾病'}],  //入户访视
				rhfs:[],
                dimensionVal:"",
            }
        },
        mounted: function(){
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
             
            if(now.getMonth() < 6){
                year --;
            }
            for(i=year; i>=this.minYear; i--){
                this.years.push(i);
            }
            //如果前一个页面返回的选中的年份
            if(!this.chooseYear){
                this.selyear = this.years[0];
                this.dimensionVal=""
            }else{
            	this.selyear = this.chooseYear
                this.dimensionVal=""
            }
        },
        methods: {
        	 yearClick:function(val){
	          this.selyear = val;
	          this.dimensionVal=""
	         },
            chooseItem:function(item,param){
            	this[param] = item
            	this.selyear = ""
            },
	         resetClick:function(){
				this.selyear=this.years[0]
				this.dimensionVal=""
				this.rhfs = []
				this.smfu = 1
	         },
	         confirmClick:function(){
	         	var vm = this;
				//触发刷新
				this.$emit('vuedals:close', {
					chooseYear: vm.selyear,
					rhfs: vm.rhfs.join(","),
					smfu: vm.smfu,
					dimensionVal:vm.dimensionVal
				});
	         },
	        selItem:function(item,index){
				var vm = this
				vm[index] = item.code
			},
			selItems:function(item,index){
				var vm=this
				if(item){
					var code = item.code
					var hasIndex = vm[index].indexOf(code)
					if(hasIndex>-1){
						vm[index].splice(hasIndex,1)
					}else{
						vm[index].push(code)
					}
				}else{
					vm[index] = []
				}
			},
        }
    });
    
})()

component/statistics/special-filter.js

@@ -0,0 +1,78 @@
(function(){
    Vue.component('special-filter', {
        template: '<div style="height: 400px;overflow: auto;">\
            <div class="mt10 ml10 filter-title">统计年份</div>\
            <div class="c-row ml40 mr10">\
                <div v-for="year in years" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selyear}" @click="chooseYear(year)"><a>{{year}}</a></div>\
            </div>\
            <div class="mt10 ml10 filter-title" v-if="dimensionValList&&dimensionValList.length">统计维度</div>\
            <div class="c-row ml40 mr10" v-if="dimensionValList&&dimensionValList.length">\
                <div v-for="item in dimensionValList" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': item==dimensionVal}" @click="chooseItem(item,\'dimensionVal\')"><a>{{item}}</a></div>\
            </div>\
            <div id="footer">\
                <div class="c-row btn-wrap c-border-top fr">\
                    <div class="div-foot-btn mr20" @click="resetClick">\
                        <a href="#" class="c-666 f-fs16">重置</a>\
                    </div>\
                    <div class="div-foot-btn active" @click="confirmClick">\
                        <a href="#" class="c-666 f-fs16">确定</a>\
                    </div>\
                </div>\
            </div>\
        </div>',
        props:['selectedYear',"minYear","dimensionValList"],
        data: function(){
            return {
            	selyear:"",
                years: [],
                dimensionVal:"",
            }
        },
        methods: {
            chooseYear:function(year){
                this.selyear = year;
                this[param] = ""
            },
            chooseItem:function(item,param){
            	this[param] = item
            	this.selyear = ""
            },
            resetClick:function(){
                this.selyear = this.years[0];
                this[param] = ""
            },
            confirmClick:function(){
                //触发刷新
                var vm = this;
                Vuedals.Bus.$emit('close', {
                    chooseYear: vm.selyear,
                    dimensionVal:vm.dimensionVal
                });
            }
        },
        mounted: function(){
            //显示年份最低是2016年
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
            
            if(now.getMonth() >= 6){
                this.years.push(year);
            }
            for(i=year-1; i>=minYear; i--){
                this.years.push(i);
            }
            
            //如果前一个页面返回的选中的年份
            if(!this.selectedYear){
                this.selyear = this.years[0];
            }else{
            	this.selyear = this.selectedYear
            }
        }
    })
})()

component/statistics/table-panel.js

@@ -84,7 +84,7 @@
        	},
            getLowLevelData: function(row,th){
            	var vm=this
            	if(th.canclick){  //点击名称有效
            	if(!vm.cantclick||th.canclick){  //点击名称有效
	            	if(vm.tabActive == vm.tabList.length-1){  
	            		if(vm.tabList[vm.tabActive].name=="团队"){ //tab在最后一级,显示团队信息
			                var title="团队信息"

component/statistics/year-filter.js

@@ -16,7 +16,7 @@
                </div>\
            </div>\
        </div>',
        props:['selectedYear'],
        props:['selectedYear',"minYear"],
        data: function(){
            return {
                years: []
@@ -41,11 +41,16 @@
            //显示年份最低是2016年
            var now = new Date(),
                year = now.getFullYear();
            var minYear = 2016
            
            if(this.minYear){
            	minYear = this.minYear
            }
            
            if(now.getMonth() >= 6){
                this.years.push(year);
            }
            for(i=year-1; i>=2016; i--){
            for(i=year-1; i>=minYear; i--){
                this.years.push(i);
            }