<!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.css'}" media="all">
    <!-- 省市区样式 -->
    <link rel="stylesheet" th:href="@{'/layui/lay/mymodules/region.css'}">
</head>
<body>
<div class="layui-fluid bgf8">
    <div class="larry-container">
        <div class="layui-row layui-col-space15 layui-data-top">
            <div class="layui-col-xs6 layui-col-md4">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left a">
                            <div  class="left-img" style=" background: dodgerblue;">
                                <img src="/images/device.png" alt="">
                            </div>
                        </div>
                        <div class="right">
                            <div class="p">
                                <h3 id="deviceTotalCount">0</h3>
                                <cite>设备总数（台）</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md4">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left b">
                            <div class="left-img" style=" background: #FA6332;">
                                <img src="/images/residential.png" alt="">
                            </div>
                        </div>
                        <div class="right">

                            <div class="p">
                                <h3 id="residentialDeviceTotalCount">0</h3>
                                <cite>小区门口设备总数（台）</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="layui-col-xs6 layui-col-md4">
                <section class="layui-card">
                    <div class="layui-card-body countup">
                        <div class="left c">
                            <div class="left-img" style=" background: #68C381;">
                                <img src="/images/unit.png" alt="">
                            </div>
                        </div>
                        <div class="right">

                            <div class="p">
                                <h3 id="unitDeviceTotalCount">0</h3>
                                <cite>单元设备总数 （台）</cite>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                       <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-year" placeholder="" lay-key="28">
                            </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>
                           </div>
                           <div class="layui-btn-group layuiadmin-btn-group">
                               <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm font-col" data-type="month-total">截止当月设备总数</a>
                               <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm" data-type="month-add">当月新增设备</a>
                               <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm" data-type="month-malfunction">当月故障设备</a>
                               <input type="hidden" name="chartType" id="chart-type-id" value="month-total"/>
                           </div>
                    </div>
                    <div class="layui-card-body ">
                        <div id="xse" style="width:100%;height: 480px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{'/layui/layui.js '}" charset="utf-8"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script th:src="@{'/lib/echarts.common.min.js'}"  charset="utf-8"></script>
<script th:src="@{'/lib/echartsTheme.js'}" charset="utf-8"></script>
<script th:src="@{'/js/statistics/statistics-device.js'}" charset="utf-8"></script>
</body>
</html>