<%@ 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="../../images/nffavicon.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}/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">
                    <%@include file="include/time.jsp" %>
                </div>
                <button type="button" class="btn btn-primary " id="query">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
                <div class="form-group fr mr10" id="fliteData">
                    <label>筛选数据：</label>
                    <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
                </div>
            </div>
        </div>
        <%--页面表格--%>
        <div class="col-md-12 mt10">
            <div class="halfHeight col-md-6" id="transactionTypeBar">

            </div>
            <div class="halfHeight col-md-6" id="transactionProgressBar">

            </div>
            <div class="width100 halfHeight">
                <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>处理人员</th>
                        <th>处理时间</th>
                        <th>进行时间(天)</th>
                        <th>流程状态</th>
                        <th>预警类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <ul class="user-checkout pa" style="right: 5px;z-index: -10">
            <li style="margin-right: 0px" id="selectUserUpdatePass">
                <input id="user_name" type='hidden' value=<shiro:principal property="loginName"/>/>
                <input id="user_index" type='hidden' value=<shiro:principal property="userIndex"/>/>
                <i class="fa fa-user" style="color: #fff;font-size: 12px"></i>
                <shiro:authenticated>
                    <shiro:principal property="name"/>
                </shiro:authenticated>&nbsp;
            </li>
            <li id="destory"><i class="fa fa-power-off" style="margin-right: 5px"></i>注销</li>
        </ul>
</div>

