滚动表格优化；loading文字

src/components/ScrollTable.vue

@@ -10,7 +10,9 @@
 </template>
 
 <script setup>
-import { nextTick, watch, ref } from 'vue'
+import { wait } from '@/utils/tools'
+import { useFps, useWindowSize, watchDebounced } from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
 
 const props = defineProps({
 	tableData: {
@@ -49,11 +51,23 @@ watch(
 	{ immediate: true, deep: true }
 )
 
+const { height: windowHeight } = useWindowSize()
+
+// 窗口高度改变时重新开始滚动
+watchDebounced(
+	windowHeight,
+	() => {
+		initScroll()
+	},
+	{ debounce: 500, maxWait: 1000 }
+)
+
 let animationId = null
 
-function initScroll() {
+const fps = useFps()
+
+async function initScroll() {
 	const ele = listRef.value
-	ele.style.maxHeight = 50 * props.rowNum + 'px'
 	let stopFlag = false
 	if (animationId !== null) {
 		stopFlag = true
@@ -66,7 +80,10 @@ function initScroll() {
 		return
 	}
 	let itemH = ele.scrollHeight / Math.ceil(tableData_render.value.length)
-	let intervalLast = props.interval
+	ele.style.maxHeight = itemH * props.rowNum + 'px'
+	if (fps.value === 0) await wait(500) // 等待fps值计算完成，否则为0
+	const computedInterval = Math.round((props.interval * (fps.value || 60)) / 60)
+	let intervalLast = computedInterval
 	const scroll = (isResume = false) => {
 		if (ele.scrollTop >= itemH) {
 			ele.scrollTo(0, 0)
@@ -76,7 +93,7 @@ function initScroll() {
 			intervalLast--
 		} else {
 			ele.scrollTo(0, ele.scrollTop + props.speed)
-			intervalLast = props.interval
+			intervalLast = computedInterval
 		}
 		if (stopFlag || isResume) {
 			window.cancelAnimationFrame(animationId)

src/views/home/cpns/PanelHxhs.vue

@@ -619,7 +619,7 @@ function handleInspect(level) {
 
 //查询网格
 function queryCube() {
-	layoutStore.toggleGlobalLoading(true)
+	layoutStore.toggleGlobalLoading('正在分析...')
 	// getPathCube({
 	// 	status: 'show',
 	// 	paths: [currentPath],
@@ -632,7 +632,7 @@ function queryCube() {
 
 //查询网格
 function queryCube24() {
-	layoutStore.toggleGlobalLoading(true)
+	layoutStore.toggleGlobalLoading('正在分析...')
 	getPathCube24({
 		status: 'show',
 		paths: [currentPath],
@@ -657,7 +657,7 @@ function getAutoPath() {
 			z: item[2],
 		})
 	})
-	layoutStore.toggleGlobalLoading(true)
+	layoutStore.toggleGlobalLoading('正在分析...')
 	routePlanAll({
 		height1: form.value.height1,
 		height2: form.value.height2,

src/views/home/cpns/PanelKyhs.vue

@@ -321,7 +321,7 @@ function handleInspect(show = true) {
 	let shape = {}
 	const shapeType = drawTypes.find((i) => i.value === form.value.drawType).shapeType
 	if (show) {
-		layoutStore.toggleGlobalLoading(true)
+		layoutStore.toggleGlobalLoading('正在分析...')
 		Object.keys(loadingDone.value).forEach((k) => (loadingDone.value[k] = false))
 		shape = { ...getShapeInfo(), level: '23' }
 		getInspectionData(shape, shapeType)
@@ -470,7 +470,7 @@ const formRef = ref(null)
 function toNext() {
 	formRef.value.validate((valid) => {
 		if (valid) {
-			layoutStore.toggleGlobalLoading(true)
+			layoutStore.toggleGlobalLoading('正在分析...')
 			clearDraw()
 			showShapes({
 				id: 'kyhs_drew_non_editable',

src/views/home/cpns/PanelQjchs.vue

@@ -338,7 +338,7 @@ function handleInspect(show = true) {
 	let shape = {}
 	const shapeType = drawTypes.find((i) => i.value === form.value.drawType).shapeType
 	if (show) {
-		layoutStore.toggleGlobalLoading(true)
+		layoutStore.toggleGlobalLoading('正在分析...')
 		Object.keys(loadingDone.value).forEach((k) => (loadingDone.value[k] = false))
 		shape = { ...getShapeInfo(), level: '23' }
 		getInspectionData(shape, shapeType)
@@ -484,7 +484,7 @@ function handleDisplay(row, val) {
 function toNext() {
 	formRef.value.validate((valid) => {
 		if (valid) {
-			layoutStore.toggleGlobalLoading(true)
+			layoutStore.toggleGlobalLoading('正在分析...')
 			clearDraw()
 			showShapes({
 				id: 'qjchs_drew_non_editable',

src/views/layout/Index.vue

@@ -2,6 +2,8 @@
 	<div id="layout" :class="{ loading: layoutStore.globalLoading, 'scene-loading': layoutStore.sceneLoading }">
 		<div v-if="layoutStore.globalLoading || layoutStore.sceneLoading" class="global-loader"></div>
 
+		<div class="loading-text" v-if="loadingText">{{ loadingText }}</div>
+
 		<div class="masking">
 			<div class="m-top"></div>
 			<div class="m-left" :class="{ collapse: layoutStore.leftCollapse }"></div>
@@ -14,13 +16,13 @@
 
 		<Footer class="footer" />
 
-		<UeVideo v-if="layoutStore.sceneType === 'ue'" class="scene" />
-		<MapView v-if="layoutStore.sceneType === 'gis'" class="scene" />
+		<!-- <UeVideo v-if="layoutStore.sceneType === 'ue'" class="scene" />
+		<MapView v-if="layoutStore.sceneType === 'gis'" class="scene" /> -->
 	</div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Header from './cpns/Header.vue'
 import HomePage from '@/views/home/Home.vue'
 import UeVideo from '@/components/UeVideo.vue'
@@ -30,6 +32,13 @@ import Footer from './cpns/Footer.vue'
 
 const layoutStore = ref(useLayoutStore())
 
+const loadingText = computed(() => {
+	let res = ''
+	if (typeof layoutStore.value.globalLoading === 'string') res = layoutStore.value.globalLoading
+	if (typeof layoutStore.value.sceneLoading === 'string') res = layoutStore.value.sceneLoading
+	return res
+})
+
 // 禁用默认右键菜单
 document.oncontextmenu = new Function('event.returnValue=false;')
 document.onselectstart = new Function('event.returnValue=false;')
@@ -59,6 +68,15 @@ document.onselectstart = new Function('event.returnValue=false;')
 		z-index: 99;
 	}
 
+	.loading-text {
+		position: absolute;
+		top: 60%;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 100;
+		font-size: 18px;
+	}
+
 	&.scene-loading::after {
 		z-index: 2;
 	}