styleFix

src/components/tower/deviceDialog.vue

@@ -55,9 +55,10 @@
             <div class="status-text">数据更新</div>
           </div>
         </div>
-        <div id="video-container" v-if="deviceData.camera_id"></div>
+        <div id="video-container" v-if="deviceData.is_camera == 1"></div>
         <div id="video-container-img" v-else>
-          <img :src="deviceData.image_url" alt="" />
+          <img src="@/assets/tower/no_camera.png" alt="" />
+          <div>暂无监控信息</div>
         </div>
       </div>
 
@@ -179,32 +180,41 @@ export default {
       });
     },
     openedEvents() {
-      getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
-        const myVideoDiv = document.getElementById(`video-container`);
-        myVideoDiv.innerHTML = `<video
+      if (this.deviceData.is_camera == 1) {
+        getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
+          const myVideoDiv = document.getElementById(`video-container`);
+          myVideoDiv.innerHTML = `<video
             id="singleVideo"
             autoplay="autoplay"
             class="video-js vjs-default-skin"
           ></video>`;
-        const singlePlayer = videojs(`singleVideo`, {
-          autoplay: true, // 自动播放
-          controls: true, // 控件显示
-          preload: "auto", //定义视频加载模式
-          loop: true, //是否循环播放
-        });
-        singlePlayer.src({
-          src: res.data.live_address_url,
-          type: "application/x-mpegURL",
+          const singlePlayer = videojs(`singleVideo`, {
+            autoplay: true, // 自动播放
+            controls: true, // 控件显示
+            preload: "auto", //定义视频加载模式
+            loop: true, //是否循环播放
+          });
+          singlePlayer.src({
+            src: res.data.live_address_url,
+            type: "application/x-mpegURL",
+          });
+          singlePlayer.play();
+          this.player = singlePlayer;
+          getDeviceTodayChart(this.deviceId).then((result) => {
+            this.todayData = result.data;
+            this.$nextTick(() => {
+              this.renderTodayChart();
+            });
+          });
         });
-        singlePlayer.play();
-        this.player = singlePlayer;
+      } else {
         getDeviceTodayChart(this.deviceId).then((result) => {
           this.todayData = result.data;
           this.$nextTick(() => {
             this.renderTodayChart();
           });
         });
-      });
+      }
     },
   },
   computed: {
@@ -242,17 +252,24 @@ export default {
 .base-info {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 #video-container {
   width: calc(40% - 20px);
-  height: 200px;
 }
-.video-container-img {
-  width: calc(40% - 20px);
-  height: 200px;
+#video-container-img {
+  width: calc(40% - 50px);
+  text-align: center;
+  border: 1px solid #00b7ee;
+  box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
+  border-radius: 4px;
+  padding: 20px;
+  background: #113e77;
+  text-align: center;
+  font-size: 14px;
+  color: #3f6fab;
   img {
-    width: 100%;
-    height: 100%;
+    width: 130px;
     vertical-align: top;
   }
 }
@@ -271,6 +288,9 @@ export default {
   background: #113e77;
   text-align: center;
   margin-bottom: 20px;
+  &:nth-child(n + 5) {
+    margin-bottom: 0;
+  }
   .status-value {
     font-size: 18px;
     color: #13e0ff;