@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>
<script src="~/Content/js/echarts/echarts-gl.min.js"></script>
<style>
    .ui-jqgrid tr.jqgrow td {
        overflow: hidden;
    }

    .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
        overflow: hidden !important;
    }

    .btn-primary {
        margin-right: 2px;
    }

    html {
        height: 100%;
    }

    .topRow {
        height: 54px;
        background-color: #031c7bc2;
        padding-bottom: 5px;
    }

    body {
        height: 100%;
        FONT-SIZE: 15px;
        /*FONT-SIZE: 18px;*/
        background-color: black;
        --CustTitlecolor: #0bd4d4; /*表标题颜色*/ /*#4D5457 #000000bf*/
        --Custbackgroundcolor: #031c7bc2; /*#031c7b;*/ /*表整体颜色*/
        --CustSelect: #103764; /*选中颜色*/ /*悬浮颜色*/
        --Custcolor: white; /*字体颜色*/
        --CustBorderColor: #031c7bc2; /*边框颜色*/
        --CustRow1: #0e59a5d4; /*偶行颜色*/
        --CustRow2: #031c7bc2; /*奇行颜色*/
    }

    /*大标题*/
    .TopName {
        vertical-align: middle;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        /*color:var(--CustTitlecolor);*/
        color: white;
    }

    /*logo标题*/
    .TopNamelogo {
        vertical-align: middle;
        text-align: left;
        font-size: 24px;
        font-weight: 700;
        color: white;
    }

    .logoclass {
        height: 24px;
    }

    #logolabel {
        /*width:80%;*/
    }

    .time {
        vertical-align: middle;
        text-align: center;
        font-size: 20px;
        color: white;
    }

    .formdiv {
        height: 100% !important;
        margin-bottom: 2px;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .thclass {
        width: 100px;
        font-weight: 500;
        text-align: right;
    }

    table {
        height: 100%;
    }

    html, body {
        height: 100% !important;
    }

    form {
        height: 98% !important;
        background-color: black;
    }

    /*.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        height: 24px !important;
    }*/



    /*表列表头颜色*/
    .table > thead:first-child > tr:first-child > th {
        background-color: var(--Custbackgroundcolor);
        color: var(--CustTitlecolor);
    }
    /*表整体颜色*/
    .ui-jqgrid {
        background-color: var(--Custbackgroundcolor);
        color: var(--Custcolor);
        /*border: 1px solid  var(--CustBorderColor);*/
        border: none;
    }

        .ui-jqgrid .table-bordered td {
            /*border: 0.5px solid  var(--CustBorderColor);*/
            border: none;
            border-left: none;
            border-right: none;
        }

    /*悬浮颜色*/
    .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active,
    .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th,
    .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td,
    .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
        background-color: var(--CustSelect);
        color: var(--Custcolor);
    }

    /*选中颜色*/
    .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success,
    .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th,
    .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td,
    .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
        background-color: var(--CustSelect);
        color: var(--Custcolor);
    }
    /*偶行颜色*/
    div > div > div > table > tbody > tr:nth-child(2n) {
        background-color: var(--CustRow1);
        color: white;
        border: none;
    }
    /*奇行颜色*/
    div > div > div > table > tbody > tr:nth-child(2n+1) {
        background-color: var(--CustRow2);
        color: white;
        border: none;
    }

    form > div > table > tbody > tr > td {
        padding-bottom: 5px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--CustTitlecolor);
    }

    #tdXX1 > div > div > canvas {
        height: 100% !important;
    }

    #tdXX1 > div > div {
        height: 100% !important;
    }

    /*.ui-jqgrid .ui-jqgrid-htable thead th {
        padding:4px 2px 4px 2px;
    }*/
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td,
    .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        padding: 4px 2px 4px 2px;
    }

    .ui-jqgrid .ui-search-table td.ui-search-clear {
        display:none;
    }
    .ui-search-toolbar,.ui-search-toolbar th,.ui-search-toolbar th div {
        background-color: transparent !important;
    }
     .ui-search-toolbar input {
        background-color: #0594a566 !important;
        border:none;
        color: #e7ebee;
        /*padding:0;*/
        width:99%;
    }

    #ShaiXuan tbody tr td input {
        background-color: #0594a566 !important;
        border:none;
        padding:2px 2px 2px 2px !important;
        width:92%;
        color:white;
    }
    .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  background-color: #0594a566 !important;
}

    .btn-default {
        background-color: #0594a566 !important;
        color:white !important;
    }
    #ShaiXuan {
        /*background-color: var(--Custbackgroundcolor);*/
        /*width:100%*/
    }
        #ShaiXuan tbody tr td {
            padding:0px 2px 0px 2px;
        }

    #Tr_ShaiXuan {
          background-color: var(--Custbackgroundcolor);
    }

    .ToptdClass {
        padding:0;
    }
