js
/*! * jQuery ztreeSelect 1.00(用requere.js方式引入) */ (function (factory){ if (typeof define === 'function' && define.amd){ define(['jquery','ztree.core','ztree.excheck'],factory); }else if(typeof exports === 'object'){ module.exports = factory; }else{ factory(jQuery); } }(function($){ $.fn.selZtree = function(params){ var curObj = $(this); if($.type(params) != 'object'){ return; }else{ if(curObj.length > 1){ curObj.each(function(){ $(this).selZtree(params);//处理循环建立树 }); }else{ params.selector = '#'+curObj[0].id; curObj.data('treeData',new selZtreePro(params,curObj)); } } }; /** * 下拉选择树的构造函数 * @param params 传递的参数 */ function selZtreePro(params,curObj){ //default params this.defaultParams ={ complete:function(){}, async:false, checkMore:false, dataParams:{}, selector:curObj.selector, url:'' }; this.ztreeObj = {}; //当前对象 this.curObj = curObj; curObj.siblings('.ztreeInput').remove(); this.formObj = curObj.after("<input class='ztreeForm ztreeInput' readonly='readonly'/>").next();//建立input节点 //添加展示树的div this.treeObj = this.formObj.after("<div><ul class='ztree' id="+"ztree"+(new Date().getTime())+" style='background:#fff;margin:0px;margin-top:2px;padding:5px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;'></ul></div>").next().find('ul'); //设置下拉框中树的位置 this.setTreePos(); //初始化树 this.initTree(params); } //区域树原型，实现方式继承 selZtreePro.prototype = { setting:{ data:{ simpleData: { enable: true } }, async: { enable: false, url:"", autoParam:["id", "name=n", "level=lv"], otherParam:{"otherParam":"zTreeAsyncTest"}, dataFilter: function(){} } }, zNodes:[], initTree:function(params){//初始化树 var that = this; $.extend(this.defaultParams,params); that.getData(function(data){ that.initParams(data); that.buildTree(data); that.showTree(); that.clickOtherArea(); that.processValue(); that.selectNode(); that.change(); that.defaultParams.complete(that.ztreeObj,that); }); }, /** * 初始化页面输入框参数 * @param data 后台区域数据数组 */ initParams:function(data){ var eleObj = this.defaultParams.initValue ,id=''; var name = ''; if( eleObj != null){ for(var i = 0,ele;ele = eleObj[i];i++){ id += ele['id']+','; name += ele.name+','; } }else{ id = data[0].id; name = data[0].name; this.defaultParams.initValue = data[0]; } //id = id.substr(0,id.length-1); name = name.replace(/,$/,''); this.setValue(id,name); // this.setValue(eleObj['id'],eleObj['name']); /*if (this.zNodes.length > 0){ return; }*/ for(var i = 0,ele;ele = data[i];i++) { ele.icon = path +'/'+ ele.icon; this.zNodes.push(ele); } }, //更新节点信息，主要有名字，图标 updateNodes:function(nodes){ for(var i = 0,ele;ele = nodes[i];i++){ var node = this.ztreeObj.getNodeByParam("id",parseInt(ele['id']),null); try{ ele.name && (node.name = ele.name); ele.icon && (node.icon = ele.icon); ele.iconSkin && (node.iconSkin = ele.iconSkin); }catch(e){}; this.ztreeObj.updateNode(node); } }, //点击click触发事件 processValue:function(){ var that = this; /* this.ztreeObj.setting.callback.onMouseDown = function(event){ var node = that.ztreeObj.getSelectedNodes(); if( node.length > 1 && !event.ctrlKey){ that.treeObj.hide(); return false; }else{ return true; } };*/ this.ztreeObj.setting.callback.onClick = function(event){ var id='',name=''; var callback = that.defaultParams.onclick; var node = that.ztreeObj.getSelectedNodes(); for(var i = 0,ele;ele = node[i];i++){ id += ele['id']+','; name += ele.name+','; } id = id.substr(0,id.length-1); name = name.replace(/,$/,''); that.setValue(id,name); !event.ctrlKey && that.treeObj.hide() && that.treeObj.parent().hide(); callback && callback();//click事件回调 }; }, //选中节点 selectNode:function(selectArr){ var initObj = selectArr || this.defaultParams.initValue; for(var i = 0,ele;ele = initObj[i];i++){ var node = this.ztreeObj.getNodeByParam("id",parseInt(ele['id']),null); if(node){ this.ztreeObj.selectNode(node,false); this.setValue(node.id,node.name); } } }, //设置input值 setValue:function(id,name){ var obj = this.curObj; var formObj = this.formObj; obj.val('').text(''); formObj.val('').text(''); obj.val(id).text(name); formObj.val(name).text(id); if(this.treeObj.parent(".slimScroll")){ this.treeObj.parent(".slimScroll").hide(); this.treeObj.parent(".slimScroll").getNiceScroll().hide(); } }, //onchange事件 change:function(){ var oldAreaName = ""; var that = this; var callback = that.defaultParams.onchange; // 获得焦点时，启动定时器 this.treeObj.mouseenter(function(){ oldAreaName = that.formObj.val(); }); this.treeObj.mouseout(function(){ if(that.formObj.val() != oldAreaName) { callback && callback(); } }); }, //得到后台区域信息 getData:function(callback){ $.post(this.defaultParams.url,this.defaultParams.dataParams,function(dataArr){ if (callback != null){ callback(dataArr); } }); }, //建立树 buildTree:function(datas){ this.ztreeObj = $.fn.zTree.init(this.treeObj, this.setting,datas); var nodes = this.ztreeObj.getNodes(); this.setTreePos(); this.treeObj.hide(); if(this.treeObj.parent(".slimScroll")){ this.treeObj.parent(".slimScroll").hide(); this.treeObj.parent(".slimScroll").getNiceScroll().hide(); } }, // to show tree showTree:function(){ var that = this; this.formObj.off('focus').on('focus',function(){ that.formObj.next().find('.ztree').hide(); that.setTreePos(); if(that.treeObj.parent(".slimScroll")){ that.treeObj.parent(".slimScroll").show(); that.treeObj.parent(".slimScroll").getNiceScroll().show(); } that.treeObj.show(); $(that.treeObj.parent()).niceScroll({ cursorcolor: "#00aea2",//滚动条颜色 cursor "5px", //滚动条的宽度 cursorborder: "0", // 滚动条边框css定义 cursorborderradius: "5px",//以像素为滚动条边界半径 autohidemode: false, // 隐藏滚动条的方式 railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距 background: "", // 轨道的背景颜色 horizrailenabled: true, // nicescroll可以管理水平滚动 oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动 zindex: 250, spacebarenabled: false // 当按下空格时使页面向下滚动 }); $(that.treeObj.parent()).getNiceScroll().resize(); }); //util.setSlimScroll(); }, clickOtherArea:function(){ var that = this; $(document).on('click',function(event){ if(that.isCheck(event)){ return; }else{ that.treeObj.hide(); if(that.treeObj.parent(".slimScroll")){ that.treeObj.parent(".slimScroll").hide(); that.treeObj.parent(".slimScroll").getNiceScroll().hide(); } } }); }, // to judge tree in div isCheck:function(event){ var obj = $(event.target); if( obj.is('.ztree,.ztreeForm,.ztree *')||event.target == this.curObj[0]){ return true; }else{ return false; } }, //to set tree-div height and positon setTreePos:function(){ this.treeObj.parent().hide(); this.treeObj.parent().css({ 'z-index':10, position:'absolute', left:this.formObj.position().left, top:this.formObj.position().top + this.formObj.height() + 2, 140, height:200, 'box-shadow':'0 2px 6px #999', 'border-radius': '5px', background:"#FFF", /* this.formObj.width() + 2*/ }); this.treeObj.parent().addClass("slimScroll"); //util.setSlimScroll(); } }; }));
css
/*------------------------------------- zTree Style version: 3.5.19 author: Hunter.z email: hunter.z@263.net website: http://code.google.com/p/jquerytree/ -------------------------------------*/ .areaTreeStyle{ display: inline; width: 150px; } .treeShow{ border: 1px solid #c5c5c5; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; border-radius:3px; height: 20px; width:158px; border:1px solid #BFBFBF; } .treediv{ display:none; position:absolute; overflow-y:auto; width:158px; line-height:0px; height:200px; padding-top:4px; background:#fff; color:#fff; border:1px solid #cccccc } .ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif} .ztree {margin:0; padding:5px; color:#333; box-sizing:border-box;} .ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0} .ztree li ul{ margin:0; padding:0 0 0 18px} .ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;} .ztree li a {padding:0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent; text-decoration:none; vertical-align:top; display: inline-block} .ztree li a:hover {text-decoration:none} .ztree li a.curSelectedNode {padding-top:0px; background-color:#0993f2; color:#fff; height:18px; text-decoration: none; } .ztree li a.curSelectedNode span{color:#fff !important;} .ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:18px; border:1px #FFB951 solid; opacity:0.8;} .ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:18px; border:1px #316AC5 solid; opacity:0.8; filter:alpha(opacity=80)} .ztree li a.tmpTargetNode_prev {} .ztree li a.tmpTargetNode_next {} .ztree li a input.rename {height:14px; width:80px; padding:0; margin:0; font-size:12px; border:1px #7EC4CC solid; *border:0px} .ztree li span {line-height:18px; margin-right:2px; padding-bottom:2px; display: inline-block; white-space:nowrap;} .ztree li span.button { line-height:0; margin:0; width:17px; height:17px; display: inline-block; vertical-align:middle; border:0 none; cursor: pointer;outline:none; background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif"); } .ztree li .curSelectedNode span.button { background-image:url("./img/zTreeStandard_cur.png"); } .ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto} .ztree li span.button.chk.checkbox_false_full {background-position:0 0} .ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px} .ztree li span.button.chk.checkbox_false_part {background-position:0 -28px} .ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px} .ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px} .ztree li span.button.chk.checkbox_true_full {background-position:-14px 0} .ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} .ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px} .ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} .ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px} .ztree li span.button.chk.radio_false_full {background-position:-28px 0} .ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px} .ztree li span.button.chk.radio_false_part {background-position:-28px -28px} .ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px} .ztree li span.button.chk.radio_false_disable {background-position:-28px -56px} .ztree li span.button.chk.radio_true_full {background-position:-42px 0} .ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px} .ztree li span.button.chk.radio_true_part {background-position:-42px -28px} .ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px} .ztree li span.button.chk.radio_true_disable {background-position:-42px -56px} .ztree li span.button.switch {width:18px; height:18px} /* .ztree li span.button.root_open{background-position:-92px -54px} .ztree li span.button.root_close{background-position:-74px -54px} .ztree li span.button.roots_open{background-position:-92px 0} .ztree li span.button.roots_close{background-position:-74px 0} .ztree li span.button.center_open{background-position:-92px -18px} .ztree li span.button.center_close{background-position:-74px -18px} .ztree li span.button.bottom_open{background-position:-92px -36px} .ztree li span.button.bottom_close{background-position:-74px -36px} */ .ztree li span.button.root_open{background:url("./img/open.png") no-repeat center center;} .ztree li span.button.root_close{background:url("./img/close.png") no-repeat center center;} .ztree li span.button.roots_open{background:url("./img/open.png") no-repeat center center;} .ztree li span.button.roots_close{background:url("./img/close.png") no-repeat center center;} .ztree li span.button.center_open{background:url("./img/open.png") no-repeat center center;} .ztree li span.button.center_close{background:url("./img/close.png") no-repeat center center;} .ztree li span.button.bottom_open{background:url("./img/open.png") no-repeat center center;} .ztree li span.button.bottom_close{background:url("./img/close.png") no-repeat center center;} /*light*/ /* .light .ztree li span.button.bottom_open{background-image:url("./img/open_blue.png");} .light .ztree li span.button.bottom_close{background-image:url("./img/close_blue.png");} .light .ztree li span.button.root_open{background-image:url("./img/open_blue.png");} .light .ztree li span.button.root_close{background-image:url("./img/close_blue.png");} .light .ztree li span.button.roots_open{background-image:url("./img/open_blue.png");} .light .ztree li span.button.roots_close{background-image:url("./img/close_blue.png");} .light .ztree li span.button.center_open{background-image:url("./img/open_blue.png");} .light .ztree li span.button.center_close{background-image:url("./img/close_blue.png");} */ /*dark*/ /* .dark .ztree li span.button.bottom_open{background-image:url("./img/open_blue.png");} .dark .ztree li span.button.bottom_close{background-image:url("./img/close_blue.png");} .dark .ztree li span.button.root_open{background-image:url("./img/open_blue.png");} .dark .ztree li span.button.root_close{background-image:url("./img/close_blue.png");} .dark .ztree li span.button.roots_open{background-image:url("./img/open_blue.png");} .dark .ztree li span.button.roots_close{background-image:url("./img/close_blue.png");} .dark .ztree li span.button.center_open{background-image:url("./img/open_blue.png");} .dark .ztree li span.button.center_close{background-image:url("./img/close_blue.png");} */ .ztree li span.button.noline_open{background-position:-92px -72px} .ztree li span.button.noline_close{background-position:-74px -72px} .ztree li span.button.root_docu{ background:none;} .ztree li span.button.roots_docu{background-position:-56px 0} .ztree li span.button.center_docu{background-position:-56px -18px} .ztree li span.button.bottom_docu{background-position:-56px -36px} .ztree li span.button.noline_docu{ background:none;} .ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle} .ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle} .ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle} .ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle} .ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle} .ztree li span.button.ico_loading{margin:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)} span.tmpzTreeMove_arrow {width:18px; height:18px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute; background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")} ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)} .zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute} .ztree li{ display: block; } .ztreeInput{ margin: 0; padding:0 18px 0 10px; width: 140px; height: 26px; line-height: 26px; color: #666666; vertical-align: middle; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: relative; border: 1px solid rgb(169, 169, 169); background: #fff url(img/icon.png) no-repeat right; box-sizing: border-box; } .ztreeInput:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none; border-color:#0095ff; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } /* .ztree span{ color:#fff; } */ /* level style*/ /*.ztree li span.button.level0 { display:none; } .ztree li ul.level0 { padding:0; background:none; }*/
调用 js
$('#areaCodeSelect').selZtree({
url:'/sys/companyInfo/findAllcomInfo',
dataParams:null,
initValue:null,
onchange:function(){
image_path=ztreeObj.getNodeByParam('id',$('#areaCodeSelect').val()).imagePath.split(';');
},
onclick:function(selnode){
//触发选中后让框隐藏
setTimeout(function () {
$('.ztreeInput').blur();
$('#areaCodeSelect').parent().find('div.slimScroll').hide(); //让自己隐藏
}, 20);
swithData();
},
complete:function(ztree,obj){
ztreeObj=ztree;
image_path=obj.defaultParams.initValue.imagePath.split(';');
swithData();//加载上下
}
});
html
<span>所属企业:</span> <label> <input type="hidden" id="areaCodeSelect" name="areaCode"> <input type="text" class="ztreeInput" maxlength='64'> </label>
效果：
完整代码demo3new.js：
require.config({ baseUrl:'/static/ui/common/', paths:{ 'jquery':'js/libs/jquery-1.11.1.min', 'domReady':'js/functionality/domReady', 'ztree.core':'plugins/other/ztree/jquery.ztree.core', 'ztree.excheck':'plugins/other/ztree/jquery.ztree.excheck', 'tree':'plugins/formElems/downTree/ztreeSelect', 'util':'js/functionality/Util', 'echart':'plugins/chart/echarts.min', 'bootstrap_datetimepicker':'plugins/formElems/time/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min', 'zhCN':'plugins/formElems/time/bootstrap_datetimepicker/js/bootstrap-datetimepicker.zh-CN', 'DialogBySHF':'plugins/formElems/dialogbyshf/js/DialogBySHF', 'nicescroll':'plugins/other/nicescroll/jquery.nicescroll.min', 'bootstrap':'plugins/other/ipanel/bootstrap.min' }, shim:{ 'bootstrap':{deps:['jquery']}, 'ztree.core':{deps:['jquery']}, 'ztree.excheck':{deps:['ztree.core']} } }); var dateArr=""; var rTransformerTreeCode=""; var city=""; var powerCodes="";//对应的公式 var powerCodesObj={}; var Multiple={};//倍率 require(['jquery','domReady','util','echart','DialogBySHF','bootstrap_datetimepicker','zhCN','ztree.core','ztree.excheck','tree','nicescroll'] ,function($,domReady,util,echart){ var image_path=[]; domReady(function(){ initTimeFormate("yyyy-mm-dd"); var ztreeObj; var params={ zoomVal:1 } $('#areaCodeSelect').selZtree({ url:'/sys/companyInfo/findAllcomInfo', dataParams:null, initValue:null, onchange:function(){ image_path=ztreeObj.getNodeByParam('id',$('#areaCodeSelect').val()).imagePath.split(';'); }, onclick:function(selnode){ //触发选中后让框隐藏 setTimeout(function () { $('.ztreeInput').blur(); $('#areaCodeSelect').parent().find('div.slimScroll').hide(); //让自己隐藏 }, 20); swithData(); }, complete:function(ztree,obj){ ztreeObj=ztree; image_path=obj.defaultParams.initValue.imagePath.split(';'); swithData();//加载上下 // bottomLine(); } }); //点击切换图片事件 $('body').on('click','.img-change i',function(){ var f=$(this).attr('class'); $(this).parent().prev('img').css({'margin-left':0,'margin-top':0,'width':'auto','height':'auto'}) var href=$(this).parent().prev('img').attr('src').replace('/static',''); var index=image_path.indexOf(href); var length=image_path.length; var len; if(f=='c_left'){ if(--index<0){ len=length-1; }else{ len=index; } }else{ if(++index<length){ len=index; }else{ len=0; } } $(this).parent().prev('img').attr('src','/static'+image_path[len]); }); $('body').on('mousedown','.big-image',function(e){ var $img=$(this),$parent=$(this).closest('.layer-content'); var oleft=parseFloat($img.css('margin-left')); var otop=parseFloat($img.css('margin-top')); var width=parseFloat($img.css('width')); var height=parseFloat($img.css('height')); var pwidth=parseFloat($parent.css('width')); var pheight=parseFloat($parent.css('height')); if(isNaN(oleft)){oleft=0;} if(isNaN(otop)){otop=0;} var ox=e.pageX||e.clientX; var oy=e.pageY||e.clientY; var x=oleft,y=otop; $('body').on('mousemove',function(event){ var nx=event.pageX||event.clientX; var ny=event.pageY||event.clientY; x=nx-ox; y=ny-oy; var ll=oleft+x; var tt=otop+y; if(ll>0){ll=0} if(tt>0){tt=0} if((ll-pwidth)<(-1*width)){ll=-(width-pwidth)} if((tt-pheight)<(-1*height)){tt=-(height-pheight)} $img.css({ 'margin-left':ll+'px', 'margin-top':tt+'px' }); }); $('body').on('mouseup',function(){ $('body').off('mousemove').off('mouseup'); }); return false; }); //滚轮效果 $('body').on('mousewheel','.big-image',function(e){ params.zoomVal+=event.wheelDelta/1200; var o=e.target; if (params.zoomVal >= 0.2) { o.style.transform="scale("+params.zoomVal+")"; } else { params.zoomVal=0.2; o.style.transform="scale("+params.zoomVal+")"; return false; } var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) { // 向上滚 console.log("wheelup"); } else if (delta < 0) { // 向下滚 console.log("wheeldown"); } }) //点击事件日月年 $(".switch-change li").click(function(){ var idx=$(this).index(); //初始化时间 if(idx==0){ initTimeFormate("yyyy-mm-dd"); }else if(idx==1){ initTimeFormate('yyyy-mm', 'yyyy-MM', 3); }else{ initTimeFormate('yyyy', 'yyyy', 4); } $(".switch-change li").removeClass("cur"); $(this).addClass("cur"); //initBottomData('/findEnergyDayDataList',rTransformerTreeCode); swithData(); }) //点击变压器弹出事件 $("#byq").click(function(){ $.DialogBySHF.Dialog({ Width:1000, Height: 500, Title:"变压器详情", URL: "/demo3Edit?idx="+rTransformerTreeCode}); }) //关闭点击时弹出图片 $("body").on("click",".dialog-img .img-close",function(e){ $(e.target).closest(".dialog-img").remove(); }) }); //点击弹出弹框的事件 window.imgdialog=function(event){ var imgstr='/static'+image_path[0]; //创建一个dialog框 var id='byqdialog'+new Date().getTime(); var imghtml= '<div id="'+id+'" class="dialog-img">'+ '<div class="layer"></div>'+ '<div class="layer-content" style="overflow:hidden;76%;height:76%;">'+ '<span class="img-close">X</span>'+ '<img class="big-image" src="'+imgstr+'" alt="" style="auto;height:auto;cursor:all-scroll;">'+ '<p class="img-change"><i class="c_left"><</i><i class="c_right">></i><p>'+ '</div>'+ '</div>'; $("body").append(imghtml); } function swithData(){ powerCodesObj={}; var id=$("#top-left .ztree").attr("id"); var treeObj=$.fn.zTree.getZTreeObj(id); var selNode=treeObj.getSelectedNodes(); if(selNode.length>0){ rTransformerTreeCode=selNode[0].rTransformerTreeCode; powerCodes=(selNode[0].powerCodes).replace(/]/g,"_EPdel]") powerCodesObj[powerCodes]=selNode[0]; city=selNode[0].city; }else{ rTransformerTreeCode=treeObj.getNodes()[0].rTransformerTreeCode; powerCodes=(treeObj.getNodes()[0].powerCodes).replace(/]/g,"_EPdel]"); powerCodesObj[powerCodes]=selNode[0]; city=treeObj.getNodes()[0].city; } initTopData('/findIndexPage',rTransformerTreeCode); initBottomData('/findEnergyDayDataList',rTransformerTreeCode); } /** * @desc 根据公式获取code * @param {string} str 公式字符串 * @return {array} _arr code组成的数组 */ function formulaToCode(str){ var _arr=[]; if(!str){return _arr} _arr=str.match(/[.+?]/g).join('').replace(/]/g,'').split(/[/); _arr.shift(); return _arr; } /** * @desc 把请求到的单个code分散数据重新组合成按照公式的数据。 * @desc 这个方法对应的要求说明： * 1.没有计算公式的code不能含有[]字符 * 2.接口数据不能只有sname和data两个字段 * 3.code只能是字母或下划线(_)开头的字母、数字和下划线组成的字符串(即:符合javascript变量命名要求) * 4.不同设备不能使用相同的公式 * @param {Object} obj 用 “公式:设备对象”组成的对象。 * @param {Array} res 请求回来的数据数组对象，如：res.jsonList * @return {Array} resArr 数据数组对象 */ function evalFormulaToRes(obj,res,other){ other=other===undefined?['sname','data']:other; var resArr=[];//用于存放返回的数据对象 if(res.length==0){return resArr;}//没有数据 //1.解析res数组生成_tempO和_tempA for(var i=0,_tempO={},_tempA={};i<res.length;i++){ if(_tempO[res[i].sname]===undefined){ _tempO[res[i].sname]={}; _tempA[res[i].sname]=[]; } var keys=''; for(var k in res[i]){ if(other.indexOf(k)===-1){ keys+=''+res[i][k]; } } if(keys===''){keys='tempIndex'+i} _tempO[res[i].sname][keys]=res[i]; _tempA[res[i].sname].push(res[i]); } //2.外层循环每个公式 for(var k in obj){ if(k.split(/[[+-*/]/g).length<3){//2.1.如果公式是单个code,不存在运算直接concat进resArr var key=k.replace(/[|]/g,''); if(_tempA[k]!==undefined){ resArr=resArr.concat(_tempA[k]); }else if(_tempA[key]!==undefined){ resArr=resArr.concat(_tempA[key]); } }else{//2.2.公式存在运算 //2.2.1.取出每个code var _arr=formulaToCode(k); //2.2.2.根据每个code找出数据对象，把找到的数据对象的所有属性tempResArr if(_arr.length>0){ for(var i=0,tempResArr={},len=0;i<_arr.length;i++){ if(_tempO[_arr[i]]!==undefined){ for(var n in _tempO[_arr[i]]){ tempResArr[n]=_tempO[_arr[i]][n]; } } } } //2.2.3.循环tempResArr找出里面，每个属性生成变量 for(var ks in tempResArr){ var to=JSON.parse(JSON.stringify(tempResArr[ks])) to.sname=k;to.data=formulaToData(_arr,_tempO,k,ks); if(isNaN(to.data)||to.data==Infinity||to.data==-Infinity){ console.error('错误:"'+k+'"数据除以0'); to.data=0; } resArr.push(to); } } } return resArr; } /** * @desc 将公式转换为数据 * @param {*} _arr * @param {*} _tempO * @param {*} k * @param {*} ks */ function formulaToData(_arr,_tempO,k,ks){ // var o={}; for(var i=0;i<_arr.length;i++){ var _str=''; var r= new RegExp('\['+_arr[i]+'\]',"g"); if(_tempO[_arr[i]]===undefined){//没有code // _str='var _'+_arr[i]+'_='+0; k=k.replace(r,0); }else{ var _to=_tempO[_arr[i]][ks];//有code没有某个属性 if(_to===undefined){ // _str='var _'+_arr[i]+'_='+0; k=k.replace(r,0); }else{ // _str='var _'+_arr[i]+'_='+_to.data; k=k.replace(r,_to.data); } } // eval(_str); } return eval('('+k+')')+''; } function initBottomData(url,findTransformerSnameList){ //1、将获取的公式拆分成单个code var codeList=formulaToCode(powerCodes); /*for(var i=0;i<codeList.length;i++){ codeList[i]+='_EPdel' }*/ var codestr=codeList.join(';'); var param={}; dateArr=[]; var type=$(".switch-change li.cur").index(); var dateIndex=0;//天：24,月：28-31天，年：12 var xDate=[]; param.snames=codestr; switch(type){ case 0: param.type=0; param.dateTime=$("#systemtime").val(); dateIndex=24; xDate = Object.keys(Array.apply(null, {length:24})).map(function(item){ return +(parseInt(item)+1)+"时"; }); break; case 1: param.type=1; param.dateTime=$("#systemtime").val().split('-')[0]+"-"+$("#systemtime").val().split('-')[1]; dateIndex=getMonthDay(param.dateTime); xDate = Object.keys(Array.apply(null, {length:dateIndex})).map(function(item){ return +(parseInt(item)+1)+"日"; }); break; case 2: param.type=2; param.dateTime=$("#systemtime").val().split('-')[0]; dateIndex=12; xDate = Object.keys(Array.apply(null, {length:12})).map(function(item){ return +(parseInt(item)+1)+"月"; }); break; } dateArr=getDateArr(param.dateTime,type); initbData(param,dateIndex,xDate); } function getMonthDay(date){ var year=date.split("-")[0]; var month=date.split("-")[1]; var d = new Date(year, month, 0); return d.getDate(); } function initbData(param,dateIndex,xDate){ $.post("/findEnergyDayDataList",param,function(data){ var mobj={}; var resObj={}; var code=param.snames.split(";"); for(var i=0;i<dateArr.length;i++){ var _date=dateArr[i]; var d=data[_date]; if(mobj[_date]===undefined){ mobj[_date]={}; } mobj[_date]=makeObj(d); } //var oo={"[DW_GKDZ_DDZY22-Z01_EPdel]*200+[KJ_BLKJ_DDZY22-Z03_EPdel]*300+[KJ_GKDZ_DDZY22-Z02_EPdel]+[DDZY22-Z_oct1_5_EPdel]+[DDZY22-Z_oct1_6_EPdel]":'我的'} var dd=getddData(data,dateArr,code,dateIndex) initbtRight(mobj,dateArr,code,xDate);//加载单个变压器 //将所有的code值进行组合成一个 resObj=getaddArr(mobj,dateArr,code); initCurve(dd,xDate,param); initbottomright(dd); function makeObj(d){ var _obj={}; var obj={}; //分组 for(var m=0;m<d.length;m++){ if(_obj[d[m]["sname"]]===undefined){ _obj[d[m]["sname"]]=(new Array(dateIndex).join("-;")+"-").split(";"); } var idx=parseInt(d[m]["time"])-1; _obj[d[m]["sname"]][idx]=d[m]["data"] } for(var j=0;j<code.length;j++){ if(_obj[code[j]]===undefined){ continue; }else{ obj[code[j]]=_obj[code[j]] } } return obj; } }) } function getddData(dataObj,dateArr,code,dateIndex){ var resultObj={}; for(var i=0;i<dateArr.length;i++){ resultObj[dateArr[i]]=getArr(dataObj[dateArr[i]]); } return resultObj; function getArr(list){ var arr=(new Array(dateIndex).join("-;")+"-").split(";"); var dde=evalFormulaToRes(powerCodesObj,list); for(var i=0;i<dde.length;i++){ var idx=parseInt(dde[i]["time"]-1); var d=dde[i]["data"]; if(!isNaN(d)){ d=Number(d).toFixed(2); } arr[idx]=d; } return arr; } } /** * 根据传入的code编码得到code名称对象 */ function getNnameObj(code){ if(!code){return {}} for(var i=0;i<code.length;i++){ code[i]=code[i].slice(0,code[i].lastIndexOf('_')) } var obj={}; $.ajax({ url:'/sys/meteringList/findMeteringListCodes', type:'GET', async:false, datatype:"json", data:{ deviceCode:code.join(";") }, success:function(data){ for(var i=0;i<data.length;i++){ Multiple[data[i].code+'_EPdel']=data[i].e } obj=data.reduce(function(o,v,i){ o[v.code]=v.name; return o; },{}) } }) return obj; } /** * 显示每一个变压器的数据值 */ function initbtRight(mobj,dateArr,code,xDate){ var dataobj,_obj=JSON.parse(JSON.stringify(mobj)); var series=[],keys=[],addlengend=[]; var nameobj=getNnameObj(code); //得到当前时间，如果没有选时间就是电脑的时间，如果有选择的时间就是选择的时间 dataobj=_obj[dateArr[0]]; keys=Object.keys(dataobj).sort().reverse(); for(var i=0;i<keys.length;i++){//数组的数据乘以倍率 var k=keys[i]; for(var j=0;j<24;j++){ dataobj[k][j]=(dataobj[k][j]*1*Multiple[k]).toFixed(2) } } for(var i=0;i<keys.length;i++){ var k=keys[i]; var kk=keys[i].substring("0",keys[i].lastIndexOf("_")); addlengend.push(nameobj[kk]); series.push({ type:"line", name:nameobj[kk], smooth:true, itemStyle : { normal : { lineStyle:{ 3 } } }, symbolSize:10, data:subDataArr(dataobj[k]) }) } initEc("bottom_lines",{ title : { text: '', x:'center' }, legend: { data:addlengend, x : 'center', bottom:'7px', type:'scroll' }, xAxis: [{ type: 'category', data:xDate, minInterval: 2, axisPointer: { type: 'shadow' } }], yAxis: [ { type: 'value', name:"kWh", axisLabel: { formatter: '{value}' } } ], series:series }) } /* * 根据当前的年月日重新筛选数组 * */ function subDataArr(arr){ var type=$(".switch-change .cur").index(); var dateIdx=0; if(type==0){ dateIdx=new Date().getHours(); }else if(type==1){ dateIdx=new Date().getDate(); }else{ dateIdx=new Date().getMonth()+1; } var _arr=arr.concat(); for(var m=_arr.length;m>0;m--){ //如果时间大于当前时间 if(m>dateIdx-1){ //如果有值 if(!_arr[m]||_arr[m]=="0.00"){//如果没有这个值，或者这个值等于0，不显示 _arr.length=m; }else{ break; } }else{ break; } } return _arr; } function initbottomright(rowData){ var t1=0,t2=0,t3=0; var type=$(".switch-change .cur").index(); switch(type){ case 0: $("#thisday>p>span").text("当日用电"); $("#beforeday>p>span").text("昨日用电"); break; case 1: $("#thisday>p>span").text("当月用电"); $("#beforeday>p>span").text("上月用电"); break; case 2: $("#thisday>p>span").text("今年用电"); $("#beforeday>p>span").text("去年用电"); break; } var newObj=JSON.parse(JSON.stringify(rowData)); var len=newObj[dateArr[0]].length; for(var i=0;i<dateArr.length;i++){ var d=dateArr[i]; newObj[d].length=len; $("#bottom_right li:eq("+i+")").find("span").eq(1).text(arrSum(newObj[d])+"kWh") } t1=parseInt($("#thisday").children().last().text()) t2=parseInt($("#beforeday").children().last().text()); t3=t1-t2; if(t2==0||isNaN(t2)){ $("#huanbi>span").text("0%"); }else{ $("#huanbi>span").text(Math.abs((t1-t2)*100/t2).toFixed(2)+"%"); } if(t3>0){ //$("#huanbi").children().last().attr("class","fa fa-fw fa-long-arrow-up")箭头 $("#huanbi").children().last().attr("class","glyphicon glyphicon-plus") }else if(t3<0){ //$("#huanbi").children().last().attr("class","fa fa-fw fa-long-arrow-down")箭头 $("#huanbi").children().last().attr("class","glyphicon glyphicon-minus") }else{ $("#huanbi").children().last().attr("class","") } } /** * @desc 对一个数组进行求和。 * @param 数组 * @return {string} sum */ function arrSum(arr){ if(!arr||arr.length===0){ return 0; } var sum=arr.reduce(function(x,y){ x=isNaN(x)?0:x; y=isNaN(y)?0:y; return Number(parseFloat(x)+parseFloat(y)).toFixed(2); },0) return sum; } function initCurve(rowData,xDate,dataObj){ var type=dataObj.type; var keys=Object.keys(rowData).sort().reverse(),series=[],obj={}; for(var i=0;i<keys.length;i++){ var k=keys[i]; if(i==0){rowData[k]=subDataArr(rowData[k]);} } for(var i=0;i<dateArr.length;i++){ var _data=dateArr[i]; series.push({ name:dateArr[i], type:'line', smooth:true, itemStyle : { normal : { lineStyle:{ 3 } } }, symbolSize:10, data:rowData[_data] }); } if(type==0){ //获取到天气 $.ajax({ url:'/weather/findAmbientData', type:'GET', series:series, datatype:"json", data:{ type:"hour", dateTime:$("#systemtime").val(), city:city }, success:function(data){ var _series=series.concat(); var _obj=JSON.parse(JSON.stringify(series[0])),arr=(new Array(24).join("-;")+"-").split(";"); _obj.name="天气" _obj.yAxisIndex=1; for(var i=0;i<data.length;i++){ var row=eval("("+data[i]+")"); var idx=parseFloat(row.date) arr[idx]=row.data } _obj.data=arr; //_obj.data=[4,5,6,3,23,22,11,32,4,5,6,3,23,22,11,32,4,5,6,3,23,22,11,32]; _series.push(_obj); initEc("bottom_line",{ title : { text: '', x:'center' }, color:["#FFAE00","#1787EE",'#45BF98','#F28D4E','#C1232B','#B5C334','#FCCE10', '#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'], legend: { data:dateArr.concat(["天气"]), x : 'center', bottom:'7px', type:'scroll' }, xAxis: [{ type: 'category', data:xDate, minInterval: 2, axisPointer: { type: 'shadow' } }], yAxis: [ { type: 'value', name:"kWh", axisLabel: { formatter: '{value}' } }, { type: 'value', name:"℃", axisLabel: { formatter: '{value}' } } ], series:_series }) } }) }else{ initEc("bottom_line",{ title : { text: '', x:'center' }, color:["#FFAE00","#1787EE"], legend: { data:dateArr, x : 'center', bottom:'7px', type:'scroll' }, xAxis: [{ type: 'category', data:xDate, minInterval: 2, axisPointer: { type: 'shadow' } }], yAxis: [ { type: 'value', name:"kWh", axisLabel: { formatter: '{value}' } }, { type: 'value', name:"℃", axisLabel: { formatter: '{value}' } } ], series:series }) } } //初始化echarts function initEc(id,op){ var color=['#0093F1','#45BF98','#F28D4E','#C1232B','#B5C334','#FCCE10', '#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0']; //var unit=unitList[$('#'+id).prev('div').find('.bar-type dt.cur').attr('unit')]; var option = { color:color, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, calculable:true, toolbox: { right:'10px', zlevel:600, z:600, feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar','stack']}, restore: {show: true}, saveAsImage: {show: true} } }, grid:{ left:'70px', right:'70px', bottom:'60px', //x:'10%', //y2:'13%',//距离最下面的边距 }, legend: { data:['bar'], }, calculable:true, noDataLoadingOption:{ //没有数据时， effect: "bubble", text:"暂无数据", effectOption:{ effect:{ n:0 } }, textStyle:{ fontSize:32, fontWeight:'bold' } }, xAxis: [ { type: 'category', data:[], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', //name:unit, name:"千瓦时", axisLabel: { formatter: '{value}' } } ], series: [{ name:'line', type:'line', data:[] }] }; var myChart = echart.init(document.getElementById(id)); myChart.setOption($.extend({},option,op),true); myChart.resize(); } function getaddArr(dataObj,dateArr,code){ var resultObj={}; for(var i=0;i<dateArr.length;i++){ resultObj[dateArr[i]]=getArr(dataObj[dateArr[i]]); } return resultObj; function getArr(obj){ var arr=[]; for(var key in obj){ for(var i=0;i<obj[key].length;i++){ var _arr=arr[i]; if(_arr==""||_arr==null||isNaN(_arr)){ arr[i]=0; } arr[i]+=parseFloat(obj[key][i]); } } for(var m=0;m<arr.length;m++){ if(arr[m]==0){continue} if(isNaN(arr[m])){continue} arr[m]=Number(arr[m]).toFixed(2); } return arr; } } function getDateArr(date,type){ var arr=[]; if(type===0){//日 arr=getSubSeven(date,2); }else if(type===1){//月 arr=getMonthArr(date,2); }else if(type===2){//年 arr=[date+"",(date-1)+""] }else{ } return arr; } /** * 传入一个日期的天数，往前面减day天，得到数组 */ function getSubSeven(sDate,day){ var arr=[]; var sTime=new Date(sDate).getTime(); var subTime=sTime-(86400000*day) for(var i=sTime;i>subTime;i-=86400000){ arr.push(new Date(i).Format("yyyy-MM-dd")); } return arr; } /** * @desc 得到最近n个月份的数组 * @param {Number} sDate 开始月份 * @param {Int} n 向前推的月份数 * return {Array} */ function getMonthArr(sDate,n){ var arr=[]; arr.push(sDate); while(n>1){ //arr.unshift(getBeforMonth(sDate)); arr.push(getBeforMonth(sDate)); sDate=getBeforMonth(sDate); n--; } return arr; } function getBeforMonth(date){ var lastMonth=""; var year=date.split("-")[0],month=date.split("-")[1]; if(month==1){ lastMonth=(year-1)+"-"+12; }else{ lastMonth=year+"-"+add0(month-1); } return lastMonth; } function add0(n){ if(parseFloat(n)<10){ return "0"+n; }else{ return n; } } function initTopData(url,findTransformerSnameList){ $.post(url,{treeCode:rTransformerTreeCode},function(data){ var obj=JSON.parse(JSON.stringify(data)) //设置属性和值 $(".add-top>li").eq(0).find("span").text((!!data.voltageClass?Number(data.voltageClass).toFixed(2):'-')+"kV") $(".add-top>li").eq(1).find("span").text((!!data.transformerNum?data.transformerNum:'-')+"台") $(".add-top>li").eq(2).find("span").text((!!data.ratedCapacity?Number(data.ratedCapacity).toFixed(2):'-')+"kVA") $(".add-top>li").eq(3).find("span").text((!!data.demandNum?Number(data.demandNum).toFixed(2):'-')+"kW") $(".add-top>li").eq(4).find("span").text((!!data.controlDevMS?data.controlDevMS:'-')+"个") $(".add-top>li").eq(5).find("span").text((!!data.measuringPointNum?data.measuringPointNum:'-')+"个") //$(".add-top li").eq(0).find(".mdata").text((!!data.current_P?Number(data.current_P).toFixed(2):'-')+"kW") //$(".add-top li").eq(1).find(".mdata").text((!!data.current_IA?Number(data.current_IA).toFixed(2):'-')+"A") //$(".add-top li").eq(2).find(".mdata").text((!!data.monthMaxDeman?Number(data.monthMaxDeman).toFixed(2):'-')+"kW") //$(".add-top li").eq(3).find(".mdata").text((!!data.environTemperate?data.environTemperate:'-')+"℃") }) } /** * 初始化时间插件 */ function initTimeFormate(format1, format2, view, end) { format1 = !!format1 ? format1 : "yyyy-mm-dd"; format2 = !!format2 ? format2 : "yyyy-MM-dd"; view = !!view ? view : 2; var selector = end ? $("#systemtime_end") : $("#systemtime"); selector.datetimepicker('remove'); selector.datetimepicker({ language:"zh", format: format1, autoclose: true, startView: view, minView: end ? 2 : view }).on("click", function () { selector.datetimepicker('show'); }).off("changeDate").on("changeDate",function(ev){ var id=$(ev.target).attr("id"); var time=ev.date.Format("yyyy-MM-dd") swithData(); }); selector.val(new Date().Format(format2)); } /** * 左下角的曲线 */ function bottomLine(){ var date=new Date(); var x=[57,25,22,14,51,48,43,47,53,67,73,53,27,27,14,19,21,47,54,73,67,53,27,24]; x.length=date.getHours(); ec = echart.init($('#bottom_line')[0]);//初始化echart option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['昨日用电','今日用电'], bottom:10 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'] } ], yAxis : [ { name : 'kWh', type : 'value', axisLabel : { formatter: '{value} ' }, } ], series : [ { name:'今日负荷', type:'line', smooth:true, itemStyle : { normal : { lineStyle:{ 3 } } }, symbolSize:10, data:x }, { name:'昨日负荷', type:'line', smooth:true, itemStyle : { normal : { lineStyle:{ 3 } } }, symbolSize:10, data:[50, 62, 77,80,92,91,90,73,67,53,27,14,19,25,22,14,21,47,54,57,51,48,43,47] } ] }; ec.setOption(option, true); } } );
demo3.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>demo3new</title> <link href="/static/ui/common/css/demo/fontAwesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="/static/ui/common/css/demo/Hove/css/hover-min.css" rel="stylesheet" type="text/css" /> <link href="/static/ui/common/css/demo/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="/static/ui/common/plugins/other/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="/static/ui/common/css/demo/comm.css" /> <link type="text/css" rel="stylesheet" href="/static/ui/common/plugins/formElems/dialogbyshf/css/DialogBySHF.css" /> <link type="text/css" rel="stylesheet" href="/static/ui/common/css/demo/Hove/css/hover-min.css" /> <link type="text/css" rel="stylesheet" href="/static/ui/modules/systemMan/demo/css/demo3.css" /> <link href="/static/ui/common/plugins/formElems/time/bootstrap_datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"> <style> /*居中显示*/ .dialog-img{ position: fixed; top: 0; width: 100%; height: 100%; } .dialog-img .layer{ position: fixed; top: 0; width: 100%; height: 100%; background-color:#333; opacity:.4; } .dialog-img .layer-content{ width:850px; height:400px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color:#f7fbfb; position: relative; } .layer-content>img{ width:100%; height:100% } .layer-content>span{ position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-color: rgba(0,0,0,.4); border-radius: 15px; color: #fff; text-align: center; line-height: 20px; cursor: pointer } .date{ background:url(/static/ui/common/plugins/formElems/time/DatePicker97/skin/date.png) no-repeat center right; } .date:focus{ border-color: #0095ff; background-image: url(/static/ui/common/plugins/formElems/time/DatePicker97/skin/date3.png); } .slimScroll{ left: 80.75px !important; top: 73.375px !important; width: 196px !important; height: 270px !important; } /* 增加的样式 */ #top-left .top-pbar{ height:40px; line-height:40px; margin:0; } #top-left ul.add-top{ height:calc(100% - 52px); text-align:center; } ul.add-top>li{ display: inline-block; vertical-align: middle; width: 31%; height:50%; /* padding: 0 5px; */ border: 1px solid #ddd; margin: 0 0.7%; padding-top:2%; } ul.add-top>li:nth-child(1),ul.add-top>li:nth-child(2),ul.add-top>li:nth-child(3){ margin-bottom:10px; } ul.add-top>li>div:first-child{ width:80%; padding:20px; margin:auto; height:60%; } ul.add-top>li>div:first-child>img{ width:60%; height:auto; } ul.add-top>li>p{ height:20%; } ul.add-top>li>div:last-child{ display:flex; height:20%; min-height:20px; background-color:#5A656B; font-size:17px; color:#fff; text-align:center; } ul.add-top>li>div:last-child>span{ flex-grow: 1; align-self: center; } /* .top-pbar input{70%} */ .top-pbar input{ width:100% !important; margin:0 !important; } /* .top-pbar>span{ display:inline-block; 20% !important; } */ .top-pbar>label{width:30%} </style> <body> <div class="main"> <div class="row hei50 clearfix"> <div class="col-sm-4 col-md-4" style="padding-top:0;"> <div class="box" id="top-left"> <p class="box-head"><i class="fa fa-building-o fa-fw"></i>变电所概况</p> <div> <p class="top-pbar"> <span>所属企业:</span> <label> <!-- 所属企业 --> <input type="hidden" id="areaCodeSelect" name="areaCode"> <input type="text" class="ztreeInput" maxlength='64'> </label> <span>时间:</span> <label> <!-- 时间选择 --> <input type="text" class="sys_select_border_1 date" id="systemtime" name="systemtime" readonly=""> </label> </p> <ul class="add-top"> <li> <div><img src="/static/ui/common/img/demo/demo3_22.png" alt=""></div> <p>电压等级</p> <div><span>-kV</span></div> </li> <li style="cursor:pointer" id="byq"> <div><img src="/static/ui/common/img/demo/demo3_19.png" alt=""></div> <p>变压器台数</p> <div><span>-台</span></div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_35.png" alt=""></div> <p>装机容量</p> <div><span>-kVA</span></div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_35.png" alt=""></div> <p>申报需量</p> <div><span>-kW</span></div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_37.png" alt=""></div> <p>测控装置</p> <div><span>-个</span></div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_33.png" alt=""></div> <p>测量点</p> <div><span>-个</span></div> </li> </ul> </div> </div> </div> <!-- <div class="col-sm-4 col-md-4" style="padding-top:0;"> <div class="box relative"> <p class="box-head"><i class="fa fa-table fa-fw"></i>运行状态</p> <div style="padding:10px;overflow-y:aotu"> <p class="top-statu">更新时间: <span>刚刚</span></p> <ul class="top-status" > <li> <div><img src="/static/ui/common/img/demo/demo3_03.png" alt=""></div> <p>当前负荷</p> <p class="mdata">-kw</p> <div> <a href="javascript:void(0)" style="display:block;height:100%" onclick="imgdialog(this)" imgstr="/static/ui/common/img/demo/demo3_45.png"> <p><img src="/static/ui/common/img/demo/demo3_45.png" alt=""></p> <div><span>配电图</span></div> </a> </div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_05.png" alt=""></div> <p>当前电流</p> <p class="mdata">-A</p> <div> <a href="javascript:void(0)" style="display:block;height:100%"> <p><img src="/static/ui/common/img/demo/demo3_48.png" alt=""></p> <div><span>视频</span></div> </a> </div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_09.png" alt=""></div> <p>月最大需量</p> <p class="mdata">-kW</p> <div class="ock"> <a href="javascript:void(0)" style="display:block;height:100%"> <p><img src="/static/ui/common/img/demo/demo3_54.png" alt=""></p> <div><span>通讯</span></div> </a> </div> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_07.png" alt=""></div> <p>环境温度</p> <p class="mdata">-℃</p> <div class="ock"> <a href="javascript:void(0)" style="display:block;height:100%"> <p><img src="/static/ui/common/img/demo/demo3_51.png" alt=""></p> <div><span>变压器</span></div> </a> </div> </li> </ul> </div> </div> </div> <div class="col-sm-4 col-md-4" style="padding-top:0;"> <div class="box" > <p class="box-head"><i class="fa fa-pie-chart fa-fw"></i>当日事件记录</p> <div style="padding:10px;"> <p style="height:30px;"></p> <ul class="event"> <li> <div><img src="/static/ui/common/img/demo/demo3_12.png" alt=""></div> <p>遥测越限</p> <p>-<sub>次</sub></p> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_14.png" alt=""></div> <p>遥信变位</p> <p>-<sub>次</sub></p> </li> <li> <div><img src="/static/ui/common/img/demo/demo3_16.png" alt=""></div> <p>失联的装置</p> <p>-<sub>个</sub></p> </li> </ul> <div> <img src="/static/ui/common/img/demo/demo3_40.png" alt=""> <img src="/static/ui/common/img/demo/demo3_42.png" alt=""> </div> </div> </div> </div> --> <div class="col-sm-8 col-md-8" style="padding-top:0;"> <div class="box" > <p class="box-head"><i class="fa fa-line-chart fa-fw"></i>线路分析(单位:kWh)</p> <div> <ul class="switch-change"> <li class="cur"> <h3>日</h3> <p>24</p> </li> <li> <h3>月</h3> <p>31</p> </li> <li> <h3>年</h3> <p>12</p> </li> </ul> <div id="bottom_line"> </div> </div> </div> </div> </div> <div class="row hei50 clearfix"> <div class="col-sm-4 col-md-4" style="padding-bottom:0;"> <div class="box" > <p class="box-head"><i class="fa fa-line-chart fa-fw"></i>用电概况</p> <div> <div id="bottom_right" style="height:100%;"> <ul class="bottom-right"> <li > <div id="thisday" style="border-color:#ffae00;background-color:#EFFBF7;"> <p style="background-color:#ffae00"> <span>当日用电</span> <em style="border-left-color:#ffae00;"></em> </p> <span>- kWh</span> </div> </li> <li > <div id="beforeday" style="border-color:#31BEFF;background-color:#EFFBFF;"> <p style="background-color:#31BEFF;"> <span>昨日用电</span> <em style="border-left-color:#31BEFF;"></em> </p> <span>- kWh</span> </div> </li> <li > <div style="border-color:#94D700;background-color:#F7FBE7;" id="huanbi"> <p style="background-color:#94D700;"> <span>环比</span> <em style="border-left-color:#94D700;"></em> </p> <span>0%</span> <!-- 默认向下的箭头 --> <!-- <em class="fa fa-fw fa-long-arrow-down" style="font-size: 22px;color:#94D700"></em> --> <em style="font-size: 22px;color:#94D700"></em> </div> </li> </ul> <ul class="bottom-bottom" style="display:none"> <li> <p>12:30-12:45</p> <p>最大用电时间</p> </li> <li> <p>240kW</p> <p>该短时间平均功率</p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-8 col-md-8" style="padding-bottom:0;"> <div class="box" > <p class="box-head"><i class="fa fa-line-chart fa-fw"></i>支路分析(单位:kWh)</p> <div> <ul class="switch-change" style="display:none"> <li class="cur"> <h3>日</h3> <p>24</p> </li> <li> <h3>月</h3> <p>31</p> </li> <li> <h3>年</h3> <p>12</p> </li> </ul> <div id="bottom_lines"> </div> </div> </div> </div> </div> </div> <!-- 弹出图片的框 --> <div class="dialog-img" style="display:none"> <div class="layer"></div> <div class="layer-content" > <span class="img-close">X</span> <img src="/static/ui/common/img/demo/map_03.jpg" alt=""> </div> </div> <script type="text/javascript"> var path = "/static"; </script> <script type="text/javascript" src="/static/ui/common/js/libs/require.js" data-main="/static/ui/modules/systemMan/demo/js/demo3new.js"></script> </body> </html>