WebGL打造以数据驱动的3D可视化智慧工厂

设备实时数据

点击设备可以查看实时数据和运行状态，在三维场景中实时体现状态和值，根据设备不同阈值模拟设备报警。

使用canvas绘制弹窗

function createNoteCanvas(id){

var title =“居民负荷”;

var data = [

{name: “A相电压”, value: “10040863.2”},

{name: “B相电压”, value: “-8086002”},

];

var canvas = document.createElement(“canvas”);

var ctx=canvas.getContext(‘2d’);

canvas.width=550;

canvas.height=data.length*14+30;

canvas.style.border=“1px solid #ccc”;

ctx.fillStyle=“#0C4657”;

strokeRoundRect(ctx,0,0,canvas.width,canvas.height,4.5);

fillRoundRect(ctx,1,1,canvas.width-2,canvas.height-2,5);

var rectH=6;

var rectW=20;

var titleH=12;

ctx.scale(2,2)

ctx.lineWidth = 1;

ctx.strokeStyle = “#ccc”;

ctx.textAlign = “center”;

ctx.fillStyle = “#FFFFFF”;