饼状图

hdw

2018-10-24 c73e68680f1884ed9e2260ea9c5dcde8e4d48615

饼状图

 gx_tieta/WebRoot/css/common.css

@@ -71,4 +71,29 @@
}

.whyc-sider-menu .treeView-progressBar-container {

    display: none;

}



.tpl-tbl-opts-tbl {

    margin-top: -20px;

    margin-left: -15px;

    margin-right: -15px;

}

.tpl-tbl-opts-header {

    position: relative;

}

.tpl-tbl-opts-header table {

    width: 100%;

}

.tpl-tbl-opts-header table th{

    padding-left: 8px;

    padding-right: 8px;

    line-height: 32px;

    text-align: center;

    background-image: url('../image/table_th_bg.gif');

    background-repeat: repeat-x;

    border: 1px solid #ccc;

}

.tpl-tbl-opts-header table td {

    text-align: center;

    border: 1px solid #ccc;

}

 gx_tieta/WebRoot/css/index_layout.css

@@ -45,6 +45,7 @@
/*故障和告警饼状图*/

#content .pie-con{

    float:right;

    position: relative;

    width:20%;

    background-color:#F3F0F0;

    border-top:#ddd;

@@ -73,6 +74,21 @@
    height:100px;

    background-color:#F3F0F0;

}



.pie-conf {

    position: absolute;

    top: 2px;

    right: 8px;

    z-index: 99;

}

.pie-conf .pie-btn {

    color: #bbbbbb;

    font-size: 18px;

    cursor: pointer;

}

.pie-conf .pie-btn:hover {

    color: #000000;

}

/*我的作业*/

#content .my-work{

    width:100%;


 gx_tieta/WebRoot/iframe/pie-config.html

New file
@@ -0,0 +1,33 @@
<div class="tpl-tbl-opts-tbl" id="tplTblOpts">

    <div class="tpl-tbl-opts-header">

        <table>

            <thead>

                <tr>

                    <th>编号</th>

                    <th>选项名称</th>

                    <th>选择</th>

                </tr> 
             </thead>

             <tbody>

                 {{# 
                     var rsCheck = function(status) {

                         var rs = '<input type="checkbox"/>';

                         if(status) {

                             rs = '<input type="checkbox"/ checked="checked">';

                         }

			 			
                         return rs;

                     }

                 }}

			 
                 {{# layui.each(d.tblData, function(index, item){ }}

                     <tr>

                         <td>{{= index+1 }}</td>

                         <td>{{ item.name }}</td>

                         <td>{{ rsCheck(item.status) }}</td>

                     </tr>

                 {{# }); }}

             </tbody>

        </table>

    </div>

</div>


 gx_tieta/WebRoot/index.jsp

@@ -83,6 +83,9 @@
            overflow-y: auto; 

            overflow-x: hidden;

        }

        body .layui-layer-dialog {

            min-width:400px;

        }

    </style>

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    

@@ -153,7 +156,11 @@
            

            <!-- 电池故障与电池告警饼状图 -->

            <div class="pie-con">



                <div class="pie-conf">

                    <a href="javascript:;" class="pie-btn" id="faCog"  title="图表配置">

                        <i class="fa fa-cog"></i>

                    </a>

                </div>

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

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

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

@@ -330,6 +337,7 @@
    <script type="text/javascript" src="pages/js/base.js"></script>

    <script type="text/javascript" src="pages/js/common.js"></script>

    <script type="text/javascript" src="pages/js/pages/siderbar.js"></script>

    <script type="text/javascript" src="pages/js/pages/index-common.js"></script>

    <script type="text/javascript" src="js/panel.js"></script>

    <script type="text/javascript" src="js/search.js"></script>

    <script type="text/javascript" src="js/changePinYin.js"></script>

@@ -3329,8 +3337,88 @@
        });

    });

    

    layui.use(['form'],function() {

        var form = layui.form();

    layui.use(['form', 'layer', 'laytpl'], function() {

        var form = layui.form;

        var layer = layui.layer;		
        var laytpl = layui.laytpl;

		
        // 点击饼状图配置

        $('#faCog').click(function() {

            searchUserBieState();    // 查询当前饼状图的配置状态

        });

		
        var layerMsg;

		
        // 点击配置项复选框

        $('body').on('click', '#tplTblOpts .tpl-tbl-opts-header input[type=checkbox]', function(event) {

            layer.close(layerMsg);

            var iptList = $('#tplTblOpts .tpl-tbl-opts-header input[type=checkbox]');

            var num = 0;

            iptList.each(function() {

                if($(this).is(':checked')) {

                    num++;

                }

            });

            if(num>4) {

                layerMsg = layer.msg("最多选择四个！", {

                    type: 1

                });

                $(this).prop('checked', false);

            }

			
        });

		
		
        var pie = GLOBAL.Index.Pie;

        var pieType = pie.pieType;

        var pieConfTpl =  getTpl('iframe/pie-config.html');

        //查询当前用户设置饼状图的使能状态

        function searchUserBieState(){

            $.ajax({ 	
                type:"post", 								
                url: "Echarts_usrAction!serchByCondition",						
                async:true,				
                dataType:'json',

                data:null,		
                success: function(data){ 
                    var model = eval('('+data.result+')');

                    if(model.code == 1) {

                        var result = model.data;

                        var formatData = formatPieRsData(result[0]);

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

                            layer.open({

                                id: 'pie',

                                title: '饼状图配置',

                                maxHeight: 450,

                                yes: function(index, kk) {

									
                                },

                                content: html

                            });

                        });

                    }

					
                   } 				
            });

        }

		
        // 格式化查询结果

        function formatPieRsData(result) {

            var data={};

            data.tblData=[];

            // 遍历pieType的类型

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

                var tmp = {};

                var num = i+1;

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

                console.log(key);

                tmp.name = pieType[i].name;

                tmp.status = result[key];

                data.tblData.push(tmp);

            }

			
            return data;

        }

    });

    </script> 

</html>


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

New file
@@ -0,0 +1,78 @@
;(function($, window, document, gl, undefined) {

    // 首页饼状图

    gl.namespace('Index.Pie');

	
    var pieType = [

         {

             name: '电池状态',

             action: 'Batt_rtstateAction!serchBattStateRate',

             formatData: eleStatus

         },

         {

             name: '电池告警率',

             action: 'Battalarm_dataAction!serchAlm',

             formatData: eleWarn

         },

         {

             name: '机房停电',

             action: 'BattPower_offAction!serchPowerOff',

             formatData: homeCut

         },

         {

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

             action: 'Battalarm_dataAction!serchGood',

             formatData: monCapGood

         }

    ];

	
    // 将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请求后台

        $.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);

				
            }

        });

    }

	
    // 电池状态

    function eleStatus(data) {

        console.log(data);

    }

	
    // 电池告警

    function eleWarn(data) {

        console.log(data);

    }

	
    // 机房停电

    function homeCut(data) {

        console.log(data);

    }

    // 单体容量健康率

    function monCapGood(data) {

        console.log(data);

    }

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