var layer ; var pieChart; var lincChart1; //饼状图大小--外圆半径 var pieOuterCircle = 30; //饼状图大小--内圆半径 var pieInnerCircle = 100; var warnPageNo = 1; var warnPageSize = 8; // 定义小循环的对象 var intervalMain; var intervalCircle; //定义模块数据,模块数据的刷新从当前变量中获取 var modelPueData; var modelUpsData; var modelEsData; var modelAirData; var modelThData; var modelSmokeData; //定义变量 var screenName = ""; var screenSlogan = ""; var sysStart; //告警信息列表 var warnList; //设备信息列表 var deviceList = []; $(function () { layui.use(['layer'], function () { layer = layui.layer; if(screen.width == 1920 && screen.height == 1080){ warnPageSize = 8; pieOuterCircle = 30; pieInnerCircle = 100; }else if(screen.width == 1280 && screen.height == 800){ warnPageSize = 5; pieOuterCircle = 5; pieInnerCircle = 35; } //初始化背景动效 initBg(); //头部,右上角时间初始化 renderNavbar(); // 初始警告的饼状图 pieChart = initPieChart(); // 初始化警告折线图 lincChart1 = initChartLine1(); // 获取系统参数配置 querySysSetInfo(); // 监控告警信息 queryWarnAll(); // 监控设备数量信息 reLoadDeviceSummaryData(); // 监控设备数据信息 reLoadModelData(); // 循环执行页面告警信息的刷新 reLoadModelMainCircule(); // 循环执行页面数据的刷新 reLoadModelDataCircule(); $("#body").on("dblclick", function () { requestFullScreen(document.documentElement); }); }); }); //时间格式处理,20210226101010-----2021-02-26 10:10:10 function strTime(time) { return time.substring(0, 4) + "-" + time.substring(4, 6) + "-" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14) } //返回月日的时间格式,如02-25 function timeStr(date) { var arr = date.toLocaleDateString().split("/"); if (arr[1].length < 2) { arr[1] = "0" + arr[1]; } if (arr[2].length < 2) { arr[2] = "0" + arr[2]; } return arr[1] + "-" + arr[2]; } //时间格式处理 function timeHandle(date, tag) { var arr = date.toLocaleDateString().split("/"); if (arr[1].length < 2) { arr[1] = "0" + arr[1]; } if (arr[2].length < 2) { arr[2] = "0" + arr[2]; } var time = arr[0] + arr[1] + arr[2]; if (tag == "end") { return time + '235959'; } else { return time + '000000'; } } /* ------------------ 页面头部信息渲染-start ------------------- */ //获取系统参数配置信息 function querySysSetInfo() { $.get("./cgi-bin/sys-set/query-info", function (data, status) { if ("success" == status) { renderSysSetInfo(data); } else { window.parent.parent.notify("数据查询出错,请重新操作!!msg=" + data.msg); } }, "json"); } //渲染系统参数配置信息 function renderSysSetInfo(data) { screenName = data.screenName; screenSlogan = data.screenSlogan; sysStart = data.usedTime; sysStart = sysStart.substring(0, 4) + "-" + sysStart.substring(4, 6) + "-" + sysStart.substring(6, 8) + " 00:00:00"; // 设置主界面的标题screenName $("#main-title").text(screenName); // 设置主界面的标语screenSlogan $("#main-slogan").text(screenSlogan); // 初始化运行天数 initRunDay(); } //头部,右上角时间 function renderNavbar() { showRealTime(); window.setInterval(function (){ showRealTime(); },1000); } function showRealTime(){ var d = new Date(); var year = d.getFullYear(); var month = d.getMonth() + 1; var date = d.getDate(); var days = new Array("日","一","二","三","四","五","六"); var day = d.getDay(); var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours(); var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes(); var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds(); var now = year + "年" + month + "月" + date + "日 周" + days[day] + " " + hour + ":" + min + ":" + sec; document.getElementById("dayTime").innerHTML = now; } /** 运行天数计算 * */ function initRunDay() { // var date1 = Date.parse(sysStart); // var times = new Date().getTime() - date1; // var days = parseInt(times / (1000 * 60 * 60 * 24)); // var b = String(days).split(''); var timestamp = new Date(sysStart).getTime(); //当前时间的毫秒数 var timestampNow = new Date().getTime(); var num = timestampNow - timestamp; var daytamp = 1000 * 60 * 60 * 24; var day = Math.ceil(num / daytamp); var b = String(day).split(''); if (b.length == 1) { $("#run_num_0").text(b[0]); } if (b.length == 2) { $("#run_num_1").removeClass("zero"); $("#run_num_1").text(b[0]); $("#run_num_0").text(b[1]); } if (b.length == 3) { $("#run_num_2").removeClass("zero"); $("#run_num_1").removeClass("zero"); $("#run_num_2").text(b[0]); $("#run_num_1").text(b[1]); $("#run_num_0").text(b[2]); } if (b.length > 3) { $("#run_num_3").removeClass("zero"); $("#run_num_2").removeClass("zero"); $("#run_num_1").removeClass("zero"); $("#run_num_3").text(b[0]); $("#run_num_2").text(b[1]); $("#run_num_1").text(b[2]); $("#run_num_0").text(b[3]); } }; /* ------------------ 页面头部信息渲染-end ------------------- */ /* ------------------ 监控告警信息渲染-start ------------------- */ //查询近30天的警告数据 function queryWarnAll() { //获取参数 var request = {}; var time = new Date(); //30天前时间 request.beginTime = timeHandle(new Date(time - 1000 * 60 * 60 * 24 * 30), ''); //当期天时间 request.endTime = timeHandle(time, 'end'); // console.log(request); $.post("./cgi-bin/warn-list/query-all", JSON.stringify(request), function (data, status) { if ("success" == status) { warnList = data; //相关警告渲染 renderWarn(); } else { window.parent.notify("警告数据查询出错!"); } }, "json"); } //警告渲染 function renderWarn() { //饼状图 warnNum(); //折线图 warnLine(); //列表 warnTable(); } //渲染警告饼状图及头部警告数 function warnNum() { var warnSumNum = 0; //警告总个数 var warnNum1 = 0; //警告已处理数 var warnNum2 = 0; //警告未处理数 var warnNum3 = 0; //超时处理数 //警告饼状图数组 var legendData = new Array(); var series = new Array(); var data = warnList; if (data != null && data.length > 0) { warnSumNum = data.length; $.each(data, function (index, item) { //统计警告数 if (item.flag == 0) { if (timeCompare(item.time)) { //超时 warnNum3 += 1; } else { //未处理 warnNum2 += 1; } } else { //已处理 warnNum1 += 1; } }); //顶部警告数 $("#warnUnDoNum").html(warnNum2); $("#warnSumNum").html(warnSumNum); //饼状图数据及渲染 var obj = {}; legendData.push("已处理"); obj.name = "已处理"; obj.value = warnNum1; series.push(obj); obj = {}; legendData.push("未处理"); obj.name = "未处理"; obj.value = warnNum2; series.push(obj); obj = {}; legendData.push("超时处理"); obj.name = "超时处理"; obj.value = warnNum3; series.push(obj); pieChart.option.legend.data = legendData; pieChart.option.series[0].data = series; pieChart.chart.setOption(pieChart.option, true); } } //警告时间比较 function timeCompare(time) { time = time.substring(0, 4) + "/" + time.substring(4, 6) + "/" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14); //警告时间 var timestamp = new Date(time).getTime(); //当前时间 var timestampNow = new Date().getTime(); //判断时间差是否大于2天,大于则为超时处理 var temp = timestampNow - timestamp; if (temp > 1000 * 60 * 60 * 24 * 2) { return true; //超时 } else { return false; //未超时 } } //渲染警告折线图 function warnLine() { var data = warnList; if (data != null && data.length > 0) { //统计30天内每天的警告数 var tempTime = new Date(); var temp; var warnTime; var count; //X轴数组 var xaxisData = new Array(); //对应Y轴数组 var seriesData = new Array(); for (var i = 30; i >= 0; i--) { count = 0; temp = timeStr(new Date(tempTime - 1000 * 60 * 60 * 24 * i)); $.each(data, function (index, item) { warnTime = item.time.substring(4, 6) + "-" + item.time.substring(6, 8); if (temp == warnTime) { count += 1; } }); if (count != 0) { xaxisData.push(temp); seriesData.push(count); } } if (xaxisData.length > 0 && seriesData.length > 0) { lincChart1.option.series[0].data = seriesData; lincChart1.option.xAxis.data = xaxisData; lincChart1.chart.setOption(lincChart1.option, true); } } } //渲染警告列表 function warnTable() { var data = warnList; var html = ''; if (data != null && data.length > 0) { for (var i = data.length - 1; i > data.length - 9; i--) { if(i < 0){ break; } html += '' + data[i].name + ''; html += '' + (data[i].flag == 0 ? '未处理' : '已处理') + ''; html += '' + strTime(data[i].time) + ''; } }else{ html += '暂无数据'; } $("#warnInfoTBody").html(html); } /* ------------------ 监控告警信息渲染-end ------------------- */ /* ------------------ 监控设备数量信息渲染-start ------------------- */ //获取所有设备 function reLoadDeviceSummaryData() { $.ajaxSettings.async = false; $.get("./cgi-bin/device/query-all", function (data, status) { if ("success" == status) { deviceList = data; renderDeviceSummary(); } else { window.parent.notify("系统获取监控设备信息失败!"); } }, "json"); }; // 监控设备数量列表统计 function renderDeviceSummary() { var obj =[]; //统计UPS的数量 obj = countCategorySum(obj,CATEGORY.D1001); //统计电表 obj = countCategorySum(obj,CATEGORY.D1003); //统计精密配电柜 obj = countCategorySum(obj,CATEGORY.D1004); //统计电池组 obj = countCategorySum(obj,CATEGORY.D1005); //统计温湿度 obj = countCategorySum(obj,CATEGORY.D2001); //统计精密空调 obj = countCategorySum(obj,CATEGORY.D2002); //统计漏水 obj = countCategorySum(obj,CATEGORY.D2005); //统计烟感 obj = countCategorySum(obj,CATEGORY.D3002); obj = countCategorySum(obj,CATEGORY.D1006);//发电机 obj = countCategorySum(obj,CATEGORY.D1007);//防晃电设备 obj = countCategorySum(obj,CATEGORY.D1008);//电机保护器 obj = countCategorySum(obj,CATEGORY.D1009);//蓄电池电压电流装置 obj = countCategorySum(obj,CATEGORY.D1010);//PDU obj = countCategorySum(obj,CATEGORY.D2003);//普通空调 obj = countCategorySum(obj,CATEGORY.D2004);//新风机 obj = countCategorySum(obj,CATEGORY.D2006);//液位计 obj = countCategorySum(obj,CATEGORY.D2007);//温度计 obj = countCategorySum(obj,CATEGORY.D2008);//空气质量 obj = countCategorySum(obj,CATEGORY.D2009);//噪声 obj = countCategorySum(obj,CATEGORY.D2010);//风速风向 obj = countCategorySum(obj,CATEGORY.D2011);//温湿度大气压力一体变送器 obj = countCategorySum(obj,CATEGORY.D2012);//雨量 obj = countCategorySum(obj,CATEGORY.D2013);//恒湿一体机 obj = countCategorySum(obj,CATEGORY.D2014);//冷通道 obj = countCategorySum(obj,CATEGORY.D2015);//氢气浓度检测 obj = countCategorySum(obj,CATEGORY.D2016);//温控仪 obj = countCategorySum(obj,CATEGORY.D3001);//门禁 obj = countCategorySum(obj,CATEGORY.D3003);//红外 obj = countCategorySum(obj,CATEGORY.D3004);//视频 obj = countCategorySum(obj,CATEGORY.D3005);//智能IO模块 obj = countCategorySum(obj,CATEGORY.D3006);//空开检测模块 obj = countCategorySum(obj,CATEGORY.D3007);//火警消防 obj = countCategorySum(obj,CATEGORY.D3008);//温感 obj = countCategorySum(obj,CATEGORY.D4001);//水表 obj = countCategorySum(obj,CATEGORY.D4002);//流量计 obj = countCategorySum(obj,CATEGORY.D9999);//其他 if(obj.length >= 6){ deviceSummaryHtml(obj); }else{ for(var i = obj.length-1; i < 6; i++){ var deviceSum = {"num":0,"categoryName":"未知"}; obj.push(deviceSum); } deviceSummaryHtml(obj); } }; function countCategorySum(obj,category){ var list = deviceList; if(category.code == CATEGORY.D1001.code || category.code == CATEGORY.D1002.code ){ //判断ups的数量 var index = 0; for(var i = 0; i < list.length; i++){ if(list[i].type == CATEGORY.D1001.code || list[i].type == CATEGORY.D1002.code){ index++; } } if(index > 0){ var deviceSum = {"num":index,"categoryName":"UPS"}; obj.push(deviceSum); } }else{ var index = 0; for(var i = 0; i < list.length; i++){ if(list[i].type == category.code){ index++; } } if(index > 0){ var deviceSum = {"num":index,"categoryName":category.name}; obj.push(deviceSum); } } return obj; } //渲染 function deviceSummaryHtml(obj){ var className = ""; var html = ""; for(var i = 0; i < 6; i++){ if(i == 1){ className = "blue1"; }else if(i == 2){ className = "powder"; }else if(i == 3){ className = "blue"; }else if(i == 4){ className = "yellow"; }else if(i == 5){ className = "purple"; } html += "
  • " + "
    " + "
    " + obj[i].num + "
    " + "
    " + obj[i].categoryName + "
    " + "
  • "; } $(".ul-listl1").html(html); } /* ------------------ 监控设备数量信息渲染-end ------------------- */ /* ------------------ 监控设备数据信息渲染-start ------------------- */ //获取各个模块信息 function reLoadModelData() { var ids = []; $.each(deviceList, function (index, item) { //UPS、电表、配电柜、温湿度、精密空调、漏水、烟感 if(item.type == CATEGORY.D1001.code || item.type == CATEGORY.D1002.code || item.type == CATEGORY.D1003.code || item.type == CATEGORY.D1004.code || item.type == CATEGORY.D2001.code || item.type == CATEGORY.D2002.code || item.type == CATEGORY.D2005.code || item.type == CATEGORY.D3002.code){ var data = {"id":item.id}; ids.push(data); } }); //设备数据集合 var dataList = []; $.each(ids, function (index, item) { var param = {"id": item.id}; $.ajaxSettings.async = false; $.post("./cgi-bin/detail/query-data", JSON.stringify(param), function (data, status) { if ("success" == status) { console.log('---------获取到的设备实时数据-----' + JSON.stringify(data)); dataList.push(data); } else { window.parent.notify("数据查询出错,请重新操作!"); } }, "json"); }); // console.log('---------获取到的设备实时数据集合-----'); // console.log(JSON.stringify(dataList)); countDeviceByType(dataList); } //统计并渲染设备监控信息 function countDeviceByType(list){ var modelPue = []; var modelUps = []; var modelEs = []; var modelAir = []; var modelTh = []; var modelSmoke = []; var ssOpenNum = 0;//烟感告警个数 var ssSumNum = 0;//烟感总个数 var mwOpenNum = 0;//漏水告警个数 var mwSumNum = 0;//漏水总个数 $.each(list, function (index, item) { //UPS if(item.devType == CATEGORY.D1001.code || item.devType == CATEGORY.D1002.code){ var data = queryDeviceDataInfo(item); modelUps.push(data); } //电表和配电柜 if(item.devType == CATEGORY.D1003.code || item.devType == CATEGORY.D1004.code){ var data = queryDeviceDataInfo(item); modelEs.push(data); } //温湿度 if(item.devType == CATEGORY.D2001.code){ var data = queryDeviceDataInfo(item); modelTh.push(data); } //精密空调 if(item.devType == CATEGORY.D2002.code){ var data = queryDeviceDataInfo(item); modelAir.push(data); } //漏水 if(item.devType == CATEGORY.D2005.code){ var data = queryDeviceDataInfo(item); mwOpenNum += data.mwOpenNum; } //烟感 if(item.devType == CATEGORY.D3002.code){ var data = queryDeviceDataInfo(item); ssOpenNum += data.ssOpenNum; } }); $.each(deviceList, function (index, item) { //漏水 if(item.type == CATEGORY.D2005.code){ mwSumNum++; } //烟感 if(item.type == CATEGORY.D3002.code){ ssSumNum++; } }); var data = {"mwSumNum":mwSumNum,"mwOpenNum":mwOpenNum,"ssSumNum":ssSumNum,"ssOpenNum":ssOpenNum}; modelSmoke.push(data); modelPueData = modelPue; modelUpsData = modelUps; modelEsData = modelEs; modelAirData = modelAir; modelThData = modelTh; modelSmokeData = modelSmoke; // console.log('---------温湿度的设备实时数据-----' + JSON.stringify(modelTh)); // console.log('---------UPS的设备实时数据-----' + JSON.stringify(modelUps)); // console.log('---------漏水、烟感的设备实时数据-----' + JSON.stringify(modelSmoke)); // console.log('---------空调的设备实时数据-----' + JSON.stringify(modelAir)); // console.log('---------电表、配电柜的设备实时数据-----' + JSON.stringify(modelEs)); // 渲染PUE -不用循环执行 // flushModelPue(modelPue); // 烟雾传感器 -不用循环执行 flushModelSmoke(modelSmoke[0]); //渲染UPS flushModelUps(modelUps, 0); //渲染电表 flushModelEs(modelEs,0); //渲染精密空调 flushModelAir(modelAir, 0); //渲染温湿度 flushModelTh(modelTh, 0); } //统计并封装设备的监控信息 function queryDeviceDataInfo(device) { var data = {}; //单相UPS if(device.devType == CATEGORY.D1001.code){ data.deviceName = device.name; data.power = "0.0";//输出负载率 data.esType = "市电供电";//供电方式 data.vpPer = "0.0";//电池电量 data.vpPerDate = "0.0";//电池后备时间 var list = device.value; $.each(list, function (index, item) { //输出负载率 if(item.passcode == "8"){ data.power = item.value ? item.value : "0.0"; } //供电方式 if(item.passcode == "10"){ data.esType = (item.value && item.value == "1") ? "电池供电" : "市电供电"; } //电池电量 if(item.passcode == "13"){ data.vpPer = item.value ? item.value : null; } //电池后备时间 if(item.passcode == "14"){ data.vpPerDate = item.value ? item.value : null; } }); } //三相UPS if(device.devType == CATEGORY.D1002.code){ data.deviceName = device.name; data.power = "0.0";//输出负载率 data.esType = "市电供电";//供电方式 data.vpPer = "0.0";//电池电量 var list = device.value; var apower = 0, bpower = 0, cpower = 0; $.each(list, function (index, item) { //A相输出负载率 if(item.passcode == "16"){ apower = item.value ? item.value : 0; } //B相输出负载率 if(item.passcode == "17"){ bpower = item.value ? item.value : 0; } //C相输出负载率 if(item.passcode == "18"){ cpower = item.value ? item.value : 0; } //供电方式 if(item.passcode == "20"){ data.esType = (item.value && item.value == "1") ? "电池供电" : "市电供电"; } //电池电量 if(item.passcode == "23"){ data.vpPer = item.value ? item.value : null; } //电池后备时间 if(item.passcode == "24"){ data.vpPerDate = item.value ? item.value : null; } }); //输出负载率 data.power = ((apower*1) + (bpower*1) + (cpower*1))/3; } //电表、配电柜 if(device.devType == CATEGORY.D1003.code || device.devType == CATEGORY.D1004.code){ data.deviceName = device.name; data.ua = "0.0"; data.ub = "0.0"; data.uc = "0.0"; data.ia = "0.0"; data.ib = "0.0"; data.ic = "0.0"; data.fr = "0.0"; var list = device.value; var maxV = 50.0, maxA = 1.0; $.each(list, function (index, item) { //A相电压 if(item.passcode == "3"){ data.ua = item.value ? item.value : "0.0"; maxV = data.ua > maxV ? data.ua : maxV; } //B相电压 if(item.passcode == "4"){ data.ub = item.value ? item.value : "0.0"; maxV = data.ub > maxV ? data.ub : maxV; } //C相电压 if(item.passcode == "5"){ data.uc = item.value ? item.value : "0.0"; maxV = data.uc > maxV ? data.uc : maxV; } //A相电流 if(item.passcode == "6"){ data.ia = item.value ? item.value : "0.0"; maxA = data.ia > maxA ? data.ia : maxA; } //B相电流 if(item.passcode == "7"){ data.ib = item.value ? item.value : "0.0"; maxA = data.ib > maxA ? data.ib : maxA; } //C相电流 if(item.passcode == "8"){ data.ic = item.value ? item.value : "0.0"; maxA = data.ic > maxA ? data.ic : maxA; } //频率 if(item.passcode == "16"){ data.fr = item.value ? item.value : "0.0"; } }); maxV = maxV * 1.2; maxA = maxA * 1.2; data.uaPer = (data.ua * 100 / maxV); data.ubPer = (data.ub * 100 / maxV); data.ucPer = (data.uc * 100 / maxV); data.iaPer = (data.ia * 100 / maxA); data.ibPer = (data.ib * 100 / maxA); data.icPer = (data.ic * 100 / maxA); } //温湿度 if(device.devType == CATEGORY.D2001.code){ data.deviceName = device.name; data.t01 = "0.0"; data.h01 = "0.0"; var list = device.value; $.each(list, function (index, item) { //温度 if(item.passcode == "3"){ data.t01 = item.value ? item.value : "0.0"; } //湿度 if(item.passcode == "4"){ data.h01 = item.value ? item.value : "0.0"; } }); } //空调 if(device.devType == CATEGORY.D2002.code){ data.deviceName = device.name; data.runningState = 0; data.t04 = "0"; data.h04 = "0"; var list = device.value; $.each(list, function (index, item) { //运行状态 if(item.passcode == "3"){ data.runningState = item.value && item.value == 0 ? 0 : item.value; } //室内温度 if(item.passcode == "4"){ data.t04 = item.value ? item.value : "0.0"; } //室内湿度 if(item.passcode == "5"){ data.h04 = item.value ? item.value : "0.0"; } }); } //漏水 if(device.devType == CATEGORY.D2005.code){ data.mwOpenNum = 0; var list = device.value; $.each(list, function (index, item) { //告警状态 if(item.passcode == "2"){ data.mwOpenNum = item.value && item.value == "0" ? 0 : 1; } }); } //烟感 if(device.devType == CATEGORY.D3002.code){ data.ssOpenNum = 0; var list = device.value; $.each(list, function (index, item) { //告警状态 if(item.passcode == "2"){ data.ssOpenNum = item.value && item.value == "0" ? 0 : 1; } }); } return data; } /** 温湿度刷新 * */ function flushModelTh(list, index) { if (!list) return 0; if (list.length <= 0) return 0; var cur = list[0]; if (index < list.length) { cur = list[index]; index++; } else { index = 0; } $("#model_th_deviceName").text(cur.deviceName); $("#model_th_t01").text(cur.t01 + "℃"); $("#model_th_h01").text(cur.h01 + "%"); //修改,由于客户没有空调,将温湿度数据导入空调中 // $("#model_air_t04").text(cur.t01 + " ℃"); // $("#model_air_h04").text(formatNumber(cur.h01) + " %"); return index; }; /** 刷新烟感信息的值 * */ function flushModelSmoke(data) { if (!data) return; $("#model_smoke_ss").text(data.ssOpenNum + "/" + data.ssSumNum); $("#model_smoke_mv").text(data.mwOpenNum + "/" + data.mwSumNum); // 填写 percent: 50 百分比值, 其余两个参数不要变更 var value1 = data.ssOpenNum / data.ssSumNum * 100; var value2 = data.mwOpenNum / data.mwSumNum * 100; progressCircle(value1, 170, '.databoard-sensor__breath'); progressCircle(value2, 170, '.databoard-sensor__water'); }; /** 刷新空调的值 * */ function flushModelAir(list, index) { if (!list) return 0; if (list.length <= 0) return 0; var cur = list[0]; if (index < list.length) { cur = list[index]; index++; } else { index = 0; } $("#model_air_t04").text(cur.t04 + " ℃"); $("#model_air_h04").text(formatNumber(cur.h04) + " %"); // $("#model_air_rev01").text("风机转速 " + cur.rev01 + " 转"); $("#model_air_deviceName").text(cur.deviceName); // 如果运行状态==1,取消运作动作 $("#model_air_rev01").removeClass("animate"); if (cur.runningState == 0) { $("#model_air_rev01").addClass("animate"); } return index; }; /** UPS * */ function flushModelUps(list, index) { if (!list) return 0; if (list.length <= 0) return 0; var cur = list[0]; if (index < list.length) { cur = list[index]; index++; } else { index = 0; } $("#model_ups_deviceName").text(cur.deviceName); // console.log(cur); $("#model_ups_esType").text(cur.esType); var power = cur.power ? cur.power : 0.0; power = power > 100 ? "100" : power; power = power < 0 ? "0.0" : power; $("#model_ups_power").text(formatNumber(power) + "%"); $("#model_ups_power2").css('width', power + "%"); if(cur.vpPer){//电池容量 var vpPer = cur.vpPer; vpPer = vpPer > 100 ? "100" : vpPer; vpPer = vpPer < 0 ? "0.0" : vpPer; vpPer = parseFloat(vpPer).toFixed(0); $("#ups_vpPer_name").text("电池容量"); $("#model_ups_vpPer").text(vpPer + "%"); $("#model_ups_vpPer2").css('width', vpPer + "%"); }else if(cur.vpPerDate){//后备时间 var vpPerDate = cur.vpPerDate; // vpPer = vpPer > 100 ? "100" : vpPer; // vpPer = vpPer < 0 ? "0.0" : vpPer; vpPerDate = parseFloat(vpPerDate).toFixed(0); $("#ups_vpPer_name").text("后备时间"); $("#model_ups_vpPer").text("80%"); $("#model_ups_vpPer2").css('width', vpPerDate + "min"); } if(!cur.vpPer && !cur.vpPerDate){ $("#ups_vpPer_name").text("电池容量"); $("#model_ups_vpPer").text("0%"); $("#model_ups_vpPer2").css('width',"0%"); } return index; }; /** 市电 * */ function flushModelEs(list,index) { if (!list) return 0; if (list.length <= 0) return 0; var cur = list[0]; if (index < list.length) { cur = list[index]; index++; } else { index = 0; } var fr = parseFloat(cur.fr).toFixed(0); var ic = parseFloat(cur.ic).toFixed(0); var ib = parseFloat(cur.ib).toFixed(0); var ia = parseFloat(cur.ia).toFixed(0); var uc = parseFloat(cur.uc).toFixed(0); var ub = parseFloat(cur.ub).toFixed(0); var ua = parseFloat(cur.ua).toFixed(0); $("#model_es_fr").text("频率:" + fr + "Hz"); $("#model_es_ic").text(ic + "A"); $("#model_es_ib").text(ib + "A"); $("#model_es_ia").text(ia + "A"); $("#model_es_ia_per").css('width', cur.iaPer + "%"); $("#model_es_ib_per").css('width', cur.ibPer + "%"); $("#model_es_ic_per").css('width', cur.icPer + "%"); $("#model_es_uc").text(uc + "V"); $("#model_es_ub").text(ub + "V"); $("#model_es_ua").text(ua + "V"); $("#model_es_uc_per").css('width', cur.ucPer + "%"); $("#model_es_ub_per").css('width', cur.ubPer + "%"); $("#model_es_ua_per").css('width', cur.uaPer + "%"); $("#model_es_deviceName").text(cur.deviceName); return index; }; /** 刷新PUE的值 * */ function flushModelPue(data) { if (!data) return; $("#model_pue_cur").text(data.pue); $("#model_pue_avg").text(data.avgPue); }; /** * 格式化数字保留一位小数 * @param numStr * @returns {string} */ function formatNumber(numStr){ return numStr ? parseFloat(numStr).toFixed(1):"0.0"; } // 烟感+漏水的计算,只修改 percent 参数。 function progressCircle(percent, radius, elementClass) { var circumference = Math.PI * (2 * radius); var strokeDashoffset = circumference - (percent / 100) * circumference; // console.log(strokeDashoffset); document.querySelector(elementClass + ' .donut .donut__svg .donut__progress').style.strokeDashoffset = strokeDashoffset; }; /* ------------------ 监控设备数据信息渲染-end ------------------- */ /* ------------------ 饼状图初始化-satrt ------------------- */ // 初始化警告饼状图 function initPieChart() { var option = { tooltip: { trigger: 'item', formatter: '{a}
    {b} : {c} ({d}%)' }, legend: { x: 'right', y: 'center', top: '20', orient: 'vertical', data: ['未处理', '已处理', '超时处理'], textStyle: {color: '#4FCCFF'} }, calculable: true, series: [{ name: '警报总览', type: 'pie', radius: [pieOuterCircle, pieInnerCircle], left: ['0%', '50%'], roseType: 'area', data: [ { value: 0, name: '未处理', itemStyle: {color: '#6fe621', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10}, label: {formatter: '{c}'} }, { value: 0, name: '已处理', itemStyle: {color: '#ffc760', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10}, label: {formatter: '{c}'} }, { value: 0, name: '超时处理', itemStyle: {color: '#fb497c', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10}, label: {formatter: '{c}'} }] } ] } var myChart = echarts.init(document.getElementById('databoardWarnView'), "light"); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option, true); return { "chart": myChart, "option": option } }; /* ------------------ 饼状图初始化-end ------------------- */ /* ------------------ 折线图初始化-start ------------------- */ function initChartLine1() { var option = { tooltip: { trigger: 'axis', hideDelay: '300' }, grid: { top: '5%', left: '3%', right: '3%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7'], axisLabel: {show: true, textStyle: {color: '#4FCCFF'}}, axisLine: {lineStyle: {color: '#162B5F', width: 1}}, axisTick: { inside: true, alignWithLabel: true } }, yAxis: { minInterval: 1, type: 'value', axisLabel: {show: true, textStyle: {color: '#4FCCFF'}}, axisLine: {lineStyle: {color: '#162B5F', width: 2}}, splitLine: {lineStyle: {width: 1, color: ['#162B5F']}}, axisTick: { inside: true }, scale: true }, axisLabel: { show: true, textStyle: { color: '#fff' } }, series: [ { data: [0, 0, 0, 0, 0, 0, 0], type: 'line', smooth: true, symbol: '', symbolSize: 6, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#154671' }, { offset: 0.4, color: '#154671' /* */ }]), // 背景渐变色 lineStyle: {width: 1, type: 'solid', color: '#43effe'} } }, left: ['50%', '50%'], itemStyle: { normal: { color: '#4fccff', // 背景渐变色 lineStyle: {width: 2, type: 'solid', color: '#43effe'} }, emphasis: {color: '#43effe', lineStyle: {width: 2, type: 'dotted', background: '#43effe'}} }, symbolSize: 10 } ] } var myChart = echarts.init(document.getElementById('databoardWarnTrend'), "light"); myChart.setOption(option, true); return { "chart": myChart, "option": option }; }; /* ------------------ 折线图初始化-end ------------------- */ // 循环执行页面告警信息和监控设备模块的刷新 function reLoadModelMainCircule() { if(intervalMain) clearInterval(intervalMain); // 间隔1.5分钟刷新下页面数据 intervalMain = setInterval(function () { // 获取系统参数配置 // querySysSetInfo(); // 监控告警信息 queryWarnAll(); // 监控设备数量信息 reLoadDeviceSummaryData(); // 监控设备数据信息 reLoadModelData(); }, 1000 * 30); }; // 循环执行页面数据的刷新 function reLoadModelDataCircule() { // 首先停止执行原有的循环 if (intervalCircle) clearInterval(intervalCircle); // 定时渲染 var indexUps = 0; var indexEs = 0; var indexAir = 0; var indexTh = 0; intervalCircle = setInterval(function () { indexUps = flushModelUps(modelUpsData, indexUps); indexEs = flushModelEs(modelEsData,indexEs); indexAir = flushModelAir(modelAirData, indexAir); indexTh = flushModelTh(modelThData, indexTh); }, 5 * 1000); }; /** * 背景粒子效果 */ function initBg() { //背景粒子效果 particlesJS('particles-js', { "particles": { "number": { "value": 160,//数量 "density": { "enable": true, //启用粒子的稀密程度 "value_area": 800 //区域散布密度大小 } }, "color": { "value": "#0089f4" //原子的颜色 }, "shape": { "type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"] "stroke": { "width": 0, //原子的宽度 "color": "#0089f4" //原子颜色 }, "polygon": { "nb_sides": 5 // 原子的多边形边数 }, "image": { "src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png" "width": 100, //图片宽度 "height": 100 //图片高度 } }, "opacity": { "value": 1, //不透明度 "random": true, //随机不透明度 "anim": { "enable": true, //渐变动画 "speed": 1, // 渐变动画速度 "opacity_min": 0, //渐变动画不透明度 "sync": true } }, "size": { "value": 3, //原子大小 "random": true, // 原子大小随机 "anim": { "enable": false, // 原子渐变 "speed": 4, //原子渐变速度 "size_min": 0.3, "sync": false } }, "line_linked": { "enable": false, //连接线 "distance": 150, //连接线距离 "color": "#ffffff", //连接线颜色 "opacity": 0.4, //连接线不透明度 "width": 1 //连接线的宽度 }, "move": { "enable": true, //原子移动 "speed": 1, //原子移动速度 "direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left" "random": true, //移动随机方向 "straight": false, //直接移动 "out_mode": "out", //是否移动出画布 "bounce": false, //是否跳动移动 "attract": { "enable": false, // 原子之间吸引 "rotateX": 600, //原子之间吸引X水平距离 "rotateY": 600 //原子之间吸引Y水平距离 } } }, "interactivity": { "detect_on": "canvas", //原子之间互动检测 "canvas", "window" "events": { "onhover": { "enable": true, //悬停 "mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"] }, "onclick": { "enable": false, //点击效果 "mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"] }, "resize": true // 互动事件调整 }, "modes": { "grab": { "distance": 100, //原子互动抓取距离 "line_linked": { "opacity": 1 //原子互动抓取距离连线不透明度 } }, "bubble": { "distance": 250, //原子抓取泡沫效果之间的距离 "size": 2, // 原子抓取泡沫效果之间的大小 "duration": 2, //原子抓取泡沫效果之间的持续事件 "opacity": 1, //原子抓取泡沫效果透明度 "speed": 3 }, "repulse": { "distance": 400, //击退效果距离 "duration": 0.4 //击退效果持续事件 }, "push": { "particles_nb": 4 //粒子推出的数量 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } ); } function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var requestMethod = element.requestFullScreen || // W3C element.webkitRequestFullScreen || // FireFox element.mozRequestFullScreen || // Chrome等 element.msRequestFullScreen; // IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { // for // Internet // Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }