cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时监测动态显示

This commit is contained in:
zzyuan 2024-04-19 17:05:45 +08:00
parent 220c3fe86e
commit 0be514d695
5 changed files with 98 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
css/operEnvironment/operEnvironment.css
View File

@ -47,7 +47,7 @@ body {
/* 表格头部背景色 */
th {
background-color: #278178; /* MediumSeaGreen */
background-color: #184B49; /* MediumSeaGreen */
color: #fff;
font-weight: bold
}
@ -58,39 +58,39 @@ th {
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #278178;
background-color: #184B49;
}
.layui-laypage a:hover {
color: #278178;
color: #184B49;
}
.layui-laypage .layui-laypage-skip {
color: #3ACAB8;
color: #16534c;
}
.layui-laypage-count{
color:#278178;
color:#184B49;
}
.layui-laypage button, .layui-laypage input {
background-color: transparent;
border: #278178 1px solid;
color: #278178;
border: #184B49 1px solid;
color: #184B49;
}
.layui-table-view select[lay-ignore] {
background-color: transparent;
border: #278178 1px solid;
color: #278178;
border: #184B49 1px solid;
color: #184B49;
}
.layui-table-page .layui-laypage span {
color: #278178;
color: #184B49;
}
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
color: #278178;
color: #184B49;
}
/**公共类**/
@ -306,6 +306,43 @@ th {
color: #e24e3b;
}
#flex-Box{
width: 100%;
height: 75%;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
.monitor-item{
width: 30%;
height: 105px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items:center;
}
.monitor-item p:nth-child(1) span:nth-child(1) {
font-size: 24px;
color: #79FFFFFF;
font-weight: bold;
}
.monitor-item p:nth-child(1) span:nth-child(2) {
margin-left: 5px;
color: #79FFFFFF;
}
.item-icon{
width: 100%;
height: 60%;
background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
background-size: initial;
}
.redColor{
color: red !important;
}
.monitor-data {
width: 28%;
height: 83%;
@ -314,6 +351,7 @@ th {
justify-content: space-around;
}
.monitor-data p:nth-child(1) span:nth-child(1) {
font-size: 24px;
color: #79FFFFFF;

9
js/consQuality/consQuality.js
View File

@ -295,6 +295,12 @@ function ConstructionQualityList(deviceId){
//渲染历史记录table
function initHistory(){
const url = commonUrl + "screen/largeScreen/constructionQuality/getHistoryList";
let times = ''
if($('#ID-laydate-start-date-1').val()!=''){
times = $('#ID-laydate-start-date-1').val()+' - '+ $('#ID-laydate-end-date-1').val()
}else{
times = ''
}
historyTableIns = table.render({
elem: '#tableDialog',
url: url,
@ -310,8 +316,7 @@ function initHistory(){
userId: userId,
bidCode: bidCode,
deviceName:$('#deviceName').val(),
times: $('#ID-laydate-start-date-1').val()+' - '+ $('#ID-laydate-end-date-1').val(),
times: times,
},
cols: [[
{type: 'numbers', title: '序号'}, // 添加序号列

55
js/operEnvironment/operEnvironment.js
View File

@ -25,10 +25,15 @@ layui.use(['layer', 'element', 'table'], function () {
//实时监测
function realTimeMonitoring(){
const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + 'screen/largeScreen/xcIndex/getProJcData?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring";
const params = {
"bidCode": bidCode,
"roleCode": roleCode,
"orgId": orgId,
"userId": userId
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
@ -41,25 +46,41 @@ function realTimeMonitoring(){
}, function (xhr, status, error) {
error(xhr, status, error)
setData(null);
}, aqEnnable);
}, "application/json", aqEnnable);
/* 实时检测赋值 */
function setData(data) {
if (data && data.length > 0) {
$.each(data, function (index, item) {
if (item.modelName === '温度') {
$('#wd').html(item.val ? item.val : 0);
} else if (item.modelName === '湿度') {
$('#sd').html(item.val ? item.val : 0);
} else if (item.modelName === '噪声') {
$('#zs').html(item.val ? item.val : 0);
} else if (item.modelName === '光照') {
$('#gz').html(item.val ? item.val : 0);
} else if (item.modelName === 'pm2') {
$('#pm2').html(item.val ? item.val : 0);
} else if (item.modelName === 'pm10') {
$('#pm10').html(item.val ? item.val : 0);
var itemHtml = ''
if(item.isWarn=='0'){
itemHtml = `<div class="monitor-item">
<p><span id="wd">${item.val}</span><span>${item.unit}</span></p>
<p>${item.dataType}</p>
<div class="item-icon"></div>
</div>`
}else if(item.isWarn=='1'){
itemHtml = `<div class="monitor-item">
<p><span id="wd" class="redColor">${item.val}</span><span class="redColor">${item.unit}</span></p>
<p class="redColor">${item.dataType}</p>
<div class="item-icon"></div>
</div>`
}
$("#flex-Box").append(itemHtml)
// if (item.modelName === '温度') {
// $('#wd').html(item.val ? item.val : 0);
// } else if (item.modelName === '湿度') {
// $('#sd').html(item.val ? item.val : 0);
// } else if (item.modelName === '噪声') {
// $('#zs').html(item.val ? item.val : 0);
// } else if (item.modelName === '光照') {
// $('#gz').html(item.val ? item.val : 0);
// } else if (item.modelName === 'pm2') {
// $('#pm2').html(item.val ? item.val : 0);
// } else if (item.modelName === 'pm10') {
// $('#pm10').html(item.val ? item.val : 0);
// }
})
}
}

3
js/pages/towerAssInspect/towerAssInspect.js
View File

@ -93,8 +93,7 @@ function getInfo(deviceId){
function getRealTimeDetection(deviceId){
let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&deviceId=' + deviceId;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
// const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?params="+montageParam; // url
const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring?params="+montageParam; // url
const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?params="+montageParam; // url
ajaxRequestGet(url, "get", true, function () {
}, function (result) {
let html = '';

36
pages/operEnvironment/operEnvironment.html
View File

@ -75,40 +75,10 @@
<div class="state">正常</div>
<div class="state">异常</div>
</div>
<div class="layout" style="width: 100%;height: 40%;">
<div class="layout monitor-data wd">
<p><span id="wd">0</span><span>℃</span></p>
<p>温度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data sd">
<p><span id="sd">0</span><span>%</span></p>
<p>湿度</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data zs">
<p><span id="zs">0</span><span>分贝</span></p>
<p>噪声</p>
<div class="monitor-icon"></div>
</div>
</div>
<div class="layout" style="width: 100%;height: 40%;">
<div class="layout monitor-data gz">
<p><span id="gz">0</span><span>kwh</span></p>
<p>光照</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data pm2">
<p><span id="pm2">0</span><span>μg/m³</span></p>
<p>PM2.5</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data pm10">
<p><span id="pm10">0</span><span>μg/m³</span></p>
<p>PM10</p>
<div class="monitor-icon"></div>
</div>
<div id="flex-Box">
</div>
</div>
</div>
</div>