实时监测动态显示

css/operEnvironment/operEnvironment.css

@@ -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;
+    border: #184B49 1px solid;
-    color: #278178;
+    color: #184B49;
 }
 
 .layui-table-view select[lay-ignore] {
     background-color: transparent;
-    border: #278178 1px solid;
+    border: #184B49 1px solid;
-    color: #278178;
+    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;

js/consQuality/consQuality.js

@@ -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: '序号'}, // 添加序号列

js/operEnvironment/operEnvironment.js

@@ -25,10 +25,15 @@ layui.use(['layer', 'element', 'table'], function () {
 
 //实时监测
 function realTimeMonitoring(){
-    const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
+    const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring";
-    let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
+    const params = {
-    const url = commonUrl + 'screen/largeScreen/xcIndex/getProJcData?params=' + montageParam;
+        "bidCode": bidCode,
-    ajaxRequestGet(url, "GET", true, function () {
+        "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 === '温度') {
+                var itemHtml = ''
-                    $('#wd').html(item.val ? item.val : 0);
+                if(item.isWarn=='0'){
-                } else if (item.modelName === '湿度') {
+                    itemHtml = `<div class="monitor-item">
-                    $('#sd').html(item.val ? item.val : 0);
+                                    <p><span id="wd">${item.val}</span><span>${item.unit}</span></p>
-                } else if (item.modelName === '噪声') {
+                                    <p>${item.dataType}</p>
-                    $('#zs').html(item.val ? item.val : 0);
+                                    <div class="item-icon"></div>
-                } else if (item.modelName === '光照') {
+                                </div>`
-                    $('#gz').html(item.val ? item.val : 0);
+                }else if(item.isWarn=='1'){
-                } else if (item.modelName === 'pm2') {
+                    itemHtml = `<div class="monitor-item">
-                    $('#pm2').html(item.val ? item.val : 0);
+                                    <p><span id="wd" class="redColor">${item.val}</span><span class="redColor">${item.unit}</span></p>
-                } else if (item.modelName === 'pm10') {
+                                    <p class="redColor">${item.dataType}</p>
-                    $('#pm10').html(item.val ? item.val : 0);
+                                    <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);
+                // }
             })
         }
     }

js/pages/towerAssInspect/towerAssInspect.js

@@ -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/towerAssInspect/getRealTimeDetection?params="+montageParam; // url	
-	const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring?params="+montageParam; // url	
 	ajaxRequestGet(url, "get", true, function () {
 	}, function (result) {
 		let html = '';

pages/operEnvironment/operEnvironment.html

@@ -75,40 +75,10 @@
                             <div class="state">正常</div>
                             <div class="state">异常</div>
                         </div>
-                        <div class="layout" style="width: 100%;height: 40%;">
+                        <div id="flex-Box">
-                            <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>
+                        
                     </div>
                 </div>
             </div>