OMAY_WMS/KanBan/NFine.Web/Areas/SystemManage/Views/CommonReport/WatchPanel2.cshtml

@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/Content/css/CommonReport/CommonReport.css" rel="stylesheet" />
<script src="~/Content/js/CommonReport/CommonReport.js"></script>
 
<style>
    /*.layui-layer-title {
        display:none !important;
    }
    .theme-blue-gradient .layui-layer-title
    {
        display:none !important;
    }*/
    .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
        overflow:hidden;
    }
    .DropMenu {
        position: absolute;
        display: block;
        top: 5px;
        right: 10px;
        opacity: 0.3;
        z-index: 888;
    }
    .DropMenuHidden {
        position: absolute;
        display: none;
        top: 5px;
        right: 10px;
        opacity: 0.2;
        z-index: 1;
    }
    .HiddenDiv {
        position: absolute;
        display: none;
        top: 5px;
        right: 10px;
        opacity: 0;
        z-index:1;
    }
    .ShowDiv {
        position: absolute;
        display: block;
        top: 5px;
        right: 10px;
        opacity: 1;
        background: #1abc9c;
        border: 2px solid #1abc9c;
        text-align:center;
        width:200px;
        z-index: 888;
    }
    .PanelTop {
        background-color:black;
        height:70px;
    }
    .logoclass {
          margin-top:4px;
        height:55px;
        width:100%;
    }
    .TopName {
      
        vertical-align:middle;
        text-align:center; 
        font-size: 32px; 
    color: white;
    font-weight: 700;
    }
  html, body,form {
       height: 100% !important;  
       }
    body {
         --CustTitlecolor: #4D5457;/*表标题颜色*/ /*#4D5457 #000000bf*/
          --Custbackgroundcolor: #4D5457; /*表整体颜色*/ 
           --CustSelect: #475059;  /*选中颜色*//*悬浮颜色*/
           --Custcolor: white;/*字体颜色*/
            --CustBorderColor: #3a3e43;/*边框颜色*/
             --CustRow1: #4D5457;/*偶行颜色*/
              --CustRow2: #646C72;/*奇行颜色*/
    }
     .time {
        
         vertical-align:middle;
        text-align:center;
        font-size:26px;
    }
       /*整个form外围*/
     form  {
           
          background-color: #646C72;
          color:white;
    }
     
     /*表标题颜色*/
    .table > thead:first-child > tr:first-child > th {
         background-color: var(--CustTitlecolor) ;
         color:var(--Custcolor);
    }
      /*表整体颜色*/
     .ui-jqgrid {
          background-color: var(--Custbackgroundcolor);
         color:var(--Custcolor);
        border: 1px solid  var(--CustBorderColor);
        
    }
        .ui-jqgrid .table-bordered td {
             border: 0.5px solid  var(--CustBorderColor);
             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);
    }
    /*偶行颜色*/
    tr:nth-child(2n) {
        background-color: var(--CustRow1);
        color:white;
    }
    /*奇行颜色*/
    tr:nth-child(2n+1) {
        background-color:var(--CustRow2);
        color:white;
    }
     