</style>
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
<script src="~/Content/js/datepicker/WdatePicker.js"></script>
<link href="~/Content/css/bootstrap/bootstrap-select.css" rel="stylesheet" />
<script src="~/Content/js/bootstrap/bootstrap-select.min.js"></script>

<script>
    var HeightToDel = 140;
    var timer;
    var timer2;//刷新数据时间
    var TBBackColor = "#031c7bc2";
    var TBTitleFontColor = "#0bd4d4";
    var GunDongRate = 2 * 1000;//单位毫秒 //表格滚动间隔时间
    var DataF = 300;//单位秒 //刷新数据时间
    var IsFirstShow = false;
    var GunDongRow = 1;
    $(function () {

        //显示时间
        getTime();
    
        gridList1();
        ReSetCSS();
        GetALLSelectData();
        $(window).resize(function () {

         //   gridList1();
            GunDongRow = 0;
        });
         //scrollBody();
        //刷新数据
        timer2 = setInterval(function () {
            gridList1();
        }, DataF * 1000);


    });





    //自动滚动
    function scrollBody() {
        timer = setInterval(function () {
            scrollBody_act();
        }, GunDongRate);

    }

    function scrollBody_act()
    {
        var ob3 = $('#gridList1').getGridParam("records");
        var div = $('#gridList1').closest('.ui-jqgrid-bdiv')[0];
        var offsetHeight = div.offsetHeight;
        var scrollHeight = div.scrollHeight - offsetHeight;
        if (GunDongRow == 0) {
            var hh = offsetHeight;
            //GunDongRow = Math.floor(hh / 30.3);
            GunDongRow = 1;
        }

        // div.scrollTop = div.scrollTop + 1;
        if (div.scrollTop >= scrollHeight) {//循环滚动
            scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight
            if (div.scrollTop >= scrollHeight) {
                div.scrollTop = 0; //循环滚动，重置滚动头即可
                IsFirstShow = true;
            }
            if (div.scrollTop >= ob3 * 30.4) {
                div.scrollTop = 0; //循环滚动，重置滚动头即可
                IsFirstShow = true;
            }
        }
        if (!IsFirstShow) {
            div.scrollTop = div.scrollTop + (GunDongRow * 30.3);
        }
        else { IsFirstShow = false; }
    }
    //end 自动滚动

    function GetAllCols1() {
     var   _cols = new Array();
        //项目号	客户名称	设备类型	产品名称	产品型号	序列号	计划开工日期	计划完工日期	数量	设备编号	生产工单号
        //项目进度条	项目阶段	状态	生产确认表	电装开始	电装完成	 机械装配开始 机械装配完成 总装开始	总装完成 仪表配置开始
     //仪表配置完成 调试测试开始 调试测试完成 FAT开始	FAT完成	FQC	OQC	产品类型
     _cols.push({ label: 'ID', name: 'ID', width: 80, align: 'left', hidden: true, });
     _cols.push({ label: '项目号', name: '项目号', width: 100, align: 'left', });
     _cols.push({ label: '设备类型', name: '设备类型', width: 100, align: 'left', });
     _cols.push({ label: '产品型号', name: '产品型号', width: 230, align: 'left', });
     _cols.push({ label: '设备编号', name: '设备编号', width: 170, align: 'left', });
     _cols.push({ label: '成品编码', name: '成品编码', width: 110, align: 'left', });
     
     _cols.push({ label: '生产工单号', name: '生产工单号', width: 120, align: 'left', });
     
     _cols.push({ label: 'COLORSTR', name: 'COLORSTR', width: 30, align: 'left', hidden: true, });
     _cols.push({
         label: '项目阶段', name: '项目阶段', width: 150, align: 'left',
         cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) {
             if (rawObject.COLORSTR == "green") {
                 return "style='color:#42f943'";
             }
         }
     });
    
     _cols.push({
         label: '项目进度条', name: '项目进度条', width: 180, align: 'left',
         formatter: function (cellvalue, options, rowObject) {
             var str_retrun = '<div id="JDText_' + rowObject.ID + '" style="width: 99%;height:98%;"></div>';
             return cellvalue = str_retrun;

         }
     });

     _cols.push({ label: '项目进度条值', name: '项目进度条值', width: 50, align: 'left', hidden: true, });
     _cols.push({
         label: '状态', name: '状态', width: 110, align: 'left',
         cellattr: function addCellAttr(rowId, val, rawObject, cm, rdata) {
             if (val == "延期") {
                 return "style='color:red'";
             }
             if (val == "紧急") {
                 return "style='color:yellow'";
             }
             if (val == "完成") {
                 return "style='color:#42f943'";
             }
         }
     });
     _cols.push({ label: '计划开工日期', name: '计划开工日期', width: 120, align: 'left', });
     _cols.push({ label: '需求完工日期', name: '需求完工日期', width: 150, align: 'left', });
     _cols.push({ label: '计划完工日期', name: '计划完工日期', width: 150, align: 'left', });
     _cols.push({ label: '', name: '', width: 1, align: 'left' });

        return _cols;
    }


    function GetChose(SelectID)
    {
        var txtProJieDuan = "";
        var Select3 = $("#" + SelectID + " option:selected");
        for (i = 0; i < Select3.length; i++) {
            if (txtProJieDuan == "") {
                txtProJieDuan += Select3[i].innerText;
            }
            else {
                txtProJieDuan += "," + Select3[i].innerText;
            }

        }
        return txtProJieDuan
    }

    function gridList1() {
        document.getElementById("gridPanel1").innerHTML = ' <table id="gridList1"></table>    ';//重置grid
        var _cols = GetAllCols1();
        var $gridList = $("#gridList1");

        var txtProJieDuan = GetChose("txtProJieDuan");
        var txtEQPType = GetChose("txtEQPType");
        var txtStatus = GetChose("txtStatus");
        

        var queryJson = {
            txtProject: $("#txtProject").val(),
            txtEQPType: txtEQPType,
            txtItemStd: $("#txtItemStd").val(),
            txtEQPCode: $("#txtEQPCode").val(),
            txtPlanStartDay: $("#txtPlanStartDay").val(),
            txtMOCode: $("#txtMOCode").val(),
            txtItemCode: $("#txtItemCode").val(),

            txtProJieDuan: txtProJieDuan,
            txtStatus: txtStatus,
            txtPlanEndDay: $("#txtPlanEndDay").val(),
        }
        
  

        $gridList.dataGrid({
            url: "/SRM/WatchPanel/GetGridJson_WIPJinDu?" + Math.random(),
             postData: { queryJson:JSON.stringify(queryJson) },
            height: $("#form1").height() - HeightToDel,
            colModel: _cols,
           // caption: '生产进度汇总表',
           // sortname: "   ",
            rowNum: 5000,
            viewrecords: true,
            rownumbers: true,
            multiselect: false,
            gridComplete: function () {
                $("#gridList1").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center', 'vertical-align': 'middle' }, '');
                var strIds = $("#gridList1").jqGrid("getDataIDs");

                for (var i = 0; i < strIds.length; i++) {
                    var ID = $("#gridList1").jqGrid("getCell", strIds[i], "ID");
                    var QTY = $("#gridList1").jqGrid("getCell", strIds[i], "项目进度条值");
                    //var COLORSTR = $("#gridList1").jqGrid("getCell", strIds[i], "COLORSTR");
                    var Status = $("#gridList1").jqGrid("getCell", strIds[i], "状态");
                    JDPictureSet("JDText_" + ID, QTY,  Status);
                }

            },


        });

        //$('#gridList1').jqGrid('filterToolbar', {
        //    //defaultSearch: 'cn', stringResult: true, searchOnEnter: false, searchOperators: true, groupOp:"AND",
        //    searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND"
        //});
      
 

    }

    function ReSetCSS()
    {
        //设置表头筛选内容
        var tablewidth = $(".ui-jqgrid-labels").width();
        $("#ShaiXuan").css("width", tablewidth);
        if (tablewidth < 1568) {
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	1	) {   width:	1.786%;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	2	) {   width:	6.378%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	3	) {   width:	6.378%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	4	) {   width:	14.6682%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	5	) {   width:	10.842%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	6	) {   width:	7.015%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	7	) {   width:	7.653%;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	8	) {   width:	9.566%;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	9	) {   width:	11.480%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	10	) {   width:	7.015%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	11	) {   width:	7.653%;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	12	) {   width:	9.566%;   } ');
        }
        else {
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	1	) {   width:	28px;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	2	) {   width:	100px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	3	) {   width:	100px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	4	) {   width:	230px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	5	) {   width:	170px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	6	) {   width:	110px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	7	) {   width:	120px;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	8	) {   width:	150px;   }  ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	9	) {   width:	180px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	10	) {   width:	110px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	11	) {   width:	120px;   } ');
            addNewStyle(' #ShaiXuan tbody tr td:nth-child(	12	) {   width:	150px;   } ');
        }

    }

    //加载所有DB选项
    function GetALLSelectData() { 
        GetProjectJD();
        GetEQPType();
        GetStatus();

    }
    //项目阶段
    function GetProjectJD()
    {
        $.ajax({
            url: "/SRM/WatchPanel/GetProjectJD?" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != false && data != null && data.length > 0) {
                    $("#txtProJieDuan").find("option").remove();
                    $("#txtProJieDuan").append("<option value=''></option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#txtProJieDuan").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>");
                    }

                }
                $('#txtProJieDuan').selectpicker('refresh');
                $('#txtProJieDuan').selectpicker('render');
            }
        });
    }

    //设备类型
    function GetEQPType()
    {
       
        $.ajax({
            url: "/SRM/WatchPanel/GetEQPType?" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != false && data != null && data.length > 0) {
                    $("#txtEQPType").find("option").remove();
                    $("#txtEQPType").append("<option value=''></option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#txtEQPType").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>");
                    }

                }
                $('#txtEQPType').selectpicker('refresh');
                $('#txtEQPType').selectpicker('render');
            }
        });

    }

    //状态
    function GetStatus()
    {
        $.ajax({
            url: "/SRM/WatchPanel/GetStatus?" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != false && data != null && data.length > 0) {
                    $("#txtStatus").find("option").remove();
                    $("#txtStatus").append("<option value=''></option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#txtStatus").append("<option value='" + data[i].NAME + "'>" + data[i].NAME + "</option>");
                    }

                }
                $('#txtStatus').selectpicker('refresh');
                $('#txtStatus').selectpicker('render');
            }
        });
    }

    function addNewStyle(newStyle)
    {
        var styleElement = document.getElementById('styles_js');
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.type = 'text/css'; styleElement.id = 'styles_js';
            document.getElementsByTagName('head')[0].appendChild(styleElement);
        } styleElement.appendChild(document.createTextNode(newStyle));
    }

    function JDPictureSet(JDDivID, JDQty, Status) {
        var myChart = echarts.init(document.getElementById(JDDivID));
        var Colorfont = "black";
        var Color = "white";
        if (Status == "紧急") {
            Color = "yellow";//黄色 
        }
        if (Status == "完成") {
            Color = "#42f943";//绿色  
        }
        if (Status == "延期") {
            Color = "red";//红色
            Colorfont = "white";
        }
        if (JDQty == 0) {
            Colorfont = Color;
        }

        myChart.setOption({        //加载数据图表

            title: {
                show: false,
            },
            tooltip: {
                show: false,
            },
            legend: { show: false, },
            grid: { show: false, },
            xAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                max: 100,
                min: 0,
            },
            yAxis: {
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false },
                type: 'category',
            },
            series: [
              {
                  type: 'bar',
                  data: [JDQty],
                  label: {
                      show: true,
                      formatter: '{c}%',
                      color: Colorfont
                  },
                  itemStyle: {
                      color: Color,
                  }
              }
            ]
        });

    }

    function getTime() {
        var days = new Array("日", "一", "二", "三", "四", "五", "六");
        var currentDT = new Date();
        var y, m, date, day, hs, ms, ss, theDateStr;
        y = currentDT.getFullYear(); //四位整数表示的年份
        m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
        date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
        day = currentDT.getDay(); //星期
        hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
        ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
        ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
        theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
        //填充到组件中
        $("#timeStr").text(theDateStr);
        // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
        window.setTimeout(getTime, 1000);
    }

    function ChangeStartEnd()
    {
        var textTT=$("#IsStartEnd").text();
        if (textTT == "暂停滚动") {
            timer = window.clearInterval(timer);//停止滚动
            $("#IsStartEnd").text("开始滚动");
        }
        else {
            timer = setInterval(function () {
                scrollBody_act();
            }, GunDongRate);
            $("#IsStartEnd").text("暂停滚动");
        }
    }


    function ChangeShaiXuan_input() {
        if (event.keyCode == 13) {
            gridList1();
        }
    }

    function ChangeShaiXuan_inputTime() { 
            gridList1(); 
    }

    
  

    function btn_ExportAll() {


        var txtProject = $("#txtProject").val();
        var txtEQPType = GetChose("txtEQPType");
        var txtItemStd = $("#txtItemStd").val();
        var txtEQPCode = $("#txtEQPCode").val();
        var txtPlanStartDay = $("#txtPlanStartDay").val();
        var txtMOCode = $("#txtMOCode").val();
        var txtItemCode = $("#txtItemCode").val();
        var txtProJieDuan = GetChose("txtProJieDuan");
        var txtStatus = GetChose("txtStatus"); 
        var txtPlanEndDay = $("#txtPlanEndDay").val();
         

        var data = "&txtProject=" + txtProject + "&txtEQPType=" + txtEQPType + "&txtItemStd=" + txtItemStd +
            "&txtEQPCode=" + txtEQPCode + "&txtPlanStartDay=" + txtPlanStartDay + "&txtMOCode=" + txtMOCode +
             "&txtItemCode=" + txtItemCode + "&txtProJieDuan=" + txtProJieDuan + "&txtStatus=" + txtStatus +
             "&txtPlanEndDay=" + txtPlanEndDay;
        $.download("/SRM/WatchPanel/ExportAll?" + Math.random(), data, 'post');
    }
