//tab上加监听事件onActivate="loadData",识别是哪个li,在判断后调用相应的处理方法。
//href可以是div的id,><a href="#fragment-1">,也可以是页面
<%@ 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>
</head>
<body style="width:100%;height:100%;">
<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" >
</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" >
</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 loadData(event,eventdata){
var selectObj = event.currentTarget.innerText;
if(selectObj == "事件工单"){
eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
}else if(selectObj == "故障工单"){
errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus);
}
}
</script>
<script type="text/javascript">
require.config({
paths: {
echarts: '${ctx}/resources/scripts/echarts/build/dist'
}
});
</script>
<script type="text/javascript">
//分类统计--事件工单
function eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus){
require(['echarts','echarts/chart/pie'],type);
var typeChart;
function type(ec) {
typeChart = ec.init(document.getElementById('eventArea'));
typeChart.showLoading({
text : '努力加载数据中...',
textStyle : {
fontSize : 20
}
});
var sourceData = new Array();
var countData = new Array();
$.ajax({
url:'${ctx}/statics!queryEventTypeStatics.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.eventType;
var counts = datas.eventCount;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
option = {
title : {
text: '事件工单分类统计',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} <br/> {c}个 <br/> {d}%"
},
legend: {
orient : 'vertical',
y : 'top',
x : 'left',
data:sourceData
},
toolbox: {
show : true,
feature : {
dataView : {
show : true,
title : '详细数据',
readOnly: true
},
myTool : {
show : true,
title : '刷新',
icon : 'refresh.png',
onclick : function (){
typeChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
typeChart.clear();
$.ajax({
url:'${ctx}/statics!queryEventTypeStatics.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 = new Array();
countData = new Array();
sourceData = datas.eventType;
var counts = datas.eventCount;
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,
series : [
{
name:'事件工单分类统计',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:countData,
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c}个 ({d}%)'
}
}
}
}
]
};
typeChart.setOption(option);
typeChart.hideLoading();//取消loading
}
}
//分类统计--故障工单
function errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus){
require(['echarts','echarts/chart/pie'],errorTypes);
var errorChart;
function errorTypes(ec) {
errorChart = ec.init(document.getElementById('errorArea'));
errorChart.showLoading({
text : '努力加载数据中...',
textStyle : {
fontSize : 20
}
});
var errorSourceData = new Array();
var errorCountData = new Array();
$.ajax({
url:'${ctx}/statics!queryErrorTypeStatics.json',
type:'POST',
data:{'beginTime':errorBeginDate,'endTime':errorEndDate,'typeMessage':errorType,'toolMessage':errorStatus},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
errorSourceData = datas.errorType;
var counts = datas.errorCount;
for(var j =0;j<errorSourceData.length;j++){
errorCountData.push({'value':counts[j],'name':errorSourceData[j]});
}
}
}
});
errorOption = {
title : {
text: '故障工单分类统计',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} <br/> {c}个 <br/> {d}%"
},
legend: {
orient : 'vertical',
y : 'top',
x : 'left',
data:errorSourceData
},
toolbox: {
show : true,
feature : {
dataView : {
show : true,
title : '详细数据',
readOnly: true
},
myTool : {
show : true,
title : '刷新',
icon : 'refresh.png',
onclick : function (){
errorChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
errorChart.clear();
$.ajax({
url:'${ctx}/statics!queryErrorTypeStatics.json',
type:'POST',
data:{'beginTime':errorBeginDate,'endTime':errorEndDate,'typeMessage':errorType,'toolMessage':errorStatus},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
errorSourceData = new Array();
errorCountData = new Array();
errorSourceData = datas.errorType;
var counts = datas.errorCount;
for(var j =0;j<errorSourceData.length;j++){
errorCountData.push({'value':counts[j],'name':errorSourceData[j]});
}
}
}
});
errorChart.setOption(errorOption);
errorChart.hideLoading();
}
},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'故障工单分类统计',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:errorCountData,
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c}个 ({d}%)'
}
}
}
}
]
};
errorChart.setOption(errorOption);
errorChart.hideLoading();//取消loading
}
}
eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus);
errorTypeStatics(errorBeginDate,errorEndDate,errorType,errorStatus);
</script>
</body>
</html>