</style>
<script>
   

    var _MenuID = "";//菜单ID
    var _SourceID = "";//数据源ID
    var _sqlTxt = "";//加上参数的sql
    var _sqlTxt_Condition = new Array();
    var _sqlTxt_AddCondition = "";//加上过滤条件的sql
    var _IsExistsDataSource = "";
    var _DBName = "";//s数据库
    var _Cols = new Array();//列
    var _ReportName = "";
    var _TempName = "";
    var _Filter = "";
    var _footerrow = false;//是否有合计项
    var _footercols = new Array();//合计项
    var _formatcols = new Array();//个性化项
    var _formatcols_Row = new Array();//个性化项的行
    var _Mergercols = new Array();//合并项
    var timer;
    var timer2;//刷新数据时间
    var GunDongRate = 10000;
    var GunDongRow = 0;
    var DataF = 15*60;
    // var CurrentscrollTop = 0;
    var IsFirstShow = false;

    $(function () {
        //fullScreen();

         //隐藏头部份
        //var cc = top.$(".layui-layer-title")[0];
        //cc.style.display = "none";

        //显示时间
        getTime();
       
        _MenuID = $.request("_MenuID");
        _TempName = $.request("TempName");
        GetMenu();
        _sqlTxt_AddCondition = _sqlTxt;
        var _sqlTxt_ConditionStr = $.request("_sqlTxt_Condition");
        if (_sqlTxt_ConditionStr != undefined && _sqlTxt_ConditionStr != "") {
            var data;
            _sqlTxt_Condition = eval("data=" + _sqlTxt_ConditionStr);
           
          
            if (_sqlTxt_Condition != undefined && _sqlTxt_Condition.length > 0) {
               
                for (var i = 0; i < _sqlTxt_Condition.length; i++) {
                    _sqlTxt_AddCondition = ReplaceALL(_sqlTxt_AddCondition, _sqlTxt_Condition[i].CIndex, _sqlTxt_Condition[i].Content);
                }
            }
        }
        gridList();
   
        $(window).resize(function () {

            $("#gridListW").setGridWidth($(window).width() * 0.99);
            $("#gridListW").setGridWidth(document.body.clientWidth * 0.99);
            $("#gridListW").setGridHeight($(window).height() - 132);
            $("#gridListW").setGridHeight(document.body.clientHeight - 132);
            GunDongRow = 0;
            
        });

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

        $('#gridListW').mouseover(function () {//添加over事件，停止滚动
            timer = window.clearInterval(timer);
        });
        $('#gridListW').mouseout(function (e) {//添加mouseout事件，继续滚动

            scrollBody();
        });
    });
   
    //自动滚动
    function scrollBody() {


        timer = setInterval(function () {
            var ob3 = $('#gridListW').getGridParam("records");
            var div = $('#gridListW').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);
            }
            
            // 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;}

        }, GunDongRate);

    }
   



    //end 自动滚动

    function GetMenu() {

        $.ajax({
            url: "/SystemManage/CommonReport/GetMenu?MenuID=" + _MenuID + "&" + Math.random(),
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != false && data != null) {
                    _sqlTxt = data.sqlTxt;
                  //  _sqlTxt_AddCondition = data.sqlTxt;
                    _DBName = data.DBName;
                    _SourceID = data.SourceID;
                    _IsExistsDataSource = data.IsExistsDataSource;
                    _ReportName = data.ReportName;
                    _Mergercols = eval(data.Mergercols);
                    _formatcols = data.formatcols;
                    _footerrow = data.footerrow;
                    _footercols = eval(data.footercols);
                    _Cols = SetCols(eval(data.Cols));
                    

                }
                else {
                    alert("获取菜单栏位等信息异常。" + data);
                }
            },
            error: function (aa) {
                alert("异常：" + aa.responseText);

            }
        });
    }


    function SetCols(datacols) {
        var cols = new Array();
        if (datacols != null && datacols.length > 0) {
            for (var i = 0; i < datacols.length; i++) {
                var ColCaption = datacols[i].ColCaption;
                var ColFiledName = datacols[i].ColFiledName;
                var DataType = datacols[i].DataType;
                var DataTypeStr = GetDataTypeByNum(DataType);
                var ColWidth = datacols[i].ColWidth;
                var DeciamlNum = datacols[i].DeciamlNum;
                var sortable = datacols[i].sortable;
                var ColMerFlag = datacols[i].ColMerFlag;
                var IsFormat = datacols[i].IsFormat;
                var obj = new Array();
                if (IsFormat == "1") {
                    obj = {
                        label: ColCaption,
                        name: ColFiledName,
                        width: ColWidth,
                        align: "left",
                        sortable: sortable,
                        cellattr: addCellAttr,
                    }
                }
                else {
                    obj = {
                        label: ColCaption,
                        name: ColFiledName,
                        width: ColWidth,
                        align: "left",
                        sortable: sortable,
                        cellattr: addCellAttr_ID,
                    }
                }

                switch (DataTypeStr) {

                    case "数值型":
                        var Formatoptions = new { decimalPlaces: DeciamlNum };
                        obj.push({ formatter: "number" });
                        obj.push({ formatoptions: Formatoptions });

                        break;
                    case "字符型":
                    case "日期型":
                    case "布尔值":

                        break;

                }
                //if (IsFormat) {

                //    obj.push({ cellattr: addCellAttr });
                //}



                cols.push(obj);
            }

            var collast = { label: "", name: "", width: "20", align: "left", sortable: false };
            cols.push(collast);
        }
        return cols;
    }

    function Getformatcol(formatcols, colname) {
        var formatList = new Array();
        if (formatcols != null && formatcols.length > 0) {
            for (var i = 0; i < formatcols.length; i++) {
                if (formatcols[i].ColFiledName == colname) {
                    formatList.push(formatcols[i]);
                }
            }
        }

        return formatList;
    }

    //个性化栏位背景色
    function addCellAttr(rowId, val, rawObject, cm, rdata) {
        var rr = ' id=\'' + cm.name + '' + rowId + "\' ";
        var formatList = Getformatcol(_formatcols, cm.name);//获取format所有条件
        if (formatList != null && formatList.length > 0) {
            for (var i = 0; i < formatList.length; i++) {
                var formatcol = formatList[i];//条件
                var IsRow = false;
                if (formatcol.AllRowFlag) {
                    IsRow = true;
                    var rr = {
                        rowid: rowId - 1,
                        backgroundcolor: formatcol.Color,
                    }
                }

                var LogStr = GetLogStringByNum(parseInt(formatcol.LogStr));

                switch (LogStr) {
                    case "等于": if (val == formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "不等于": if (val != formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "小于": if (val < formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "大于": if (val > formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "小于等于": if (val <= formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "大于等于": if (val >= formatcol.SValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "范围内": if (val >= formatcol.SValue && val <= formatcol.DValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "范围外": if (val < formatcol.SValue || val > formatcol.DValue) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "包含": if (val.indexOf(formatcol.SValue) != -1) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "头部包含": if (val.indexOf(formatcol.SValue) == 0) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "尾部包含": if (val.indexOf(formatcol.SValue) == formatcol.length - val.length) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;
                    case "不包含": if (val.indexOf(formatcol.SValue) == -1) {
                        if (IsRow) { _formatcols_Row.push(rr); }
                        else { rr += "style='background-color:" + formatcol.Color + "'"; return rr; }
                    }
                        break;


                }


            }
        }
        return rr;
    }

    //个性化栏位背景色
    function addCellAttr_ID(rowId, val, rawObject, cm, rdata) {
        var rr = ' id=\'' + cm.name + '' + rowId + "\' ";

        return rr;
    }

    function gridList() {
        //IsFirstShow = true;
        document.getElementById("gridPanel").innerHTML = ' <table id="gridListW"></table>    <div id="gridPager"></div>';//重置grid
        _formatcols_Row = new Array();
        var $gridList = $("#gridListW");

        $gridList.dataGrid({
            url: "/SystemManage/CommonReport/GetGridJson",
            height: $(window).height() - 132,
            postData: { sqlTxt: _sqlTxt_AddCondition, DBName: _DBName, TempName: _TempName },
            colModel: _Cols,
            //pager: "#gridPager",
            viewrecords: true,
            multiselect: false,
            rowNum: 5000,
            scroll: true,
            //altRows: true,
            //altclass: "ui-priority-secondary",
            jsonReader: {
                repeatitems: true,
                id: "0"
            },
            footerrow: _footerrow,
            gridComplete: function () {
                //$("#gridListW tr:odd").css("background-color", "#e6e6fa");
                //$("#gridListW tr:even").css("background-color", "#fff0fa");
                var strIds = $("#gridListW").jqGrid("getDataIDs");


                if (_formatcols_Row.length > 0) {
                    for (var i = 0; i < _formatcols_Row.length; i++) {
                        $("#" + strIds[_formatcols_Row[i].rowid] + " td").css("background-color", _formatcols_Row[i].backgroundcolor);
                    }
                }
             

                //合并行
                if (_Mergercols != undefined && _Mergercols.length > 0) {
                    for (var i = 0; i < _Mergercols.length; i++) {
                        Merger("gridListW", _Mergercols[i]);
                    }
                }


                //合计
                if (_footerrow == "True") {
                    var footerData = {};
                    for (var i = 0; i < _footercols.length; i++) {
                        var total = 0;

                        for (var j = 0; j < strIds.length; j++) {
                            var qty = $("#gridListW").jqGrid("getCell", strIds[j], _footercols[i]);
                            if (qty != "") {
                                total += parseInt(qty);
                            }
                        }

                        footerData[_footercols[i]] = total;

                    }
                    $("#gridListW").footerData('set', footerData);
                    $("#gridListW").footerData('set', { "rn": "合计" });
                }
 
               
            },
            loadError: function (data) {
                alert("异常：");
            }

        });
        
    }

    function btn_SetOther() {
        $("#SetDivMenu").removeClass("DropMenu");
        $("#SetDivMenu").addClass("DropMenuHidden");
        $("#GRate").val(GunDongRate / 1000);
        $("#GHang").val(GunDongRow);
        $("#DataFalsh").val(DataF);
        $("#SetDiv").removeClass("HiddenDiv");
        $("#SetDiv").addClass("ShowDiv");
    }  
   
    function btn_SetOtherOK()
    {
       // var dd = document.getElementById("SetDiv");
        var rrate = $("#GRate").val();
        var rhang = $("#GHang").val();
        var DataFalsh = $("#DataFalsh").val();
        GunDongRate = Number(rrate) * 1000;
        GunDongRow = Number(rhang);
        DataF = Number(DataFalsh);
        $("#SetDiv").removeClass("ShowDiv");
        $("#SetDiv").addClass("HiddenDiv");
        $("#SetDivMenu").removeClass("DropMenuHidden");
        $("#SetDivMenu").addClass("DropMenu");


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

    function btn_SetOtherNO()
    {
        $("#SetDiv").removeClass("ShowDiv");
        $("#SetDiv").addClass("HiddenDiv");
        $("#SetDivMenu").removeClass("DropMenuHidden");
        $("#SetDivMenu").addClass("DropMenu");
    }

    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);
    }
 

</script>

<form id="form1">
    <div>
        <table class="form PanelTop">
            <tr>
                <td>
                    <label class="radio-inline">
                        <img src="~/Content/img/Panellogo.png" border="0" class="logoclass" />
                    </label>
                </td>
                <td>
                    <div class="TopName" id="TopName">看板标题</div>
                </td>
                <td>
                    <div class="time" id="timeStr"></div>
                </td>
            </tr>
        </table>

        <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">

            <div class="gridPanel" id="gridPanel">
                <table id="gridListW"></table>
                @*<div id="gridPager"></div>*@
            </div>

        </div>
        <div class="DropMenu" id="SetDivMenu">
            <a id="NF-SetOther" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_SetOther()"><i class="fa fa-caret-down"></i></a>
        </div>
        <div class="HiddenDiv" id="SetDiv">
            <table class="form">
                <tr>
                    <th class="formTitle">数据刷新（秒）：</th>
                    <td>
                        <input class="form-control" name="DataFalsh" id="DataFalsh" style="width: 50px" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">滚动时间（秒）：</th>
                    <td>
                        <input class="form-control" name="GRate" id="GRate" style="width: 50px" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">滚动行数：</th>
                    <td>
                        <input class="form-control" name="GHang" id="GHang" style="width: 50px" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_SetOtherNO()"><i class="fa fa-close"></i></a>

                        <a authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_SetOtherOK()"><i class="fa fa-check"></i></a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>