</script>



<form id="form1">
    <div class="formdiv">



        <table class="form">
            <tr class="topRow">
                <td style="text-align:right;width:18%">
                    <label class="radio-inline" id="logolabel">
                        <img src="~/Content/img/Panellogo.png" border="0" class="logoclass" />
                    </label>
                </td>
                <td style="width:22%">
                    <div class="TopNamelogo" id="TopNamelogo">利穗科技</div>
                </td>
                <td style="width:20%">
                    <div class="TopName" id="TopName">生产进度看板</div>
                </td>
                <td style="width:8%">
                    <a href="PanelWIPDetail" style="float:right;color:antiquewhite;font-size:18px" class="btn btn-primary">切换</a>
                </td>
                <td style="width:8%">
                    <a id="IsOut" href="#" style="float:right;color:antiquewhite;font-size:18px" class="btn btn-primary" onclick="btn_ExportAll()">导出</a>
                </td>
                <td style="width:8%">
                    <a id="IsStartEnd" href="#" onclick="ChangeStartEnd()" class="btn btn-primary" style="float:right;color:antiquewhite; font-size:18px">开始滚动</a>
                </td>
                <td style="width:16%">
                    <div class="time" id="timeStr"></div>
                </td>
            </tr>


            <tr style="width:100%;height:100%;" id="Tr_ShaiXuan">
                <td colspan="7"  class="ToptdClass">
                    <div class="gridPanel">
                        <table id="ShaiXuan">
                            <tr>
                                <td  >  </td>
                                <td  >
                                    <input id="txtProject" class="form-control" name="txtItemStd" type="text" onkeypress="ChangeShaiXuan_input()"/>
                                </td>
                                <td ><select id="txtEQPType" name="txtEQPType" class="selectpicker" data-width="70px" 
                                             title="" onchange="ChangeShaiXuan_inputTime()" multiple="multiple"
                                              data-live-search="true" ></select></td>
                                <td  ><input id="txtItemStd" class="form-control" name="txtItemStd" type="text" onkeypress="ChangeShaiXuan_input()"/>   </td>
                                <td  ><input id="txtEQPCode" class="form-control" name="txtEQPCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td>
                                <td  ><input id="txtPlanStartDay" class="form-control" name="txtPlanStartDay" type="text"  
                                               onkeypress="ChangeShaiXuan_input()"/> </td>
                                <td ><input id="txtMOCode" class="form-control" name="txtMOCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td>
                                <td ><input id="txtItemCode" class="form-control" name="txtItemCode" type="text" onkeypress="ChangeShaiXuan_input()"/> </td>
                                <td  ><select id="txtProJieDuan" name="txtProJieDuan" class="selectpicker" data-width="120px" title="" 
                                              onchange="ChangeShaiXuan_inputTime()" multiple="multiple" data-live-search="true"></select></td>
                                <td  ><select id="txtStatus" name="txtStatus" class="selectpicker" data-width="80px" 
                                              title="" onchange="ChangeShaiXuan_inputTime()" multiple="multiple"
                                              data-live-search="true" ></select></td>
                                <td  ><input id="txtPlanEndDay" class="form-control" name="txtPlanEndDay" type="text" 
                                               onkeypress="ChangeShaiXuan_input()"/> </td>
                                <td  style="width:auto" >  </td>
                            </tr>
                        </table>
                    </div>
                </td>

            </tr>

            <tr style="width:100%;height:100%;">
                <td colspan="7" class="ToptdClass">
                    <div class="gridPanel" id="gridPanel1">
                        <table id="gridList1"></table>

                    </div>
                </td>

            </tr>

        </table>

    </div>

</form>