<!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="bodyBg1">
<div class="ad-show layui-fluid">
    <div class="header"><span class="title">小区智能管理系统广告数据统计中心</span> <div class="screen-btn"><i title="全屏"></i></div></div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md9 h100">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4 h100">
                    <div class="layui-row layui-col-space15">
                        <div class="card-bg" style="height:40%;">
                            <div class="layui-card-header">广告月度观看趋势</div>
                            <div class="layui-card-body h100">
                                <div id="ad-month" style="width:100%;height: 100%"></div>

                            </div>
                        </div>
                        <div class="card-bg" style="height:56%;">
                            <div class="layui-card-header font18">广告观看量TOP10城市</div>
                            <div class="layui-card-body h100">
                                <div id="watch-ranking" style="width: 100%;height:100%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md8 h100">
                    <div id="jinenum" >
                        <div class="left">
                            <p class="jenum_title">广告类别</p>
                            <p class="jenum_num1" id="ad-type-count">0</p>
                        </div>
                        <div class="left">
                            <p class="jenum_title">广告投放</p>
                            <p class="jenum_num1" id="ad-exposure-count">0</p>
                        </div>
                        <div class="left">
                            <p class="jenum_title">广告观看</p>
                            <p class="jenum_num1" id="ad-watch-count">0</p>
                        </div>
                        <div class="left">
                            <p class="jenum_title">本周观看</p>
                            <p class="jenum_num1" id="ad-watch-count-day-week">0</p>
                        </div>
                        <div class="left">
                            <p class="jenum_title">上周观看</p>
                            <p class="jenum_num1" id="ad-watch-count-day-last-week">0</p>
                        </div>
                    </div>
                    <div class="earth borderBg"style="height:50%;">
                        <div id="earth_echar" style="width:100%;height: 100%"></div>
                    </div>
                    <div class="card-bg borderBg" style="height: 30%">

                        <div class="layui-card-body h100" >
                            <div id="data-view" style="width:100%;height: 100%"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-col-md3 h100">
            <div class="layui-row layui-col-space15">
                <div class="card-bg" style="height:40%;margin: -7.5px 0;">
                    <div class="layui-card-header">广告类别观看分布</div>
                    <div class="layui-card-body h100">
                        <div id="ad-classify" style="width:100%;height:100%"></div>

                    </div>
                </div>

                <div class="card-bg" style="height:60%;">
                    <div class="layui-card-header font18">广告观看明细</div>
                    <div class="divWarning" id="demo1">
                        <div class="tablebox h100">
                            <div class="tbl-header">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <thead>
                                    <tr>
                                        <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>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </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/ad-data-cockpit.js'}" charset="utf-8"></script>
</body>
</html>
