<!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="bodyBg3">
<div class="data">
    <div class="data-title">
        <div class="title-center ">小区智能管理系统物业数据统计中心</div>
        <div class="screen-btn"><i class="narrow" title="全屏"></i></div>
    </div>
    <div class="data-content">
        <div class="con-top">
            <div id="jinenum" class="estate-border">
                <div class="left">
                    <p class="jenum_title">小区</p>
                    <p class="jenum_num1" id="residential-count">0</p>
                </div>
                <div class="left">
                    <p class="jenum_title">单元</p>
                    <p class="jenum_num1" id="unit-count">0</p>
                </div>
                <div class="left">
                    <p class="jenum_title">住户</p>
                    <p class="jenum_num1" id="user-count">0</p>
                </div>
                <div class="left">
                    <p class="jenum_title">待审核住户</p>
                    <p class="jenum_num1" id="uncheck-apply-user-count">0</p>
                </div>
                <div class="left">
                    <p class="jenum_title">访客</p>
                    <p class="jenum_num1" id="guest-count">0</p>
                </div>
                <div class="left">
                    <p class="jenum_title">服务人员</p>
                    <p class="jenum_num1" id="server-user-count">0</p>
                </div>
            </div>
        </div>
        <div class="con-bottom">
            <div class="con-estate-left boxstyle">
                <div class="estate-title">
                    <i></i>设备台数：<span id="device-count">135</span>
                </div>
                <div class="estate-content">
                    <div class="estate-content-title">
                        <ul>
                            <li>设备名称</li>
                            <li>设备位置</li>
                            <li>开门次数</li>
                        </ul>
                    </div>
                    <div class="estate-content-list" style="position: relative; overflow: hidden; width: 100%; ">
                        <div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow-y: scroll; margin-right: -17px; margin-bottom: -17px;">
                            <ul class="Barrage-list" id="device-open-count-list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-estate-center ">
                <div class="estate-time">
                    <div class="left active">
                        <p class="jenum_title" data-type="0">今日</p>

                    </div>
                    <div class="left">
                        <p class="jenum_title"  data-type="1">本周</p>

                    </div>
                    <div class="left">
                        <p class="jenum_title" data-type="2">本月</p>

                    </div>
                    <div class="left">
                        <p class="jenum_title" data-type="3">全年</p>

                    </div>

                </div>
                <div class="estate-rotate">
                    <div class="lopp">
                        <img src="/images/circle-bg2.png" alt="" style="position: absolute;z-index: 1;">
                        <img src="/images/circle-bg.png" alt=""><span id="open-door-count">0</span></div>
                    <div class="ball-content">
                        <!-- <div class="ball ball1">1</div> -->
                        <div class="ball ball2"><span id="pass-word-open-count">0</span></div>
                        <div class="ball ball3"><span id="telnet-open-count">0</span></div>
                        <!-- <div class="ball ball4">4</div> -->
                        <div class="ball ball5"><span id="face-open-count">0</span></div>
                        <!-- <div class="ball ball6">6</div> -->
                        <div class="ball ball7"><span id="card-open-count">0</span></div>
                    </div>

                </div>
                <div id="estate-open" class="estate-open boxstyle" >
                    <div class="estate-title">
                        <i></i>开门数据
                    </div>
                </div>
            </div>
            <div class="con-estate-right boxstyle">
                <div class="estate-title">
                    <i></i>出入记录
                </div>
                <div class="all-estate">
                    <select id="residential_id" class="resizing_select">
                        <option  value="">全部小区</option>
                    </select>
                    <select id="width_tmp_select" class="width_tmp_select">
                        <option id="width_tmp_option" ></option>
                    </select>
                </div>
                <div class="estate-content">
                    <div class="estate-content-title">
                        <ul>
                            <li style="flex:1.5;">出入时间</li>
                            <li>小区</li>
                            <li style="flex:2;">设备位置</li>
                            <li>开门用户</li>
                        </ul>
                    </div>
                    <div class="estate-content-list" style="position: relative; overflow: hidden; width: 100%; ">

                        <ul class="Barrage-list d_show" >


                        </ul>

                    </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 type="text/javascript">
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script type="text/javascript" th:src="@{'/js/statistics/estate-data-cockpit.js'}" charset="utf-8"></script>
</body>
</html>
