<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <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-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- Logo -->
    <link xmlns:th="http://www.thymeleaf.org" rel="shortcut icon" th:href="@{'/favicon.ico'}" type="image/x-icon" media="all" />
    <link xmlns:th="http://www.thymeleaf.org" rel="stylesheet" th:href="@{'/layui/css/layui.css'}" media="all">
    <link xmlns:th="http://www.thymeleaf.org" rel="stylesheet" th:href="${'/css/admin.css'}" media="all">
    <!-- 省市区样式 -->
    <link rel="stylesheet" th:href="@{'/css/statistics/data-cockpit.css'}">
</head>

<body class="bodyBg2">
<div class="data">
    <div class="data-title">
        <div class="title-center ">小区智能管理系统数据统计中心</div>
        <div class="screen-btn"><i title="全屏"></i></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="info boxstyle left-top">
                <div class="title">实时统计</div>
                <div class="info-main">
                    <ul>
                        <li><span>物业</span>
                            <p id="org-count">0</p>
                        </li>
                        <li><span>小区</span>
                            <p id="residential-count">0</p>
                        </li>
                        <li><span>单元</span>
                            <p id="unit-count">0</p>
                        </li>
                        <li><span>在线设备</span>
                            <p id="online-device-count">0</p>
                        </li>
                        <li><span>住户</span>
                            <p id="user-count">0</p>
                        </li>
                        <li><span>访客</span>
                            <p id="guest-count">0</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-center boxstyle">
                <ul class="pie-content">
                    <li>
                        <div class="title">开门方式</div>
                        <div id="openWay" class="ad-canal"></div>
                    </li>
                    <li>
                        <div class="title">住户认证</div>
                        <div id="authWay" class="ad-canal"></div>
                    </li>
                    <li>
                        <div class="title">用户类型</div>
                        <div id="userType" class="ad-canal"></div>
                    </li>
                    <li>
                        <div class="title">移动端用户</div>
                        <div id="mobileUser" class="ad-canal"></div>
                    </li>
                </ul>

            </div>
            <div class="left-bottom boxstyle h35">
                <div class="title">TOP城市物业明细</div>
                <div class="divWarning" id="demo1">
                    <div class="tablebox home_table">
                        <div class="tbl-header">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>城市</th>
                                    <th>设备</th>
                                    <th>小区</th>
                                    <th>住户</th>
                                </tr>
                                </thead>
                                <tbody style="opacity:0;"></tbody>
                            </table>
                        </div>
                        <div class="tbl-body">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>城市</th>
                                    <th>设备</th>
                                    <th>小区</th>
                                    <th>住户</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>设备分布区域</p>
                <div class="num" id="device-count-distribution">
                    <span>0</span>
                </div>
            </div>
            <div id="earth_echar" class="cen-top map"></div>
            <div class="cen-bottom boxstyle h35">
                <div class="title">广告观看趋势</div>
                <div id="data-view" class="data-view"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="info boxstyle right-top">
                <div class="title">实时统计</div>
                <div class="info-main">
                    <ul>
                        <li><span>广告类别</span>
                            <p id="ad-type-count">0</p>
                        </li>
                        <li><span>广告投放</span>
                            <p id="ad-exposure-count">0</p>
                        </li>
                        <li><span>广告观看</span>
                            <p id="ad-watch-count">0</p>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="right-center boxstyle">
                <div class="title">广告观看量TOP10</div>
                <div id="watch-ranking" class="watch-ranking"></div>
            </div>
            <div class="right-bottom boxstyle h35">
                <div class="title">广告类别观看分布</div>
                <div id="ad-classify" class="ad-classify"></div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" value="" id="province-id" />
<script type="text/javascript" th:src="@{'/layui/layui.js '}" charset="utf-8"></script>
<script th:src="@{'/lib/echarts.common.min.js'}"  charset="utf-8"></script>
<script th:src="@{'/lib/echarts.min.js'}" charset="utf-8"></script>
<script th:src="@{'/lib/echartsTheme.js'}" charset="utf-8"></script>
<script th:src="@{'/lib/china.js'}" charset="utf-8"></script>
<script th:src="@{'/lib/map.js'}" charset="utf-8"></script>
<script th:src="@{'/lib/echarts-wordcloud.min.js'}" charset="utf-8"></script>
<script type="text/javascript">
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script type="text/javascript" th:src="@{'/js/statistics/home-data-cockpit.js'}" charset="utf-8"></script>
</body>
</html>
