manyi/static/1.0/tpl/devChart.html

<div class="wrapper-md" ng-controller="devChartCtrl" id="devChartCtrl">

    <style>
    </style>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body chartPanel" ng-class="{'fixed-map':isFullscreen}">
                    <div class="chart-mask" ng-click="loadAllChart();" ng-if="!chartHasLoad">
                        数据量较大，[点击加载]
                    </div>
                    <div id="particles-js"></div>
                    <a ui-fullscreen class="fullscreenBtn"></a>

                    <!--全国设备分布-->
                    <div class="showDataBox">
                        <div class="mapHead">
                            <svg width="1920" height="75" viewBox="0 0 1920 75" preserveAspectRatio="none">
                                <path d="M0,0L0,40 L760,40L810,75L1110,75L1160,40L1920,40L1920,0Z" fill="#00293F"
                                      style="fill-opacity:0.88;"/>
                                <path d="M0,0L0,40 L760,40L810,75L1110,75L1160,40L1920,40L1920,0" fill="#00293F"
                                      style="stroke:#108EE9;stroke-width:0.35;fill-opacity:0;"/>
                            </svg>

                            <div class="map-title">全网大数据概览</div>
                            <div class="map-time">
                                <span class="ledfont">{{showData.date}}</span>
                                <span class="ledfont">{{showData.week}}</span>
                                <span class="ledfont">{{showData.time}}</span>
                            </div>
                            <div class="map-sub-view">
                                <div class="map-sub-value"><span>使用</span><em class="ledfont" style="color: #F89212">{{showData.devBusy}}</em>
                                </div>
                                <div class="map-sub-value"><span>在线</span><em class="ledfont" style="color: #00B25E">{{showData.devOnline}}</em>
                                </div>
                                <div class="map-sub-value"><span>离线</span><em class="ledfont" style="color: #aaa">{{showData.devOffline}}</em>
                                </div>
                                <div class="map-sub-value" style="display: none"><span>库存</span><em class="ledfont"
                                                                                                    style="color: #ccc">{{showData.unregistered}}</em>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mapBox">
                        <div id="devChartPanelMap" class="mapEntity"></div>
                    </div>

                    <div class="chartBox bottom-chart"
                         ng-class="{active:chartActive.devBeingUsedChart}">
                        <div class="chartHead">24小时趋势</div>
                        <div id="devBeingUsedChart" class="chartEntity"></div>
                    </div>

                    <div class=chartBoxList>
                        <!--经销商营收排名-->
                        <div class="chartBox left-chart-1" ng-class="{active:chartActive.dealerIncomeTopChart}">
                            <div class="chartHead">营收Top(本年度)</div>
                            <div id="dealerIncomeTopChart" class="chartEntity"></div>
                        </div>

                        <!--的收入和用户消费曲线，并文字显示成功的订单数，可以选择最近 1天（24小时分时），最近7天，最近30天 -->
                        <div class="chartBox left-chart-2" ng-class="{active:chartActive.incomeChartLine}">
                            <div class="chartHead">营收趋势</div>
                            <div id="incomeChartLine" class="chartEntity"></div>
                        </div>
                        <div class="chartBox  left-chart-3" ng-class="{active:chartActive.consumeChartLine}">
                            <div class="chartHead">消费趋势</div>
                            <div id="consumeChartLine" class="chartEntity"></div>
                        </div>
                    </div>

                    <div class="chartBoxList right">
                        <div class="chartBox right-chart-1" ng-class="{active:chartActive.rightChart1}">
                            <div class="chartHead">消费频次</div>
                            <div id="rightChart1" class="chartEntity"></div>
                        </div>

                        <!--今日使用过的用户数：并显示男女比例，并显示总用户数的文字-->
                        <div class="chartBox right-chart-2" ng-class="{active:chartActive.userChartPie}">
                            <div class="chartHead">用户分布</div>
                            <div id="userChartPie" class="chartEntity"></div>
                        </div>

                        <!--用户反馈次数，经销商处理次数-->
                        <div class="chartBox right-chart-3" ng-class="{active:chartActive.feedbackChartPie}">
                            <div class="chartHead">用户反馈</div>
                            <div id="feedbackChartPie" class="chartEntity"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>