最近和我的團隊開發web管理系統，主要功能就是統計、定位、顯示、功能刪改、語音、視頻通話、圖表統計、實時更新。並且結合公司資源，進行機器人的操作。
一、功能頁面
2、機器人導航、實時顯示檢測數據，動態呈現
二、技術分離
html：
<div id="content" style="display:block"><div id="chart_combo" class="chart_combo"></div></div>
js:
var chart;
/* 柱狀圖表數據 */
chart = new Highcharts.Chart({
chart : {
renderTo : 'chart_combo' //關聯頁面元素div#id
},
title : { //圖表標題
text : '變電站室內信息'
},
/* xAxis : { //x軸
categories : [ '變壓器1', '變壓器2', '變壓器3', '變壓器4','變壓器5','變壓器6' ], //X軸類別
labels : {
y : 18
}
//x軸標簽位置：距X軸下方18像素
}, */
yAxis : { //y軸
title : {
text : '攝氏度'
}, //y軸標題
lineWidth : 3
//基線寬度
},
tooltip : {
formatter : function() { //格式化鼠標滑向圖表數據點時顯示的提示框
var s;
if (this.point.name) { // 餅狀圖
s = '<b>' + this.point.name + '</b> <br>' + this.y
+ '℃(' + twoDecimal(this.percentage)
+ '%)';
} else {
s = '' + this.x +'</b> <br> '+ this.series.name+':'+ + this.y + '';
}
return s;
}
},
labels : { //圖表標簽
items : [ {
html : '',//溫濕度對比
style : {
left : '48px',
top : '8px'
}
} ]
},
exporting : {
enabled : true
//設置導出按鈕不可用
},
series : [ { //數據列
type : 'column',
name : '溫度',
enabled:true,
data : []
}, {
type : 'column',
name : '濕度',
color : 'rgb(22, 93, 219)',
data : []
}, {
type : 'column',
name : '油溫',
color : 'rgb(35, 142, 241)',
data : []
},{
type : 'column',
name : 'PM25',
color : '#6a8f92',
data : []
},
{
type : 'spline',
name : '平均值',
data : []
}/* {
type : 'pie', //餅狀圖
name : '溫濕度對比',
data : [ {
name : '溫度',
y : 45.2,
color : '#4572A7'
}, {
name : '濕度',
y : 44,
color : 'rgb(22, 93, 219)'
}, {
name : '油溫',
y : 47.7,
color : 'rgb(35, 142, 241)'
} ],
center : [ 100, 80 ], //餅狀圖坐標
size : 100, //餅狀圖直徑大小
dataLabels : {
enabled : false
//不顯示餅狀圖數據標簽
}
} */]
});
/* 柱狀圖表數據 */
//保留2位小數
function twoDecimal(x) {
var f_x = parseFloat(x);
if (isNaN(f_x)) {
alert('錯誤的參數');
return false;
}
var f_x = Math.round(x * 100) / 100;
var s_x = f_x.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}
//動態獲取定時更新數據
/* 接收后台數據*/
function transNums(){
$.ajax({
type:'POST',
url:'web/robotMap',
dataType:'json',
contentType:'application/json',
async:"false",//同步
success:function(data){
var tempArr=[];//溫度
var humiArr=[];//定義數組接收所有的類型數值 濕度
var pmArr=[];//pm2.5
var oilArr=[];//油溫
for(var i=0;i<data.length;i++){
humiArr.push(parseFloat(data[i].humi));
pmArr.push(parseFloat(data[i].pm));
tempArr.push(parseFloat(data[i].temp));
oilArr.push(parseFloat(data[i].oil));
}
//設置統計數據
var brand_chart = $("#chart_combo").highcharts();
//設置x軸數據
brand_chart.xAxis[0].setCategories(["變壓器1", "變壓器2", "變壓器3", "變壓器4", "變壓器5","變壓器6"]);
chart.series[0].setData(tempArr);//表格溫度
chart.series[1].setData(humiArr);//表格濕度
chart.series[2].setData(oilArr);//表格油溫
chart.series[3].setData(pmArr);//表格pm25
//計算平均值
var oAver=(tempArr[0]+humiArr[0]+pmArr[0]+oilArr[0])/4;
var tAver=(tempArr[1]+humiArr[1]+pmArr[1]+oilArr[1])/4;
var thAver=(tempArr[2]+humiArr[2]+pmArr[2]+oilArr[2])/4;
var fAver=(tempArr[3]+humiArr[3]+pmArr[3]+oilArr[3])/4;
var fiAver=(tempArr[4]+humiArr[4]+pmArr[4]+oilArr[4])/4;
var sAver=(tempArr[5]+humiArr[5]+pmArr[5]+oilArr[5])/4;
var Aver=[oAver,tAver,thAver,fAver,fiAver,sAver];//建立平均值數組
chart.series[4].setData(Aver);//表格平均值
//檢查溫度是否超標 >40 超標
for(var t=0;t<tempArr.length;t++){
var tValue=tempArr[t];
var tId=t;
var transId=document.getElementById("trans_img"+tId);
if(tValue>40){
trans_img_shows(transId);
}else{
transId.style.visibility = "visible";
}
}
//檢查油溫是否超標 >90 超標
/* for(var o=0;o<oilArr.length;o++){
var oValue=oilArr[o];
if(oValue>90){
var oId=o;
var transId=document.getElementById("trans_img"+oId);
trans_img_shows(transId);
}
} */
}
});
}
transNums();
setInterval("transNums()",800);//起個定時器定時刷新