clq1010
/
SZRXYS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WorkOrderDistribution.aspx.cs"
    Inherits="HySoft.BaseCallCenter.Web.reportmanage.dataanalysis.WorkOrderDistribution" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>工单时间点分布</title>
    <link href="../../scripts/ui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../images/style.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../scripts/ui/js/ligerui.min.js" type="text/javascript"></script>
    <script src="../../scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../../ThirdParty/js/highcharts.js" type="text/javascript"></script>
    <script src="../../ThirdParty/js/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#container1').highcharts({
                title: {
                    text: '工单时间点分布情况',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                },
                yAxis: {
                    title: {
                        text: '工单数量 (个)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '个'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: '工单数量',
                    data: <%=getWorkOrderData() %>
                }]
        });
    })
    </script>
    <script type="text/javascript">
        $(function () { 
                $('#container2').highcharts({
            chart: {
            type: 'column'
        },
     
            title: {
            text: '工单时间点分布情况'
        },
     
            subtitle: {
            text: ''
        },
      
            xAxis: {
             categories: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
        },
   
            yAxis: {
            min: 0,
            title:{
                text: '工单数量 (个)'
            }
        },
      
            tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
       
            shared: true,
            useHTML: true
            },
            plotOptions: {
         
            column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '工单数量',
                data: <%=getWorkOrderData() %>
            }]
        });
        })
    </script>
    <script type="text/javascript">
        function tabs(tabId) {
            for (var i = 0; i <= 1; i++) {
                if (tabId == i) {
                    document.getElementById("tabli" + i).className = "selected";
                    document.getElementById("tab_" + i).style.display = "block";
                }
                else {
                    document.getElementById("tabli" + i).className = "";
                    document.getElementById("tab_" + i).style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="tools_box">
        <div class="tools_bar">
            <div class="search_box">
                开始时间：<asp:TextBox ID="txtStartTime" runat="server" CssClass="txtInput" Width="80px"
                    onfocus="WdatePicker({skin:'whyGreen'})"></asp:TextBox>&nbsp;&nbsp; 结束时间：<asp:TextBox
                        ID="txtEndTime" runat="server" CssClass="txtInput" Width="80px" onfocus="WdatePicker({skin:'whyGreen'})"></asp:TextBox>&nbsp;&nbsp;
                <asp:Button ID="btnConfirm" runat="server" class="btnSearch" Text="搜索" OnClick="btnConfirm_Click" />&nbsp;&nbsp;
                <%--<asp:Button ID="btnExport" runat="server" class="btnSearch" Text="导出" OnClick="btnExport_Click" />
                <input id="Button2" type="button" value="打印" class="btnSearch" onclick="SearchGaoJi();" />--%>
            </div>
        </div>
    </div>
    <ul class="tab_nav">
        <li id="tabli0" class="selected"><a onclick="tabs(0);" href="javascript:;">折线图</a></li>
        <li id="tabli1"><a onclick="tabs(1);" href="javascript:;">柱状图</a></li>
    </ul>
    <div>
        <div id="tab_0" style="display: block">
            <div id="container1" style="min-width: 700px; height: 400px">
            </div>
        </div>
        <div id="tab_1" style="display: none">
            <div id="container2" style="min-width: 700px; height: 400px">
            </div>
        </div>
    </div>
    <br/>
    <h4>注：默认显示当月1号到当日每天创建时间08：40：00至17：30：00的数据</h4>
    </form>
</body>
</html>