NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/DMAManage/Views/DifferenceAnalysis/Index.cshtml

@{
    ViewBag.Title = "DMA差量分析";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<script>
    "use strict"
    var selectMonth = "@DateTime.Now.ToString("yyyy-MM")";
    $(document).ready(function () {
        InitialPage();
        GetTree();
        Click();
    });

    //初始化页面
    function InitialPage() {
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize();
            }
        });
        // resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $("#pointGridTable").setGridWidth(($('.gridPanel').width()));
                $("#pointGridTable").setGridHeight($(window).height() - 160);
                $("#itemTree").setTreeHeight($(window).height() - 52);
            }, 200);
            e.stopPropagation();
        });
    }
    //加载树
    var PointTreeCode = 0;
    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "/DMAManage/Partitions/GetTreeJson",
            showcheck: false,
            isexpand: true,
            onnodeclick: function (item) {
                PointTreeCode = item.value;
                var startDate = $("#PointStartTime").val();
                var endDate = $("#PointEndTime").val();
                $("#pointGridTable").jqGrid('GridUnload');
                LoadColModel(startDate, endDate, item.value);
            }
        };

        //初始化
        $("#itemTree").treeview(item);
    }

    // 获取列数据
    function LoadColModel(startDate, endDate, DMAID) {
        $.ajax({
            type: "POST",
            async: false,
            url: "/DMAManage/DifferenceAnalysis/GetColModel",
            dataType: "json",
            data: { DMAID: DMAID },
            success: function (data) {
                GetGrid(data, startDate, endDate, DMAID);
            },
            error: function (xhr, status, error) {
            }

        });
    }

    // 渲染列表
    function GetGrid(data, startDate, endDate, DMAID) {
        $("#pointGridTable").jqGrid('GridUnload');
        $("#pointGridTable").jqGrid({
            url: "/DMAManage/DifferenceAnalysis/GetDifferenceAnalysis",
            datatype: "json",
            postData: { startDate: startDate, endDate: endDate, DMAID: DMAID },
            height: $(window).height() - 170,
            colModel: data,
            rownumbers: true,
            viewrecords: true,
            rowNum: 1000,
            gridview: true,
            footerrow: true,
            gridComplete: function () {
                GridHeadSetting(data);
                GridFooterSetting(data);
            },
            loadError: function (xhr, status, error) {
            }
        });

    }
    // 设置标题头
    function GridHeadSetting(data) {
        var inStartName = "";
        var outStartName = "";
        var inColNum = 0;
        var outColNum = 0;
        for (var i = 1; i < data.length; i++) {
            if (data[i].name === "InAll") {
                break;
            } else {
                if (i === 1) {
                    inStartName = data[i].name;
                }
                inColNum++;
            }
        }
        inColNum++;
        for (var i = inColNum; i < data.length; i++) {
            if (data[i].name === "OutAll") {
                break;
            } else {
                if (i === inColNum) {
                    outStartName = data[i].name;
                }
                outColNum++;
            }
        }
        outColNum++;
        $("#pointGridTable").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                { startColumnName: inStartName, numberOfColumns: inColNum, titleText: '入口表' },
                { startColumnName: outStartName, numberOfColumns: outColNum, titleText: '出口表' }
            ]
        })
    }
    // 设置合计
    function GridFooterSetting(data) {
        $("#pointGridTable").footerData('set', {
            "GetDateTime": '合计',
            InAll: $("#pointGridTable").getCol('InAll', false, 'sum').toFixed(2),
            OutAll: $("#pointGridTable").getCol('OutAll', false, 'sum').toFixed(2)
        });
    }

    // 查询数据
    function searchData() {
        var nodes = $("#itemTree").getTSNs(true);//获取所有勾选节点包括半勾选
        var devnodes = "";
        $.each(nodes, function (i, value) {
            var value = value.value;
            devnodes += (value + ",");
        });
        devnodes = devnodes.substr(0, devnodes.length - 1);
        selectMonth = $("#report_month").val();
        $("#pointGridTable").jqGrid('setGridParam', {
            postData: { DMAIDs: devnodes, selectMonth: selectMonth, isAll: false },
            page: 1
        }).trigger('reloadGrid');
    }
    // 点击事件
    function Click() {
        //点击时间范围（今天、近7天、近一个月、近三个月）
        $("#time_horizon a.btn-default").click(function () {
            $("#time_horizon a.btn-default").removeClass("active");
            $(this).addClass("active");
            switch ($(this).attr('data-value')) {
                case "2"://近7天
                    $("#PointStartTime").val("@DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd")");
                    $("#PointEndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "3"://近一个月
                    $("#PointStartTime").val("@DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd")");
                    $("#PointEndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "4"://自定义
                    $("#PointStartTime").val("");
                    $("#PointEndTime").val("");
                    break;
                default:
                    break;
            }
        })
    }
    // 查询事件
    function GetDatas() {
        var startDate = $("#PointStartTime").val();
        var endDate = $("#PointEndTime").val();
        $("#pointGridTable").jqGrid('GridUnload');
        LoadColModel(startDate, endDate, PointTreeCode);
    }
</script>
<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div class="west-Panel">
            <div class="panel-Title">测点列表</div>
            <div id="itemTree"></div>
        </div>
       
    </div>
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div id="tabs">
                <div id="tabs-1">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td style="padding-left: 10px; display: none">测点名称：
                                    </td>
                                    <td style="padding-left: 10px; display:none">
                                        <input type="text" id="device" name="device" class="form-control" style="width: 130px;" />
                                    </td>
                                    <td style="padding-left: 10px;">开始时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="PointStartTime" readonly type="text"  value="@LeaRun.Util.Time.GetDate(-7)" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'PointEndTime\')}'})" style="width:175px">
                                    </td>
                                    <td style="padding-left: 10px;">结束时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="PointEndTime"  readonly type="text"  value="@LeaRun.Util.Time.GetToday()" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'PointStartTime\')}'})" style="width:175px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <div id="time_horizon" class="btn-group">
                                            <a class="btn btn-default active" data-value="2">近7天</a>
                                            <a class="btn btn-default" data-value="3">近1个月</a>
                                            <a class="btn btn-default" data-value="4">自定义</a>
                                        </div>
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <a id="btn_point_Search" class="btn btn-primary" onclick="GetDatas()">&nbsp;查&nbsp;&nbsp;询</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="toolbar">
                            <div class="btn-group">
                                <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                                <a id="lr-export" class="btn btn-default" onclick="btn_point_export()"><i class="fa fa-sign-out"></i>&nbsp;导出</a>
                            </div>
                        </div>
                    </div>
                    <div class="gridPanel" id="gridpanel" style="width: 0px">
                        <table id="pointGridTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>