`
y806839048
  • 浏览: 1121129 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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>
分享到：
| echart require js 回调
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    chrome插件开发 - tab页面切换插件

    在这个“chrome插件开发 - tab页面切换插件”项目中，我们关注的焦点是如何创建一个工具，帮助用户更高效地管理他们打开的多个页面，特别是在多屏幕环境中进行快速切换。 首先，我们需要了解Chrome插件的基础结构。...

    使用Iframe实现TAB页面切换

    这种技术常用于实现TAB页面切换，即在一个固定的区域通过切换不同的内容来模拟多个独立页面的效果，提高用户体验。下面将详细探讨如何使用Iframe实现TAB页面切换，以及与之相关的知识点。 首先，理解Iframe的基本...

    jQuery全屏TAB页面切换代码.zip

    本项目“jQuery全屏TAB页面切换代码”利用jQuery的特性实现了一个全屏页面切换的效果，适用于创建现代、响应式的网页布局。 在网页设计中，选项卡（Tab）布局是一种常见的信息展示方式，它可以有效地组织内容，使得...

    电信设备-实现多Tab页面切换的方法及其触摸式移动终端.zip

    在现代的移动应用开发中，多Tab页面切换已经成为一种常见的用户界面设计，尤其在电信设备和触摸式移动终端上，这种交互方式极大地提升了用户体验。本文将深入探讨如何在电信设备和触摸式移动终端上实现多Tab页面切换...

    ViewPager结合Fragment实现Tab页面切换以及ViewPager实现Banner图循环

    通过以上步骤和技巧，你可以构建一个功能完善的Tab页面切换和Banner图循环的Android应用。在实际项目中，可能还需要根据具体需求进行定制和优化，例如添加触摸反馈、添加滑动监听事件等。在提供的"ViewPager实用Demo...

    左侧导航与tab页切换HTML示例

    Tab页切换是一种将大量信息分组并按需显示的方法，它能保持页面的整洁，减少用户的认知负担。在HTML中，我们可以通过`&lt;div&gt;`标签创建tab页容器，每个tab页可以用`&lt;div&gt;`或`&lt;section&gt;`表示，初始时隐藏除第一个外的...

    Android滑动切换tab（切换带动画）

    `ViewPager`允许用户通过左右滑动来浏览页面，而`TabLayout`则提供了Tab标签的显示和管理。下面我们将逐步讲解如何构建这样的组件。 1. **添加依赖库**：在项目的`build.gradle`文件中，确保你已经添加了必要的依赖...

    jQuery全屏TAB页面切换特效代码

    **jQuery全屏TAB页面切换特效代码详解** 在网页设计中，全屏的TAB页面切换是一种常见且有效的用户体验设计模式，它能充分利用屏幕空间，展示丰富的内容，并提供流畅的浏览体验。"jQuery全屏TAB页面切换特效代码...

    Android Studio 入门：（二） 主页面的Tab切换

    点击不同的tab，出现不同的页面   二、编码思路 三、代码展示 //MainActivity package com.e.spirit; //import androidx.appcompat.app.AppCompatActivity; //import androidx.fragment.app.Fragment; //import ...

    vue 页面tabs切换,替换iframe

    在Vue.js应用中，开发人员经常需要实现动态的页面切换效果，例如在多个Tab之间进行导航。在这种场景下，原始的iframe技术可能会显得过时，因为它通常不支持单页应用（SPA）的特性，如路由管理和组件状态管理。标题...

    React-Native 实现点击Tab标签切换Tab页面

    本教程将详细介绍如何使用React-Native中的TabBar组件来实现点击Tab标签切换Tab页面的功能。 首先，我们需要了解React-Native的基础知识。React-Native是由Facebook开发的一个开源框架，它允许开发者使用JavaScript...

    微信小程序实现tab页面切换功能

    微信小程序实现tab页面切换功能主要涉及到微信小程序的前端开发技术，包括WXML、WXSS和JavaScript等几个方面。下面我们将对这些技术进行详细阐述，并展示如何用这些技术实现tab页面的切换。 ### WXML结构设计 在...

    android Tab界面切换

    三种方法实现android tab 界面切换。1、ViewPager+PagerAdapter 2、FragmentManager+Fragment利用FragmentTransaction对fragment进行hide和show操作实现 3、ViewPager+FragmentPagerAdapter ,主activity继承于...

    html5 滑动页面切换tab

    HTML5滑动页面切换Tab是现代网页设计中常见的一种交互方式，它允许用户通过滑动手势或点击Tab来浏览不同的内容区域。这种功能在移动设备上尤其流行，因为触摸屏的交互方式更适合滑动操作。以下是对这个主题的详细...

    jQuery全屏TAB页面切换代码

    jQuery全屏TAB页面切换代码是一款通过鼠标滚动页面或点击导航，tab页面滚屏切换效果代码。

    fragment+仿iosTab切换按钮

    在Android开发中，为了实现与iOS类似的Tab切换效果，开发者经常使用`Fragment`结合自定义布局来构建。本文将深入探讨如何使用`Fragment`来模仿iOS的Tab切换按钮，同时结合`Android IOSTab`的相关概念，以项目...

    JS实现Tab内容切换，页面不刷新，内容切换，网址变化

    在网页开发中，Tab内容切换是一种常见的用户交互设计，它允许用户在不同的内容板块之间进行切换，而无需重新加载整个页面。本主题聚焦于使用JavaScript（JS）来实现在不刷新页面的情况下，实现Tab内容的切换，并且在...

    Tab效果切换页面

    在IT行业中，Tab效果切换页面是一种常见的用户界面设计，它为用户提供了一种便捷的方式来浏览和交互多视图的内容。在本教程中，我们将探讨如何实现这样的功能，包括点击和滑动切换，以及相关的编程概念。 首先，让...

    左右移动tab页面切换效果

    这是可以实现了左右移动tab页面切换效果，源码Tab Carousel，实现特殊效果的tab界面，左右移动tab的时候，页面的切换会有淡入淡出的效果，除了可以左右切换tab之外，每个tab还可以上下滑动，也就是所谓的 Panels ...

Magicbox
Global site tag (gtag.js) - Google Analytics