{
|
let field_panel_style="margin-left:15px;display:flex;flex-wrap:wrap";
|
let field_style="display:grid;grid-template-columns:100px 50px;width:150px;margin-right:15px";
|
let field_head_style="";
|
let field_value_style="border:1px solid gray";
|
var cfg={
|
header:{
|
name:"ddddd",
|
column:3
|
},
|
body:[
|
{
|
name:"请求",
|
fields:[
|
{
|
offset:0,
|
name:"abc",
|
type:"short"
|
}
|
]
|
}
|
]
|
};
|
|
|
|
|
class MessageDecoder{
|
|
|
|
|
constructor(cfg,div){
|
this.config=cfg;
|
this.fields=[];
|
var off1=cfg.header.baseOffset;
|
|
this.view=document.createElement("div");
|
for(var i=0;i<this.config.body.length;i++){
|
var bd=this.config.body[i];
|
var hd=document.createElement("div");
|
hd.innerText=bd.name;
|
this.view.appendChild(hd);
|
var ct=document.createElement("div");
|
ct.style=field_panel_style;
|
this.view.appendChild(ct);
|
var off2=bd.baseOffset;
|
for(var j=0;j<bd.fields.length;j++){
|
var fd=bd.fields[j];
|
|
var fb=document.createElement("div");
|
fb.style=field_style;
|
var itm=document.createElement("span");
|
itm.style=field_head_style;
|
itm.innerText=fd.name;
|
fb.appendChild(itm);
|
itm=document.createElement("span");
|
itm.style=field_value_style;
|
itm.innerText="--";
|
fb.appendChild(itm);
|
|
var fdb={
|
offset:fd.offset+off1+off2,
|
view:itm,
|
type:fd.type
|
};
|
this.fields.push(fdb);
|
ct.appendChild(fb);
|
}
|
}
|
div.appendChild(this.view);
|
}
|
;
|
update(data){
|
for(var i=0;i<this.fields.length;i++){
|
var vd=this.fields[i];
|
var begin=vd.offset*2;
|
var end=begin;
|
switch(vd.type){
|
case "short":
|
end=begin+4;
|
if(begin<0 || end>data.length)
|
break;
|
|
var st=Number("0x0000"+data.substring(begin,end));
|
vd.view.innerText=st;
|
}
|
}
|
}
|
}
|
|
function createMessageDecoder(config,div){
|
return new MessageDecoder(config,div);
|
}
|
|
}
|
