NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/PipeNetworkManage/Views/CurvesAnalysis/Index.cshtml

@{
    ViewBag.Title = "曲线分析";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<script src="~/Content/scripts/plugins/echarts/echarts.min.js" type="text/javascript"></script>


<script>
    var dayEchart, monthEchart, yearEchart, nowEchart;

    $(function () {
        InitialPage();
        GetTree();
        $("#tabs").tabs();
        InitialDayEchart();
        GetMonthGrid();
        dayDevice.init();
        InitialMonthEchart();
        monthDevice.init();
        GetDayGrid();
        InitialYearEchart();
        yearDevice.init();
        GetYearGrid();
        InitialNowEchart();
        getNowData();
        nowDevice.init();
    });

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

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

        $('.gridTable').setGridWidth($('.gridPanel').eq(0).width());
        $(".gridTable").setGridHeight($(window).height() - 141);
        $(".echatDiv").height(460);
        $(".echatDiv").width($('.gridPanel').eq(0).width() * 0.98);
    }

    //加载树
    var PointTreeCode = 0;
    function GetTree() {
        var item = {
            height: $(window).height() - 52,
            url: "/PipeNetworkManage/Meter/GetMeterTreeJson",
            onnodeclick: function (item) {
                PointTreeCode = item.id;
                //展开下级
                $(".bbit-tree-selected").children('.bbit-tree-ec-icon').trigger("click");
            },
        };
        //初始化
        $("#itemTree").treeview(item);
    }

    //AutoComplete
    var dayDevice = {
        init: function () {

            var width = $('#dayDevice').width();

            $('#dayDevice').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/PipeNetworkManage/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#dayDevice').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) {
                    $("#dayDevice").val(ui.item.label);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    //AutoComplete
    var monthDevice = {
        init: function () {

            var width = $('#monthDevice').width();

            $('#monthDevice').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/PipeNetworkManage/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#monthDevice').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) {
                    $("#monthDevice").val(ui.item.label);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    //AutoComplete
    var yearDevice = {
        init: function () {

            var width = $('#yearDevice').width();

            $('#yearDevice').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/PipeNetworkManage/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#yearDevice').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) {
                    $("#yearDevice").val(ui.item.label);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    //AutoComplete
    var nowDevice = {
        init: function () {

            var width = $('#nowDevice').width();

            $('#nowDevice').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/PipeNetworkManage/DeviceInfo/GetDeviceBySearch",
                        type: "GET",
                        data: { q: $('#nowDevice').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) {
                    $("#nowDevice").val(ui.item.label);
                    PointTreeCode = ui.item.value;
                    return false;
                }

            });


        }
    };

    //初始化 日用水量  折线图
    function InitialDayEchart() {
        dayEchart = echarts.init(document.getElementById('dayChart'));

        option = {
            title: {
                text: '日用水量分析',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['每时用水', '预测用水'],
                right: 80
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                interval: 0,
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
            },
            yAxis: {
                name: "用水量(m³)",
                type: 'value'
            },
            series: [
                {
                    name: '每时用水',
                    type: 'line',
                    data: []
                },
                {
                    name: '预测用水',
                    type: 'line',
                    data: []
                }
            ]
        };

        dayEchart.setOption(option);

    }

    function GetDayGrid() {
        var $gridTable = $('#dayGridTable');
        $gridTable.jqGrid({
            url: "/PipeNetworkManage/CurvesAnalysis/GetHourFlow",
            datatype: "json",
            autowidth: true,
            height: 160,
            rownumbers: true,
            colModel: [
                { name: "DevName", label: "测点名称", width: 160, align: "center" },
                { name: "LedgerTime", label: "时间", width: 160, align: "center" },
                { name: "HourNetFlow", label: "用水量", width: 160, align: "center" }
            ],
            viewrecords: true,
            rowNum: 1000,
            gridview: true
        });

        //查询事件
        $("#btn_day_Search").click(function () {
            Loading(true);
            var dayTime = $("#dayTime").val();

            if (PointTreeCode==0) {
                dialogMsg('请选择测点！', 0);
                Loading(false);
                return;
            }

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

            var hourData = [];
            var maxHourFlow = 0;
            $.ajax({
                url: '/PipeNetworkManage/CurvesAnalysis/GetHourFlow',
                data: { deviceId: PointTreeCode, time: dayTime },
                cache: false,
                async: false,
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    hourData = d;
                }
            });
            $gridTable.jqGrid('clearGridData');

            $gridTable.jqGrid('setGridParam', {
                datatype: 'local',
                data: hourData
            }).trigger("reloadGrid");

            var hourAvg = [];
            $.ajax({
                url: '/PipeNetworkManage/CurvesAnalysis/GetHourAvgFlow',
                data: { deviceId: PointTreeCode, time: dayTime },
                chache: false,
                async: false,
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    hourAvg = d;
                }
            });

            var dataXY = [];
            var maxHourFlow = 0;
            for (var i = 0; i < hourData.length; i++) {
                if (parseFloat(hourData[i].HourNetFlow) > maxHourFlow) {
                    maxHourFlow = parseFloat(hourData[i].HourNetFlow);
                }

                var tmp = [];

                tmp.push(hourData[i].LedgerTime);
                tmp.push(parseFloat(hourData[i].HourNetFlow));
                dataXY.push(tmp)
            }
            if (hourData.length == 0) {
                for (var i = 0; i < 24; i++) {
                    var tmp = [];
                    tmp.push(i);
                    tmp.push(0);
                    dataXY.push(tmp)
                }
            }
            var dataXY2 = [];
            for (var i = 0; i < 24; i++) {
                if (hourAvg[i] * 1.2 > maxHourFlow) {
                    maxHourFlow = parseFloat(parseFloat(hourAvg[i] * 1.2).toFixed(2));
                }

                var tmp2 = [];
                tmp2.push(i);
                //tmp2.push(parseFloat(parseFloat(hourAvg[i] * 1.2).toFixed(2)));
                tmp2.push(parseFloat(parseFloat(hourAvg[i]).toFixed(2)));
                dataXY2.push(tmp2)
            }

            dayEchart.setOption({
                series: [{
                    name: '每时用水',
                    type: 'line',
                    data: dataXY,
                },
                {
                    name: '预测用水',
                    type: 'line',
                    data: dataXY2
                }]
            });
            Loading(false);

        });

    }

    //初始化 月用水量  折线图
    function InitialMonthEchart() {
        monthChart = echarts.init(document.getElementById('monthChart'));

        option = {
            title: {
                text: '月用水量分析',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['每时用水'],
                right: '8%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0
                },
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
            },
            yAxis: {
                name: "用水量(m³)",
                type: 'value'
            },
            series: [
                {
                    name: '每天用水',
                    type: 'line',
                    stack: '总量',
                    data: []
                }
            ]
        };

        monthChart.setOption(option);
    }

    function GetMonthGrid() {
        var $gridTable = $('#monthGridTable');
        $gridTable.jqGrid({
            url: "",
            datatype: "json",
            autowidth: true,
            height: 160,
            rownumbers: true,
            colModel: [
                { name: "DevName", label: "测点名称", width: 160, align: "center" },
                { name: "LedgerTime", label: "时间", width: 160, align: "center" },
                { name: "HourNetFlow", label: "用水量", width: 160, align: "center" }
            ],
            viewrecords: true,
            rowNum: 1000,
            gridview: true
        });

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

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

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

            var dayData = [];
            var maxHourFlow = 0;
            $.ajax({
                url: '/PipeNetworkManage/CurvesAnalysis/GetDayFlow',
                data: { deviceId: PointTreeCode, time: monthTime },
                cache: false,
                async: false,
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    dayData = d;
                }
            });
            $gridTable.jqGrid('clearGridData');

            $gridTable.jqGrid('setGridParam', {
                datatype: 'local',
                data: dayData
            }).trigger("reloadGrid");


            var dataXY = [];
            var maxHourFlow = 0;
            for (var i = 0; i < dayData.length; i++) {
                if (parseFloat(dayData[i].HourNetFlow) > maxHourFlow) {
                    maxHourFlow = parseFloat(dayData[i].HourNetFlow);
                }

                var tmp = [];

                tmp.push(dayData[i].LedgerTime);
                tmp.push(parseFloat(dayData[i].HourNetFlow));
                dataXY.push(tmp)
            }
            var arr = monthTime.split("-");
            var days = getDaysInMonth(arr[0], arr[1]);
            if (dayData.length == 0) {
                for (var i = 0; i < days; i++) {
                    var tmp = [];
                    tmp.push(i);
                    tmp.push(0);
                    dataXY.push(tmp)
                }
            }

            monthChart.setOption({
                series: [{
                    name: '每天用水',
                    type: 'line',
                    data: dataXY
                }]
            });
            Loading(false);

        });

    }

    //初始化 年用水量  折线图
    function InitialYearEchart() {
        yearChart = echarts.init(document.getElementById('yearChart'));

        option = {
            title: {
                text: '年用水量分析',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['每月用水'],
                right: '8%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0
                },
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            },
            yAxis: {
                name: "用水量(m³)",
                type: 'value'
            },
            series: [
                {
                    name: '每月用水',
                    type: 'line',
                    stack: '总量',
                    data: []
                }
            ]
        };

        yearChart.setOption(option);
    }

    function GetYearGrid() {
        var $gridTable = $('#yearGridTable');
        $gridTable.jqGrid({
            url: "",
            datatype: "json",
            autowidth: true,
            height: 160,
            rownumbers: true,
            colModel: [
                { name: "DevName", label: "测点名称", width: 160, align: "center" },
                { name: "LedgerTime", label: "时间", width: 160, align: "center" },
                { name: "HourNetFlow", label: "用水量", width: 160, align: "center" }
            ],
            viewrecords: true,
            rowNum: 1000,
            gridview: true
        });

        //查询事件
        $("#btn_year_Search").click(function () {

            var yearTime = $("#yearTime").val();

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

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

            var yearData = [];
            var maxMonthFlow = 0;
            yearTime
            $.ajax({
                url: '/PipeNetworkManage/CurvesAnalysis/GetMonthFlow',
                data: { deviceId: PointTreeCode, time: yearTime },
                cache: false,
                async: false,
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    yearData = d;
                }
            });
            $gridTable.jqGrid('clearGridData');

            $gridTable.jqGrid('setGridParam', {
                datatype: 'local',
                data: yearData
            }).trigger("reloadGrid");

            var dataXY = [];
            var maxMonthFlow = 0;
            for (var i = 0; i < yearData.length; i++) {
                if (parseFloat(yearData[i].HourNetFlow) > maxMonthFlow) {
                    maxMonthFlow = parseFloat(yearData[i].HourNetFlow);
                }

                var tmp = [];

                tmp.push(yearData[i].LedgerTime);
                tmp.push(parseFloat(yearData[i].HourNetFlow));
                dataXY.push(tmp)
            }
            if (yearData.length == 0) {
                for (var i = 0; i < 12; i++) {
                    var tmp = [];
                    tmp.push(i);
                    tmp.push(0);
                    dataXY.push(tmp)
                }
            }


            yearChart.setOption({
                series: [{
                    name: '每月用水',
                    type: 'line',
                    data: dataXY
                }]
            });
            Loading(false);

        });

    }
    //获取选项卡ID
    function getSelectedTabIndex() {
        return $("#tabs").tabs('option', 'active');
    }



    //初始化  瞬时流量 折线图
    function InitialNowEchart() {

        nowChart = echarts.init(document.getElementById('nowChart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '瞬时流量分析',
                x: 'center',
                align: 'right'

            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {

                    if (typeof params === 'object' && !isNaN(params.length)) {
                        if (params[0].value == undefined || params[1].value == undefined) {
                            return;
                        } else if (params[1].value == 0) {
                            return params[0].name + '<br/>'
                           + params[0].seriesName + ' : ' + params[0].value + ' (m³/h)';
                        } else {
                            return params[0].name + '<br/>'
                           + params[0].seriesName + ' : ' + params[0].value + ' (m³/h)<br/>'
                           + params[1].seriesName + ' : ' + params[1].value + ' (Mpa)';
                        }
                    }

                },
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: ['瞬时流量', '压力'],
                x: 'right'
            },
            xAxis: {
                data: []
            },
            yAxis: [
                {
                    name: '单位:m³/h',
                    type: 'value'
                }, {
                    name: '单位:Mpa',
                    type: 'value'
                }
            ],
            series: [{
                name: '瞬时流量',
                type: 'line',
                data: [],
                markLine: {
                    data: [
                        { type: 'max', name: '最大值', itemStyle: { normal: { color: '#dc143c' } } },
                        { type: 'min', name: '最小值', itemStyle: { normal: { color: '#dc143c' } } },
                        { type: 'average', name: '平均值', itemStyle: { normal: { color: '#dc143c' } } }
                    ]
                }
            }, {
                name: '压力',
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#FF0000'
                    }
                },
                data: []
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        nowChart.setOption(option);

        //点击时间范围（今天、近7天、近一个月、近三个月）
        $("#time_horizon a.btn-default").click(function () {
            $("#time_horizon a.btn-default").removeClass("active");
            $(this).addClass("active");
            switch ($(this).attr('data-value')) {
                case "1"://今天
                    $("#nowStartTime").val("@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd HH:mm:ss")");
                    $("#nowEndTime").val("@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")");
                    break;
                case "2"://近7天
                    $("#nowStartTime").val("@DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd")");
                    $("#nowEndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "3"://近一个月
                    $("#nowStartTime").val("@DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd")");
                    $("#nowEndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "4"://自定义
                    $("#nowStartTime").val("");
                    $("#nowEndTime").val("");
                    break;
                default:
                    break;
            }
        });

    };


    function getNowData() {

        //查询事件
        $("#btn_now_Search").click(function () {

            var nowStartTime = $("#nowStartTime").val();
            var nowEndTime = $("#nowEndTime").val();

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

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


            var arrFlow = [];
            $.ajax({
                url: '/PipeNetworkManage/CurvesAnalysis/GetFlowRate',
                data: { deviceId: PointTreeCode, start: nowStartTime, end: nowEndTime },
                type: 'get',
                dataType: 'json',
                cache: false,
                async: false,
                success: function (d) {
                    arrFlow = d;
                }
            });
            if (arrFlow.length == 0) {
                return;
            }
            var flowArray = new Array();
            var pressureArr = new Array();
            var timeArray = new Array();
            var maxFlow = 0;
            var devName = arrFlow.devName;
            var datas = arrFlow.devData;
            for (var i = 0; i < datas.length; i++) {

                flowArray.push(datas[i].FlowRate)
                pressureArr.push(datas[i].Pressure);
                timeArray.push(datas[i].FlowTime);
            }

            nowChart.setOption({
                xAxis: {
                    data: timeArray.map(function (str) {
                        return str.replace(' ', '\n')
                    })
                },
                series: [{
                    data: flowArray
                }, {
                    data: pressureArr
                }]
            });



        });
    }


    function getDaysInMonth(year, month) {
        var currentMonth = new Date(year, month, 1);
        if (parseInt(month, 10) > 1) {
            var lastMonth = new Date(year, month - 1, 1);
        }
        else {
            var lastMonth = new Date(parseInt(year, 10) - 1, 12, 1);
        }
        var diffDays = currentMonth - lastMonth;
        return (diffDays / (24 * 60 * 60 * 1000));
    }

</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>
                    <li><a href="#tabs-3">年用水量</a></li>
                    <li><a href="#tabs-4">瞬时流量</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="dayDevice" class="form-control easyui-combobox" />
                                    </td>
                                    <td style="padding-left: 10px;">请选择时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="dayTime" readonly type="text"  value="@LeaRun.Util.Time.GetDate(0)" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'})" style="width:175px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <a id="btn_day_Search" class="btn btn-primary">&nbsp;查&nbsp;&nbsp;询</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="gridPanel">
                        <div class="printArea">
                            <div class="grid-title">
                                <div id="dayChart" class="echatDiv">
                                </div>
                            </div>
                            <div id="gridPanel">
                                <table id="dayGridTable" class="gridTable"></table>
                            </div>
                        </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="monthDevice" class="form-control easyui-combobox" />
                                    </td>
                                    <td style="padding-left: 10px;">请选择时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="monthTime" 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>
                    <div class="gridPanel">
                        <div class="printArea">
                            <div class="grid-title">
                                <div id="monthChart" class="echatDiv">
                                </div>
                            </div>
                            <div id="gridPanel">
                                <table id="monthGridTable" class="gridTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tabs-3">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td style="padding-left: 10px;">测点名称：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="text" id="yearDevice" class="form-control easyui-combobox" />
                                    </td>
                                    <td style="padding-left: 10px;">请选择时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="yearTime" readonly type="text" value="@LeaRun.Util.Time.Now.Year" class="form-control input-wdatepicker" onfocus="WdatePicker({maxDate:'%y-%M-%d',dateFmt:'yyyy'})" style="width: 175px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <a id="btn_year_Search" class="btn btn-primary">&nbsp;查&nbsp;&nbsp;询</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="gridPanel">
                        <div class="printArea">
                            <div class="grid-title">
                                <div id="yearChart" class="echatDiv">
                                </div>
                            </div>
                            <div id="gridPanel">
                                <table id="yearGridTable" class="gridTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tabs-4">
                    <div class="titlePanel">
                        <div class="title-search">
                            <table>
                                <tr>
                                    <td style="padding-left: 10px;">测点名称：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="text" id="nowDevice" class="form-control easyui-combobox" />
                                    </td>
                                    <td style="padding-left: 10px;">开始时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="nowStartTime" 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(\'nowEndTime\')}'})" style="width:175px">
                                    </td>
                                    <td style="padding-left: 10px;">结束时间：
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input id="nowEndTime"  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(\'nowStartTime\')}'})" style="width:175px">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <div id="time_horizon" class="btn-group">
                                            <a class="btn btn-default" data-value="1">24小时</a>
                                            <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_now_Search" class="btn btn-primary">&nbsp;查&nbsp;&nbsp;询</a>
                                    </td>
                            </table>
                        </div>
                    </div>
                    <div class="gridPanel">
                        <div class="grid-title">
                            <div id="nowChart" class="echatDiv">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>