raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!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 href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
        <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: 70%;
        top:44px;
       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;
    }
    .shadowr{
        left: -70%;
    }
        </style>
    </head>
    <body>
        <div id="main" class="c-hide">
            <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-f14 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-f14 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-f14 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-f14 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-f14 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-f14 l-name">绑定设备</div>
                        </div>
                    </li>
                </ul>
            </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-0 c-t-center c-ffc800 plr15 c-w-33">
                        <!-- <div class="c-f20 wz-num">{{topDatas['index_83']}}</div>
                        <div class="c-f12">健康文章推送量</div> -->
                        <div class="c-f14 health-title" style="padding-bottom: 10px;">健康文章</div>
                        <div class="ui-grid" style="margin-top: 47px;">
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f16 black">{{topDatas['index_83']}}</div>
                                <div class="c-f12 visible-xs-inline-block health-count black"style="margin-top: 5px;">触达人数</div><img @mouseenter="jumpTip(1)" @mouseleave="leaveTip(1)"class="tip" data-val="1"  width="12" src="../../../images/icon_wenhao.png" alt="">
                                <div class="shadow" id="shadow1">以微信绑定账号+家庭成员为统计口径</div>
                            </div>
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f16 black">{{topDatas['index_103']}}</div>
                                <div class="visible-xs-inline-block c-f12 health-count black" style="margin-bottom: 33px;margin-top: 5px;">推送人数</div><img @mouseenter="jumpTip(2)" @mouseleave="leaveTip(2)" class="tip" data-val="2" width="12" src="../../../images/icon_wenhao.png" alt="">
                                <div class="shadow" id="shadow2">以微信绑定账号为统计口径</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-col-1 c-position-r c-t-center">
                        <div class="position-center-text c-f12">推送情况</div>
                        <div id="pieChart" style="width: 100%; height:100px;"></div>

                    </div>
                    <div class="ui-col-0 c-t-center c-17b3ec plr15 c-w-33">
                        <!-- <div class="c-f20 zd-num">{{topDatas['index_5']}}</div>
                        <div class="c-f12">健康指导推送量</div> -->
                        <div class="c-f14 health-title" style="padding-bottom: 10px;">健康指导</div>
                        <div class="ui-grid" style="margin-top: 47px;">
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f16 black">{{topDatas['index_5']}}</div>
                                <div class="visible-xs-inline-block c-f12 health-count black" style="margin-top: 5px;">触达人数</div><img @mouseenter="jumpTip(3)" @mouseleave="leaveTip(3)" class="tip" data-val="3" width="12" src="../../../images/icon_wenhao.png" alt="">
                                <div class="shadow" id="shadow3">以微信绑定账号+家庭成员为统计口径</div>
                            </div>
                            <div class="ui-col-1 c-position-r">
                                <div class="c-f16 black">{{topDatas['index_106']}}</div>
                                <div class="visible-xs-inline-block c-f12 health-count black" style="margin-bottom: 33px;margin-top: 5px;">推送人数</div><img @mouseenter="jumpTip(4)" @mouseleave="leaveTip(4)" class="tip" data-val="4" width="12" src="../../../images/icon_wenhao.png" alt="">
                                <div class="shadow shadowr" id="shadow4">以微信绑定账号为统计口径</div>
                            </div>
                        </div>

                    </div>
                    
                </div>
            </div>
            <!-- 微信绑定统计 -->
            <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="../../../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="../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>