标签: html5

html实现海康威视大屏展示

项目需求

内网环境中,实现出入人员统计大屏展示

设计思路

数据来源

通过json和后端进行数据交互,定时请求抓取现有出入数据

数据处理

当前人数计算方式为出数据减去入数据即为当前数据,但存在部分多次入一次出,或者多次出一次入的异常数据发生 ,所以进行了额外处理,当某个ID 出数据大于入数据则计算为一次当前人数小于等于则不计算当前人数,保证了数据准确度

源码

<!DOCTYPE html>
<html>

<head>
 <meta charset=utf-8 />
 <title>进出管理系统</title>
 <script src=jquery.min.js></script>
</head>

<body>
 <div class="box">
  <div class="p1">进出管理系统</div>
  <div class="p2" id="now"></div>
  <div class="p3" id="supervise"></div>
  <div class="p3" id="management"></div>
  <div class="p3" id="group"></div>
  <div class="p3" id="group2"></div>
  <div class="p2" id="inOut"></div>
  <div id="current-time"></div>
 </div>


</body>
<script>
 function updateCurrentTime() {
  const currentTime = new Date();
  const year = currentTime.getFullYear();
  const month = ('0' + (currentTime.getMonth() + 1)).slice(-2);
  const date = ('0' + currentTime.getDate()).slice(-2);
  const hours = ('0' + currentTime.getHours()).slice(-2);
  const minutes = ('0' + currentTime.getMinutes()).slice(-2);
  const seconds = ('0' + currentTime.getSeconds()).slice(-2);
  const currentTimeElement = document.querySelector("#current-time");
  currentTimeElement.innerHTML = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
 }
 function getData() {
  $.when(
   $.getJSON("http://127.0.0.1:8080/in2"),
   $.getJSON("http://127.0.0.1:8080/out2")
  ).then(function (data1, data2) {
   let inData = data1[0];
   let outData = data2[0];
   let nowData = [...inData];
   outData.forEach((item) => {
    let num = 0;
    let i = nowData.some((person, index) => {
     if (item.id == person.id) {
      let num = index;
      return true;
     } else {
      return false;
     }
    })
    if (i) {
     nowData.splice(num, 1);
    }
   })
   //window.console.log(nowData);
   var list = nowData; // 同上
   var uniqueObj = {};
   var uniqueList = [];
   for (var i = 0; i < list.length; i++) {
    var obj = list[i];
    if (!uniqueObj[obj.id]) {
     uniqueObj[obj.id] = true;
     uniqueList.push(obj);
    }
   }
   nowData = uniqueList
   document.getElementById('now').innerHTML = `当前人数: ${nowData.length} 人`;
   document.getElementById('supervise').innerHTML = `监理 ${nowData.filter(item => item.position == '监理').length}人`;
   document.getElementById('management').innerHTML = `管理 ${nowData.filter(item => item.position == '管理').length}人`;
   document.getElementById('group').innerHTML = `盾构班组 ${nowData.filter(item => item.position == '盾构班组').length}人`;
   document.getElementById('group2').innerHTML = `车站班组 ${nowData.filter(item => item.position == '车站班组').length}人`;
   document.getElementById('inOut').innerHTML = `今日累计进出 ${inData.length + outData.length} 人次`;
  })
 }
 getData();
 setInterval(getData, 10000);
 setInterval(updateCurrentTime, 1000);
</script>
<style>
 .box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  font-weight: bold;
  padding-left: 30px;
  background: linear-gradient(to right, rgb(0, 202, 248), rgb(0, 85, 190));
  font-size: 25px;
  box-sizing: border-box;
 }

 @media screen and (min-width: 1800px) and (min-height: 600px) {
  .box {
   font-size: 50px;
  }
 }

 @media screen and (min-width: 1440px) and (max-width: 1800px) and (min-height: 475px) {
  .box {
   font-size: 40px;
  }
 }

 @media screen and (min-width: 1250px) and (max-width: 1440px) and (min-height: 450px) {
  .box {
   font-size: 35px;
  }
 }

 @media screen and (min-width: 1070px) and (max-width: 1250px) and (min-height: 400px) {
  .box {
   font-size: 30px;
  }
 }

 @media screen and (min-width: 1000px) and (max-width: 1070px) {
  .box {
   font-size: 28px;
  }
 }

 @media screen and (max-width: 1000px) {
  .box {
   font-size: 25px;
  }
 }

 * {
  margin: 0;
  padding: 0;
 }

 html,
 body {
  height: 100%;
  width: 100%;
 }

 .p1 {
  font-size: 2em;
 }

 .p2 {
  font-size: 1.5em;
 }

 .p3 {
  font-size: 1.17em;
 }

 h4 {
  margin: 0;
 }
</style>

</html>

bjtang大约 5 分钟