zhangwy
/
Gsmarket


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HighChartsMajorQuoteTrend</title>
    <link href="~/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/easyui/themes/icon.css" />
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/js/jquery.min.js"></script>
    <script src="~/Content/js/bootstrap.min.js"></script>
    <script src="~/easyui/jquery.easyui.min.js"></script>
    <script src="~/easyui/jquery.easyui.mobile.js"></script>
    <script src="~/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/js/Utils.js"></script>
    <link href="~/Content/css/Style/Markets.css" rel="stylesheet" />
    <link href="~/Content/css/Styles.css" rel="stylesheet" />
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
    <section class="hidden">
        <input id="hid_RegionID" name="hid_RegionID" type="hidden" value="@ViewBag.RegionID" />
        <input type="hidden" id="hid_ReportTitle" value="@ViewBag.ReportTitle" />
        <input id="hid_IsMarketSysAccount" name="hid_IsMarketSysAccount" type="hidden" value="@ViewBag.IsMarketSysAccount" />
        <input id="hid_IsSystem" name="hid_IsSystem" type="hidden" value="@ViewBag.IsSystem" />
        <input id="hid_MarketID" name="hid_MarketID" type="hidden" value="@ViewBag.MarketID" />
        <input id="hid_ChartType" name="hid_ChartType" type="hidden" value="LINE" />
        <input id="hid_NumberFormat" name="hid_NumberFormat" type="hidden" value="0" />
        <input id="hid_IsExportImage" name="hid_IsExportImage" type="hidden" value="N" />
    </section>
<section id="Search_Panel">
    <table class="tableStyle1" style="Z-INDEX:101;LEFT:5px;WIDTH:1000px;TOP:20px;POSITION:absolute;">
        <tr>
            <td class="td1"><img alt="" src="../Images/icon_1.gif" />辖区工商：</td>
            <td class="td2">
                @*<input class="easyui-combotree" id="SearchRegionID" data-options="url:'/BaseInfo/GetTreeRegion',method:'post',loadFilter: function (rows) {
                        return convert(rows);
                    },onChange:function(newValue, oldValue){GetMarketSelStr()}" style="width:200px;height:20px"  />*@
                <select class="easyui-combobox" id="SearchRegionID" style="width:220px;height:25px" data-options="onChange:function(newValue, oldValue){GetMarketSelStr()}">
                    @Html.Raw(ViewBag.SelRegionID)
                </select>
            </td>
            <td class="td1"><img alt="" src="../Images/icon_1.gif" />隶属市场：</td>
            <td class="td2">
                <select class="easyui-combobox" style="height: 25px; width: 220px" id="SearchMarketID" name="SearchMarketID" data-options="">
                    <option value="">全部</option>
                    @Html.Raw(ViewBag.SelMarketInfo)
                </select>
            </td>
            <td class="td1"><img alt="" src="../Images/icon_1.gif" />商品名称：</td>
            <td class="td2">
                <select class="easyui-combobox" id="MajorGoods" style="height: 25px; width: 220px">
                    @Html.Raw(ViewBag.SelMajorGoods)
                </select>
            </td>
        </tr>
        <tr>
            <td class="td1"><img alt="" src="../Images/icon_1.gif" />日期：</td>
            <td class="td2">
                <input class="easyui-datebox" type="text" id="SearchStartTime" name="SearchStartTime" style="height: 25px; width: 220px" data-options="" placeholder="开始日期" />
            </td>
            <td class="td1">到：</td>
            <td class="td2">
                <input class="easyui-datebox" type="text" id="SearchEndTime" name="SearchEndTime" style="height: 25px; width: 220px" data-options="" placeholder="截止日期" />
            </td>
            <td class="td1"><img alt="" src="../Images/icon_1.gif" />周期：</td>
            <td class="td2">
                <select style="height: 25px; width: 220px" id="cmbQueryCycle" name="cmbQueryCycle" onchange="f_CycleSelChanged()">
                    <option value="1" selected>日</option>
                    <option value="2">月</option>
                    <option value="3">季</option>
                    <option value="4">年</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td1">
                <input type="radio" name="ChartType" value="LINE" style="margin: 5px 3px 0 0" checked="checked" /> 趋势图
            </td>
            <td class="td1" colspan="5">
                <div align="center">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" style="width: 90%; height: 25px" onclick="ChartQry();">查询</a>&nbsp;&nbsp;
                    @*<input id="BtnPrintChart" type="button" onclick="PrintBtnClk()" style="width:60px" class="but1" value="打印图片" />&nbsp;&nbsp;
                    <input id="BtnExportChart" type="button" onclick="ExportChartBtnClk()" style="width:60px" class="but1" value="导出图片" />*@
                </div>
            </td>
        </tr>
    </table>
    <div id="container" style="Z-INDEX: 103; LEFT: 5px; WIDTH: 70%; POSITION: absolute; TOP: 120px; HEIGHT: 70vh"></div>
