From e66f93fc5df8e758c4f5c9096229b897eac292f1 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Thu, 16 Jan 2025 17:07:27 +0800
Subject: [PATCH] update

---
 .../screen/R_D_Environment1/component/Lr3.vue |  81 +++-
 .../screen/R_D_Environment1/component/Lr4.vue |  65 ++-
 .../component/Popover/index.vue               |  61 +++
 .../R_D_Environment1/component/Progress.vue   |  64 +++
 .../R_D_Environment1/component/Sence.vue      | 385 ++++++++++++++++++
 .../component/SensorNumLoop.vue               |  93 +++++
 .../R_D_Environment1/component/svgFenchen.vue |  37 ++
 .../R_D_Environment1/component/svgJiaquan.vue |  36 ++
 .../R_D_Environment1/component/svgPm10.vue    |  36 ++
 .../R_D_Environment1/component/svgPm25.vue    |  36 ++
 .../R_D_Environment1/component/svgShidu.vue   |  36 ++
 .../R_D_Environment1/component/svgTVOC.vue    |  36 ++
 .../R_D_Environment1/component/svgWendu.vue   |  36 ++
 .../R_D_Environment1/component/svgYanwu.vue   |  34 ++
 .../component/svgZaosheng.vue                 |  39 ++
 src/views/screen/R_D_Environment1/index.vue   | 303 +++++++++++++-
 16 files changed, 1366 insertions(+), 12 deletions(-)
 create mode 100644 src/views/screen/R_D_Environment1/component/Popover/index.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/Progress.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/Sence.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/SensorNumLoop.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgFenchen.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgJiaquan.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgPm10.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgPm25.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgShidu.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgTVOC.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgWendu.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgYanwu.vue
 create mode 100644 src/views/screen/R_D_Environment1/component/svgZaosheng.vue

diff --git a/src/views/screen/R_D_Environment1/component/Lr3.vue b/src/views/screen/R_D_Environment1/component/Lr3.vue
index d8278d2..ceb2efa 100644
--- a/src/views/screen/R_D_Environment1/component/Lr3.vue
+++ b/src/views/screen/R_D_Environment1/component/Lr3.vue
@@ -1,23 +1,69 @@
 <template>
-  <div class="container2">
+    <div class="container2">
         <div class="title">
             <img :src="u918" alt="">
             <span>噪音监测</span>
         </div>
         <div class="content">
-
+            <div class="public-box">
+                <svg t="1737006052368" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                    xmlns="http://www.w3.org/2000/svg" p-id="1941" width="48" height="48">
+                    <path
+                        d="M704 672a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z m96-64a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v128a32 32 0 0 1-32 32z m-480 96a32 32 0 0 1-32-32V352a32 32 0 1 1 64 0v320a32 32 0 0 1-32 32z m96 128a32 32 0 0 1-32-32V224a32 32 0 1 1 64 0v576a32 32 0 0 1-32 32z m96-128a32 32 0 0 1-32-32V352a32 32 0 1 1 64 0v320a32 32 0 0 1-32 32z m96-96a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v128a32 32 0 0 1-32 32zM224 608a32 32 0 0 1-32-32v-128a32 32 0 1 1 64 0v128a32 32 0 0 1-32 32z"
+                        fill="#2affff" p-id="1942"></path>
+                </svg>
+                <div class="text-label">
+                    <div class="label-left">{{ prop.public_list.devName }}</div>
+                    <div class="label-right"><i class="value">{{ prop.public_list.data }}</i> dB</div>
+                </div>
+            </div>
+            <Progress v-for="item in prop.office_list" :mdoelValue1="item" />
         </div>
     </div>
 </template>
 
 <script setup>
+import { ref, computed, watch } from 'vue';
 import u918 from './../image/u918.png';
+import Progress from './Progress.vue';
+const prop = defineProps({
+    public_list: {
+        type: Array,
+        default: () => {
+            return {
+                "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
+                "devName": "公共区域1",
+                "label": "noise-7",
+                "place": null,
+                "data": 0,
+                "status": 0
+            }
+        }
+    },
+    office_list: {
+        type: Array,
+        default: () => {
+            return [
+                {
+                    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
+                    "devName": "办公区2",
+                    "label": "noise-7",
+                    "place": null,
+                    "data": 0,
+                    "status": 0
+                }]
+        }
+    },
+});
+
+
+
 </script>
 
 <style lang="scss" scoped>
 .container2 {
     width: 408px;
-    height: 278px;
+    height: 310px;
 
     .title {
         width: 408px;
@@ -33,9 +79,36 @@ import u918 from './../image/u918.png';
             margin-left: 10px;
         }
     }
+
     .content {
         width: 100%;
-        height: 243px;
+        height: 275px;
+
+        .public-box {
+            width: 100%;
+            height: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .text-label {
+                width: 50%;
+                height: 100%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                font-size: 16px;
+                color: #fff;
+                box-sizing: border-box;
+
+                .label-right {
+                    color: #2affff;
+                    .value {
+                        //color: #fff;
+                    }
+                }
+            }
+        }
     }
 }
 </style>
diff --git a/src/views/screen/R_D_Environment1/component/Lr4.vue b/src/views/screen/R_D_Environment1/component/Lr4.vue
index 9f1f7ad..8371195 100644
--- a/src/views/screen/R_D_Environment1/component/Lr4.vue
+++ b/src/views/screen/R_D_Environment1/component/Lr4.vue
@@ -1,23 +1,79 @@
 <template>
-  <div class="container2">
+    <div class="container2">
         <div class="title">
             <img :src="u918" alt="">
             <span>甲醛/TVOC监测</span>
         </div>
         <div class="content">
-
+            <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
         </div>
     </div>
 </template>
 
 <script setup>
 import u918 from './../image/u918.png';
+import { computed } from 'vue';
+
+const prop = defineProps({
+    option: {
+        type: Object,
+        default: () => {
+            return {
+                xData: [],
+                seriesData: [],
+            }
+        }
+    }
+})
+
+const options = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                name: '甲醛',
+                type: 'line',
+                areaStyle: {
+                    opacity: 0.3
+                },
+                data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: 'TVOC',
+                type: 'line',
+                areaStyle: {
+                    opacity: 0.3
+                },
+                data: [220, 182, 191, 234, 290, 330, 310]
+            }
+        ]
+    };
+})
 </script>
 
 <style lang="scss" scoped>
 .container2 {
     width: 408px;
-    height: 290px;
+    height: 268px;
 
     .title {
         width: 408px;
@@ -33,9 +89,10 @@ import u918 from './../image/u918.png';
             margin-left: 10px;
         }
     }
+
     .content {
         width: 100%;
-        height: 255px;
+        height: 222px;
     }
 }
 </style>
