GCSGUI/src/components/page/HomePage.vue

<script lang="ts">
import {defineComponent} from 'vue'
import SceneViewer from "@/components/SceneViewer.vue";
import BottomBar from "@/components/BottomBar.vue";
import Toolbar from "@/components/toolbar.vue";
import CollisionDetection from "@/components/CollisionDetection.vue";
import {useMessage} from 'naive-ui'
import {useStaticStore} from "@/store/staticOptions.js";

export default defineComponent({
  name: "HomePage",
  components: {CollisionDetection, Toolbar, BottomBar, SceneViewer},
  data(){
    return {
      showDetection: false,
      graphHeight: 0,
      message: useMessage(),
			staticStore: useStaticStore(),
			timeId: undefined,
			msgbox: true,
    }
  },
	mounted() {
		if(!window.navigator.onLine) {
			this.message.warning('无法连接互联网，当前为离线模式')
			this.staticStore.networkStatus.offlineMode = true
		}else{
			this.setNetworkTimer()
		}

		// 网络状态监测
		window.addEventListener('online', () => {
			this.message.success('网络已连接')
			this.staticStore.networkStatus.offlineMode = false
			this.setNetworkTimer()
		})
		window.addEventListener('offline', () => {
			this.message.warning('无法连接互联网，已进入离线模式')
			this.staticStore.networkStatus.offlineMode = true
			// 	关闭网络检测定时器
			this.timeId && clearInterval(this.timeId)
		})
	},
	computed: {
    setPageStyle: function () {
      return this.showDetection? 100 - this.graphHeight : 100
      }
  },
  methods: {
    // 显示地形碰撞检测面板，resize地图窗口
    resizeMap(height: number) {
      if(height<0)
        this.showDetection = false
      else{
        this.graphHeight = height
        this.showDetection = true
      }
    },
		setNetworkTimer(){
			this.timeId = setInterval(()=>{
				// console.log(navigator['connection'].downlink)
				if(navigator['connection'].downlink < 1){
					this.staticStore.networkStatus.offlineMode = true
					if(this.msgbox){
						this.message.warning('检测到当前网络环境差，已切换至离线模式')
						this.msgbox = false
					}
				}else{
					this.staticStore.networkStatus.offlineMode = false
					if(!this.msgbox){
						this.msgbox = true
						this.message.info('已切换至在线模式')
					}
				}
			},3000)
		}
  }
})
</script>

<template>
  <div id="map" :style="{height: setPageStyle+'vh'}">
    <SceneViewer id="scene-viewer"></SceneViewer>
    <BottomBar></BottomBar>
    <toolbar ref="ToolBar" @resizeMap="resizeMap"></toolbar>
  </div>

</template>

<style>
@import '../../styles/cesium-compass.css';
#map {
  width: 100vw;
  position: relative;
}
#scene-viewer {
  width: 100vw;
  height: 100%;
  position: absolute;
  overflow: hidden;
}


</style>