Browse Source

ue功能;echarts调整

gr 1 month ago
parent
commit
64ccd106f1

+ 20 - 19
src/echarts/echarts.js

@@ -1,26 +1,27 @@
 import * as echarts from 'echarts'
 
 // px自适应
-let windowHeight = document.documentElement.clientHeight;
-export function nowSize(val,initHeight=1080){
-  return Math.ceil(val * (windowHeight/initHeight));
+var windowHeight = document.documentElement.clientHeight
+export function nowSize(val, initHeight = 1080) {
+	return Math.ceil(val * (windowHeight / initHeight))
 }
 
+let resizeTimer
+
 export function setOptions(ele, option) {
-  let myEchart = echarts.init(ele)
-  myEchart.setOption({
-    ...option,
-  }, true)
-  myEchart.resize({
-    width: myEchart._dom.clientWidth,
-    height: myEchart._dom.clientHeight,
-  })
-  window.addEventListener('resize', () => {
-    windowHeight = document.documentElement.clientHeight;
-    myEchart.resize({
-      width: myEchart._dom.clientWidth,
-      height: myEchart._dom.clientHeight,
-    })
-  })
-  return myEchart
+	let myEchart = echarts.init(ele)
+	myEchart.setOption(
+		{
+			...option,
+		},
+		true
+	)
+	window.addEventListener('resize', () => {
+		clearTimeout(resizeTimer)
+		resizeTimer = setTimeout(() => {
+			windowHeight = document.documentElement.clientHeight
+			myEchart.resize()
+		}, 500)
+	})
+	return myEchart
 }

+ 62 - 0
src/utils/ueActions.js

@@ -182,6 +182,50 @@ export function initSceneDemo() {
 	})
 }
 
