NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/PipeNetworkManage/Views/Statistical/WaterAnalysis.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<script src="~/Content/scripts/utils/learun-ui.js"></script>

<script>
    var checkedIds = [];
    $(function () {
        InitialPage();
        GetTree();
        GetMonthGrid();
        GetYearGrid();
        //deviceDay.init();
        //deviceYear.init();
    });

    //初始化页面
    function InitialPage() {
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize();
            }
        });
        //resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $("#itemTree").setTreeHeight($(window).height() - 52);
                $('#yearGridTable').setGridWidth(($('.gridPanel').width()));
            }, 200);
            e.stopPropagation();
        });
        $("#tabs").tabs({

        });
    }

    function getSelectedTabIndex() {
        return $("#tabs").tabs('option', 'active');
    }

    //被选中元素的ID,TEXT 数组维护
    function GetAllCheckNodes(id, status, text) {
        //数据加入数组
        if (status == 1) {
            if (!checkedIds.contain(id)) {
                checkedIds.push(id);
            }
        }

        if (status == 0) {
            if (checkedIds.contain(id)) {
                checkedIds.splice(checkedIds.indexOf(id), 1);
            }
        }
    }

    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "/PipeNetworkManage/Meter/GetMeterTreeJson?showCheck=true",           
            oncheckboxclick: function (item, status) {
                GetAllCheckNodes(item.id, status, item.text);//维护 选中元素id的数组
            }
        };
        //初始化
        $("#itemTree").treeview(item);
    }

    //AutoComplete
    var deviceDay = {
        init: function () {
            $('#deviceDay').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/IPm/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#deviceDay').val() },
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                console.log(item);
                                return {
                                    label: item.label,
                                    value: "dev" + item.value
                                }
                            }));
                        }
                    });
                },
                select: function (event, ui) {
                    DepartmentId = "";
                    TypeID = "";
                    DeviceID = "";
                    $("#deviceDay").val(ui.item.label);
                    DeviceID = ui.item.value.substring(3);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    var deviceYear = {
        init: function () {
            $('#deviceYear').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/IPm/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#deviceYear').val() },
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                console.log(item);
                                return {
                                    label: item.label,
                                    value: "dev" + item.value
                                }
                            }));
                        }
                    });
                },
                select: function (event, ui) {
                    DepartmentId = "";
                    TypeID = "";
                    DeviceID = "";
                    $("#deviceYear").val(ui.item.label);
                    DeviceID = ui.item.value.substring(3);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    function GetMonthGrid() {
        var $gridTable = $('#monthGridTable');
        $gridTable.jqGrid({
            url: "/PipeNetworkManage/Statistical/GetMonthReport",
            datatype: "json",
           
            height: $(window).height() - 200,
            rownumbers: true,
            colModel: [
                { name: "DevName", label: "测点名称", width: 160, align: "center" },
                { name: "Day1", label: "1日", align: "right", width: 80 },
                { name: "Day2", label: "2日", align: "right", width: 80 },
                { name: "Day3", label: "3日", align: "right", width: 80 },
                { name: "Day4", label: "4日", align: "right", width: 80 },
                { name: "Day5", label: "5日", align: "right", width: 80 },
                { name: "Day6", label: "6日", align: "right", width: 80 },
                { name: "Day7", label: "7日", align: "right", width: 80 },
                { name: "Day8", label: "8日", align: "right", width: 80 },
                { name: "Day9", label: "9日", align: "right", width: 80 },
                { name: "Day10", label: "10日", align: "right", width: 80 },
                { name: "Day11", label: "11日", align: "right", width: 80 },
                { name: "Day12", label: "12日", align: "right", width: 80 },
                { name: "Day13", label: "13日", align: "right", width: 80 },
                { name: "Day14", label: "14日", align: "right", width: 80 },
                { name: "Day15", label: "15日", align: "right", width: 80 },
                { name: "Day16", label: "16日", align: "right", width: 80 },
                { name: "Day17", label: "17日", align: "right", width: 80 },
                { name: "Day18", label: "18日", align: "right", width: 80 },
                { name: "Day19", label: "19日", align: "right", width: 80 },
                { name: "Day20", label: "20日", align: "right", width: 80 },
                { name: "Day21", label: "21日", align: "right", width: 80 },
                { name: "Day22", label: "22日", align: "right", width: 80 },
                { name: "Day23", label: "23日", align: "right", width: 80 },
                { name: "Day24", label: "24日", align: "right", width: 80 },
                { name: "Day25", label: "25日", align: "right", width: 80 },
                { name: "Day26", label: "26日", align: "right", width: 80 },
                { name: "Day27", label: "27日", align: "right", width: 80 },
                { name: "Day28", label: "28日", align: "right", width: 80 },
                { name: "Day29", label: "29日", align: "right", width: 80 },
                { name: "Day30", label: "30日", align: "right", width: 80 },
                { name: "Day31", label: "31日", align: "right", width: 80 }
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#monthGridPager",
            gridview: true,
            gridComplete: function () {

            }
        });

        //查询事件
        $("#btn_month_Search").click(function () {
            var monthSelect = $("#monthSelect").val();

            if (checkedIds.length == 0) {
                dialogMsg('请选择测点！', 0);
                return;
            }

            if (monthSelect.length <= 0) {
                dialogMsg('请选择时间！', 0);
                return;
            }

            $gridTable.jqGrid('setGridParam', {
                postData: { DeviceID: checkedIds.toString(), time: monthSelect },
                page: 1
            }).trigger('reloadGrid');

        });
    }

    function GetYearGrid() {
        var $gridTable = $('#yearGridTable');
        //$gridTable.width = $(".gridPanel").width();
        $gridTable.jqGrid({
            url: "/PipeNetworkManage/Statistical/GetYearReport",
            datatype: "json",
            width: $(".gridPanel").width(),
            autowidth: true,
            height: $(window).height() - 200,
            rownumbers: true,
            colModel: [
                { name: "DevName", label: "测点名称", align: "center", frozen: true },
                { name: "Month1", label: "1月", align: "center", width: 120 },
                { name: "Month2", label: "2月", align: "center", width: 120 },
                { name: "Month3", label: "3月", align: "center", width: 120 },
                { name: "Month4", label: "4月", align: "center", width: 120 },
                { name: "Month5", label: "5月", align: "center", width: 120 },
                { name: "Month6", label: "6月", align: "center", width: 120 },
                { name: "Month7", label: "7月", align: "center", width: 120 },
                { name: "Month8", label: "8月", align: "center", width: 120 },
                { name: "Month9", label: "9月", align: "center", width: 120 },
                { name: "Month10", label: "10月", align: "center", width: 120 },
                { name: "Month11", label: "11月", align: "center", width: 120 },
                { name: "Month12", label: "12月", align: "center", width: 120 }
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#yearGridPager",
            gridview: true,
            gridComplete: function () {

            }
        });

        //查询事件
        $("#btn_year_Search").click(function () {
            var yearSelect = $("#yearSelect").val();

            if (checkedIds.length == 0) {
                dialogMsg('请选择测点！', 0);
                return;
            }

            if (yearSelect.length <= 0) {
                dialogMsg('请选择时间！', 0);
                return;
            }

            $gridTable.jqGrid('setGridParam', {
                postData: { DeviceID: checkedIds.toString(), time: yearSelect },
                page: 1
            }).trigger('reloadGrid');

        });
    }



    //导出-月分析
    function btn_month_export() {
        dialogOpen({
            id: "ExcelIExportDialog",
            title: '导出月分析',
            url: '/Utility/ExcelExportForm?gridId=monthGridTable&filename=用水分析日报表',
            width: "500px",
            height: "380px",
            callBack: function (iframeId) {
                top.frames[iframeId].AcceptClick();
            }, btn: ['导出Excel', '关闭']
        });
    }

    //导出-年分析
    function btn_year_export() {
        dialogOpen({
            id: "ExcelIExportDialog",
            title: '导出年分析',
            url: '/Utility/ExcelExportForm?gridId=yearGridTable&filename=用水分析月报表',
            width: "500px",
            height: "380px",
            callBack: function (iframeId) {
                top.frames[iframeId].AcceptClick();
            }, btn: ['导出Excel', '关闭']
        });
    }

</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">
                <ul>
                    <li><a href="#tabs-1">日报统计</a></li>
                    <li><a href="#tabs-2">月报统计</a></li>
                </ul>
                <div id="tabs-1">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    @*<td style="padding-left: 10px;">测点名称：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="text" id="deviceDay" class="form-control easyui-combobox" />
                                    </td>*@
                                    <td style="padding-left: 10px;">统计月份：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="monthSelect" readonly type="text" value="@LeaRun.Util.Time.Now.Year-@LeaRun.Util.Time.Now.Month" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy-MM'})" style="width: 155px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <a id="btn_month_Search" class="btn btn-primary">&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_month_export()"><i class="fa fa-sign-out"></i>&nbsp;导出</a>
                            </div>
                        </div>
                    </div>
                    <div class="gridPanel">
                        <table id="monthGridTable"></table>
                        <div id="monthGridPager"></div>
                    </div>

                </div>
                <div id="tabs-2">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    @*<td style="padding-left: 10px;">测点名称：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="text" id="deviceYear" class="form-control easyui-combobox" />
                                    </td>*@
                                    <td style="padding-left: 10px;">统计月份：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="yearSelect" readonly type="text" value="@LeaRun.Util.Time.Now.Year" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy'})" style="width: 155px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <a id="btn_year_Search" class="btn btn-primary">&nbsp;查&nbsp;&nbsp;询</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="toolbar">
                            <div class="btn-group">
                                <a class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                                <a class="btn btn-default" onclick="btn_year_export()"><i class="fa fa-sign-out"></i>&nbsp;导出</a>
                            </div>
                        </div>
                    </div>
                    <div class="gridPanel">
                        <table id="yearGridTable"></table>
                        <div id="yearGridPager"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>