机房接口对接

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test50/test50.js

@@ -97,14 +97,33 @@ const test50 = (function () {
       /** url，data参数，
        * type请求类型，响应体结果，超时时间
        * 成功的回调，失败回调 */
-      url: DH + 'apiUrl/sendApiUrl',
+      url: DH + 'queryData/queryDeviceParam',
       data: {
           "urlCode": 'DH_002'
       },
       type: 'GET',
       dataType: 'JSON',
-      success: function(data) {
+      success: function({data}) {
         console.log('档案室库房',data);
+        // 温度
+        let temperature = data.filter(item => {
+          if(item.sname === '环境温度'){
+            return true
+          }
+        }).reduce((cur,item)=>{
+          return cur+parseFloat(item.value);
+        },0);
+        // 湿度 
+        let humidity = data.filter(item => {
+          if(item.sname === '环境湿度'){
+            return true
+          }
+        }).reduce((cur,item)=>{
+          return cur+parseFloat(item.value);
+        },0);
+        $('.test50 .box50 .item').eq(3).find('.temp').find('span').eq(0).html(temperature +'℃');
+        $('.test50 .box50 .item').eq(3).find('.temp').find('span').eq(1).html(humidity +'℃');
+
       },
       timeout: 6000,
       error: function() {
@@ -112,6 +131,7 @@ const test50 = (function () {
       },
   });
 
+
     $('.test50 .box50 .item').click(function () {
 
       const typeId = $(this).attr('data-id')
@@ -315,13 +335,15 @@ const test50 = (function () {
         });
       }
 
+     
+
       // 档案室库房
       function dasRoom() {
         $.ajax({
           /** url，data参数，
            * type请求类型，响应体结果，超时时间
            * 成功的回调，失败回调 */
-          url: DH + 'apiUrl/sendApiUrl',
+          url: DH + 'queryData/queryDeviceParam',
           data: {
               "urlCode": 'DH_002'
           },
@@ -329,6 +351,47 @@ const test50 = (function () {
           dataType: 'JSON',
           success: function({data}) {
             console.log('档案室库房',data);
+            // 温度
+            let temperature,
+            
+           curtemp = data.filter(item => {
+              if(item.sname === '环境温度'){
+                return true
+              }
+            });
+            temperature = (curtemp.reduce((cur,item)=>{
+              return cur+parseInt(item.value);
+            },0) / curtemp.length).toFixed(2);
+
+            // 湿度 
+            let humidity,
+            curhum = data.filter(item => {
+              if(item.sname === '环境湿度'){
+                return true
+              }
+            })
+           humidity = (curhum.reduce((cur,item)=>{
+              return cur+parseInt(item.value);
+            },0) / curhum.length).toFixed(2);
+
+
+            setCharts52(dom52, testDom52, temperature, humidity)
+            setCharts59(dom59, testDom59, temperature, humidity)
+
+            let index = 0;
+           const status = data.filter(item => {
+              return item.sname.indexOf('状态') !== -1;
+            });
+            console.log('各种状态',status);
+            $('.Water-immersion-box-one').each(function () {
+              $(this).find('.Water-immersion-box-title').find('div').eq(1).html(status[index].sname)
+              $(this).find('.Water-immersion-text').html(status[index].value === 'true' ? '正常' : '异常')
+              index++;
+            })
+
+
+
+            // setCharts58(dom58, testDom58,leackgePosition,eleRes)
           },
           timeout: 6000,
           error: function() {
@@ -353,43 +416,93 @@ const test50 = (function () {
         });
       }
 
+       // 告警信息
+   $.ajax({
+    /** url，data参数，
+     * type请求类型，响应体结果，超时时间
+     * 成功的回调，失败回调 */
+    url: DH + 'queryData/queryWarningInfo',
+    type: 'GET',
+    dataType: 'JSON',
+    success: function({data}) {
+      console.log('告警信息',data);
+      const html = data.map((item,index) => {
+        let level = '一级';
+        switch (item.level) {
+          case 1:
+            level = '一级';
+            break;
+            case 2:
+            level = '二级';
+            break;
+            case 3:
+            level = '三级';
+            break;
+            case 4:
+            level = '四级';
+            break;
+            case 5:
+            level = '五级';
+            break;
+          default:
+            level = '六级';
+            break;
+        }
+        return `
+        <tr>
+          <td>${index+1}</td>
+          <td>${item.aname}</td>
+          <td>${item.description}</td>
+          <td>${level}</td>
+          <td>${item.eventtime}</td>
+        </tr>
+        `
+      }).join('')
+      $('.springFrame5 .box56 tbody').html(html)
+    },
+    timeout: 6000,
+    error: function() {
+        console.log('告警信息超时了');
+    },
+});
+
 
       roomIndex = $(this).index();
-      roomIndex = 9
+      // roomIndex = 9
       if (roomIndex === 0) {
-        $('.springFrame5 .roomThree62').css('visibility', 'inherit');
-        $('.springFrame5 .roomThree63').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree64').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree65').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree66').css('visibility', 'hidden');
+        $('.roomThree62').css('visibility', 'inherit');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module62();
       } else if (roomIndex === 1) {
-        $('.springFrame5 .roomThree62').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree63').css('visibility', 'inherit');
-        $('.springFrame5 .roomThree64').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree65').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree66').css('visibility', 'hidden');
+        $('.roomThree62').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'inherit');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module63();
       } else if (roomIndex === 2) {
-        $('.springFrame5 .roomThree62 ').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree63').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree64').css('visibility', 'inherit');
-        $('.springFrame5 .roomThree65').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree66').css('visibility', 'hidden');
+        $('.roomThree62 ').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'inherit');
+        $('.roomThree65').css('visibility', 'hidden');
+        $('.roomThree66').css('visibility', 'hidden');
         module64();
       } else if (roomIndex === 3) {
-        $('.springFrame5 .roomThree62').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree63').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree64').css('visibility', 'hidden');
-        $('.springFrame5 .roomThree65').css('visibility', 'inherit');
-        $('.springFrame5 .roomThree66').css('visibility', 'hidden');
+        $('.roomThree62').css('visibility', 'hidden');
+        $('.roomThree63').css('visibility', 'hidden');
+        $('.roomThree64').css('visibility', 'hidden');
+        $('.roomThree65').css('visibility', 'inherit');
+        $('.roomThree66').css('visibility', 'hidden');
         module65();
       } else {
-        // $('.springFrame5 .roomThree62').css('visibility', 'hidden');
-        // $('.springFrame5 .roomThree63').css('visibility', 'hidden');
-        // $('.springFrame5 .roomThree64').css('visibility', 'hidden');
-        // $('.springFrame5 .roomThree65').css('visibility', 'hidden');
-        // $('.springFrame5 .roomThree66').css('visibility', 'inherit');
+        // $('.roomThree62').css('visibility', 'hidden');
+        // $('.roomThree63').css('visibility', 'hidden');
+        // $('.roomThree64').css('visibility', 'hidden');
+        // $('.roomThree65').css('visibility', 'hidden');
+        // $('.roomThree66').css('visibility', 'inherit');
         // module66();
       }
       $(".sf5").slideToggle();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test51/test51.js

@@ -18,6 +18,56 @@ const test51 = (function() {
         })
 
         eventClick('.test51');
+
+           // 告警信息
+   $.ajax({
+    /** url，data参数，
+     * type请求类型，响应体结果，超时时间
+     * 成功的回调，失败回调 */
+    url: DH + 'queryData/queryWarningInfo',
+    type: 'GET',
+    dataType: 'JSON',
+    success: function({data}) {
+      console.log('告警信息',data);
+      const html = data.map((item,index) => {
+        let level = '一级';
+        switch (item.level) {
+          case 1:
+            level = '一级';
+            break;
+            case 2:
+            level = '二级';
+            break;
+            case 3:
+            level = '三级';
+            break;
+            case 4:
+            level = '四级';
+            break;
+            case 5:
+            level = '五级';
+            break;
+          default:
+            level = '六级';
+            break;
+        }
+        return `
+        <tr>
+          <td>${index+1}</td>
+          <td>${item.aname}</td>
+          <td>${item.description}</td>
+          <td>${level}</td>
+          <td>${item.eventtime}</td>
+        </tr>
+        `
+      }).join('')
+      $('.test51 .box51 tbody').html(html)
+    },
+    timeout: 6000,
+    error: function() {
+        console.log('告警信息超时了');
+    },
+});
     }
 
     return test51

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test55/test55.css

@@ -8,28 +8,29 @@
   flex-direction: row;
 }
 .box55 .temperature-box {
-  width: 50%;
+  width: 60%;
   color: #fff;
 }
 .box55 .box-box {
-  margin-top: 15%;
+  margin-top: 20%;
   display: flex;
 }
 .box55 .temperature-box-one {
-  margin-left: 20px;
-  width: 20%;
+  width: 33%;
   height: 50px;
-  line-height: 30px;
+  line-height: 170px;
+  font-size: 0.15rem !important;
 }
 .box55 .Horizontal-line {
   border: 1px dashed #fff;
+  width: 75%;
 }
 
 .box55 .floor-dist {
   width: 40%;
 }
 .box55 .text-box {
-  margin-top: 24%;
+  margin-top: 12%;
   margin-left: 10%;
   text-align: center;
   display: flex;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test58/test58.css

@@ -9,6 +9,7 @@
 }
 .box58 .floor-dist {
   width: 50%;
+  margin-top: 5%;
 }
 .Water-immersion {
   width: 50%;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test59/test59.css

@@ -9,6 +9,7 @@
 }
 .box59 .floor-dist {
   width: 50%;
+  margin-top: 5%;
 }
 .Water-immersion {
   width: 50%;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test60/test60.css

@@ -11,9 +11,9 @@
   width: 50%;
 }
 .Water-immersion {
-  width: 50%;
+  width: 90%;
   height: 100%;
-  margin-top: 5%;
+  margin-top: 10%;
   display: flex;
 }
 .Water-immersion-text {
@@ -22,13 +22,12 @@
   font-style: italic;
 }
 .Water-immersion-box-one {
-  width: 30%;
-  height: 40%;
+  width: 38%;
+  height: 65%;
   background: #1e3e5d;
   border-radius: 20%;
   text-align: center;
   margin-left: 5%;
-  margin-top: 0.4rem;
 }
 .Water-immersion-box-title {
   margin: auto;

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test61/test61.css

@@ -1,245 +1,244 @@
 .box61 .test-box {
-    width: 100%;
-    height: 100%;
-    padding: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
 }
 
 .box61 .content {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .bg-center {
-    width: 100%;
-    height: 50%;
-    background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat;
-    background-size: 100%;
-    position: absolute;
+  width: 100%;
+  height: 50%;
+  background: url("../../css/modules/layer/default/组69拷贝.png") no-repeat;
+  background-size: 100%;
+  position: absolute;
 }
 
 .bg-center-img-one {
-    position: absolute;
-    top: 30%;
-    left: 46%;
-    width: 10%;
-    text-align: center;
+  position: absolute;
+  top: 30%;
+  left: 46%;
+  width: 10%;
+  text-align: center;
 }
 
 .bg-center-img-one-text {
-    font-size: 0.2rem !important;
-    font-weight: 700;
-    color: #75e2fa;
+  font-size: 0.2rem !important;
+  font-weight: 700;
+  color: #75e2fa;
 }
 
 .bg-center-img-one img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .bg-center-img-two {
-    position: absolute;
-    top: 12%;
-    width: 5%;
-    left: 22%;
-    text-align: center;
+  position: absolute;
+  top: 12%;
+  width: 5%;
+  left: 22%;
+  text-align: center;
 }
 
 .bg-center-img-two-text {
-    font-size: 0.15 !important;
-    font-weight: 700;
-    color: #75e2fa;
+  font-size: 0.15 !important;
+  font-weight: 700;
+  color: #75e2fa;
 }
 
 .bg-center-img-three {
-    position: absolute;
-    width: 6%;
-    top: 47%;
-    left: 13%;
-    text-align: center;
+  position: absolute;
+  width: 6%;
+  top: 47%;
+  left: 13%;
+  text-align: center;
 }
 
 .bg-center-img-three-text {
-    font-size: 0.15rem !important;
-    font-weight: 700;
-    color: #75e2fa;
+  font-size: 0.15rem !important;
+  font-weight: 700;
+  color: #75e2fa;
 }
 
 .bg-center-img-four {
-    position: absolute;
-    top: 40%;
-    right: 10%;
-    width: 5%;
-    text-align: center;
+  position: absolute;
+  top: 40%;
+  right: 10%;
+  width: 5%;
+  text-align: center;
 }
 
 .bg-center-img-four-text {
-    font-size: 0.15rem !important;
-    font-weight: 700;
-    color: #fff;
+  font-size: 0.15rem !important;
+  font-weight: 700;
+  color: #fff;
 }
 
 .bg-center-img-three img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .bg-center-img-two img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .bg-center-img-four img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .bg-botton {
-    margin: auto;
-    width: 25%;
-    height: 50%;
-    position: absolute;
-    top: 50%;
-    left: 38%;
+  margin: auto;
+  width: 25%;
+  height: 50%;
+  position: absolute;
+  top: 50%;
+  left: 38%;
 }
 
 .bg-botton img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .bg-botton-two {
-    width: 100%;
-    height: 50%;
-    background: url("../../css/modules/layer/default/传送带拷贝.png") no-repeat;
-    background-size: 100%;
-    position: absolute;
-    top: 80%;
-    display: flex;
-    justify-content: space-between;
-    color: #9fdbf0;
-    text-align: center;
+  width: 100%;
+  height: 50%;
+  background: url("../../css/modules/layer/default/传送带拷贝.png") no-repeat;
+  background-size: 100%;
+  position: absolute;
+  top: 80%;
+  display: flex;
+  justify-content: space-between;
+  color: #9fdbf0;
+  text-align: center;
 }
 
 .left-box {
-    width: 50%;
-    height: 100%;
-    display: flex;
+  width: 50%;
+  height: 100%;
+  display: flex;
 }
 
 .right-box {
-    width: 50%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    left: 53%;
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 53%;
 }
 
 .left-box-one {
-    width: 25%;
-    height: 100%;
-    background: url("../../css/modules/layer/default/组58.png") no-repeat;
-    background-size: 100%;
-    margin-top: -34%;
-    margin-left: 3%;
+  width: 25%;
+  height: 100%;
+  background: url("../../css/modules/layer/default/组58.png") no-repeat;
+  background-size: 100%;
+  margin-top: -34%;
+  margin-left: 3%;
 }
 
 .left-box-two {
-    width: 25%;
-    height: 100%;
-    background: url("../../css/modules/layer/default/业务系统.png") no-repeat;
-    background-size: 100%;
-    margin-top: -34%;
-    margin-left: 3%;
+  width: 25%;
+  height: 100%;
+  background: url("../../css/modules/layer/default/业务系统.png") no-repeat;
+  background-size: 100%;
+  margin-top: -34%;
+  margin-left: 3%;
 }
 
 .left-box-one-title {
-    margin-top: 20%;
+  margin-top: 20%;
 }
 
 .number-img {
-    width: 10%;
-    height: 30%;
-    margin: auto;
-    position: absolute;
-    top: 40%;
-    left: 46%;
+  width: 10%;
+  height: 30%;
+  margin: auto;
+  position: absolute;
+  top: 40%;
+  left: 46%;
 }
 
 .number-img img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 
 /* 弹窗样式 */
 
 .Popup {
-    width: 35%;
-    height: 30%;
-    /* font-size: 1rem !important; */
-    overflow: auto;
-    position: absolute;
-    top: 60%;
-    left: 20%;
-    background: url("../../css/modules/layer/default/色相饱和度1854.png") no-repeat;
-    background-size: 100% 100%;
+  width: 35%;
+  height: 30%;
+  /* font-size: 1rem !important; */
+  position: absolute;
+  top: 60%;
+  left: 20%;
+  background: url("../../css/modules/layer/default/色相饱和度1854.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .close-Popup {
-    color: #4decfd;
-    position: absolute;
-    top: 20%;
-    left: 49%;
-    font-size: 0.15rem !important;
+  color: #4decfd;
+  position: absolute;
+  top: 20%;
+  left: 49%;
+  font-size: 0.15rem !important;
 }
 
 .box61 .Popup #stuTable {
-    overflow: hidden;
-    width: 90%;
-    height: 55%;
-    text-align: center;
-    font-size: 0.15rem !important;
-    position: absolute;
-    top: 21%;
-    left: 5%;
+  overflow: hidden;
+  width: 90%;
+  height: 55%;
+  text-align: center;
+  font-size: 0.15rem !important;
+  position: absolute;
+  top: 21%;
+  left: 5%;
 }
 
 .number-box {
-    color: #fff;
-    position: relative;
-    top: 70%;
-    left: 37.5%;
+  color: #fff;
+  position: relative;
+  top: 70%;
+  left: 37.5%;
 }
 
 .Popup-name {
-    position: relative;
-    top: 5.5%;
-    left: 44%;
-    font-size: 0.15rem !important;
-    color: #4decfd;
+  position: relative;
+  top: 5.5%;
+  left: 44%;
+  font-size: 0.15rem !important;
+  color: #4decfd;
 }
 
 .box61 .Tr-td {
-    height: 20% !important;
+  height: 20% !important;
 }
 
 .box61 .Tr-td:nth-child(1) {
-    width: 20%;
+  width: 20%;
 }
 
 .box61 #stuTable thead {
-    color: #eee;
-    background-color: #205dcf83;
+  color: #eee;
+  background-color: #205dcf83;
 }
 
 .box61 #stuTable tbody {
-    color: #fff;
-    height: 80%;
-    background-color: #205dcf46;
+  color: #fff;
+  height: 80%;
+  background-color: #205dcf46;
 }
 
 .box61 .stuTableTr {
-    min-width: 20%;
-    height: 50%;
+  min-width: 20%;
+  height: 50%;
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/index.css

@@ -109,7 +109,7 @@ iframe {
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    z-index: 99;
+    z-index: 999999;
 }
 
 .springFrameTitle {
@@ -126,4 +126,15 @@ iframe {
 .springFrameTitle h2 {
     font-size: 00.3rem !important;
     line-height: 0.7rem;
+}
+
+.roomThree{
+  /* width: 50%;
+  height: 80%; */
+  /* width: 50%;
+  height: 50%; */
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999;
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/js/common.js

@@ -10,8 +10,8 @@ const imgURL = 'http://23.37.100.87:8182'; // 站群
 // 23.37.100.87
 // 机房 - DH
 const ROOM = 'http://23.37.100.87:7002';
-const DH = 'http://23.37.100.87:8084/threeapi/';
-// const DH = 'http://23.37.100.87:8084/imcp-api/';
+// const DH = 'http://23.37.100.87:8084/threeapi/';
+const DH = 'http://23.37.100.87:8084/imcp-api/';
 
 function getDateString(date) {
     const dt = new Date(date)

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/main.js

@@ -141,19 +141,21 @@ $.ajax({
 });
 
 
-// 动环接口
-$.ajax({
-    url: DH + 'apiUrl/sendApiUrl',
-    data: {
-        "urlCode": 'DH_002'
-    },
-    success: function(res) {
-        console.log('动环接口', res);
-    },
-    error: function(err) {
-        console.log('---动环接口-----------超时');
-    }
-});
+
+
+// 设备状态
+// $.ajax({
+//   url: DH + 'queryData/queryDeviceParam',
+//   data: {
+//       "urlCode": 'DH_004'
+//   },
+//   success: function(res) {
+//       console.log('设备状态', res);
+//   },
+//   error: function(err) {
+//       console.log('---设备状态-----------超时');
+//   }
+// });
 
 
 

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/main.html

@@ -328,7 +328,11 @@
         </div>
     </div>
 
-
+    <div id="ThreeJS62" class="roomThree roomThree62" style="visibility:hidden"></div>
+    <div id="ThreeJS63" class="roomThree roomThree63" style="visibility:hidden"></div>
+    <div id="ThreeJS64" class="roomThree roomThree64" style="visibility:hidden"></div>
+    <div id="ThreeJS65" class="roomThree roomThree65" style="visibility:hidden"></div>
+    <div id="ThreeJS66" class="roomThree roomThree66" style="visibility:hidden"></div> 
 
     <div class="bossMeng"></div>
     <script src="../components/test8/graphData.js"></script>
@@ -382,9 +386,7 @@
     <script src="../main/js/setCharts.js"></script>
     <script src="./js/main.js" type="module"></script>
 
-    <script src="./js/netWorkDevOps.js"></script>
-
-    </script>
+    <script src="./js/netWorkDevOps.js"></script></script>
 
 
 </body>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/springFrame5.html

@@ -7,12 +7,6 @@
     padding: 0.5rem;
   }
 
-  .springFrame5 .roomThree{
-    width: 50%;
-    height: 80%;
-    position: absolute;
-    z-index: 99;
-  }
   .springFrame5 .box57 .content{
     padding-top: 0.7rem;
   }
@@ -312,11 +306,11 @@
 
 
 
-  <div id="ThreeJS62" class="roomThree roomThree62" style="visibility:hidden"></div>
+  <!-- <div id="ThreeJS62" class="roomThree roomThree62" style="visibility:hidden"></div>
   <div id="ThreeJS63" class="roomThree roomThree63" style="visibility:hidden"></div>
   <div id="ThreeJS64" class="roomThree roomThree64" style="visibility:hidden"></div>
   <div id="ThreeJS65" class="roomThree roomThree65" style="visibility:hidden"></div>
-  <div id="ThreeJS66" class="roomThree roomThree66" style="visibility:hidden"></div>
+  <div id="ThreeJS66" class="roomThree roomThree66" style="visibility:hidden"></div> -->
 
 
   <div class="box60 box" data-name="test60" style="width: 3972px;height:1260px;left:11384px;top:2356px;">