tab 页面切换

//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>

猜你喜欢