<%--
  Created by IntelliJ IDEA.
  User: 徐扬
  Date: 2020/7/9
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<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>PQS9300技术监督管理系统</title>
    <link rel="shortcut icon" href="/pqs9900/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .form-control{
            height: 22px;
            padding: 1px 5px;
        }

        #transactionList {
            min-width: 100%;
        }
        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }

        .table > tbody > tr > td {
            padding: 5px;
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }
    </style>
</head>
<body class="container-fluid">
<div class="row">
    <%--页面头--%>
    <div class="col-md-12 mt10">
        <div class="form-inline">
            <div class="form-group">
                <label>事务名称：</label>
                <label id="tname"></label>
            </div>
        </div>
    </div>
    <%--页面表格--%>
    <div class="col-md-12">
        <table id="transactionList" class="table table-striped table-bordered dataTable no-footer width100">
            <thead>
            <tr>
                <th>供电公司</th>
                <th>变电站</th>
                <th>监测点</th>
                <th>描述</th>
                <th>文件名</th>
                <th>URL</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<input type="hidden" value="${supIndex}" id="supIndex">
<input type="hidden" value="${excuteStep}" id="excuteStep">
<input type="hidden" value="${stepCount}" id="stepCount">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/layui/layui.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script>
    var supIndex,excuteStep,stepCount,bottonText;
    $(function () {
        //根据事务索引去后台获取详细信息
        supIndex=$("#supIndex").val();
        excuteStep=$("#excuteStep").val();
        stepCount=$("#stepCount").val();
        refresh();
    });

    function refresh() {
        var indexi ;
        $.ajax({
            type:"post",
            url:"/pqs9300/transaction/getMonitorDetailData",
            dataType:"json",
            data:{
                supIndex:supIndex
            },
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success:function(data){
                if(data.code===200){
                    //事务名称赋值
                    if(data.body.name===null){
                        $("#tname").html("无对应事务数据");
                    }else{
                        $("#tname").html(data.body.name);
                    }
                    //初始化表格
                    initTransactionTable(data.body.overRunLogList);
                }else{
                    layer.msg(data.message,{icon:2,time:2000})
                    $("#tname").html("无对应事务数据");
                    initTransactionTable(null);
                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }

    var dataTable;
    //初始化表格数据
    function initTransactionTable(tableData) {
        var height = $(window).height() - 125;
        var length = Math.floor(height / 32);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#transactionList").DataTable();
        dataTable.clear().draw();
        dataTable = $('#transactionList').DataTable({
            order: [],
            columnDefs : [
                {
                    orderable : false,
                    targets : [5]
                }
            ],
            columns: [
                {width: "8%",data:"gdName"},
                {width: "8%",data:"subName"},
                {width: "8%",data:"lineName"},
                {width: "17%",data:"overRunLog.overRunDescribe"},
                {width: "11%",data:"overRunLog.name"},
                {width: "11%",data:"supIndex",render:function (data, type, full, meta) {
                        stepCount=Number(stepCount);
                        if(stepCount===2){
                            return full.overRunLog.feedBack;
                        } else if(stepCount===3){
                            return full.overRunLog.testReport;
                        } else if(stepCount===5){
                            return full.overRunLog.reviseFeedBack;
                        } else {
                            return '';
                        }
                    }
                },
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            lengthMenu: [length],
            language: {
                url: '/pqs9300/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#transactionList_info").addClass("fl");
                $("#transactionList_paginate").addClass("fr");
                $("#transactionList_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 = $("#transactionList").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            },
        });
    }

</script>
</body>
</html>
