diff --git a/css/operEnvironment/operEnvironment.css b/css/operEnvironment/operEnvironment.css index 4f993cc..93466db 100644 --- a/css/operEnvironment/operEnvironment.css +++ b/css/operEnvironment/operEnvironment.css @@ -8,30 +8,42 @@ body { font-family: 'Alibaba PuHuiTi R', serif; } -::-webkit-scrollbar -{ +::-webkit-scrollbar { width: 6px; height: 6px; } -::-webkit-scrollbar-track-piece -{ + +::-webkit-scrollbar-track-piece { background-color: #0d2225; -webkit-border-radius: 6px; } -::-webkit-scrollbar-thumb:vertical -{ + +::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: #0d2225; -webkit-border-radius: 6px; } -::-webkit-scrollbar-thumb:horizontal -{ + +::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: #0d2225; -webkit-border-radius: 6px; } -.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] { +.layui-table td, +.layui-table th, +.layui-table-col-set, +.layui-table-fixed-r, +.layui-table-grid-down, +.layui-table-header, +.layui-table-mend, +.layui-table-page, +.layui-table-tips-main, +.layui-table-tool, +.layui-table-total, +.layui-table-view, +.layui-table[lay-skin=line], +.layui-table[lay-skin=row] { border-width: 1px; border-style: solid; border-color: transparent; @@ -50,13 +62,16 @@ th { color: #fff; font-weight: bold } -.layui-table-header table thead{ - background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%); + +.layui-table-header table thead { + background: linear-gradient(90deg, rgba(62, 217, 197, 0) 0%, #2D998B 50%, rgba(62, 217, 197, 0) 100%); } + /*鼠标指向表格时,奇数行背景颜色*/ -.layui-table tbody tr:hover, .layui-table-hover { +.layui-table tbody tr:hover, +.layui-table-hover { /* background-color: #19b0b9; */ - background: linear-gradient( 90deg, rgba(62,217,197,0) 0%, #2D998B 50%, rgba(62,217,197,0) 100%); + background: linear-gradient(90deg, rgba(62, 217, 197, 0) 0%, #2D998B 50%, rgba(62, 217, 197, 0) 100%); } .layui-laypage .layui-laypage-curr .layui-laypage-em { @@ -71,11 +86,12 @@ th { color: #3ACAB8; } -.layui-laypage-count{ - color:#3ACAB8; +.layui-laypage-count { + color: #3ACAB8; } -.layui-laypage button, .layui-laypage input { +.layui-laypage button, +.layui-laypage input { background-color: transparent; border: #3ACAB8 1px solid; color: #3ACAB8; @@ -91,25 +107,26 @@ th { color: #3ACAB8; } -.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr { +.layui-table-page .layui-laypage a, +.layui-table-page .layui-laypage span.layui-laypage-curr { color: #3ACAB8; } /**公共类**/ -.layout{ +.layout { display: flex; align-items: center; justify-content: space-between; } -.layout-vertical{ +.layout-vertical { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } -.background-img{ +.background-img { width: 100%; height: 100%; padding: 9% 2% 2% 2%; @@ -121,19 +138,20 @@ th { background-size: 100% 100%; } -.right-under-left .background-img:nth-child(1){ - padding: 5% 2% 2% 2%; +.right-under-left .background-img:nth-child(1) { + padding: 0% 2% 2% 2%; } -.right-under-right .background-img:nth-child(1){ - padding: 5% 2% 2% 2%; +.right-under-right .background-img:nth-child(1) { + padding: 0% 2% 2% 2%; } -.right-down .background-img:nth-child(1){ - padding: 0% 1% 1% 1%; +.right-down .background-img:nth-child(1) { + /* padding: 0% 1% 1% 1%; */ + padding: 0; } -.Weather-img{ +.Weather-img { width: 100%; height: 100%; box-sizing: border-box; @@ -145,51 +163,57 @@ th { } /**主体部分**/ -.large-frame{ +.large-frame { width: 100%; - height: 100%; + height: 99%; justify-content: space-evenly; } -.left{ - width: 22%; +.left { + width: 23.9%; height: 99%; + padding-top: 0.85% !important; + padding-left: 0.85% !important; } -.right{ +.right { width: 75%; height: 99%; flex-direction: column; justify-content: space-between; - + padding-top: 0.85% !important; + padding-right: 0.85% !important; } -.left-down{ + +.left-down { width: 100%; - height: 52%; + height: 49.3%; } -.right-down{ +.right-down { width: 100%; - height: 52%; + height: 49.3%; + justify-content: space-around; } -.left-under{ +.left-under { width: 100%; - height: 46%; + height: 49.3%; + justify-content: space-around; } -.right-under-left{ +.right-under-left { width: 49.5%; height: 100%; } -.right-under-right{ +.right-under-right { width: 49.5%; height: 100%; } -.Weather-layout{ +.Weather-layout { width: 100%; height: 100%; display: flex; @@ -197,14 +221,15 @@ th { justify-content: space-between; align-items: center; } -.Weather-down{ + +.Weather-down { width: 100%; height: 55%; display: flex; /*border: #0a84ff 1px solid;*/ } -.weather-down-left{ +.weather-down-left { width: 55%; height: 100%; padding: 11% 0 0 15%; @@ -212,14 +237,14 @@ th { background-position: center center !important; } -.substance{ +.substance { display: flex; width: 80%; height: 50%; padding-top: 8%; } -.substance1{ +.substance1 { width: 33%; height: 50%; box-sizing: border-box; @@ -230,13 +255,13 @@ th { background-size: 100% 100%; } -.substance2{ +.substance2 { display: flex; flex-direction: column; padding-left: 7%; } -.substance3{ +.substance3 { display: flex; width: 100%; height: 100%; @@ -247,7 +272,7 @@ th { } -.substance4{ +.substance4 { width: 17%; height: 48%; box-sizing: border-box; @@ -258,14 +283,14 @@ th { background-size: 100% 100%; } -.substance5{ +.substance5 { display: flex; flex-direction: column; padding-left: 7%; } -.weather-down-right{ +.weather-down-right { display: flex; width: 45%; height: 100%; @@ -273,14 +298,14 @@ th { justify-content: space-evenly; } -.weather-box{ +.weather-box { width: 78%; height: 24%; border: #00FFF4 1px solid; margin: 0 auto; } -.state-box{ +.state-box { width: 100%; height: 20%; display: flex; @@ -288,7 +313,7 @@ th { align-items: center; } -.state{ +.state { display: flex; width: 15%; height: 41%; @@ -308,7 +333,7 @@ th { color: #e24e3b; } -#flex-Box{ +#flex-Box { width: 100%; height: 75%; display: flex; @@ -316,15 +341,16 @@ th { overflow-y: auto; } -.monitor-item{ +.monitor-item { width: 30%; height: 105px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: space-around; - align-items:center; + align-items: center; } + .monitor-item p:nth-child(1) span:nth-child(1) { font-size: 24px; color: #79FFFFFF; @@ -335,20 +361,23 @@ th { margin-left: 5px; color: #79FFFFFF; } -.item-icon{ + +.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{ + +.redColor { color: red !important; } + .monitor-data { width: 28%; height: 83%; - margin-top: 3%; + /* margin-top: 3%; */ flex-direction: column; justify-content: space-around; } @@ -381,11 +410,13 @@ th { background-position: center center !important; background-size: initial; } -#logo{ + +#logo { background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; background-size: initial; } + .left-under .layout .monitor-data.zs .monitor-icon { background: url("../../img/index/zs.png") no-repeat 0 0 / 100% 100%; background-position: center center !important; @@ -436,7 +467,7 @@ th { } -.environment{ +.environment { overflow: auto; width: 100%; height: 60%; @@ -451,7 +482,7 @@ th { color: #000; } -.environments{ +.environments { overflow: auto; width: 100%; height: 60%; @@ -499,10 +530,10 @@ th { } .environment .environment-equipment:nth-child(4) { - background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%; - background-position: center center !important; - background-size: initial; - } + background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; + background-size: initial; +} .environments .environment-equipment:nth-child(1) { background: url("../../img/operEnvironment/LimitedMonitoring-abnormal.png") no-repeat 0 0 / 100% 100%; @@ -529,41 +560,60 @@ th { } -.Weather-under{ +.Weather-under { width: 100%; height: 45%; /*border: #591212 1px solid;*/ } -.right-down-left{ - width: 20%; - height: 100%; - overflow: auto; +.right-down-left { + width: 100%; + height: 35%; } -.right-down-right{ - width: 80%; - height: 100%; - overflow: auto; +.right-down-right { + width: 100%; + height: 63%; + /* overflow: auto; */ } -.right-down-left .item{ - width: 48%; +.right-down-left .item, +.environment .item, +.environments .item{ + width: 140px; height: 120px; flex-direction: column; justify-content: space-evenly; cursor: pointer; } -.right-down-left{ +.right-down-left, +.environment, +.environments{ display: flex; flex-wrap: wrap; align-items: center; + justify-content: center; } -#backData{ +.backData { width: 100%; height: 40px; cursor: pointer; +} + +#zhsh { + width: 49.3%; + height: 100%; + background: url("../../img/operEnvironment/zhsh.png") no-repeat 0 0 / 100% 100%; + background-position: center center !important; +} + +#zhsh-table-box { + width: 98%; + height: 100%; + padding: 8% 0 0 0; + box-sizing: border-box; + margin: 0 1%; } \ No newline at end of file diff --git a/img/operEnvironment/cjjc.png b/img/operEnvironment/cjjc.png index 86dace0..f4bc771 100644 Binary files a/img/operEnvironment/cjjc.png and b/img/operEnvironment/cjjc.png differ diff --git a/img/operEnvironment/temp.png b/img/operEnvironment/temp.png new file mode 100644 index 0000000..2cc8e8e Binary files /dev/null and b/img/operEnvironment/temp.png differ diff --git a/img/operEnvironment/temp2.png b/img/operEnvironment/temp2.png new file mode 100644 index 0000000..cd0409e Binary files /dev/null and b/img/operEnvironment/temp2.png differ diff --git a/img/operEnvironment/user.png b/img/operEnvironment/user.png new file mode 100644 index 0000000..7be0ab8 Binary files /dev/null and b/img/operEnvironment/user.png differ diff --git a/img/operEnvironment/xl.png b/img/operEnvironment/xl.png new file mode 100644 index 0000000..a8b4f04 Binary files /dev/null and b/img/operEnvironment/xl.png differ diff --git a/img/operEnvironment/xl2.png b/img/operEnvironment/xl2.png new file mode 100644 index 0000000..a4cc628 Binary files /dev/null and b/img/operEnvironment/xl2.png differ diff --git a/img/operEnvironment/xy.png b/img/operEnvironment/xy.png new file mode 100644 index 0000000..f6e0bd5 Binary files /dev/null and b/img/operEnvironment/xy.png differ diff --git a/img/operEnvironment/xy2.png b/img/operEnvironment/xy2.png new file mode 100644 index 0000000..addef26 Binary files /dev/null and b/img/operEnvironment/xy2.png differ diff --git a/img/operEnvironment/zhsh.png b/img/operEnvironment/zhsh.png new file mode 100644 index 0000000..e470fc9 Binary files /dev/null and b/img/operEnvironment/zhsh.png differ diff --git a/js/operEnvironment/operEnvironment.js b/js/operEnvironment/operEnvironment.js index 5139165..a7a729e 100644 --- a/js/operEnvironment/operEnvironment.js +++ b/js/operEnvironment/operEnvironment.js @@ -21,6 +21,8 @@ layui.use(['layer', 'element', 'table'], function () { GPSInstallationApi(); //实时监测 realTimeMonitoring(); + // 智慧手环-table + loadZhshTable(); }); //实时监测 @@ -81,7 +83,7 @@ function DaylightDisplacementList(deviceId){ elem: '#demo', url: url, skin: 'line', - height: 'full-480', + // height: 'full-700', headers:{ decrypt:"decrypt", "Authorization":token @@ -127,7 +129,7 @@ function DaylightDisplacementList(deviceId){ page: true, //开启分页 loading: true, //数据加载中。。。 limits: [5, 10, 20, 100], - limit: 7 + limit: 5 }) } @@ -177,11 +179,31 @@ function loadData(that){ DaylightDisplacementList(devId); } -function backData(){ - $('.right-down-left .item').each(function(){ - $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png") - }) - DaylightDisplacementList(''); +function backData(type){ + if(type === 1){ + $('.right-down-left .item').each(function(){ + $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png") + }) + DaylightDisplacementList(''); + }else if(type === 2){ + $('.environment .item').each(function(index, item){ + $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png") + if(index === 0){ + const devId = $(this).attr('dev-id'); + LimitedSpaceEnvironmentApi(devId); + } + }) + + }else if(type === 3){ + $('.environments .item').each(function(index,item){ + $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png") + if(index === 0){ + const devId = $(this).attr('dev-id'); + LimitedSpaGPSInstallationEnvironmentApiceEnvironmentApi(devId); + } + }) + } + } //和风天气API调用 @@ -482,48 +504,26 @@ function LimitedSpaceApi(){ } function LimitedSpace(environmentData) { - console.log(environmentData); -// 获取存放设备的父元素 - var environmentContainer = document.querySelector('.environment'); - var beforeId = "-1"; - - if(environmentData!=null && environmentData!='' && environmentData.length>0){ - LimitedSpaceEnvironmentApi(environmentData[0].deviceId); - } -// 遍历数据,生成设备元素并添加到页面中 - for (var i = 0; i < environmentData.length; i += 4) { - // 创建一个新的 div 作为一组设备信息的容器 - var groupElement = document.createElement('div'); - groupElement.style.width = '100%'; - groupElement.style.height = '50%'; - groupElement.style.display = 'flex'; - // 将每组四个设备信息添加到容器中 - for (var j = i; j < i + 4 && 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 = "device" + j; - deviceElement.addEventListener('click', function (obj) { - // 切换设备图片 - $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-normal.png')"); - if (beforeId !== "-1" && beforeId !== obj.target.id){ - // 恢复上一个设备的图片 - $("#" + beforeId).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-abnormal.png')"); - } - // 上一个设备的id - beforeId = obj.target.id; - LimitedSpaceEnvironmentApi(deviceId); - }); - groupElement.appendChild(deviceElement); + let html = ''; + $.each(environmentData, function (index, item) { + if(index === 0){ + LimitedSpaceEnvironmentApi(item.deviceId); } - // 将每组设备信息容器添加到父元素中 - environmentContainer.appendChild(groupElement); - } - + html += '
' + + '' + + '

'+item.deviceName+'

' + + '
'; + }) + $('.environment').empty().append(html); +} +function loadData2(that){ + const devId = $(that).attr('dev-id'); + $('.environment .item').each(function(){ + $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png") + }) + $(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png") + LimitedSpaceEnvironmentApi(devId); } function LimitedSpaceEnvironmentApi(deviceId){ @@ -587,49 +587,28 @@ function GPSInstallationApi(){ }, "application/json",aqEnnable); } -function -GPSInstallation(environmentData) { - console.log(environmentData); - if(environmentData && environmentData.length>0){ - GPSInstallationEnvironmentApi(environmentData[0].deviceId); - } -// 获取存放设备的父元素 - var environmentContainer = document.querySelector('.environments'); - var beforeIdss = "-1"; -// 遍历数据,生成设备元素并添加到页面中 - for (var i = 0; i < environmentData.length; i += 4) { - // 创建一个新的 div 作为一组设备信息的容器 - var groupElement = document.createElement('div'); - groupElement.style.width = '100%'; - groupElement.style.height = '50%'; - groupElement.style.display = 'flex'; - // 将每组四个设备信息添加到容器中 - for (var j = i; j < i + 4 && 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 = "devicess" + j; - deviceElement.addEventListener('click', function (obj) { - // 切换设备图片 - $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-normal.png')"); - if (beforeIdss !== "-1" && beforeIdss !== obj.target.id){ - // 恢复上一个设备的图片 - $("#" + beforeIdss).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-abnormal.png')"); - } - // 上一个设备的id - beforeIdss = obj.target.id; - GPSInstallationEnvironmentApi(deviceId); - }); - groupElement.appendChild(deviceElement); +function GPSInstallation(environmentData) { + let html = ''; + $.each(environmentData, function (index, item) { + if(index === 0){ + GPSInstallationEnvironmentApi(item.deviceId); } - // 将每组设备信息容器添加到父元素中 - environmentContainer.appendChild(groupElement); - } + html += '
' + + '' + + '

'+item.deviceName+'

' + + '
'; + }) + $('.environments').empty().append(html); +} +function loadData3(that){ + const devId = $(that).attr('dev-id'); + $('.environments .item').each(function(){ + $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png") + }) + $(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png") + GPSInstallationEnvironmentApi(devId); } function GPSInstallationEnvironmentApi(deviceId){ @@ -667,3 +646,47 @@ function GPSInstallationEnvironmentApi(deviceId){ }, "application/json",aqEnnable); } +/* 智慧手环-table */ +function loadZhshTable(){ + const url = commonUrl + "screen/largeScreen/operatingEnvironment/getUserShList"; + alarmTableIns = table.render({ + elem: '#zhsh-table', + url: url, + // skin: 'line', + // height: 'full', + headers:{ + decrypt:"decrypt", + "Authorization":token + }, + where: { + roleCode: roleCode, + orgId: orgId, + userId: userId, + bidCode: bidCode + }, + cols: [[ + {field: 'number', width:'5%',title: '序号', align: 'center', type: 'numbers', fixed: 'left'}, + {field: 'deviceName', title: '设备名称',width:'25%'}, + {field: 'userName', title: '姓名',width:'20%'}, + {field: 'xl', title: '心率',width:'15%'}, + {field: 'xy', title: '血压',width:'20%'}, + {field: 'wd', title: '温度',width:'15%'} + ]], + initComplete: function () { + // 在表格渲染完成后,重新渲染序号列 + var that = this.elem.next(); + var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table'); + tool.find("tr").each(function (index, item) { + $(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1); + }); + }, + done:function(res, curr, count, origin){ + console.log(res); + }, + page: true, //开启分页 + loading: true, //数据加载中。。。 + limits: [5, 10, 20, 100], + limit: 5 + }) + +} \ No newline at end of file diff --git a/js/pages/index/indexAjax.js b/js/pages/index/indexAjax.js index efcfe01..0c63280 100644 --- a/js/pages/index/indexAjax.js +++ b/js/pages/index/indexAjax.js @@ -222,6 +222,7 @@ function loadProRisk2(montageParam) { $('#fourClassNum').html(data.fourClassNum); $('#fiveClassNum').html(data.fiveClassNum); $('#totalClassNum').html(data.twoClassNum + data.threeClassNum + data.fourClassNum + data.fiveClassNum); + $('#weekDate').html("周风险("+data.weekDate + ")"); } } } \ No newline at end of file diff --git a/pages/index/index.html b/pages/index/index.html index 06d0320..37eb0f0 100644 --- a/pages/index/index.html +++ b/pages/index/index.html @@ -68,7 +68,10 @@
- + + + + diff --git a/pages/operEnvironment/operEnvironment.html b/pages/operEnvironment/operEnvironment.html index e19db2d..3079ed5 100644 --- a/pages/operEnvironment/operEnvironment.html +++ b/pages/operEnvironment/operEnvironment.html @@ -84,10 +84,10 @@
-
-
-
-
+
+
+
+
@@ -95,11 +95,20 @@
+
+
+
名称\风险等级周风险
名称/风险等级 二级 三级 四级
+
+
+
+
+
-
+
+
@@ -110,7 +119,8 @@
-
+
+