<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<title>Ticket Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/javascript" src="../inc/calendar.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/server.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/CommonFunction.js"></script>
<script type="text/javascript" src="../inc/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../inc/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../inc/tickets.css" type="text/css"/>
<script type="text/javascript">
function servicequality(){
var createDateFlag = checkCreateDate();
if (createDateFlag == false){
return false;
}
if (checkAllValue() == false){
alert('Pls. Input Search Time Value!');
return false;
}
$('#data_body').html('');
$('#data_body').html('<tr id="p"><td colspan="10" id="photo" align="center"></br></br><img src="../inc/My97DatePicker/loading.gif"/></td></tr>');;
var url = '<%=basePath%>serviceQuality.ticket?query=getReport';
var data = {"customerId":$('#customerId').val(),"customerLevel" : $('#customerLevel').val(),"customerType" : $('#customerType').val(),"ticketType" : $('#ticketType').val(),"contractLocation" : $('#contractLocation').val(),"startTime" : $('#startTime').val(),"endTime" : $('#endTime').val()};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i++ ) {
$('#data_body').append('<tr><td>'+ (i+1) +'</td><td>'+data[i].customerId+'</td><td>'+ data[i].companyName +'</td>' +
'<td>'+ data[i].customerLevel+'</td><td>'+ data[i].customerType+'</td><td>'+ data[i].contractLocation +'</td>'
+'<td>'+ data[i].noOfTicket+'</td><td>'+ data[i].noOfServiceID+'</td><td>'+ data[i].noOfTicketDivideNoOfSericeID+'</td></tr>');
}
$('#photo').html('');;
$('#p').remove();
});
}
function checkAllValue(){
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
if (startTime =="" || endTime == ""){
return false;
}
}
var eastLocationArray = ["TY","NJ","QD","L2","F2","R2","SH","D2","SU"];
var northLocationArray = ["D1","R1","BJ","I1","L1"];
var southLocationArray = ["D7","L7","F7","R7","DG","L3","GZ","D3","R3","L4","SZ","D4","R4"];
var twLocationArray = ["TD","TW","L6","R6","TA","D6"];
var hkLocationArray = ["HK","D8","D5","L8","L5","R5"];
function changeContractLocation(obj){
var objValue = obj.value;
var objIsChecked = obj.checked;
var selectElt = document.getElementsByName("contractLocation")[0];
if(1 == objValue){
getSelectValues(selectElt, eastLocationArray, objIsChecked);
}
if(2 == objValue){
getSelectValues(selectElt, northLocationArray, objIsChecked);
}
if(3 == objValue){
getSelectValues(selectElt, southLocationArray, objIsChecked);
}
if(4 == objValue){
getSelectValues(selectElt, twLocationArray, objIsChecked);
}
if(5 == objValue){
getSelectValues(selectElt, hkLocationArray, objIsChecked);
}
}
function getSelectValues(selectElt, targetValues, objIsChecked) {
var result = [];
var options = selectElt && selectElt.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
for(var j=0; j<targetValues.length; j++){
if(opt.value == targetValues[j]){
if(objIsChecked){
opt.selected = true;
}else{
opt.selected = false;
}
}
}
}
}
$(function(){
selectAllTicketType();
selectAllContractLocation();
});
function selectAllTicketType(){
var url = '<%=basePath%>groupDetails.ticket?query=selectAllTicketType';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#ticketType').append('<option>'+ data[i][0] +'</option>');
}
});
}
function selectAllContractLocation(){
var url = '<%=basePath%>serviceQuality.ticket?query=selectAllContractLocation';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#contractLocation').append('<option value=\"'+ data[i][0] +'\">'+ data[i][0] +'</option>');
}
});
}
function checkCreateDate(){
var d1 =document.getElementById('startTime').value;
var d2 =document.getElementById('endTime').value;
if(!compareDate(d1,d2)){
alert('CreateDate的第二个日期比第一日期小');
return false;
}
}
function compareDate(d1,d2){
var arrayD1 = d1.split("-");
var date1 = new Date(arrayD1[0],arrayD1[1],arrayD1[2]);
var arrayD2 =d2.split("-");
var date2 = new Date(arrayD2[0],arrayD2[1],arrayD2[2]);
if(date1 > date2) return false;
return true;
}
function output(){
//alert("start ... ");
//拷贝
var elTable = document.getElementById("data_table");
var oRangeRef = document.body.createTextRange();
oRangeRef.moveToElementText( elTable );
oRangeRef.execCommand( "Copy" );
//粘贴
try{
var appExcel = new ActiveXObject( "Excel.Application" );
appExcel.Visible = true;
appExcel.Workbooks.Add().Worksheets.Item(1).Paste();
//appExcel = null;
}catch(e){
alert("使用此功能必须在浏览器中设置:Internet选项->安全->将本站加入'受信任的站点'");
}
}
</script>
</head>
<body>
<form name="reportForm" method="post" action="">
</br></br>
<fieldset style="width: 800px;margin:0 auto;margin-left: 400px; ">
<legend><font style="font-weight: bolder;font-size: 14px;">Search Condition</font></legend>
<br>
<table width="800" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="25%" align="right" >Customer ID: </td>
<td width="25%"><input type="text" id="customerId"/> </td>
<td width="25%" align="right" nowrap>Customer Level: </td>
<td width="25%"><select name="customerLevel" id="customerLevel" style="width: 180px;">
<option value="All">All</option>
<option value="1">VIP</option>
<option value="2">Svip</option>
<option value="3">trial</option>
<option value="0">Normal</option>
</select>
</td>
</tr>
<tr>
<td width="25%" align="right" >
Customer Type : </td>
<td width="25%"><select id="customerType" style="width: 150px;">
<option value="All">All</option>
<option value="IB">IB</option>
<option value="Call Center">Call Center</option>
<option value="Normal">Normal</option>
</select></td>
<td width="25%" align="right">
Ticket Type : </td>
<td width="25%"><select id="ticketType" style="width: 150px;">
<option>All</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="30%" nowrap>Contract Location:</td>
<td align="left" width="70%" nowrap>
<input type="checkbox" name="eastRegion" οnclick="changeContractLocation(this)" value="1"/>华东
<input type="checkbox" name="northRegion" οnclick="changeContractLocation(this);" value="2"/>华北
<input type="checkbox" name="southRegion" οnclick="changeContractLocation(this);" value="3"/>华南
<input type="checkbox" name="twRegion" οnclick="changeContractLocation(this);" value="4"/>台湾
<input type="checkbox" name="hkRegion" οnclick="changeContractLocation(this);" value="5"/>香港
<br/>
<select name="contractLocation" id="contractLocation" style="width: 150px;" size="3" multiple="true">
</select>
</td>
</tr>
<tr>
<td width="25%">Create at : From : </td>
<td width="25%"><input type="text" name="startTime" id="startTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" />
</td>
<td width="25%"> TO : </td>
<td width="25%"> <input type="text" name="endTime" id="endTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" >
</td>
</tr>
<tr>
<td colspan="10" rowspan="10" align="center">
<input type="button" value="Generate" class="button8" onClick="servicequality();" >
<input type="button" name="generate2" value="Exp Data" class="button8" οnclick="output();">
</td>
</tr>
</table>
</fieldset>
</form>
<table id="data_table" align="center" width="80%" border="0">
<thead bgcolor="#0099FF">
<td width="3%" ><font color="#000000"> INDEX</font></td>
<td><font color="#000000"> CID</font></td>
<td width="13%"><font color="#000000"> Company Name</font></td>
<td width="13%"><font color="#000000"> Customer Level</font></td>
<td width="13%"><font color="#000000"> Customer Type</font></td>
<td width="13%"><font color="#000000"> Contract Location</font></td>
<td width="13%"><font color="#000000"> No.of Ticket</font></td>
<td width="13%"><font color="#000000"> No.of Service ID</font></td>
<td width="13%"><font color="#000000"> No.of Ticket / No.of Serice ID</font></td>
</thead>
<tbody id="data_body">
</tbody>
</table>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<title>Ticket Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/javascript" src="../inc/calendar.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/server.js"></script>
<script language="JavaScript" type="text/javascript" src="../inc/CommonFunction.js"></script>
<script type="text/javascript" src="../inc/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../inc/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../inc/tickets.css" type="text/css"/>
<script type="text/javascript">
function servicequality(){
var createDateFlag = checkCreateDate();
if (createDateFlag == false){
return false;
}
if (checkAllValue() == false){
alert('Pls. Input Search Time Value!');
return false;
}
$('#data_body').html('');
$('#data_body').html('<tr id="p"><td colspan="10" id="photo" align="center"></br></br><img src="../inc/My97DatePicker/loading.gif"/></td></tr>');;
var url = '<%=basePath%>serviceQuality.ticket?query=getReport';
var data = {"customerId":$('#customerId').val(),"customerLevel" : $('#customerLevel').val(),"customerType" : $('#customerType').val(),"ticketType" : $('#ticketType').val(),"contractLocation" : $('#contractLocation').val(),"startTime" : $('#startTime').val(),"endTime" : $('#endTime').val()};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i++ ) {
$('#data_body').append('<tr><td>'+ (i+1) +'</td><td>'+data[i].customerId+'</td><td>'+ data[i].companyName +'</td>' +
'<td>'+ data[i].customerLevel+'</td><td>'+ data[i].customerType+'</td><td>'+ data[i].contractLocation +'</td>'
+'<td>'+ data[i].noOfTicket+'</td><td>'+ data[i].noOfServiceID+'</td><td>'+ data[i].noOfTicketDivideNoOfSericeID+'</td></tr>');
}
$('#photo').html('');;
$('#p').remove();
});
}
function checkAllValue(){
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
if (startTime =="" || endTime == ""){
return false;
}
}
var eastLocationArray = ["TY","NJ","QD","L2","F2","R2","SH","D2","SU"];
var northLocationArray = ["D1","R1","BJ","I1","L1"];
var southLocationArray = ["D7","L7","F7","R7","DG","L3","GZ","D3","R3","L4","SZ","D4","R4"];
var twLocationArray = ["TD","TW","L6","R6","TA","D6"];
var hkLocationArray = ["HK","D8","D5","L8","L5","R5"];
function changeContractLocation(obj){
var objValue = obj.value;
var objIsChecked = obj.checked;
var selectElt = document.getElementsByName("contractLocation")[0];
if(1 == objValue){
getSelectValues(selectElt, eastLocationArray, objIsChecked);
}
if(2 == objValue){
getSelectValues(selectElt, northLocationArray, objIsChecked);
}
if(3 == objValue){
getSelectValues(selectElt, southLocationArray, objIsChecked);
}
if(4 == objValue){
getSelectValues(selectElt, twLocationArray, objIsChecked);
}
if(5 == objValue){
getSelectValues(selectElt, hkLocationArray, objIsChecked);
}
}
function getSelectValues(selectElt, targetValues, objIsChecked) {
var result = [];
var options = selectElt && selectElt.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
for(var j=0; j<targetValues.length; j++){
if(opt.value == targetValues[j]){
if(objIsChecked){
opt.selected = true;
}else{
opt.selected = false;
}
}
}
}
}
$(function(){
selectAllTicketType();
selectAllContractLocation();
});
function selectAllTicketType(){
var url = '<%=basePath%>groupDetails.ticket?query=selectAllTicketType';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#ticketType').append('<option>'+ data[i][0] +'</option>');
}
});
}
function selectAllContractLocation(){
var url = '<%=basePath%>serviceQuality.ticket?query=selectAllContractLocation';
var data = {};
$.post(url,data,function(data){
var data = eval('(' + data + ')');
for (var i = 0 ; i < data.length ; i ++) {
$('#contractLocation').append('<option value=\"'+ data[i][0] +'\">'+ data[i][0] +'</option>');
}
});
}
function checkCreateDate(){
var d1 =document.getElementById('startTime').value;
var d2 =document.getElementById('endTime').value;
if(!compareDate(d1,d2)){
alert('CreateDate的第二个日期比第一日期小');
return false;
}
}
function compareDate(d1,d2){
var arrayD1 = d1.split("-");
var date1 = new Date(arrayD1[0],arrayD1[1],arrayD1[2]);
var arrayD2 =d2.split("-");
var date2 = new Date(arrayD2[0],arrayD2[1],arrayD2[2]);
if(date1 > date2) return false;
return true;
}
function output(){
//alert("start ... ");
//拷贝
var elTable = document.getElementById("data_table");
var oRangeRef = document.body.createTextRange();
oRangeRef.moveToElementText( elTable );
oRangeRef.execCommand( "Copy" );
//粘贴
try{
var appExcel = new ActiveXObject( "Excel.Application" );
appExcel.Visible = true;
appExcel.Workbooks.Add().Worksheets.Item(1).Paste();
//appExcel = null;
}catch(e){
alert("使用此功能必须在浏览器中设置:Internet选项->安全->将本站加入'受信任的站点'");
}
}
</script>
</head>
<body>
<form name="reportForm" method="post" action="">
</br></br>
<fieldset style="width: 800px;margin:0 auto;margin-left: 400px; ">
<legend><font style="font-weight: bolder;font-size: 14px;">Search Condition</font></legend>
<br>
<table width="800" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="25%" align="right" >Customer ID: </td>
<td width="25%"><input type="text" id="customerId"/> </td>
<td width="25%" align="right" nowrap>Customer Level: </td>
<td width="25%"><select name="customerLevel" id="customerLevel" style="width: 180px;">
<option value="All">All</option>
<option value="1">VIP</option>
<option value="2">Svip</option>
<option value="3">trial</option>
<option value="0">Normal</option>
</select>
</td>
</tr>
<tr>
<td width="25%" align="right" >
Customer Type : </td>
<td width="25%"><select id="customerType" style="width: 150px;">
<option value="All">All</option>
<option value="IB">IB</option>
<option value="Call Center">Call Center</option>
<option value="Normal">Normal</option>
</select></td>
<td width="25%" align="right">
Ticket Type : </td>
<td width="25%"><select id="ticketType" style="width: 150px;">
<option>All</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="30%" nowrap>Contract Location:</td>
<td align="left" width="70%" nowrap>
<input type="checkbox" name="eastRegion" οnclick="changeContractLocation(this)" value="1"/>华东
<input type="checkbox" name="northRegion" οnclick="changeContractLocation(this);" value="2"/>华北
<input type="checkbox" name="southRegion" οnclick="changeContractLocation(this);" value="3"/>华南
<input type="checkbox" name="twRegion" οnclick="changeContractLocation(this);" value="4"/>台湾
<input type="checkbox" name="hkRegion" οnclick="changeContractLocation(this);" value="5"/>香港
<br/>
<select name="contractLocation" id="contractLocation" style="width: 150px;" size="3" multiple="true">
</select>
</td>
</tr>
<tr>
<td width="25%">Create at : From : </td>
<td width="25%"><input type="text" name="startTime" id="startTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" />
</td>
<td width="25%"> TO : </td>
<td width="25%"> <input type="text" name="endTime" id="endTime" class="txt-100-22 Wdate" onClick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,isShowClear:false})" >
</td>
</tr>
<tr>
<td colspan="10" rowspan="10" align="center">
<input type="button" value="Generate" class="button8" onClick="servicequality();" >
<input type="button" name="generate2" value="Exp Data" class="button8" οnclick="output();">
</td>
</tr>
</table>
</fieldset>
</form>
<table id="data_table" align="center" width="80%" border="0">
<thead bgcolor="#0099FF">
<td width="3%" ><font color="#000000"> INDEX</font></td>
<td><font color="#000000"> CID</font></td>
<td width="13%"><font color="#000000"> Company Name</font></td>
<td width="13%"><font color="#000000"> Customer Level</font></td>
<td width="13%"><font color="#000000"> Customer Type</font></td>
<td width="13%"><font color="#000000"> Contract Location</font></td>
<td width="13%"><font color="#000000"> No.of Ticket</font></td>
<td width="13%"><font color="#000000"> No.of Service ID</font></td>
<td width="13%"><font color="#000000"> No.of Ticket / No.of Serice ID</font></td>
</thead>
<tbody id="data_body">
</tbody>
</table>
</body>
</html>