电教智能云数据可视化平台开发电脑优化日志实录
一、2K和4K弹窗判断
php
{* 判断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}
php
{if $dataScene neq ""}<a class="menuBtn subMenu" href="?m=Index&a=overview&act=showView&member_id={$dataScene['member_id']}">总览图</a>{/if}
二、电能API对接
1.电脑爬虫
php
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.电能分组过滤
php
/*物联网-电量流量分组 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.数据可视化渲染
javascript
/*
* 电能流量环境状态*半年
* */
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.弹窗
javascript
$.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));//1
last_month[1] = getPositive(parseFloat(last_month_val[j] - b_last_month_val[j]).toFixed(2));//2
b_last_month[1] = getPositive(parseFloat(b_last_month_val[j] - three_month_ago_val[j]).toFixed(2));//3
four_month[1] = getPositive(parseFloat(three_month_ago_val[j] - four_month_ago_val[j]).toFixed(2));//4
five_month[1] = getPositive(parseFloat(four_month_ago_val[j] - five_month_ago_val[j]).toFixed(2));//5
six_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 循环遍历数组并输出
javascript
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 方法遍历数组并输出
javascript
var data = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
data.forEach(function(currentData) {
console.log(currentData); // 在控制台输出当前数据组
});上述代码中，我们使用数组的 forEach 方法来遍历数组 data 中的每一组数据。通过传入一个回调函数，我们可以在每次迭代中获取当前数据组，并通过 console.log() 输出到控制台。
@漏刻有时