NWeiWMS/KanBan/NFine.Web/Areas/SystemManage/Views/CommonReport/WatchPanelWhite.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>
    .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: block;
        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;
    }
     body {
        height: 100%;
        /*FONT-SIZE: 20px;*/
    }
     .PanelTop {
       
        height:70px;
    }
    .logoclass {
         
        height:65px;
        width:100%;
    
    }
    .TopName {
      
        vertical-align:middle;
        text-align:center; 
        font-size: 32px;  
    font-weight: 700;
    }
      .time {
        
         vertical-align:middle;
        text-align:center;
        font-size:26px;
    }
      .formdiv  {
            height: 100% !important;  
         margin-bottom:2px;
         margin-top: 10px; margin-left: 10px; margin-right: 10px;
    }

       /*表标题颜色*/
    .table > thead:first-child > tr:first-child > th {
         background-color: #a5c1e8 ;
         /*color:black;*/
    }
</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();

        _MenuID = $.request("_MenuID");
        _TempName = $.request("TempName");
        //显示时间
        getTime();
        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() - 155);
            $("#gridListW").setGridHeight(document.body.clientHeight - 155);
            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;
                    $("#TopName").val(_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() - 155,
            postData: { sqlTxt: _sqlTxt_AddCondition, DBName: _DBName, TempName: _TempName },
            colModel: _Cols,
            pager: "#gridPager",
            viewrecords: true,
            scroll: true,
            //altRows: true,
            //altclass: "ui-priority-secondary",
            jsonReader: {
                repeatitems: true,
                id: "0"
            },
            footerrow: _footerrow,
            gridComplete: function () {
                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 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 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");
    }


</script>

<form id="form1">
    <div class="formdiv">
        <table class="form">
            <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>
    <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>
</form>