<html>
<head>
<title>儀表管理</title>
<body >
<!--layer -->
<script type="text/javascript" src="${ctxStatic}/layer-v2.3/layer/layer.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/layer-v2.3/layer/skin/layer.css">
<script src="${ctxStatic}/layui/layui.js" type="text/javascript"></script>
<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" />
<div id="select" tabName="儀表,建築,線路,設備,區域" tabLength="5" tabType="1,2,3,4,5"
tabUrl="${ctx}/utils/Select/selectMeter"secondUrl="${ctx}/utils/Select/secondMeter"
buildId="" lineId="" meterId="" buildName="" lineName="" measureName=""
cjqId="" officeId="" cjqNo="" officeName="">
</div>
<!-- tabName 頁簽名稱 ；tabLength 頁籤頁數 ； tabType 頁籤類型 與tabName一一對應：儀表（1）建築（2）線路（3）設備（4）區域（5）-->
<!--tabUrl與secondUrl不需要更改 ；buildId， lineId，meterId。。。。officeName 可通過 $("#select").attr("buildId") 來獲取某個ID值-->
</body>
</html>
<script type="text/javascript">
var types;
var url;
var secondUrl;
var length;
$(function(){
var div=document.getElementById("select").style.height="55px";//頁面div 高度
var name=$("#select").attr("tabName");//獲取tabs的名字
length=$("#select").attr("tabLength");//獲取tabs頁籤數
var type=$("#select").attr("tabType");//獲取tabs類型
url=$("#select").attr("tabUrl");//獲取tabsURL路徑
secondUrl=$("#select").attr("secondUrl");//獲取tabs類型
var names=name.split(","); //字符分割
types=type.split(","); //字符分割
$("#select").append("<div id='tabdiv' class='layui-tab layui-tab-brief' lay-filter='inputTabs' style=''>"
+"<ul id='tabul' class='layui-tab-title' style=''></ul><input type='hidden' id='val'/></div>"
);
for (var int = 1; int < parseInt(length)+1; int++) {
if(int==1){
$("#tabul").append("<li id='"+int+"' lay-id='"+types[int-1]+"' class='layui-this' style='background: #1694e0;color: #fff;border-bottom: 0px solid #fff;height: 25px;'><strong> "+names[int-1]+" </strong></li>")
}else{
$("#tabul").append("<li id='"+int+"' lay-id='"+types[int-1]+"' style='border: 0px solid #fff;height: 25px;'><strong> "+names[int-1]+" </strong></li>")
}
}
$("#select").append("<div id='inputdiv'> <input id='inputText' type='text' style='width: "+(parseInt(length)*66+100)+"px;height: 30px;float: left;border: 2px solid #1694e0' oninput='meterInput(event)' onclick='meterOnchick()'/>"
+"</div>"
+"<div id='meterdiv'style=' position: absolute; display:none ; width: "+(parseInt(length)*66+180)+"px; z-index: 10; background: #fff; max-height: 300px; overflow-x: hidden; text-align: left; overflow-x: hidden;border: 2px solid #1694e0;border-top:
0px solid #1694e0;height: 280px;' </div> "
);
$("#inputdiv").append("<button style='width: 80px;height: 30px;background: #1694e0;display:block;border: 2px solid #1694e0;color: #fff' onclick='sousuo()' onmouseout=''>搜索</button>");
document.getElementById("val").value=types[0];//默認展開第一個tabs
});
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊
element.on('tab(inputTabs)', function(){
location.hash = 'inputTabs='+ this.getAttribute('lay-id');
var val= this.getAttribute('lay-id');
$("#inputText").val("");
var lis = $('#tabul li');
for(var i=0;i<lis.length;i++){
var li = lis[i];//獲取每個li元素
li.style.background="";
li.style.color="";
}
this.style.background="#1694e0";
this.style.color="#fff";
document.getElementById("val").value=val;
});
});
//輸入框單機事件
function meterOnchick(){
$("#meterdiv").empty();
var val=$("#val").val();
var content=$("#inputText").val();
document.getElementById("meterdiv").style.display = "";
$.ajax({
url : url,
data:{
"content" : content,
"flag":val
},
async : false,
type : "POST",
dataType : 'json',
success : function (data){
var json = data;
//拼接下拉選項
$(json).each(function(index, obj) {
if(val==1){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'>" +"("+ obj.meterNo+")"+obj.measureName+ "</li>");
}else if(val==2){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "' onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.buildName+ "</li>");
}else if(val==3){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.lineName+ "</li>");
}else if(val==4){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.cjqNo+ "</li>");
}else if(val==5){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.officeName+ "</li>");
}
});
}
});
}
//輸入框輸入事件
function meterInput(event){
var val=$("#val").val();
var content=$("#inputText").val();
document.getElementById("meterdiv").style.display = "";
$.ajax({
url : url,
data:{
"content" : content,
"flag":val
},
async : false,
type : "POST",
dataType : 'json',
success : function (data){
var json = data;
//清空下拉選項顯示的div位置
$("#meterdiv").empty();
//拼接下拉選項
$(json).each(function(index, obj) {
if(val==1){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'>" +"("+ obj.meterNo+")"+obj.measureName+ "</li>");
}else if(val==2){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "' onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.buildName+ "</li>");
}else if(val==3){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "' onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.lineName+ "</li>");
}else if(val==4){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.cjqNo+ "</li>");
}else if(val==5){
$("#meterdiv").append("<li id='meterli' class='auto' style='margin-bottom: 0px; 'text='" + obj.id + "'onmouseover='suspensionenter(this);' onmouseout='suspensionA(this)'>" + obj.officeName+ "</li>");
}
});
}
});
}
//下拉單機事件
$('#meterli').live('click', function() {
var meterId = $(this).attr("text");
document.getElementById("inputText").value = $(this).text();
$('#meterdiv').css('display', 'none');
var val=$("#val").val();
var stime=$("#stime").val();
var etime=$("#etime").val();
if(val==2){
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":meterId,"cjqId":"","meterId":"","ztreeLineId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
$("#select").attr("buildId",meterId);
$("#select").attr("lineId","");
$("#select").attr("meterId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
}else if(val==3){
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":meterId,"buildId":"","cjqId":"","meterId":"","ztreeLineId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
$("#select").attr("lineId",meterId);
$("#select").attr("buildId","");
$("#select").attr("meterId","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
}else if(val==1){
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":meterId,"ztreeLineId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
$("#select").attr("meterId",meterId);
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
}else if(val==4){
$("#select").attr("cjqId",meterId);
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$("#select").attr("buildId","");
$("#select").attr("lineId","");
$("#select").attr("meterId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":meterId,"meterId":"","ztreeLineId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
}else if(val==5){
$("#select").attr("officeId",meterId);
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$("#select").attr("cjqId","");
$("#select").attr("buildId","");
$("#select").attr("lineId","");
$("#select").attr("meterId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":meterId,"lineId":"","buildId":"","cjqId":"","meterId":"","ztreeLineId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
}
$('#meterdiv').empty();
});
//點擊輸入框意外的位置關閉下拉項
$(document).bind('click', function(e) {
var e = e || window.event; //瀏覽器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循環判斷至跟節點，防止點擊的是div子元素
if (elem.id && elem.id == 'meterdiv') {
return;
}
if (elem.id && elem.id == 'inputText') {
return;
}
elem = elem.parentNode;
}
$('#meterdiv').css('display', 'none'); //點擊的不是div或其子元素
});
//搜索
function sousuo(){//搜索
var content=$("#inputText").val();
var val=$("#val").val();
var stime=$("#stime").val();
var etime=$("#etime").val();
if(val==2){
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","buildName":content,"lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
$("#select").attr("buildName",content);
$("#select").attr("meterId","");
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
}else if(val==3){
$("#select").attr("lineName",content);
$("#select").attr("meterId","");
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("buildName","");
$("#select").attr("measureName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","lineName":content,"measureName":"","buildName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
}else if(val==1){
$("#select").attr("measureName",content);
$("#select").attr("meterId","");
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","measureName":content,"lineName":"","buildName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
}else if(val==4){
$("#select").attr("measureName","");
$("#select").attr("meterId","");
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo",content);
$("#select").attr("officeName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","measureName":"","lineName":"","buildName":"","cjqNo":content,"officeName":""},page:1}).trigger("reloadGrid");
}else if(val==5){
$("#select").attr("measureName","");
$("#select").attr("meterId","");
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName",content);
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","measureName":"","lineName":"","buildName":"","cjqNo":"","officeName":content},page:1}).trigger("reloadGrid");
}
}
//懸浮事件
function suspensionenter(obj){
$("#builddiv").remove();
var val=$("#val").val();
$(obj).css("background-color","#DCEBF9");
var ids = $(obj).attr("text");
$("#meterdiv").append("<div id='builddiv' style='width: "+(parseInt(length)*66+180)*0.6+"px;background: #f4f4f4;z-index: 100;right: 0px;position: absolute;top: 0px;max-height: 100%;height: 100%;overflow-x: hidden;overflow-x: hidden;'></div>");
$.ajax({
url : secondUrl,
data:{
"ids" : ids,
"flag":val
},
async : false,
type : "POST",
dataType : 'json',
success : function (data){
var json = data;
$(json).each(function(index, obj) {
$("#builddiv").append("<li id='buildli' class='autobuild' style='margin-bottom: 0px;background: #f4f4f4; 'text='" + obj.id + "' onmouseover='buildmover(this);' onmouseout='buildmousechu(this)'>"+obj.measureName+ "</li>");
});
}
});
}
function suspensionA(obj){
$(obj).css("background-color","#fff");
}
function buildmover(obj){
$(obj).css("background-color","#DCEBF9");
}
function buildmousechu(obj){
$(obj).css("background-color","#f4f4f4");
}
// 二級下拉事件
$('#buildli').live('click', function() {
var meterId = $(this).attr("text");
var stime=$("#stime").val();
var etime=$("#etime").val();
// document.getElementById("inputText").value = $(this).text();
$('#meterdiv').css('display', 'none');
$("#select").attr("meterId",meterId);
$("#select").attr("lineId","");
$("#select").attr("buildId","");
$("#select").attr("buildName","");
$("#select").attr("lineName","");
$("#select").attr("measureName","");
$("#select").attr("cjqId","");
$("#select").attr("officeId","");
$("#select").attr("cjqNo","");
$("#select").attr("officeName","");
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"officeId":"","lineId":"","buildId":"","cjqId":"","meterId":meterId,"ztreeLineId":"","ztreeBuildId":"","propertyId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
$('#meterdiv').empty();
});
function rese(){
var stime=$("#stime").val();
var etime=$("#etime").val();
$('#table_list').setGridParam({postData:{"stime":stime,"etime":etime,"officeId":"","lineId":"","buildId":"","cjqId":"","meterId":"","ztreeLineId":"","ztreeBuildId":"","propertyId":"","buildName":"","lineName":"","measureName":"","cjqNo":"","officeName":""},page:1}).trigger("reloadGrid");
}
</script>