饼状图配置

hdw

2018-11-27 efa0e60ffa77fd41449d64521c493571fc46d07e

饼状图配置

 gx_tieta/WebRoot/index.jsp

@@ -219,16 +219,21 @@
                        <i class="fa fa-cog"></i>

                    </a>

                </div>

                <!--电池故障修复图-->

                <div class="repair-pie module"></div>

                <!-- 电池故障饼状图 -->

                <div class="brdn-pie module"></div>

                <!-- 电池告警饼状图 -->

                <div class="warn-pie module"></div>

                <!--电池健康饼状图-->

                <div class="health-pie module"></div>

                <!--清除浮动-->

                <div class="clear"></div>

                <div class="pie-item-con">

                    <!-- 机房停电 -->

                    <div class="repair-pie module"></div>

                    <!-- 电池状态饼状图 -->

                    <div class="brdn-pie module"></div>

                    <!-- 电池告警饼状图 -->

                    <div class="warn-pie module"></div>

                    <!--电池容量饼状图-->

                    <div class="health-pie module"></div>

                    <!-- 机房续航能力饼状图 -->

                    <div class="endur-pie module"></div>

                    <!--清除浮动-->

                    <div class="clear"></div>

                </div>

				
            </div>

            <c:forEach var="cust" items="${sessionScope.custompages}">

            <c:if test="${cust.submenu eq 'My_work' && cust.subflag eq 1}">

@@ -453,6 +458,15 @@
        

    ];

    

	
    // 设置页面中pie的模块

    ;(function() {

        var pieStatus = GLOBAL.Index.Pie.pieStatus;        // 查询饼状图显示的状态

        var pieItemCon = $('.pie-con .pie-item-con');

        pieItemCon.text('');

        var pieItems = pieStatus();

        pieItemCon.html(pieItems);

    })();

    

    

    var locationcity;

