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,6 +180,7 @@ export default {
       });
     },
     openedEvents() {
+      if (this.deviceData.is_camera == 1) {
         getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
           const myVideoDiv = document.getElementById(`video-container`);
           myVideoDiv.innerHTML = `<video
@@ -205,6 +207,14 @@ export default {
             });
           });
         });
+      } 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;