提交 ea0dee26 authored 作者: 李学军's avatar 李学军

Initial commit

上级
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="荣装网视觉算法系统,智能监理系统">
<meta name="description" content="荣装网视觉算法系统是一个在家装过程中使用的智能监理系统。">
<meta name="author" content="jiajieyusheng">
<title>荣装网视觉算法系统</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
/* 高亮数值区域 */
.list-group-item > span {
font-weight: bold;
color: #2c3e50;
}
</style>
</head>
<body>
<!--页面loading-->
<div id="lyear-preloader" class="loading">
<div class="ctn-preloader">
<div class="round_spinner">
<div class="spinner"></div>
<img src="images/loading-logo.png" alt="">
</div>
</div>
</div>
<!--页面loading end-->
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--页面主要内容-->
<main class="lyear-layout-content">
<div class="container-fluid p-t-15">
<div class="lyear-divider">设备信息</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card card-hover-shadow">
<header class="card-header">
<div class="card-title">设备编号 - <small id="cpuId">c9b39c4869d99d3c</small></div>
</header>
<div class="card-body">
<p>CPU使用率:<span id="cpuUsed"><span></span></p>
<p>内存使用率:<span id="memInfo"></span></p>
<p>网络速度:<span id="speedNet"></span></p>
</div>
</div>
</div>
</div>
<div class="lyear-divider">报警控制</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card card-hover-shadow">
<header class="card-header">
<div class="card-title">算法列表</div>
</header>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item" id="yanwu">烟雾报警</li>
<li class="list-group-item" id="diedao">跌倒报警</li>
<li class="list-group-item" id="weilan">电子围栏</li>
<li class="list-group-item" id="yichang">异常行为报警</li>
<li class="list-group-item" id="shuidian">水电管线</li>
<li class="list-group-item" id="qingxu">人脸情绪分析</li>
<li class="list-group-item" id="konggu">墙面空鼓</li>
<li class="list-group-item" id="yinyangjiao">阴阳角</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card card-hover-shadow">
<header class="card-header">
<div class="card-title">传感器数据(每5秒刷新数据)</div>
</header>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">噪音<span id="zaoyin" style="margin-left: 20px;"></span></li>
<li class="list-group-item">PM2.5<span id="pm25" style="margin-left: 20px;"></span></li>
<li class="list-group-item">灰尘<span id="pm10" style="margin-left: 20px;"></span></li>
<li class="list-group-item">二氧化碳<span id="co2" style="margin-left: 20px;"></span></li>
<li class="list-group-item">温度<span id="wendu" style="margin-left: 20px;"></span></li>
<li class="list-group-item">湿度<span id="shidu" style="margin-left: 20px;"></span></li>
<li class="list-group-item">甲醛<span id="jiaquan" style="margin-left: 20px;"></span></li>
<li class="list-group-item">挥发性有机化合物<span id="youji" style="margin-left: 20px;"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="lyear-divider">实时画面</div>
<video id='cam' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
</div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/webrtcstreamer.js"></script>
<script>
const socket = io.connect(API_ADDR);
socket.on('connect', () => {
socket.emit('message', { text: 'Hello WebSocket!' }); // 发送消息
});
socket.on('response', (data) => {
console.log('Server response:', data); // 接收服务端响应
});
var webRtcServer1 = null;
//页面加载时加载视频画面
window.onload = function () {
//video:需要绑定的video控件ID
// no use -> webRtcServer = new WebRtcStreamer("video",location.protocol+"//192.168.1.103:8000");
webRtcServer1 = new WebRtcStreamer("cam", "http://192.168.1.144:8000");
//需要查看的rtsp地址
// no use -> webRtcServer.connect("rtsp://xxx:xxx@192.168.1.xxx:554/cam/realmonitor?channel=1&subtype=1");
webRtcServer1.connect("cam");
}
//页面退出时销毁
window.onbeforeunload = function () {
webRtcServer1.disconnect();
}
$(document).ready(function () {
// 发送 AJAX GET 请求
$.ajax({
url: GETINFO, // 替换为实际的 API URL
type: 'GET',
dataType: 'json', // 假设返回的数据是 JSON 格式
success: function (data) {
// 处理成功响应的数据
console.log('获取到的数据:', data);
var objData = JSON.parse(data)
$("#cpuId").text(objData.cpu_id)
$("#cpuUsed").text(" " + objData.cpu_used.toFixed(2) + "%")
$("#memInfo").text(" " + objData.mem_used.toFixed(1) + "G/" + objData.mem_total.toFixed(1) + "G")
$("#speedNet").text(" 上传速度(KB/S)" + objData.up_speed.toFixed(2) + " 下载速度(KB/S)" + objData.down_speed.toFixed(2))
},
error: function (error) {
// 处理错误响应
console.error('请求出错:', error);
alert('请求出错,请稍后重试');
}
});
getCGQData();
});
function getCGQData(){
$.ajax({
url: GETCGQ, // 替换为实际的 API URL
type: 'GET',
dataType: 'json', // 假设返回的数据是 JSON 格式
success: function (data) {
// 处理成功响应的数据
console.log('获取到的数据:', data);
var objData = JSON.parse(data)
$("#pm25").html(objData.pm25+"ug/m<sup>3</sup>")
$("#pm10").html(objData.pm10+"ug/m<sup>3</sup>")
$("#co2").text(objData.co2+"ppm")
$("#jiaquan").html(objData.jq+"ug/m<sup>3</sup>")
$("#youji").text(objData.voc)
$("#wendu").text(objData.wd+"°C")
$("#shidu").text(objData.sd+"%RH")
},
error: function (error) {
// 处理错误响应
console.error('请求出错:', error);
alert('请求出错,请稍后重试');
}
});
// 设置下一次轮询
setTimeout(() => getCGQData(), 5000);
}
</script>
</body>
</html>
\ No newline at end of file
差异被折叠。
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论