Browse Source

修复无视频页面显示问题

cuiHe 9 months ago
parent
commit
6650e4b9ad
2 changed files with 10 additions and 7 deletions
  1. BIN
      src/assets/img/video_miss.png
  2. 10 7
      src/views/big-screen/single.vue

BIN
src/assets/img/video_miss.png


+ 10 - 7
src/views/big-screen/single.vue

@@ -5,7 +5,11 @@
     </div>
     <div class="left">
       <div class="left_top" v-loading="loading">
-        <div class="video" ref="myVideoRef" id="video-container"></div>
+        <div class="video" ref="myVideoRef" id="video-container" v-if="videoDataState"></div>
+        <div v-if="!videoDataState" style="width: 100%;height: 100%; display: flex;flex-direction: column; justify-content: center;align-items: center;">
+          <img style="width: 262px;height: 101px;" src="../../assets/img/video_miss.png" alt="">
+          <span style="font-size: 18px;color: #4F80F8;margin-top: 20px;">视频未接入</span>
+        </div>
       </div>
       <div class="left_bottom">
         <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
@@ -235,7 +239,7 @@
                 </span>
               </div>
               <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
-                {{ totalCountData.value != null ? totalCountData.value : 0+' 次' }}
+                {{ totalCountData.value != null ? totalCountData.value+' 次' : 0+' 次' }}
               </span>
           </div>
       </div>
@@ -363,8 +367,6 @@
   import {formatGears, formatValue, parseGear} from '@/utils/tools';
   import router from '@/router';
   const myVideoRef = ref(null)
-  let videoUrl = ref('')
-  let channelNo = ref('')
   let loading = ref(false)
   let myVideo: any = ref(null)
   const deviceId = ref(0)
@@ -405,7 +407,7 @@
   const totalCountData: any = ref({})
   //报警集合
   const alarmRecordArr: any = ref([]);
-
+  let videoDataState = true;
 
   onMounted(async () => {
     deviceId.value = parseInt(useQuery('id'))
@@ -417,15 +419,16 @@
   onUnmounted(() => {
 
   })
+  
   const init = async () => {
     loading.value = true
     try {
       await videoData.getData()
       if(videoData.data.cameras == null){
+        videoDataState = false;
+        ElMessage.error('视频加载失败!');
         return;
       }
-      channelNo.value = videoData.data.cameras[0].channelNo
-      videoUrl.value = videoData.data.cameras[0].url
       myVideo.value = new EZUIKit.EZUIKitPlayer({
         id: 'video-container', // 视频容器ID
         width: 402,