+// 闯入的区域绘制
+export function renderBreakIntoArea(status) {
+	renderShapes({
+		id: '1348278598334676992',
+		data: status
+			? {
+					type: 'polygon',
+					shape: {
+						height: 600,
+						rings: [
+							[
+								[6255.4622802734375, 7704.974487304695, 0],
+								[6267.506103515632, 7673.706115722649, 0],
+								[6247.277526855476, 7673.754882812493, 0],
+								[6235.2258911132885, 7673.784118652351, 0],
+								[6186.266906738281, 7655.02990722657, 0],
+								[6132.686096191406, 7634.504882812493, 0],
+								[6091.714904785156, 7618.8101196289135, 0],
+								[6076.5078735351635, 7612.985107421882, 0],
+								[6076.344299316406, 7613.0551147460865, 0],
+								[6075.8609008789135, 7614.1817016601635, 0],
+								[6074.783691406257, 7613.724121093743, 0],
+								[6074.054504394531, 7614.03649902343, 0],
+								[6068.8914794921875, 7611.220275878899, 0],
+								[6064.956298828125, 7609.5482788085865, 0],
+								[6046.9129028320385, 7645.6340942382885, 0],
+								[6034.35510253907, 7670.749877929695, 0],
+								[5994.250671386726, 7754.604125976555, 0],
+								[5985.743896484382, 7774.858886718757, 0],
+								[5988.1746826171875, 7780.935302734382, 0],
+								[5991.415283203132, 7787.416687011726, 0],
+								[6108.8927001953125, 7828.3311157226635, 0],
+								[6194.772277832031, 7859.1187133789135, 0],
+								[6241.358276367195, 7740.020874023445, 0],
+								[6255.4622802734375, 7704.974487304695, 0],
+							],
+						],
+						color: [255, 0, 0, 0.2],
+					},
+				}
+			: null,
+	})
+}
+
 /**
  * 场景演示
  * @param {'Near' | 'Yaw' | 'Electricity' | 'BreakInto' | 'Weather'} type
@@ -233,6 +277,7 @@ export function startSceneDemo(type) {
 				setUav('bdb8859e-b366-4c1a-a964-1e16ba15237a')
 				await wait(1000)
 				followUav('bdb8859e-b366-4c1a-a964-1e16ba15237a')
+				renderBreakIntoArea(true)
 				break
 			}
 			case 'Weather': {
@@ -250,3 +295,20 @@ export function startSceneDemo(type) {
 		}
 	})
 }
+
+// ue场景设置五角场视角
+export function resetCamera() {
+	sendMessage({
+		ModuleName: 'Roam',
+		ActionName: 'Goto',
+		Params: {
+			X: 399013.707493,
+			Y: -755350.361878,
+			Z: 23204.545816,
+			Pitch: -28.285303,
+			Yaw: 35.710186,
+			Roll: 0.0,
+			Duration: 0.1,
+		},
+	})
+}

+ 0 - 1
src/views/Login.vue

@@ -136,7 +136,6 @@ function handleLogin() {
 
 		& > h3 {
 			display: block;
-			font-family: PuHui;
 			font-weight: 500;
 			font-size: 48px;
 			color: #ffffff;

+ 19 - 2
src/views/home/cpns/FloatPanelTsjs.vue

@@ -35,9 +35,17 @@ import usePanelStore from '@/store/panel'
 import useUeStore from '@/store/ue'
 import { getAssetsFile } from '@/utils/require'
 import { hexToRgb, wait } from '@/utils/tools'
-import { clearAllShapes, startSceneDemo, initSceneDemo, renderShapes, toggleTrackLine } from '@/utils/ueActions'
+import {
+	clearAllShapes,
+	startSceneDemo,
+	initSceneDemo,
+	renderShapes,
+	toggleTrackLine,
+	renderBreakIntoArea,
+} from '@/utils/ueActions'
 import { getCurrentInstance, onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import FloatPanelUav from './FloatPanelUav.vue'
+import { toggleGlobalUav } from '@/utils/ueActions'
 
 const { proxy } = getCurrentInstance()
 
@@ -123,7 +131,10 @@ watch(
 	() => ueStore.sceneReady,
 	(val) => {
 		if (val) {
-			ueStore.toggleGlobalUav(true)
+			toggleGlobalUav(false)
+			setTimeout(() => {
+				ueStore.toggleGlobalUav(true)
+			}, 500)
 		}
 	},
 	{ immediate: true }
@@ -173,6 +184,9 @@ function handleCloseInfo() {
 	uavInfoShow.value = false
 	initSceneDemo()
 	panelStore.setWeather('Clear Skies')
+	if ((currentDemo.value.value = 'BreakInto')) {
+		renderBreakIntoArea(false)
+	}
 }
 
 onBeforeMount(() => {
@@ -246,6 +260,9 @@ onBeforeMount(() => {
 			}
 			case 'FlightOver': {
 				if (currentDemo.value) {
+					if ((currentDemo.value.value = 'BreakInto')) {
+						renderBreakIntoArea(false)
+					}
 					handleCloseInfo()
 					currentDemo.value = null
 				}

+ 10 - 1
src/views/layout/cpns/Header.vue

@@ -8,7 +8,7 @@
 			</div>
 		</div>
 		<div class="h-title">
-			<img src="@/assets/images/layout/logo.png" alt="" />
+			<img src="@/assets/images/layout/logo.png" alt="" @click="handleReset" />
 			<h1 class="title-text">低空飞行综合监管服务系统</h1>
 		</div>
 		<div class="h-right flex justify-end items-center shrink-0">
@@ -27,8 +27,11 @@ import { useDateFormat, useNow } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import usePanelStore from '@/store/panel'
 import { getAssetsFile } from '@/utils/require'
+import useLayoutStore from '@/store/layout'
+import { resetCamera } from '@/utils/ueActions'
 
 const panelStore = usePanelStore()
+const layoutStore = useLayoutStore()
 
 const clock = {
 	time: useDateFormat(useNow(), 'HH:mm:ss'),
@@ -54,6 +57,12 @@ function switchWeather() {}
 const currentWeather = computed(() => {
 	return weathers.value.find((i) => i.value === panelStore.weather)
 })
+
+function handleReset() {
+	if (layoutStore.sceneType === 'ue') {
+		resetCamera()
+	}
+}
 </script>
 
 <style lang="scss" scoped>

+ 0 - 2
src/views/nav/Index.vue

@@ -56,7 +56,6 @@ function handleNav(route) {
 	transform: translateX(-50%);
 	background: url('@/assets/images/layout/bg-text-line.png') no-repeat;
 	background-size: contain;
-	font-family: PuHui;
 	font-weight: 400;
 	font-size: 36px;
 	color: #e8f4ff;
@@ -95,7 +94,6 @@ function handleNav(route) {
 			position: absolute;
 			top: 8px;
 			z-index: 2;
-			font-family: PuHui;
 			font-weight: 500;
 			font-size: 24px;
 			color: #ffffff;