update

src/views/screen/R_D_Environment1/component/Lr2.vue

@@ -215,11 +215,11 @@ const options = computed(() => {
 
 <style lang="scss" scoped>
 .container2 {
-    width: 408px;
+    width: 395px;
     height: 272px;
 
     .title {
-        width: 408px;
+        width: 395px;
         height: 35px;
         display: flex;
         justify-content: flex-start;

src/views/screen/R_D_Environment1/component/Lr3.vue

@@ -62,11 +62,11 @@ const prop = defineProps({
 
 <style lang="scss" scoped>
 .container2 {
-    width: 408px;
+    width: 385px;
     height: 310px;
 
     .title {
-        width: 408px;
+        width: 385px;
         height: 35px;
         display: flex;
         justify-content: flex-start;

src/views/screen/R_D_Environment1/component/Progress.vue

@@ -44,7 +44,6 @@ function checkCb(item) {
     width: 100%;
     height: 40px;
     box-sizing: border-box;
-    padding-right: 30px;
     .text-label {
         width: 100%;
         height: 30px;

src/views/screen/R_D_Environment1/index.vue

@@ -14,8 +14,16 @@
             <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>
+        <div class="right-content left-right" ref="rightContentRef">            
+            <Lr1 :data="avg_temp_humi.five" />
+            <Lr2 :data="humi" />
+            <Lr3 :public_list="public_noise" :office_list="office_noise" />
+            <Lr4 />
+        </div>
+        <div class="bottom-content" ref="bottomContentRef">
+            
+          <ZdScrollBoard ref="devList" :config="zd_config" class="zd-scroll-board"/>
+        </div>
 
         <!-- <Sence /> -->
     </div>
@@ -28,6 +36,7 @@ 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 ZdScrollBoard from "@/components/ZdScrollBoard/index.vue";
 import SensorNumLoop from './component/SensorNumLoop.vue';
 import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/R_D_Environment';
 
@@ -296,6 +305,22 @@ let sensor_list = reactive([
         ]
     }
 ])
+
+let zd_config = ref({
+  header: ['报警时间', '报警内容', '持续时长','报警次数'],
+  rowNum: 2,
+  headerHeight: 50,
+  headerBGC: 'transparent',
+  oddRowBGC: 'transparent',
+    evenRowBGC: 'transparent',
+    columnWidth: [179, 179, 179, 179],
+  data: [
+    ['行1列1', '行1列2', '行1列3','行1列4'],
+    ['行2列1', '行2列2', '行2列3','行2列4'],
+    ['行3列1', '行3列2', '行3列3','行3列4'],
+    ['行4列1', '行4列2', '行4列3','行4列4'],
+  ]
+})
 function getNoiseDataList() {
     noiseDataList.value = [
         {
@@ -500,8 +525,9 @@ onMounted(() => {
         background-image: url('./image/u800.png'), url('./image/u798.png');
         background-position: center, 100% 78%;
         background-repeat: no-repeat, no-repeat;
-        padding-right: 38px;
+        padding-right: 30px;
         transition: transform 1s;
+        align-items: flex-end;
     }
 
     .bottom-content {
@@ -514,6 +540,15 @@ onMounted(() => {
         background-position: bottom, 50% 100%;
         background-repeat: no-repeat, no-repeat;
         transition: transform 1s;
+        .zd-scroll-board {
+            width: 716px;
+            height: 120px,;
+            position: absolute;
+            top: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            
+        }
     }
 }
 </style>