<!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/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.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"/>
    </head>
    <body>
        <div id="main" class="c-hide">
            <div class="div-header">
                <div class="fl">
                    <div class="application-name">统计分析</div>
                    <div class="vertical-line"></div>
                    <div class="role-select">
                        <select class="select" v-model="selectedRole">
                            <option v-for="role in roles" :value="role.code">{{role.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="fr mt10">
                    <img v-show="false" @click="open" src="../../../images/zhankai_icon.png" width="18" height="18" />
                </div>
            </div>
            <!-- 饼图 -->
            <div class="mt10 mb30">
                <div class="c-row">
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(1)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.sign.text}}</div>
                            <div class="c-f14 c-666">签约率</div>
                        </div>
                        <div id="signMain" class="c-100 height-120"></div>
                        <div class="c-f12 c-999 div-data-value">
                            <span class="c-f12 c-12b7f5 qianyuelv">{{signRateData.sign.sign}}</span>/
                            <span class="c-f12 c-333 qianyuezong">{{signRateData.sign.people}}</span>
                        </div>
                    </div>
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(1)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.signTask.text}}</div>
                            <div class="c-f14 c-666">完成率</div>
                        </div>
                        <div id="completeMain" class="c-100" style="height: 120px;"></div>
                        <div class="c-f12 c-999 div-data-value">
                            <span class="c-f12 c-12b7f5">{{signRateData.signTask.sign}}</span>/
                            <span class="c-f12 c-333">{{signRateData.signTask.people}}</span>
                        </div>
                    </div>
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(2)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.renew.text}}</div>
                            <div class="c-f14 c-666">续签率</div>
                        </div>
                        <div id="renewMain" class="c-100" style="height: 120px;"></div>
                        <div class="c-f12 c-999 div-data-value">
                            <span class="c-f12 c-12b7f5">{{signRateData.renew.sign}}</span>/
                            <span class="c-f12 c-333">{{signRateData.renew.people}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--签约分析-->
            <div class="mt10">
                <div class="section-header plr10">
                    <span class="section-label c-f14">签约分析</span>
                    <div class="grey-line"></div>
                </div>
                <div class="section-body mtb30">
                    <div class="c-row">
                        <div v-for="item in signAnalysis" @click="showDetail(item.url)" class="c-20 c-t-center">
                            <img :src="item.photo">
                            <div class="c-f12 c-999 mt10">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--服务分析-->
            <div class="mt10">
                <div class="section-header plr10">
                    <span class="section-label c-f14">服务分析</span>
                    <div class="grey-line"></div>
                </div>
                <div class="section-body mb30 mt10">
                    <div class="c-row n-row">
                        <div v-for="item in serviceAnalysis" @click="showDetail(item.url)" v-show="!item.allowArea||item.allowArea==selectedRole"  class="c-20 mt20 c-t-center clearfix">
                            <img :src="item.photo">
                            <div class="c-f12 c-999 mt10">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../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/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/event-bus.js"></script>
        <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/home.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>
