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

tab事件

ui tag 
阅读更多
<%@ 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>
分享到：
| 看变量jsp中包了几层从debug看
评论
发表评论

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

相关推荐

    Windows编程中获取Alt+Tab事件

    在Windows编程领域，获取Alt+Tab事件是一项关键的技术，它涉及到窗口管理、系统级钩子以及消息处理等概念。Alt+Tab是Windows操作系统中的一个快捷键组合，用户按下时可以在打开的应用程序之间快速切换。作为开发者，...

    Ace Admin Tab页实现

    这时，可以在点击Tab事件中异步加载内容，并在加载完成后显示。 5. **API和插件**：Ace Admin可能还提供了API或插件来更方便地管理Tab页，例如添加、删除、切换Tab等功能。查阅Ace Admin的文档可以找到这些功能的...

    zepto实现的简洁tab选项卡，实现超简单的，亲测可用

    zepto实现的简洁tab选项卡，亲测可用

    高仿网易安卓客户端动态添加删除tab

    7. **监听Tab事件**：为了响应用户的添加、删除和拖放操作，我们需要设置合适的监听器。例如，TabLayout的OnTabSelectedListener可以用来处理Tab的选择变化，而自定义的拖放监听器则用于处理拖放过程中的各种事件。 ...

    Ext.net Enter实现Tab功能

    这意味着，无论何时用户按下Enter键，浏览器都将接收到一个Tab键的事件，从而实现了将Enter键的功能转换为Tab键的功能。 ### 应用场景与优势 这种实现方式特别适用于需要频繁切换焦点的表单或数据输入界面。例如，...

    flex checkboxtree 和可增加面板,可关闭的tab页

    3. **事件处理**：当用户点击关闭按钮时，触发一个事件，然后在父容器（即`TabNavigator`）中处理该事件，移除对应的`Tab`。 4. **添加新Tab**：提供一个接口让用户添加新的`Tab`，这可能包括输入新Tab的标题或其他...

    仿时刻事件TAB切换

    在IT行业中，网页交互设计是至关重要的一环，而"仿时刻事件TAB切换"是一个常见的网页交互功能，它能够提升用户体验，使用户在浏览网站时更加便捷地切换不同内容板块。这个功能主要涉及到JavaScript（JS）编程语言...

    组件-uniapp中tab切换，底部内容跟着移动，相反，底部移动，tab也跟着切换-组件

    接下来，我们要处理点击Tab事件和内容区域滑动事件。 uni-app提供了`@click`事件监听器来捕获用户的点击行为，当用户点击某个Tab时，可以通过改变数据绑定（如`v-model`）来切换当前选中的Tab。同时，我们需要监听`...

    [源码]Android开发 漂亮底部Tab栏 标签 选项卡制作教程

    6. **监听器（Listener）**：为了响应用户点击Tab事件，需要设置`BottomNavigationView.OnNavigationItemSelectedListener`。在这个监听器中，你可以根据选择的菜单项切换对应的Fragment或者执行其他逻辑。 7. **...

    Jquery 仿Flash Tab 切换

    - JavaScript/jQuery代码：编写逻辑以响应用户点击Tab事件，切换内容的显示与隐藏。 3. **jQuery实现** - 事件绑定：使用`click()`方法绑定点击事件到Tab导航的每个元素上。 - 数据存储：可以使用jQuery的`data...

    asp.net Tab

    4. 配置Tab事件：可以通过代码或控件属性设置默认选中的Tab页，以及处理用户切换Tab页时的事件。 5. 后台处理：在后台代码中，可以对Tab控件进行更复杂的操作，比如根据用户权限动态添加或移除Tab页，或者在切换Tab...

    操作系统进程内存管理模拟特别版.rar_Tabú_内存管理_内存管理模拟

    操作系统进程内存管理模拟 有关此程序的功能请见程序中的帮助菜单 程序难点1：创建Windows xp中按钮样式 解决方法：使用标签控件与形状控件一起形成此样式 此方法缺点：由于标签没有TAB事件，所以不能使用键盘控制...

    UMeditor可实现tab缩进控制

    1. **监听tab事件**：在UMeditor的源代码中，添加对tab按键的监听，当检测到tab键被按下时，执行相应的缩进操作。 2. **缩进逻辑**：定义缩进的单位，比如每次tab键按下的时候，文本向右移动几个空格或者一个制表符...

    解决Vue对Element中的el-tab-pane添加@click事件无效

    解决Vue对Element中的el-tab-pane添加@click事件无效

    vb.net keydown事件中捕捉tab按键

    在这个场景中，我们要关注的是如何在`KeyDown`事件中特别处理`Tab`按键，以便在不依赖消息拦截的情况下实现特定功能。 `KeyDown`事件由控件或窗体引发，可以通过在代码中为该控件或窗体添加事件处理程序来响应。...

    横向和树形tab tab菜单

    通过JS，我们可以监听用户的点击事件，根据用户的选择切换显示的内容。常见的JS库如jQuery、React、Vue等都提供了方便的Tab组件，可以轻松地实现Tab切换功能。开发者可以自定义切换动画、设置默认选中项、处理边缘...

    bootstrap-closable-tab tab可关闭组件

    例如，它如何添加事件监听器，如何构建DOM元素，以及如何在Tab关闭时清理相关资源。 在`bootstrap-closable-tab-master`这个压缩包中，你可能会找到以下文件： - `js` 文件夹：包含实现这个功能的JavaScript代码，...

    bootstrap动态生成tab

    5. **事件处理和DOM操作**：在JavaScript中，我们需要熟练掌握事件监听（如`addEventListener`）和DOM操作（如`createElement`, `appendChild`, `removeChild`等）来实现动态生成和删除Tab。此外，理解Bootstrap的...

    纵向书签式Tab页

    3. **jQuery交互**：利用jQuery选择器和事件监听器，当用户点击某个Tab标题时，显示相应的内容区域，并隐藏其他内容。同时，可以通过添加/移除类名来实现过渡效果。 4. **响应式设计**：考虑到不同设备和屏幕尺寸，...

    MFC 多文档程序 用Tab页显示的方式

    7. **代码组织**：为了保持代码的清晰和可维护性，可以创建一个专门的类来封装Tab页管理逻辑，继承自CWnd或CControlBar，这样可以将Tab页相关的功能和事件处理封装在一起。 总的来说，"MutDocWithTabBar"项目展示了...

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