tab事件

最新推荐文章于 2022-09-02 15:26:54 发布
最新推荐文章于 2022-09-02 15:26:54 发布
阅读量207 收藏
点赞数
分类专栏： tab 页面切换 文章标签： ui tag
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y666666y/article/details/84708316
版权
<%@ 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>
yuhui66666688gfbfdy
关注
专栏目录
Windows编程中获取Alt+Tab事件
06-17
在Windows编程领域，获取Alt+Tab事件是一项关键的技术，它涉及到窗口管理、系统级钩子以及消息处理等概念。Alt+Tab是Windows操作系统中的一个快捷键组合，用户按下时可以在打开的应用程序之间快速切换。作为开发者，...
移动web开发----Tab基础事件
陈开心的博客
09-07 999
移动web页面上的click事件响应会慢300ms。 300ms延迟怎么办？使用Tap事件代替click事件，Tap事件是一个自定义事件。 自定义Tap事件原理： 在touchstart，touchend时记录时间，手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且事件间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认...
css实现tab事件
weixin_34127717的博客
05-17 117
1、利用label for 属性 （规定 label 与哪个表单元素绑定）。2、利用radio的checked 属性 显示隐藏。html代码 <nav class="accordion arrows"> <header class="box"> <label for="acc-close" class="box-title">A...
选项卡（Tab）切换事件
weixin_30273175的博客
11-13 757
选项卡切换事件 <style type="text/css"> *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} #container{ width: 398px; margin: 100px au...
JS实现Tab切换
gaohaiyangshs的博客
04-12 369
实现效果如下:![](https://img-blog.csdnimg.cn/img_convert/caca593adc843b6ffb00cbb9a2e01dfb.gif#clientId=u82a3415c-ad73-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=581&id=u799ec846&margin=[object Object]&originHeight=641&amp
仿时刻事件TAB切换
08-24
在IT行业中，网页交互设计是至关重要的一环，而"仿时刻事件TAB切换"是一个常见的网页交互功能，它能够提升用户体验，使用户在浏览网站时更加便捷地切换不同内容板块。这个功能主要涉及到JavaScript（JS）编程语言...
tab control code
最新发布
12-21
在Windows编程中，"tab control" ...综上所述，"tab control code"涉及到Windows GUI编程、MFC框架、控件操作、事件处理和资源管理等多个方面。通过理解和运用这些知识点，开发者可以构建出功能丰富、用户友好的界面。
tab栏切换原理
11-28
《Tab栏切换原理详解》 在网页设计中，Tab栏切换是一种常见的交互方式，它能够有效地组织信息，提高用户体验。本文将深入解析Tab栏切换的实现原理，特别适合JavaScript初学者学习。 一、基础 - 排他思想 Tab栏...
jquery渐变切换tab标签
06-10
对于"jQuery 渐变切换Tab标签"，其核心在于利用jQuery的事件监听和CSS样式修改来实现色彩渐变的切换效果。具体步骤如下： 1. **HTML结构**：首先，我们需要设置HTML结构，包括Tab的标题（通常用`<li>`元素包裹）和...
tab点击事件（地区选择-简单demo）
12-05
简单的一个tab效果。无病毒。没有数据传输，纯静态页面
Qt中特殊Tab键事件的实现
lxhjh的专栏
05-09 3260
在Qt中,可以使用 void QWidget::keyPressEvent ( QKeyEvent * k )来进行键盘响应,例如: void Widget::keyPressEvent(QKeyEvent *event) { if ((event->key()==Qt::Key_Enter)||(event->key()==Qt::Key_Return)){ //回车(小键
项目优化之监听tab切出事件
weixin_44258574的博客
09-02 1419
项目中有页面用到了自动订阅数据 多余的请求会加重服务端的压力所以进行了一点小优化
对话框处理TAB按键事件的三种方法
Mr.Out的专栏
04-14 1439
对话框（Dialog）分为模态对话框和非模态对话框（Modeless Dialog）。非模态对话框不能处理TAB键、快捷键等按键事件，也就是说用户不能在非模态对话框中通过按TAB键切换各控件之间的焦点（Focus）。但这也不是没有解决办法的。方法一在MSDN中，让非模态对话框处理TAB按键事件的经典代码如下：HINSTANCE hinst;HWND hwndMain;HWND hw
tab菜单事件
weixin_33815613的博客
12-09 117
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .tab_head{ overflow: hidden; } button{ width: 50px; ...
TabLayout tab点击事件几种实现方式
ezconn的博客
03-14 5516
一，简介TabLayout是Android的Design库中的控件，常用于导航栏的实现；常用组合一般TabLayout结合ViewPager+Fragment的使用实现滑动的标签（头部导航栏或者标签栏）选择器。这篇不讲具体使用，主要讲如何单独监听每个tab的点击事件； 二，单独监听每个tab的点击事件 目前亲测的有两种： 2.1，单独使用TabLayout，代码中动态设置TabLayout的tab，然后为每个Tab单独设置点击事件； xml布局 <?xml version="1.0" en
TabHost tab项单击事件
如果爱，请深爱！
05-22 274
TabHost 选项发生变化时会触发OnTabChangedListener事件，但是如果当前已经选中第一项，再次单击该项时，OnTabChangedListener不会触发该事件，所以再次单击选中tab项时，想处理页面内容，会比较麻烦，因为没有事件触发 getTabWidget().getChildAt(0).setOnClickListener(new OnClickListener()...
js调用tab事件
05-27
在JavaScript中，可以通过addEventListener方法来监听Tab事件，代码如下： ```javascript var input = document.getElementById("inputId"); input.addEventListener("keydown", function(event) { if (event....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值