5.4

src/components/UeVideo.vue

@@ -3,7 +3,6 @@
     <i id="overlayButton" style="display: none;" ></i>
     <i id="qualityStatus" style="display: none;"></i>
     <div id="stats" style="display: none;" ></div>
-    <div id="connecting">连接中...</div>
   </div>
 </template>
 
@@ -20,8 +19,6 @@ export default {
     let video = ref(null)
     let videoInstance = ref(null)
 
-
-
     onMounted(()=>{
 
       // console.log('video.value', video.value);
@@ -124,14 +121,5 @@ export default {
     margin-top: 15vh;
   }
 
-  #connecting {
-    position: absolute;
-    top: 49vh;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 16px;
-    color: #ccc;
-  }
-
 }
 </style>

src/views/hdsj/Index.vue

@@ -34,11 +34,11 @@
         </ul>
         <span class="title2-left">工程信息</span>
         <ul class="gcxx-main" :class="{'is-short-list': listData_gcxx.value.length<3}">
-          <li class="gcxx-item" v-for="item,index in listData_gcxx.value" @click="handleChangeProject(item.id)">
+          <li class="gcxx-item" v-for="item,index in listData_gcxx.value" @click="handleChangeProject(item)">
             <img :src="require('@/assets/imgs/page_hdsj/icon-gcxx.png')" alt="">
             <div>
               <div>
-                <div :class="{'highlight': currentYear==='2022'&&item.id===currentProjectId}"><span>{{ item.prjName }}</span></div>
+                <div :class="{'highlight': currentYear==='2022'&&item.id===currentProject.id}"><span :title="item.prjName">{{ item.prjName }}</span></div>
                 <!-- <span
                   :class="{'status-wks': item.status==='未开始','status-jxz': item.status==='进行中','status-ywc': item.status==='已完成'}"
                 >{{ item.status }}</span> -->
@@ -56,9 +56,11 @@
         </ul>
       </div>
     </div>
-    <div class="panel-right">
+    <div class="panel-right" v-if="showRightDetail">
       <div class="pr-b1 pr">
         <span class="title1-right">疏浚监控</span>
+        <span class="title2-right">工程名称</span>
+        <span class="pro-name">{{ currentProject.name }}</span>
         <span class="title2-right">工程概况</span>
         <div class="part1-item" v-for="item in data_gcgk.sta">
           <img :src="item.iconUrl" alt="">
@@ -129,6 +131,7 @@
         </ul>
       </div>
     </div>
+    <div v-else class="panel-right pr-no-data">无数据</div>
   </div>
 </template>
 
@@ -207,17 +210,22 @@ export default {
 
   const listData_gcxx = reactive({value: []})
 
-  function handleChangeProject(id) {
-    currentProjectId.value = id
+  function handleChangeProject(item) {
+    currentProject.id = item.id
+    currentProject.name = item.prjName
   }
 
-  const currentProjectId = ref('')
-  watch(currentProjectId, (val)=> {
+  const currentProject = reactive({ id: '', name: '' })
+  const showRightDetail = ref(true)
+  watch(()=>currentProject.id, (val)=> {
     if(+currentYear.value>2021) {
       fstjListShow.value = false
       getFstj(val)
       getYjWarning(val)
       getBoatNum(val)
+      showRightDetail.value = true
+    }else {
+      showRightDetail.value = false
     }
   })
 
@@ -246,7 +254,8 @@ export default {
   function getGcxx(year) {
     GetGcxx(year).then(res => {
       listData_gcxx.value = res.data.Rows
-      currentProjectId.value = res.data.Rows[0].id
+      currentProject.id = res.data.Rows[0].id
+      currentProject.name = res.data.Rows[0].prjName
     })
   }
   
@@ -430,12 +439,17 @@ export default {
 
   .panel-right {
     right: 0;
-    padding: 0 30px 10px;
+    padding: 0 30px 30px;
     .pr {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
     }
+    &.pr-no-data {
+      justify-content: center;
+      align-items: center;
+      font-size: 18px;
+    }
   }
 
   .pl-b1 {
@@ -659,13 +673,21 @@ export default {
   }
 
   .pr-b1 {
+    .pro-name {
+      width: 80%;
+      display: block;
+      font-family: YSBTH;
+      font-size: 20px;
+      color: #f8ec95;
+      line-height: 26px;
+    }
     .part1-item {
       width: 80%;
       display: flex;
       align-items: center;
-      &:not(:last-child) {
-        margin-bottom: 15px;
-      }
+      // &:not(:last-child) {
+      //   margin-bottom: 15px;
+      // }
       &>img {
         width: 89px;
         height: 95px;
@@ -698,6 +720,7 @@ export default {
       width: 90%;
       display: flex;
       justify-content: space-between;
+      margin-top: 10px;
       &>div {
         width: 140px;
         height: 49px;
@@ -728,7 +751,7 @@ export default {
   .pr-b2 {
     #chart_fstj {
       width: 90%;
-      height: 23vh;
+      height: 20vh;
     }
     .fstj-list {
       // margin-top: 0.5vh;
@@ -797,14 +820,14 @@ export default {
       align-items: flex-end;
       width: 100%;
       // height: 20vh;
-      margin: 10px 0 25px;
+      // margin: 10px 0 25px;
 
       .prb3-item2 {
         width: 85%;
         height: 24px;
         display: flex;
         align-items: center;
-        margin: 14px 0;
+        margin: 10px 0;
         background: url('@/assets/imgs/page_hdsj/bg-wgyj-list.png') no-repeat;
         background-size: 100% 100%;
         span:nth-child(2) {

src/webRtcPlayer.js

@@ -51,6 +51,7 @@
 
             video.id = "streamingVideo";
             video.playsInline = true;
+            video.muted = 'muted'
             video.addEventListener('loadedmetadata', function(e){
                 if(self.onVideoInitialised){
                     self.onVideoInitialised();

src/webRtcVideo.js

@@ -387,8 +387,8 @@ function resetAfkWarningTimer() {
 function createWebRtcOffer() {
 	if (webRtcPlayerObj) {
 		//console.log('Creating offer');
-		// showTextOverlay('Starting connection to server, please wait');
-		console.log('Starting connection to server, please wait')
+		showTextOverlay('正在连接至服务器，请稍等...');
+		// console.log('Starting connection to server, please wait')
 		webRtcPlayerObj.createOffer();
 	} else {
 		//console.log('WebRTC player not setup, cannot create offer');
@@ -449,14 +449,21 @@ function setupWebRtcPlayer(htmlElement, config) {
 			if (shouldShowPlayOverlay) {
 				showPlayOverlay();
 				resizePlayerStyle();
+			}else {
+				if (webRtcPlayerObj) {
+					webRtcPlayerObj.video.play();
+					requestQualityControl();
+					showFreezeFrameOverlay();
+					hideOverlay();
+				}
 			}
 		}
 	};
 
 	webRtcPlayerObj.onDataChannelConnected = function () {
 		if (ws && ws.readyState === WS_OPEN_STATE) {
-			// showTextOverlay('WebRTC connected, waiting for video');
-			console.log('WebRTC connected, waiting for video')
+			showTextOverlay('连接成功，等待视频流...');
+			// console.log('WebRTC connected, waiting for video')
 		}
 	};
 
@@ -1592,13 +1599,18 @@ function start() {
 		statsDiv.innerHTML = 'Not connected';
 	}
 
-	if (!connect_on_load || is_reconnection) {
-		// showConnectOverlay();
+	if(connect_on_load) {
+		if(is_reconnection) {
+			invalidateFreezeFrameOverlay();
+			resizePlayerStyle();
+		}
+		connect();
+		startAfkWarningTimer();
+	} else {
+		showConnectOverlay();
 		invalidateFreezeFrameOverlay();
 		shouldShowPlayOverlay = true;
 		resizePlayerStyle();
-	} else {
-		connect();
 	}
 
 	updateKickButton(0);
@@ -1611,7 +1623,7 @@ function updateKickButton(playersCount) {
 }
 
 function connect() {
-	document.getElementById('connecting').style.display = 'none'
+	showTextOverlay('连接中...')
 	"use strict";
 
 	window.WebSocket = window.WebSocket || window.MozWebSocket;
@@ -1646,7 +1658,7 @@ function connect() {
 	};
 
 	ws.onclose = function (event) {
-		document.getElementById('connecting').style.display = 'block'
+		showTextOverlay("连接已断开")
 		console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
 		ws = undefined;
 		is_reconnection = true;
@@ -1661,7 +1673,7 @@ function connect() {
 
 		// showTextOverlay(`Disconnected: ${event.reason}`);
 		setTimeout(() => {
-			connect()
+			start()
 		}, 2000);
 		// var reclickToStart = setTimeout(start, 4000);
 	};