@{
    ViewBag.Title = "压力K线图";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}

<script src="~/Content/scripts/plugins/echarts/echarts.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script src="~/Areas/PipeNetworkManage/Content/pressure-curves.js"></script>
<script>
    $(function () {
        InitialPage();
        GetTree();

        iniKChart();

        //点击时间范围（今天、近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"://今天
                    $("#StartTime").val("@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd HH:mm:ss")");
                    $("#EndTime").val("@DateTime.Now.ToString("yyyy-MM-dd  HH:mm:ss")");
                    break;
                case "2"://近7天
                    $("#StartTime").val("@DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd")");
                    $("#EndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "3"://近一个月
                    $("#StartTime").val("@DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd")");
                    $("#EndTime").val("@DateTime.Now.ToString("yyyy-MM-dd")");
                    break;
                case "4"://自定义
                    $("#StartTime").val("");
                    $("#EndTime").val("");
                    break;
                default:
                    break;
            }
        });
        //点击查询事件
        $("#btn_Search").click(function () {

            var StartTime = $("#StartTime").val();
            var EndTime = $("#EndTime").val();

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

            if (StartTime.length <= 0 || EndTime.length <= 0) {
                dialogMsg('请选择时间！', 0);
                return;
            }
            var kData;
            $.ajax({
                url: '/PipeNetworkManage/Pressure/GetPressureCuivesData',
                data: { devId: PointTreeCode, start: StartTime, end: EndTime },
                cache: false,
                async: false,
                dataType: 'json',
                type: 'get',
                success: function (d) {
                    kData = d;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
            //console.log(kData);
            showKChart(kData);

        });

    });
</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 class="panel-Title">压力K线图</div>
            <div class="titlePanel">
                <div class="title-search">
                    <table>
                        <tr>
                            @* <td style="padding-left: 10px;">测点名称：
                            </td>
                            <td style="padding-left: 10px;">
                                <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="StartTime" 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(\'EndTime\')}'})" style="width:175px">
                            </td>
                            <td style="padding-left: 10px;">结束时间：
                            </td>
                            <td style="padding-left: 10px;">
                                <input id="EndTime"  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(\'StartTime\')}'})" 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_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_point_export()"><i class="fa fa-sign-out"></i>&nbsp;导出</a>
                    </div>
                </div>
            </div>
            <div class="gridPanel">
                <div id="kChart" style="height: 710px;">
                </div>
            </div>
        </div>
    </div>
</div>