最近干某活时，突然发现几年前做的一个监控模块，里头的一个小canvas：类win任务管理器，效果图：
下面是源码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" remove="destoryCanvas();" resize="resizeCanvas();" creationComplete="init();">
<mx:Style>
.common{
font-size:11px;
color:#00ff11;
textAlign:center;
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.utils.Methods;
import com.modal.MonitorLog;
import mx.rpc.events.ResultEvent;
import mx.controls.Label;
import mx.collections.ArrayCollection;
import mx.controls.Text;
import mx.controls.Alert;
private var nodeId:String=null;
private var cpuArr:Array=new Array();
private var memArr:Array=new Array();
private var ioSentArr:Array=new Array();
private var ioReceiveArr:Array=new Array();
private var dv:Number=0;
private var total:Number=0;
private var ioReceiveColor:uint=0x00ff00;
public function chgNode(nodeId:String):void{
if(nodeId!=this.nodeId){
this.nodeId=nodeId;
cpuArr.length=0;
memArr.length=0;
ioSentArr.length=0;
ioReceiveArr.length=0;
dv=0;
total=0;
resizeCanvas();
}
}
private function destoryCanvas():void{
/* timer.stop();
timer.removeEventListener(TimerEvent.TIMER,draw);
timer=null; */
}
private function init():void{
/* timer.addEventListener(TimerEvent.TIMER,draw);
timer.delay=1000;
timer.start(); */
draw();
}
public function draw():void{
var log:MonitorLog=new MonitorLog();
log.hasLog=1;
log.cpuUseFn=0.99;
log.ioReceive=0.50;
log.ioSent=0.50;
log.ramUseFn=0.10;
log.totalSize=2048;
log.useSize=800;
handleLogResult(log);
var ac:ArrayCollection=new ArrayCollection();
for(var i=0;i<100;i++){
log=new MonitorLog();
log.hasLog=1;
log.cpuUseFn=random(1);
log.ioReceive=random(1);
log.ioSent=random(1);
log.ramUseFn=random(1);
log.totalSize=2048;
log.useSize=random(2048);
ac.addItem(log);
}
handleLogListResult(ac);
/* monitorLogAction.getMoniLog.addEventListener(ResultEvent.RESULT,handleLogResult);
monitorLogAction.getMoniLog(this.nodeId); */
}
private function random(n:Number):Number{
return Math.random()*n;
}
private function handleLogListResult(ac:ArrayCollection) : void{
cpuArr.length=0;
memArr.length=0;
ioSentArr.length=0;
ioReceiveArr.length=0;
dv=0;
total=0;
//var ac:ArrayCollection=event.result as ArrayCollection;
if(ac==null)
return;
var len:int=ac.length;
if(len==0)
return;
var cpuV:int;
var tmp1:Number=0;
var tmp2:Number=0;
var mem:Number;
for(var i:int=0;i<len;i++){
var log:MonitorLog=ac.getItemAt(i) as MonitorLog;
if(log!=null){
cpuV=log.cpuUseFn*100;
tmp1=log.cpuUseFn;
cpuArr.push(1-tmp1);
mem=log.ramUseFn*100;
tmp2=log.ramUseFn;
memArr.push((1-tmp2));
if(log.ioSent>this.maxIoSent){
this.maxIoSent=log.ioSent;
}
if(log.ioReceive>this.maxIoSent){
this.maxIoSent=log.ioReceive;
}
ioSentArr.push(log.ioSent);
ioReceiveArr.push(log.ioReceive);
}
if(i==len-1){//last
dv=log.useSize;
total=log.totalSize;
drawDisk(disk1,dv,total);
}
}
drawCpu(cpu1,cpuV+" %",tmp1,cpu1L);
drawCpu1(cpu2,0x00ff00,cpuArr);
drawCpu(pen1,mem.toFixed(2)+" %",tmp2,pen1L);
drawCpu1(pen2,0x00ffff,memArr);
if(true){
var tmpIoSent:Number=this.maxIoSent+10;
var tmpIoArr:Array=new Array();
var tmpReArr:Array=new Array();
for(var i:int=0;i<ioSentArr.length;i++){
tmpIoArr.push(ioSentArr[i]/tmpIoSent);
}
for(var i:int=0;i<ioReceiveArr.length;i++){
tmpReArr.push(ioReceiveArr[i]/tmpIoSent);
}
drawCpu1(io1,0xffffff,tmpIoArr);
drawCpu1(io1,ioReceiveColor,tmpReArr,false);
}
}
private var maxIoSent:Number=0;
private function handleLogResult(log:MonitorLog) : void{
//var log:MonitorLog=event.result as MonitorLog;
if(log!=null&&log.hasLog==1){
var cpuV:int=log.cpuUseFn*100;
var tmp1:Number=log.cpuUseFn;
cpuArr.push(1-tmp1);
drawCpu(cpu1,cpuV+" %",tmp1,cpu1L);
drawCpu1(cpu2,0x00ff00,cpuArr);
tmp1=log.ramUseFn;
var mem:Number=log.ramUseFn*100;
memArr.push((1-tmp1));
drawCpu(pen1,mem.toFixed(2)+" %",tmp1,pen1L);
drawCpu1(pen2,0x00ffff,memArr);
//ioSent
if(log.ioSent>this.maxIoSent){
this.maxIoSent=log.ioSent;
}
if(log.ioReceive>this.maxIoSent){
this.maxIoSent=log.ioReceive;
}
ioSentArr.push(log.ioSent);
ioReceiveArr.push(log.ioReceive);
if(true){
var tmpIoSent:Number=this.maxIoSent+10;
var tmpIoArr:Array=new Array();
var tmpReArr:Array=new Array();
for(var i:int=0;i<ioSentArr.length;i++){
tmpIoArr.push(ioSentArr[i]/tmpIoSent);
}
for(var i:int=0;i<ioReceiveArr.length;i++){
tmpReArr.push(ioReceiveArr[i]/tmpIoSent);
}
drawCpu1(io1,0xffffff,tmpIoArr);
drawCpu1(io1,ioReceiveColor,tmpReArr,false);
}
dv=log.useSize;
total=log.totalSize;
drawDisk(disk1,dv,total);
}
}
//百分比
private function drawCpu(per:Canvas,text:String,v:Number,label:Label):void{
per.graphics.clear();
/* per.removeAllChildren(); */
var ge:Number=1;
var h:Number=2;
var w:Number=15;
var lr:Number=15;
var top:Number=3;
var bottom:Number=20;
var total:int=(per.height-top-bottom)/(h+ge);
v=total-v*total;
per.graphics.beginFill(0,1);
per.graphics.drawRect(0,0,per.width,per.height);
per.graphics.endFill();
//未占的那部分
per.graphics.beginFill(0x00ff11,0.5);
for(var i:int=0;i<v;i++){
per.graphics.drawRect(lr,top+(h+ge)*i,w,h);
per.graphics.drawRect(lr+w+ge,top+(h+ge)*i,w,h);
}
per.graphics.endFill();
//已占的那部分
per.graphics.beginFill(0x00ff11,1);
for(var i:int=v;i<total;i++){
per.graphics.drawRect(lr,top+(h+ge)*i,w,h);
per.graphics.drawRect(lr+w+ge,top+(h+ge)*i,w,h);
}
per.graphics.endFill();
label.y=(h+ge)*total+top;
label.text=text;
label.width=per.width;
/* var txt:Text=new Text();
txt.x=0;
txt.y=(h+ge)*total+top;
txt.styleName="common";
txt.width=per.width;
txt.setStyle("textAlign","center");
per.addChild(txt); */
}
//曲线
private function drawCpu1(cpu:Canvas,color:uint,arr:Array,clear:Boolean=true):void{
if(clear){
cpu.graphics.clear();
cpu.graphics.beginFill(0,1);
cpu.graphics.drawRect(0,0,cpu.width,cpu.height);
cpu.graphics.endFill();
var grapWidth: Number = 10;
cpu.graphics.lineStyle(1, 0x00bb66,0.5);
//画横线
var i : int = 0;
var totalLength: Number = 0;
while(totalLength <= cpu.height-grapWidth){
cpu.graphics.moveTo(0, grapWidth * i);
cpu.graphics.lineTo(cpu.width, grapWidth * i);
totalLength = grapWidth * i;
i ++;
}
totalLength = 0;
i = 0;
//画竖线
while(totalLength <= cpu.width-grapWidth){
cpu.graphics.moveTo(grapWidth * i, 0);
cpu.graphics.lineTo(grapWidth * i, cpu.height);
totalLength = grapWidth * i;
i++;
}
}
//画曲线
cpu.graphics.lineStyle(1.2,color);//0x00ffff
var ge:int=4;
i=0;
/* var value:int;
var x1:int=0;
var y1:int=cpu.height;
var tmp:int=cpu.width/ge;
while(i<tmp){
value=(1-Math.random())*cpu.height;
cpu.graphics.moveTo(x1,y1);
x1=(i+1)*ge;
y1=value;
cpu.graphics.lineTo(x1,y1);
i++;
} */
var value:int;
var x1:int=0;
var y1:int=0;
var len:int=arr.length;
var w:Number=cpu.width;
var h:Number=cpu.height;
var tmp:int=w/ge;
x1=w-ge;
y1=(new Number(arr[len-1]))*h;
var j:int=0;
for(j=1;j<len&&i<tmp;j++,i++){
cpu.graphics.moveTo(x1,y1);
x1=w-j*ge;
y1=(new Number(arr[len-j-1]))*h;
cpu.graphics.lineTo(x1,y1);
}
//清除掉没用的arr中的数据
//清除掉过多的数据
if(len>2000/ge&&j!=len-1){
arr.splice(0,len-j);
}
}
private function drawDisk(disk1:Canvas,d:Number,total:Number):void{
var tmp:Number;
if(total==0)
tmp=0;
else
tmp=(disk1.width-8)*(d/total);
disk1.graphics.clear();
disk1.graphics.lineStyle(1,0x333333);
disk1.graphics.beginFill(0xffffff,1);
disk1.graphics.drawRect(4,4,disk1.width-4,12);
disk1.graphics.endFill();
disk1.graphics.beginFill(0x3300ff,1);
disk1.graphics.drawRect(4,4,tmp,12);
disk1.graphics.endFill();
disk1L.text=d.toFixed(2)+"GB已用，共"+total+"GB";
}
private function resizeCanvas():void{
cpu1.height=(this.height-45-4*8)/3-4*8;
cpu2.width=this.width-(60+8*4)-8*3;
if(cpu2.width<120){
cpu2.width=120;
}
cpu2.height=(this.height-45-4*8)/3-4*8;
pen1G.y=(this.height-45-4*8)/3+8;
pen1.height=(this.height-45-4*8)/3-4*8;
pen2G.y=(this.height-45-4*8)/3+8;
pen2.width=this.width-(60+8*4)-8*3;
if(pen2.width<120){
pen2.width=120;
}
pen2.height=(this.height-45-4*8)/3-4*8;
io1G.y=(this.height-45-4*8)/3*2+8;
io1.width=this.width-8*4;
if(io1.width<120+60+16+8){
io1.width=120+60+16+8;
}
io1.height=(this.height-45-4*8)/3-4*8;
disk1G.y=(this.height-45-4*8)+8;
disk1.width=this.width-8*4;
if(disk1.width<120+60+16+8){
disk1.width=120+60+16+8;
}
initG(cpu1G,cpu1,35);
initG(pen1G,pen1,30);
initG(cpu2G,cpu2,90);
initG(pen2G,pen2,105);
initG(io1G,io1,75);
initG(disk1G,disk1,60);
//马上重新画图，获取最近的数据
var tmp1:Number=0;
var cpuV:int=0;
if(cpuArr.length>0){
tmp1=1-(new Number(cpuArr[cpuArr.length-1]));
cpuV=tmp1*100;
}
drawCpu(cpu1,cpuV+" %",tmp1,cpu1L);
drawCpu1(cpu2,0x00ff00,cpuArr);
tmp1=0;
var mem:Number=0;
if(memArr.length>0){
tmp1=1-(new Number(memArr[memArr.length-1]));
mem=tmp1*2;
}
drawCpu(pen1,mem.toFixed(2)+" %",tmp1,pen1L);
drawCpu1(pen2,0x00ffff,memArr);
//ioSent
if(true){
var tmpIoSent:Number=this.maxIoSent+10;
var tmpIoArr:Array=new Array();
var tmpReArr:Array=new Array();
for(var i:int=0;i<ioSentArr.length;i++){
tmpIoArr.push(ioSentArr[i]/tmpIoSent);
}
for(var i:int=0;i<ioReceiveArr.length;i++){
tmpReArr.push(ioReceiveArr[i]/tmpIoSent);
}
drawCpu1(io1,0xffffff,tmpIoArr);
drawCpu1(io1,ioReceiveColor,tmpReArr,false);
}
drawDisk(disk1,dv,total);
}
private function initG(cpu1G:Canvas,cpu1:Canvas,fontlen:Number):void{
cpu1G.graphics.clear();
cpu1G.graphics.lineStyle(1,0x666666);
var r:Number=cpu1.width+2*8;//最右边点
var b:Number=cpu1.height+18+8;
//上一
cpu1G.graphics.moveTo(0,8);
cpu1G.graphics.lineTo(10,8);
//上二
cpu1G.graphics.moveTo(10+fontlen,8);
cpu1G.graphics.lineTo(r,8);
//左
cpu1G.graphics.moveTo(0,8);
cpu1G.graphics.lineTo(0,b);
//右
cpu1G.graphics.moveTo(r,8);
cpu1G.graphics.lineTo(r,b);
//下
cpu1G.graphics.moveTo(0,b);
cpu1G.graphics.lineTo(r,b);
}
]]>
</mx:Script>
<mx:Canvas id="cpu1G" x="8" y="8">
<mx:Label x="13" y="0" text="CPU"/>
<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" id="cpu1" x="8" y="18" width="60">
<mx:Label x="0" id="cpu1L" styleName="common"/>
</mx:Canvas>
</mx:Canvas>
<mx:Canvas id="cpu2G" x="92" y="8"><!--92=60+8*4-->
<mx:Label x="13" y="0" text="CPU 使用记录"/>
<mx:Canvas id="cpu2" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="8" y="18"/>
</mx:Canvas>
<mx:Canvas id="pen1G" x="8">
<mx:Label x="13" y="0" text="内存"/>
<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" id="pen1" x="8" y="18" width="60">
<mx:Label x="0" id="pen1L" styleName="common"/>
</mx:Canvas>
</mx:Canvas>
<mx:Canvas id="pen2G" x="92" ><!--92=60+8*4-->
<mx:Label x="13" y="0" text="物理内存使用记录"/>
<mx:Canvas id="pen2" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="8" y="18"/>
</mx:Canvas>
<mx:Canvas id="io1G" x="8" >
<mx:Label x="13" y="0" text="IO使用记录"/>
<mx:Canvas id="io1" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="8" y="18"/>
</mx:Canvas>
<mx:Canvas id="disk1G" x="8" >
<mx:Label x="13" y="0" text="存储空间"/>
<mx:Canvas id="disk1" height="38" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="8" y="18">
<mx:Label x="4" y="17" id="disk1L"/>
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>
