tab event

<%@ 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;} //tab switching triggers the corresponding event <body style="width:100%;height:100%;"> </head>
</style>

<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}hours"
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            myTool : {
                show : true,
                title : 'refresh',
                icon : 'refresh.png',
                onclick : function (){
                typeChart.showLoading({
    text: 'I am trying to read data...', //loading words
});
                   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 : 'hour'
        }
    ],
    yAxis : [
        {
            'type':'category',
                //'axisLabel':{'interval':1},
            boundaryGap : true,
            data : sourceData,
            name : 'incident ticket name'
        }
    ],
    series : [
        {
            name: 'incident ticket processing time',
            type:'bar',
            data:countData
        }
    ]
};
            typeChart.setOption(option);
            typeChart.hideLoading();//Cancel loading
        }
    }

    //The longest processing time Top10--fault ticket
    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 : 'trying to load data...',
    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 +="No data to display!";
html +=" </div>";

gj.innerHTML =html;
document.getElementById("errorArea").setAttribute("align","center");
document.getElementById("errorArea").setAttribute("height","10px")

return;

}
option = {
    title : {
        text: 'The longest processing time of a fault ticket is Top10',
        x : 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/> {b}:{c}hours"
    } ,
    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 : 'hour'
        }
    ],
    yAxis : [
        {
            'type':'category',
                //'axisLabel':{'interval':0},
            boundaryGap : true,
            data : sourceData,
            name : 'Fault ticket name'
        }
    ],
    series : [
        {
            name:'Maximum processing time for trouble tickets',
            type:'bar',
            data:countData
        }
    ]
};
            errorChart.setOption(option);
            errorChart.hideLoading(); //Cancel loading
        }
    }
    eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
    errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus,errorAera,errorDevice);
    </script>
</body>
</html>

Guess you like