rabbitmq修改

@@ -80,7 +80,18 @@
             </div>
         </div>
 
-        <div class="container-fluid" id="rabbitmq_container">
+        <div class="container-fluid" id="rabbitmq_container" style="overflow-y: auto" >
+            <table  cellspacing="0" width="100%" id="rabbitmq_table" style="background-color: #eaefec">
+                <thead>
+                <tr>
+                    <th style="text-align: center;width: 20%;height: 30px;border:1px solid;background-color: #55c8ef">监控对象</th>
+                    <th  colspan="2" style="text-align: center;border:1px solid;background-color:  #55c8ef">详细信息</th>
+
+                </tr>
+                </thead>
+                <tbody id="rabbitmq_tbody">
+                </tbody>
+            </table>
 
         </div>
     </div>
@@ -106,7 +117,8 @@
             },
             success: function (response) {
 
-                groupMqType(response.data);
+//                groupMqType(response.data);
+                drawTable(response.data);
 
             },
             error: function (e) {
@@ -116,7 +128,123 @@
 
     }
 
-    function groupMqType(data) {
+//展示表格信息
+    function drawTable(respData) {
+        var tbody = document.getElementById("rabbitmq_tbody");
+        if(respData == null || Object.keys(respData).length == 0 ){
+            var html = $("<tr><td colspan='3' style='text-align: center;border: 1px solid black;height: 30px'>暂无数据</td></tr>");
+             html.appendTo(tbody);
+             return ;
+        }
+
+        //遍历并且展示
+        for( var moTypeName in respData){
+            var data = respData[moTypeName];//每一个集群下面的详细信息
+            var listLength = data.length;
+            var lines = parseInt(listLength / 2) + (listLength % 2 == 0 ? 0 : 1);//总行数--单元格跨行
+
+            //展示集群名称的单元格 跨行
+            var td_1 = $("<td rowspan='"+lines+"' style='text-align: center; border:1px solid black;color: blue;font-size:18px;' >   </td>");
+            td_1.append(moTypeName);
+            var tr = $("<tr></tr>");
+            for(var i = 0; i < data.length; i++){
+                var currentLine = 1;
+
+                var td = $("<td></td>");
+                var col = generateDiv(data[i]);//生成 div
+                if(i % 2 == 0){//换行
+                    if(i > 0){
+                        tr = $("<tr></tr>");//换行，并非当前集群的首行,必须要重新定义
+                    }
+
+                    tr.appendTo(tbody);//另起一行
+                    if(i == 0){//当前集群的首行，需要加入 集群的名字
+                        td_1.appendTo(tr);
+                    }
+
+                }else{//不需要换行，往后顺延，添加边框
+                    td.css("border-right","1px solid");
+                }
+                col.appendTo(td);
+                td.appendTo(tr);
+
+
+                if( i == data.length - 1 && (i % 2 == 0)){//奇数个的时候，需要添加一个空的td
+                    tr.append("<td style='border-right: 1px solid'></td>");
+                }
+
+                if(currentLine == lines){
+                    tr.css("border", "1px solid");
+                }
+                currentLine ++;
+            }
+        }
+
+    }
+
+    function generateDiv(mqInfo){
+        //生成div
+        var col = $("<div style='width:90%;margin-top: 7px;margin-left: 5%' class='col-md-4' id='" + mqInfo.moId + "' onclick='ok(id)'>");//每个td的具体内容
+        var panel = $("<div>");
+
+        if (mqInfo.moState == 0) {
+            panel.addClass("panel panel-fail-alt noborder");
+        }
+        else {
+            panel.addClass("panel panel-success-alt noborder");
+        }
+
+        col.append(panel);
+
+        var panel_head = $("<div class='panel-heading noborder'>")
+
+        panel.append(panel_head);
+
+        var panel_icon = $("<div class='panel-icon' style='background-image:url(\""+ contextPath + "img/rabbit.png\"); width:60px;height:60px;' >");
+
+        panel_head.append(panel_icon);
+
+        var media_body = $("<div class='media-body'>");
+
+        panel_head.append(media_body);
+
+        var tile = $("<h5 class='md-title nomargin' style='word-break: break-all'>");
+
+        var tile_value = $("<strong>").html(mqInfo.moName);
+
+        tile.append(tile_value);
+
+        media_body.append(tile);
+
+        var tile_info = $("<h2 class='mt5'>").html(mqInfo.moHostIp);
+
+        media_body.append(tile_info);
+
+        var parameters = $("<div class='clearfix mt20'>");
+
+        panel_head.append(parameters);
+
+        var queuePara = $("<div class='pull-left'>");
+
+        queuePara.append($("<h5 class='md-title nomargin'>").html("Queues"));
+
+        queuePara.append($("<h4 class='nomargin'>").html(mqInfo.moQueues));
+
+        parameters.append(queuePara);
+
+        var msgPara = $("<div class='pull-right'>");
+
+        msgPara.append($("<h5 class='md-title nomargin'>").html("Messages"));
+
+        msgPara.append($("<h4 class='nomargin'>").html(mqInfo.moMsgs));
+
+        parameters.append(msgPara);
+        return col;
+    }
+
+
+    //之前的做法
+   /* function groupMqType(data) {
         $("#rabbitmq_container").html("");
         var typeIdStr="";
         for (var i = 0; i < data.length; i++) {
@@ -219,7 +347,7 @@
             parameters.append(msgPara);
         }
 
-    }
+    }*/
 
 
     function ok(id) {