@{
    ViewBag.Title = "cgsqslyfQuery";
}

@section scripts{
    <script src="@Url.Content("~/Scripts/echarts.min.js")"></script>
    <script src="@Url.Content("~/Scripts/macarons.js")"></script>
    <script src="@Url.Content("~/Scripts/datetime/WdatePicker.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/public.js")"></script>
    <script type="text/javascript">

        var echart;
        $(function () {
            $("#start").ligerDateEditor();
            $("#end").ligerDateEditor();
            $("#start").ligerGetDateEditorManager().setValue(fun_date(-30));
            $("#end").ligerGetDateEditorManager().setValue(fun_date(0));

            echart = echarts.init(document.getElementById("chart"), "macarons");
            var sftjoption = {
                title: {
                    text: "按照月份对疾控中心的物资申购"
                }
            };
            echart.setOption(sftjoption);

            cx();
        })

        function cx() {
            var data = $("#searchForm").serializeArray();
            $.ajax({
                url: "@Url.Action("getCGSQSLYF")", data: data, type: "post", dataType: "json",
                success: function (data) {
                    $("#grid1").ligerGrid({
                        height: '98%',
                        width: '98%',
                        isScroll: true,
                        dataAction: "local",
                        selectRowButtonOnly: true,
                        data: data.data,
                        columns: [
                           { name: "sqrq", display: "申请月份", width: 200, align: "left" },
                           { name: "count", display: "采购单数量", width: 100, align: "left", totalSummary: { type: 'sum' } },
                           { name: "cgje", display: "采购金额", width: 100, align: "right", totalSummary: { type: 'sum' } },
                        ],
                        alternatingRow: false,
                        usePager: false,
                        rownumbers: true,
                    });
                    liger.get("grid1").reRender();

                    var x = [];
                    var y1 = [];
                    var y2 = [];
                    for (var i = 0; i < data.data.Rows.length; i++) {
                        x.push(data.data.Rows[i].sqrq);
                        y1.push(data.data.Rows[i].count);
                        y2.push(data.data.Rows[i].cgje);
                    }
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['采购单数量', '金额']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: x,
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量',
                                min: 0,
                                max: 100,
                                interval: 10,
                                axisLabel: {
                                    formatter: '{value} 个'
                                }
                            },
                            {
                                type: 'value',
                                name: '金额',
                                min: 0,
                                max: 200,
                                interval: 20,
                                axisLabel: {
                                    formatter: '{value} 圆'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '采购单数量',
                                type: 'bar',
                                data: y1
                            },
                            {
                                name: '金额',
                                type: 'line',
                                yAxisIndex: 1,
                                data: y2
                            }
                        ]
                    };
                    echart.setOption(option);
                }
            });
        }

        function fun_date(days) {
            var date1 = new Date(),
            time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
            var date2 = new Date(date1);
            date2.setDate(date1.getDate() + days);

            var y = date2.getFullYear();
            var m = date2.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = date2.getDate();
            d = d < 10 ? ('0' + d) : d;
            var time2 = y + "-" + m + "-" + d;
            return time2;
        }
    </script>
}
<form id="searchForm">
    <table class="t1" style="width:100%">
        <tr>
            <td width="70" class="ltd">申请日期</td>
            <td width="150" class="rtd"><input type="text" id="start" name="start"></td>
            <td width="20" class="ltd">到</td>
            <td width="150" class="rtd"><input type="text" id="end" name="end"></td>
            <td width="70" class="ltd">申请科室</td>
            <td width="150" class="rtd">@Html.TextBox("key", "", new { @class = "l-text" })</td>
            <td width="100" class="rtd"><input type="button" value="查询" onclick="cx();" class="l-button" /></td>
        </tr>
    </table>
</form>
<div style="width:800px;float:left;height:250px;    background-color: #ffffff;
    box-shadow: 0px 4px 12px rgba(34, 25, 25, 0.2);
    margin: 0.25rem;
    margin-top: 0.5rem;" id="chart"></div>
<div style="clear:both"></div>
<div id="grid1"></div>