first commit

2021-09-14 07:31:59 +08:00
commit d0f3fccb12
35 changed files with 4191 additions and 0 deletions
--- a/src/main/app.ts
+++ b/src/main/app.ts
@@ -0,0 +1,31 @@
+import { app, BrowserWindow } from 'electron'
+import { join } from "path"
+
+const URL = (process.env.NODE_ENV === 'development') ? 'http://localhost:3000/' : 'gnss.cesium.hwasmart.com'
+
+function createWindow() {
+	const win = new BrowserWindow({
+		fullscreen: true,
+		frame: false,
+		webPreferences: {
+			nodeIntegration: true,
+			preload: join(__dirname, 'preload.js')
+		}
+	})
+
+	win.loadURL(URL)
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+	if (process.platform !== 'darwin') {
+		app.quit()
+	}
+})
+
+app.on('activate', () => {
+	if (BrowserWindow.getAllWindows().length === 0) {
+		createWindow()
+	}
+})
--- a/src/main/preload.js
+++ b/src/main/preload.js
@@ -0,0 +1,20 @@
+const {ipcRenderer, contextBridge} = require('electron')
+
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  send: (channel, data) => {
+    // whitelist channels
+    let validChannels = ['toMain']
+    if (validChannels.includes(channel)) {
+      ipcRenderer.send(channel, data)
+    }
+    ipcRenderer.send(channel, data)
+  },
+  receive: (channel, func) => {
+    let validChannels = ['fromMain']
+    if (validChannels.includes(channel)) {
+      // Deliberately strip event as it includes `sender`
+      ipcRenderer.on(channel, (event, ...args) => func(...args))
+    }
+    ipcRenderer.on(channel, (event, ...args) => func(...args))
+  }
+})
--- a/src/render/App.vue
+++ b/src/render/App.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="w-h-full">
+    <EarthView ref="earthView"/>
+
+    <FlagView ref="flagView" class="fixed bottom-0 right-0" />
+    
+    <SatelliteTableView class="fixed left-0 right-0 bottom-0" @trackSatelliteSelected="onTrackSatelliteSelected" />
+    
+    <SatelliteSystemSelectView class="fixed top-1" @satelliteSystemChanged="onSatelliteSystemChanged" />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import FlagView from './components/FlagView.vue'
+import EarthView from './components/EarthView.vue'
+import SatelliteTableView from './components/SatelliteTableView.vue'
+import SatelliteSystemSelectView from './components/SatelliteSystemSelectView.vue'
+
+export default defineComponent({
+  setup () {
+    const earthView                 = ref(null)
+    const flagView                  = ref(null)
+    const onSatelliteSystemChanged  = ss => {
+      if (earthView.value) earthView.value.loadSatelliteOrbit(ss)
+      if (flagView.value) flagView.value.show_flag(ss)
+    }
+    const onTrackSatelliteSelected  = id => {
+      if (earthView.value) earthView.value.trackSatellite(id)
+    }
+
+    return { earthView, flagView, onSatelliteSystemChanged, onTrackSatelliteSelected }
+  },
+  components: {
+    FlagView, EarthView, SatelliteSystemSelectView, SatelliteTableView
+  }
+})
+</script>
--- a/src/render/assets/logo.png
+++ b/src/render/assets/logo.png
--- a/src/render/components/EarthView.vue
+++ b/src/render/components/EarthView.vue
@@ -0,0 +1,91 @@
+<template>
+  <vc-viewer ref="vcViewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady">
+    <vc-layer-imagery>
+      <vc-provider-imagery-tianditu mapStyle="img_c" :token="token" />
+    </vc-layer-imagery>
+    <vc-layer-imagery>
+      <vc-provider-imagery-tianditu mapStyle="cva_c" :token="token" />
+    </vc-layer-imagery>
+    
+    <vc-navigation :offset="[10, 40]" :position="'top-left'" :printOpts="false" :locationOpts="false" :otherOpts="false" />
+
+    <vc-datasource-czml v-if="czml" :czml="czml" @ready="onDataSourceReady" />
+  </vc-viewer>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+export default defineComponent({
+  setup: () => {
+    const vcViewer                = ref(null)
+    
+		const token	                  = '436ce7e50d27eede2f2929307e6b33c0'
+
+    const czml                    = ref('')
+    const loadSatelliteOrbit      = ss => czml.value = '/CZML/' + ss + '.czml'
+
+    const onViewerReady           = ({ viewer }) => {
+      // 移除默认的图层，提升加载速度
+      const { imageryLayers } = viewer
+      imageryLayers.remove(imageryLayers.get(0))
+
+      // 限定缩放大小
+      // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000000   // 相机高度的最大值设定为 50000000 米
+      // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000000   // 相机高度的最小值设定为 10000000 米
+      
+      // 修改infobox的样式
+      const infoBox = viewer.infoBox.frame;
+      infoBox.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
+      infoBox.setAttribute('src', ''); //必须设置src为空 否则不会生效
+      infoBox.addEventListener('load', function () {
+        const infoBoxDescriptionElement              = infoBox.contentWindow.document.getElementsByClassName('cesium-infoBox-description')[0]
+        infoBoxDescriptionElement.style.fontSize     = 'larger'
+        infoBoxDescriptionElement.style.paddingLeft  = '20px'
+        infoBoxDescriptionElement.style.paddingRight = '20px'
+      })
+    }
+
+    let entities            = null
+    const store             = useStore()
+    const onDataSourceReady = ({ viewer, cesiumObject }) => {
+      viewer.flyTo(cesiumObject)
+
+      entities = cesiumObject.entities.values
+      // 显示卫星导航系统的科普信息
+      viewer.selectedEntity = entities.find(entity => entity.id.startsWith('Constellation'))
+      // viewer.selectedEntity = entities[entities.length - 1]
+
+      // 将卫星状态信息存储到store中
+      const satellites = entities.filter(entity => entity.id.startsWith('Satellite'))
+      const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
+      store.commit('satellites/set', satellite_state_arr)
+    }
+    // 显示/隐藏卫星
+    store.subscribe(({ type, payload }) => {
+      if (type === 'satellites/toggleShow') {
+        const entity = getEntityById(payload)
+        if (!entity) return
+
+        entity.show  = !entity.show
+      }
+    })
+    // 跟踪卫星
+    const trackSatellite    = id => {
+      const entity          = getEntityById(id)
+      if (!entity) return
+
+      const viewer          = vcViewer.value.getCesiumObject()
+      viewer.selectedEntity = entity
+      viewer.trackedEntity  = entity
+    }
+    const getEntityById     = id => {
+      if (!entities) return null
+
+      return entities.find(entity => entity.id === id)
+    }
+    
+    return { vcViewer, token, czml, loadSatelliteOrbit, trackSatellite, onViewerReady, onDataSourceReady }
+  }
+})
+</script>
--- a/src/render/components/FlagView.vue
+++ b/src/render/components/FlagView.vue
@@ -0,0 +1,41 @@
+<template>
+	<div v-show="!!src">
+		<img @mouseup="onMouseUp" @mousedown="onMouseDown" :src="src">
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup: () => {
+    const src     	= ref('/image/flag/Beidou.png')
+    const show_flag = (flag_name) => {
+			if (!flag_name) return
+
+			src.value = '/image/flag/' + flag_name + '.png'
+    }
+
+		let exit_timeout = null
+		const exit			 = () => {
+      window.opener = window;
+      window.open('', '_self', '');
+      window.close();
+    }
+		const onMouseUp = () => {
+			if (exit_timeout) clearTimeout(exit_timeout)
+		}
+
+		const onMouseDown = () => {
+			exit_timeout = setTimeout(exit, 10000)
+		}
+
+    return { src, show_flag, onMouseUp, onMouseDown }
+  }
+})
+</script>
+
+<style scoped>
+img {
+  width: 169px;
+}
+</style>
--- a/src/render/components/HelloWorld.vue
+++ b/src/render/components/HelloWorld.vue
@@ -0,0 +1,65 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a
+      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+      target="_blank"
+    >Vetur</a>
+    or
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    (if using
+    <code>&lt;script setup&gt;</code>)
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+export default defineComponent({
+  name: 'HelloWorld',
+  props: {
+    msg: {
+      type: String,
+      required: true
+    }
+  },
+  setup: () => {
+    const count = ref(0)
+    return { count }
+  }
+})
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
--- a/src/render/components/SatelliteSystemSelectView.vue
+++ b/src/render/components/SatelliteSystemSelectView.vue
@@ -0,0 +1,37 @@
+<template>
+	<!-- TODO: 将卫星列表视图融入到下拉列表中 -->
+	<div>
+		<select class="cesium-button" v-model="selected">
+			<option
+					v-for = "(value, key) in option_dic"
+					:key = "key"
+					:value = "key">
+					{{ value }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<script lang="ts">
+import { ref, watch, onMounted, defineComponent } from 'vue'
+export default defineComponent({
+	setup: (_, { emit }) => {
+		const selected	 = ref(null)
+		const option_dic = {
+			'beidou'  : '中国北斗卫星导航系统',
+			'gps-ops' : '美国全球定位系统',
+			'glo-ops' : '俄罗斯格洛纳斯卫星导航系统',
+			'galileo' : '欧盟研制伽利略卫星导航系统'
+		}
+
+		onMounted(() => selected.value = Object.keys(option_dic)[0])
+
+		watch(selected, (value) => {
+			emit('satellite-system-changed', value)
+		})
+
+		return { selected, option_dic }
+	}
+    
+})
+</script>
--- a/src/render/components/SatelliteTableView.vue
+++ b/src/render/components/SatelliteTableView.vue
@@ -0,0 +1,107 @@
+<template>
+<div>
+  <div id="satellite-table-container" class="text-white absolute bottom-0 text-center">
+    <button @click="show = !show" class="rounded border-blue-900 bg-blue-900">
+      <svg v-if="show" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+      </svg>
+    </button>
+    <table ref="satelliteTable" v-show="show" class="text-center">
+        <thead class="text-2xl">
+          <th class="py-3 bg-blue-900 border border-gray-900"
+              v-for="label, index in ['序号', '卫星名称', '显示/隐藏', '跟踪']"
+              :key="label"
+              :style="{width: index == 1 ? '37.5vw' : '12.5vw'}">
+              {{ label }}
+          </th>
+        </thead>
+        <tbody class="text-lg odd:bg-gray-50">
+          <tr v-for="{ id, show }, index in satellites" :key="id">
+            <td class="border border-gray-900"> {{ index + 1 }} </td>
+            <td class="border border-gray-900"> {{ id }} </td>
+            <td class="border border-gray-900">
+              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onSatelliteTableCheckboxChanged(id)" />
+            </td>
+            <td class="border border-gray-900">
+              <button @click="$emit('track-satellite-selected', id)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+
+
+export default defineComponent({
+  setup: () => {
+    const show           = ref(false)
+    
+    const store          = useStore()
+    const satelliteTable = ref(null)
+    const satellites     = computed(() => {
+      if (satelliteTable.value) satelliteTable.value.scrollTop = 0
+
+      return store.state.satellites.all
+    })
+    
+    const onSatelliteTableCheckboxChanged = id => store.commit('satellites/toggleShow', id)
+    
+    return { show, satelliteTable, satellites, onSatelliteTableCheckboxChanged }
+  }
+})
+</script>
+
+<style scoped>
+#satellite-table-container {
+  left: 12.5vw;
+  right: 12.5vw;
+}
+
+table {
+  display: block;
+  height: 360px;
+  overflow: auto;
+}
+
+tr:nth-child(odd) {
+  background-color: rgb(17, 24, 39);
+}
+
+tr:nth-child(even) {
+  background-color:rgb(31, 41, 55)
+}
+
+td {
+  padding: 5px 0;
+}
+
+::-webkit-scrollbar
+{
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: #1f2937;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    /* border-radius: 10px; */
+    background-color: #111827;
+}
+
+</style>>
--- a/src/render/main.css
+++ b/src/render/main.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .w-h-full {
+		@apply w-full h-full m-0 p-0
+	}
+}
--- a/src/render/main.ts
+++ b/src/render/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import VueCesium from 'vue-cesium'
+import 'vue-cesium/lib/theme-default/index.css'
+import App from './App.vue'
+import store from './store'
+import './main.css'
+
+
+if (typeof (window as any).global === 'undefined') {
+	(window as any).global = window
+}
+createApp(App).use(store).use(VueCesium, {cesiumPath: 'node_modules/cesium/Build/Cesium/Cesium.js'}).mount('#app')
--- a/src/render/shims-vue.d.ts
+++ b/src/render/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/render/store/index.js
+++ b/src/render/store/index.js
@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+import satellites from './modules/satellites'
+
+
+const debug = process.env.NODE_ENV !== 'production'
+
+export default createStore({
+  modules: {
+    satellites
+  },
+  strict: debug
+})
--- a/src/render/store/modules/satellites.js
+++ b/src/render/store/modules/satellites.js
@@ -0,0 +1,35 @@
+const state = {
+  all:  []
+}
+
+// getters
+const getters = {
+  getSatelliteList: (state) => state.all
+}
+
+// actions
+const actions = {
+  load ({ commit }, { satellites }) {
+    commit('set', satellites)
+  }
+}
+
+// mutations
+const mutations = {
+  set (state, satellites) {
+    state.all = satellites
+  },
+
+  toggleShow (state, id) {
+    const satellite = state.all.find(satellite => satellite.id === id)
+    satellite.show = !satellite.show
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}