</section>
    
<script>
    $(function() {
        var dInit = new Date();
        $("#SearchEndTime").datebox('setValue', dInit.format('yyyy-MM-dd'));
        dInit.setMonth(dInit.getMonth() - 1);
        $("#SearchStartTime").datebox('setValue', dInit.format('yyyy-MM-dd'));
        f_CycleSelChanged();
        $("#SearchRegionID").combobox("setValue", $('#hid_RegionID').val());
        LoadChart();
        ChartQry();
    });
    var chart;
    function LoadChart() {
        chart = Highcharts.chart('container', {
            chart: {
                type: 'line',
                renderTo: 'container',
                events: {
                    //load: ChartQry
                }
            },
            credits: {
                enabled:false
            },
            title: {
                text: '园区主要商品价格走势图'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: '价格'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true          
                    }
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    //enableMouseTracking: false
                }
            },
            series: [{
                name: '最高价',
                color: '#C85B6F',
                data: []
            }, {
                name: '最低价',
                color: '#15AE67',
                data: []    
            }, {
                name: '平均价',
                color: 'gray',
                data: []   
            }],
            exporting: {
                enabled: true,
                url:"https://export.highcharts.com"
            }
        });
    }

    function ChartQry() {
        var sDate, eDate;
        sDate = $("#SearchStartTime").datebox('getValue');
        eDate = $("#SearchEndTime").datebox('getValue');
        var days = better_time(eDate, sDate);
        if (days <= 0) {
            alert("时间间隔无效，请确保结束时间 大于 开始时间！");
            return false;
        }
        var cycle = document.getElementById("cmbQueryCycle").value;
        if (cycle == '1') {
            if (days >= 60) {
                alert("时间间隔最大为60天！");
                return false;
            }
        }
        else if (cycle == '2') {
            if (days >= 730) {
                alert("时间间隔最大为24个月！");
                return false;
            }
        }
        else if (cycle == '3') {
            if (days >= 1095) {
                alert("时间间隔最大为16个季度！");
                return false;
            }
        }
        var regionId = $("#SearchRegionID").combobox("getValue"),
            marketId = $("#SearchMarketID").combobox("getValue"),
            MajorGoods = $("#MajorGoods").combobox("getValue"),
            startTime = sDate,
            endTime = eDate,
            cmbQueryCycle = $("#cmbQueryCycle").val();
        $.ajax({
            url: '@Url.Action("ShowChartMajorQuoteTrend", "DataCharts")',   // 查询接口
            type: 'post',
            dataType: 'json',               // 查询接口返回的数据类型
            timeout: 1000000,               // 单位=毫秒。为了测试写成1000秒,正式环境下可改为20秒
            data:  {
                RegionID: regionId,
                MarketID: marketId,
                StartTime: startTime,
                EndTime: endTime,
                cmbQueryCycle:cmbQueryCycle,
                MajorGoods: MajorGoods
            },
            success: function (data) {
                console.log(data);
                // 查询接口无数据返回
                if (data==null || data.length <= 0) {
                    return;
                }
               
                var count = data.length;
                var categories = [];
                var series1 = [];
                var series2 = [];
                var series3 = [];
                data.forEach(function(e) {
                    categories.push(e.QUOTE_DATE);
                    series1.push(e.QUOTE_HIGH);
                    series2.push(e.QUOTE_LOW);
                    series3.push(e.QUOTE_AVG);
                });
                chart.xAxis[0].setCategories(categories);
                // 设置x轴label间隔,否则可能因为数据量而过密
                var step = Math.ceil(count / 10.0);
                if (step < 1) { step = 1; }
                //chart.xAxis[0].options.labels.step = step;
                chart.xAxis[0].options.tickInterval = step;

                // 设置各series的数据
                chart.series[0].setData(series1);
                chart.series[1].setData(series2);
                chart.series[2].setData(series3);
                chart.redraw();
            },
            // 捕获出错信息（服务器应答超时、返回数据不是json格式等，用于调试）
            error: function(xmlHttpRequest, textStatus) {
                //layer.alert(textStatus, {icon:2, title: '提示信息' });
                $.messager.alert("", textStatus);
            },
            cache: false
        });
    }

    // '查询周期'选择变化
    function f_CycleSelChanged()
    {
        var obj = $('#cmbQueryCycle').val();
        // 结束日期
        var dateE = new Date();
        //document.getElementById("SearchEndTime").value = dateE.format(dateE);
        $("#SearchEndTime").datebox('setValue', dateE.format('yyyy-MM-dd'));
        // 开始日期
        var dateB = new Date();
        if (obj== "1") {
            dateB.setDate(dateE.getDate() - 30);
        }
        else if (obj== "2") {
            dateB.setMonth(dateE.getMonth() - 6);
        }
        else if (obj == "3") {
            dateB.setMonth(dateE.getMonth() - 16);
        }
        else {
            dateB.setYear(dateE.getFullYear() - 6);
        }
        $("#SearchStartTime").datebox('setValue', dateB.format('yyyy-MM-dd'));
    }
    //根据辖区获取市场下拉框的option
    function GetMarketSelStr() {
        $.ajax({
            url: "/GetResult/GetMarketSelStrResult",
            type: "post",
            async:false,
            dataType: "json",
            data: { RegionID: $("#SearchRegionID").combobox("getValue") },
            success: function (data) {
                if (CheckAajxData(data) === false) return;
                var rows = data.rows;
                var first = "{\"MarketID\":\"\",\"Names\":\"全部\"}";
                var firstJson = JSON.parse(first);
                rows.unshift(firstJson);
                $('#SearchMarketID').combobox("clear").combobox({
                    data: rows,
                    valueField: 'MarketID',
                    textField: 'Names'
                });
            }
        });
    }

    //返回两个时间的天数:要求比较的时间的格式为：YYYY-MM-DD
    function better_time(strDateStart, strDateEnd) {
        strDateStart = strDateStart.replace("/", "-").replace("/", "-");
        strDateEnd = strDateEnd.replace("/", "-").replace("/", "-");
        var strSeparator = "-";   //日期分隔符
        var strDateArrayStart;
        var strDateArrayEnd;
        var intDay;
        if (strDateStart == "" || strDateEnd == "") {
            //alert("ddddddd");
        }

        strDateArrayStart = strDateStart.split(strSeparator);
        strDateArrayEnd = strDateEnd.split(strSeparator);
        var strDateS = new Date(strDateArrayStart[0] + "/" + strDateArrayStart[1] + "/" + strDateArrayStart[2]);
        var strDateE = new Date(strDateArrayEnd[0] + "/" + strDateArrayEnd[1] + "/" + strDateArrayEnd[2]);
        intDay = (strDateS - strDateE) / (1000 * 3600 * 24);
        return intDay;
    }
    Date.prototype.format = function(format)
    {
        var o = {
            "M+" : this.getMonth()+1, //month
            "d+" : this.getDate(),    //day
            "h+" : this.getHours(),   //hour
            "m+" : this.getMinutes(), //minute
            "s+" : this.getSeconds(), //second
            "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
            "S" : this.getMilliseconds() //millisecond
        }
        if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
            (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)if(new RegExp("("+ k +")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length==1 ? o[k] :
                ("00"+ o[k]).substr((""+ o[k]).length));
        return format;
    }
</script>
</body>
</html>