<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:replace="common/head"></script>
    <link xmlns:th="http://www.thymeleaf.org" rel="stylesheet"
          th:href="${'/css/statistics/statistics-ad-push-online-offline.css'}"
          media="all">
    <!-- 省市区样式 -->
    <link rel="stylesheet" th:href="@{'/layui/lay/mymodules/region.css'}">
</head>

<body>
<div class="layui-fluid bgf8">
    <div class="larry-container">

        广告投放数据看板
        <hr class="layui-bg-black">
        <div class="layui-row layui-col-space30 layui-data-top">
            <div class="layui-col-xs6 layui-col-md2">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left a">
                            <div class="left-img" style=" background: dodgerblue;">
                                <img src="/images/ad-push.png" alt="">
                            </div>
                        </div>
                        <div class="right">
                            <div class="p">
                                <h3 id="offlineAdCount">0</h3>
                                <cite>线下广告</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md2">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left b">
                            <div class="left-img" style=" background: #FA6332;">
                                <img src="/images/ad-count.png" alt="">
                            </div>
                        </div>
                        <div class="right">
                            <div class="p">
                                <h3 id="onlineAdCount">0</h3>
                                <cite>线上广告</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md2">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left c">
                            <div class="left-img" style=" background: #68C381;">
                                <img src="/images/ad-push-month.png" alt="">
                            </div>
                        </div>
                        <div class="right">

                            <div class="p">
                                <h3 id="videoAdCount">0</h3>
                                <cite>视频广告</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md2">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left d">
                            <div class="left-img" style=" background: #FFB800;">
                                <img src="/images/ad-count-month.png" alt="">
                            </div>
                        </div>
                        <div class="right">
                            <div class="p">
                                <h3 id="pictureAdCount">0</h3>
                                <cite>图片广告</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md2">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left d">
                            <div class="left-img" style=" background: #FFB800;">
                                <img src="/images/ad-count-month.png" alt="">
                            </div>
                        </div>
                        <div class="right">
                            <div class="p">
                                <h3 id="adsenseCount">0</h3>
                                <cite>广告位</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span>广告投放地区图示</span>
                    </div>
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    </div>
                    <div class="layui-card-body ">

                        <div id="chinaMap" style="width:100%;height: 480px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span>广告投放地区分布图</span>
                    </div>
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <!--                        <div class="layui-inline">-->
                        <!--                            <label class="layui-form-label">选择地区</label>-->
                        <!--                            <div class="layui-input-inline" id="region_bod">-->
                        <!--                                <input type="hidden" name="regionProvince"/>-->
                        <!--                                <input type="hidden" name="regionCity"/>-->
                        <!--                                <input type="hidden" name="regionArea"/>-->
                        <!--                                <input type="text" id="regio" readonly="readonly" placeholder="请选择" autocomplete="off"-->
                        <!--                                       class="layui-input"/>-->
                        <!--                                <div th:replace="common/region"></div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--                            <label class="layui-form-label">年份</label>-->
                        <!--                            <div class="layui-input-inline">-->
                        <!--                                <input type="text" class="layui-input" id="laydate-range-year" placeholder=""-->
                        <!--                                       lay-key="28">-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--                            <label class="layui-form-label">月份</label>-->
                        <!--                            <div class="layui-input-inline" style="width:100px;">-->
                        <!--                                <select id="select_month" lay-filter="area_filter">-->
                        <!--                                    <option value="">全部</option>-->
                        <!--                                    <option value="1">一月</option>-->
                        <!--                                    <option value="2">二月</option>-->
                        <!--                                    <option value="3">三月</option>-->
                        <!--                                    <option value="4">四月</option>-->
                        <!--                                    <option value="5">五月</option>-->
                        <!--                                    <option value="6">六月</option>-->
                        <!--                                    <option value="7">七月</option>-->
                        <!--                                    <option value="8">八月</option>-->
                        <!--                                    <option value="9">九月</option>-->
                        <!--                                    <option value="10">十月</option>-->
                        <!--                                    <option value="11">十一月</option>-->
                        <!--                                    <option value="12">十二月</option>-->
                        <!--                                </select>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                        <div class="layui-inline">-->
                        <!--                            <button class="layui-btn layuiadmin-btn-admin" data-type="query">查询</button>-->
                        <!--                            <button class="layui-btn layui-btn-primary" data-type="reset">重置</button>-->
                        <!--                            <input type="hidden" id="pushTaskType" th:value="${pushTaskType}"/>-->
                        <!--                        </div>-->
                    </div>
                    <div class="layui-card-body ">

                        <div id="pie" style="width:100%;height: 480px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span>各地区线上线下广告投放对比图</span>
                    </div>
                    <!--                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">-->
                    <!--                        <div class="layui-inline">-->
                    <!--                            <label class="layui-form-label">选择地区</label>-->
                    <!--                            <div class="layui-input-inline" id="region_body">-->
                    <!--                                <input type="hidden" name="regionProvince"/>-->
                    <!--                                <input type="hidden" name="regionCity"/>-->
                    <!--                                <input type="hidden" name="regionArea"/>-->
                    <!--                                <input type="text" id="region" readonly="readonly" placeholder="请选择" autocomplete="off"-->
                    <!--                                       class="layui-input"/>-->
                    <!--                                <div th:replace="common/region"></div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                        <div class="layui-inline">-->
                    <!--                            <label class="layui-form-label">年份</label>-->
                    <!--                            <div class="layui-input-inline">-->
                    <!--                                <input type="text" class="layui-input" id="laydate-range-yea" placeholder=""-->
                    <!--                                       lay-key="28">-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                        <div class="layui-inline">-->
                    <!--                            <label class="layui-form-label">月份</label>-->
                    <!--                            <div class="layui-input-inline" style="width:100px;">-->
                    <!--                                <select id="select_mont" lay-filter="area_filter">-->
                    <!--                                    <option value="">全部</option>-->
                    <!--                                    <option value="1">一月</option>-->
                    <!--                                    <option value="2">二月</option>-->
                    <!--                                    <option value="3">三月</option>-->
                    <!--                                    <option value="4">四月</option>-->
                    <!--                                    <option value="5">五月</option>-->
                    <!--                                    <option value="6">六月</option>-->
                    <!--                                    <option value="7">七月</option>-->
                    <!--                                    <option value="8">八月</option>-->
                    <!--                                    <option value="9">九月</option>-->
                    <!--                                    <option value="10">十月</option>-->
                    <!--                                    <option value="11">十一月</option>-->
                    <!--                                    <option value="12">十二月</option>-->
                    <!--                                </select>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                        <div class="layui-inline">-->
                    <!--                            <button class="layui-btn layuiadmin-btn-admin" data-type="query">查询</button>-->
                    <!--                            <button class="layui-btn layui-btn-primary" data-type="reset">重置</button>-->
                    <!--                            <input type="hidden" id="pushTaskTyp" th:value="${pushTaskType}"/>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <div class="layui-card-body ">

                        <div id="bar" style="width:100%;height: 480px;"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span>线上线下广告投放趋势图</span>
                    </div>
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
<!--                        <div class="layui-inline">-->
<!--                            <label class="layui-form-label">选择地区</label>-->
<!--                            <div class="layui-input-inline" id="region_bod">-->
<!--                                <input type="hidden" name="regionProvince"/>-->
<!--                                <input type="hidden" name="regionCity"/>-->
<!--                                <input type="hidden" name="regionArea"/>-->
<!--                                <input type="text" id="region" readonly="readonly" placeholder="请选择" autocomplete="off"-->
<!--                                       class="layui-input"/>-->
<!--                                <div th:replace="common/region"></div>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label">年份</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate-range-year" placeholder=""
                                       lay-key="28">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">月份</label>
                            <div class="layui-input-inline" style="width:100px;">
                                <select id="select_month" lay-filter="area_filter">
                                    <option value="">全部</option>
                                    <option value="1">一月</option>
                                    <option value="2">二月</option>
                                    <option value="3">三月</option>
                                    <option value="4">四月</option>
                                    <option value="5">五月</option>
                                    <option value="6">六月</option>
                                    <option value="7">七月</option>
                                    <option value="8">八月</option>
                                    <option value="9">九月</option>
                                    <option value="10">十月</option>
                                    <option value="11">十一月</option>
                                    <option value="12">十二月</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-admin" data-type="query">查询</button>
                            <button class="layui-btn layui-btn-primary" data-type="reset">重置</button>
                            <input type="hidden" id="pushTaskType" th:value="${pushTaskType}"/>
                        </div>
                    </div>
                    <div class="layui-card-body ">

                        <div id="line" style="width:100%;height: 480px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{'/lib/echartsTheme.js'}" charset="utf-8"></script>
<script 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>
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>

<script th:src="@{'/js/statistics/statistics-ad-push-online-offline.js'}" charset="utf-8"></script>
</body>
</html>
