作业环境-层降监测

css/home/navigation.css

@@ -131,4 +131,8 @@ html {
 
 .layui-form-select dl {
     background-color: #144e49;
+}
+
+.layui-select-title input{
+    border: none;
 }

css/operEnvironment/operEnvironment.css

@@ -130,7 +130,7 @@ th {
 }
 
 .right-down .background-img:nth-child(1){
-    padding: 3% 1% 1% 1%;
+    padding: 0% 1% 1% 1%;
 }
 
 .Weather-img{
@@ -546,4 +546,24 @@ th {
     width: 80%;
     height: 100%;
     overflow: auto;
+}
+
+.right-down-left .item{
+    width: 48%;
+    height: 120px;
+    flex-direction: column;
+    justify-content: space-evenly;
+    cursor: pointer;
+}
+
+.right-down-left{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+#backData{
+    width: 100%;
+    height: 40px;
+    cursor: pointer;
 }

js/operEnvironment/operEnvironment.js

@@ -157,47 +157,31 @@ function DaylightDisplacementApi(){
 }
 
 function DaylightDisplacement(environmentData) {
-// 获取存放设备的父元素
-    var environmentContainer = document.querySelector('.right-down-left');
-    var beforeIds = "-1";
-// 遍历数据，生成设备元素并添加到页面中
-    for (var i = 0; i < environmentData.length; i += 2) {
-        // 创建一个新的 div 作为一组设备信息的容器
-        var groupElement = document.createElement('div');
-        groupElement.style.width = '100%';
-        groupElement.style.height = '25%';
-        groupElement.style.display = 'flex';
-        console.log(environmentData)
-        // 将每组四个设备信息添加到容器中
-        for (var j = i; j < i + 2 && j < environmentData.length; j++) {
-            var deviceElement = document.createElement('div');
-            deviceElement.className = 'environment-equipment';
-            // 设置设备名称和状态等信息
-            deviceElement.textContent = environmentData[j].deviceName;
-            let deviceId = environmentData[j].deviceId; //设备id
-            // 赋值id
-            deviceElement.id = "devices" + j;
-            deviceElement.setAttribute("dev-id",deviceId);
-            deviceElement.addEventListener('click', function (obj) {
-                // 切换设备图片
-                $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/daylightDisplacement-normal.png')");
-                if (beforeIds !== "-1" && beforeIds !== obj.target.id){
-                    // 恢复上一个设备的图片
-                    $("#" + beforeIds).css("background-image", "url('../../img/operEnvironment/daylightDisplacement-abnormal.png')");
-                }
-                // 上一个设备的id
-                beforeIds = obj.target.id;
-                DaylightDisplacementList(obj.target.getAttribute("dev-id"));
-            });
-            groupElement.appendChild(deviceElement);
-        }
-        // 将每组设备信息容器添加到父元素中
-        environmentContainer.appendChild(groupElement);
-    }
-
-
+    let html = '';
+    $.each(environmentData, function (index, item) {
+        html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData(this)">' +
+        '<img src="../../img/operEnvironment/daylightDisplacement-abnormal.png">' + 
+        '<p>'+item.deviceName+'</p>' + 
+        '</div>'; 
+    })
+    $('.right-down-left').empty().append(html);
 }
 
+function loadData(that){
+    const devId = $(that).attr('dev-id');
+    $('.right-down-left .item').each(function(){
+        $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
+    })
+    $(that).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-normal.png")
+    DaylightDisplacementList(devId);
+}
+
+function backData(){
+    $('.right-down-left .item').each(function(){
+        $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
+    })
+    DaylightDisplacementList('');
+}
 
 //和风天气API调用
 function zephyrineWeather() {

pages/operEnvironment/operEnvironment.html

@@ -86,7 +86,8 @@
         <div class="right layout-vertical">
             <div class="right-down">
                 <div class="background-img" style="background-image: url('../../img/operEnvironment/cjjc.png');">
-                    <div class="layout" style="width: 100%;height: 100%;">
+                    <div id="backData" onclick="backData()"></div>
+                    <div class="layout" style="width: 100%;height: calc(100% - 50px);">
                         <div class="right-down-left">
                         </div>
                         <div class="right-down-right">