电教智能云数据可视化平台开发电脑优化日志实录
- 一、2K和4K弹窗判断
- 二、电能API对接
- 1.电脑爬虫
- 2.电能分组过滤
- 3.数据可视化渲染
- 4.弹窗
- 三.数组按顺序输出
一、2K和4K弹窗判断
{* 判断2k和4k弹窗 *}{if $dataScene['scene_standard'] eq 0}<a class="menuBtn subMenu" onclick="getZoomUrl('?m=Index&a=overview&act=showView&member_id={$dataScene['member_id']}', '1613px', '955px', 'no','{$dataScene['scene_name']}')">{$dataScene['scene_name']}</a>{else}<a class="menuBtn subMenu" onclick="getZoomUrl('?m=Index&a=overview&act=showView&member_id={$dataScene['member_id']}', '3226px', '1910px', 'no','{$dataScene['scene_name']}')">{$dataScene['scene_name']}</a>{/if}
{if $dataScene neq ""}<a class="menuBtn subMenu" href="?m=Index&a=overview&act=showView&member_id={$dataScene['member_id']}">总览图</a>{/if}
二、电能API对接
1.电脑爬虫
public function getIotPower(){global $res, $CONF;dbc();$group = $this->getGroupId();$group_id = $group["energyid"];if ($group_id && $group_id != "0") {$url = curlIotAPI($CONF["api_iot_pipe"], '1', '1000', $CONF["api_user_key"], $group_id);$reArr = json_decode($url, true);$data_int = $reArr["data"];$res["data"] = getIotPower($data_int["data"]);die(json_encode_lockdata($res));} else {$res["data"] = NULL;die(json_encode_lockdata($res));}}
2.电能分组过滤
/*物联网-电量流量分组 2023-3-23*/
function getIotPower($arr)
{@$list = array();foreach ($arr as $k => $v) {if (!isset($list[$v["device"]])) {$list[$v["device"]] = $v;} else {$list[$v["device"]]["name"] .= "," . $v["name"];$list[$v["device"]]["id"] .= "," . $v["id"];$list[$v["device"]]["sdata"] .= "," . $v["sdata"];$list[$v["device"]]["odata"]["today_val"] .= "," . $v["odata"]['today_val'];//当天$list[$v["device"]]["odata"]["current_month"] .= "," . $v["odata"]['current_month'];//当月-2023.3$list[$v["device"]]["odata"]["current_year"] .= "," . $v["odata"]['current_year'];//当年$list[$v["device"]]["odata"]["b_yesterday_val"] .= "," . $v["odata"]['b_yesterday_val'];//前天$list[$v["device"]]["odata"]["yesterday_val"] .= "," . $v["odata"]['yesterday_val'];//昨天$list[$v["device"]]["odata"]["last_month_val"] .= "," . $v["odata"]['last_month_val'];//上月-2023.2$list[$v["device"]]["odata"]["b_last_month_val"] .= "," . $v["odata"]['b_last_month_val'];//上上月-2023.1$list[$v["device"]]["odata"]["b_last_year_val"] .= "," . $v["odata"]['b_last_year_val'];//前年$list[$v["device"]]["odata"]["last_year_val"] .= "," . $v["odata"]['last_year_val'];//去年@$list[$v["device"]]["odata"]["three_days_ago_val"] .= "," . $v["odata"]['three_days_ago_val'];@$list[$v["device"]]["odata"]["three_month_ago_val"] .= "," . $v["odata"]['three_month_ago_val'];@$list[$v["device"]]["odata"]["three_years_ago_val"] .= "," . $v["odata"]['three_years_ago_val'];@$list[$v["device"]]["odata"]["four_month_ago_val"] .= "," . $v["odata"]['four_month_ago_val'];//-2022.12@$list[$v["device"]]["odata"]["five_month_ago_val"] .= "," . $v["odata"]['five_month_ago_val'];//-2022.11@$list[$v["device"]]["odata"]["six_month_ago_val"] .= "," . $v["odata"]['six_month_ago_val'];//-2022.10@$list[$v["device"]]['data']["deviceType"] .= "," . $v['data']["deviceType"];$list[$v["device"]]['data']["measure_unit_type"] .= "," . $v['data']["measure_unit_type"];$list[$v["device"]]['data']["propertyType"] .= "," . $v['data']["propertyType"];$list[$v["device"]]['data']["sensorStatus"] .= "," . $v['data']["sensorStatus"];}}return array_values($list);
}
在 PHP 中,@
符号被称为错误抑制操作符。当在表达式之前使用 @
符号时,它会告诉 PHP 忽略该表达式可能产生的任何错误或警告消息。
使用 @
符号的主要目的是在运行时隐藏错误消息,以防止它们显示在最终的用户界面上。然而,过度使用错误抑制符可能会导致问题的隐藏和调试难题,因此它的使用应当谨慎。
需要注意的是,虽然 @
符号可以抑制错误消息的显示,但它不会阻止代码中的错误和异常。错误实际上仍然存在,只是被隐藏起来。这意味着当代码中存在错误时,它们仍然会对程序的执行和结果产生影响。
因此,建议在编写 PHP 代码时,避免过度依赖 @
符号来掩盖错误。而是应该使用适当的错误处理和异常处理机制来捕获和处理错误,以便更好地调试和修复问题。
3.数据可视化渲染
/** 电能流量环境状态*半年* */
function getYearPower() {$.when($.getJSON('api/api.php?act=getIotPower&token=3cab7ce4142608c0f40c785b5ab5ca24')).done(function (res1) {var data2 = res1.data.sort(getSortFun('asc', 'device_seq'));//console.log(data2);if (data2) {var flow_entHtml = "";var lightStatus = [];for (var d = 0; d < data2.length; d++) {var sensor = data2[d].data.propertyType;var lastvalue = data2[d].sdata;var sta = data2[d].data.sensorStatus;var norm = sensor.split(",");var normValue = lastvalue.split(",");var staValue = sta.split(",");var yesVal = data2[d].odata.yesterday_val.split(",");var last_month = data2[d].odata.last_month_val.split(",");var last_year = data2[d].odata.last_year_val.split(",");lightStatus[d] = data2[d].data.sensorStatus;//新增当日/月/年数据 2022.07.23 BY poleung;var today_val = data2[d].odata.today_val.split(",");var current_month = data2[d].odata.current_month.split(",");var current_year = data2[d].odata.current_year.split(",");//console.log(yesterdayValue);//数据排序,防止错乱;var normT = [], statusT = [];for (var i = 0; i < norm.length; i++) {//今日电量;if (norm.indexOf("电量") == -1) {normT[0] = "-";statusT[0] = "无设备";} else {if (norm[i] == "电量") {//normT[0] = parseFloat(normValue[i] - yesVal[i]).toFixed(1);normT[0] = getPositive(parseFloat(today_val[i] - yesVal[i]).toFixed(1));statusT[0] = staValue[i];}}//本月电量;if (norm.indexOf("电量") == -1) {normT[1] = "-";statusT[1] = "无设备";} else {if (norm[i] == "电量") {normT[1] = getPositive(parseFloat(current_month[i] - last_month[i]).toFixed(1));statusT[1] = staValue[i];}}//本年电量;if (norm.indexOf("电量") == -1) {normT[2] = "-";statusT[2] = "无设备";} else {if (norm[i] == "电量") {normT[2] = getPositive(parseFloat(current_year[i] - last_year[i]).toFixed(1));statusT[2] = staValue[i];}}if (norm.indexOf("A相电流") == -1) {normT[3] = "-";statusT[3] = "无设备";} else {if (norm[i] == "A相电流") {normT[3] = parseFloat(today_val[i]).toFixed(2);statusT[3] = staValue[i];}}if (norm.indexOf("B相电流") == -1) {normT[4] = "-";statusT[4] = "无设备";} else {if (norm[i] == "B相电流") {normT[4] = parseFloat(today_val[i]).toFixed(2);statusT[4] = staValue[i];}}if (norm.indexOf("C相电流") == -1) {normT[5] = "-";statusT[5] = "无设备";} else {if (norm[i] == "C相电流") {normT[5] = parseFloat(today_val[i]).toFixed(2);statusT[5] = staValue[i];}}if (norm.indexOf("电功率") == -1) {normT[6] = "-";statusT[6] = "无设备";} else {if (norm[i] == "电功率") {normT[6] = parseFloat(today_val[i]).toFixed(1);statusT[6] = staValue[i];}}}flow_entHtml += "<li><div class='powerNorm'><div class='power2_norm1'>" + limitWords(data2[d].device, 8) + "</div><div class='power2_norm2'>"+ "<div class='power2_1'>本月<p class='houseBg'>" + getAlertCo(statusT[1], normT[1]) + "</p></div>"+ "<div class='power2_2'>本年<p class='houseBg'>" + getAlertCo(statusT[2], normT[2]) + "</p></div>"+ "<div class='power2_3'>A相<p class='houseBg'>" + getAlertCo(statusT[3], normT[3]) + "</p></div>"+ "<div class='power2_4'>B相<p class='houseBg'>" + getAlertCo(statusT[4], normT[4]) + "</p></div>"+ "<div class='power2_5'>C相<p class='houseBg'>" + getAlertCo(statusT[5], normT[5]) + "</p></div>"+ "<div class='power2_6'>功率<p class='houseBg'>" + getAlertCo(statusT[6], normT[6]) + "</p></div>"+ "</div></div></li>";}//状态灯;//console.log(lightStatus);if (lightStatus.toString().indexOf("告警") > -1 && lightStatus.toString().indexOf("离线") > -1) {$("#power_Status").removeClass().addClass("alert1");} else if (lightStatus.toString().indexOf("告警") > -1) {$("#power_Status").removeClass().addClass("alert1");} else if (lightStatus.toString().indexOf("离线") > -1) {$("#power_Status").removeClass().addClass("alert4");} else {$("#power_Status").removeClass().addClass("alert2");}$("#power_ent").html(flow_entHtml);} else {console.log("电能流量感知状态:API INTERFACE ERROR");}}).fail(function (err) {console.log(err);});
}
4.弹窗
$.ajax({type: 'get',async: true,data: {},url: 'api/api.php?act=getIotPower2&token=3cab7ce4142608c0f40c785b5ab5ca24',dataType: "json",success: function (res) {var json = res.data.sort(getSortFun('asc', 'device_seq'));//排序console.log(json);var html = '';if (res.data != null) {for (var i = 0; i < json.length; i++) {var sensor = json[i].data.propertyType;var b_yesterday_val = json[i].odata.b_yesterday_val.split(",");var yesterday_val = json[i].odata.yesterday_val.split(",");var last_month_val = json[i].odata.last_month_val.split(",");//1月var b_last_month_val = json[i].odata.b_last_month_val.split(",");//2月var last_year_val = json[i].odata.last_year_val.split(",");var b_last_year_val = json[i].odata.b_last_year_val.split(",");var three_days_ago_val = json[i].odata.three_days_ago_val.split(",");var three_month_ago_val = json[i].odata.three_month_ago_val.split(",");//3月var three_years_ago_val = json[i].odata.three_years_ago_val.split(",");var four_month_ago_val = json[i].odata.four_month_ago_val.split(",");//4月var five_month_ago_val = json[i].odata.five_month_ago_val.split(",");//5月var six_month_ago_val = json[i].odata.six_month_ago_val.split(",");//6月var normValue = json[i].sdata.split(",");var sta = json[i].data.sensorStatus;var norm = sensor.split(",");var staValue = sta.split(",");//新增当日/月/年数据 2022.07.23 BY poleung;var today_val = json[i].odata.today_val.split(",");var current_month = json[i].odata.current_month.split(",");//当月var current_year = json[i].odata.current_year.split(",");//console.log(today_val);//数据排序,防止错乱;var normT = [], statusT = [], b_yesterday = [], yesterday = [], b_last_month = [], last_month = [],four_month = [],five_month = [],six_month = [],b_last_year = [], last_year = [];for (var j = 0; j < norm.length; j++) {//日用量if (norm.indexOf("电量") == -1) {normT[0] = "-";statusT[0] = "无设备";} else {if (norm[j] == "电量") {//normT[0] = parseFloat(normValue[j] - yesterday_val[j]).toFixed(2);normT[0] = getPositive(parseFloat(today_val[j] - yesterday_val[j]).toFixed(2));//今天statusT[0] = staValue[j];yesterday[0] = getPositive(parseFloat(yesterday_val[j] - b_yesterday_val[j]).toFixed(2));b_yesterday[0] = getPositive(parseFloat(b_yesterday_val[j] - three_days_ago_val[j]).toFixed(2));}}//月用量if (norm.indexOf("电量") == -1) {normT[1] = "-";statusT[1] = "无设备";} else {if (norm[j] == "电量") {statusT[1] = staValue[j];normT[1] = getPositive(parseFloat(current_month[j] - last_month_val[j]).toFixed(2));//1last_month[1] = getPositive(parseFloat(last_month_val[j] - b_last_month_val[j]).toFixed(2));//2b_last_month[1] = getPositive(parseFloat(b_last_month_val[j] - three_month_ago_val[j]).toFixed(2));//3four_month[1] = getPositive(parseFloat(three_month_ago_val[j] - four_month_ago_val[j]).toFixed(2));//4five_month[1] = getPositive(parseFloat(four_month_ago_val[j] - five_month_ago_val[j]).toFixed(2));//5six_month[1] = getPositive(parseFloat(five_month_ago_val[j] - six_month_ago_val[j]).toFixed(2));//6}}//年用量if (norm.indexOf("电量") == -1) {normT[2] = "-";statusT[2] = "无设备";} else {if (norm[j] == "电量") {normT[2] = getPositive(parseFloat(current_year[j] - last_year_val[j]).toFixed(2));statusT[2] = staValue[j];last_year[2] = getPositive(parseFloat(last_year_val[j] - b_last_year_val[j]).toFixed(2));b_last_year[2] = getPositive(parseFloat(b_last_year_val[j] - three_years_ago_val[j]).toFixed(2));}}if (norm.indexOf("A相电流") == -1) {normT[3] = "-";statusT[3] = "无设备";} else {if (norm[j] == "A相电流") {normT[3] = parseFloat(today_val[j]).toFixed(2);statusT[3] = staValue[j];}}if (norm.indexOf("B相电流") == -1) {normT[4] = "-";statusT[4] = "无设备";} else {if (norm[j] == "B相电流") {normT[4] = parseFloat(today_val[j]).toFixed(2);statusT[4] = staValue[j];}}if (norm.indexOf("C相电流") == -1) {normT[5] = "-";statusT[5] = "无设备";} else {if (norm[j] == "C相电流") {normT[5] = parseFloat(today_val[j]).toFixed(2);statusT[5] = staValue[j];}}if (norm.indexOf("电功率") == -1) {normT[6] = "-";statusT[6] = "无设备";} else {if (norm[j] == "电功率") {normT[6] = parseFloat(today_val[j]).toFixed(2);statusT[6] = staValue[j];}}}//构建表格;//html = "<tr><td>" + json[i].device_seq + "</td><td>" + json[i].device + "</td><td>" + makeBold(normT[2], statusT[2]) + "</td><td>" + makeBold(normT[1], statusT[1]) + "</td><td>" + makeBold(normT[3], statusT[3]) + "</td><td>" + makeBold(normT[4], statusT[4]) + "</td></tr>";html = "<tr><td>" + json[i].device_seq + "</td><td>"+ json[i].device + "</td><td class=\"tablebg1\">"+ normT[1] + "</td><td class=\"tablebg2\">"+ last_month[1] + "</td><td class=\"tablebg1\">"+ b_last_month[1] + "</td><td class=\"tablebg2\">"+ four_month[1] + "</td><td class=\"tablebg1\">"+ five_month[1] + "</td><td class=\"tablebg2\">"+ six_month[1] + "</td><td class=\"tablebg1\">"+ normT[2] + "</td><td class=\"tablebg1\">"+ last_year[2] + "</td><td class=\"tablebg1\">"+ b_last_year[2] + "</td><td>"+makeBold(normT[3],statusT[3])+"</td><td>"+makeBold(normT[4],statusT[4])+"</td><td>"+makeBold(normT[5],statusT[5])+"</td><td class=\"tablebg1\">"+makeBold(normT[6],statusT[6])+"</td></tr>";//渲染表格;$("#example tbody").append(html);}$('#example').DataTable({dom: '<"searchBox"lf>t<"dtPage"i>p',//控件位置bFilter: true,//过滤搜索pagingType: "first_last_numbers",//分页样式pageLength: 15,//默认显示条数;bPaginate: true,//分页总开关lengthMenu: [15, 25, 50, 75, 100, 200],language: {emptyTable: '没有数据',loadingRecords: '加载中...',processing: '查询中...',search: '搜索:',lengthMenu: '每页 _MENU_ 条数据',zeroRecords: '没有数据',paginate: {'first': '首页','last': '尾页','next': '下一页','previous': '上一页'},info: '共计:_TOTAL_ 条数据',infoEmpty: '没有数据',infoFiltered: '(过滤 _MAX_ 条)',}});} else {html = "<tr><td colspan='11'>无数据</td></tr>";$("#example").addClass("dataTable no-footer");$("#example tbody").html(html);}},error: function (err) {console.log(err);}});
三.数组按顺序输出
在 JavaScript 中,您可以使用循环和数组的特性来按顺序输出多组数据。具体的实现取决于您的数据结构和输出方式。以下是两种常见的方法:
方法一:使用 for 循环遍历数组并输出
var data = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];for (var i = 0; i < data.length; i++) {var currentData = data[i];console.log(currentData); // 在控制台输出当前数据组
}
上述代码中,我们使用了一个 for
循环来遍历数组 data
中的每一组数据。在循环的每一次迭代中,我们将当前数据组存储在一个变量 currentData
中,并通过 console.log()
输出到控制台。
方法二:使用 forEach 方法遍历数组并输出
var data = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];data.forEach(function(currentData) {console.log(currentData); // 在控制台输出当前数据组
});
上述代码中,我们使用数组的 forEach
方法来遍历数组 data
中的每一组数据。通过传入一个回调函数,我们可以在每次迭代中获取当前数据组,并通过 console.log()
输出到控制台。
@漏刻有时