根据后台数据库数据在前台页面画图，这个需求能实现吗？

Question

    手头有一个需求，需要在前台页面显示一个机柜中服务器占用情况。举例如下：
机柜号3-1-1-1中，高40U，存在3台服务器ABC。
A服务器占用1-12U，B服务器占用16-24U，C服务器占用25-32U。
从数据库中可抓到下列数据：
服务器     占用
A          1-12
B          16-24
C          25-32前台JSP页面，打算画一个40行1列的表格，第1-12行用一个颜色表示，16-24行用一个颜色表示，25-32用一个颜色表示，其他剩余部份用另一个颜色表示。大家能不能帮我想想，该怎么实现这个需求呢？

Answer 1

Flex可以实现，用SpringGraph做了不少机房pingmian图

Answer 2

用所谓的DOM可以实现吧，控制style。把数据库里的数据取出来，在java端生成html。。或者传回浏览器，用DOM控制table的td的style。。

Answer 3

周末闲了用flex给你画一个出来,

Answer 4

太感谢~~只是flex跟jsp应该能完美结合的哦？？能根据后台提供的数据生成图片的哦？

Answer 5

 柜台容器
ServersContainer
     List<SingleContainer>
     
 容器中的 每个小格子 
SingleContainer     //服务器
     ServerMachine 
     //忙时显示色
     BusyColor
     //空闲时显示色彩值 如 #ccccc
     freeColor 
  服务器
ServerMachine 
   //状态
   boolean isBusy;  
   上面的后面的Model对象
前台页面的话 迭代取出容器中的机器  利用 机器状态和色彩值构建  <div> or <span>都行这样就完成了!
    
 
  

Answer 6

建议画图这样的功能还是用flex实现吧，用js画累死了，画出来还动不动浏览器不兼容
楼主留邮箱给你发源码吧flex前台：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" width="1024" height="768" backgroundAlpha="0" backgroundColor="0xFFFFFF"
creationComplete="creationFun()">
<mx:Script>
<![CDATA[
import flash.utils.setTimeout;
import mx.containers.Canvas;
import mx.controls.Alert;
import mx.rpc.Fault;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
private var httpservice:HTTPService; 
private function creationFun():void{
httpservice = new HTTPService();
//httpservice.url = "1.xml";
httpservice.resultFormat = "e4x";
httpservice.url = "jiguituServlet?date="+new Date(); //这里写你后台servlet或者action的地址
httpservice.method = "post";
httpservice.addEventListener(ResultEvent.RESULT,onresult);//请求后台数据成功
httpservice.addEventListener(FaultEvent.FAULT,onfault);//请求失败，一般是后台发生异常
httpservice.send();
}
private function onresult(event:ResultEvent):void{
 
var xmldata:XML = XML(event.result) as XML;  //将后台返回XML  
for(var i:int = 0;i < xmldata.cabinets.@height;i++){
var rowview:Canvas = new Canvas();
rowview.width=500;
rowview.height=15;
rowview.setStyle("borderStyle","solid");
rowview.setStyle("borderColor",0x000000); //默认为黑色
rowview.setStyle("backgroundColor",0x000000);
rowview.toolTip = "空闲机架";
vbox.addChild(rowview);
}
 
for(var j:String in xmldata.cabinets.server ){
  for(var k:Number = Number(xmldata.cabinets.server[j].@startHeight);k <= Number(xmldata.cabinets.server[j].@endHeight);k++){
   (vbox.getChildAt(k) as Canvas).setStyle("backgroundColor",String(xmldata.cabinets.server[j].@color));
   (vbox.getChildAt(k) as Canvas).toolTip = String(xmldata.cabinets.server[j].@serverName);
  }
}
 
}
private function onfault(event:FaultEvent):void{
Alert.show("连接后台失败："+event.message);
}
]]>
</mx:Script>
<mx:VBox id="vbox" width="100%" height="90%" verticalGap="1">

</mx:VBox>
 
</mx:Application>
servlet:
package com.servlet;import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 *机柜图servlet
 */
public class JiguituServlet extends HttpServlet{ @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
 doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
      req.setCharacterEncoding("utf-8");
      resp.setContentType("text/html;charset=utf-8");
      String xmldata = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
      "<root>"+
      "<cabinets name='3-1-1-1' height='40'>"+ //机柜号3-1-1-1高40U，存在3台服务器ABC。
"<server serverName='服务器A' color='red' startHeight='1' endHeight='12'></server>" +
"<server serverName='服务器B' color='blue' startHeight='16' endHeight='24'></server>" +
"<server serverName='服务器C' color='green' startHeight='25' endHeight='32'></server>" + 
  "</cabinets>" +
  "</root>";
      resp.getWriter().print(xmldata);
  resp.getWriter().close();
} 
}

Answer 7

1、xiayuqijava 很强悍。
2、FLEX实现的话，确实方便。但是，跟jsp 的整合麻烦不？只要import flex的相关包就可以了？
3、如果想做钻取，如点击服务器C，可显示服务器C的相关信息，能实现吗？

Answer 8

你这玩意，用普通html页面不就能够实现吗？还用的着别的吗？除了颜色，难道还要画服务器图标吗？

Answer 9

当然能实现。我们做的机房平面图，设备面板图都是用flex做的，
当然 你用html、js也可以实现，实现起来就太复杂了