作业环境提交

.idea/.gitignore

@@ -0,0 +1,7 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# GitHub Copilot persisted chat sessions
+/copilot/chatSessions

.idea/ah_jjzhgd_webscreen.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,5 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ah_jjzhgd_webscreen.iml" filepath="$PROJECT_DIR$/.idea/ah_jjzhgd_webscreen.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

css/operEnvironment/operEnvironment.css

@@ -0,0 +1,407 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: #fff;
+    font-family: 'Alibaba PuHuiTi R', serif;
+}
+
+::-webkit-scrollbar
+{
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track-piece
+{
+    background-color: #0d2225;
+    -webkit-border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:vertical
+{
+    height: 5px;
+    background-color: #0d2225;
+    -webkit-border-radius: 6px;
+}
+::-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] {
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.layui-table {
+    width: 100%;
+    margin: 10px 0;
+    background-color: transparent;
+    color: white;
+}
+
+
+/* 表格头部背景色 */
+th {
+    background-color: #184B49; /* MediumSeaGreen */
+    color: #fff;
+    font-weight: bold
+}
+
+/*鼠标指向表格时,奇数行背景颜色*/
+.layui-table tbody tr:hover, .layui-table-hover {
+    background-color: #19b0b9;
+}
+
+.layui-laypage .layui-laypage-curr .layui-laypage-em {
+    background-color: #184B49;
+}
+
+.layui-laypage a:hover {
+    color: #184B49;
+}
+
+.layui-laypage .layui-laypage-skip {
+    color: #16534c;
+}
+
+.layui-laypage-count{
+    color:#184B49;
+}
+
+.layui-laypage button, .layui-laypage input {
+    background-color: transparent;
+    border: #184B49 1px solid;
+    color: #184B49;
+}
+
+.layui-table-view select[lay-ignore] {
+    background-color: transparent;
+    border: #184B49 1px solid;
+    color: #184B49;
+}
+
+.layui-table-page .layui-laypage span {
+    color: #184B49;
+}
+
+.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
+    color: #184B49;
+}
+
+/**公共类**/
+.layout{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.layout-vertical{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.background-img{
+    width: 100%;
+    height: 100%;
+    padding: 9% 2% 2% 2%;
+    box-sizing: border-box;
+    background-position: center center !important;
+    flex-direction: column;
+    justify-content: space-between;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.right-under-left .background-img:nth-child(1){
+    padding: 4% 2% 2% 2%;
+}
+
+.right-down .background-img:nth-child(1){
+    padding: 3% 1% 1% 1%;
+}
+
+.Weather-img{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-position: center center !important;
+    flex-direction: column;
+    justify-content: space-between;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+/**主体部分**/
+.large-frame{
+    width: 100%;
+    height: 100%;
+    justify-content: space-evenly;
+
+}
+
+.left{
+    width: 22%;
+    height: 99%;
+}
+
+.right{
+    width: 75%;
+    height: 99%;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
+.left-down{
+    width: 100%;
+    height: 52%;
+}
+
+.right-down{
+    width: 100%;
+    height: 52%;
+}
+
+.left-under{
+    width: 100%;
+    height: 46%;
+}
+
+.right-under-left{
+    width: 49.5%;
+    height: 100%;
+}
+
+.right-under-right{
+    width: 49.5%;
+    height: 100%;
+}
+
+.Weather-layout{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.Weather-down{
+    width: 100%;
+    height: 55%;
+    display: flex;
+    /*border: #0a84ff 1px solid;*/
+}
+
+.weather-down-left{
+    width: 55%;
+    height: 100%;
+    padding: 11% 0 0 15%;
+    box-sizing: border-box;
+    background-position: center center !important;
+}
+
+.substance{
+    display: flex;
+    width: 80%;
+    height: 50%;
+    padding-top: 8%;
+}
+
+.substance1{
+    width: 33%;
+    height: 50%;
+    box-sizing: border-box;
+    background-position: center center !important;
+    flex-direction: column;
+    justify-content: space-between;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.substance2{
+    display: flex;
+    flex-direction: column;
+    padding-left: 7%;
+}
+
+.weather-down-right{
+    display: flex;
+    width: 45%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.weather-box{
+    width: 78%;
+    height: 24%;
+    border: #00FFF4 1px solid;
+    margin: 0 auto;
+}
+
+.state-box{
+    width: 100%;
+    height: 20%;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+}
+
+.state{
+    display: flex;
+    width: 15%;
+    height: 41%;
+    margin-right: 5%;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.state-box .state:nth-child(1) {
+    border: #00FFF4 1px solid;
+    color: #00FFF4;
+}
+
+.state-box .state:nth-child(2) {
+    border: #e24e3b 1px solid;
+    color: #e24e3b;
+}
+
+.monitor-data {
+    width: 28%;
+    height: 83%;
+    margin-top: 3%;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.monitor-data p:nth-child(1) span:nth-child(1) {
+    font-size: 24px;
+    color: #79FFFFFF;
+    font-weight: bold;
+}
+
+.monitor-data p:nth-child(1) span:nth-child(2) {
+    margin-left: 5px;
+    color: #79FFFFFF;
+}
+
+.monitor-icon {
+    width: 100%;
+    height: 60%;
+}
+
+.monitor-data:nth-child(1) .monitor-icon {
+    background: url("../../img/index/wd.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+
+}
+
+.monitor-data:nth-child(2) .monitor-icon {
+    background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.monitor-data:nth-child(3) .monitor-icon {
+    background: url("../../img/index/zs.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.monitor-data:nth-child(4) .monitor-icon {
+    background: url("../../img/index/gz.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.monitor-data:nth-child(5) .monitor-icon {
+    background: url("../../img/index/pm2.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.monitor-data:nth-child(6) .monitor-icon {
+    background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.environment{
+    overflow: auto;
+    width: 100%;
+    height: 60%;
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*justify-content: space-between;*/
+    /*align-items: center;*/
+
+}
+
+.environment-equipment {
+    width: 100%;
+    height: 100%;
+}
+
+.right-down-left .environment-equipment:nth-child(1) {
+    background: url("../../img/operEnvironment/边坡位移监测-异常.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.right-down-left .environment-equipment:nth-child(2) {
+    background: url("../../img/operEnvironment/边坡位移监测-正常.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.environment .environment-equipment:nth-child(1) {
+    background: url("../../img/operEnvironment/有限空间监测-正常.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.environment .environment-equipment:nth-child(2) {
+    background: url("../../img/operEnvironment/有限空间监测-正常.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.environment .environment-equipment:nth-child(3) {
+    background: url("../../img/operEnvironment/有限空间监测-正常.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    background-size: initial;
+}
+
+.environment .environment-equipment:nth-child(4) {
+     background: url("../../img/operEnvironment/有限空间监测-正常.png") no-repeat 0 0 / 100% 100%;
+     background-position: center center !important;
+     background-size: initial;
+ }
+
+
+.Weather-under{
+    width: 100%;
+    height: 45%;
+    /*border: #591212 1px solid;*/
+}
+
+.right-down-left{
+    width: 20%;
+    height: 100%;
+    overflow: auto;
+
+}
+
+.right-down-right{
+    width: 80%;
+    height: 100%;
+    overflow: auto;
+}

js/operEnvironment/operEnvironment.js

@@ -0,0 +1,228 @@
+let element, layer;
+layui.use(['layer', 'element', 'table'], function () {
+    element = layui.element;
+    layer = layui.layer;
+    var table = layui.table;
+    var data = [
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
+        {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
+    ];
+    table.render({
+        elem: '#demo',
+        data: data,
+        skin: 'line',
+        page: true,
+        cols: [[
+            {field: 'id', title: '排名'},
+            {field: 'proName', title: '工程名称'},
+            {field: 'teamName', title: '班组名称'},
+            {field: 'teamLeader', title: '班组长'},
+            {field: 'quality', title: '施工质量'},
+        ]]
+    })
+
+    connect2();
+
+});
+
+
+//天气echarts图表
+function connect2(){
+    var myChart = echarts.init(document.getElementById('weather_time'));
+    var option = {
+        grid: {
+            show: true,
+            backgroundColor: 'transparent',
+            opacity: 0.3,
+            borderWidth: '0',
+            top: '150',
+            bottom: '0'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            show: false
+        },
+        xAxis: [
+            // 日期
+            {
+                type: 'category',
+                boundaryGap: false,
+                position: 'top',
+                offset: 100,
+                zlevel: 100,
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {
+                    interval: 0,
+                    formatter: [
+                        '{a|{value}}'
+                    ].join('\n'),
+                    rich: {
+                        a: {
+                            color: 'white',
+                            fontSize: 11
+                        }
+                    }
+                },
+                nameTextStyle: {
+
+                },
+                data: ["25日","26日","27日","28日","29日","30日","31日"]
+            },
+            // 天气图标
+            {
+                type: 'category',
+                boundaryGap: false,
+                position: 'top',
+                offset: 20,
+                zlevel: 100,
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {
+                    interval: 0,
+                    formatter: function(value, index) {
+                        return '{' + index + '| }\n{b|' + value + '}'
+                    },
+                    rich: {
+                        0: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        1: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        2: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        3: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        4: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        5: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        6: {
+                            backgroundColor: {
+                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
+                                image: '../../img/operEnvironment/多云.png'
+                            },
+                            height: 30,
+                            width: 30
+                        },
+                        b: {
+                            color: 'white',
+                            fontSize: 12,
+                            lineHeight: 30,
+                            height: 20
+                        }
+                    }
+                },
+                nameTextStyle: {
+                    fontWeight: 'bold',
+                    fontSize: 19
+                },
+                // data: this.weatherdata.weather
+                data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
+            }
+        ],
+        yAxis: {
+            type: 'value',
+            show: false,
+            axisLabel: {
+                formatter: '{value} °C',
+                color: 'white'
+            }
+        },
+        series: [
+            {
+                name: '最高气温',
+                type: 'line',
+                data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
+                symbol: 'emptyCircle',
+                symbolSize: 10,
+                showSymbol: true,
+                smooth: true,
+                itemStyle: {
+                    normal: {
+                        color: '#C95843'
+                    }
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: 'white',
+                    formatter: '{c} °C'
+                },
+                lineStyle: {
+                    width: 1,
+                    // shadowOffsetY: -10,
+                    // color: 'white'
+                },
+                areaStyle: {
+                    opacity: 1,
+                    // shadowOffsetY: -10,
+                    color: 'transparent'
+                }
+            }
+        ]
+    }
+
+    myChart.setOption(option);
+}

pages/operEnvironment/operEnvironment.html

@@ -3,9 +3,172 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/operEnvironment/operEnvironment.css">
+    <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
+    <script src="../../js/publics/public.js"></script>
+    <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
+    <script src="../../js/publics/echarts.js"></script>
+    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
+    <script src="../../js/operEnvironment/operEnvironment.js"></script>
     <title>作业环境</title>
 </head>
 <body>
-    作业环境
+    <div class="large-frame layout">
+        <div class="left layout-vertical">
+            <div class="left-down">
+                <div class="background-img" style="background-image: url('../../img/operEnvironment/天气预报.png');">
+                    <div class="Weather-layout">
+                        <div class="Weather-down">
+                            <div class="weather-down-left">
+                                <div style="font-size: 18px;">合肥</div>
+                                <div class="substance">
+                                    <div class="substance1" style="background-image: url('../../img/operEnvironment/晴.png');"></div>
+                                    <div class="substance2">
+                                        <div style="font-size: 28px;">15° <span style="font-size: 15px;">晴</span></div>
+                                        <div style="font-size: 10px;">合肥市 蜀山区</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="weather-down-right">
+                                <div class="weather-box"></div>
+                                <div class="weather-box"></div>
+                                <div class="weather-box"></div>
+                            </div>
+                        </div>
+                        <div id="weather_time" class="Weather-under"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="left-under">
+                <div class="background-img" style="background-image: url('../../img/operEnvironment/实时监测.png');">
+                    <div style="display: flex;width: 100%;height: 100%;flex-direction: column;">
+                        <div class="state-box">
+                            <div class="state">正常</div>
+                            <div class="state">异常</div>
+                        </div>
+                        <div class="layout" style="width: 100%;height: 40%;">
+                            <div class="layout monitor-data">
+                                <p><span>45</span><span>℃</span></p>
+                                <p>温度</p>
+                                <div class="monitor-icon"></div>
+                            </div>
+                            <div class="layout monitor-data">
+                                <p><span>45</span><span>%</span></p>
+                                <p>湿度</p>
+                                <div class="monitor-icon"></div>
+                            </div>
+                            <div class="layout monitor-data">
+                                <p><span>45</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">
+                                <p><span>45</span><span>kwh</span></p>
+                                <p>光照</p>
+                                <div class="monitor-icon"></div>
+                            </div>
+                            <div class="layout monitor-data">
+                                <p><span>45</span><span>μg/m³</span></p>
+                                <p>PM2.5</p>
+                                <div class="monitor-icon"></div>
+                            </div>
+                            <div class="layout monitor-data">
+                                <p><span>45</span><span>μg/m³</span></p>
+                                <p>PM10</p>
+                                <div class="monitor-icon"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right layout-vertical">
+            <div class="right-down">
+                <div class="background-img" style="background-image: url('../../img/operEnvironment/边坡位移监测.png');">
+                    <div class="layout" style="width: 100%;height: 100%;">
+                        <div class="right-down-left">
+                            <div style="display: flex;width: 100%;height: 25%;">
+                                <div class="environment-equipment"></div>
+                                <div class="environment-equipment"></div>
+                            </div>
+                            <div style="display: flex;width: 100%;height: 25%;">
+                                <div class="environment-equipment"></div>
+                                <div class="environment-equipment"></div>
+                            </div>
+                            <div style="display: flex;width: 100%;height: 25%;">
+                                <div class="environment-equipment"></div>
+                                <div class="environment-equipment"></div>
+                            </div>
+                            <div style="display: flex;width: 100%;height: 25%;">
+                                <div class="environment-equipment"></div>
+                                <div class="environment-equipment"></div>
+                            </div>
+                            <div style="display: flex;width: 100%;height: 25%;">
+                                <div class="environment-equipment"></div>
+                                <div class="environment-equipment"></div>
+                            </div>
+                        </div>
+                        <div class="right-down-right">
+                            <table id="demo" lay-filter="test"></table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="left-under layout">
+                <div class="right-under-left">
+                    <div class="background-img" style="background-image: url('../../img/operEnvironment/有限空间监测.png');">
+                        <div class="layout-vertical" style="width: 100%;height: 100%;">
+                            <div class="layout" style="width: 100%;height: 40%">
+                                <div class="layout monitor-data">
+                                    <p><span>45</span><span>℃</span></p>
+                                    <p>温度</p>
+                                    <div class="monitor-icon"></div>
+                                </div>
+                                <div class="layout monitor-data">
+                                    <p><span>45</span><span>%</span></p>
+                                    <p>湿度</p>
+                                    <div class="monitor-icon"></div>
+                                </div>
+                                <div class="layout monitor-data">
+                                    <p><span>45</span><span>分贝</span></p>
+                                    <p>噪声</p>
+                                    <div class="monitor-icon"></div>
+                                </div>
+                            </div>
+                            <div class="environment">
+                                <div style="width: 100%;height: 50%;display: flex">
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                </div>
+                                <div style="width: 100%;height: 50%;display: flex">
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                </div>
+                                <div style="width: 100%;height: 50%;display: flex">
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                    <div class="environment-equipment"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="right-under-right">
+                    <div class="background-img" style="background-image: url('../../img/operEnvironment/GPS安装监测.png');">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>