diff --git a/src/views/screen/R_D_Environment1/component/Popover/index.vue b/src/views/screen/R_D_Environment1/component/Popover/index.vue
new file mode 100644
index 0000000..eaa8c02
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Popover/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="popover"
+    :style="{
+      'top': props.top + 'px',
+      'left': props.left + 'px',
+      'display': isShow ? 'inline-block' : 'none'
+    }"
+  >
+    <div class="popover-title">
+      {{ dataRef.name }}
+    </div>
+    <div class="popover-content">
+      {{ 'content' }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Popover">
+import { ref } from 'vue';
+type PropsTypes = {
+  top: number;
+  left: number;
+};
+
+const props = withDefaults(defineProps<PropsTypes>(), {
+  top: 0,
+  left: 0,
+});
+
+const isShow = ref(false);
+const dataRef = ref<any>({});
+
+const setShow = (visible: boolean, data?: any) => {
+  isShow.value = visible;
+  if (data) dataRef.value = data;
+};
+
+defineExpose({
+  setShow,
+});
+</script>
+
+<style scoped>
+.popover {
+  position: absolute;
+  background-color: rgb(29 78 216 / 0.6);
+  /* background-image: url('/src/assets/images/preview-bottom.png'); */
+  border-radius: 5px;
+  font-size: 0.2rem;
+  color: #fff;
+  font-size: 30px;
+}
+.popover-title {
+  padding: 12px;
+  border-bottom: 1px solid #fff;
+}
+.popover-content {
+  padding: 24px;
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/Progress.vue b/src/views/screen/R_D_Environment1/component/Progress.vue
new file mode 100644
index 0000000..6fd1a78
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Progress.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="progress-container">
+    <div class="text-label">
+        <div class="label-left">{{ prop.mdoelValue1.devName }}</div>
+        <div class="label-right"><i class="value">{{ prop.mdoelValue1.data }}</i> dB</div>
+    </div>
+    <div class="progress">
+        <el-progress :percentage="percentage" stroke-width="8" :color="checkCb(prop.mdoelValue1)" :show-text="false"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref,computed } from 'vue';
+
+const prop = defineProps({
+    mdoelValue1:{
+        type: Object,
+        default: () => {
+            return {
+                devName: '办公区1噪音',
+                data: 10,
+            }
+        }
+    }
+    
+})
+const percentage = computed(() => {
+    return prop.mdoelValue1.data > 100 ? 100 : prop.mdoelValue1.data;
+})
+
+//检测是否超标
+function checkCb(item) {
+   if (item.data > 85) {
+    return '#FF0000'
+  } else {
+    return '#469DE9'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.progress-container {
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
+    padding-right: 30px;
+    .text-label {
+        width: 100%;
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+        color: #2affff;
+        box-sizing: border-box;
+        .label-right {
+            .value {
+                color: #fff;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/Sence.vue b/src/views/screen/R_D_Environment1/component/Sence.vue
new file mode 100644
index 0000000..d3d55b3
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/Sence.vue
@@ -0,0 +1,385 @@
+<template>
+  <div id="three"></div>
+  <Popover ref="popoverRef" :top="popoverTop" :left="popoverLeft" :data="popoverData"></Popover>
+</template>
+
+<script lang="ts" setup name="Sence">
+/* eslint-disable */
+import { ref, onMounted, type Ref } from 'vue';
+import Viewer, { type Animate } from '@/modules/Viewer';
+import Floors from '@/modules/Floors';
+import ModelLoader from '@/modules/ModelLoder';
+import * as THREE from 'three';
+import gsap from 'gsap';
+import Event from '@/modules/Viewer/Events';
+import BoxHelperWrap from '@/modules/BoxHelperWrap';
+import { checkNameIncludes, findParent } from '@/utils/threejs';
+
+import Popover from './Popover/index.vue';
+
+let viewer: Viewer;
+let modelLoader: ModelLoader;
+let boxHelperWrap: BoxHelperWrap;
+
+const popoverRef: Ref = ref(null);
+const popoverTop = ref(0);
+const popoverLeft = ref(0);
+const popoverData = ref<any>({});
+
+let office: any = null;
+let oldOffice: any = null;
+let dataCenter: any = null;
+let oldDataCenter: any = null;
+let modelSelect = ['zuo0', 'zuo1', 'zuo2', 'zuo3', 'zuo4', 'zuo5'];
+let modelSelectName = '';
+let modelMoveName = '';
+let isModelSelectName = false;
+
+
+onMounted(() => {
+  init();
+  initModel();
+
+  viewer.scene.traverse((item: THREE.Object3D) => {
+    console.log(item, '0000000000');
+  });
+});
+
+const init = () => {
+  viewer = new Viewer('three',{width: 1920, height: 1080});
+  // viewer.addAxis();
+  // viewer.addStats();
+  viewer.initRaycaster();
+
+  modelLoader = new ModelLoader(viewer);
+  // const floors = new Floors(viewer);
+  // floors.addGird();
+
+  boxHelperWrap = new BoxHelperWrap(viewer);
+
+  viewer.emitter.on(Event.dblclick.raycaster, (list: THREE.Intersection[]) => {
+    onMouseClick(list);
+  });
+
+  viewer.emitter.on(Event.mousemove.raycaster, (list: THREE.Intersection[]) => {
+    onMouseMove(list);
+  });
+
+};
+
+const initModel = () => {
+  // modelLoader.loadModelToScene('/models/zuo.glb', baseModel => {
+  //   console.log(baseModel, '1111111');
+
+  //   baseModel.setScalc(0.01);
+  //   const model = baseModel.gltf.scene;
+  //   office = baseModel;
+  //   office.object.rotation.y = Math.PI;
+  //   office.object.position.set(2, 0, 0);
+  //   // model.position.set(80, 2, 90);
+  //   office.object.children.forEach((item: any) => {
+  //     item.name = item.name.replace('zuo', '');
+  //     if (item.name === 'ding') {
+  //       item.name = 6;
+  //     }
+  //     item.name--;
+  //   });
+  //   office.object.children.sort((a: { name: number; }, b: { name: number; }) => a.name - b.name).forEach((v: { name: string; }) => {
+  //     v.name = 'zuo' + v.name;
+  //   });
+
+  //   model.name = '办公楼';
+  //   baseModel.openCastShadow();
+  //   oldOffice = model.clone();
+
+  //   const list: THREE.Object3D<THREE.Event>[] = [];
+  //   model.traverse(item => {
+  //     list.push(item);
+  //   });
+  //   viewer.setRaycasterObjects(list);
+  // });
+
+  modelLoader.loadModelToScene('/models/plane.glb', baseModel => {
+    const model = baseModel.gltf.scene;
+    model.scale.set(0.01 * 3, 0.01 * 3, 0.01 * 3)
+    model.name = 'plane';
+    baseModel.openCastShadow();
+
+    const texture = (baseModel.object.children[0] as any).material.map;
+    // console.log(baseModel,baseModel.object.children[0], 'texture-------2222');
+    const fnOnj = planeAnimate(texture);
+    viewer.addAnimate(fnOnj);
+  });
+
+
+  let objUrl = {
+    mtlUrl: '/obj/goats_R&D.mtl',
+    objUrl: '/obj/goats_R&D.obj',
+  }
+  modelLoader.ladObjModelToScene(objUrl, baseModel => {
+    var scale = 0.07 / baseModel.scale.x;
+    baseModel.scale.set(scale, scale, scale);
+    const box = new THREE.Box3().setFromObject(baseModel);
+    const size = box.getSize(new THREE.Vector3())
+    // // console.log(size,'-----');
+    baseModel.position.set(-size.x * 0.5, -size.y * 0.1+2, -size.z * 0.5);
+    // baseModel.children.forEach((child) => {
+    //   const c = child;
+    //   const cm = c.material;
+    //   cm.emissive = cm.color;
+    //   cm.emissiveMap = cm.map;
+    // });
+    
+    baseModel.name = '再登研发中心';
+    dataCenter = baseModel;
+    oldDataCenter = baseModel.clone();
+
+    const rackList: any[] = [];
+    baseModel.traverse(item => {
+      
+      if (checkIsRack(item)) {
+        rackList.push(item);
+      }
+    });
+    // console.log(baseModel,rackList, 'rackList------111');
+
+    viewer.setRaycasterObjects(rackList);
+    
+  });
+
+
+  // modelLoader.loadModelToScene('/models/datacenter.glb', baseModel => {
+  //   console.log(baseModel, '1111111');
+  //   baseModel.setScalc(0.2);
+  //   // baseModel.object.rotation.y = Math.PI / 2;
+  //   const model = baseModel.gltf.scene;
+  //   model.position.set(0, 0, 0);
+  //   model.name = '机房';
+  //   baseModel.openCastShadow();
+
+  //   dataCenter = baseModel;
+  //   oldDataCenter = model.clone();
+
+  //   const rackList: any[] = [];
+  //   model.traverse(item => {
+  //     if (checkIsRack(item)) {
+  //       rackList.push(item);
+  //     }
+  //   });
+  //   // console.log(rackList, 'rackList------');
+
+  //   viewer.setRaycasterObjects(rackList);
+
+  // });
+};
+
+const planeAnimate = (texture: any): Animate => {
+  console.log(texture, 'texture');
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  const animateFn = {
+    fun: () => {
+      const count = texture.repeat.y;
+      if (count <= 10) {
+        texture.repeat.x += 0.01;
+        texture.repeat.y += 0.02;
+      } else {
+        texture.repeat.x = 0;
+        texture.repeat.y = 0;
+      }
+    },
+    content: viewer,
+  };
+  return animateFn;
+}
+
+const onMouseClick = (intersects: THREE.Intersection[]) => {
+  if (!intersects.length) return;
+  const selectedObject = intersects[0].object;
+
+  let selectedObjectName = '';
+  const findClickModel = (object: any) => {
+    console.log(object, 'object');
+    if (object.type === 'Group') {
+      selectedObjectName = object.name;
+    }
+    if (object.parent && object.type !== 'Scene') {
+      findClickModel(object.parent);
+    }
+  };
+  findClickModel(selectedObject);
+  console.log(selectedObjectName);
+
+  // if (!selectedObjectName || !selectedObjectName.includes('办公楼')) {
+  //   // this.scene.remove(this.label);
+  //   return;
+  // }
+
+  // const selectedModel = viewer.scene.getObjectByName(selectedObjectName);
+  console.log(selectedObject, 'selectedObject');
+
+  // 点击楼房
+  if (selectedObject.name.includes('zuo')) {
+
+    selectOffice(selectedObject.parent);
+  }
+
+  // 点击其他区域
+  if (!selectedObject.name.includes('zuo')) {
+    if (!isModelSelectName && oldOffice) {
+      let oldmodel = oldOffice.getObjectByName(modelMoveName);
+      office.object.getObjectByName(modelMoveName).traverse(function (child: { isMesh: any; material: any; name: any; }) {
+        if (child.isMesh) {
+          child.material = oldmodel.getObjectByName(child.name).material;
+        }
+      });
+    }
+  }
+};
+
+function checkIsRack(obj: any): boolean {
+  return checkNameIncludes(obj, 'Door');
+}
+
+const onMouseMove = (intersects: THREE.Intersection[]) => {
+  if (!intersects.length) {
+    popoverRef.value.setShow(false);
+    boxHelperWrap.setVisible(false);
+    return;
+  }
+  const selectedObject = intersects[0].object || {};
+
+
+  let selectedObjectName = '';
+  const findClickModel = (object: any) => {
+    if (object.name.includes('Door')) {
+      selectedObjectName = object.name;
+      return;
+    }
+    if (object.parent) {
+      findClickModel(object.parent);
+    }
+  };
+
+  // const findClickModel = (object: any) => {
+  //   if (object.name.includes('zuo')) {
+  //     selectedObjectName = object.name;
+  //     return;
+  //   }
+  //   if (object.parent) {
+  //     findClickModel(object.parent);
+  //   }
+  // };
+  findClickModel(selectedObject);
+
+  console.log(selectedObjectName, '--selectedObjectName---');
+  console.log(selectedObject, '------selectedObject---------');
+  const rack = findParent(selectedObject, checkIsRack);
+  console.log(rack, '-------rack---------');
+  if (rack) {
+
+    boxHelperWrap.attach(rack);
+    updateRackInfo(rack.name);
+  }
+
+  // if (!selectedObjectName || !selectedObjectName.includes('办公楼')) {
+  //   // 重置模型
+  //   // viewer.scene.children[viewer.scene.children.findIndex(o => o.name === '办公楼')] = office.object = oldOffice.clone();
+  //   return;
+  // }
+
+
+  modelSelect.forEach((item: any) => {
+    if (item === selectedObject.parent?.name) {
+      modelMoveName = item;
+      if (modelSelectName === modelMoveName) return;
+      office.object.getObjectByName(item).traverse(function (child: { isMesh: any; material: THREE.MeshPhongMaterial; }) {
+        if (child.isMesh) {
+          child.material = new THREE.MeshPhongMaterial({
+            side: THREE.DoubleSide,
+            transparent: true,
+            depthTest: false,
+            depthWrite: true, // 无法被选择，鼠标穿透
+            color: 'yellow',
+            opacity: 0.3,
+          });
+        }
+      });
+    } else {
+      if (!isModelSelectName && oldOffice) {
+        let oldmodel = oldOffice.getObjectByName(item);
+        office.object.getObjectByName(item).traverse(function (child: { isMesh: any; material: any; name: any; }) {
+          if (child.isMesh) {
+            child.material = oldmodel.getObjectByName(child.name).material;
+          }
+        });
+      }
+    }
+  });
+
+};
+
+const updateRackInfo = (name: string) => {
+  if (name) {
+    popoverRef.value.setShow(true, { name });
+    const event = viewer.mouseEvent as MouseEvent;
+    popoverTop.value = event.y + 10;
+    popoverLeft.value = event.x + 10;
+  } else {
+    popoverRef.value.setShow(false);
+
+  }
+};
+
+const selectOffice = (model: any) => {
+  modelSelectName = model.name;
+  let oldmodel = oldOffice.getObjectByName(modelSelectName);
+  let modelSelectIndex = modelSelect.findIndex(v => v === modelSelectName);
+  office.object.children.forEach((child: any, index: number) => {
+    child.children.forEach((Mesh: any) => {
+      if (child.name === modelSelectName) {
+        child.children.forEach((Mesh: { material: any; name: any; }) => {
+          Mesh.material = oldmodel.getObjectByName(Mesh.name).material;
+        });
+      } else {
+        // Mesh.material = new THREE.MeshPhongMaterial({
+        //   color: new THREE.Color('#123ca8'),
+        //   transparent: true,
+        //   opacity: 0.5,
+        //   emissiveMap: Mesh.material.map,
+        // });
+      }
+    });
+    if (!model.userData.position && index > modelSelectIndex) {
+      gsap.to(child.position, {
+        y: !child.userData.position ? child.position.y + 60 : child.position.y,
+        duration: 2,
+        ease: "power1.inOut",
+        onComplete: () => {
+          child.userData.position = true;
+        },
+      });
+    }
+    if (model.userData.position && index <= modelSelectIndex) {
+      if (child.userData.position) {
+        gsap.to(child.position, {
+          y: oldOffice.getObjectByName(child.name).position.y,
+          duration: 2,
+          ease: "power1.inOut",
+          onComplete: () => {
+            child.userData.position = false;
+          },
+        });
+      }
+    }
+  });
+};
+
+</script>
+
+<style scoped>
+#three {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/SensorNumLoop.vue b/src/views/screen/R_D_Environment1/component/SensorNumLoop.vue
new file mode 100644
index 0000000..e09d30c
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/SensorNumLoop.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="sensor-item">
+    <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
+    <component style="width: 60px;height: 60px;margin-top: 10px;" :is="componentmap[prop.sensorData.component]"
+      :value="prop.sensorData.list[i].value" :color="checkCb(prop.sensorData.list[i])" :unit="prop.sensorData.unit" />
+    <!-- prop.sensorData.status == 'true'?'#469DE9':'gray' -->
+
+    <div style="margin: 10px 0">{{prop.sensorData.list[i].status=== 'false' ? '——' :prop.sensorData.list[i].value + prop.sensorData.unit }}</div>
+    <div>{{ prop.sensorData.list[i].name }}</div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import SvgPm25 from './svgPm25.vue';
+import SvgPm10 from './svgPm10.vue';
+import SvgJiaquan from './svgJiaquan.vue';
+import SvgZaosheng from './svgZaosheng.vue';
+import SvgTVOC from './svgTVOC.vue';
+import SvgShidu from './svgShidu.vue';
+import SvgWendu from './svgWendu.vue';
+import SvgYanwu from './svgYanwu.vue';
+
+const prop = defineProps({
+  sensorData: {
+    type: Object,
+    default: () => {
+      return {
+        unit: 'ug/m³',
+        limit: 35,
+        component: 'SvgPm25',
+        list: [
+          {
+            name: 'PM2.5',
+            status: 'true',
+            value: 0,
+          }
+        ]
+
+      }
+    }
+  }
+})
+const i = ref(0)
+let timer = null
+const componentmap = {
+  'SvgPm25': SvgPm25,
+  'SvgPm10': SvgPm10,
+  'SvgJiaquan': SvgJiaquan,
+  'SvgZaosheng': SvgZaosheng,
+  'SvgTVOC': SvgTVOC,
+  'SvgShidu': SvgShidu,
+  'SvgWendu': SvgWendu,
+  'SvgYanwu': SvgYanwu
+}
+
+//检测是否超标
+function checkCb(item) {
+  if (item.status === 'false') {
+    return 'gray'
+  } else if (item.value > prop.sensorData.limit) {
+    return '#FF0000'
+  } else {
+    return '#469DE9'
+  }
+}
+
+onMounted(() => {
+  timer = setInterval(() => {
+    i.value++;
+    if (i.value >= prop.sensorData.list.length) {
+      i.value = 0;
+    }
+  }, 5000);
+})
+</script>
+
+<style lang="scss" scoped>
+.sensor-item {
+  width: 120px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+
+  .sensor-icon {
+    width: 60px;
+    height: 60px;
+  }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgFenchen.vue b/src/views/screen/R_D_Environment1/component/svgFenchen.vue
new file mode 100644
index 0000000..2440279
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgFenchen.vue
@@ -0,0 +1,37 @@
+<template>
+    <svg t="1730769272802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="1039" width="256" height="256" :fill="prop.color">
+        <path
+            d="M378.105721 356.776833a62.282417 62.282417 0 0 0-0.01338-63.076668 62.287282 62.287282 0 0 0-55.100101-30.706985c-33.842635 0.76506-60.877578 28.426402-60.867847 62.273902 0.00973 33.852366 27.053187 61.499113 60.895823 62.245928a62.275119 62.275119 0 0 0 55.085505-30.736177zM751.756435 356.776833a62.27147 62.27147 0 0 0-55.114696-93.783653c-33.842635 0.76506-60.877578 28.426402-60.867848 62.273902 0.00973 33.852366 27.058053 61.499113 60.900688 62.245928a62.275119 62.275119 0 0 0 55.081856-30.736177zM540.953941 325.271948c0-17.199853-13.940139-31.139992-31.138776-31.139993-17.194987 0-31.135127 13.940139-31.135127 31.139993 0 17.193771 13.940139 31.133911 31.135127 31.13391 17.198636 0 31.138776-13.940139 31.138776-31.13391zM323.020216 761.162508a62.279984 62.279984 0 0 0 55.085505-30.731312 62.282417 62.282417 0 0 0-0.01338-63.076667 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867847 62.273903 0.00973 33.848717 27.053187 61.495464 60.895823 62.241062zM696.675795 761.162508a62.27147 62.27147 0 0 0 55.066045-93.807979 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867848 62.273903 0.00973 33.848717 27.058053 61.495464 60.901904 62.241062zM478.680038 698.922662c0 17.194987 13.940139 31.135127 31.135127 31.135127 17.198636 0 31.138776-13.940139 31.138776-31.135127 0-17.201069-13.940139-31.141208-31.138776-31.141208-17.194987 0-31.135127 13.940139-31.135127 31.141208zM665.502963 512.093656c0 17.199853 13.945005 31.139992 31.139992 31.139992 17.199853 0 31.139992-13.940139 31.139992-31.139992 0-17.193771-13.940139-31.133911-31.139992-31.133911-17.196204 0-31.139992 13.940139-31.139992 31.133911zM291.852248 512.093656c0 17.199853 13.940139 31.139992 31.139992 31.139992 17.194987 0 31.135127-13.940139 31.135127-31.139992 0-17.193771-13.940139-31.133911-31.135127-31.133911-17.199853 0-31.139992 13.940139-31.139992 31.133911zM448.952183 512.093656c0.003649 33.852366 27.053187 61.495464 60.895822 62.245928a62.27147 62.27147 0 0 0 55.08064-30.736177 62.273903 62.273903 0 0 0-55.11348-93.78487c-33.838986 0.766276-60.872713 28.422754-60.862982 62.275119z"
+            p-id="1040"></path>
+        <path
+            d="M970.857819 318.763468c-25.181285-59.281778-61.204765-112.580522-107.052389-158.434228-45.863436-45.863436-99.171911-81.883267-158.441526-107.059687a491.752072 491.752072 0 0 0-193.366677-39.291708c-83.403656 0-171.837974 23.574538-249.031147 66.383817-12.851541 7.89629-13.060747 22.976113-9.240314 33.865745 4.075858 5.958707 9.962803 9.099222 17.056328 9.099222 4.884705 0 9.996859-1.525254 14.800071-4.404261l0.437872-0.261507 0.451252-0.246911c72.839996-38.846538 148.71712-58.544693 225.534452-58.544694 249.379012 0 452.256024 202.881878 452.256024 452.253591 0 249.377795-202.877012 452.259673-452.256024 452.259673-249.376579 0-452.253591-202.881878-452.253591-452.259673 0-76.807602 19.694506-152.694457 58.534963-225.516207l0.246911-0.460982 0.266372-0.441521c7.265025-12.110808 1.772165-26.726-7.739387-33.862096-2.365725-1.7673-5.702066-2.038537-7.47423-2.038537-8.798793 0-18.591312 5.578002-23.351953 13.289413-42.808063 77.198038-66.383817 165.632356-66.383818 249.02993a491.870054 491.870054 0 0 0 39.292924 193.370327c25.18615 59.280562 61.195035 112.575657 107.058471 158.437876 45.858571 45.859787 99.163397 81.873537 158.434228 107.056039a491.843295 491.843295 0 0 0 193.36911 39.292924 491.928437 491.928437 0 0 0 193.359379-39.283194c59.273264-25.18615 112.57809-61.196251 158.441526-107.059687 45.858571-45.858571 81.871104-99.16218 107.052389-158.435444 26.07649-61.365319 39.292924-126.433087 39.292925-193.367894s-13.216434-131.995277-39.294141-193.370326z"
+            p-id="1041" class="border"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg) ;
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgJiaquan.vue b/src/views/screen/R_D_Environment1/component/svgJiaquan.vue
new file mode 100644
index 0000000..df05aa3
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgJiaquan.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1730777236728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="1648" width="256" height="256" :fill="prop.color">
+        <path
+            d="M512 22.26087A488.136348 488.136348 0 0 0 165.709913 165.709913 488.136348 488.136348 0 0 0 22.26087 512a488.136348 488.136348 0 0 0 143.449043 346.290087A488.136348 488.136348 0 0 0 512 1001.73913a488.136348 488.136348 0 0 0 346.290087-143.449043A488.136348 488.136348 0 0 0 1001.73913 512a488.136348 488.136348 0 0 0-143.449043-346.290087A488.136348 488.136348 0 0 0 512 22.26087m0-22.26087c282.779826 0 512 229.220174 512 512S794.779826 1024 512 1024 0 794.779826 0 512 229.220174 0 512 0z"
+             p-id="1649"></path>
+        <path
+            d="M748.477217 625.775304a57.677913 57.677913 0 0 0-35.328 12.198957l-73.928347-42.674087a130.715826 130.715826 0 0 0-80.339479-165.954783v-69.565217a84.057043 84.057043 0 1 0-87.485217-5.075478v74.551652a130.715826 130.715826 0 0 0-80.339478 165.954782l-73.928348 42.674087a57.566609 57.566609 0 1 0 18.18713 23.04l68.140522-39.379478a131.027478 131.027478 0 0 0 223.187478 0l68.140522 39.379478a57.655652 57.655652 0 0 0-4.786087 23.04 58.301217 58.301217 0 1 0 58.434783-58.212174z m-247.874782-258.226087a80.740174 80.740174 0 0 0 29.184 1.424696v53.648696a124.14887 124.14887 0 0 0-29.117218 0v-55.073392z m14.558608 287.47687a102.066087 102.066087 0 1 1 102.110609-102.021565 102.066087 102.066087 0 0 1-102.110609 101.954782z"
+             p-id="1650" class="border"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgPm10.vue b/src/views/screen/R_D_Environment1/component/svgPm10.vue
new file mode 100644
index 0000000..0d9e375
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgPm10.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1731979776030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="15886" width="256" height="256" :fill="prop.color">
+        <path
+            d="M507.44 955.95a438.912 438.912 0 0 1-172.62-35.08c-52.91-22.48-100.5-54.63-141.43-95.57-40.94-40.94-73.09-88.52-95.57-141.44a439.09 439.09 0 0 1-35.08-172.62c0-74.45 21.05-153.39 59.26-222.31 4.25-6.88 12.99-11.86 20.85-11.86 1.58 0 4.56 0.24 6.67 1.82 8.49 6.37 13.39 19.42 6.91 30.23l-0.24 0.39-0.22 0.41c-34.67 65.01-52.25 132.75-52.25 201.32 0 222.62 181.11 403.73 403.73 403.73s403.73-181.11 403.73-403.73c0-222.61-181.11-403.73-403.73-403.73-68.57 0-136.31 17.58-201.33 52.26l-0.4 0.22-0.39 0.23c-4.29 2.57-8.85 3.93-13.21 3.93-6.33 0-11.59-2.8-15.23-8.12-3.41-9.72-3.22-23.18 8.25-30.23C354.05 87.58 433 66.54 507.45 66.54a438.912 438.912 0 0 1 172.62 35.08c52.91 22.48 100.5 54.63 141.44 95.57 40.93 40.93 73.09 88.51 95.57 141.43 23.28 54.79 35.08 112.87 35.08 172.62s-11.8 117.84-35.08 172.62c-22.48 52.91-54.63 100.5-95.57 141.43-40.94 40.94-88.53 73.09-141.44 95.57a438.83 438.83 0 0 1-172.63 35.09z m0 0"
+            p-id="15887" class="border"></path>
+        <path
+            d="M327.36 460.82c0 22.16 18.05 40.64 39.71 40.64s39.73-18.57 39.73-40.64c3.62-25.85-18.05-40.61-39.73-40.61s-39.71 18.44-39.71 40.61z m377.59-94.43c-14.46 0-25.3 11.09-25.3 22.16 3.62 11.07 14.46 22.16 25.3 22.16 14.43 0 25.27-11.09 25.27-22.16s-10.84-22.16-25.27-22.16z m-110.23 18.29c21.68 0 39.73-18.56 39.73-40.61s-18.06-40.61-39.73-40.61c-21.67 0-39.73 18.57-39.73 40.61-3.6 22.09 14.46 40.54 39.73 40.54v0.07zM429.23 395.7c18.08 0 36.11-14.78 36.11-33.23 0-18.45-14.43-33.21-36.11-33.21-18.06 0-36.11 14.76-36.11 33.23s14.46 33.21 36.11 33.21z m178.99 95.33c0 18.57 14.46 33.23 36.11 33.23 18.05 0 36.11-14.78 36.11-33.23 0-18.45-14.43-33.23-36.11-33.23-17.96 0-36.11 14.76-36.11 33.23z m-89.64-3.02c18.05 0 28.89-14.87 28.89-29.54s-14.43-29.43-28.89-29.43c-18.05 0-28.89 14.64-28.89 29.43 0 14.78 14.45 29.54 28.89 29.54z m178.2 63.15c-3.88 0-7.77 0-9.7 2-77.74 55.51-147.71 15.85-149.66 13.92-145.76-91.25-242.9 5.85-242.9 5.85a10.313 10.313 0 0 0-3.88 7.94c0.47 2.98 1.81 5.75 3.88 7.96 3.9 5.96 11.6 3.97 17.5 0 1.95-3.97 81.62-81.22 209.9-1.97 1.95 1.97 33.05 19.82 77.74 19.82 29.15 0 66.07-7.91 102.99-33.7a14.953 14.953 0 0 0 1.95-17.85 10.057 10.057 0 0 0-7.82-3.97z m-383.26-185a29.21 29.21 0 0 0 20.56-8.77c5.42-5.54 8.41-13 8.33-20.75 0.19-16.14-12.73-29.39-28.87-29.59a29.227 29.227 0 0 0-28.89 29.54 29.22 29.22 0 0 0 8.3 20.77 29.22 29.22 0 0 0 20.57 8.8z m57.14 267.22h-32.77v95.15h22.49v-31.52h10.91c19.7 0 36.9-9.98 36.9-32.65 0.04-23.55-16.95-30.98-37.53-30.98z m-0.49 45.58h-9.79v-27.52h9.17c10.79 0 16.8 3.34 16.8 12.93 0 9.58-5.27 14.59-16.18 14.59z m103.92-4.48c-1.76 5.5-3.27 11.6-5.15 17.41h-0.63c-1.76-5.87-3.27-11.91-5.15-17.41l-14.81-41.1h-24.23v95.15h20.08v-32.61c-0.39-11.05-1.35-22.07-2.88-33.02h0.51l7.52 22.79 12.67 34.81h12.3l12.56-34.81 7.77-22.79h0.51a320.218 320.218 0 0 0-2.88 33.02v32.72h20.38V633.5h-24.27l-14.3 40.98z m101.23-41.1h-16.45a62.13 62.13 0 0 1-23.21 8.59v14.09h17.2v54.14h-19.82v18.45H592V710.2h-16.69v-76.82z m62.66-1.79c-19.68 0-33 16.13-33 48.9 0 32.77 13.32 49.94 33 49.94s33.14-17.15 33.14-49.94c-0.01-32.79-13.42-48.9-33.14-48.9z m0 81.23c-6.64 0-11.9-6.15-11.9-32.28 0-26.13 5.27-31.35 11.9-31.35 6.64 0 12.07 5.38 12.07 31.35 0 25.97-5.41 32.23-12.07 32.23v0.05z m0 0"
+            p-id="15888"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgPm25.vue b/src/views/screen/R_D_Environment1/component/svgPm25.vue
new file mode 100644
index 0000000..d0e8095
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgPm25.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1731979377696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="4643" width="256" height="256" :fill="prop.color">
+        <path
+            d="M510.24 954.86a438.195 438.195 0 0 1-172.33-35.02c-52.82-22.44-100.33-54.54-141.2-95.41-40.87-40.87-72.97-88.37-95.41-141.2A438.195 438.195 0 0 1 66.28 510.9c0-74.33 21.01-153.14 59.16-221.94 4.24-6.87 12.97-11.84 20.81-11.84 1.58 0 4.55 0.24 6.66 1.82 8.48 6.36 13.37 19.39 6.9 30.18l-0.24 0.39-0.22 0.41c-34.62 64.9-52.17 132.53-52.17 200.98 0 222.25 180.81 403.06 403.06 403.06S913.3 733.15 913.3 510.9c0-222.24-180.81-403.06-403.06-403.06-68.46 0-136.08 17.56-201 52.18l-0.4 0.22-0.39 0.23c-4.28 2.57-8.84 3.93-13.19 3.93-6.32 0-11.57-2.8-15.2-8.11-3.4-9.71-3.22-23.14 8.24-30.18 68.8-38.15 147.61-59.16 221.94-59.16a438.16 438.16 0 0 1 172.33 35.02c52.82 22.44 100.33 54.54 141.2 95.41 40.86 40.87 72.97 88.37 95.41 141.2 23.24 54.7 35.02 112.68 35.02 172.33s-11.78 117.64-35.02 172.33c-22.44 52.82-54.54 100.33-95.41 141.2-40.87 40.87-88.38 72.97-141.2 95.41a438.362 438.362 0 0 1-172.33 35.01z m0 0"
+            p-id="4644" class="border"></path>
+        <path
+            d="M314.61 465.3c0 22.12 18.02 40.53 39.63 40.53 21.61 0 39.66-18.51 39.66-40.53 3.61-25.8-18.02-40.54-39.66-40.54-21.64 0.01-39.63 18.33-39.63 40.54z m376.86-94.32c-14.41-0.09-25.13 10.93-25.13 22.03 3.61 11.05 14.41 22.1 25.22 22.1 14.43 0 25.25-11.05 25.25-22.1s-10.91-22.12-25.34-22.12v0.09z m-110 18.25c21.63 0 39.66-18.53 39.66-40.54 0-22-18.02-40.54-39.66-40.54-21.63 0-39.63 18.53-39.63 40.54-3.61 22.01 14.41 40.44 39.63 40.44v0.1z m-165.15 11.05c18.02 0 36.04-14.73 36.04-33.17s-14.43-33.26-36.04-33.26c-18.02 0-36.04 14.75-36.04 33.17 0 18.41 14.41 33.17 36.04 33.17v0.09z m178.63 95.13c0 18.53 14.43 33.17 36.04 33.17 18.02 0 36.04-14.75 36.04-33.17 0-18.41-14.41-33.17-36.04-33.17-17.92-0.04-36.04 14.64-36.04 33.17z m-89.48-3.03c18.02 0 28.84-14.73 28.84-29.49 0-14.76-14.41-29.46-28.84-29.46-18.02 0-28.84 14.73-28.84 29.46s14.43 29.44 28.84 29.44v0.05z m177.87 63.05c-3.87 0-7.76 0-9.68 1.97-77.6 55.41-147.46 15.84-149.38 13.9-145.49-91.12-242.45 5.84-242.45 5.84a10.358 10.358 0 0 0-3.87 7.92c0.47 2.97 1.81 5.73 3.87 7.92 3.89 5.93 11.58 3.96 17.46 0 1.95-3.96 81.46-81.07 209.51-1.97 1.95 1.97 32.98 19.78 77.6 19.78 29.09 0 65.95-7.92 102.82-33.65a14.92 14.92 0 0 0 1.92-17.79 9.92 9.92 0 0 0-7.8-3.96v0.04zM300.8 370.73c16.1-0.18 29.01-13.37 28.84-29.46a29.16 29.16 0 0 0-28.82-29.53c-16.1 0.19-29.01 13.38-28.84 29.49a29.1 29.1 0 0 0 8.29 20.73c5.41 5.52 12.8 8.68 20.53 8.77z m27.15 266.72h-32.68v94.97h22.42v-31.45h10.89c19.66 0 36.83-9.98 36.83-32.59-0.01-23.52-16.91-30.93-37.46-30.93z m-0.51 45.59h-9.75v-27.57h9.15c10.77 0 16.77 3.31 16.77 12.9s-5.26 14.67-16.17 14.67z m103.75-4.64c-1.76 5.49-3.27 11.58-5.14 17.37h-0.6c-1.74-5.88-3.24-11.88-5.12-17.37l-14.78-41.02h-24.11v94.97h19.92v-32.41c-0.39-11.04-1.35-22.05-2.87-32.98h0.51l7.5 22.75 12.65 34.75h12.28l12.53-34.75 7.76-22.75h0.51a316.917 316.917 0 0 0-2.87 32.98v32.57h20.4v-94.97h-24.3l-14.27 40.86z m86.91 36.23c14.29-14.69 28.05-32.71 28.05-49.06 0-18.16-12.51-29.9-30.55-29.9-13.27 0-21.8 4.84-30.95 14.69l12.16 12.28c4.38-4.86 9.26-9.27 15.77-9.27 7.39 0 12.16 4.63 12.16 13.44 0 13.9-15.66 31.04-38.96 52.65v13.02h64.65v-19.16h-17.19c-5.07 0.13-10.13 0.57-15.14 1.31z m60.75-8.57c-5.8-0.36-11.23 2.86-13.69 8.12a14.157 14.157 0 0 0 2.52 15.72 14.158 14.158 0 0 0 15.55 3.42c5.39-2.16 8.92-7.39 8.9-13.21 0.18-3.66-1.15-7.24-3.68-9.9a13.39 13.39 0 0 0-9.7-4.16h0.1z m62.27-35.51c-3.31-0.06-6.6 0.59-9.64 1.92l1.37-16.21h33.19v-18.9h-52.35l-2.32 47.02 9.75 6.51c5.54-3.57 8.04-4.63 13.16-4.63 8.04 0 13.66 5.12 13.66 14.69s-5.63 14.82-14.66 14.82c-7.39 0-13.9-3.96-19.16-9.06l-10.33 14.43a44.022 44.022 0 0 0 32.57 13.18c17.9 0 33.7-12.39 33.7-33.75 0-20.57-13.29-30.02-29.07-30.02h0.13z m0 0"
+             p-id="4645"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgShidu.vue b/src/views/screen/R_D_Environment1/component/svgShidu.vue
new file mode 100644
index 0000000..0047519
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgShidu.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1730777853051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="2254" id="mx_n_1730777853052" width="256" height="256" :fill="prop.color">
+        <path
+            d="M511.952979 1023.896979a505.462446 505.462446 0 0 1-198.72418-40.381232c-60.914463-25.881164-115.693372-62.891387-162.824501-110.022515-47.131128-47.131128-84.141351-101.902162-110.022514-162.8245a505.462446 505.462446 0 0 1-40.381233-198.72418c0-85.708713 24.227164-176.592083 68.223569-255.928957 4.891115-7.923448 14.956887-13.657316 23.998754-13.657316 1.8194 0 5.245543 0.275667 7.679287 2.095067 9.774353 7.332734 15.421582 22.352631 7.954953 34.797013l-0.275667 0.456819-0.252038 0.472571C67.412872 355.019318 47.17106 433.009363 47.17106 511.944552c0 256.283385 208.498533 464.781919 464.781919 464.781918s464.781919-208.498533 464.781919-464.781918-208.498533-464.781919-464.781919-464.781919c-78.943064 0-156.925233 20.241811-231.780554 60.166224l-0.464696 0.252039-0.448943 0.26779c-4.938372 2.961448-10.191791 4.52881-15.208925 4.52881-7.293353 0-13.342268-3.229238-17.532401-9.349039-3.922343-11.192068-3.709686-26.692412 9.498686-34.804889 79.328998-43.996404 170.212368-68.223568 255.928957-68.223568a505.430941 505.430941 0 0 1 198.72418 40.381232c60.906587 25.873288 115.693372 62.891387 162.824501 110.022515 47.123252 47.123252 84.141351 101.902162 110.022515 162.824501 26.794802 63.072539 40.381232 129.933526 40.381232 198.72418s-13.58643 135.659517-40.381232 198.72418c-25.881164 60.914463-62.891387 115.693372-110.022515 162.824501-47.131128 47.131128-101.910038 84.141351-162.824501 110.022514a505.525456 505.525456 0 0 1-198.716304 40.373356z"
+             p-id="2255" class="border"></path>
+        <path
+            d="M716.088103 531.012811c-23.57344-52.345167-57.480443-102.288095-93.364371-155.160967-25.014783-36.852699-50.872319-74.949835-73.587254-114.74823l-0.181153-0.322923-38.506698-78.344474a1190.187004 1190.187004 0 0 0-16.587259 32.930355c-7.758048 15.783887-15.783887 32.111232-24.227164 46.855462-23.124497 40.538756-47.942376 79.116341-71.949007 116.425858-30.945555 48.076271-62.930768 97.79079-91.820637 152.514566-28.094374 69.444378-21.454745 144.449347 18.257012 205.867886 41.641423 64.411492 113.488039 104.438295 187.508483 104.438295 1.252314 0 2.496753-0.015752 3.756944-0.039381 75.761083-1.236562 145.024309-41.239737 185.255893-107.005934 38.490946-62.930768 44.256318-138.975394 15.445211-203.410513z m-41.594166 166.19551c-30.709269 58.323196-95.538199 103.595543-157.933386 106.060791h-0.716733c-65.269996-1.559486-126.877564-41.869832-160.90271-100.137895-34.607984-59.284091-34.214175-131.359117-6.395468-188.296103 25.314079-49.493985 83.897189-140.542756 130.122555-203.953971a37.293765 37.293765 0 0 1 61.158625 0.669476c21.375983 30.638384 49.470357 71.61033 66.994882 99.94099 19.462068 31.47326 37.845099 61.198006 50.9117 81.16415l0.3308 0.535581c40.341851 69.365616 49.186814 141.818699 16.429735 204.016981zM501.745435 594.298007c-63.994053 35.198698-126.475878 15.07503-159.390481-1.016029-1.590991 36.56128 7.529639 74.524521 27.133479 108.1086 31.796184 54.463862 85.015608 86.535713 146.032461 88.000685l0.669476-0.007876c50.4155-1.992676 99.232133-29.716869 130.098926-72.413702a416.099181 416.099181 0 0 0 20.604116-37.333147c14.051125-34.584356 16.603011-71.964759 7.742296-109.778353-36.33287-8.616553-101.847028-14.633963-172.890273 24.439822z"
+             p-id="2256"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgTVOC.vue b/src/views/screen/R_D_Environment1/component/svgTVOC.vue
new file mode 100644
index 0000000..38d14e0
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgTVOC.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1730777586016" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="1965" width="256" height="256" :fill="prop.color">
+        <path
+            d="M160 512c0-32-19.2-61.44-48.64-74.24l-10.24-3.84 1.28-11.52c17.92-96 64-183.04 133.12-252.16 90.88-90.88 211.2-140.8 340.48-140.8 176.64 0 337.92 96 422.4 250.88 3.84 6.4 12.8 8.96 19.2 5.12 6.4-3.84 8.96-12.8 5.12-19.2C934.4 102.4 762.88 0 576 0c-69.12 0-135.68 14.08-198.4 39.68-61.44 25.6-115.2 62.72-162.56 110.08-47.36 47.36-83.2 102.4-108.8 162.56-15.36 35.84-25.6 72.96-32 110.08l-1.28 8.96-8.96 2.56c-38.4 7.68-64 40.96-64 78.08 0 43.52 35.84 79.36 79.36 79.36 44.8 0 80.64-35.84 80.64-79.36z m912.64-79.36c-43.52 0-79.36 35.84-79.36 79.36 0 32 19.2 61.44 48.64 74.24l10.24 3.84-2.56 11.52c-17.92 96-64 183.04-133.12 252.16-90.88 90.88-211.2 140.8-340.48 140.8-176.64 0-337.92-96-422.4-250.88-2.56-5.12-7.68-7.68-12.8-7.68-2.56 0-5.12 0-6.4 1.28-3.84 1.28-6.4 5.12-6.4 8.96-1.28 3.84-1.28 7.68 1.28 11.52C217.6 921.6 389.12 1024 576 1024c69.12 0 135.68-14.08 198.4-39.68 61.44-25.6 115.2-62.72 162.56-110.08 47.36-47.36 83.2-102.4 108.8-162.56 15.36-35.84 25.6-72.96 32-110.08l1.28-8.96 8.96-2.56c38.4-7.68 64-40.96 64-78.08 0-43.52-35.84-79.36-79.36-79.36z"
+             p-id="1966" class="border"></path>
+        <path
+            d="M266.24 423.68h-69.12v-21.76h162.56v21.76h-69.12V627.2h-25.6V423.68zM382.72 401.92H409.6l38.4 124.16c7.68 26.88 12.8 47.36 21.76 74.24h1.28c8.96-26.88 14.08-47.36 23.04-74.24l37.12-124.16h25.6L483.84 627.2h-29.44l-71.68-225.28zM569.6 514.56c0-71.68 39.68-115.2 94.72-115.2 56.32 0 94.72 43.52 94.72 115.2s-39.68 117.76-94.72 117.76c-55.04-1.28-94.72-46.08-94.72-117.76z m163.84 0c0-57.6-26.88-93.44-69.12-93.44-40.96 0-69.12 35.84-69.12 93.44s26.88 94.72 69.12 94.72c42.24 0 69.12-37.12 69.12-94.72zM794.88 514.56c0-71.68 42.24-116.48 98.56-116.48 26.88 0 48.64 12.8 61.44 26.88l-14.08 16.64c-11.52-12.8-26.88-21.76-46.08-21.76-43.52 0-72.96 35.84-72.96 93.44s28.16 94.72 71.68 94.72c21.76 0 38.4-8.96 53.76-25.6l14.08 15.36c-17.92 20.48-39.68 32-69.12 32-56.32 1.28-97.28-42.24-97.28-115.2z"
+             p-id="1967"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgWendu.vue b/src/views/screen/R_D_Environment1/component/svgWendu.vue
new file mode 100644
index 0000000..29a472f
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgWendu.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg t="1730777903037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="2469" width="256" height="256" :fill="prop.color">
+        <path
+            d="M511.2 959.1c-59.7 0.1-118.7-11.9-173.6-35.3-53.2-22.6-101.1-54.9-142.3-96.1-41.2-41.2-73.5-89-96.1-142.3a441 441 0 0 1-35.3-173.6c0-74.9 21.2-154.3 59.6-223.6 4.3-6.9 13.1-11.9 21-11.9 1.6 0 4.6 0.2 6.7 1.8 8.5 6.4 13.5 19.5 6.9 30.4l-0.2 0.4-0.2 0.4c-34.9 65.4-52.6 133.5-52.6 202.5 0 223.9 182.2 406.1 406.1 406.1 223.9 0 406.1-182.2 406.1-406.1 0-223.9-182.2-406.1-406.1-406.1-69 0-137.1 17.7-202.5 52.6l-0.4 0.2-0.4 0.2c-4.3 2.6-8.9 4-13.3 4-6.4 0-11.7-2.8-15.3-8.2-3.4-9.8-3.2-23.3 8.3-30.4 69.3-38.4 148.7-59.6 223.6-59.6 59.7-0.1 118.7 11.9 173.6 35.3 53.2 22.6 101.1 54.9 142.3 96.1 41.2 41.2 73.5 89 96.1 142.3 23.4 55.1 35.3 113.5 35.3 173.6s-11.9 118.5-35.3 173.6c-22.6 53.2-54.9 101.1-96.1 142.3-41.2 41.2-89 73.5-142.3 96.1a441 441 0 0 1-173.6 35.3z m0 0"
+             p-id="2470" class="border"></path>
+        <path
+            d="M531.5 583.1l-6-2.7V352.8c0-9.5-12-17.6-26.2-17.6s-26.2 8-26.2 17.6v227.7l-6.1 2.7c-28.8 12.9-47.5 41.9-47.5 73.8 0 44.5 35.8 80.7 79.7 80.7 43.9 0 79.7-36.2 79.7-80.7 0.1-31.9-18.5-61-47.4-73.9z m81.7-48.4l-3.2-3.1V286.8c0-24-12.3-47.2-33.8-63.6-20.7-15.9-48-24.6-76.9-24.6-28.9 0-56.2 8.7-76.9 24.6-21.5 16.5-33.8 39.7-33.8 63.6v244.9l-3.2 3.1c-33.1 31.6-52.1 76.2-52.1 122.3 0 44.9 17.3 87.1 48.6 118.9 31.4 31.8 73 49.2 117.4 49.2 44.3 0 86-17.5 117.4-49.2 31.4-31.8 48.6-74 48.6-118.9 0-46.2-19-90.8-52.1-122.4z m-113.9 263c-76.6 0-138.9-63.1-138.9-140.7 0-42.1 18.3-81.6 50.4-108.4l4.9-4.1V286.8c0-16.5 9.6-32.6 26.3-44.1 15.7-10.8 36.1-16.8 57.4-16.8 21.3 0 41.7 5.9 57.4 16.8 16.7 11.5 26.3 27.5 26.3 44.1v257.7l4.9 4.1c32 26.9 50.4 66.4 50.4 108.4-0.2 77.5-62.5 140.7-139.1 140.7zM642 304.5h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.8-8.7-10.6-8.7H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7z m36.4 20.6H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 38H642c-5.9 0-10.6 3.9-10.6 8.7s4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 0"
+             p-id="2471"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgYanwu.vue b/src/views/screen/R_D_Environment1/component/svgYanwu.vue
new file mode 100644
index 0000000..85e7d26
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgYanwu.vue
@@ -0,0 +1,34 @@
+<template>
+    <svg t="1730776964174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="7087" width="256" height="256" :fill="prop.color">
+        <path
+            d="M631.466667 230.4l-17.066667-8.533333 17.066667-38.4 17.066666 8.533333c76.8 38.4 140.8 98.133333 179.2 174.933333l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-34.133333-68.266667-89.6-123.733333-157.866666-157.866667z m17.066666 601.6l-17.066666 8.533333-17.066667-38.4 17.066667-8.533333c68.266667-34.133333 123.733333-89.6 162.133333-157.866667l8.533333-17.066666 38.4 21.333333-8.533333 17.066667c-42.666667 76.8-106.666667 136.533333-183.466667 174.933333zM674.133333 170.666667l-17.066666-8.533334 17.066666-38.4 17.066667 8.533334c85.333333 42.666667 157.866667 110.933333 200.533333 196.266666l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-38.4-81.066667-102.4-140.8-179.2-179.2z m192 490.666666l38.4 21.333334-8.533333 17.066666c-42.666667 85.333333-115.2 153.6-200.533333 196.266667l-17.066667 8.533333-17.066667-38.4 17.066667-8.533333c76.8-38.4 140.8-98.133333 183.466667-174.933333l4.266666-21.333334zM392.533333 793.6l17.066667 8.533333-17.066667 38.4-17.066666-8.533333c-76.8-38.4-140.8-98.133333-179.2-174.933333l-12.8-17.066667 38.4-21.333333 8.533333 17.066666c38.4 68.266667 93.866667 123.733333 162.133333 157.866667z m0-610.133333l17.066667 38.4-17.066667 8.533333c-68.266667 34.133333-123.733333 89.6-162.133333 157.866667l-8.533333 17.066666-38.4-17.066666 8.533333-17.066667c42.666667-81.066667 106.666667-140.8 183.466667-179.2l17.066666-8.533333zM157.866667 366.933333l-38.4-21.333333 8.533333-17.066667c42.666667-85.333333 115.2-153.6 200.533333-196.266666l17.066667-8.533334 17.066667 38.4-12.8 8.533334c-76.8 38.4-145.066667 98.133333-183.466667 174.933333l-8.533333 21.333333z m192 490.666667l17.066666 8.533333-17.066666 38.4-17.066667-8.533333c-85.333333-42.666667-157.866667-110.933333-200.533333-196.266667l-8.533334-17.066666 38.4-21.333334 8.533334 17.066667c38.4 76.8 102.4 140.8 179.2 179.2zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 213.333333 469.333333 469.333333-213.333333 469.333333-469.333333 469.333333z m0-981.333333C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m426.666667 512c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667 17.066667-42.666667 42.666667-42.666667 42.666667 21.333333 42.666667 42.666667z m-426.666667 85.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333z m0-213.333333c-72.533333 0-128 59.733333-128 128s59.733333 128 128 128 128-59.733333 128-128-59.733333-128-128-128z m0 298.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z m0-384c-119.466667 0-213.333333 93.866667-213.333333 213.333333s93.866667 213.333333 213.333333 213.333333 213.333333-93.866667 213.333333-213.333333-98.133333-213.333333-213.333333-213.333333z"
+            p-id="7088" class="border"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg) ;
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+</style>
diff --git a/src/views/screen/R_D_Environment1/component/svgZaosheng.vue b/src/views/screen/R_D_Environment1/component/svgZaosheng.vue
new file mode 100644
index 0000000..9e6c2de
--- /dev/null
+++ b/src/views/screen/R_D_Environment1/component/svgZaosheng.vue
@@ -0,0 +1,39 @@
+<template>
+    <svg t="1730777460223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="1806" width="256" height="256" :fill="prop.color">
+        <path
+            d="M204.8 869.171l29.491-29.491a431.923 431.923 0 0 1-33.382-31.54l-29.082 29.492q15.975 16.589 32.973 31.54z"
+            p-id="1807"></path>
+        <path
+            d="M512 40.96a471.04 471.04 0 0 0-367.206 765.952l29.286-28.672a430.08 430.08 0 1 1 92.16 87.04l-28.672 29.491A471.04 471.04 0 1 0 512 40.96z"
+            p-id="1808" class="border"></path>
+        <path
+            d="M522.24 634.88v-40.96a81.92 81.92 0 0 0 0-163.84v-40.96a122.88 122.88 0 0 1 0 245.76z m-40.96-350.003a20.48 20.48 0 0 0-4.096 0 86.835 86.835 0 0 0-67.584 24.78l-63.488 63.489H276.48a40.96 40.96 0 0 0-40.96 40.96v204.8a40.96 40.96 0 0 0 40.96 40.96h77.005l55.296 55.296a81.92 81.92 0 0 0 67.379 22.118 20.48 20.48 0 0 0 5.12 0 20.48 20.48 0 0 0 20.48-20.48V305.357a20.48 20.48 0 0 0-20.48-20.48zM460.8 697.549a40.96 40.96 0 0 1-23.142-11.264l-66.15-66.15H358.4v-1.23h-81.92v-204.8h27.648l-1.229 1.23h57.959l76.595-76.596A40.96 40.96 0 0 1 460.8 327.68v369.869z m266.24-201.933H768a20.48 20.48 0 0 1 0 40.96h-40.96a20.48 20.48 0 0 1 0-40.96z m-80.691-153.6l29.491-29.082a20.48 20.48 0 0 1 28.877 28.877l-28.877 29.082a20.48 20.48 0 0 1-28.877-28.877z m36.25 311.091l28.876 28.877a20.48 20.48 0 1 1-28.877 28.877l-28.876-28.877a20.48 20.48 0 1 1 28.876-28.877z"
+            p-id="1809"></path>
+    </svg>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const prop = defineProps({
+    color: '#469DE9'
+});
+</script>
+
+<style lang="scss" scoped>
+/** .border设置循环旋转动画效果 */
+.border {
+    animation: rotate 3s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment1/index.vue b/src/views/screen/R_D_Environment1/index.vue
index b0cffeb..5ac5b4e 100644
--- a/src/views/screen/R_D_Environment1/index.vue
+++ b/src/views/screen/R_D_Environment1/index.vue
@@ -3,23 +3,34 @@
         <div class="header">
             <div class="title">研发中心环境实时监测系统</div>
         </div>
+        <div class="ct-box">
+            <div class="ct-sensor">
+                <SensorNumLoop :sensorData="item" v-for="(item, index) in sensor_list" :key="index" />
+            </div>
+        </div>
         <div class="left-content left-right" ref="leftContentRef">
             <Lr1 :data="avg_temp_humi.four" />
-            <Lr2 :data="humi"/>
-            <Lr3 />
+            <Lr2 :data="humi" />
+            <Lr3 :public_list="public_noise" :office_list="office_noise" />
             <Lr4 />
         </div>
         <div class="right-content left-right" ref="rightContentRef"></div>
         <div class="bottom-content" ref="bottomContentRef"></div>
+
+        <!-- <Sence /> -->
     </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
+import Sence from './component/Sence.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';
+import SensorNumLoop from './component/SensorNumLoop.vue';
+import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/R_D_Environment';
+
 
 let deltaY = ref(0)
 let avg_temp_humi = reactive({
@@ -34,7 +45,9 @@ let avg_temp_humi = reactive({
         humi: 60
     }
 })
-
+let noiseDataList = ref()
+let public_noise = ref({})
+let office_noise = ref([])
 let humi = ref({
     "Humiture": [
         {
@@ -112,18 +125,277 @@ let humi = ref({
         "name": "温湿度下限值"
     }
 })
+let sensor_list = reactive([
+    {
 
+        component: 'SvgWendu',
+        unit: '℃',
+        type: 'AirTemp_Reg',
+        limit: 40,
+        list: [
+            {
+
+                id: '',
+                name: '温度1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: '温度2',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgShidu',
+        unit: '%RH',
+        type: 'AirHumi_Reg',
+        limit: 90,
+        list: [
+            {
+
+                id: '',
+                name: '湿度1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: '湿度2',
+                value: 100,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgJiaquan',
+        unit: 'mg/m³',
+        type: 'CH2O',
+        limit: 0.08,
+        list: [
+            {
+
+                id: '',
+                name: '甲醛1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: '甲醛2',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgTVOC',
+        unit: 'mg/m³',
+        type: 'TVOC',
+        limit: 0.5,
+        list: [
+            {
+
+                id: '',
+                name: 'TVOC1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: 'TVOC2',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgPm25',
+        unit: 'mg/m³',
+        type: 'HIGH_PM25_Reg',
+        limit: 30,
+        list: [
+            {
+
+                id: '',
+                name: 'PM2.51',
+                value: 20,
+                status: "false"
+            },
+            {
+                id: '',
+                name: 'PM2.52',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgPm10',
+        unit: 'mg/m³',
+        type: 'HIGH_PM10_Reg',
+        limit: 30,
+        list: [
+            {
+
+                id: '',
+                name: 'PM101',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: 'PM102',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgZaosheng',
+        unit: 'dB',
+        type: 'Noise_Reg',
+        limit: 85,
+        list: [
+            {
+
+                id: '',
+                name: '噪音1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: '噪音2',
+                value: 20,
+                status: "true"
+            }
+        ]
+    },
+    {
+        component: 'SvgYanwu',
+        unit: 'mg/m³',
+        type: 'Smoke_Reg',
+        limit: 100,
+        list: [
+            {
+
+                id: '',
+                name: '烟雾1',
+                value: 20,
+                status: "true"
+            },
+            {
+                id: '',
+                name: '烟雾2',
+                value: 20,
+                status: "true"
+            }
+        ]
+    }
+])
+function getNoiseDataList() {
+    noiseDataList.value = [
+        {
+            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
+            "devName": "公共区域",
+            "label": "noise-7",
+            "place": null,
+            "data": 19,
+            "status": 0
+        },
+        {
+            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
+            "devName": "办公区6",
+            "label": "noise-6",
+            "place": null,
+            "data": 90,
+            "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
+        },
+    ]
+    public_noise.value = noiseDataList.value.find(item => item.devName === '公共区域')
+    office_noise.value = noiseDataList.value.filter(item => item.devName !== '公共区域')
+}
+
+
+
+
+// 获取顶部数据
+// function getTopDataList() {
+//   getTopData().then(res => {
+//     if (res.code === 200) {
+//       res.data.forEach(item => {
+//         let index = sensor_list.findIndex(sensor => sensor.type === item.type)
+//         sensor_list[index].value = item.data
+//         sensor_list[index].id = item.id
+//         sensor_list[index].status = item.status
+//         sensor_list[index].limit = item.limit
+//         if (item.type === 'HIGH_PM25_Reg') {
+//           dustData.pm25 = item.data
+//         } else if (item.type === 'HIGH_PM10_Reg') {
+//           dustData.pm10 = item.data
+
+//         }
+
+//       })
+//     }
+//   })
+// }
 
 onMounted(() => {
+    getNoiseDataList()
     window.addEventListener('wheel', function (event) {
         deltaY.value += event.deltaY
         if (deltaY.value <= -500 && deltaY.value >= -1000) {
-
+            this.document.querySelector('.ct-box').style.transform = 'translateY(-200%) translateX(-50%)'
             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('.ct-box').style.transform = 'translateY(0) translateX(-50%)'
             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)'
@@ -159,6 +431,7 @@ onMounted(() => {
         width: 100%;
         height: 72px;
         background-image: url('./image/u796.png');
+        z-index: 2;
 
         .title {
             width: 100%;
@@ -171,6 +444,28 @@ onMounted(() => {
         }
     }
 
+    .ct-box {
+        position: absolute;
+        top: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 825px;
+        height: 180px;
+        display: flex;
+        z-index: 2;
+        justify-content: space-between;
+        transition: transform 1s;
+
+        .ct-sensor {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+        }
+    }
+
     .left-content {
         position: absolute;
         top: 0;