自动填满视频监控

src/components/Index.vue

@@ -338,6 +338,7 @@ export default {
 }
 a,
 .parent-router {
+  white-space: nowrap;
   cursor: pointer;
   min-width: 66px;
   text-align: center;
@@ -446,4 +447,7 @@ a,
   display: inline-block;
   vertical-align: top;
 }
+.temperature {
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file

src/components/construction/Index.vue

@@ -5,7 +5,11 @@
       <ShadowContainer class="long-container">
         <div class="construction-status">
           <div class="construction-details">
-            <div class="construction-detail">
+            <div style="display: flex; justify-content: center">
+              <div
+                class="construction-detail"
+                style="border-right: 1px solid rgba(9, 124, 167, 0.5)"
+              >
                 <div class="data">{{ screenDetail.project_cost }}</div>
                 <div class="text">工程造价(万元)</div>
               </div>
@@ -13,21 +17,28 @@
                 <div class="data">{{ screenDetail.build_area }}</div>
                 <div class="text">建筑面积(㎡)</div>
               </div>
-            <div class="construction-detail">
-              <div class="data small">
-                {{
+            </div>
+            <div
+              style="
+                border-top: 1px solid rgba(9, 124, 167, 0.5);
+                width: 90%;
+                margin: 0 auto;
+                padding-top: 12px;
+              "
+            >
+              <div style="font-size: 14px; color: #ffaf51">
+                项目经理：{{
                   screenDetail.manageList &&
                   screenDetail.manageList[0] &&
                   screenDetail.manageList[0].person_name
                 }}
-                <br />
+                /
                 {{
                   screenDetail.manageList &&
                   screenDetail.manageList[0] &&
                   screenDetail.manageList[0].person_mobile
                 }}
               </div>
-              <div class="text">项目经理</div>
             </div>
           </div>
           <div class="divider">
@@ -510,14 +521,17 @@ export default {
   margin-top: 0;
 }
 .construction-details {
-  display: flex;
-  justify-content: space-between;
   text-align: center;
   margin-bottom: 28px;
   position: relative;
-  padding: 24px 0;
+  padding: 18px 0 12px;
   background: url("@/assets/icon-short-bg.png") no-repeat;
   background-size: 100% 100%;
+  .construction-detail {
+    width: calc(50% - 18px);
+    padding-bottom: 6px;
+    margin-bottom: 10px;
+  }
   img {
     position: absolute;
     width: 100%;

src/components/elevator/Index.vue

@@ -594,13 +594,15 @@ export default {
     }
   }
   .warning-table-time {
-    width: 40%;
+    width: 30%;
   }
   .warning-table-device,
-  .warning-table-message,
   .warning-table-status {
     width: 20%;
   }
+  .warning-table-message {
+    width: 30%;
+  }
   .warning-table-message {
     text-overflow: ellipsis;
     overflow: hidden;

src/components/noise/Index.vue

@@ -863,13 +863,15 @@ export default {
     }
   }
   .warning-table-time {
-    width: 40%;
+    width: 30%;
   }
   .warning-table-device,
-  .warning-table-message,
   .warning-table-status {
     width: 20%;
   }
+  .warning-table-message {
+    width: 30%;
+  }
 }
 #stats-container {
   position: relative;

src/components/projectcheck/CorrectDialog.vue

@@ -144,7 +144,10 @@
                 审核备注：{{ correct.check_examine_remark }}
               </div>
             </div>
-            <div class="dialog-form border">
+            <div
+              class="dialog-form border"
+              v-if="correct.check_examine_status != 3"
+            >
               <div class="dialog-item">
                 负责人复查：{{ correct.duty_person_name }}
                 /

src/components/supervisory/Index.vue

@@ -93,7 +93,8 @@ export default {
       activeIndex: null,
       liveVisible: false,
       singlePlayer: null,
-      activeSplice: 4,
+      activeSplice: 9,
+      videoURLArray: [],
     };
   },
   mounted() {
@@ -103,6 +104,49 @@ export default {
     getVideoTreeData() {
       getVideoTreeData().then((res) => {
         this.treeData = this.handleData(res.data);
+
+        this.videoURLArray = this.treeData
+          .map((item) => {
+            return item.children.map((items) => {
+              return items.id;
+            });
+          })
+          .flat();
+        if (this.videoURLArray.length > 9) {
+          this.videoURLArray = this.videoURLArray.slice(0, 9);
+        }
+
+        this.videoURLArray.map((id, index) => {
+          this.cameraList.push({
+            player: undefined,
+            id: id,
+          });
+          getVideoLiveAddressUrl(id).then((res) => {
+            this.$nextTick(() => {
+              const myVideoDiv = document.getElementById(
+                `video-container-${index + 1}`
+              );
+              myVideoDiv.innerHTML = `<video
+          id="singleVideo${index + 1}"
+          autoplay="autoplay"
+          class="video-js vjs-default-skin"
+        ></video>`;
+              const singlePlayer = videojs(`singleVideo${index + 1}`, {
+                autoplay: true, // 自动播放
+                controls: true, // 控件显示
+                preload: "auto", //定义视频加载模式
+                loop: true, //是否循环播放
+              });
+              singlePlayer.src({
+                src: res.data.live_address_url,
+                type: "application/x-mpegURL",
+              });
+              singlePlayer.play();
+
+              this.cameraList[index].player = singlePlayer;
+            });
+          });
+        });
       });
     },
     handleData(data) {