zhangwy
/
Gsmarket


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
							
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MajorQuoteTrendHighCharts</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" />
    <link href="~/Content/js/plugins/layer/skin/layer.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="~/Content/js/plugins/layer/laydate/laydate.js"></script>
    <script src="~/Content/js/plugins/layer/layer.min.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="~/Content/js/js/MarketJs.js"></script>
    <script src="~/Content/plugins/highcharts/highcharts5.0.14.js"></script>
    <script type="text/javascript" src="~/Content/plugins/highcharts/modules/exporting.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:200px;height:20px"  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: 200px" 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: 200px">
                        @Html.Raw(ViewBag.SelMajorGoods)
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td1"><img alt="" src="../Images/icon_1.gif" />日期：</td>
                <td class="td2">
                    <input class="laydate-icon layer-date" type="text" id="SearchStartTime" name="SearchStartTime" style="height: 25px; width: 200px" data-options="" placeholder="开始日期" />
                </td>
                <td class="td1">到：</td>
                <td class="td2">
                    <input class="laydate-icon layer-date" type="text" id="SearchEndTime" name="SearchEndTime" style="height: 25px; width: 200px" data-options="" placeholder="截止日期" />
                </td>
                <td class="td1"><img alt="" src="../Images/icon_1.gif" />周期：</td>
                <td class="td2">
                    <select style="height: 25px; width: 200px" 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="LoadChart();">查询</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: 1000px; POSITION: absolute; TOP: 120px; HEIGHT: 400px"></div>
    </section>
   
    <script>

	//根据辖区获取市场下拉框的option
        function GetMarketSelStr() {
       
		$.ajax({
			url: "/GetResult/GetMarketSelStrResult",
			type: "post",
			async:false,
			dataType: "json",
			//data: { RegionID: $("input.combobox-value[name='SearchRegionID']").val() },
			data: { RegionID: $("#SearchRegionID").combobox("getValue") },
			success: function (data) {
				//console.log(msg);
				if (CheckAajxData(data) === false) return;
				var rows = data.rows;
				var first = "{\"MarketID\":\"\",\"Names\":\"全部\"}";
				//var last = "{\"MarketID\":\"Other\",\"Names\":\"其他\"}";
				var firstJson = JSON.parse(first);
				//var lastJson = JSON.parse(last);
				rows.unshift(firstJson);
				//rows.push(lastJson);
				//console.log(rows);
				$('#SearchMarketID').combobox("clear").combobox({
					data: rows,
					valueField: 'MarketID',
					textField: 'Names',
					onLoadSuccess: function () {
						var val = $(this).combobox('getData');
						// ReSharper disable once MissingHasOwnPropertyInForeach
						for (var item in val[0]) {
							if (item === 'MarketID') {
								$(this).combobox('select', val[0][item]);
							}
						}
					}
				});


			}
		});
	}


	var chart;

	function LoadChart() {
		var chartType = $("#hid_ChartType").val();
		if (chartType == 'LINE') {
		    chart = new Highcharts.Chart({
		        chart: {
		            renderTo: 'container',
		            defaultSeriesType: 'spline',
		            events: {
		                load: ChartQry
		            }
		        },
		        title: {
		            text: $("#hid_ReportTitle").val()
		        },
		        xAxis: {
		            categories: [],
		            tickWidth: 3,
		            tickmarkPlacement: 'on',
		            labels: {
		                rotation: 0,
		                align: 'center',
		                formatter: function() {
		                    // x轴的日期进行格式化
		                    var days = this.value.split('/');
		                    if (days.length == 3)
		                        return days[1] + '/' + days[2];
		                    else
		                        return this.value;
		                }
		            }
		        },
		        yAxis: {
		            title: {
		                text: ''
		            }
		        },
		        tooltip: {
		            enabled: true,
		            formatter: function() {
		                return '<b>' + this.series.name + '</b><br/>' +
                            this.x + ': ' + Highcharts.numberFormat(this.y, 2) + '元';
		            }
		        },
		        exporting: {
		            buttons: {
		                printButton: {
		                    enabled: false
		                },
		                exportButton: {
		                    enabled: false,
		                    menuItems: [{
		                        text: 'PNG格式',
		                        onclick: function() {
		                            this.exportChart({
		                                type: 'image/png',
		                                width: 1200
		                            });
		                        }
		                    }, {
		                        text: 'JPG格式',
		                        onclick: function() {
		                            this.exportChart({
		                                type: 'image/jpeg',
		                                width: 1200
		                            });
		                        }
		                    },
                            null,
                            null]
		                }
		            },
		            //url: '../HighchartsExport.aspx',
		            url: 'http://export.highcharts.com.cn',
		            filename: 'MyChart',
		            width: 1200
		        },
		        plotOptions: {
		            spline: {
		                dataLabels: {
		                    enabled: true,  // 是否在线上各点标注y轴数值
		                    formatter: function() {
		                        return Highcharts.numberFormat(this.y, 2);
		                    }
		                },
		                enableMouseTracking: true
		            }
		        },
		        credits: {
		            enabled: false
		        },
		        series: [{
		            name: '最高价',
		            color: '#C85B6F',
		            data: []
		        }, {
		            name: '最低价',
		            color: '#15AE67',
		            data: []
		        }, {
		            name: '平均价',
		            //color: '#59C3E2',
		            color: 'gray',
		            dashStyle: 'longdash',
		            data: []
		        }]
		    });
		}
	}
	//返回两个时间的天数:要求比较的时间的格式为：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;
	}
	var _IsExportImage = 'N';
	function ChartQry() {
	    
	    var sDate, eDate;
	    sDate = document.getElementById("SearchStartTime").value;
	    eDate = document.getElementById("SearchEndTime").value;

	    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;
	        }
	    }
	    $("#SearchRegionID").combobox("setValue", $('#hid_RegionID').val())
	    var regionId = $("#SearchRegionID").combobox("getValue"),
			marketId = $("#SearchMarketID").combobox("getValue"),
            MajorGoods = $("#MajorGoods").combobox("getValue")
			startTime = $('#SearchStartTime').val(),
			endTime = $('#SearchEndTime').val(),
			chartType = $("#hid_ChartType").val(),
			reportType = $("#hid_ReportType").val(),
            cmbQueryCycle = $("#cmbQueryCycle").val();
		$.ajax({
			url: '@Url.Action("ShowChartMajorQuoteTrendHighCharts", "DataCharts")',   // 查询接口
			type: 'post',
			dataType: 'json',               // 查询接口返回的数据类型
			timeout: 1000000,               // 单位=毫秒。为了测试写成1000秒,正式环境下可改为20秒
			data:  {
				RegionID: regionId,
				MarketID: marketId,
				StartTime: startTime,
				EndTime: endTime,
				ChartType: chartType,
				ReportType: reportType,
				cmbQueryCycle:cmbQueryCycle,
				MajorGoods: MajorGoods,
				IsExportImage:_IsExportImage 
			},
			success: function(srv_resp, textStatus) {
			    // 查询接口无数据返回
			    var count = eval(srv_resp.__totalcount);
			    if (count == "" || count == null || count == "undefined" || count <= 0) {
			        return;
			    }

			    if ($("#hid_ChartType").val() == 'LINE') {
			        chart.xAxis[0].setCategories(srv_resp.__categories);
			        if (srv_resp.__series.length == 3) {
			            // 设置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(srv_resp.__series[0], false);
			            chart.series[1].setData(srv_resp.__series[1], false);
			            chart.series[2].setData(srv_resp.__series[2], false);
			            chart.redraw();
			        }
			    }
			},
			// 捕获出错信息（服务器应答超时、返回数据不是json格式等，用于调试）
			error: function(xmlHttpRequest, textStatus) {
				layer.alert(textStatus, {icon:2, title: '提示信息' });
			},
			cache: false
		});
	};

	//function ChartType()
	//{
	//	var val=$('input[name="ChartType"]:checked').val();
	//	if (val === "LINE") {
	//	    $("#hid_ChartType").val("LINE");
	//		$("#hid_NumberFormat").val("2");
	//	}
	//	LoadChart();
	//}
	var start = {
	        elem: "#SearchStartTime",
		    format: "YYYY-MM-DD",
		    min: "2010-01-01",
		    event: "focus",
		    choose: function (datas) {
			    end.min = datas; //开始日选好后，重置结束日的最小日期
			    end.start = datas; //将结束日的初始值设定为开始日
			    $('#SearchStartTime').val(datas);

		    }
	    },
		end = {
		    elem: "#SearchEndTime",
			format: "YYYY-MM-DD",
			min: "2010-01-01",
			event: "focus",
			choose: function (datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
				$('#SearchEndTime').val(datas);
			}
		};
	$(function () {

		if ($("#hid_IsMarketSysAccount").val() === "0") {
		    $("#SearchRegionID").combobox("setValue", $('#hid_RegionID').val()).combobox("disable");
			$("#SearchMarketID").combobox("setValue", $("#hid_MarketID").val()).combobox("disable");
		}

		GetMarketSelStr();
		//GetLittleKindSelStr();
		//GetCheckProjectSelStr();
		//加载图表数据
		
		//加载日历控件

		laydate(start);
		laydate(end);
		f_CycleSelChanged();
		$("#hid_ChartType").val("LINE");
		$("#SearchRegionID").combobox("setValue", $('#hid_RegionID').val());
		LoadChart();
	});
        // 打印图片
        function PrintBtnClk() {
            //$("#container").printArea();
            chart.print();
        }

        // 导出图片
        function ExportChartBtnClk() {
            _IsExportImage = 'Y';
            chart.exportChart({ type: 'image/png', width: 1200 });
            _IsExportImage = 'N';

        }

        // 格式化Date类型的数据为yyyy-mm-dd
        function FormatDate(d)
        {
            // 获取年份
            s = d.getFullYear();
            // 获取月份
            c = d.getMonth() + 1;
            if (c < 10) {
                s += "-0" + c;
            }
            else {
                s += "-" + c;
            }
            // 获取日
            e = d.getDate();
            if (e < 10) {
                s += "-0" + e;
            }
            else {
                s += "-" + e;
            }

            return s;
        }

        // '查询周期'选择变化
        function f_CycleSelChanged()
        {
            var obj = $('#cmbQueryCycle').val();
            // 结束日期
            var dateE = new Date();
            document.getElementById("SearchEndTime").value = FormatDate(dateE);

            // 开始日期
            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);
            }
            document.getElementById("SearchStartTime").value = FormatDate(dateB);
        }
        function convert(rows) {
            function exists(rows, parentId) {
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i].id == parentId) return true;
                }
                return false;
            }

            var nodes = [];
            // get the top level nodes
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (!exists(rows, row.parentId)) {
                    nodes.push({
                        id: row.id,
                        text: row.name
                    });
                }
            }
            var toDo = [];
            for (var i = 0; i < nodes.length; i++) {
                toDo.push(nodes[i]);
            }
            while (toDo.length) {
                var node = toDo.shift(); // the parent node
                // get the children nodes
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.parentId == node.id) {
                        var child = { id: row.id, text: row.name };
                        if (node.children) {
                            node.children.push(child);
                        } else {
                            node.children = [child];
                        }
                        toDo.push(child);
                    }
                }
            }
            return nodes;
        }

    </script>
</body>
</html>