<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>终端台账管理</title>
    <meta name="description" content="">
    <meta name="author" content="">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/animate/Animate.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/jquery/buttons.dataTables.min.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style type="text/css">
		#account_filter{
		 	position: absolute;
    		top: -31px;
    		right: 155px;
		}
		
		.table > thead > tr > th,
		.table > tbody > tr > th,
		.table > tfoot > tr > th,
		.table > thead > tr > td,
		.table > tbody > tr > td,
		.table > tfoot > tr > td {
		  padding: 7px;
		  line-height: 1.42857143;
		  vertical-align: top;
		  border-top: 1px solid #ddd;
		}
		@media screen and (min-width: 1200px) and (max-width:1400px)  {
			.table > thead > tr > th,
			.table > tbody > tr > th,
			.table > tfoot > tr > th,
			.table > thead > tr > td,
			.table > tbody > tr > td,
			.table > tfoot > tr > td {
			  padding: 4px;
			  line-height: 1.42857143;
			  vertical-align: top;
			  border-top: 1px solid #ddd;
			}
		}
		.glyphicon {
			top: 2px;
			left: 2px;
		}
		.queryButton{
			display:inline-block
		}
		
	</style>
	
</head>
<script type="text/javascript" charset="utf-8">
	
</script>
<body>
    <div class="content_wrapper" style="background-color:#fff;">
                <div class="container-fluid">
                        <div class="row">
                        <div class="col-sm-12">
                            <aside>
                                <section>
                                    <div class="container-fluid">
                                        <div class="row">
                                            <form class="form-inline ml15 header">
												<%@include file="../../include/time.jsp"%>
												<div class="form-inline queryButton">
													<button id="query" type="button" class="btn btn-primary">
														<i class="glyphicon glyphicon-search"></i>
													</button>
												</div>
											</form>
                                            <div class="col-sm-12">
                                                <table id="account" class="table table-striped table-bordered dataTable no-footer"
                                           				cellspacing="0" width="100%" role="grid" aria-describedby="example_info">
                                                    <thead><tr role="row">
                                                        <th class="text-center">终端编号</th>
                                                        <th class="text-center">供电公司</th>
                                                        <th class="text-center">变电站</th>
                                                        <th class="text-center">电压等级(kV)</th>
                                                        <th class="text-center">投运时间</th>
                                                        <th class="text-center">终端厂家</th>
                                                        <th class="text-center">终端型号</th>
                                                        <th class="text-center">IP</th>
                                                        <th class="text-center">端口</th>
                                                        <th class="text-center">终端状态</th>
                                                     </tr></thead>
                                                    <tbody id="tbody">
                                                        
                                                    </tbody>
                                                 </table>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </aside>
                        </div>
                    </div>
                </div>
            
            </div>
    <script src="${ctx}/js/plugin/jquery.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/dataTables.buttons.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/buttons.html5.min.js"></script>
    <script src="${ctx}/js/plugin/layerui/layui.all.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${ctx}/js/basic.js"></script>
    <script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
    <script src="${ctx}/jspJS/utils/timeControl.js"></script>
    <script type="text/javascript" charset="utf-8">
        function load(startTime,endTime){
            $.ajax({
                method:"post",
                url:"/pqs9200/device/machineAccount",
                data:{
                    startTime:startTime,
                    endTime:endTime
                },
                success: function (data) {
                	var heightTemp=screen.height;
                	var length;
                	if(heightTemp===768){
                		length=10;
                	}else if (heightTemp===1024){
                        length=20;
                	}else if (heightTemp===960){
                        length=15;
                    }else if (heightTemp===1050){
                        length=18;
                    }else{
                        length=13;
                	}
                	
                    var info = JSON.parse(data);
                    var oTable=$('#account').DataTable({
                        scrollX : true,
                        lengthChange : false,
                        bDestroy : true,
                        searching: true,
                        ordering : true,
        				pageLength:length,
                        language : {
                            url: '/pqs9200/json/chine.json'
                        },
                        data : info,
                        "createdRow": function ( row, data, index ) {
                            if(data[9]=="退运"){
                                $('td', row).eq(9).css('color','#FF2D2D')
                            }else if(data[9]=="中断"){
                                $('td', row).eq(9).css('color','#FFFF37')
                            }

                        },
                        'fnDrawCallback': function(oTable) {
                            $("#account_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                            var table = $("#account").dataTable();
                            $('#dataTable-btn').click(function(e) {
                                if($("#changePage").val() && $("#changePage").val() > 0) {
                                    var redirectpage = $("#changePage").val() - 1;
                                } else {
                                    var redirectpage = 0;
                                }
                                table.fnPageChange(redirectpage);
                            });
                        }
                    });
                    oTable.on('order.dt search.dt',
                        function() {
                            oTable.column(0, {
                                search: 'applied',
                                order: 'applied'
                            }).nodes().each(function(cell, i) {
                                cell.innerHTML = i + 1;
                            });
                        }).draw();

                    new $.fn.dataTable.Buttons($("#account").dataTable(), {
                        buttons: [
                            {
                                extend: 'csv',//导出格式
                                title:'终端台账列表',//导出csv名称
                                exportOptions:{
                                    columns :[0,1,2,3,4,5,6],//导出需要的列
                                    format:{
                                        body:function(data,rID,cID){//对导出内容的筛选 data 表格内容 rid 行索引 cid 列索引
                                            if(cID==0){
                                                return rID+1;
                                            }else if(cID==1){
                                                return data.replace("0","O");
                                            }else{
                                                return data;
                                            }
                                        }
                                    }
                                }
                            }
                        ]
                    } );

                    oTable.buttons().container().css("display","inline-block");
                    oTable.buttons().container().css("float","right");
                    oTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
                    oTable.buttons().container().appendTo('.header');
                }
            });
        }

        $(document).ready(function() {
            var endTime=getEndTime();
            var startTime=getStartTime("年份", endTime);

            load(startTime,endTime);
        })

        $('.btn-export').click(function () {
            alert('导出功能正在建设中！');
        })



        $("#query").click(function (){
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();

            load(startTime,endTime);
        });
    </script>
</body>

</html>