manyi/static/administrator/tpl/dashboard.html

<div class="wrapper-md" ng-controller="dashboardCtrl" id="dashboardCtrl">
    <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"><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.bottomChart}">
                        <div class="chartHead">30天提现趋势</div>
                        <div id="bottomChart" class="chartEntity"></div>
                    </div>

                    <div class=chartBoxList>
                        <div class="chartBox left-chart-1" ng-class="{active:chartActive.leftChart1}">
                            <div class="chartHead">经销商营收Top</div>
                            <div id="leftChart1" class="chartEntity"></div>
                        </div>

                        <!--显示每天或是每月的营收总额-->
                        <div class="chartBox left-chart-2" ng-class="{active:chartActive.leftChart2}">
                            <div class="chartHead">全网营收趋势</div>
                            <div id="leftChart2" class="chartEntity"></div>
                        </div>
                        <div class="chartBox  left-chart-3" ng-class="{active:chartActive.leftChart3}">
                            <div class="chartHead">设备类型分布</div>
                            <div id="leftChart3" 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.rightChart2}">
                            <div class="chartHead"></div>
                            <div id="rightChart2" class="chartEntity"></div>
                        </div>

                        <div class="chartBox right-chart-3" ng-class="{active:chartActive.rightChart3}">
                            <div class="chartHead">用户报障趋势</div>
                            <div id="rightChart3" class="chartEntity"></div>
                        </div>
                    </div>

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

</div>