<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../../../../resources/common.jsp"%>
<%@ page import="com.ces.zwww.utils.WeeksUtls"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<utility:base target="cui" themes="blue" packages="layout,crumb,portal" stylePath="${basePath}/resources/zwww/css" />
<script src="${ctx}/resources/scripts/echarts/build/dist/echarts.js"></script>
<style type="text/css">
.xs{color: #F00;text-align:center;}
</style>
</head>
<body style="width:100%;height:100%;">
//tab切换激发相应的事件
<cui:tabs id="tabs11" onActivate="loadData">
<ul>
<li><a href="#fragment-1">事件工单</a></li>
<li><a href="#fragment-2">故障工单</a></li>
</ul>
<div id="fragment-1" style="width: 100%;height:100%;">
<div style="width: 100%;height:100%;">
<div style="width: 100%;height: 100px;margin-top: 0px;">
<cui:form id="eventStatics" name="eventStatics" >
<table id="event" >
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>工单分类:</label>
</td>
<td >
<cui:combobox id="eventType" name="eventType" width="160" emptyText="全部" method="get" url="${ctx}/statics!queryEventType.json"></cui:combobox>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>工单状态:</label>
</td>
<td>
<cui:combobox id="eventStatus" name="eventStatus" width="160" emptyText="全部" method="get" url="${ctx}/statics!queryEventStatus.json"></cui:combobox>
</td>
<td style="vertical-align: middle;padding-left: 30px;" rowspan="2">
<cui:button id="eventSearchBtn" label="统 计" onClick="eventStatics" ></cui:button>
<cui:button id="eventResetBtn" label="重 置" onClick="reset" ></cui:button>
</td>
</tr>
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>时 间:</label>
</td>
<td >
<cui:datepicker id="eventStartDate" name="eventStartDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
<td style="width: 100px;padding-top: 10px;" align="center">
<label>至:</label>
</td>
<td>
<cui:datepicker id="eventEndDate" name="eventEndDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
</tr>
</table>
</cui:form>
</div>
<div id="eventArea" style="width:99%;height:85%;margin-top: 5px;"></div>
</div>
</div>
<div id="fragment-2" style="width: 100%;height:100%;">
<div style="width: 100%;height:100%;">
<div style="width: 100%;height: 100px;margin-top: 0px;">
<cui:form id="errorStatics" name="errorStatics" >
<table id="error" >
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>工单分类:</label>
</td>
<td >
<cui:combobox id="errorType" name="errorType" width="160" emptyText="全部" method="get" url="${ctx}/statics!queryErrorType.json"></cui:combobox>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>工单状态:</label>
</td>
<td>
<cui:combobox id="errorStatus" name="errorStatus" width="160" emptyText="全部" method="get" url="${ctx}/statics!queryErrorStatus.json"></cui:combobox>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>告警区域:</label>
</td>
<td >
<cui:combotree id="area" name="area" width="160" multiple="true" cascadeCheck="true" url="${ctx}/area!tree.json"></cui:combotree>
</td>
<td style="vertical-align: middle;padding-left: 30px;" rowspan="2">
<cui:button id="errorSearchBtn" label="统 计" onClick="errorStatics" ></cui:button>
<cui:button id="errorResetBtn" label="重 置" onClick="reset" ></cui:button>
</td>
</tr>
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>设备类型:</label>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<cui:combobox id="sblx" url="${ctx}/device!getDeviceType.json?devcType=wlsb" method="get"></cui:combobox>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>时 间:</label>
</td>
<td >
<cui:datepicker id="errorStartDate" name="errorStartDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
<td style="width: 100px;padding-top: 10px;" align="center">
<label>至:</label>
</td>
<td>
<cui:datepicker id="errorEndDate" name="errorEndDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
</tr>
</table>
</cui:form>
</div>
<div id="errorArea" style="width:99%;height:85%;margin-top: 5px;"></div>
</div>
</div>
</cui:tabs>
<script type="text/javascript">
var eventBeginDate = "";
var eventEndDate = "";
var eventType = "";
var eventStatus = "";
function eventStatics(){
eventBeginDate = $('#eventStartDate').datepicker( "getDateValue" );
eventEndDate = $('#eventEndDate').datepicker( "getDateValue" );
eventType = $('#eventType').combobox("getText");
eventStatus = $('#eventStatus').combobox("getText");
eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
}
var errorBeginDate = "";
var errorEndDate = "";
var errorType = "";
var errorStatus ="";
var errorAera ="";
var errorDevice ="";
function errorStatics(){
errorBeginDate = $('#errorStartDate').datepicker( "getDateValue" );
errorEndDate = $('#errorEndDate').datepicker( "getDateValue" );
errorType = $('#errorType').combobox("getText");
errorStatus = $('#errorStatus').combobox("getText");
errorAera = $('#area').combotree ('getText');
errorDevice = $('#sblx').combobox("getText");
errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus,errorAera,errorDevice);
}
function changeDateFormat(event,ui){
if(ui.value=="week"||ui.value=="month"){
//data-options
//<input class="coral-datepicker-textbox-default coral-textbox-default coral-validation-datepicker coral-form-element-datepicker hasDatepicker" id="eventStartDate" style="border-top-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-left-color: currentColor; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;" type="text" data-options="dateFormat:"yyyy-MM",width:"110",name:"eventStartDate",id:"eventStartDate",showOn:"button"" component-role="datepicker"/>
$('#eventStartDate').datepicker("options","dateFormat","YYYY-MM");
//$('#eventStartDate').attr("dateFormat","YYYY-MM");
//$('#eventEndDate').attr("dateFormat","YYYY-MM");
}else if(ui.value=="year"){
//$('#eventStartDate').dateFormat="YYYY");
$('#eventStartDate').datepicker("options","dateFormat","YYYY");
//$('#eventStartDate').attr("dateFormat","YYYY");
//$('#eventEndDate').attr("dateFormat","YYYY");
}else if(ui.value=="personal"){
//$('#eventStartDate').attr("dateFormat","YYYY-MM-DD");
//$('#eventEndDate').attr("dateFormat","YYYY-MM-DD");
}
}
function reset(){
alert("resetData");
}
function loadData(event,eventdata){
var selectObj = event.currentTarget.innerText;
if(selectObj == "事件工单"){
eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
}else if(selectObj == "故障工单"){
errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus,errorAera,errorDevice);
}
}
</script>
<script type="text/javascript">
require.config({
paths: {
echarts: '${ctx}/resources/scripts/echarts/build/dist'
}
});
</script>
<script type="text/javascript">
//最长处理时长Top10--事件工单
function eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus){
require(['echarts','echarts/chart/bar'],type);
var typeChart;
function type(ec) {
typeChart = ec.init(document.getElementById('eventArea'));
typeChart.showLoading({
text : '努力加载数据中...',
textStyle : {
fontSize : 20
},
effect : 'ring'
});
var sourceData = new Array();
var countData = new Array();
$.ajax({
url:'${ctx}/statics!queryEventTopStatics.json',
type:'POST',
data:{'beginTime':eventBeginDate,'endTime':eventEndDate,'typeMessage':eventType,'toolMessage':eventStatus},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
sourceData = datas.sourceData;
var counts = datas.countData;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
option = {
title : {
text: '事件工单最长处理时长TOP10',
x : 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> {b}:{c}小时 "
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
myTool : {
show : true,
title : '刷新',
icon : 'refresh.png',
onclick : function (){
typeChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
typeChart.clear();
$.ajax({
url:'${ctx}/statics!queryEventTopStatics.json',
type:'POST',
data:{'beginTime':eventBeginDate,'endTime':eventEndDate,'typeMessage':eventType,'toolMessage':eventStatus},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
sourceData = datas.sourceData;
var counts = datas.countData;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
typeChart.setOption(option);
typeChart.hideLoading();
}
},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
name : '小 时'
}
],
yAxis : [
{
'type':'category',
//'axisLabel':{'interval':1},
boundaryGap : true,
data : sourceData,
name : '事件工单名称'
}
],
series : [
{
name:'事件工单处理时长',
type:'bar',
data:countData
}
]
};
typeChart.setOption(option);
typeChart.hideLoading();//取消loading
}
}
//最长处理时长Top10--故障工单
function errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus,errorAera,errorDevice){
require(['echarts','echarts/chart/bar'],type);
var errorChart;
var re;
function type(ec) {
errorChart = ec.init(document.getElementById('errorArea'));
errorChart.showLoading({
text : '努力加载数据中...',
textStyle : {
fontSize : 20
}
});
var sourceData = new Array();
var countData = new Array();
$.ajax({
url:'${ctx}/statics!queryErrorTopStatics.json',
type:'POST',
data:{'beginTime':errorBeginDate,'endTime':errorEndDate,'typeMessage':errorType,'toolMessage':errorStatus,'errorAera':errorAera,'errorDevice':errorDevice},
async:false,
success:function(result){
re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
sourceData = datas.sourceData;
var counts = datas.countData;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
if(re==null||re==""){
errorChart.hideLoading();//取消loading
var gj= document.getElementById("errorArea");
var html =" <div class='xs'>";
html +="没有可以显示数据!";
html +=" </div>";
gj.innerHTML =html;
document.getElementById("errorArea").setAttribute("align","center");
document.getElementById("errorArea").setAttribute("height","10px")
return;
}
option = {
title : {
text: '故障工单最长处理时长Top10',
x : 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> {b}:{c}小时 "
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
myTool : {
show : true,
title : '刷新',
icon : 'refresh.png',
onclick : function (){
errorChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
errorChart.clear();
$.ajax({
url:'${ctx}/statics!queryErrorTopStatics.json',
type:'POST',
data:{'beginTime':errorBeginDate,'endTime':errorEndDate,'typeMessage':errorType,'toolMessage':errorStatus,'errorAera':errorAera,'errorDevice':errorDevice},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
sourceData = datas.sourceData;
var counts = datas.countData;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
errorChart.setOption(option);
errorChart.hideLoading();
}
},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
name : '小 时'
}
],
yAxis : [
{
'type':'category',
//'axisLabel':{'interval':0},
boundaryGap : true,
data : sourceData,
name : '故障工单名称'
}
],
series : [
{
name:'故障工单最长处理时长',
type:'bar',
data:countData
}
]
};
errorChart.setOption(option);
errorChart.hideLoading();//取消loading
}
}
eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus,errorAera,errorDevice);
</script>
</body>
</html>
tab事件
猜你喜欢
转载自yuhuiblog6338999322098842.iteye.com/blog/2195378
今日推荐
周排行