<style>
    .rt-status-bar {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 5px;
        padding-right: 10px;
    }

    .rt-status-bar .button.active {
        background-color: #0099ff;
        color: #fff;
    }

    .rt-status-bar .button {
        border: 1px solid #0099ff;
        color: #888;
        background-color: #fff;
        height: 34px;
        width: 120px;
        letter-spacing: 2px;
    }

    .rt-content-bk {
        background: url(main/img/dashboardbk.png);
        background-size: 100% 100%;
        height: 1250px;
        margin: -15px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .rt-time-box {
        background: url(main/img/timebk.png) no-repeat;
        background-size: 100% 100%;
        border: 2px solid rgba(26, 203, 209, 0.24);
        position: relative;
        top: 20px;
        width: 100%;
    }

    .rt-timefilter-lable {
        float: left;
        margin-left: 47%;
        font-size: 14px;
        color: #1acbd1;
        font-weight: bold;
        margin-top: 5px;
    }

    .rt-account-content {
        width: 30%;
        background: url(main/img/accountbk.png) no-repeat;
        background-size: 100% 100%;
        height: 92.5%;
        border: 2px solid rgba(26, 203, 209, 0.24);
        margin-top: 30px;
        padding: 10px;
        float: left;
    }

    .rt-account-card {
        height: 100px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
        float: left;
        width: 48.5%;
    }

    .rt-account-piereport-card {
        height: 100px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
        width: 100%;
        min-height: 150px;
    }

    .rt-account-linereport-card {
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
        width: 100%;
        margin-top: 10px;
        min-height: 240px;
    }

    .rt-account-title {
        padding-left: 20px;
        padding-top: 2px;
        height: 26px;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
    }

    .rt-account-lable {
        padding-left: 20px;
        padding-top: 10px;
        color: white;
    }

    .dashboard-row {
        margin-left: -20px;
        margin-right: -5px;
    }

    .rt-sales-content {
        width: 69%;
        background: url(main/img/salesbk.png) no-repeat;
        background-size: 100% 100%;
        height: 47%;
        border: 2px solid rgba(26, 203, 209, 0.24);
        margin-top: 30px;
        padding: 10px;
        float: right;
    }

    .rt-action-content {
        width: 69%;
        background: url(main/img/actionbk.png) no-repeat;
        background-size: 100% 100%;
        height: 44.6%;
        border: 2px solid rgba(26, 203, 209, 0.24);
        padding: 10px;
        margin-left: 10px;
        float: right;
        margin-top: 10px;
    }


    .rt-sales-doneamountreport-card {
        float: left;
        width: 49%;
        min-height: 180px;
    }

    .rt-sales-piereport-card {
        height: 190px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
    }

    .rt-sales-donemapreport-card {
        /* height: 190px; */
        float: left;
        width: 100%;
        min-height: 300px;
    }

    .rt-sales-mapreport-card {
        height: 300px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
    }

    .rt-sales-donereport-card {
        height: 245px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
        margin-bottom: 10px;
    }

    .rt-actionanalysis-card {
        height: 190px;
        background-color: rgba(26, 203, 209, 0.1);
        border: 1px solid rgba(26, 203, 209, 0.15);
        margin-bottom: 10px;
    }

    .rt-action-total-card {
        width: 50%;
        height: 50%;
        border-right: 1px solid rgba(26, 203, 209, 0.15);
        border-bottom: 1px solid rgba(26, 203, 209, 0.15);
        float: left;
    }

    .rt-dashboard-splitline {
        margin-bottom: 10px;
        width: 20px;
        height: 3px;
        margin-left: 40%;
        margin-top: 10px;
        background-color: #1acbd1;
        overflow: hidden;
    }

    .rt-action-whitefont {
        font-size: 14px;
        color: #1acbd1;
        text-align: center;
        margin-top: 12%;
    }

    .rt-action-redfont {
        font-size: 18px;
        color: #e75e6e;
        text-align: center;
        font-weight: bold;
    }

    .form-control {
        border: none;
        background-color: inherit;
        color: #1acbda;
        font-size: 14px;
        font-weight: bold;
    }

    .input-group .input-group-addon {
        background-color: inherit;
        border: none;
        color: #1acbd1;
        font-size: 12px;
    }

    .input-group .form-control:first-child {
        display: none;
    }

    .piereport-totallegend {
        width: 10px;
        height: 10px;
        background: rgba(26, 203, 209, 0.3);
        display: inline-block;
        border-radius: 2px;
    }

    .piereport-detaillegend {
        width: 10px;
        height: 10px;
        background: rgba(26, 203, 209, 1);
        display: inline-block;
        border-radius: 2px;
    }

    .piereport-whitetext {
        color: #fff;
        font-size: 10px
    }

    .piereport-redtext {
        color: #e75e6e;
        font-size: 10px;
        font-weight: bold;
    }
</style>
<div class="rt-content-bk">
    <div class="rt-time-box">
        <div class="rt-timefilter-lable">
            {{vm.lastmonth}}
        </div>
        <rt-datetime-no-label rt-type="month" rt-col="4" ng-model="vm.lastmonth" ng-disabled="true" style="width: 10px;
            margin-left: 20px;"></rt-datetime-no-label>
    </div>
    <div class="rt-account-content">
        <div style="height: 21%;">
            <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span><a style=" font-size: 16px; color: #1acbd1;">客户总体情况</a></p>
            <div class="rt-account-card">
                <div class="rt-account-title" style=" background-color: #1acbd1;">
                    商业企业
                </div>
                <div class="rt-account-lable">
                    活跃量：<a style="    color: #1acbd1;
                        font-weight: bold;">{{vm.reportClientCount.BizCount}}</a>
                </div>
                <div class="rt-account-lable">
                    总量：<a style="color: #1acbd1;
                        font-weight: bold;">{{ vm.reportClientCount.BizCapacity}}</a>
                </div>
            </div>
            <div class="rt-account-card" style=" float: right;">
                <div class="rt-account-title" style=" background-color: #e75e6e;">
                    医疗终端
                </div>
                <div class="rt-account-lable">
                    活跃量：<a style="    color: #e75e6e;
                            font-weight: bold;">{{vm.reportClientCount.HosCount}}</a>
                </div>
                <div class="rt-account-lable">
                    总量：<a style="color: #e75e6e;
                            font-weight: bold;">{{ vm.reportClientCount.HosCapacity}}</a>
                </div>
            </div>
            <div class="rt-account-card" style="margin-top: 10px;">
                <div class="rt-account-title" style=" background-color: #fea772;">
                    零售终端
                </div>
                <div class="rt-account-lable">
                    活跃量：<a style="    color: #fea772;
                            font-weight: bold;">{{vm.reportClientCount.OtcCount}}</a>
                </div>
                <div class="rt-account-lable">
                    总量：<a style="color: #fea772;
                            font-weight: bold;">{{ vm.reportClientCount.OtcCapacity}}</a>
                </div>
            </div>
            <div class="rt-account-card" style="margin-top: 10px; float: right;">
                <div class="rt-account-title" style=" background-color: #4bd192;">
                    第三终端
                </div>
                <div class="rt-account-lable">
                    活跃量：<a style="    color: #4bd192;
                                font-weight: bold;">{{vm.reportClientCount.ThrCount}}</a>
                </div>
                <div class="rt-account-lable">
                    总量：<a style="color: #4bd192;
                                font-weight: bold;">{{ vm.reportClientCount.ThrCapacity}}</a>
                </div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i> </span>
                <a style=" font-size: 16px; color: #1acbd1;">客户新增情况</a>
            </p>
            <div class="rt-account-piereport-card">
                <div id="accountaddpiereport" style="width:100%;height:100%">
                </div>
            </div>
            <div class="rt-account-linereport-card">
                <div id="accountaddlinereport" style="width:100%;height:240px">
                </div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span> <a style=" font-size: 16px; color: #1acbd1;">客户流失情况</a></p>
            <div class="rt-account-piereport-card">
                <div id="accountlosspiereport" style="width:50%;height:100%;float: left;">
                </div>
                <div style=" margin-top: 55px;">
                    <p style="margin-bottom: 0px;">
                        <span class="piereport-totallegend"></span>
                        <span class="piereport-whitetext">总客户：</span>
                        <span class="piereport-redtext">{{vm.totalcount}}</span>
                        <span class="piereport-whitetext">家</span>
                    </p>
                    <p>
                        <span class="piereport-detaillegend"></span>
                        <span class="piereport-whitetext">流失客户：</span>
                        <span class="piereport-redtext">{{vm.losscount}}</span>
                        <span class="piereport-whitetext">家</span>
                    </p>
                </div>
            </div>
            <div class="rt-account-linereport-card">
                <div id="accountlossbarreport" style="width:100%;height:240px">
                </div>
            </div>
        </div>
    </div>
    <div class="rt-sales-content">
        <div style="height: 39.5%;width:50%;float:left">
            <div class="rt-sales-doneamountreport-card">
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span>
                    <a style=" font-size: 16px; color: #1acbd1;">销售指标总额情况</a>
                </p>
                <div class="rt-sales-piereport-card">
                    <div id="salesamountpiereport" style="width:100%;height:75%;float:left">
                    </div>
                    <div style="text-align: center;">
                        <p style="margin-bottom: 0px;">
                            <span class="piereport-detaillegend"></span>
                            <span class="piereport-whitetext">达成额：</span>
                            <span class="piereport-redtext">{{vm.done_amount}}</span>
                            <span class="piereport-whitetext">万</span>
                        </p>
                        <p>
                            <span class="piereport-totallegend"></span>
                            <span class="piereport-whitetext">指标总额：</span>
                            <span class="piereport-redtext">{{vm.target_amount}}</span>
                            <span class="piereport-whitetext">万</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="rt-sales-doneamountreport-card" style="float: right;">
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span>
                    <a style=" font-size: 16px; color: #1acbd1;">销售指标总量情况</a>
                </p>
                <div class="rt-sales-piereport-card">
                    <div id="salesqtypiereport" style="width:100%;height:75%;float:left">
                    </div>
                    <div style="text-align: center;">
                        <p style="margin-bottom: 0px;">
                            <span class="piereport-detaillegend"></span>
                            <span class="piereport-whitetext">达成量：</span>
                            <span class="piereport-redtext">{{vm.done_qty}}</span>
                        </p>
                        <p>
                            <span class="piereport-totallegend"></span>
                            <span class="piereport-whitetext">指标总量：</span>
                            <span class="piereport-redtext">{{vm.target_qty}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="rt-sales-donemapreport-card">
                <p style="display: flex; margin-top: 10px;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span><a style=" font-size: 16px; color: #1acbd1;">全国销售达成分布</a></p>
                <div class="rt-sales-mapreport-card">
                    <div id="salesdonemapreport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
        </div>
        <div style=" float: right;width: 49%;">
            <div>
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i> </span>
                    <a style=" font-size: 16px; color: #1acbd1;">达成额排名</a>
                </p>
                <div class="rt-sales-donereport-card">
                    <div id="salesdonebarreport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
            <div>
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span><a style=" font-size: 16px; color: #1acbd1;">达成额趋势</a></p>
                <div class="rt-sales-donereport-card">
                    <div id="salesdonelinereport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rt-action-content">
        <div style="height: 39.5%;width:50%;float:left">
            <div class="rt-sales-doneamountreport-card">
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i></span>
                    <a style=" font-size: 16px; color: #1acbd1;">拜访分析</a>
                </p>
                <div class="rt-sales-piereport-card">
                    <div id="visitpiereport" style="width:100%;height:75%;float:left">
                    </div>
                    <div style="text-align: center;">
                        <p style="margin-bottom: 0px;">
                            <span class="piereport-totallegend"></span>
                            <span class="piereport-whitetext">总客户数：</span>
                            <span class="piereport-redtext">{{vm.account_count}}</span>
                            <span class="piereport-whitetext">家</span>
                        </p>
                        <p>
                            <span class="piereport-detaillegend"></span>
                            <span class="piereport-whitetext">覆盖客户数：</span>
                            <span class="piereport-redtext">{{vm.visit_done_count}}</span>
                            <span class="piereport-whitetext">家</span>
                        </p>
                    </div>
                </div>

            </div>
            <div class="rt-sales-doneamountreport-card" style="margin-top: 32px;float: right;">
                <div class="rt-sales-piereport-card">
                    <div class="rt-action-total-card" style="border-right: 1px solid rgba(26, 203, 209, 0.15);">
                        <p class="rt-action-whitefont">总拜访次数</p>
                        <div class="rt-dashboard-splitline"></div>
                        <p class="rt-action-redfont">{{vm.visit_done_times}}</p>
                    </div>
                    <div class="rt-action-total-card">
                        <p class="rt-action-whitefont">代表人数</p>
                        <div class="rt-dashboard-splitline"></div>
                        <p class="rt-action-redfont">{{vm.ownercount}}</p>
                    </div>
                    <div style=" float: left;
                    height: 50%;
                    width: 100%;">
                        <p class="rt-action-whitefont" style="margin-top: 6%;">人均拜访次数</p>
                        <div class="rt-dashboard-splitline"></div>
                        <p class="rt-action-redfont">{{vm.averagevisit}}<a class="rt-action-whitefont" style="margin-left:10px">次/人</a></p>

                    </div>
                </div>
            </div>
            <div class="rt-sales-donemapreport-card">
                <div class="rt-sales-mapreport-card" style="margin-top: 10px; height: 298px;">
                    <div id="visitqtybarreport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
        </div>
        <div style="float: right;width: 49%;">
            <div>
                <p style="display: flex;"><span><i style=" color: #1acbd1; font-size: 6px;margin-right: 10px;" class="fa fa-circle"></i> </span>
                    <a style=" font-size: 16px; color: #1acbd1;">市场活动分析</a>
                </p>
                <div class="rt-actionanalysis-card" style="height: 150px;">
                    <div id="actionanysispiereport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
            <div>
                <div class="rt-sales-mapreport-card" style="height: 337px;">
                    <div id="actionrankbarreport" style="width:100%;height:100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
