diff --git a/src/router/index.js b/src/router/index.js
index 76d57f1..6da0ad3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,4 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter,createWebHashHistory } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 import ScaleScreen from '@/layout/scaleScreen'
@@ -83,6 +83,12 @@ export const constantRoutes = [
         component: () => import("../views/screen/R_D_Environment/index.vue"),
         hidden: true
       },
+      {
+        path: "/screen/R_D_Environment1",
+        name: "R_D_Environment1",
+        component: () => import("../views/screen/R_D_Environment1/index.vue"),
+        hidden: true
+      },
     ]
   },
   {
@@ -176,7 +182,7 @@ export const dynamicRoutes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes: constantRoutes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
diff --git a/src/views/screen/R_D_Environment/component/proge.vue b/src/views/screen/R_D_Environment/component/proge.vue
index 3cf3110..e2bd78d 100644
--- a/src/views/screen/R_D_Environment/component/proge.vue
+++ b/src/views/screen/R_D_Environment/component/proge.vue
@@ -83,9 +83,16 @@ const options = computed(() => {
           color: '#33FFFF'
         },
         data: seriesData.map((item) => {
-          return {
+          let dataobj = {
             value: item
-          };
+          }
+          if (item > 100) {
+            dataobj.itemStyle = {
+              color: '#FF0000'
+            }
+            
+          }
+          return dataobj
         }),
         z: 10
       },
diff --git a/src/views/screen/R_D_Environment/index.vue b/src/views/screen/R_D_Environment/index.vue
index 548e2f0..a129739 100644
--- a/src/views/screen/R_D_Environment/index.vue
+++ b/src/views/screen/R_D_Environment/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="abs-header">研发中心环境实时监测系统</div>
+    <div class="abs-header" ref="texstref">研发中心环境实时监测系统</div>
     <div class="l-box">
       <div class="lbox1">
         <ItemVue title="温湿度监测">
@@ -93,12 +93,60 @@ import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/
 let noiseDataList = ref([
   {
     "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
-    "devName": "噪声监测7",
+    "devName": "办公区7",
     "label": "noise-7",
     "place": null,
-    "data": 0,
+    "data": 10,
     "status": 0
-  }
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
+    "devName": "办公区6",
+    "label": "noise-6",
+    "place": null,
+    "data": 20,
+    "status": 0
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e490",
+    "devName": "办公区5",
+    "label": "noise-5",
+    "place": null,
+    "data": 22,
+    "status": 0
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
+    "devName": "办公区4",
+    "label": "noise-4",
+    "place": null,
+    "data": 22,
+    "status": 0
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
+    "devName": "办公区3",
+    "label": "noise-3",
+    "place": null,
+    "data": 21,
+    "status": 0
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e492",
+    "devName": "办公区2",
+    "label": "noise-2",
+    "place": null,
+    "data": 24,
+    "status": 0
+  },
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e493",
+    "devName": "办公区1",
+    "label": "noise-1",
+    "place": null,
+    "data": 25,
+    "status": 0
+  },
 ])
 let sensor_list = reactive([
   {
@@ -186,7 +234,7 @@ let dustData = reactive({
   pm25: 0,
   pm10: 0,
 })
-
+let texstref = ref(null)
 let zd_config = ref({
   header: ['报警时间', '报警内容', '报警位置'],
   rowNum: 4,
@@ -338,12 +386,23 @@ function errWebsocket(val) {
   // console.log(val);
 }
 
-
+let deltaY = ref(0)
 onMounted(() => {
   getNoiseDataList()
   getTopDataList()
 
-
+  //监听滚动事件
+  // window.addEventListener('wheel', function (event) {
+  //   deltaY.value += event.deltaY
+  //   console.log(event.deltaY,deltaY.value,'event.deltaY');
+  //   if (deltaY.value <= -500 &&deltaY.value >= -1000) {
+  //     texstref.value.style.display = 'none'
+  //   }
+  //   if (deltaY.value > -500 && deltaY.value < 0) {
+  //     texstref.value.style.display = 'block'
+      
+  //   }
+  // }, { passive: false });
 
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 });
diff --git a/src/views/screen/R_D_Environment1/component/Lr1.vue b/src/views/screen/R_D_Environment1/component/Lr1.vue
new file mode 100644
index 0000000..92103f2
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Lr1.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="lr-box">
+                <div class="lr-title">{{ props.data.title }}</div>
+                <div class="lr-content">
+                    <TempHumiVue />
+                    <div class="avg-th">
+                        <div class="avg-th-title">当前平均温度</div>
+                        <div class="avg-th-value temp-color">{{props.data.temp}}℃</div>
+                    </div>
+                    <div class="avg-th">
+                        <div class="avg-th-title">当前平均湿度</div>
+                        <div class="avg-th-value humi-color">{{props.data.humi}}%RH</div>
+                    </div>
+                </div>
+            </div>
+</template>
+
+<script setup>
+import TempHumiVue from './temp_humi_icon.vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                title: '研发中心四楼',
+                temp: 25.5,
+                humi: 60
+            }
+        }
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.lr-box {
+            width: 100%;
+            height: 134px;
+            box-sizing: border-box;
+            position: relative;
+
+            .lr-title {
+                width: 100%;
+                height: 34px;
+                box-sizing: border-box;
+                background-image: url('./../image/u803.png');
+                background-position: top left;
+                background-repeat: no-repeat;
+                padding-left: 60px;
+                font-size: 25px;
+                color: #2affff;
+                text-align: left;
+                line-height: 34px;
+                font-weight: 700;
+            }
+            .lr-content {
+                width: 100%;
+                height: 100px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .avg-th {
+                    width: 40%;
+                    height: 34px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    .avg-th-title {
+                        font-size: 14px;
+                        color: #fff;
+                        font-weight: 700;
+                    }
+                    .temp-color {
+                        color: #2affff;
+                    }
+                    .humi-color {
+                        color: #ffd249;
+                    }
+                    .avg-th-value {
+                        font-size: 18px;
+                        font-weight: 700;
+                    }
+                }
+            }
+        }
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/Lr2.vue b/src/views/screen/R_D_Environment1/component/Lr2.vue
new file mode 100644
index 0000000..40bf10b
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Lr2.vue
@@ -0,0 +1,240 @@
+<template>
+    <div class="container2">
+        <div class="title">
+            <img :src="u918" alt="">
+            <span>温湿度监测</span>
+        </div>
+        <div class="content">
+            <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import u918 from './../image/u918.png';
+
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                Humiture: [],
+                bottom: {
+                    "temp": -15,
+                    "humidity": 15,
+                    "name": "温湿度下限值"
+                },
+                top: {
+                    "temp": 45,
+                    "humidity": 75,
+                    "name": "温湿度上限值"
+                }
+            }
+        }
+    }
+});
+
+const options = computed(() => {
+
+    let obj = {
+        bottom: prop.data.bottom,
+        top: prop.data.top
+    }
+    //x轴数据
+    let x = [];
+    //y轴数据
+    let y = { temp: [], humidity: [] };
+    prop.data.Humiture.forEach((res) => {
+        x.push(res.name);
+        y.temp.push(res.temp);
+        y.humidity.push(res.humidity);
+    });
+
+    return {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                type: "shadow",
+            },
+
+        },
+        legend: {
+            // bottom: "3%",
+            top: '2%'
+        },
+        backgroundColor: "transparent",
+        grid: {
+            top: "15%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+        },
+        color: ["#4992FF", "#7CFFB2", "#FF6E76"],
+        xAxis: {
+            type: "category",
+            data: x,
+            axisLabel: {
+                interval: 0,
+                rotate: 25,
+            }
+        },
+        yAxis: {
+            type: "value",
+            boundaryGap: [0, 0.01],
+            name:'(°C/%RH)',
+            axisLabel: {
+                formatter: "{value}",
+            },
+        },
+        series: [
+            {
+                name: `温度(°C)`,//(范围：${obj.bottom.temp}°C - ${obj.top.temp}°C)
+                type: "bar",
+                data: y.temp,
+                barWidth: '30%',
+                itemStyle: {
+                    color: function (params) {
+                        var index_color = params.value;
+                        if (
+                            index_color <= obj.bottom.temp ||
+                            index_color >= obj.top.temp
+                        ) {
+                            return "#FF6E76";
+                        } else {
+                            return "#4992FF";
+                        }
+                    },
+                },
+                label: {
+                    formatter: "{c} °C",
+                    show: false,
+                    position: "top",
+                    textStyle: {
+                        color: "rgb(255,255,255,0.9)",
+                    },
+                },
+                markLine: {
+                    // 设置最大值和最小值
+                    silent: true, //基线显示 隐藏
+                    symbol: "none", // 不显示箭头和圆点
+                    data: [
+                        {
+                            name: '温度',
+                            yAxis: obj.bottom.temp,
+                            label: {
+                                formatter: `温度下限值： ${obj.bottom.temp} °C`,
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "yellow", // 这儿设置安全基线颜色
+                            },
+                        },
+                        {
+                            name: '温度',
+                            yAxis: obj.top.temp,
+                            label: {
+                                formatter: `温度上限值：${obj.top.temp} °C`,
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "yellow", // 这儿设置安全基线颜色
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                name: `湿度(%RH)`,//(范围：${obj.bottom.humidity}%RH - ${obj.top.humidity}%RH)
+                type: "bar",
+                data: y.humidity,
+                barWidth: '30%',
+                itemStyle: {
+                    color: function (params) {
+                        var index_color = params.value;
+
+                        if (
+                            index_color <= obj.bottom.humidity ||
+                            index_color >= obj.top.humidity
+                        ) {
+                            return "#FF6E76";
+                        } else {
+                            return "#7CFFB2";
+                        }
+                    },
+                },
+                label: {
+                    formatter: "{c} %RH",
+                    show: false,
+                    position: "top",
+                    textStyle: {
+                        color: "rgb(255,255,255,0.9)",
+                    },
+                },
+                markLine: {
+                    // 设置最大值和最小值
+                    silent: true, //基线显示 隐藏
+                    symbol: "none", // 不显示箭头和圆点
+                    data: [
+                        {
+                            name: "湿度",
+                            yAxis: obj.bottom.humidity,
+                            label: {
+                                formatter: `湿度下限值：` + obj.bottom.humidity + "%RH",
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "red", // 这儿设置安全基线颜色
+                            },
+                        },
+                        {
+                            name: "湿度",
+                            yAxis: obj.top.humidity,
+                            label: {
+                                formatter: `湿度上限值：` + obj.top.humidity + "%RH",
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "red", // 这儿设置安全基线颜色
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                name: '超标',//(温湿度未达正常值均为超标)
+                type: "bar",
+                color: '#FF6E76'
+            }
+        ],
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+    width: 408px;
+    height: 272px;
+
+    .title {
+        width: 408px;
+        height: 35px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        span {
+            font-size: 20px;
+            color: #2affff;
+            font-weight: 700;
+            margin-left: 10px;
+        }
+    }
+    .content {
+        width: 100%;
+        height: 237px;
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/Lr3.vue b/src/views/screen/R_D_Environment1/component/Lr3.vue
new file mode 100644
index 0000000..d8278d2
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Lr3.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="container2">
+        <div class="title">
+            <img :src="u918" alt="">
+            <span>噪音监测</span>
+        </div>
+        <div class="content">
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+import u918 from './../image/u918.png';
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+    width: 408px;
+    height: 278px;
+
+    .title {
+        width: 408px;
+        height: 35px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        span {
+            font-size: 20px;
+            color: #2affff;
+            font-weight: 700;
+            margin-left: 10px;
+        }
+    }
+    .content {
+        width: 100%;
+        height: 243px;
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/Lr4.vue b/src/views/screen/R_D_Environment1/component/Lr4.vue
new file mode 100644
index 0000000..9f1f7ad
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Lr4.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="container2">
+        <div class="title">
+            <img :src="u918" alt="">
+            <span>甲醛/TVOC监测</span>
+        </div>
+        <div class="content">
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+import u918 from './../image/u918.png';
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+    width: 408px;
+    height: 290px;
+
+    .title {
+        width: 408px;
+        height: 35px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        span {
+            font-size: 20px;
+            color: #2affff;
+            font-weight: 700;
+            margin-left: 10px;
+        }
+    }
+    .content {
+        width: 100%;
+        height: 255px;
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/temp_humi_icon.vue b/src/views/screen/R_D_Environment1/component/temp_humi_icon.vue
new file mode 100644
index 0000000..f0b7223
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/temp_humi_icon.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="th-container">
+        <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px"
+            xmlns="http://www.w3.org/2000/svg"  class="svg1">
+            <g transform="matrix(1 0 0 1 -61 -136 )">
+                <path
+                    d="M 35.93451184846136 52.713638939642145  C 36.12334271529104 53.44934915784611  36.689835245706114 53.81720430107527  37.25632784619514 53.81720430107527  L 37.44515871302481 53.81720430107527  C 42.73242270395993 52.89756651125672  46.69787062708731 47.93152235068045  46.69787062708731 42.04584040028562  C 46.69787062708731 41.31013018208166  46.13137802659829 40.758347467237904  45.37605462935354 40.758347467237904  C 44.62073123210878 40.758347467237904  44.05423863161976 41.31013018208166  44.05423863161976 42.04584040028562  C 44.05423863161976 46.64402941763272  41.032944972566796 50.50650821677588  37.06749697936546 51.24221843497984  C 36.31217358212071 51.42614600659442  35.93451184846136 51.97792865318382  35.93451184846136 52.713638939642145  Z M 30.458417060770515 50.138653073546706  C 30.269586193940842 45.54046405619959  28.00361593213264 41.31013018208166  24 38.55121674437164  L 24 8.571024345808132  C 24.226998805760974 3.972835328461022  20.450381679389313 0.29428410093245916  15.729610288943224 0.29428410093245916  C 11.00883889849714 0.29428410093245916  7.232221772125477 3.972835328461021  8 8.571024345808132  L 8 37.815506526167674  C 2.889112115338741 40.574419963877695  0.24548011987118343 45.172608981224805  0.24548011987118343 50.138653073546706  C 0.24548011987118343 58.23146574680779  7.043390905295801 64.85285791540657  15.351948555283874 64.85285798366095  C 23.66050620527195 64.85285805191532  30.45841699069657 58.231465815062165  30.458417060770515 50.138653073546706  Z M 27.62595419847327 50.138653073546706  C 27.62595419847327 56.94397281376008  22.149859410782433 62.27787211756552  15.163117688454198 62.27787211756552  C 8.365206903029577 62.27787211756552  2.700281178435113 56.760045310399875  2.7002812485090626 50.13865307354671  C 2.7002812485090626 45.724391627814185  5.155082377146944 41.677985257056456  9.12053030027433 39.65478210580477  L 9.309361167104004 39.47085453419019  L 9.498192033933682 39.2869269625756  C 9.498192033933682 39.2869269625756  9.498192033933682 39.10299939096102  9.687022900763356 39.10299945921538  C 9.687022900763356 39.10299945921538  9.687022900763356 38.9190718876008  9.875853767593034 38.9190718876008  L 10 38.73514431598622  L 10 8.571024345808132  C 9.875853767593034 5.44425583312332  12.519485763060587 2.8692699670278903  15.729610288943224 2.8692699670278903  C 18.939734814825854 2.8692699670278903  21.583366810293413 5.44425583312332  21.583366810293413 8.571024345808132  L 21.583366810293413 12.801358219926076  L 17.051426286677 12.801358219926076  C 16.296102889432248 12.801358219926076  15.729610288943224 13.353140934769828  15.729610288943224 14.08885115297379  C 15.729610288943224 14.824561371177756  16.296102889432248 15.376344086021506  17.051426286677 15.376344086021506  L 21.583366810293413 15.376344086021506  L 21.583366810293413 21.26202603641633  L 17.051426286677 21.26202603641633  C 16.296102889432248 21.26202603641633  15.729610288943224 21.81380875126008  15.729610288943224 22.549518969464046  C 15.729610288943224 23.285229187668012  16.296102889432248 23.83701190251176  17.051426286677 23.83701190251176  L 21.583366810293413 23.83701190251176  L 21.583366810293413 29.170911138062834  L 17.051426286677 29.170911138062834  C 16.296102889432248 29.170911138062834  15.729610288943224 29.722693852906584  15.729610288943224 30.458404071110547  C 15.729610288943224 31.194114289314516  16.296102889432248 31.745897004158266  17.051426286677 31.745897004158266  L 21.583366810293413 31.745897004158266  L 21.583366810293413 38.73514431598622  C 21.394535943463737 39.10299945921538  21.583366810293413 39.65478210580477  21.96102854395276 39.83870967741935  L 22.149859410782437 40.022637249033934  C 25.548814803494746 42.2297679719002  27.62595419847327 46.09224677104336  27.62595419847327 50.138653073546706  Z "
+                    fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
+            </g>
+        </svg>
+        <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px"
+            xmlns="http://www.w3.org/2000/svg"  class="svg2">
+            <g transform="matrix(1 0 0 1 -89 -139 )">
+                <path
+                    d="M 26.7347368125 38.145126100221894  C 27.11368420312499 34.4702584469767  26.7347368125 32.44908126155695  25.787368406250007 29.876673965652735  C 25.597894710937503 29.876673965652735  25.597894710937503 29.876673965652735  25.787368406250007 29.876673965652735  L 12.524210507812501 3.233883496671594  C 11.576842101562496 1.3964497041420094  9.871578914062505 0.2939894149870526  7.976842101562506 0.2939894149870526  C 6.082105289062507 0.2939894149870526  4.376842101562501 1.396449704142008  3.429473695312507 3.233883496671594  L 0.2084210859375048 9.664901906897187  C -0.17052630468748817 10.216132085567674  0.2084210859375048 11.134848981832468  0.7768421015625062 11.31859230653661  C 1.345263187500006 11.686079092316938  2.2926315937500057 11.31859230653661  2.482105289062502 10.767362196052142  L 5.703157898437499 4.336343785826549  C 6.082105289062497 3.417626889561756  6.840000000000001 2.866396710891267  7.787368406249999 2.866396779077287  C 8.734736812500005 2.866396847263309  9.49263159375 3.4176269577477765  9.871578914062505 4.336343785826549  L 22.9452631875 30.97913425480769  C 23.892631593750007 33.1840548331176  24.271578984374997 35.021488693833206  24.271578914062495 37.96138277551775  C 24.271578914062495 47.88352537791235  16.882105218750006 55.96823425596338  7.787368406249999 55.968234187777355  L 6.082105289062507 55.968234187777355  C 5.324210578125005 55.968234187777355  4.755789492187504 56.335720973557684  4.566315796875003 57.07069447693231  C 4.566315796875003 57.80566798030694  4.945263187500001 58.35689815897744  5.703157898437499 58.5406415518676  C 6.271578984374998 58.5406415518676  7.029473695312502 58.724384944757766  7.5978947109374975 58.724384944757766  C 18.208421015625 58.724384944757766  26.7347368125 49.53721584573779  26.7347368125 38.145126100221894  Z "
+                    fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
+            </g>
+        </svg>
+        <img :src="u829" width="100" height="50" alt="" class="img1">
+    </div>
+</template>
+
+<script setup>
+import u829 from './../image/u829.png'
+</script>
+
+<style lang="scss" scoped>
+    .th-container {
+        width: 100px;
+        height: 100px;
+        position: relative;
+        .img1 {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+        .svg1 {
+            position: absolute;
+            top: 6px;
+            left: 23px;
+        }
+        .svg2 {
+            position: absolute;
+            top: 9px;
+            left: 49px;
+        }
+    }
+
+</style>
diff --git a/src/views/screen/R_D_Environment1/image/u796.png b/src/views/screen/R_D_Environment1/image/u796.png
new file mode 100644
index 0000000..e3c8e2b
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u796.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u797.png b/src/views/screen/R_D_Environment1/image/u797.png
new file mode 100644
index 0000000..faf592e
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u797.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u798.png b/src/views/screen/R_D_Environment1/image/u798.png
new file mode 100644
index 0000000..6f80e5b
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u798.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u799.png b/src/views/screen/R_D_Environment1/image/u799.png
new file mode 100644
index 0000000..c14b7d0
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u799.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u800.png b/src/views/screen/R_D_Environment1/image/u800.png
new file mode 100644
index 0000000..86c1ea4
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u800.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u801.png b/src/views/screen/R_D_Environment1/image/u801.png
new file mode 100644
index 0000000..4ec38d6
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u801.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u802.png b/src/views/screen/R_D_Environment1/image/u802.png
new file mode 100644
index 0000000..6635fb1
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u802.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u803.png b/src/views/screen/R_D_Environment1/image/u803.png
new file mode 100644
index 0000000..6ca45f9
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u803.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u810.svg b/src/views/screen/R_D_Environment1/image/u810.svg
new file mode 100644
index 0000000..fed3e51
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/image/u810.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -89 -139 )">
+    <path d="M 26.7347368125 38.145126100221894  C 27.11368420312499 34.4702584469767  26.7347368125 32.44908126155695  25.787368406250007 29.876673965652735  C 25.597894710937503 29.876673965652735  25.597894710937503 29.876673965652735  25.787368406250007 29.876673965652735  L 12.524210507812501 3.233883496671594  C 11.576842101562496 1.3964497041420094  9.871578914062505 0.2939894149870526  7.976842101562506 0.2939894149870526  C 6.082105289062507 0.2939894149870526  4.376842101562501 1.396449704142008  3.429473695312507 3.233883496671594  L 0.2084210859375048 9.664901906897187  C -0.17052630468748817 10.216132085567674  0.2084210859375048 11.134848981832468  0.7768421015625062 11.31859230653661  C 1.345263187500006 11.686079092316938  2.2926315937500057 11.31859230653661  2.482105289062502 10.767362196052142  L 5.703157898437499 4.336343785826549  C 6.082105289062497 3.417626889561756  6.840000000000001 2.866396710891267  7.787368406249999 2.866396779077287  C 8.734736812500005 2.866396847263309  9.49263159375 3.4176269577477765  9.871578914062505 4.336343785826549  L 22.9452631875 30.97913425480769  C 23.892631593750007 33.1840548331176  24.271578984374997 35.021488693833206  24.271578914062495 37.96138277551775  C 24.271578914062495 47.88352537791235  16.882105218750006 55.96823425596338  7.787368406249999 55.968234187777355  L 6.082105289062507 55.968234187777355  C 5.324210578125005 55.968234187777355  4.755789492187504 56.335720973557684  4.566315796875003 57.07069447693231  C 4.566315796875003 57.80566798030694  4.945263187500001 58.35689815897744  5.703157898437499 58.5406415518676  C 6.271578984374998 58.5406415518676  7.029473695312502 58.724384944757766  7.5978947109374975 58.724384944757766  C 18.208421015625 58.724384944757766  26.7347368125 49.53721584573779  26.7347368125 38.145126100221894  Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/screen/R_D_Environment1/image/u811.svg b/src/views/screen/R_D_Environment1/image/u811.svg
new file mode 100644
index 0000000..ee35de3
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/image/u811.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -61 -136 )">
+    <path d="M 35.93451184846136 52.713638939642145  C 36.12334271529104 53.44934915784611  36.689835245706114 53.81720430107527  37.25632784619514 53.81720430107527  L 37.44515871302481 53.81720430107527  C 42.73242270395993 52.89756651125672  46.69787062708731 47.93152235068045  46.69787062708731 42.04584040028562  C 46.69787062708731 41.31013018208166  46.13137802659829 40.758347467237904  45.37605462935354 40.758347467237904  C 44.62073123210878 40.758347467237904  44.05423863161976 41.31013018208166  44.05423863161976 42.04584040028562  C 44.05423863161976 46.64402941763272  41.032944972566796 50.50650821677588  37.06749697936546 51.24221843497984  C 36.31217358212071 51.42614600659442  35.93451184846136 51.97792865318382  35.93451184846136 52.713638939642145  Z M 30.458417060770515 50.138653073546706  C 30.269586193940842 45.54046405619959  28.00361593213264 41.31013018208166  24 38.55121674437164  L 24 8.571024345808132  C 24.226998805760974 3.972835328461022  20.450381679389313 0.29428410093245916  15.729610288943224 0.29428410093245916  C 11.00883889849714 0.29428410093245916  7.232221772125477 3.972835328461021  8 8.571024345808132  L 8 37.815506526167674  C 2.889112115338741 40.574419963877695  0.24548011987118343 45.172608981224805  0.24548011987118343 50.138653073546706  C 0.24548011987118343 58.23146574680779  7.043390905295801 64.85285791540657  15.351948555283874 64.85285798366095  C 23.66050620527195 64.85285805191532  30.45841699069657 58.231465815062165  30.458417060770515 50.138653073546706  Z M 27.62595419847327 50.138653073546706  C 27.62595419847327 56.94397281376008  22.149859410782433 62.27787211756552  15.163117688454198 62.27787211756552  C 8.365206903029577 62.27787211756552  2.700281178435113 56.760045310399875  2.7002812485090626 50.13865307354671  C 2.7002812485090626 45.724391627814185  5.155082377146944 41.677985257056456  9.12053030027433 39.65478210580477  L 9.309361167104004 39.47085453419019  L 9.498192033933682 39.2869269625756  C 9.498192033933682 39.2869269625756  9.498192033933682 39.10299939096102  9.687022900763356 39.10299945921538  C 9.687022900763356 39.10299945921538  9.687022900763356 38.9190718876008  9.875853767593034 38.9190718876008  L 10 38.73514431598622  L 10 8.571024345808132  C 9.875853767593034 5.44425583312332  12.519485763060587 2.8692699670278903  15.729610288943224 2.8692699670278903  C 18.939734814825854 2.8692699670278903  21.583366810293413 5.44425583312332  21.583366810293413 8.571024345808132  L 21.583366810293413 12.801358219926076  L 17.051426286677 12.801358219926076  C 16.296102889432248 12.801358219926076  15.729610288943224 13.353140934769828  15.729610288943224 14.08885115297379  C 15.729610288943224 14.824561371177756  16.296102889432248 15.376344086021506  17.051426286677 15.376344086021506  L 21.583366810293413 15.376344086021506  L 21.583366810293413 21.26202603641633  L 17.051426286677 21.26202603641633  C 16.296102889432248 21.26202603641633  15.729610288943224 21.81380875126008  15.729610288943224 22.549518969464046  C 15.729610288943224 23.285229187668012  16.296102889432248 23.83701190251176  17.051426286677 23.83701190251176  L 21.583366810293413 23.83701190251176  L 21.583366810293413 29.170911138062834  L 17.051426286677 29.170911138062834  C 16.296102889432248 29.170911138062834  15.729610288943224 29.722693852906584  15.729610288943224 30.458404071110547  C 15.729610288943224 31.194114289314516  16.296102889432248 31.745897004158266  17.051426286677 31.745897004158266  L 21.583366810293413 31.745897004158266  L 21.583366810293413 38.73514431598622  C 21.394535943463737 39.10299945921538  21.583366810293413 39.65478210580477  21.96102854395276 39.83870967741935  L 22.149859410782437 40.022637249033934  C 25.548814803494746 42.2297679719002  27.62595419847327 46.09224677104336  27.62595419847327 50.138653073546706  Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/screen/R_D_Environment1/image/u829.png b/src/views/screen/R_D_Environment1/image/u829.png
new file mode 100644
index 0000000..5399f82
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u829.png differ
diff --git a/src/views/screen/R_D_Environment1/image/u918.png b/src/views/screen/R_D_Environment1/image/u918.png
new file mode 100644
index 0000000..1fd6ab4
Binary files /dev/null and b/src/views/screen/R_D_Environment1/image/u918.png differ
diff --git a/src/views/screen/R_D_Environment1/index.vue b/src/views/screen/R_D_Environment1/index.vue
new file mode 100644
index 0000000..b0cffeb
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/index.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">研发中心环境实时监测系统</div>
+        </div>
+        <div class="left-content left-right" ref="leftContentRef">
+            <Lr1 :data="avg_temp_humi.four" />
+            <Lr2 :data="humi"/>
+            <Lr3 />
+            <Lr4 />
+        </div>
+        <div class="right-content left-right" ref="rightContentRef"></div>
+        <div class="bottom-content" ref="bottomContentRef"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import Lr1 from './component/Lr1.vue';
+import Lr2 from './component/Lr2.vue';
+import Lr3 from './component/Lr3.vue';
+import Lr4 from './component/Lr4.vue';
+
+let deltaY = ref(0)
+let avg_temp_humi = reactive({
+    four: {
+        title: '研发中心四楼',
+        temp: 25.5,
+        humi: 60
+    },
+    five: {
+        title: '研发中心五楼',
+        temp: 25.5,
+        humi: 60
+    }
+})
+
+let humi = ref({
+    "Humiture": [
+        {
+            "devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
+            "name": "服装军团",
+            "temp": "15.4",
+            "humidity": "14.6",
+            "status": true
+        },
+        {
+            "devId": "50633690-158f-11ee-b4df-a9653aef169c",
+            "name": "家纺军团",
+            "temp": "16.3",
+            "humidity": "54.1",
+            "status": false
+        },
+        {
+            "devId": "e07dee00-158f-11ee-b4df-a9653aef169c",
+            "name": "医防军团",
+            "temp": "15.2",
+            "humidity": "12.3",
+            "status": true
+        },
+        {
+            "devId": "5b01df20-158f-11ee-b4df-a9653aef169c",
+            "name": "配套中心",
+            "temp": "11.4",
+            "humidity": "20",
+            "status": true
+        },
+        {
+            "devId": "c524cfd0-4bb2-11ee-864d-e941de71fb47",
+            "name": "东气泵房",
+            "temp": "26.9",
+            "humidity": "10",
+            "status": true
+        },
+        {
+            "devId": "e7868a00-4bb2-11ee-864d-e941de71fb47",
+            "name": "西气泵房",
+            "temp": "34.4",
+            "humidity": "6",
+            "status": true
+        },
+        {
+            "devId": "7cd36740-158f-11ee-b4df-a9653aef169c",
+            "name": "东莞分公司",
+            "temp": "27.7",
+            "humidity": "38.9",
+            "status": false
+        },
+        {
+            "devId": "c502b660-158f-11ee-b4df-a9653aef169c",
+            "name": "东莞分公司",
+            "temp": "29.5",
+            "humidity": "56.3",
+            "status": false
+        },
+        {
+            "devId": "57d4bbc0-1bc9-11ee-93b4-8d0afc6a8fe9",
+            "name": "微工厂",
+            "temp": "14.7",
+            "humidity": "17.1",
+            "status": false
+        }
+    ],
+    "top": {
+        "temp": 45,
+        "humidity": 75,
+        "name": "温湿度上限值"
+    },
+    "bottom": {
+        "temp": -15,
+        "humidity": 15,
+        "name": "温湿度下限值"
+    }
+})
+
+
+onMounted(() => {
+    window.addEventListener('wheel', function (event) {
+        deltaY.value += event.deltaY
+        if (deltaY.value <= -500 && deltaY.value >= -1000) {
+
+            this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
+            this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
+            this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
+        }
+        if (deltaY.value > -500 && deltaY.value < 0) {
+            this.document.querySelector('.left-content').style.transform = 'translateX(0)'
+            this.document.querySelector('.right-content').style.transform = 'translateX(0)'
+            this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'
+
+        }
+
+        if (deltaY.value >= 0) {
+            deltaY.value = 0
+        }
+    }, { passive: false });
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 1920px;
+    height: 1080px;
+    position: relative;
+    // display: flex;
+    // justify-content: center;
+    align-items: center;
+    // background-image: url('/src/assets/images/gif-bg.gif');
+    background-repeat: no-repeat;
+    /* 如果你不想让背景平铺 */
+    background-size: cover;
+    /* 或者其他你需要的大小设置 */
+    background-position: center;
+
+    .header {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 72px;
+        background-image: url('./image/u796.png');
+
+        .title {
+            width: 100%;
+            height: 72px;
+            font-size: 36px;
+            color: #2affff;
+            text-align: center;
+            line-height: 60px;
+            font-weight: 700;
+        }
+    }
+
+    .left-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 557px;
+        height: 1080px;
+        box-sizing: border-box;
+        padding-top: 72px;
+        background-image: url('./image/u801.png'), url('./image/u797.png');
+        background-position: center, 0% 78%;
+        background-repeat: no-repeat, no-repeat;
+        padding-left: 30px;
+        transition: transform 1s;
+    }
+
+    .left-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-bottom: 30px;
+
+    }
+
+    .right-content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 557px;
+        height: 1080px;
+        box-sizing: border-box;
+        padding-top: 72px;
+        background-image: url('./image/u800.png'), url('./image/u798.png');
+        background-position: center, 100% 78%;
+        background-repeat: no-repeat, no-repeat;
+        padding-right: 38px;
+        transition: transform 1s;
+    }
+
+    .bottom-content {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1920px;
+        height: 236px;
+        background-image: url('./image/u799.png'), url('./image/u802.png');
+        background-position: bottom, 50% 100%;
+        background-repeat: no-repeat, no-repeat;
+        transition: transform 1s;
+    }
+}
+</style>