首页

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%;
 }

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 += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData2(this)">' +
+        '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' + 
+        '<p>'+item.deviceName+'</p>' + 
+        '</div>'; 
+    })
+    $('.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 += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData3(this)">' +
+        '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' + 
+        '<p>'+item.deviceName+'</p>' + 
+        '</div>'; 
+    })
+    $('.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
+    })
+
+}

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 + "）");
         }
     }
 }

pages/index/index.html

@@ -68,7 +68,10 @@
             <div id="pro-risk">
                 <table>
                     <tr>
-                        <td>名称\风险等级</td>
+                        <td colspan="6" id="weekDate">周风险</td>
+                    </tr>
+                    <tr>
+                        <td>名称/风险等级</td>
                         <td>二级</td>
                         <td>三级</td>
                         <td>四级</td>

pages/operEnvironment/operEnvironment.html

@@ -84,10 +84,10 @@
             </div>
         </div>
         <div class="right layout-vertical">
-            <div class="right-down">
-                <div class="background-img" style="background-image: url('../../img/operEnvironment/cjjc.png');">
-                    <div id="backData" onclick="backData()"></div>
-                    <div class="layout" style="width: 100%;height: calc(100% - 50px);">
+            <div class="right-down layout">
+                <div class="background-img" style="width: 49.3%;background-image: url('../../img/operEnvironment/cjjc.png');">
+                    <div class="backData" onclick="backData(1)"></div>
+                    <div class="layout" style="width: 100%;height: calc(100% - 50px);flex-direction: column;">
                         <div class="right-down-left">
                         </div>
                         <div class="right-down-right">
@@ -95,11 +95,20 @@
                         </div>
                     </div>
                 </div>
+                <div id="zhsh" class="layout">
+                    <div id="zhsh-table-box">
+                        <table id="zhsh-table" lay-filter="zhsh-table"></table>
+                    </div>
+                    <div id="zhsh-info-box" class="layout">
+                        <div id="zhsh-user-box"></div>
+                    </div>
+                </div>
             </div>
             <div class="left-under layout">
                 <div class="right-under-left">
                     <div class="background-img" style="background-image: url('../../img/operEnvironment/LimitedMonitoring.png');">
-                        <div class="layout-vertical" style="width: 100%;height: 100%;">
+                        <div class="backData" onclick="backData(2)"></div>
+                        <div class="layout-vertical" style="width: 100%;height: calc(100% - 50px);">
                             <div class="environment">
                             </div>
                             <!--有限空间-->
@@ -110,7 +119,8 @@
                 </div>
                 <div class="right-under-right">
                     <div class="background-img" style="background-image: url('../../img/operEnvironment/GPS.png');">
-                        <div class="layout-vertical" style="width: 100%;height: 100%;">
+                        <div class="backData" onclick="backData(3)"></div>
+                        <div class="layout-vertical" style="width: 100%;height: calc(100% - 50px);">
                             <div class="environments">
                             </div>
                             <div class="layout" id="gisId" style="width: 100%;height: 40%">