0108

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;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">&lt</i><i class="c_right">&gt</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:{
                            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:{
                                    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);
        }
    }
);

原文地址:https://www.cnblogs.com/pengfei25/p/10240693.html