@@ -783,36 +797,23 @@
    }

    

    $(function() {

        flushFourPie();

		
        if($('#content .brdn-pie').length>0){

            //生成电池状态饼状图

            var $brdn=$('#content .pie-con .brdn-pie');        //获取故障容器的jquery对象

            var brdn=$brdn.get(0);                            //将容器的jquery对象转化为dom对象

            brdnPie=echarts.init(brdn);                        //初始化表格容器

            brdnPie.showLoading();

        }

		
        if($('#content .repair-pie').length>0){

            var $repair=$('#content .pie-con .repair-pie');    //获取机房停电图容器的jquery对象

            var repair=$repair.get(0);    //将故障容器的jquery对象转化为dom对象

            repairPie=echarts.init(repair);    //初始化表格容器

            repairPie.showLoading();

        }

        flushFourPie(true);

    });

    

    //更新四种饼状图

    function flushFourPie(){

    function flushFourPie(create){

        var cityname = $('#panelCity').val();

        locationcity = getCityByName(cityname);

        if(create) {

            initPieObj();

        }

		
		
        searchalarm_data();            //查询告警率

        searchGood();                //查询健康率

        searchmaintByMap();            //查询电池状态

		
        searchBatt_maint_inf();        //查询机房停电比例

		
		
		
        searchEndurHome();            //查询续航饼状图

    }

    

    //查询最近的故障维护记录

@@ -919,20 +920,22 @@
        });

        

    }

	
    var warnPie;

    //查询告警信息并显示告警率

    function searchalarm_data(){

        if($('#content .warn-pie').length==0){

            return;

        }

		
        //生成电池告警率饼状图

        var $warn=$('#content .pie-con .warn-pie');    //获取告警容器的jquery对象

        if($warn.length!=0){

            var warn=$warn.get(0);    //将告警容器的jquery对象转化为dom对象

            var warnPie=echarts.init(warn);    //初始化图表容器

            window.warnPie = warnPie;

            warnPie.showLoading();

            var isEcharts = isObject(warnPie)?true:false;

            if(!isEcharts) {

                var warn=$warn.get(0);    //将告警容器的jquery对象转化为dom对象

                warnPie=echarts.init(warn);    //初始化图表容器

                warnPie.showLoading();

            }

			
            

            var cityname='';

            //console.info("="+locationcity.pinyin+"=");

@@ -1004,47 +1007,63 @@
                     }

                    //创建电池告警饼状图

                    var warnTle="<s:text name='Battery_alarm_rate'/>";        /* 电池告警率 */

                    createPie(warnPie,warnTle,Almarr);

                    warnPie.on('click', function(param) {

                        // 0:在线电压   1:组端电压   2:充电电流   3:放电电流  4:单体电压  5:容量告警 
                        if(param.dataIndex == 5) {

                    if(!isEcharts) {

                        createPie(warnPie,warnTle,Almarr);

                        warnPie.on('click', function(param) {

                            // 0:在线电压   1:组端电压   2:充电电流   3:放电电流  4:单体电压  5:容量告警 
                            if(param.dataIndex == 5) {

								
                            }else {

                                window.open('elewarn.jsp?warntype='+param.dataIndex+'&warntxt='+param.name);

                            }

                            

                        }else {

                            window.open('elewarn.jsp?warntype='+param.dataIndex+'&warntxt='+param.name);

                        }

						
                    });

                        });

                    }else {

                        var opts = getOpt(warnTle, Almarr);

                        warnPie.setOption(opts);

                    }

					
                    setTimeout(searchalarm_data, 10000)

					
                 }

             });

        }        

    }

    

    var battstate_isExist = true;

    var brdnPie;

    //查询各个机房的电池状态

    function searchmaintByMap(){

        if($('#content .brdn-pie').length==0){

            return;

        }

		
        // 判断是否为Echarts对象

        var isEcharts = isObject(brdnPie)?true:false;

		
        if(!isEcharts) {

            //生成电池状态饼状图

            var $brdn=$('#content .pie-con .brdn-pie');        //获取故障容器的jquery对象

            var brdn=$brdn.get(0);                            //将容器的jquery对象转化为dom对象

            brdnPie=echarts.init(brdn);                        //初始化表格容器

        }

		
		
        var brdnTle="<s:text name='Batte_state'/>";                        /* 电池状态 */

        $.post("Batt_rtstateAction!serchBattStateRate",null,function(data){

            var model=eval("("+data.result+")");

            //console.info(model);

            var maintarr = new Array();

            setBatt_list(maintarr,model.data);

            if(battstate_isExist){

            if(!isEcharts){

                //创建电池故障率状图

                createPie(brdnPie,brdnTle,maintarr);

                battstate_isExist = false;

                brdnPie.on('click', function(param) {

                    console.info(param);

                    window.open('elestatus.jsp?battstate='+param.dataIndex);

                });

            }else{

                brdnPie.setOption(getOpt(brdnTle, maintarr));

                //console.info("更新成功");

            }                     

            setTimeout("searchmaintByMap()",10000);					
            setTimeout(searchmaintByMap, 10000);					
        });

    }

    

@@ -1084,13 +1103,21 @@
        {state:4,value:"<s:text name='Average_charge'/>",color:'#800080'},                    //均充

    ];

    

    var repairPie;

    var powercut_isNew = true;  
    var repairPie;  
    //查询机房停电状态

    function searchBatt_maint_inf(){

        if($('#content .repair-pie').length==0){

            return;

        }

        // 判断是否为Echarts对象

        var isEcharts = isObject(repairPie)?true:false;

        if(!isEcharts) {

            var $repair=$('#content .pie-con .repair-pie');    //获取机房停电图容器的jquery对象

            var repair=$repair.get(0);    //将故障容器的jquery对象转化为dom对象

            repairPie=echarts.init(repair);    //初始化表格容器

        }

		
        // 请求后台

        $.ajax({     

               type: "post",                 

            //url: "BattPower_offAction!serchPowerOff",        

@@ -1113,9 +1140,7 @@
                                {name:"机房掉站", val: model.code}];                        /* '未修复' */

                }

                var repairTle="<s:text name='Computer_room'/><s:text name='Power_cut'/>";        /* '机房停电' */

                if(powercut_isNew){

                    //创建机房停电饼状图

                    powercut_isNew = false;

                if(!isEcharts){

                    createPie(repairPie,repairTle,repairObj);

                    repairPie.on('click', function() {

                        window.open('batt-state-manage.jsp');

@@ -1124,8 +1149,8 @@
                    var opt = getOpt(repairTle, repairObj);

                    repairPie.setOption(opt);

                }                

                //console.info(repairPie);

                setTimeout("searchBatt_maint_inf()", 10000);

        		
                setTimeout(searchBatt_maint_inf, 10000);

            },                    

            error:function(){

                //setTimeout("searchBatt_maint_inf()", 10000);

@@ -1134,6 +1159,7 @@
    }

    

    //查询健康率

    var healthPie;

    function searchGood(){

        if($('#content .health-pie').length==0){        

            return;

@@ -1141,16 +1167,18 @@
        //生成电池健康率

        var $health=$('#content .pie-con .health-pie');    //获取故障容器的jquery对象

        if($health.length!=0){

            var health=$health.get(0);    //将故障容器的jquery对象转化为dom对象

            var healthPie=echarts.init(health);    //初始化表格容器

            window.healthPie = healthPie;

            // 是否echarts对象

            var isEcharts = isObject(healthPie)?true:false;

            if(!isEcharts) {

                var health=$health.get(0);    //将故障容器的jquery对象转化为dom对象

                healthPie=echarts.init(health);    //初始化表格容器

                healthPie.showLoading();	
            }

			
            var healthTle="<s:text name='Monomer_cap_health_rate'/>";            /* '电池健康率' */

            healthPie.showLoading();

            $.post("Battalarm_dataAction!serchGood",null,function(data){

                var model=eval("("+data.result+")");

                //console.info(model);

                var healthObj;

                //console.info(model);	
                if(model.code==1){

                    healthObj=[

                            {name:"单体容量健康",val:model.sum-model.data[0]-model.data[1],color:'#31CB36'},        /* '健康电池' */

@@ -1164,16 +1192,106 @@
                            {name:"单体容量更换",val:0,color:'#FF0000'}

                        ];

                }

                //创建电池故障饼状图

                createPie(healthPie,healthTle,healthObj);

                if(!isEcharts) {

                    //创建电池故障饼状图

                    createPie(healthPie,healthTle,healthObj);

					
                    // 点击饼状图进行跳转

                    healthPie.on('click', function(param) {

                        window.open('taskplan.jsp');    // 跳转到落后单体查询

                    });

                }else {

                    var opt = getOpt(healthTle, healthObj);

                    healthPie.setOption(opt);

                }

                

                // 点击饼状图进行跳转

                healthPie.on('click', function(param) {

                    window.open('taskplan.jsp');    // 跳转到落后单体查询

                });

                setTimeout(searchGood, 10000);

            });            

        }        

    }

	
    // 查询续航不足的机房数

    var endurPie;

    function searchEndurHome() {

        if($('#content .endur-pie').length==0){

            return;

        }

		
        //生成电池告警率饼状图

        var $endur=$('#content .pie-con .endur-pie');    //获取告警容器的jquery对象

        if($endur.length!=0){

            var isEcharts = endurPie?true:false;

            if(!isEcharts) {

                var endur=$endur.get(0);    //将故障容器的jquery对象转化为dom对象

                endurPie=echarts.init(endur);    //初始化表格容器

            }

			
            var endurTle="机房续航能力";            /* 机房续航能力 */

            // 查询后台内容

            $.ajax({

                type: 'post'

                ,async: true

                ,url: 'Batt_enduranceAction!serchByState_xuhang'

                ,data: null

                ,dataType: 'json'

                ,success: function(res) {

                    var rs = JSON.parse(res.result);

                    if(rs.code == 1) {

                        var data = rs.data;

                        var endurObj =[

                            {name:"续航不足1小时",val:data[0],color:'#FF0000'}

                            ,{name:"续航1~2小时",val:data[1],color:'#D1D105'}

                            ,{name:"续航2~3小时",val:data[2],color:'#31CB36'}

                            ,{name:"续航3小时以上",val:data[3],color:'#800080'}

                        ];

						
                        if(!isEcharts) {

                            //创建电池故障饼状图

                            createPie(endurPie,endurTle,endurObj);

                        }else {

                            var opts = getOpt(endurTle, endurObj);

                            endurPie.setOption(opts);

                        }

                    }

					
                    setTimeout(searchEndurHome, 10000);

                }

            });

			
        }

    }

	
    // 初始化饼状图容器对象

    function initPieObj() {

        warnPie = false;

        brdnPie = false;

        repairPie = false;

        healthPie = false;

        endurPie = false;

    }

	
    //让地图和饼状图随浏览器窗口的改变而改变

    $(window).resize(function(){

        getMapHt();

        if(isObject(warnPie))

        {

            warnPie.resize();

        }

        if(isObject(brdnPie))

        {

            brdnPie.resize();

        }

        if(isObject(repairPie))

        {

            repairPie.resize();

        }

        if(isObject(healthPie)) {

            healthPie.resize();

        }

        if(isObject(endurPie)) {

            endurPie.resize();

        }

    });

    

    //查询所有的公告信息

    function searchAnnounceall(){

@@ -1202,15 +1320,12 @@
    //查询放电测试的比例

    function searchTestsCale(){

        if($('#content .discharge-test').length==0){

            //alert();	
            return;

        }    

        //生成电池未放电比例图

        var $health=$('#content .discharge-test .test-pie');    //获取故障容器的jquery对象

        if($health.length!=0){

            var health=$health.get(0);    //将故障容器的jquery对象转化为dom对象

            //console.info(health);					
            //healthPie.showLoading();

            var healthTle="<s:text name='Battery_discharge_scale_map'/>";            /* '电池放电比例图' */

            Batttest_Td=new Array();

            $.post("Batttestdata_infAction!searchTestsCale",$('#batttest_form').serialize(),function(data){

@@ -1457,10 +1572,7 @@
        });

    });

    

    $(window).resize(function() {

        console.log(123);

        getMapHt();

    });

	
    // 改变div的大小

    function changeDivBig(ele) {

        // 隐藏面板

@@ -3092,25 +3204,6 @@
    

    $(function() {

        searchProvince();

    });	
	
    //让地图和饼状图随浏览器窗口的改变而改变

    $(window).resize(function(){

        if(warnPie != undefined)

        {

            warnPie.resize();

        }

        if(brdnPie != undefined)

        {

            brdnPie.resize();

        }

        if(repairPie != undefined)

        {

            repairPie.resize();

        }

        if(healthPie != undefined) {

            healthPie.resize();

        }

    });

    

    // 点击切换内容

@@ -3629,6 +3722,7 @@
                    var model = eval('('+data.result+')');

                    if(model.code == 1) {

                        var result = model.data;

                        //console.log(result);

                        var formatData = formatPieRsData(result[0]);

                        laytpl(pieConfTpl).render(formatData, function(html) {

                            layer.open({

@@ -3704,6 +3798,7 @@
        

        // 更新当前用户设置饼状图的使能状态

        function updateUserBieState(temp, dialog, load){

            var pieItemCon = $('.pie-con .pie-item-con');

            // 更新后台数据

            $.ajax({     

                type:"post",                                 

@@ -3713,9 +3808,22 @@
                data:'json='+JSON.stringify(temp),        

                success: function(data){ 

                    layer.closeAll();

		        	
                    var model = eval('('+data.result+')');

                    if(model.code == 1) {

                        // 更具temp的值设置饼状图的内容

                        var formaterTmp = GLOBAL.Index.Pie.formaterPieStauts(temp);

                        //console.log(formaterTmp);

                        var pieItems = GLOBAL.Index.Pie.getPieList(formaterTmp);

                        //console.log(pieItems);

                        pieItemCon.text('');

                        pieItemCon.append(pieItems);

			        	
                        // 设置高度

                        getMapHt();

			        	
                        // 更新饼状图

                        flushFourPie(true);

			        	
                        layer.msg('配置成功！！！');

                    }else {

                        layer.msg('配置失败！！！');


 gx_tieta/WebRoot/pages/js/pages/index-common.js

@@ -3,76 +3,87 @@
    gl.namespace('Index.Pie');

    

    var pieType = [

         {

            name: '机房停电'

            ,cla: 'repair-pie'

         },

         {

             name: '电池状态',

             action: 'Batt_rtstateAction!serchBattStateRate',

             formatData: eleStatus

             name: '电池状态'

             ,cla: 'brdn-pie'

         },

         {

             name: '电池告警率',

             action: 'Battalarm_dataAction!serchAlm',

             formatData: eleWarn

             name: '电池告警率'

             ,cla: 'warn-pie' 
         },

         {

             name: '机房停电',

             action: 'BattPower_offAction!serchPowerOff',

             formatData: homeCut

             name: '单体容量健康率'

             ,cla: 'health-pie'

         },

         {

             name: '单体容量健康率',

             action: 'Battalarm_dataAction!serchGood',

             formatData: monCapGood

             name: '机房续航能力'

             ,cla: 'endur-pie'

         }

    ];

    

    // 将pieType绑定到Index.Pie命名空间下

    gl.Index.Pie.pieType = pieType;

    

    // 根据数组调用查询内容

    function search(arr) {

        for(var i=0; i<arr.length; i++) {

            if(arr[i]) {

                ajax(pieType[i]);

            }

        }

    }

	
    // 将search绑定到Index.Pie命名空间下

    gl.Index.Pie.search = search;

	
    // 请求后台

    function ajax(obj) {

        // ajax请求后台

    // 查询饼状图状态返回需要显示饼状图

    function pieStatus() {

        // 设置一个同步查询返回一个div.pie-item-list

        var pieItems;

        $.ajax({

            type: 'post',

            url: obj.action,

            data: null,

            async: true,

            dataType: 'json',

            success:function(result) {

                var rs = JSON.parse(result.result);

                var pieData = obj.formatData(rs);

				
            type: 'post'

            ,async: false

            ,url: 'Echarts_usrAction!serchByCondition'

            ,data: null

            ,dataType: 'json'

            ,success: function(res) {

                var rs = JSON.parse(res.result);

                //console.log(rs);

                if(rs.code == 1) {

                    var data = rs.data[0];

                    var rsStatus = formaterPieStauts(data);

                    pieItems = getPieList(rsStatus);

                }

            }

        });

		
        return pieItems;

    }

    

    // 电池状态

    function eleStatus(data) {

        console.log(data);

    // 将pieStatus绑定到Index.Pie命名空间下

    gl.Index.Pie.pieStatus = pieStatus;

	
    // 根据数组返回

    function getPieList(arr) {

        var pieItems = $('<div class="pie-item-list"></div>');

        for(var i=0; i<arr.length; i++) {

            if(arr[i] == 1) {

                var cla = pieType[i].cla;

                var pieItem = $('<div class="'+cla+' module"></div>');

                pieItems.append(pieItem);

            }

			
        }

        return pieItems;

    }

    

    // 电池告警

    function eleWarn(data) {

        console.log(data);

    // 将getPieList绑定到Index.Pie命名空间下

    gl.Index.Pie.getPieList = getPieList;

	
    // 构造更新饼状图参数

    function formaterPieStauts(obj) {

        var rs = [];

        // 遍历pieType的类型

        for(var i=0; i<pieType.length; i++) {

            var num = i+1;

            var key = 'echarts'+num+'_enable';

            rs.push(obj[key]);

        }

        return rs;

    }

    

    // 机房停电

    function homeCut(data) {

        console.log(data);

    }

    // 单体容量健康率

    function monCapGood(data) {

        console.log(data);

    }

    // 将getPieList绑定到Index.Pie命名空间下

    gl.Index.Pie.formaterPieStauts = formaterPieStauts;

})(jQuery, window, document, GLOBAL);