数字孪生修改

src/components/UeVideo.vue

@@ -14,11 +14,11 @@ export default {
   name: 'UeVideo',
 
   setup(props,  context) {
-    
+
     let video = ref(null)
     let videoInstance = ref(null)
 
-    
+
 
     onMounted(()=>{
 
@@ -26,7 +26,8 @@ export default {
 
       videoInstance = initLoad({
         context,
-        serverUrl: 'http://10.1.161.67:8080/',
+        // serverUrl: 'http://10.1.161.67:8080/',
+        serverUrl: 'http://172.16.58.195:8080/',
         autoConnection: false,
         showPlayOverlay: true,
         qualityControl: true,
@@ -37,14 +38,14 @@ export default {
       })
 
       // videoInstance = load()
-    
+
       //添加UE的消息监听
       addResponseEventListener('play-video', async (data) => {
           alert("test");
       })
 
     })
-    
+
     return  {
       video,
       //向UE发送一个字符串.打印在游戏屏幕上

src/request/index.js

@@ -30,10 +30,10 @@ service.interceptors.request.use(
 			config.data.token = state.token.value
 			return config;
 		} */
-		
+
 		config.data.token = state.token.value
 		return config;
-		
+
 	},
 	(error) => {
 		return Promise.reject(error);

src/views/home/Header.vue

@@ -74,7 +74,7 @@
                 </div>
               </div>
             </div>
-            
+
           </div>
           <div class="right-box" @click="toggleScene">
             <span class="now-time">{{time}}</span>
@@ -98,11 +98,11 @@
               </div>
             </div>
           </div>
-          
+
         </div>
       </div>
     </div>
-    
+
   </div>
 </template>
 
@@ -255,7 +255,7 @@ export default {
     dfmzStatus = !dfmzStatus
   }
 
-  
+
   const waterLevelNum = computed(() => {
     let arr = []
     for(let i=2000; i<=5000; i+=200) {
@@ -311,7 +311,8 @@ export default {
             setWaterLevel(document.getElementById('wl-center'),[waterLevelNow.value])
           })
         } else {
-          waterLevelShow.value = false 
+          waterLevelShow.value = false
+          toggleSwqk(280)
         }
         break;
       case 7:
@@ -327,7 +328,10 @@ export default {
         }, 200);
         break;
       case 9:
-        if(status) { hsxOn() } else { hsxOff() }
+        hsxOn()
+        setTimeout(() => {
+          toolList[index].status = !toolList[index].status
+        }, 200);
         break;
     }
 
@@ -446,9 +450,9 @@ export default {
   function swqkOn() {
     let action1 = {
       "ActionName":"fly",
-      "Parameters":{ "x":230843,"y":-78457,"z":998,"roll_x":0,"roll_y":-20,"roll_z":64 }
+      "Parameters":{ "x":230843,"y":-78457,"z":998,"roll_x":0,"roll_y":-20,"roll_z":-6 }
     }
-    callUIInteractionFormat(JSON.stringify(action1));
+    callUIInteractionFormat(action1);
     toggleSwqk(374)
   }
 
@@ -477,8 +481,8 @@ export default {
 
   function hsxOn() {
     let action = {
-      "ActionName":"hangshenxian",
-      "Parameters":{ "show":"true" }
+      "ActionName":"fly",
+      "Parameters":{ "x":-4366605,"y":3078090,"z":3848,"roll_x":0,"roll_y":-34,"roll_z":142 }
     }
     callUIInteractionFormat(action);
   }
@@ -496,7 +500,7 @@ export default {
   onBeforeUnmount(() => {
     bus.off('hideToolBox');
   })
-  
+
 </script>
 
 <style lang="scss" scoped>
@@ -518,7 +522,7 @@ export default {
     background-size: 100% 100%;
     z-index: 101;
   }
-  
+
   .bg-gradient {
     position: absolute;
     top: 0;
@@ -528,7 +532,7 @@ export default {
     background: linear-gradient(0deg, rgba(0,17,50,0), rgba(0,17,51,0.55), rgba(0,17,50,0.8));
     z-index: 100;
   }
-  
+
 
   .title {
     position: absolute;
@@ -616,7 +620,7 @@ export default {
     .btn-dfmz {
       background: url('@/assets/imgs/dfmz.png') no-repeat;
       background-size: contain;
-      
+
     }
     .btn-fulls {
       background: url('@/assets/imgs/fulls.png') no-repeat;
@@ -714,7 +718,7 @@ export default {
           }
         }
       }
-      
+
     }
 
     .right-box {
@@ -729,7 +733,7 @@ export default {
       font-size: 30px;
       margin-right: 16px;
     }
-    
+
     .date {
       position: relative;
       text-align: left;
@@ -897,7 +901,7 @@ export default {
       .wl-left  {
         width: 35%;
         box-sizing: border-box;
-        
+
       }
 
       .wl-center {

src/views/home/Tab.vue

@@ -11,7 +11,7 @@
         <span class="tab-label">{{item.name}}</span>
       </div>
     </div>
-    
+
   </div>
 </template>
 
@@ -24,6 +24,7 @@ export default {
 <script setup>
   import {  } from 'vue';
   import { useRouter } from 'vue-router'
+  import {callUIInteraction} from "@/webRtcVideo";
   const router = useRouter()
 
   const tabList = [
@@ -35,11 +36,37 @@ export default {
 
 
   function changePage(name) {
+    if (name === "WaterTransport"){
+      sskyOn()
+    }else {
+      sskyOff()
+    }
     router.push({
       name
     })
   }
 
+  function callUIInteractionFormat(action) {
+    if(action['Parameters']) {
+      action['Parameters'] = JSON.stringify(action['Parameters'])
+    }
+    callUIInteraction(action)
+  }
+
+  function sskyOn(){
+    let action = {
+      "ActionName":"show_only_lycb"
+    }
+    callUIInteractionFormat(action);
+  }
+
+  function sskyOff(){
+    let action = {
+      "ActionName":"close_only_lycb"
+    }
+    callUIInteractionFormat(action);
+  }
+
 
 </script>
 
@@ -52,7 +79,7 @@ export default {
   height: 12.9%;
   z-index: 98;
 
-  
+
   .bg-gradient {
     position: absolute;
     bottom: 0;

src/views/ssky/Index.vue

@@ -13,7 +13,7 @@
           </div>
         </div> -->
         <!-- <div class="ylzy-item" @click="handleBDListShow('ylzy-boat')"> -->
-        <div class="ylzy-item">
+        <div class="ylzy-item" @click="handleBDListShow('ylzy-boat')">
           <img :src="require('@/assets/imgs/icon-youchuan.png')" alt="">
           <div>
             <span>游船数</span>
@@ -115,7 +115,7 @@
       </div>
       <div class="pr-b3">
         <span class="title1">预警信息</span>
-        <div v-for="item, index in yjxxData" :key="index" class="prb3-item">
+        <div v-for="item, index in yjxxData" @click="yyxxClick(item.mmsi)" :key="index" class="prb3-item">
           <span>{{item.name}}</span>
           <span>{{item.time}}</span>
           <span>{{item.type}}</span>
@@ -124,7 +124,7 @@
       </div>
     </div>
     <LshbDialog v-if="lshbDiaShow" :lshb-data="lshbCurrent.value" @closeDialog="closeLshbDia" />
-    
+
   </div>
 </template>
 
@@ -177,13 +177,14 @@ export default {
         nextTick(() => {
           ldklListScroll()
         })
-        
+
       }
     })
     GetTouristBoat().then(res => {
       if(res?.Result?.data) {
-        ldzyData.dc = res.count
-        ldzyData.boatList = res.Result.data
+        ldzyData.boatList = res.Result.data.filter(item=>item.SHIPTYPENAME!=='旅游客船')
+        ldzyData.dc = ldzyData.boatList.length //res.count
+        ylzyData.boatList = res.Result.data.filter(item=>item.SHIPTYPENAME==='旅游客船')
       }
     })
     GetFerryStation().then(res => {
@@ -229,7 +230,7 @@ export default {
     GetPJWharf().then(res => {
       if(res?.data?.Rows?.list) {
         ylzyData.dockNum = res.data.Rows.total
-        ylzyData.boatNum = 36
+        ylzyData.boatNum = 26
         ylzyData.dockList = res.data.Rows.list
       }
 
@@ -291,13 +292,13 @@ export default {
       { name: '特色航班', value: 0 },
       { name: '临时航班', value: 0 },
     ]
-  }) 
+  })
 
   const lshbData = reactive({value: [
-    { name: '浦江游览5', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' },
-    { name: '水晶公主',  value:   62, type: '婚庆', ent: '上海浦江游览集团有限公司' },
-    { name: '浦江游览1', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' },
-  ]}) 
+    { name: '浦江游览6', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' , mmsi: '413768391'},
+    { name: '水晶公主',  value:   62, type: '婚庆', ent: '上海浦江游览集团有限公司' , mmsi: '413865158'},
+    { name: '君子兰', value:  110, type: '商务', ent: '上海浦江游览集团有限公司' , mmsi: '413793788'},
+  ]})
 
   function formatNum(num){
     return num.toLocaleString()
@@ -343,25 +344,25 @@ export default {
     boatList: [],
     dockList: []
   })
-  
+
   const ldklData = reactive({value: [
     { name: '当前总客流', value: 0 },
     { name: '行人数', value: 0 },
     { name: '两轮车数', value: 0 },
     { name: '三轮车数', value: 0 },
-  ]}) 
+  ]})
 
   const ldklLineData = reactive({value: [
     {name: "-", num1: "0", num2: "0", num3: "0", sum: "0"},
     {name: "-", num1: "0", num2: "0", num3: "0", sum: "0"},
-  ]}) 
+  ]})
 
   const yjxxData = [
-    { name: '世博客渡18', time: '09:47', type: '船舶避碰', status: '待处置' },
-    { name: '世博客渡18', time: '09:44', type: '人员越界', status: '已处置' },
-    { name: '世博客渡20', time: '09:42', type: '船舶避碰', status: '已处置' },
-    { name: '世博客渡20', time: '09:42', type: '船舶避碰', status: '待处置' },
-    { name: '世博客渡18', time: '09:41', type: '人员越界', status: '待处置' },
+    { name: '世博客渡18', time: '09:47', type: '船舶避碰', status: '待处置' , mmsi : '413766676'},
+    { name: '世博客渡18', time: '09:44', type: '人员越界', status: '已处置' , mmsi : '413766676'},
+    { name: '世博客渡20', time: '09:42', type: '船舶避碰', status: '已处置' , mmsi : '413766678'},
+    { name: '世博客渡20', time: '09:42', type: '船舶避碰', status: '待处置' , mmsi : '413766678'},
+    { name: '世博客渡18', time: '09:41', type: '人员越界', status: '待处置' , mmsi : '413766676'},
   ]
 
   const lineSelected = ref(false)
@@ -403,7 +404,7 @@ export default {
     }
     callUIInteraction(action)
   }
-  
+
   function lineOn() {
     let action = {
       "ActionName":"show_line"
@@ -446,6 +447,18 @@ export default {
     callUIInteractionFormat(action);
   }
 
+  function yyxxClick(mmsi) {
+    let action = {
+      "ActionName":"position_by_type",
+      "Parameters":{
+        "position_type": 'boat',
+        "position_name": mmsi
+      }
+    }
+
+    callUIInteractionFormat(action);
+  }
+
 </script>
 
 <style lang="scss" scoped>
@@ -560,7 +573,7 @@ export default {
           color: transparent;
           z-index: 101;
         }
-        
+
         span:last-child {
           position: absolute;
           width: 108px;
@@ -730,7 +743,7 @@ export default {
             }
           }
         }
-       
+
       }
       &>div:nth-child(2) > i {
         background: url('@/assets/imgs/boat-dcs.png') no-repeat;

src/views/ssky/cpns/BoatDockList.vue

@@ -8,7 +8,7 @@
             <span>{{index+1}}</span>
             <span>{{item.BOATNAME}}</span>
             <!-- <span>航行中</span> -->
-            <span>{{item.VELOCITY==1?'航行中': '停泊中'}}</span>
+            <span :class="item.UNDERSAIL==1?'Sailing':''">{{item.UNDERSAIL==1?'航行中': '停泊中'}}</span>
           </div>
           <div class="item-row2">
             <span>MMSI : </span>
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <script setup>
-  
+
   import { defineProps, onMounted, reactive, ref } from 'vue'
   import { useInfiniteScroll } from '@vueuse/core'
   import { callUIInteraction } from '@/webRtcVideo.js'
@@ -65,7 +65,7 @@ export default {
     () => {
       // load more
       const length = listSlice.value.length
-      if(length<props.listData.length) { 
+      if(length<props.listData.length) {
         showLoading.value = true
         setTimeout(() => {
           listSlice.value.push(...props.listData.slice(length, length+10))
@@ -92,19 +92,19 @@ export default {
       }
     }
     switch(props.listTitle) {
-      case '码头信息': 
+      case '码头信息':
         action.Parameters.position_type = 'lymt'
         action.Parameters.position_name = item.portName
         break
-      case '渡口信息': 
+      case '渡口信息':
         action.Parameters.position_type = 'mt'
         action.Parameters.position_name = item.name
         break
-      default: 
+      default:
         action.Parameters.position_type = 'boat'
         action.Parameters.position_name = item.MMSI
     }
-    
+
     callUIInteractionFormat(action);
   }
 
@@ -124,7 +124,7 @@ export default {
   border-radius: 4px;
   box-shadow: 0 2px 12px 0 rgba(0, 17, 51, 0.2);
   overflow: hidden;
-  
+
   .no-data {
     margin: 20px 0;
     text-align: center;
@@ -201,8 +201,18 @@ export default {
           text-align: center;
           font-size: 14px;
           // font-weight: bold;
-          background: url('@/assets/imgs/bg-boat-status.png') no-repeat;
+          background: url('@/assets/imgs/bg-boat-status-yellow.png') no-repeat;
           background-size: 100% 100%;
+          &.Sailing{
+            display: inline-block;
+            width: 90px;
+            height: 26px;
+            line-height: 30px;
+            text-align: center;
+            font-size: 14px;
+            background: url('@/assets/imgs/bg-boat-status-green.png') no-repeat !important;
+            background-size: 100% 100% !important;
+          }
         }
       }
       .item-row2 {
@@ -259,7 +269,7 @@ export default {
     }
   }
 
-  
+
 
   .title {
     display: block;

src/views/ssky/cpns/ListBoxLshb.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="row1">
+    <div class="row1" @click="handleClick(props.listData.mmsi)">
       <span :title="props.listData.name">{{props.listData.name}}</span>
       <div>
         <span>{{props.listData.value}}</span>
@@ -24,8 +24,9 @@ export default {
 </script>
 
 <script setup>
-  
+
   import { defineProps } from 'vue'
+  import {callUIInteraction} from "@/webRtcVideo";
 
   const props = defineProps(['list-data'])
 
@@ -35,6 +36,27 @@ export default {
     emit('showLshbDetail', props.listData)
   }
 
+
+  function handleClick(mmsi) {
+    let action = {
+      "ActionName":"position_by_type",
+      "Parameters":{
+        "position_type": 'boat',
+        "position_name": mmsi
+      }
+    }
+
+    callUIInteractionFormat(action);
+  }
+
+
+  function callUIInteractionFormat(action) {
+    if(action['Parameters']) {
+      action['Parameters'] = JSON.stringify(action['Parameters'])
+    }
+    callUIInteraction(action)
+  }
+
 </script>
 
 <style lang="scss" scoped>

src/webRtcVideo.js

@@ -120,7 +120,7 @@ function setupHtmlEvents() {
 
 	//HTML elements controls
 	let overlayButton = document.getElementById('overlayButton');
-	overlayButton.addEventListener('click', onExpandOverlay_Click); 
+	overlayButton.addEventListener('click', onExpandOverlay_Click);
 
 	let resizeCheckBox = document.getElementById('enlarge-display-to-fill-window-tgl');
 	if (resizeCheckBox !== null) {
@@ -155,7 +155,7 @@ function setupHtmlEvents() {
 				};
 				// TODO: The descriptor should be sent as is to a generic handler on the UE side
 				// but for now we're just sending it as separate console commands
-				//emitUIInteraction(initialDescriptor); 
+				//emitUIInteraction(initialDescriptor);
 				sendQualityConsoleCommands(initialDescriptor);
 				console.log(initialDescriptor);
 
@@ -591,7 +591,7 @@ function onWebRtcAnswer(webRTCData) {
 
 		// "blinks" quality status element for 1 sec by making it transparent, speed = number of blinks
 		let blinkQualityStatus = function(speed) {
-			let iter = speed; 
+			let iter = speed;
 			let opacity = 1; // [0..1]
 			let tickId = setInterval(
 				function() {
@@ -831,7 +831,7 @@ function resizePlayerStyle(event) {
 	} else {
 		resizePlayerStyleToArbitrarySize(playerElement);
 	}
-	
+
 	// Calculating and normalizing positions depends on the width and height of
 	// the player.
 	playerElementClientRect = playerElement.getBoundingClientRect();
@@ -1619,7 +1619,9 @@ function connect() {
 
 	// ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));
 
-	ws = new WebSocket('ws://10.1.161.67:8080');
+	ws = new WebSocket('ws://10.1.161.68:8080');
+	// ws = new WebSocket('ws://172.16.58.195:8080');
+	// ws = new WebSocket('ws://10.121.41.21:8080');
 
 	ws.onmessage = function (event) {
 		console.log(`<- SS: ${event.data}`);