raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!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/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
        <link 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"/>
        <style>
            .tip{
                vertical-align: inherit;
                margin-left: 5px;
            }
            .health-count{
                margin-left: 26.156px;
            }
            .black{
                color: #323232;
            }
            .health-title{
                margin-left: 14px;
            }
            .visible-xs-inline-block{
                display: inline-block;
            }
            .flex-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: baseline;
    }
    .c-w-33{
        /*height: 191.6px;*/
    }
    .shadow{
        position: absolute;
        left: 50%;
    	top: 85px;
       background-color: rgba(50, 50, 50, 0.701961);
       border-color: rgb(51, 51, 51);
       color: rgb(255, 255, 255);
       font-size: 14px;
       font-family: sans-serif;
	    border-radius: 4px;
	    padding: 5px;
	    visibility: hidden;
	    min-width: 242px;
	    z-index: 99999;
	    text-align: left;
    }
    .shadowr{
        left: 0%;
    }
    .article-bar, .send-bar{height:15px;width:0%;}
    .article-bar{background: #7a97e0;}
    .send-bar{background: #17b3ec;}
    .c-f36 {font-size: 36px;}
        </style>
    </head>
    <body>
        <div id="main" class="plr20 c-hide" v-loading.fullscreen.lock="isloading">
            <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="false" ></header-tab>
            <header-prompt></header-prompt>
            <div class="clearfix ">
                <ul class="l-banner">
                    <li class="active" >
                        <div class="tag" :class="{'active': index==3}" @click="changeTag(3)">
                            <div id="index_3" class="c-f18">{{topDatas['index_3']}}</div>
                            <div class="mt5 c-f16 l-name">咨询量</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==4}" @click="changeTag(4)">
                            <div id="index_4" class="c-f18">{{topDatas['index_4']}}</div>
                            <div class="mt5 c-f16 l-name">随访量</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==5}" @click="changeTag(5)">
                            <div id="index_5" class="c-f18">{{topDatas['index_5'] + topDatas['index_83']}}</div>
                            <div class="mt5 c-f16 l-name">健康教育</div>
                        </div>
                    </li>
                </ul>
                <ul class="l-banner">
                    <li>
                        <div class="tag" :class="{'active': index==27}" @click="changeTag(27)">
                            <div id="index_27" class="c-f18">{{topDatas['index_27']}}</div>
                            <div class="mt5 c-f16 l-name">代预约量</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==21}" @click="changeTag(21)">
                            <div id="index_21" class="c-f18">{{topDatas['index_21']}}</div>
                            <div class="mt5 c-f16 l-name">绑定微信</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': index==20}" @click="changeTag(20)">
                            <div id="index_20" class="c-f18">{{topDatas['index_20']}}</div>
                            <div class="mt5 c-f16 l-name">绑定设备</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div  class="mt20 c-border bgc-fff" v-show="index=='27'">
            	<div class="c-border-b plr10 ptb10 c-f16 c-333">代预约情况</div>
            	<div  class="ui-grid ui-grid-middle ptb30">
            		<div class="ui-col-1  c-position-r c-border-r">
                        <div class="health-count c-f20 c-17b3ec pt35 c-t-center" >代预约等级医院<img @mouseenter="jumpTip('dyy1')" @mouseleave="leaveTip('dyy1')"class="tip" data-val="dyy1"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                        <div class="shadow" id="shadowdyy1" style="left: 50%;top:0px;">家庭医生帮助居民代预约到医院的预约人次</div>
                        <div class="c-f36 c-333 pb35 mt30 c-t-center">{{topDatas['index_124']}}</div>
            		</div>
            		<div class="ui-col-1  c-position-r">
                        <div class="health-count c-f20 c-17b3ec pt35 c-t-center" >代预约社区医院<img @mouseenter="jumpTip('dyy2')" @mouseleave="leaveTip('dyy2')"class="tip" data-val="dyy2"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                        <div class="shadow  shadowr" id="shadowdyy2" style="left: 50%;top:0px;">家庭医生帮助居民代预约到社区医院的预约人次</div>
                        <div class="c-f36 c-333 pb35 mt30 c-t-center">{{topDatas['index_125']}}</div>
            		</div>
            	</div>
            </div>
            <!-- 折线图 -->
            <line-chart v-on:getlinedata="getNewLineData" lineid="lineChart"></line-chart>
            <!-- 饼图 健康教育-->
            <div v-show="index=='5'" class="mt20 c-border bgc-fff">
                <div class="c-border-b plr10 ptb10 c-f16 c-333">推送情况</div>
                <div class="ui-grid ui-grid-middle ptb10">
                    <div class="ui-col-1 c-t-center c-ffc800 plr15 c-w-33">
                        <div class="health-count c-f20 c-ffc800 ptb20 c-t-center">健康文章</div>
                        <div class="ui-grid mb50">
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f24 c-333 mt20 c-t-center">{{topDatas['index_83']}}</div>
                                <div class="health-count c-f16 c-333 pt10 c-t-center" >触达人数<img @mouseenter="jumpTip(1)" @mouseleave="leaveTip(1)"class="tip" data-val="1"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                                <div class="shadow" id="shadow1">以微信绑定账号+家庭成员为统计口径</div>
                            </div>
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f24 c-333 mt20 c-t-center">{{topDatas['index_103']}}</div>
                                <div class="health-count c-f16 c-333 pt10 c-t-center" >推送人数<img @mouseenter="jumpTip(2)" @mouseleave="leaveTip(2)"class="tip" data-val="2"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                                <div class="shadow" id="shadow2">以微信绑定账号为统计口径</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-col-0 c-position-r c-t-center" style="width：30%;">
                        <div class="position-center-text c-f16">推送情况</div>
                        <div id="pieChart" style="width: 100%; height:100px;"></div>
                    </div>
                    <div class="ui-col-1 c-t-center c-ffc800 plr15 c-w-33">
                        <div class="health-count c-f20 c-17b3ec ptb20 c-t-center">健康指导</div>
                        <div class="ui-grid mb50">
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f24 c-333 mt20 c-t-center">{{topDatas['index_5']}}</div>
                                <div class="health-count c-f16 c-333 pt10 c-t-center" >触达人数<img @mouseenter="jumpTip(3)" @mouseleave="leaveTip(3)"class="tip" data-val="3"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                                <div class="shadow" id="shadow3">以微信绑定账号+家庭成员为统计口径</div>
                            </div>
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f24 c-333 mt20 c-t-center">{{topDatas['index_106']}}</div>
                                <div class="health-count c-f16 c-333 pt10 c-t-center" >推送人数<img @mouseenter="jumpTip(4)" @mouseleave="leaveTip(4)"class="tip" data-val="4"  width="16" src="../../../images/icon_wenhao.png" alt=""></div>
                                <div class="shadow shadowr" id="shadow4">以微信绑定账号为统计口径</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        	<!--健康教育对应的指标数据 start-->
            <div v-show="index=='5'" class="c-border bgc-fff mt20 article-panel">
                <div class="ptb10 plr10 c-border-b">
                    <span class="c-323232 c-f16 ml5">内容统计</span>
                </div>
                <div class="plr10 ptb10 c-323232">
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-0">文章总数</div>
                        <div class="article-bar mlr10"></div>
                        <div class="ui-col-1"><span class="article-total-count">0</span>篇</div>
                    </div>
                    <div class="ui-grid ui-grid-middle mt5">
                        <div class="ui-col-0">推送文章</div>
                        <div class="send-bar mlr10"></div>
                        <div class="ui-col-1"><span class="article-send-count">0</span>篇</div>
                    </div>
                    <div class="ui-grid c-border-t mt10 pt10">
                        <div class="ui-col-0" style="width: 50%;">
                            <div class="pie-chart" id="articleChart" style="height: 150px; width: 100%;"></div>
                        </div>
                        <div class="ui-col-1">
                            <div class="pie-chart" id="sendChart" style="height: 150px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>            	
            <!-- 折线图 -->
            <line-chart  v-show="index=='5'" class="mt10" v-on:getlinedata="getNewLineData5" lineid="lineChart5"></line-chart>
            <!-- 微信绑定统计 -->
            <div v-show="index=='21'" class="mt20 c-border bgc-fff">
                <div class="c-border-b plr10 ptb20 c-f16 c-333">{{wxTotal.label}}</div>
                <div class="ui-grid ui-grid-middle ptb10">
                    <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
                        <div class="c-f20 wz-num">{{wxTotal.amount1}}</div>
                        <div class="c-f12">已缴费人数</div>
                    </div>
                    <div class="ui-col-1 c-position-r c-t-center">
                        <div class="blur-cycle-box">
                            <div class="c-f16 c-fff num mt15">{{wxTotal.rate}}</div>
                            <div class="c-f12 c-fff mt5">绑定率</div>
                        </div>
                        <div id="pieChart2" style="width: 100%; height:100px;"></div>
                    </div>
                    <div class="ui-col-0 c-t-center c-909090 plr10 c-w-33">
                        <div class="c-f20 zd-num">{{wxTotal.amount2}}</div>
                        <div class="c-f12">未缴费人数</div>
                    </div>
                </div>
            </div>
            <!-- 底部区域图 -->
            <area-data-panel class="mt20" v-on:getnewdata="getAreaData"></area-data-panel>
            <!--模态框组件-->
            <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="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/element-ui.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/year-filter.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/statistics/team-info-dyy.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/pagination.js"></script>
        <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/comprehensive-analysis.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>