update

src/api/screen/R_D_Environment.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+//big/getScreen
+
+// 查询办公室噪声数据
+export function getNoiseData(query) {
+    return request({
+        url: '/screen/goaSensor/getNoiseData',
+        method: 'get',
+        params: query
+    })
+}
+// 查询公区传感器数据
+export function getTopData(query) {
+    return request({
+        url: '/screen/goaSensor/getTopData?depts=100',
+        method: 'get',
+        params: query
+    })
+}

src/utils/threejs.ts

@@ -32,6 +32,8 @@ export function findChildren (object3D: Object3D, callback: (obj: Object3D) => b
 
 export function checkNameIncludes (obj: Object3D, str: string): boolean {
   if (obj.name.includes(str)) {
+    console.log(obj.name);
+    
     return true;
   } else {
     return false;

src/views/screen/R_D_Environment/component/Popover/index.vue

@@ -45,9 +45,11 @@ defineExpose({
 .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;

src/views/screen/R_D_Environment/component/Sence.vue

@@ -136,13 +136,12 @@ const initModel = () => {
 
     const rackList: any[] = [];
     baseModel.traverse(item => {
-      console.log(item, 'item');
       
       if (checkIsRack(item)) {
         rackList.push(item);
       }
     });
-    console.log(baseModel,rackList, 'rackList------111');
+    // console.log(baseModel,rackList, 'rackList------111');
 
     viewer.setRaycasterObjects(rackList);
     
@@ -239,7 +238,7 @@ const onMouseClick = (intersects: THREE.Intersection[]) => {
 };
 
 function checkIsRack(obj: any): boolean {
-  return checkNameIncludes(obj, 'rack');
+  return checkNameIncludes(obj, 'Door');
 }
 
 const onMouseMove = (intersects: THREE.Intersection[]) => {
@@ -253,7 +252,7 @@ const onMouseMove = (intersects: THREE.Intersection[]) => {
 
   let selectedObjectName = '';
   const findClickModel = (object: any) => {
-    if (object.name.includes('rack')) {
+    if (object.name.includes('Door')) {
       selectedObjectName = object.name;
       return;
     }

src/views/screen/R_D_Environment/component/proge.vue

@@ -9,10 +9,15 @@ const prop = defineProps({
   data: {
     type: Object,
     default: () => {
-      return {
+      return [
-        xData: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5', '办公室6'],
+        {
-        seriesData: [80, 60, 60, 60, 60, 60]
+          "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
-      };
+          "devName": "噪声监测7",
+          "label": "noise-7",
+          "place": null,
+          "data": 0,
+          "status": 0
+        }]
     }
   }
 });
@@ -23,12 +28,19 @@ const bodyMax = 150;
 
 const options = computed(() => {
 
+
+  let xData = []
+  let seriesData = []
+  prop.data.forEach((item) => {
+    xData.push(item.devName);
+    seriesData.push(item.data);
+  });
   const labelSetting = {
     show: true,
     position: 'top',
     offset: [0, -20],
     formatter: function (param) {
-      return prop.data.xData[param.dataIndex] + '\r\n' + prop.data.seriesData[param.dataIndex] + 'dB';
+      return xData[param.dataIndex] + '\r\n' + seriesData[param.dataIndex] + 'dB';
     },
     fontSize: 14,
     fontFamily: 'Arial',
@@ -39,7 +51,7 @@ const options = computed(() => {
     },
     backgroundColor: 'transparent',
     xAxis: {
-      data: prop.data.xData,
+      data: xData,
       axisTick: { show: false },
       axisLine: { show: false },
       axisLabel: { show: false }
@@ -52,7 +64,9 @@ const options = computed(() => {
     },
     grid: {
       top: 'center',
-      height: 230
+      height: 230,
+      left: 0,
+      right: 0
     },
     markLine: {
       z: -100
@@ -68,7 +82,7 @@ const options = computed(() => {
         itemStyle: {
           color: '#33FFFF'
         },
-        data: prop.data.seriesData.map((item) => {
+        data: seriesData.map((item) => {
           return {
             value: item
           };

src/views/screen/R_D_Environment/component/svgFenchen.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/component/svgJiaquan.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/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>

src/views/screen/R_D_Environment/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>

src/views/screen/R_D_Environment/component/svgShidu.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/component/svgTVOC.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/component/svgWendu.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/component/svgYanwu.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/component/svgZaosheng.vue

@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
-const prop = ref({
+const prop = defineProps({
     color: '#469DE9'
 });
 </script>

src/views/screen/R_D_Environment/index.vue

@@ -20,9 +20,11 @@
     </div>
     <div class="ct-box">
       <div class="ct-sensor">
-        <div class="sensor-item" v-for="item in sensor_list">
+        <div class="sensor-item" v-for="item in sensor_list">   <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
-          <component  style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
+          <component style="width: 75px;height: 75px;margin-top: 10px;"  :is="item.component"
-          <div style="margin: 10px 0;color: #A8EFC0;">{{ item.value + item.unit }}</div>
+            :value="item.value" :color="item.status == 'true'?'#469DE9':'gray'" :unit="item.unit" /><!--  -->
+            
+          <div style="margin: 10px 0">{{ item.value + item.unit }}</div>
           <div>{{ item.name }}</div>
         </div>
       </div>
@@ -48,7 +50,7 @@
       </div>
       <div class="rbox-item">
         <ItemVue title="办公室噪音" pos="right">
-          <ProgeChart />
+          <ProgeChart :data="noiseDataList" />
         </ItemVue>
       </div>
       <div class="rbox-item">
@@ -57,13 +59,13 @@
       </div>
     </div>
 
-    <!-- <ThreeBG /> -->
+
-    <Sence />
+    <!-- <Sence /> -->
   </div>
 </template>
 
 <script setup>
-import { ref,reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 // import ThreeBG from './component/threeBG.vue';
 import Sence from './component/Sence.vue';
 import ItemVue from './component/item.vue';
@@ -72,65 +74,130 @@ import PmVue from './component/pm.vue';
 import LineChart from './component/lineChart.vue';
 import ProgeChart from './component/proge.vue';
 import SvgFenchen from './component/svgFenchen.vue';
+import SvgPm25 from './component/svgPm25.vue';
+import SvgPm10 from './component/svgPm10.vue';
 import SvgJiaquan from './component/svgJiaquan.vue';
 import SvgZaosheng from './component/svgZaosheng.vue';
 import SvgTVOC from './component/svgTVOC.vue';
 import SvgShidu from './component/svgShidu.vue';
 import SvgWendu from './component/svgWendu.vue';
 import SvgYanwu from './component/svgYanwu.vue';
+import { getNoiseData,getTopData } from '@/api/screen/R_D_Environment';
 
-
+let noiseDataList = ref([
+  {
+    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
+    "devName": "噪声监测7",
+    "label": "noise-7",
+    "place": null,
+    "data": 0,
+    "status": 0
+  }
+])
 let sensor_list = reactive([
   {
-    name:'温度',
+    id: '',
-    component:SvgWendu,
+    name: '温度',
+    component: SvgWendu,
     value: 20,
-    unit: '℃'
+    unit: '℃',
+    type: 'AirTemp_Reg',
+    status: "true"
   },
   {
-    name:'湿度',
+    id: '',
-    component:SvgShidu,
+    name: '湿度',
+    component: SvgShidu,
     value: 20,
-    unit: '%'
+    unit: '%',
+    type: 'AirHumi_Reg',
+    status: "true"
   },
   {
-    name:'甲醛',
+    id: '',
-    component:SvgJiaquan,
+    name: '甲醛',
+    component: SvgJiaquan,
     value: 20,
-    unit: 'mg/m³'
+    unit: 'mg/m³',
+    type: 'CH2O',
+    status: "true"
   },
   {
-    name:'TVOC',
+    id: '',
-    component:SvgTVOC,
+    name: 'TVOC',
+    component: SvgTVOC,
     value: 20,
-    unit: 'mg/m³'
+    unit: 'mg/m³',
+    type: 'TVOC',
+    status: "true"
   },
   {
-    name:'粉尘',
+    id: '',
-    component:SvgFenchen,
+    name: 'PM2.5',
+    component: SvgPm25,
     value: 20,
-    unit: 'mg/m³'
+    unit: 'mg/m³',
+    type:'HIGH_PM25_Reg',
+    status: "true"
   },
   {
-    name:'噪音',
+    id: '',
-    component:SvgZaosheng,
+    name: 'PM10',
+    component: SvgPm10,
     value: 20,
-    unit: 'dB'
+    unit: 'mg/m³',
+    type:'HIGH_PM10_Reg',
+    status: "true"
   },
   {
-    name:'烟雾',
+    id: '',
-    component:SvgYanwu,
+    name: '噪音',
+    component: SvgZaosheng,
     value: 20,
-    unit: 'mg/m³'
+    unit: 'dB',
+    type:'Noise_Reg',
+    status: "true"
+  },
+  {
+    id: '',
+    name: '烟雾',
+    component: SvgYanwu,
+    value: 20,
+    unit: 'mg/m³',
+    type:'Smoke_Reg',
+    status: "true"
   }
 ])
 
 
+// 获取各办公室噪音数据
+function getNoiseDataList() {
+  getNoiseData().then(res => {
+    if (res.code === 200) {
+      noiseDataList.value = res.data
+    }
+  })
+}
+// 获取顶部数据
+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
+
+      })
+    }
+  })
+}
 
 
 
 onMounted(() => {
-  
+  getNoiseDataList()
+  getTopDataList()
 });
 </script>
 
@@ -165,16 +232,22 @@ onMounted(() => {
   .l-box {
     position: absolute;
     top: 100px;
-    left: 33px;
+    left: 0px;
     width: 410px;
-    height: 950px;
+    height: 980px;
     z-index: 2;
     background: url('/src/assets/images/preview-left.png') center center / 100% 100% no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
     .lbox1 {
       width: 100%;
       height: 316px;
     }
   }
+
   .ct-box {
     position: absolute;
     top: 100px;
@@ -184,12 +257,14 @@ onMounted(() => {
     display: flex;
     z-index: 2;
     justify-content: space-between;
+
     .ct-sensor {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .sensor-item {
         width: 146px;
         height: 100%;
@@ -198,6 +273,7 @@ onMounted(() => {
         align-items: center;
         font-size: 14px;
         color: #fff;
+
         .sensor-icon {
           width: 75px;
           height: 75px;
@@ -205,29 +281,36 @@ onMounted(() => {
       }
     }
   }
+
   .cb-box {
     position: absolute;
-    bottom: 30px;
+    bottom: 0px;
-    left: 445px;
+    left: 435px;
-    width: 1026px;
+    width: 1046px;
     height: 316px;
     display: flex;
     z-index: 2;
     justify-content: space-between;
     background: url('/src/assets/images/preview-bottom.png') center center / 100% 100% no-repeat;
+
     .cbox {
-      width: 50%;
+      width: 48%;
       height: 100%;
 
     }
   }
+
   .r-box {
     position: absolute;
     top: 100px;
-    right: 38px;
+    right: 0px;
-    width: 410px;
+    width: 420px;
-    height: 950px;
+    height: 980px;
     z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
     background: url('/src/assets/images/preview-right.png') center center / 100% 100% no-repeat;
 
     .rbox-item {