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', '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=""; require(['jquery','domReady','util','echart','DialogBySHF','ztree.core','ztree.excheck','tree','nicescroll'] ,function($,domReady,util,echart){ var image_path=[]; domReady(function(){ 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(';'); console.log(image_path); }, onclick:function(selnode){ // $('.ipn-tools li.cur').trigger('click'); //initTreeLoad('/busin/deviceTree/findAllDeviceTrees'); //将树中的rTransformerTreeCode放入input做隐藏字段 //$("#areaCodeSelect").attr("rTransformerTreeCode",selnode[0].rTransformerTreeCode); //触发选中后让框隐藏 setTimeout(function () { $('.ztreeInput').blur(); // $(document).trigger('click');//全部隐藏 $('#areaCodeSelect').parent().find('div.slimScroll').hide(); //让自己隐藏 }, 20); //initBottomData('/findEnergyDayDataList') swithData(); }, complete:function(ztree,obj){ ztreeObj=ztree; image_path=obj.defaultParams.initValue.imagePath.split(';'); console.log(image_path); // $('.ipn-tools li.cur').trigger('click'); //initTreeLoad('/busin/deviceTree/findAllDeviceTrees'); //var relationUrl="/relationForecast/relevanceAnalysis/findRelevanceTreeData?dictSortCode=ambient,yield,"; //initTreeLoadTree(relationUrl,[],"relevanceTree"); 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){ console.log("启动滚轮的缩放了"); 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"); } }) /* $('body').mousewheel(function(event, delta) { var dir = delta > 0 ? 'Up' : 'Down'; if (dir == 'Up') { console.log('向上滚动'); } else { console.log('向下滚动'); } return false; }); */ //点击事件日月年 $(".switch-change li").click(function(){ $(".switch-change li").removeClass("cur"); $(this).addClass("cur"); initBottomData('/findEnergyDayDataList',rTransformerTreeCode); }) //点击变压器弹出事件 $("#byq").click(function(){ $.DialogBySHF.Dialog({ Width:1000, Height: 500, Title:"变压器详情", URL: "/demo3Edit?idx="+rTransformerTreeCode}); }) //点击配电图弹出图片 //关闭点击时弹出图片 // $("#img-close").click(function(){ // $(this).closest(".dialog-img").remove(); // }) $("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;width:76%;height:76%;">'+ '<span class="img-close">X</span>'+ '<img class="big-image" src="'+imgstr+'" alt="" style="width: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(){ 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 }else{ rTransformerTreeCode=treeObj.getNodes()[0].rTransformerTreeCode; } initTopData('/findIndexPage',rTransformerTreeCode); initBottomData('/findEnergyDayDataList',rTransformerTreeCode); } function initBottomData(url,findTransformerSnameList){ //var rTransformerTreeCode=$("#areaCodeSelect").attr("rTransformerTreeCode"); //从下拉树中获取到sname $.ajax({ url:"/findTransformerSnameList", type:"get", data:{treeCode:rTransformerTreeCode,property:"EPdel"}, dataType:"json", success:function(data){ if(data.length==0){alert("没有获取到code编码");return} var param={}; dateArr=[]; var type=$(".switch-change li.cur").index(); var dateIndex=0;//天:24,月:28-31天,年:12 var xDate=[]; param.snames=data.join(";"); switch(type){ case 0: param.type=0; param.dateTime=new Date().Format("yyyy-MM-dd"); 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=new Date().Format("yyyy-MM"); 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=new Date().Format("yyyy"); dateIndex=12; xDate = Object.keys(Array.apply(null, {length:12})).map(function(item){ return +(parseInt(item)+1)+"月"; }); break; } //测试数据用 //param.dateTime="2018"; //param.snames="KJ_GKDZ_DDZY22-Z02_EPdel1;KJ_GKDZ_DDZY22-Z02_EPdel2;KJ_GKDZ_DDZY22-Z02_EPdel3"; //param.snames="KJ_SZYF_03_DDZY22_EPdel;KJ_SZYF_02_DDZY22_EPdel;KJ_SZYF_04_DDZY22_EPdel;KJ_SZYF_05_DDZY22_EPdel"; 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(";"); //var dateArr=["todayDataList","yestodayDataList"]; 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); } //将所有的code值进行组合成一个 resObj=getaddArr(mobj,dateArr,code); initCurve(resObj,xDate); initbottomright(resObj); 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 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; } for(var i=0;i<dateArr.length;i++){ var d=dateArr[i] $("#bottom_right li:eq("+i+")").find("span").eq(1).text(arrSum(rowData[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") }else if(t3<0){ $("#huanbi").children().last().attr("class","fa fa-fw fa-long-arrow-down") }else{ } } /** * @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){ var keys=Object.keys(rowData).sort().reverse() for(var i=0;i<keys.length;i++){ var k=keys[i]; if(i==0){ for(var m=rowData[k].length;m>0;m--){ //如果时间大于当前时间 if(m>new Date().getHours()-1){ //如果有值 if(!rowData[k][m]){ rowData[k].length=m; }else{ break; } }else{ break; } } } } var series=[]; var obj={}; for(var i=0;i<dateArr.length;i++){ var _data=dateArr[i]; series.push({ name:dateArr[i], type:'line', smooth:true, itemStyle : { normal : { lineStyle:{ width:3 } } }, symbolSize:10, data:rowData[_data] }); } initEc("bottom_line",{ title : { text: '对比分析', x:'center' }, legend: { data:dateArr, x : 'center', // y : 'top', bottom:'7px', type:'scroll' }, xAxis: [{ type: 'category', data:xDate, minInterval: 2, axisPointer: { type: 'shadow' } }], yAxis: [ { type: 'value', name:"", //name:unitName,(多选如何显示) 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=[new Date().getFullYear()+"",new Date().getFullYear()-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)); 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)) //设置属性和值 $(".top-left>li").eq(0).find("span").text((!!data.voltageClass?Number(data.voltageClass).toFixed(2):'-')+"kV") $(".top-left>li").eq(1).find("span").text((!!data.transformerNum?Number(data.transformerNum).toFixed(2):'-')+"台") $(".top-left>li").eq(2).find("span").text((!!data.ratedCapacity?Number(data.ratedCapacity).toFixed(2):'-')+"kVA") $(".top-left>li").eq(3).find("span").text((!!data.demandNum?Number(data.demandNum).toFixed(2):'-')+"kW") $(".top-left>li").eq(4).find("span").text((!!data.controlDevMS?Number(data.controlDevMS).toFixed(2):'-')+"个") $(".top-left>li").eq(5).find("span").text((!!data.measuringPointNum?Number(data.measuringPointNum).toFixed(2):'-')+"个") $(".top-status>li").eq(0).find(".mdata").text((!!data.currentLoad?Number(data.currentLoad).toFixed(2):'-')+"kW") $(".top-status>li").eq(1).find(".mdata").text((!!data.currentElectric?Number(data.currentElectric).toFixed(2):'-')+"A") $(".top-status>li").eq(2).find(".mdata").text((!!data.monthMaxDeman?Number(data.monthMaxDeman).toFixed(2):'-')+"kW") $(".top-status>li").eq(3).find(".mdata").text((!!data.environTemperate?Number(data.environTemperate).toFixed(2):'-')+"℃") }) } /** * 左下角的曲线 */ 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:{ width:3 } } }, symbolSize:10, data:x }, { name:'昨日负荷', type:'line', smooth:true, itemStyle : { normal : { lineStyle:{ width: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); } } );
转载于:https://www.cnblogs.com/pengfei25/p/10240693.html