<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/echarts/echartsNew.js"></script>
<script src="${ctx}/js/plugin/layui/layer.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/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var height,type=2,progress=7;
    var websocket,serverData;
    var webSocket;
    $(function () {
        height= $(window).height() - 50;
        $(".halfHeight").css("height",height*0.5);
        //默认为月份统计
        $("#interval").val("月份");
        //首先获取socket的url，然后打通与服务端的socket通道
        $.ajax({
            url: '/pqs9300/business/getWebsocketURL',
            type: 'post',
            dataType: 'text',
            success: function (data) {
                reSetStatus();
                refresh();
                if ('WebSocket' in window) {
                    var userName = $("#user_name").val();
                    webSocket = new WebSocket(data + userName);
                } else if ('MozWebSocket' in window) {
                    alert("此浏览器只支持MozWebSocket");
                } else {
                    alert("此浏览器只支持SockJS");
                }
                webSocket.onopen = function (evnt) {
                    layer.msg("webSocket连接成功!", {
                        time: 404
                    });
                }
                webSocket.onmessage = function (evnt) {
                    //接受后台发送的socket信息，刷新当前页面数据
                    console.log(evnt.data);
                    refresh();
                };
                webSocket.onerror = function (evnt) {
                    layer.msg("websocket连接失败", {icon: 2, time: 3000});
                };
                webSocket.onclose = function (evnt) {
                    console.log("与服务器断开了链接!")
                }
            }
        });
    });

    //点击查询按钮
    $("#query").on("click",function () {
        type=2;
        progress=7;
        refresh();
    });

    /**
     * 初始化获取后台数据
     */
    function refresh() {
        /*获取各项条件 */
        var startTime=$("#startTime").val();
        var endTime=$("#endTime").val();
        // type=$("#transactionType").val();
        // progress=$("#transactionFlow").val();
        var indexi ;
        $.ajax({
            type:"post",
            url:"/pqs9300/transaction/getTransactionData",
            dataType:"json",
            data:{
                startTime:startTime,
                endTime:endTime,
                type:type,
                progress:progress
            },
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success:function(data){
                serverData=data;
                startQuery();
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }


    //事务类型柱状图
    function initTransactionTypeBar(typeData){
        var fuzhuData=[0,0,0];
        var zhuData=[0,0,0];
        var xData=['全部', '预警单', '告警单'];
        if(null!==typeData){
            //辅助数据
            fuzhuData[0]=0;
            fuzhuData[1]=typeData.alarm;
            fuzhuData[2]=0;
            //主数据，需要根据用户所选，给对应主体加上颜色
            if(Number(type)===2){
                zhuData[0]={value:typeData.total,itemStyle:{color:'#A0522D'}};
                xData[0]={value:'全部',textStyle:{color:'#A52a2a'}};
                zhuData[1]={value:typeData.earlyWarn,itemStyle:{color:'#FF7E50'}};
                zhuData[2]={value:typeData.alarm,itemStyle:{color:'#FF7E50'}};
            }else if(Number(type)===0){
                zhuData[0]={value:typeData.total,itemStyle:{color:'#FF7E50'}};
                zhuData[1]={value:typeData.earlyWarn,itemStyle:{color:'#A0522D'}};
                xData[1]={value:'预警单',textStyle:{color:'#A52a2a'}};
                zhuData[2]={value:typeData.alarm,itemStyle:{color:'#FF7E50'}};
            }else if(Number(type)===1){
                zhuData[0]={value:typeData.total,itemStyle:{color:'#FF7E50'}};
                zhuData[1]={value:typeData.earlyWarn,itemStyle:{color:'#FF7E50'}};
                zhuData[2]={value:typeData.alarm,itemStyle:{color:'#A0522D'}};
                xData[2]={value:'告警单',textStyle:{color:'#A52a2a'}};
            }
        }
        echarts.dispose($("#transactionTypeBar")[0]);
        var typeBar = echarts.init(document.getElementById('transactionTypeBar'));
        var option = {
            title: {
                text: '事务类型',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            color: ['#FF7E50'],
            grid: {
                left: '1%',
                top: '14%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: {show: false},
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    barMaxWidth: 30,
                    itemStyle: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        itemStyle: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data:fuzhuData
                },
                {
                    name: '事务统计',
                    type: 'bar',
                    stack: '总量',
                    barMaxWidth: 30,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: zhuData
                }
            ]
        };
        typeBar.setOption(option);
        typeBar.getZr().on('click', params => {
            let pointInPixel = [params.offsetX, params.offsetY]
            if (typeBar.containPixel('grid', pointInPixel)) {
            var xIndex = typeBar.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
            xIndex=Number(xIndex);
            if(xIndex===0){
                type=2;
            }else{
                type=xIndex-1;
            }
            refresh();
         }
        });
    };

    //事务流程柱状图
    function initTransactionProgressBar(progressData){
        var fuzhuData=[0,0,0,0,0,0,0];
        var zhuData=[0,0,0,0,0,0,0];
        var xData=['全部', '开始', '预/告警单下发', '预/告警单反馈', '现场测试', '整改通知单下发', '整改通知单反馈', '完结'];
        if(null!=progressData){
            //辅助数据
            fuzhuData[0]=0;
            fuzhuData[1]=progressData.alarmTicket+progressData.feedBack+progressData.testReport+progressData.reviseNotice+progressData.reviseFeedBack+progressData.finish;
            fuzhuData[2]=progressData.feedBack+progressData.testReport+progressData.reviseNotice+progressData.reviseFeedBack+progressData.finish;
            fuzhuData[3]=progressData.testReport+progressData.reviseNotice+progressData.reviseFeedBack+progressData.finish;
            fuzhuData[4]=progressData.reviseNotice+progressData.reviseFeedBack+progressData.finish;
            fuzhuData[5]=progressData.reviseFeedBack+progressData.finish;
            fuzhuData[6]=progressData.finish;
            fuzhuData[7]=0;
            //主数据，需要根据用户所选，给对应主体加上颜色
            zhuData[0]={value:progressData.total,itemStyle:{color:'#FF7E50'}};
            zhuData[1]={value:progressData.start,itemStyle:{color:'#FF7E50'}};
            zhuData[2]={value:progressData.alarmTicket,itemStyle:{color:'#FF7E50'}};
            zhuData[3]={value:progressData.feedBack,itemStyle:{color:'#FF7E50'}};
            zhuData[4]={value:progressData.testReport,itemStyle:{color:'#FF7E50'}};
            zhuData[5]={value:progressData.reviseNotice,itemStyle:{color:'#FF7E50'}};
            zhuData[6]={value:progressData.reviseFeedBack,itemStyle:{color:'#FF7E50'}};
            zhuData[7]={value:progressData.finish,itemStyle:{color:'#FF7E50'}};
            if(Number(progress)===7){
                zhuData[0]={value:progressData.total,itemStyle:{color:'#A0522D'}};
                xData[0]={value:'全部',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===0){
                zhuData[1]={value:progressData.start,itemStyle:{color:'#A0522D'}};
                xData[1]={value:'开始',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===1){
                zhuData[2]={value:progressData.alarmTicket,itemStyle:{color:'#A0522D'}};
                xData[2]={value:'预/告警单下发',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===2){
                zhuData[3]={value:progressData.feedBack,itemStyle:{color:'#A0522D'}};
                xData[3]={value:'预/告警单反馈',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===3){
                zhuData[4]={value:progressData.testReport,itemStyle:{color:'#A0522D'}};
                xData[4]={value:'现场测试',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===4){
                zhuData[5]={value:progressData.reviseNotice,itemStyle:{color:'#A0522D'}};
                xData[5]={value:'整改通知单下发',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===5){
                zhuData[6]={value:progressData.reviseFeedBack,itemStyle:{color:'#A0522D'}};
                xData[6]={value:'整改通知单反馈',textStyle:{color:'#A52a2a'}};
            }else if(Number(progress)===6){
                zhuData[7]={value:progressData.finish,itemStyle:{color:'#A0522D'}};
                xData[7]={value:'完结',textStyle:{color:'#A52a2a'}};
            }
        }
        echarts.dispose($("#transactionProgressBar")[0]);
        var progressBar = echarts.init(document.getElementById('transactionProgressBar'));
        var option = {
            title: {
                text: '事务流程',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            color: ['#FF7E50'],
            grid: {
                left: '1%',
                top: '14%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data:xData ,
                axisLabel: {
                    interval: 0,
                    show: true,
                    fontSize:10
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    barMaxWidth: 30,
                    itemStyle: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        itemStyle: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: fuzhuData
                },
                {
                    name: '事务统计',
                    type: 'bar',
                    stack: '总量',
                    barMaxWidth: 30,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: zhuData
                }
            ]
        };
        //点击事件
        progressBar.setOption(option);
        progressBar.getZr().on('click', params => {
                let pointInPixel = [params.offsetX, params.offsetY]
                if (progressBar.containPixel('grid', pointInPixel)) {
                var xIndex = progressBar.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
                xIndex=Number(xIndex);
                if(xIndex===0){
                    progress=7;
                }else{
                    progress=xIndex-1;
                }
                refresh();
            }
         });
    };



    var dataTable;
    //初始化表格数据
    function initTransactionTable(tableData) {
        var tableHeight=height*0.5-75;
        var length = Math.floor(tableHeight / 32);
        if (length < 1) {
            length = 1;
        }
        var tableCellHeight=32*length;
        dataTable = $("#transactionList").DataTable();
        dataTable.clear().draw();
        dataTable = $('#transactionList').DataTable({
            order: [6,'desc'],
            columnDefs : [
                {
                    orderable : false,
                    targets : [10]
                }
            ],
            columns: [
                {width: "10%",data:"name", render:function (data, type, full, meta) {
                    var value=data;
                    if(data.length>13){
                        value=data.substring(0,12)+"...";
                        value="<span title="+data+">"+value+"</span>";
                    }
                    return value;
                }},
                {width: "7%",data:"type",render:function (data, type, full, meta) {
                       return getTransactionType(data)+'单';
                 }},
                {width: "7%",data:"createUser"},
                {width: "8%",data:"depts"},
                {width: "12%",data:"createTimeStr"},
                {width: "7%",data:"modifyUser",render:function (data, type, full, meta) {
                            if(data===""|data===undefined|data===null){
                                return '/';
                            }
                            return data;
                    }},
                {width: "12%",data:"modifyTimeStr"},
                {width: "9%",data:"proceed"},
                {width: "8%", data: "progress",render:function (data, type, full, meta) {
                        return getTransactionProceed(data,full.type);
                 }},
                {width: "7%", data: "proceed",render:function (data, type, full, meta) {
                        //根据进行的时间显示相应的警告
                        return getWarnInfo(data,full.type);
                 }},
                {width: "13%",data:"progress", render:function (data, type, full, meta) {
                        var button="",flag;
                        data=Number(data);
                        if(data>=6){
                            flag=true;
                        }
                        if(!flag){
                            var content=getTransactionProceedOperate(data,full.type);
                            button="<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='excuteNextStep(\""+ getTransactionProceed(data,full.type)+ "\",\"" + full.supIndex + "\",\"" + data +"\")' >"+content+"</button>";
                        }
                        return button+"<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='viewTransactionDetail(\"" + full.supIndex + "\",\"" + data + "\")' >查看</button>";
                    }
                }
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: tableCellHeight,
            // scrollX: true,
            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);
                });
    	 		$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
            }
        });
    }

    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }




    //预/告警单根据进行的时间返回颜色和警告内容
    function getWarnInfo(data,proceedStatus) {
        data=Number(data);
        proceedStatus=Number(proceedStatus);
        var  info='<font style="color:black">无预警</font>'
        if(proceedStatus===0||proceedStatus===1||proceedStatus===4){
            if(data>1){
                info='<font style="color:#A52a2a">超时</font>';
            }
        }else if(proceedStatus===2){
            if(data<=5){
                info='<font style="color:black">无预警</font>'
            }else if(data>5&&data<=8){
                info='<font style="color:#DAA520">一级预警</font>'
            }else if(data>8&&data<=10){
                info='<font style="color:#FF7E50">二级预警</font>'
            }else{
                info='<font style="color:#A52a2a">超时</font>'
            }
        }else if(proceedStatus===3){
            if(data<=10){
                info='<font style="color:black">无预警</font>'
            }else if(data>10&&data<=20){
                info='<font style="color:#DAA520">一级预警</font>'
            }else if(data>20&&data<=30){
                info='<font style="color:#FF7E50">二级预警</font>'
            }else{
                info='<font style="color:#A52a2a">超时</font>'
            }
        }
        return info;
    }

    //根据数字，返回当前单子类型
    function getTransactionType(data) {
        if(Number(data)===0){
            return '预警';
        }else{
            return  '告警';
        }
    }

    //根据流程数字，返回当前流程状态
    function getTransactionProceed(data,type) {
        data=Number(data);
        if(data===0){
            return '开始';
        }else if(data===1){
            return getTransactionType(type)+'单下发';
        }else if(data===2){
            return getTransactionType(type)+'反馈单';
        }else if(data===3){
            return '现场测试';
        }else if(data===4){
            return '整改通知单下发';
        }else if(data===5){
            return '整改通知反馈单';
        }else if(data===6){
            return '完结';
        }else{
            return "完结";
        }
    }

    //根据流程数字，返回当前流程状态
    function getTransactionProceedOperate(data,type) {
        data=Number(data);
        if(data===0){
            return '开始';
        }else if(data===1||data===4){
            return '下发';
        }else if(data===2||data===3||data===5){
            return '上传';
        }
    }




    //执行下一步操作，其中有预/告警单下发、整改通知单下发是直接进行操作
    function excuteNextStep(title,supIndex,stepCount) {
        stepCount=Number(stepCount);
        if(stepCount===0){
            //后台执行更新，为下发状态
            var i;
            $.ajax({
                type: "post",
                url: "/pqs9300/transaction/startDealTransaction",
                dataType: "json",
                data: {
                    supIndex: supIndex
                },
                beforeSend: function () {
                    i = ityzl_SHOW_LOAD_DOWNLOAD();
                },
                success: function (data) {
                    if (data.code === 500) {
                        layer.msg(data.message, {icon: 2, time: 1000});
                    }
                    refresh();
                    ityzl_CLOSE_LOAD_LAYER(i);
                }
            })
        }else if(stepCount===1){
            //先去校验下事务数据，以及文档文件
            var i;
            $.ajax({
                type: "post",
                url: "/pqs9300/transaction/checkTransaction",
                dataType: "json",
                data: {
                    supIndex: supIndex
                },
                beforeSend: function () {
                    i = ityzl_SHOW_LOAD_DOWNLOAD();
                },
                success: function (data) {
                    if (data.code === 200) {
                        window.location.href = '/pqs9300/transaction/downTransactionWord?supIndex='+supIndex;
                    } else {
                        layer.msg(data.message, {icon: 2, time: 1000});
                    }
                    refresh();
                    ityzl_CLOSE_LOAD_LAYER(i);
                }
            })
        }else if(stepCount===4){
            //无需跳转，直接指向下载链接
            //先去校验下事务数据，以及文档文件
            var i;
            $.ajax({
                type: "post",
                url: "/pqs9300/transaction/checkTransactionNotice",
                dataType: "json",
                data: {
                    supIndex: supIndex
                },
                beforeSend: function () {
                    i = ityzl_SHOW_LOAD_DOWNLOAD();
                },
                success: function (data) {
                    if (data.code === 200) {
                        window.location.href = '/pqs9300/transaction/downTransactionWordNotice?supIndex='+supIndex;
                    } else {
                        layer.msg(data.message, {icon: 2, time: 1000});
                    }
                    ityzl_CLOSE_LOAD_LAYER(i);
                    type=2;
                    progress=7;
                    refresh();
                }
            })
        }else{
            layer.open({
                type: 2,
                title: title,
                maxmin : false,
                area : ['100%' , '100%'],
                content: '/pqs9300/transaction/excuteNextStep?supIndex='+supIndex+"&excuteStep=1"+"&stepCount="+stepCount,
                scrollbar: false,
                end:function (){
                    refresh();
                }
            });

        }
    }

    function viewTransactionDetail(subIndex,data) {
        layer.open({
            type: 2,
            title: '技术监督详情',
            maxmin: false,
            area: ['100%', '100%'],
            content: 'technicaldetail?supIndex=' + subIndex,
            scrollbar: false
        })
    }




    //特殊处理，表头紧缩问题--start
    var it=null;
    function startQuery() {
        //实时刷新时间单位为毫秒
        it= setInterval('refreshQuery()',100);

    }
    /* 刷新查询 */
    function refreshQuery(){
        var width=$("#transactionList").width();
        if(width>200){
            if(serverData.code===200){
                //实例化事务类型柱状图、流程柱状图
                initTransactionTypeBar(serverData.body.transactionType);
                initTransactionProgressBar(serverData.body.transactionProgress);
                //初始化表格
                initTransactionTable(serverData.body.superviseList);
            }else{
                layer.msg(serverData.message,{icon:2,time:2000})
                initTransactionTable(null);
                //实例化事务类型柱状图、流程柱状图
                initTransactionTypeBar(serverData.body.transactionType);
                initTransactionProgressBar(serverData.body.transactionProgress);
            }
            window.clearInterval(it)
        }
    }
    //特殊处理，表头紧缩问题--end
</script>
</body>
</html>