四大卫星运行状态监控系统
This commit is contained in:
2
index.js
2
index.js
@@ -1,4 +1,4 @@
|
|||||||
require('ts-node').register({
|
require('ts-node').register({
|
||||||
project:'./tsconfig.electron.json'
|
project:'./tsconfig.electron.json'
|
||||||
});
|
});
|
||||||
require('./src/main/app.ts')
|
require('./src/main/app.ts');
|
||||||
56
oneShow.html
Normal file
56
oneShow.html
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="w-h-full">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>卫星数据监控平台</title>
|
||||||
|
</head>
|
||||||
|
<body class="w-h-full">
|
||||||
|
<div id="app" class="w-h-full text-white"></div>
|
||||||
|
<script type="module" src="/src/render/oneShow.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
56
oneShowAll.html
Normal file
56
oneShowAll.html
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="w-h-full">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>卫星数据监控平台</title>
|
||||||
|
</head>
|
||||||
|
<body class="w-h-full">
|
||||||
|
<div id="app" class="w-h-full text-white"></div>
|
||||||
|
<script type="module" src="/src/render/oneShowAll.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
56
oneShowSwitch.html
Normal file
56
oneShowSwitch.html
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="w-h-full">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>卫星数据监控平台</title>
|
||||||
|
</head>
|
||||||
|
<body class="w-h-full">
|
||||||
|
<div id="app" class="w-h-full text-white"></div>
|
||||||
|
<script type="module" src="/src/render/oneShowSwitch.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -4,6 +4,49 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>卫星数据监控平台</title>
|
<title>卫星数据监控平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="w-h-full">
|
<body class="w-h-full">
|
||||||
|
|||||||
@@ -4,6 +4,49 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>卫星信息监控平台</title>
|
<title>卫星信息监控平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="w-h-full">
|
<body class="w-h-full">
|
||||||
|
|||||||
@@ -4,6 +4,49 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>卫星信号监控平台</title>
|
<title>卫星信号监控平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="w-h-full">
|
<body class="w-h-full">
|
||||||
|
|||||||
@@ -4,6 +4,49 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
/* 当屏幕宽度大于或等于3840px时 */
|
||||||
|
@media (min-width: 3840px) {
|
||||||
|
html {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在2560px到3839px之间时 */
|
||||||
|
@media (min-width: 2560px) and (max-width: 3839px) {
|
||||||
|
html {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1920px到2559px之间时 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
html {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在750px到1919px之间时 */
|
||||||
|
@media (min-width: 750px) and (max-width: 1919px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在600px到749px之间时 */
|
||||||
|
@media (min-width: 600px) and (max-width: 749px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度小于600px时 */
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>卫星状态监控平台</title>
|
<title>卫星状态监控平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="w-h-full">
|
<body class="w-h-full">
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
// 加密关键字
|
// 加密关键字
|
||||||
const keyword = 'GNSS'
|
const keyword = 'BD';
|
||||||
export { keyword }
|
export { keyword };
|
||||||
@@ -1,48 +1,50 @@
|
|||||||
import nmea from 'nmea'
|
import nmea from 'nmea';
|
||||||
|
|
||||||
let events = {}
|
let events = {};
|
||||||
const on = (eventName, callback) => {
|
const on = (eventName, callback) => {
|
||||||
if (!(eventName in events)) {
|
if (!(eventName in events)) {
|
||||||
events[eventName] = []
|
events[eventName] = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
events[eventName].push(callback)
|
events[eventName].push(callback);
|
||||||
}
|
};
|
||||||
|
|
||||||
const emit = (eventName, ...args) => {
|
const emit = (eventName, ...args) => {
|
||||||
if (!(eventName in events)) {
|
if (!(eventName in events)) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const cbs = events[eventName]
|
const cbs = events[eventName];
|
||||||
|
|
||||||
cbs.forEach(cb => {
|
cbs.forEach(cb => {
|
||||||
cb.call(this, ...args)
|
cb.call(this, ...args);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const includes = (arr1, arr2) => {
|
const includes = (arr1, arr2) => {
|
||||||
return arr2.every(val => arr1.includes(val));
|
return arr2.every(val => arr1.includes(val));
|
||||||
}
|
};
|
||||||
|
|
||||||
const handle = (value) => {
|
const handle = (value) => {
|
||||||
if (value.length <= 0) return
|
if (value.length <= 0) return;
|
||||||
|
|
||||||
emit('received', value)
|
emit('received', value);
|
||||||
|
|
||||||
const strArr = value.split('\r\n')
|
const strArr = value.split('\r\n');
|
||||||
for (let i = 0; i < strArr.length; i++) {
|
for (let i = 0; i < strArr.length; i++) {
|
||||||
const element = strArr[i];
|
const element = strArr[i];
|
||||||
doHandle(element)
|
doHandle(element);
|
||||||
}
|
}
|
||||||
|
|
||||||
nmeaObj.GSA.forEach(element => {
|
nmeaObj.GSA.forEach(element => {
|
||||||
let nmeaCache = {
|
let nmeaCache = {
|
||||||
GB:{talker_id:'GB',satellites:[]},
|
GB:{talker_id:'GB',satellites:[]},
|
||||||
GP:{talker_id:'GP',satellites:[]},
|
GP:{talker_id:'GP',satellites:[]},
|
||||||
GL:{talker_id:'GL',satellites:[]},
|
GL:{talker_id:'GL',satellites:[]},
|
||||||
GA:{talker_id:'GA',satellites:[]},
|
GA:{talker_id:'GA',satellites:[]},
|
||||||
GQ:{talker_id:'GQ',satellites:[]}
|
GQ:{talker_id:'GQ',satellites:[]},
|
||||||
|
GI:{talker_id:'GI',satellites:[]},
|
||||||
|
GN:{talker_id:'GN',satellites:[]}
|
||||||
};
|
};
|
||||||
nmeaObj.GSV.forEach(item => {
|
nmeaObj.GSV.forEach(item => {
|
||||||
if(item.talker_id == nmeaCache[item.talker_id].talker_id){
|
if(item.talker_id == nmeaCache[item.talker_id].talker_id){
|
||||||
@@ -60,16 +62,16 @@ const handle = (value) => {
|
|||||||
nmeaCache = null;
|
nmeaCache = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
emit('handled', nmeaObj)
|
emit('handled', nmeaObj);
|
||||||
nmeaObj = resetNMEAObj()
|
nmeaObj = resetNMEAObj();
|
||||||
}
|
};
|
||||||
|
|
||||||
const doHandle = (value) => {
|
const doHandle = (value) => {
|
||||||
if (!verify(value)) {
|
if (!verify(value)) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const result = nmea.parse(value)
|
const result = nmea.parse(value);
|
||||||
switch (result.sentence) {
|
switch (result.sentence) {
|
||||||
case 'RMC':
|
case 'RMC':
|
||||||
nmeaObj.RMC = result
|
nmeaObj.RMC = result
|
||||||
@@ -84,22 +86,22 @@ const doHandle = (value) => {
|
|||||||
nmeaObj.GSV.push(result)
|
nmeaObj.GSV.push(result)
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const verify = (value) => {
|
const verify = (value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dollar_index = value.indexOf('$')
|
const dollar_index = value.indexOf('$');
|
||||||
const star_index = value.indexOf('*')
|
const star_index = value.indexOf('*');
|
||||||
if (value.indexOf('$') !== 0 || star_index <= dollar_index) {
|
if (value.indexOf('$') !== 0 || star_index <= dollar_index) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [sentence, checksum, ] = value.split('*')
|
const [sentence, checksum, ] = value.split('*');
|
||||||
return nmea.Helpers.verifyChecksum(sentence, checksum)
|
return nmea.Helpers.verifyChecksum(sentence, checksum);
|
||||||
}
|
};
|
||||||
|
|
||||||
const resetNMEAObj = () => {
|
const resetNMEAObj = () => {
|
||||||
return {
|
return {
|
||||||
@@ -107,9 +109,9 @@ const resetNMEAObj = () => {
|
|||||||
'GGA': null,
|
'GGA': null,
|
||||||
'GSA': [],
|
'GSA': [],
|
||||||
'GSV': []
|
'GSV': []
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
let nmeaObj = resetNMEAObj()
|
let nmeaObj = resetNMEAObj();
|
||||||
|
|
||||||
module.exports = { on, handle }
|
module.exports = { on, handle };
|
||||||
189
src/main/app.ts
189
src/main/app.ts
@@ -1,80 +1,80 @@
|
|||||||
import { ipcMain, app, screen, globalShortcut, BrowserWindow, dialog, crashReporter } from 'electron'
|
import { ipcMain, app, screen, globalShortcut, BrowserWindow, dialog, crashReporter } from 'electron';
|
||||||
import { join } from "path";
|
import { join } from "path";
|
||||||
const config = require('./config')
|
const config = require('./config');
|
||||||
import './load-serialport'
|
import './load-serialport';
|
||||||
import { keyword } from './KeyWord'
|
import { keyword } from './KeyWord';
|
||||||
|
|
||||||
const child_process = require('child_process')
|
const child_process = require('child_process');
|
||||||
const crypto = require('crypto')
|
const crypto = require('crypto');
|
||||||
const fs = require('fs')
|
const fs = require('fs');
|
||||||
|
|
||||||
function queryPass(passPath: string, passValue: string) {
|
function queryPass(passPath: string, passValue: string) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
try {
|
try {
|
||||||
child_process.exec(`reg query ${passPath} /v ${passValue}`, (error: Error, stdout: string, stderr: string) => {
|
child_process.exec(`reg query ${passPath} /v ${passValue}`, (error: Error, stdout: string, stderr: string) => {
|
||||||
if (error) {
|
if (error) {
|
||||||
reject(error)
|
reject(error);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
resolve({stdout, stderr})
|
resolve({stdout, stderr});
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
reject(error)
|
reject(error);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
};
|
||||||
|
|
||||||
function queryKey(keyPath: string, keyValue: string) {
|
function queryKey(keyPath: string, keyValue: string) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
try {
|
try {
|
||||||
child_process.exec(`reg query ${keyPath} /v ${keyValue}`, (error: Error, stdout: string, stderr: string) => {
|
child_process.exec(`reg query ${keyPath} /v ${keyValue}`, (error: Error, stdout: string, stderr: string) => {
|
||||||
if (error) {
|
if (error) {
|
||||||
reject(error)
|
reject(error);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
resolve({stdout, stderr})
|
resolve({stdout, stderr});
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
reject(error)
|
reject(error);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
};
|
||||||
|
|
||||||
function cryptMD5(GUID: string) {
|
function cryptMD5(GUID: string) {
|
||||||
let md5 = crypto.createHash('md5')
|
let md5 = crypto.createHash('md5');
|
||||||
let ciphertext = md5.update(GUID).digest('hex')
|
let ciphertext = md5.update(GUID).digest('hex');
|
||||||
return ciphertext.slice(0,8)+'-'+ciphertext.slice(8,12)+'-'+ciphertext.slice(12,16)+'-'+ciphertext.slice(16,20)+'-'+ciphertext.slice(20,32)
|
return ciphertext.slice(0,8)+'-'+ciphertext.slice(8,12)+'-'+ciphertext.slice(12,16)+'-'+ciphertext.slice(16,20)+'-'+ciphertext.slice(20,32);
|
||||||
}
|
};
|
||||||
|
|
||||||
const passPath = 'HKEY_CURRENT_USER\\SOFTWARE\\HwaSmart'
|
const passPath = 'HKEY_CURRENT_USER\\SOFTWARE\\HwaSmart';
|
||||||
const passValue = 'BDAuthorization'
|
const passValue = 'BDAuthorization';
|
||||||
const keyPath = 'HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Cryptography'
|
const keyPath = 'HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Cryptography';
|
||||||
const keyValue = 'MachineGuid'
|
const keyValue = 'MachineGuid';
|
||||||
|
|
||||||
async function checkLaunchEnv() {
|
async function checkLaunchEnv() {
|
||||||
try {
|
try {
|
||||||
const passResult: any = await queryPass(passPath, passValue)
|
const passResult: any = await queryPass(passPath, passValue);
|
||||||
const keyResult: any = await queryKey(keyPath, keyValue)
|
const keyResult: any = await queryKey(keyPath, keyValue);
|
||||||
if(cryptMD5(keyResult.stdout.slice(83,119) + keyword) == passResult.stdout.slice(72,108)){
|
if(cryptMD5(keyResult.stdout.slice(83,119) + keyword) == passResult.stdout.slice(72,108)){
|
||||||
return true
|
return true;
|
||||||
}else{
|
}else{
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
// 成功
|
// 成功
|
||||||
// 查询到 有这个app启动项
|
// 查询到 有这个app启动项
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// 没有查询到该app启动项目
|
// 没有查询到该app启动项目
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 记录崩溃信息
|
// 记录崩溃信息
|
||||||
function recordCrash() {
|
function recordCrash() {
|
||||||
return new Promise<void>(resolve => {
|
return new Promise<void>(resolve => {
|
||||||
// 崩溃日志请求成功....
|
// 崩溃日志请求成功....
|
||||||
resolve();
|
resolve();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
function abnormalLog(txtName: string, txtLog: string) {
|
function abnormalLog(txtName: string, txtLog: string) {
|
||||||
fs.writeFile(txtName, txtLog, (ero:any) => {
|
fs.writeFile(txtName, txtLog, (ero:any) => {
|
||||||
@@ -83,7 +83,7 @@ function abnormalLog(txtName: string, txtLog: string) {
|
|||||||
}
|
}
|
||||||
console.log(`创建成功!`);
|
console.log(`创建成功!`);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
var windows:Array<BrowserWindow> = [];
|
var windows:Array<BrowserWindow> = [];
|
||||||
|
|
||||||
@@ -98,24 +98,24 @@ function createWindow(page: string, display: any) {
|
|||||||
preload: join(__dirname, 'preload.js'),
|
preload: join(__dirname, 'preload.js'),
|
||||||
webgl: true
|
webgl: true
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
ipcMain.on("APP_MOUNTED", (event) => {
|
ipcMain.on("APP_MOUNTED", (event) => {
|
||||||
const { sender } = event
|
const { sender } = event;
|
||||||
if (page == 'satellite-data-monitor-platform') {
|
if (page == 'satellite-data-monitor-platform' || page == 'oneShow' || page == 'oneShowAll' || page == 'oneShowSwitch') {
|
||||||
let depth = config.get('depth')
|
const depth = config.get('depth');
|
||||||
let secondary = config.get('secondary')
|
const secondary = config.get('secondary');
|
||||||
sender.send('deep', [depth, secondary])
|
sender.send('deep', [depth, secondary]);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
ipcMain.on("webglcontextlost", (event) => {
|
ipcMain.on("webglcontextlost", (event) => {
|
||||||
abnormalLog(`./resources/webglcontextlost${new Date().getTime()}.txt`, `webglcontextlost: ${new Date()}`);
|
abnormalLog(`./resources/webglcontextlost${new Date().getTime()}.txt`, `webglcontextlost: ${new Date()}`);
|
||||||
})
|
});
|
||||||
|
|
||||||
ipcMain.on("refresh", (event) => {
|
ipcMain.on("refresh", (event) => {
|
||||||
abnormalLog(`./resources/refresh${new Date().getTime()}.txt`, `refresh: ${new Date()}`);
|
abnormalLog(`./resources/refresh${new Date().getTime()}.txt`, `refresh: ${new Date()}`);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 监听到软件奔溃时执行
|
// 监听到软件奔溃时执行
|
||||||
win.webContents.on('crashed', () => {
|
win.webContents.on('crashed', () => {
|
||||||
@@ -146,51 +146,76 @@ function createWindow(page: string, display: any) {
|
|||||||
console.log('err', e);
|
console.log('err', e);
|
||||||
abnormalLog(`./resources/crash${new Date().getTime()}.txt`, `crash: ${new Date()}, err: ${e}`);
|
abnormalLog(`./resources/crash${new Date().getTime()}.txt`, `crash: ${new Date()}, err: ${e}`);
|
||||||
});
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
win.loadURL(`http://localhost:3000/${page}.html`)
|
win.loadURL(`http://localhost:3000/${page}.html`);
|
||||||
win.webContents.openDevTools()
|
// win.webContents.openDevTools();
|
||||||
} else {
|
} else {
|
||||||
win.loadFile(`dist/render/${page}.html`)
|
win.loadFile(`dist/render/${page}.html`);
|
||||||
// win.webContents.openDevTools()
|
// win.webContents.openDevTools();
|
||||||
}
|
}
|
||||||
|
|
||||||
windows.push(win);
|
windows.push(win);
|
||||||
return win;
|
return win;
|
||||||
}
|
};
|
||||||
|
|
||||||
const sleep = (timeout:number) => {
|
const sleep = (timeout:number) => {
|
||||||
return new Promise((resolve?:any)=>{
|
return new Promise((resolve?:any)=>{
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
resolve();
|
resolve();
|
||||||
}, timeout)
|
}, timeout);
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
async function launch() {
|
async function launch() {
|
||||||
const displays = screen.getAllDisplays()
|
const showMode = config.get('showMode');
|
||||||
|
const displays = screen.getAllDisplays();
|
||||||
if (displays.length !== 4) {
|
if (displays.length !== 4) {
|
||||||
createWindow('satellite-data-monitor-platform', displays[0])
|
switch (showMode) {
|
||||||
await sleep(100);
|
case "oneShow":
|
||||||
createWindow('satellite-info-monitor-platform', displays[0])
|
createWindow('oneShow', displays[0]);
|
||||||
await sleep(200);
|
break;
|
||||||
createWindow('satellite-signal-monitor-platform', displays[0])
|
case "oneShowSwitch":
|
||||||
await sleep(300);
|
createWindow('oneShowSwitch', displays[0]);
|
||||||
createWindow('satellite-state-monitor-platform', displays[0])
|
break;
|
||||||
|
case "oneShowAll":
|
||||||
|
createWindow('oneShowAll', displays[0]);
|
||||||
|
break;
|
||||||
|
case "twoShow":
|
||||||
|
if (displays.length == 2) {
|
||||||
|
createWindow('oneShowSwitch', displays[0]);
|
||||||
|
await sleep(200);
|
||||||
|
createWindow('oneShowAll', displays[1]);
|
||||||
|
} else {
|
||||||
|
createWindow('oneShowSwitch', displays[0]);
|
||||||
|
await sleep(200);
|
||||||
|
createWindow('oneShowAll', displays[0]);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "fourShow":
|
||||||
|
createWindow('satellite-data-monitor-platform', displays[0]);
|
||||||
|
await sleep(200);
|
||||||
|
createWindow('satellite-info-monitor-platform', displays[0]);
|
||||||
|
await sleep(400);
|
||||||
|
createWindow('satellite-signal-monitor-platform', displays[0]);
|
||||||
|
await sleep(600);
|
||||||
|
createWindow('satellite-state-monitor-platform', displays[0]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
createWindow('satellite-data-monitor-platform', displays[0])
|
createWindow('satellite-data-monitor-platform', displays[0]);
|
||||||
await sleep(200);
|
await sleep(200);
|
||||||
createWindow('satellite-info-monitor-platform', displays[1])
|
createWindow('satellite-info-monitor-platform', displays[1]);
|
||||||
await sleep(400);
|
await sleep(400);
|
||||||
createWindow('satellite-signal-monitor-platform', displays[2])
|
createWindow('satellite-signal-monitor-platform', displays[2]);
|
||||||
await sleep(600);
|
await sleep(600);
|
||||||
createWindow('satellite-state-monitor-platform', displays[3])
|
createWindow('satellite-state-monitor-platform', displays[3]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 屏蔽 F11 进入/退出全屏功能
|
// 屏蔽 F11 进入/退出全屏功能
|
||||||
globalShortcut.register('F11', () => { return })
|
globalShortcut.register('F11', () => { return });
|
||||||
}
|
};
|
||||||
|
|
||||||
ipcMain.on('CLOSE', (event) => {
|
ipcMain.on('CLOSE', (event) => {
|
||||||
const res = dialog.showMessageBox({
|
const res = dialog.showMessageBox({
|
||||||
@@ -210,48 +235,48 @@ ipcMain.on('CLOSE', (event) => {
|
|||||||
});
|
});
|
||||||
windows = [];
|
windows = [];
|
||||||
}else{
|
}else{
|
||||||
console.log('not close software')
|
console.log('not close software');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
});
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
// 异步代码
|
// 异步代码
|
||||||
const checkReault: any = await checkLaunchEnv()
|
const checkReault: any = await checkLaunchEnv();
|
||||||
console.log('env right:', checkReault)
|
console.log('env right:', checkReault);
|
||||||
|
|
||||||
// 异步代码执行完毕后执行的代码
|
// 异步代码执行完毕后执行的代码
|
||||||
if (checkReault) {
|
if (checkReault) {
|
||||||
launch()
|
launch();
|
||||||
// 模拟软件崩溃
|
// 模拟软件崩溃
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// process.crash();
|
// process.crash();
|
||||||
// }, 10000);
|
// }, 10000);
|
||||||
} else {
|
} else {
|
||||||
dialog.showErrorBox('系统提示', '软件启动出错,请联系售后技术支持人员')
|
dialog.showErrorBox('系统提示', '软件启动出错,请联系售后技术支持人员');
|
||||||
process.exit(1)
|
process.exit(1);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
crashReporter.start({uploadToServer: false})
|
crashReporter.start({uploadToServer: false});
|
||||||
|
|
||||||
app.commandLine.appendSwitch('ignore-gpu-blacklist')
|
app.commandLine.appendSwitch('ignore-gpu-blacklist');
|
||||||
|
|
||||||
app.disableDomainBlockingFor3DAPIs()
|
app.disableDomainBlockingFor3DAPIs();
|
||||||
|
|
||||||
// 禁用GPU加速,此模式下何时刷新canvas不能通过判断webgl上下文丢失实现
|
// 禁用GPU加速,此模式下何时刷新canvas不能通过判断webgl上下文丢失实现
|
||||||
// app.disableHardwareAcceleration()
|
// app.disableHardwareAcceleration()
|
||||||
|
|
||||||
app.whenReady().then(main)
|
app.whenReady().then(main);
|
||||||
|
|
||||||
app.on('window-all-closed', () => {
|
app.on('window-all-closed', () => {
|
||||||
if (process.platform !== 'darwin') {
|
if (process.platform !== 'darwin') {
|
||||||
app.quit()
|
app.quit();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
app.on('activate', () => {
|
app.on('activate', () => {
|
||||||
if (BrowserWindow.getAllWindows().length === 0) {
|
if (BrowserWindow.getAllWindows().length === 0) {
|
||||||
launch()
|
launch();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
const Store = require('electron-store')
|
const Store = require('electron-store');
|
||||||
|
|
||||||
const store = new Store()
|
const store = new Store();
|
||||||
const set = (key, val) => store.set(key, val)
|
const set = (key, val) => store.set(key, val);
|
||||||
|
|
||||||
const get = (key) => store.get(key)
|
const get = (key) => store.get(key);
|
||||||
|
|
||||||
module.exports = { set, get }
|
module.exports = { set, get };
|
||||||
|
|||||||
@@ -1,72 +1,72 @@
|
|||||||
const { ipcMain } = require('electron')
|
const { ipcMain } = require('electron');
|
||||||
const { SerialPort } = require("serialport")
|
const { SerialPort } = require("serialport");
|
||||||
const { InterByteTimeoutParser } = require('@serialport/parser-inter-byte-timeout')
|
const { InterByteTimeoutParser } = require('@serialport/parser-inter-byte-timeout');
|
||||||
const config = require('./config')
|
const config = require('./config');
|
||||||
|
|
||||||
const NMEAHandler = require('./api/NMEAHandler')
|
const NMEAHandler = require('./api/NMEAHandler');
|
||||||
|
|
||||||
const DEFAULT_BAUDRATE = 115200
|
const DEFAULT_BAUDRATE = 115200;
|
||||||
const getSerialPortConstructorArguments = (ports) => {
|
const getSerialPortConstructorArguments = (ports) => {
|
||||||
let serialport = config.get('serialport')
|
let serialport = config.get('serialport');
|
||||||
const path = ( serialport && serialport.path ) ? serialport.path : ports[0].path
|
const path = ( serialport && serialport.path ) ? serialport.path : ports[0].path;
|
||||||
const baudRate = ( serialport && serialport.baudRate ) ? serialport.baudRate : DEFAULT_BAUDRATE
|
const baudRate = ( serialport && serialport.baudRate ) ? serialport.baudRate : DEFAULT_BAUDRATE;
|
||||||
return { path, baudRate }
|
return { path, baudRate };
|
||||||
}
|
};
|
||||||
|
|
||||||
const senders = []
|
const senders = [];
|
||||||
ipcMain.on("APP_MOUNTED", (event) => {
|
ipcMain.on("APP_MOUNTED", (event) => {
|
||||||
const { sender } = event
|
const { sender } = event;
|
||||||
senders.push(sender)
|
senders.push(sender);
|
||||||
|
|
||||||
sender.once('destroyed', () => {
|
sender.once('destroyed', () => {
|
||||||
const index = senders.indexOf(sender)
|
const index = senders.indexOf(sender);
|
||||||
if (index >= 0) senders.splice(index, 1)
|
if (index >= 0) senders.splice(index, 1);
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
const sendMsg = (channel, msg) => {
|
const sendMsg = (channel, msg) => {
|
||||||
if (senders.length <= 0) return
|
if (senders.length <= 0) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
senders.forEach((sender) => {
|
senders.forEach((sender) => {
|
||||||
sender.send(channel, msg)
|
sender.send(channel, msg);
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error)
|
console.error(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SerialPort.list().then((ports, err) => {
|
SerialPort.list().then((ports, err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.log(err)
|
console.log(err);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 过滤掉COM1口,很多电脑自带COM1接口
|
// 过滤掉COM1口,很多电脑自带COM1接口
|
||||||
ports = ports.filter((port) => port.path != 'COM1')
|
ports = ports.filter((port) => port.path != 'COM1');
|
||||||
if (ports.length == 0) {
|
if (ports.length == 0) {
|
||||||
console.error('设备未连接')
|
console.error('设备未连接');
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const { path, baudRate } = getSerialPortConstructorArguments(ports)
|
const { path, baudRate } = getSerialPortConstructorArguments(ports);
|
||||||
console.log(path, baudRate, '=====================')
|
console.log(path, baudRate, '=====================');
|
||||||
const serialPort = new SerialPort({ path, baudRate })
|
const serialPort = new SerialPort({ path, baudRate });
|
||||||
|
|
||||||
const parser = serialPort.pipe(new InterByteTimeoutParser({interval: 30}))
|
const parser = serialPort.pipe(new InterByteTimeoutParser({interval: 30}));
|
||||||
|
|
||||||
NMEAHandler.on('received' , (nmeaStr) => {
|
NMEAHandler.on('received' , (nmeaStr) => {
|
||||||
sendMsg('NMEA_RECEIVED', nmeaStr)
|
sendMsg('NMEA_RECEIVED', nmeaStr);
|
||||||
})
|
});
|
||||||
|
|
||||||
NMEAHandler.on('handled' , (nmeaObj) => {
|
NMEAHandler.on('handled' , (nmeaObj) => {
|
||||||
sendMsg('nmea', JSON.stringify(nmeaObj))
|
sendMsg('nmea', JSON.stringify(nmeaObj));
|
||||||
})
|
});
|
||||||
|
|
||||||
parser.on('data', (data) => NMEAHandler.handle(data.toString()))
|
parser.on('data', (data) => NMEAHandler.handle(data.toString()));
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
const {ipcRenderer, contextBridge} = require('electron')
|
const {ipcRenderer, contextBridge} = require('electron');
|
||||||
|
|
||||||
contextBridge.exposeInMainWorld('ipcRenderer', {
|
contextBridge.exposeInMainWorld('ipcRenderer', {
|
||||||
send: (channel, data) => {
|
send: (channel, data) => {
|
||||||
// whitelist channels
|
// whitelist channels
|
||||||
let validChannels = ['toMain']
|
let validChannels = ['toMain'];
|
||||||
if (validChannels.includes(channel)) {
|
if (validChannels.includes(channel)) {
|
||||||
ipcRenderer.send(channel, data)
|
ipcRenderer.send(channel, data);
|
||||||
}
|
}
|
||||||
ipcRenderer.send(channel, data)
|
ipcRenderer.send(channel, data);
|
||||||
},
|
},
|
||||||
receive: (channel, func) => {
|
receive: (channel, func) => {
|
||||||
console.log(func())
|
console.log(func());
|
||||||
let validChannels = ['fromMain']
|
let validChannels = ['fromMain'];
|
||||||
if (validChannels.includes(channel)) {
|
if (validChannels.includes(channel)) {
|
||||||
// Deliberately strip event as it includes `sender`
|
// Deliberately strip event as it includes `sender`
|
||||||
ipcRenderer.on(channel, (event, ...args) => func(...args))
|
ipcRenderer.on(channel, (event, ...args) => func(...args));
|
||||||
}
|
}
|
||||||
ipcRenderer.on(channel, (event, ...args) => func(...args))
|
ipcRenderer.on(channel, (event, ...args) => func(...args));
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
@@ -1,65 +1,65 @@
|
|||||||
export function filterNonNumber (array) {
|
export function filterNonNumber (array) {
|
||||||
return array.filter(n => typeof n === 'number')
|
return array.filter(n => typeof n === 'number');
|
||||||
}
|
};
|
||||||
|
|
||||||
export function mulAdd (nums) {
|
export function mulAdd (nums) {
|
||||||
nums = filterNonNumber(nums)
|
nums = filterNonNumber(nums);
|
||||||
|
|
||||||
return nums.reduce((all, num) => all + num, 0)
|
return nums.reduce((all, num) => all + num, 0);
|
||||||
}
|
};
|
||||||
|
|
||||||
export function getTwoPointDistance (pointOne, pointTwo) {
|
export function getTwoPointDistance (pointOne, pointTwo) {
|
||||||
const minusX = Math.abs(pointOne[0] - pointTwo[0])
|
const minusX = Math.abs(pointOne[0] - pointTwo[0]);
|
||||||
|
|
||||||
const minusY = Math.abs(pointOne[1] - pointTwo[1])
|
const minusY = Math.abs(pointOne[1] - pointTwo[1]);
|
||||||
|
|
||||||
return Math.sqrt(minusX * minusX + minusY * minusY)
|
return Math.sqrt(minusX * minusX + minusY * minusY);
|
||||||
}
|
};
|
||||||
|
|
||||||
export function getPolylineLength(points) {
|
export function getPolylineLength(points) {
|
||||||
const lineSegments = new Array(points.length - 1)
|
const lineSegments = new Array(points.length - 1)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map((foo, i) => [points[i], points[i + 1]])
|
.map((foo, i) => [points[i], points[i + 1]]);
|
||||||
|
|
||||||
const lengths = lineSegments.map(item => getTwoPointDistance(...item))
|
const lengths = lineSegments.map(item => getTwoPointDistance(...item));
|
||||||
|
|
||||||
return mulAdd(lengths)
|
return mulAdd(lengths);
|
||||||
}
|
};
|
||||||
|
|
||||||
export function get_in_positioning_id(GSAArr) {
|
export function get_in_positioning_id(GSAArr) {
|
||||||
let in_positioning_id = []
|
let in_positioning_id = [];
|
||||||
GSAArr.forEach(({ satellites }) => {
|
GSAArr.forEach(({ satellites }) => {
|
||||||
in_positioning_id.push(...satellites)
|
in_positioning_id.push(...satellites);
|
||||||
});
|
});
|
||||||
|
|
||||||
return in_positioning_id
|
return in_positioning_id;
|
||||||
}
|
};
|
||||||
|
|
||||||
export function getNMEAObj(nmeaStr) {
|
export function getNMEAObj(nmeaStr) {
|
||||||
if (!nmeaStr) return
|
if (!nmeaStr) return;
|
||||||
|
|
||||||
return JSON.parse(nmeaStr)
|
return JSON.parse(nmeaStr);
|
||||||
}
|
};
|
||||||
|
|
||||||
export function getGSV (nmeaStr) {
|
export function getGSV (nmeaStr) {
|
||||||
const nmeaObj = getNMEAObj(nmeaStr)
|
const nmeaObj = getNMEAObj(nmeaStr);
|
||||||
// console.log(nmeaObj, '================')
|
// console.log(nmeaObj, '================');
|
||||||
if (!nmeaObj || !nmeaObj.GSV) return null
|
if (!nmeaObj || !nmeaObj.GSV) return null;
|
||||||
|
|
||||||
const { GSV } = nmeaObj
|
const { GSV } = nmeaObj;
|
||||||
const bd = {
|
const bd = {
|
||||||
// GSVArr: GSV.filter((gsv) => gsv.talker_id === 'BD')
|
// GSVArr: GSV.filter((gsv) => gsv.talker_id === 'BD')
|
||||||
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GB')
|
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GB')
|
||||||
}
|
};
|
||||||
const gp = {
|
const gp = {
|
||||||
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GP')
|
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GP')
|
||||||
}
|
};
|
||||||
const gl = {
|
const gl = {
|
||||||
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GL')
|
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GL')
|
||||||
}
|
};
|
||||||
const ga = {
|
const ga = {
|
||||||
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GA')
|
GSVArr: GSV.filter((gsv) => gsv.talker_id === 'GA')
|
||||||
}
|
};
|
||||||
|
|
||||||
return { bd, gp, gl, ga }
|
return { bd, gp, gl, ga };
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,14 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="center-cmp">
|
<div class="center-cmp">
|
||||||
<div class="cc-header">
|
<div class="cc-header" :style="styleMode == 'small' ? 'height: 3rem;font-size: 1.6rem;' : ''">
|
||||||
<Decoration1 style="width:200px;height:50px;" />
|
<Decoration1 :style="styleMode == 'small' ? 'width:7rem;height:2.5rem;' : 'width:200px;height:50px;'" />
|
||||||
<div>监测到卫星总数</div>
|
<div :style="styleMode == 'small' ? 'font-size: 1rem;' : 'font-size: 2rem;'">监测到卫星总数</div>
|
||||||
<Decoration1 style="width:200px;height:50px;" />
|
<Decoration1 :style="styleMode == 'small' ? 'width:7rem;height:2.5rem;' : 'width:200px;height:50px;'" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cc-details">
|
<div class="cc-details" :style="styleMode == 'small' ? 'height: 3rem;font-size: 1.6rem;' : ''">
|
||||||
<div
|
<div
|
||||||
class="card"
|
class="card"
|
||||||
|
:style="styleMode == 'small' ? 'height: 2.5rem;width: 2.5rem;font-size: 1.5rem;line-height: 2.5rem;' : ''"
|
||||||
v-for="(s, i) in count_str_arr"
|
v-for="(s, i) in count_str_arr"
|
||||||
:key="`count-${i}`">
|
:key="`count-${i}`">
|
||||||
{{ s }}
|
{{ s }}
|
||||||
@@ -18,23 +19,23 @@
|
|||||||
<div class="cc-main-container">
|
<div class="cc-main-container">
|
||||||
<div class="ccmc-left">
|
<div class="ccmc-left">
|
||||||
<div class="station-info">
|
<div class="station-info">
|
||||||
<span id="fontBd" style="text-shadow:0 0 0.5em #ff3232;"> 北 斗 {{ bd_satellite_count }}</span>
|
<span id="fontBd" :style="styleMode == 'small' ? 'text-shadow:0 0 0.5em #ff3232;font-size: 0.8rem;' : 'text-shadow:0 0 0.5em #ff3232;'"> 北 斗 {{ bd_satellite_count }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="station-info">
|
<div class="station-info">
|
||||||
<span id="fontGl" style="text-shadow:0 0 0.5em #6600ff;">GLONASS {{ gl_satellite_count }}</span>
|
<span id="fontGl" :style="styleMode == 'small' ? 'text-shadow:0 0 0.5em #6600ff;font-size: 0.8rem;' : 'text-shadow:0 0 0.5em #6600ff;'">GLONASS {{ gl_satellite_count }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ccmc-middle">
|
<div class="ccmc-middle">
|
||||||
<Ring ref="ring" @changeColor="changeColor"/>
|
<Ring ref="ring" @changeColor="changeColor" :styleMode="styleMode" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ccmc-right">
|
<div class="ccmc-right">
|
||||||
<div class="station-info">
|
<div class="station-info">
|
||||||
<span id="fontGp" style="text-shadow:0 0 0.5em #00ffff;">{{ gp_satellite_count }} G P S</span>
|
<span id="fontGp" :style="styleMode == 'small' ? 'text-shadow:0 0 0.5em #00ffff;font-size: 0.8rem;' : 'text-shadow:0 0 0.5em #00ffff;'">{{ gp_satellite_count }} G P S</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="station-info">
|
<div class="station-info">
|
||||||
<span id="fontGa" style="text-shadow:0 0 0.5em #00ff66;">{{ ga_satellite_count }} Galileo</span>
|
<span id="fontGa" :style="styleMode == 'small' ? 'text-shadow:0 0 0.5em #00ff66;font-size: 0.8rem;' : 'text-shadow:0 0 0.5em #00ff66;'">{{ ga_satellite_count }} Galileo</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -42,40 +43,37 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Ring from './Ring.vue'
|
import Ring from './Ring.vue';
|
||||||
import Decoration1 from './Layout/Decoration1.vue'
|
import Decoration1 from './Layout/Decoration1.vue';
|
||||||
|
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
|
||||||
const bd_satellite_count = ref(0)
|
const bd_satellite_count = ref(0);
|
||||||
const gp_satellite_count = ref(0)
|
const gp_satellite_count = ref(0);
|
||||||
const gl_satellite_count = ref(0)
|
const gl_satellite_count = ref(0);
|
||||||
const ga_satellite_count = ref(0)
|
const ga_satellite_count = ref(0);
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
const count_str_arr = computed(() => {
|
const count_str_arr = computed(() => {
|
||||||
return (bd_satellite_count.value + gp_satellite_count.value + gl_satellite_count.value + ga_satellite_count.value).toString().split('')
|
return (bd_satellite_count.value + gp_satellite_count.value + gl_satellite_count.value + ga_satellite_count.value).toString().split('');
|
||||||
})
|
});
|
||||||
|
|
||||||
|
const ring = ref(null);
|
||||||
|
|
||||||
const ring = ref(null)
|
|
||||||
const update = (bd_satellite_length: number, gp_satellite_length: number, gl_satellite_length: number, ga_satellite_length: number) => {
|
const update = (bd_satellite_length: number, gp_satellite_length: number, gl_satellite_length: number, ga_satellite_length: number) => {
|
||||||
bd_satellite_count.value = bd_satellite_length
|
bd_satellite_count.value = bd_satellite_length;
|
||||||
gp_satellite_count.value = gp_satellite_length
|
gp_satellite_count.value = gp_satellite_length;
|
||||||
gl_satellite_count.value = gl_satellite_length
|
gl_satellite_count.value = gl_satellite_length;
|
||||||
ga_satellite_count.value = ga_satellite_length
|
ga_satellite_count.value = ga_satellite_length;
|
||||||
|
|
||||||
ring.value.update(bd_satellite_length, gp_satellite_length, gl_satellite_length, ga_satellite_length)
|
ring.value.update(bd_satellite_length, gp_satellite_length, gl_satellite_length, ga_satellite_length);
|
||||||
}
|
}
|
||||||
|
|
||||||
let bdText, glText, gpText, gaText;
|
let bdText, glText, gpText, gaText;
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
bdText = document.getElementById("fontBd");
|
|
||||||
gpText = document.getElementById("fontGp");
|
|
||||||
glText = document.getElementById("fontGl");
|
|
||||||
gaText = document.getElementById("fontGa");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const changeColor = (change, id) => {
|
const changeColor = (change, id) => {
|
||||||
let idPie = [bdText, gpText, glText, gaText];
|
let idPie = [bdText, gpText, glText, gaText];
|
||||||
let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
|
let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
|
||||||
@@ -86,9 +84,16 @@ const changeColor = (change, id) => {
|
|||||||
element.style.color = "#ffffff";
|
element.style.color = "#ffffff";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
} ;
|
||||||
|
|
||||||
defineExpose({ update })
|
defineExpose({ update });
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
bdText = document.getElementById("fontBd");
|
||||||
|
gpText = document.getElementById("fontGp");
|
||||||
|
glText = document.getElementById("fontGl");
|
||||||
|
gaText = document.getElementById("fontGa");
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -103,31 +108,29 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cc-header {
|
.cc-header {
|
||||||
height: 125px;
|
height: 6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 30px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.cc-details {
|
.cc-details {
|
||||||
height: 120px;
|
height: 6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 32px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cc-details .card {
|
.cc-details .card {
|
||||||
background-color: rgba(4,49,128,.6);
|
background-color: rgba(4,49,128,.6);
|
||||||
color: #08e5ff;
|
color: #08e5ff;
|
||||||
height: 100px;
|
height: 5rem;
|
||||||
width: 100px;
|
width: 5rem;
|
||||||
font-size: 65px;
|
font-size: 3rem;
|
||||||
|
line-height: 5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 100px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px;
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cc-main-container {
|
.cc-main-container {
|
||||||
@@ -141,7 +144,7 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.active-ring-name {
|
.active-ring-name {
|
||||||
font-size: 20px !important;
|
font-size: 1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-left, .ccmc-right {
|
.ccmc-left, .ccmc-right {
|
||||||
@@ -149,16 +152,16 @@ defineExpose({ update })
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 24px;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-left span, .ccmc-right span {
|
.ccmc-left span, .ccmc-right span {
|
||||||
font-size: 30px;
|
font-size: 1.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-left .station-info, .ccmc-right .station-info {
|
.ccmc-left .station-info, .ccmc-right .station-info {
|
||||||
height: 80px;
|
height: 4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -168,7 +171,7 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-left span {
|
.ccmc-left span {
|
||||||
margin-left: 10px;
|
margin-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-right {
|
.ccmc-right {
|
||||||
@@ -176,14 +179,14 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ccmc-right span {
|
.ccmc-right span {
|
||||||
margin-right: 10px;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-tag {
|
.label-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500px;
|
width: 25rem;
|
||||||
height: 30px;
|
height: 1.5rem;
|
||||||
bottom: 10px;
|
bottom: 0.5rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,11 +11,11 @@ import { GaugeChart } from "echarts/charts";
|
|||||||
import VChart from "vue-echarts";
|
import VChart from "vue-echarts";
|
||||||
import { reactive, onMounted } from "vue";
|
import { reactive, onMounted } from "vue";
|
||||||
|
|
||||||
use([
|
use([ CanvasRenderer, TitleComponent, GaugeChart ]);
|
||||||
CanvasRenderer,
|
|
||||||
TitleComponent,
|
const props = defineProps({
|
||||||
GaugeChart
|
styleMode: String
|
||||||
]);
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
var mychart = document.getElementById("myClock");
|
var mychart = document.getElementById("myClock");
|
||||||
@@ -69,8 +69,8 @@ const option = reactive({
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: props.styleMode == "small" ? 12 : 12,
|
||||||
distance: 15,
|
distance: props.styleMode == "small" ? 5 : 15,
|
||||||
formatter: function (value) {
|
formatter: function (value) {
|
||||||
if (value === 0) {
|
if (value === 0) {
|
||||||
return '';
|
return '';
|
||||||
|
|||||||
@@ -11,11 +11,11 @@ import { GaugeChart } from "echarts/charts";
|
|||||||
import VChart from "vue-echarts";
|
import VChart from "vue-echarts";
|
||||||
import { reactive, onMounted } from "vue";
|
import { reactive, onMounted } from "vue";
|
||||||
|
|
||||||
use([
|
use([ CanvasRenderer, TitleComponent, GaugeChart ]);
|
||||||
CanvasRenderer,
|
|
||||||
TitleComponent,
|
const props = defineProps({
|
||||||
GaugeChart
|
styleMode: String
|
||||||
]);
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
var mychart = document.getElementById("myCompass");
|
var mychart = document.getElementById("myCompass");
|
||||||
@@ -54,8 +54,8 @@ const option = reactive({
|
|||||||
},
|
},
|
||||||
axisLabel:{
|
axisLabel:{
|
||||||
color: 'white',
|
color: 'white',
|
||||||
distance: -40,
|
distance: props.styleMode == "small" ? -35 : -40,
|
||||||
fontSize: 18,
|
fontSize: props.styleMode == "small" ? 12 : 18,
|
||||||
formatter: function(v: Number){
|
formatter: function(v: Number){
|
||||||
switch(v){
|
switch(v){
|
||||||
case 0 : return '北';
|
case 0 : return '北';
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
v-for="item in digitalFlopData"
|
v-for="item in digitalFlopData"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
>
|
>
|
||||||
<div class="digital-flop-title text-2xl mb-5">{{ item.title }}</div>
|
<div class="text-2xl mb-5" :style="styleMode == 'small' ? 'font-size: 1rem;margin-bottom: 0;' : ''">{{ item.title }}</div>
|
||||||
<div class="digital-flop flex">
|
<div class="flex" :style="styleMode == 'small' ? 'font-size: 1rem;' : ''">
|
||||||
<DigitalFlop
|
<DigitalFlop
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
:style="item.style"
|
:style="item.style"
|
||||||
@@ -17,36 +17,40 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue';
|
||||||
import DigitalFlop from './DigitalFlop.vue'
|
import DigitalFlop from './DigitalFlop.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
const digitalFlopData = reactive([
|
const digitalFlopData = reactive([
|
||||||
{
|
{
|
||||||
title: '日 期',
|
title: '日 期',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #4d99fc'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #4d99fc' : 'color: #4d99fc'
|
||||||
}, {
|
}, {
|
||||||
title: '时 间',
|
title: '时 间',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #f46827'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #f46827' : 'color: #f46827'
|
||||||
}, {
|
}, {
|
||||||
title: '经 度',
|
title: '经 度',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #40faee'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #40faee' : 'color: #40faee'
|
||||||
}, {
|
}, {
|
||||||
title: '纬 度',
|
title: '纬 度',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #4d99fc'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #4d99fc' : 'color: #4d99fc'
|
||||||
}, {
|
}, {
|
||||||
title: '海 拔',
|
title: '海 拔',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #f46827'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #f46827' : 'color: #f46827'
|
||||||
}, {
|
}, {
|
||||||
title: '定位卫星数目',
|
title: '定位卫星数目',
|
||||||
value: '',
|
value: '',
|
||||||
style: 'color: #40faee'
|
style: props.styleMode == "small" ? 'font-size: 1rem; color: #40faee' : 'color: #40faee'
|
||||||
}
|
}
|
||||||
])
|
]);
|
||||||
|
|
||||||
const update = (
|
const update = (
|
||||||
dateTime: Date,
|
dateTime: Date,
|
||||||
@@ -55,20 +59,20 @@ const update = (
|
|||||||
alt: number,
|
alt: number,
|
||||||
numSat: number) => {
|
numSat: number) => {
|
||||||
// 日期
|
// 日期
|
||||||
digitalFlopData[0].value = dateTime.toLocaleDateString()
|
digitalFlopData[0].value = dateTime.toLocaleDateString();
|
||||||
// 时间
|
// 时间
|
||||||
digitalFlopData[1].value = dateTime.toLocaleTimeString()
|
digitalFlopData[1].value = dateTime.toLocaleTimeString();
|
||||||
// 经度
|
// 经度
|
||||||
digitalFlopData[2].value = `${longitude} ${longitude >= 0 ? 'E' : 'W'}`
|
digitalFlopData[2].value = `${Number(longitude).toFixed(6)} ${longitude >= 0 ? 'E' : 'W'}`;
|
||||||
// 纬度
|
// 纬度
|
||||||
digitalFlopData[3].value = `${latitude} ${latitude >= 0 ? 'N' : 'S'}`
|
digitalFlopData[3].value = `${Number(latitude).toFixed(6)} ${latitude >= 0 ? 'N' : 'S'}`;
|
||||||
// 海拔
|
// 海拔
|
||||||
digitalFlopData[4].value = `${alt} 米`
|
digitalFlopData[4].value = `${alt} 米`;
|
||||||
// 定位卫星数目
|
// 定位卫星数目
|
||||||
digitalFlopData[5].value = numSat.toString()
|
digitalFlopData[5].value = numSat.toString();
|
||||||
}
|
};
|
||||||
|
|
||||||
defineExpose({ update })
|
defineExpose({ update });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -77,6 +77,6 @@ onMounted(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 25px;
|
padding: 1.3rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
24
src/render/components/Layout/ShowAllHeader.vue
Normal file
24
src/render/components/Layout/ShowAllHeader.vue
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="the-header flex justify-between flex-shrink-0 relative left-0 top-0">
|
||||||
|
<Decoration8 class="w-1/4 h-8" />
|
||||||
|
<Decoration5 class="w-2/5 h-8 mt-8" />
|
||||||
|
<Decoration8 class="w-1/4 h-8" :reverse="true" />
|
||||||
|
<div v-if="title == '卫星数据监控平台'" @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-xl font-bold top-2 text-white">{{ title }}</div>
|
||||||
|
<div v-if="title == '卫星信息监控平台'" @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-xl font-bold top-2 text-white">{{ title }}</div>
|
||||||
|
<div v-if="title == '卫星信号监控平台'" @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-xl font-bold top-2 text-white">{{ title }}</div>
|
||||||
|
<div v-if="title == '卫星状态监控平台'" @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-xl font-bold top-2 text-white">{{ title }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import Decoration5 from './Decoration5.vue'
|
||||||
|
import Decoration8 from './Decoration8.vue'
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
window.ipcRenderer.send('CLOSE')
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
title: String
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -14,6 +14,10 @@ import { intersect, findMap } from "../assets/geojson/geo.js";
|
|||||||
|
|
||||||
use([ CanvasRenderer, MapChart, ScatterChart ]);
|
use([ CanvasRenderer, MapChart, ScatterChart ]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
var mychart = document.getElementById("myMap");
|
var mychart = document.getElementById("myMap");
|
||||||
mychart.firstChild.style.margin = "auto";
|
mychart.firstChild.style.margin = "auto";
|
||||||
@@ -28,7 +32,7 @@ const option = reactive({
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 18
|
fontSize: props.styleMode == "small" ? 12 : 18
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
@@ -46,7 +50,7 @@ const option = reactive({
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 18
|
fontSize: props.styleMode == "small" ? 12 : 18
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="animationList" class="animationText mb-2"></div>
|
<div id="animationList" class="animationText mb-2" :style="styleMode == 'small' ? 'font-size: 0.2rem;line-height: 0.4rem;' : ''"></div>
|
||||||
<div id="newnmeaList" class="animationText"></div>
|
<div id="newnmeaList" class="animationText" :style="styleMode == 'small' ? 'font-size: 0.2rem;line-height: 0.4rem;' : ''"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -9,6 +9,10 @@ import { ref, onMounted } from "vue";
|
|||||||
const animationValue = ref("");
|
const animationValue = ref("");
|
||||||
const colorId = ref(0);
|
const colorId = ref(0);
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
var nmeaList;
|
var nmeaList;
|
||||||
var newList;
|
var newList;
|
||||||
|
|
||||||
@@ -76,7 +80,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.animationText {
|
.animationText {
|
||||||
font-size: 0.5rem;
|
font-size: 0.4rem;
|
||||||
line-height: 1rem;
|
line-height: 0.8rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -37,6 +37,7 @@ const props = defineProps({
|
|||||||
title: String,
|
title: String,
|
||||||
color: String,
|
color: String,
|
||||||
baseUrl: String,
|
baseUrl: String,
|
||||||
|
styleMode: String
|
||||||
});
|
});
|
||||||
|
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
@@ -45,7 +46,7 @@ const option = reactive({
|
|||||||
left: "center",
|
left: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 28,
|
fontSize: props.styleMode == "small" ? 14 : 28,
|
||||||
textBorderColor: props.color,
|
textBorderColor: props.color,
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
textShadowColor: props.color,
|
textShadowColor: props.color,
|
||||||
@@ -64,7 +65,7 @@ const option = reactive({
|
|||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 24,
|
fontSize: props.styleMode == "small" ? 12 : 24,
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
switch (value) {
|
switch (value) {
|
||||||
case 0:
|
case 0:
|
||||||
@@ -98,13 +99,13 @@ const option = reactive({
|
|||||||
nmea: "un-positioning",
|
nmea: "un-positioning",
|
||||||
coordinateSystem: "polar",
|
coordinateSystem: "polar",
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
symbolSize: 32,
|
symbolSize: props.styleMode == "small" ? 16 : 32,
|
||||||
symbol: "image://" + baseImg[props.baseUrl],
|
symbol: "image://" + baseImg[props.baseUrl],
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 14,
|
fontSize: props.styleMode == "small" ? 7 : 14,
|
||||||
offset: [0,30],
|
offset: props.styleMode == "small" ? [0,15] : [0,30],
|
||||||
textBorderColor: props.color,
|
textBorderColor: props.color,
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
formatter: "{@[2]}",
|
formatter: "{@[2]}",
|
||||||
@@ -121,13 +122,13 @@ const option = reactive({
|
|||||||
nmea: "un-positioning-un",
|
nmea: "un-positioning-un",
|
||||||
coordinateSystem: "polar",
|
coordinateSystem: "polar",
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
symbolSize: 32,
|
symbolSize: props.styleMode == "small" ? 16: 32,
|
||||||
symbol: "image://" + baseImg["un" + props.baseUrl],
|
symbol: "image://" + baseImg["un" + props.baseUrl],
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 14,
|
fontSize: props.styleMode == "small" ? 7 : 14,
|
||||||
offset: [0,30],
|
offset: props.styleMode == "small" ? [0,15] : [0,30],
|
||||||
textBorderColor: "#ccc",
|
textBorderColor: "#ccc",
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
formatter: "{@[2]}",
|
formatter: "{@[2]}",
|
||||||
@@ -144,13 +145,13 @@ const option = reactive({
|
|||||||
nmea: "in-positioning",
|
nmea: "in-positioning",
|
||||||
coordinateSystem: "polar",
|
coordinateSystem: "polar",
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
symbolSize: 32,
|
symbolSize: props.styleMode == "small" ? 16 : 32,
|
||||||
symbol: "image://" + baseImg[props.baseUrl],
|
symbol: "image://" + baseImg[props.baseUrl],
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 14,
|
fontSize: props.styleMode == "small" ? 7 : 14,
|
||||||
offset: [0,30],
|
offset: props.styleMode == "small" ? [0,15] : [0,30],
|
||||||
textBorderColor: props.color,
|
textBorderColor: props.color,
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
formatter: "{@[2]}",
|
formatter: "{@[2]}",
|
||||||
@@ -167,13 +168,13 @@ const option = reactive({
|
|||||||
nmea: "in-positioning-un",
|
nmea: "in-positioning-un",
|
||||||
coordinateSystem: "polar",
|
coordinateSystem: "polar",
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
symbolSize: 32,
|
symbolSize: props.styleMode == "small" ? 16 : 32,
|
||||||
symbol: "image://" + baseImg["un" + props.baseUrl],
|
symbol: "image://" + baseImg["un" + props.baseUrl],
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 14,
|
fontSize: props.styleMode == "small" ? 7 : 14,
|
||||||
offset: [0,30],
|
offset: props.styleMode == "small" ? [0,15] : [0,30],
|
||||||
textBorderColor: "#ccc",
|
textBorderColor: "#ccc",
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
formatter: "{@[2]}",
|
formatter: "{@[2]}",
|
||||||
|
|||||||
@@ -14,6 +14,10 @@ import { ref, reactive, onMounted } from "vue";
|
|||||||
|
|
||||||
use([CanvasRenderer, LegendComponent, PieChart]);
|
use([CanvasRenderer, LegendComponent, PieChart]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['changeColor']);
|
const emit = defineEmits(['changeColor']);
|
||||||
|
|
||||||
const ring = ref(null);
|
const ring = ref(null);
|
||||||
@@ -109,12 +113,12 @@ const option = reactive({
|
|||||||
bottom: '10%',
|
bottom: '10%',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
selectedMode: false,
|
selectedMode: false,
|
||||||
itemGap: 12,
|
itemGap: props.styleMode == "small" ? 6 : 12,
|
||||||
itemWidth: 35,
|
itemWidth: props.styleMode == "small" ? 18 : 36,
|
||||||
itemHeight: 20,
|
itemHeight: props.styleMode == "small" ? 10 : 20,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'auto',
|
color: 'auto',
|
||||||
fontSize: 16
|
fontSize: props.styleMode == "small" ? 10 : 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis3D: {
|
xAxis3D: {
|
||||||
@@ -264,7 +268,7 @@ const option = reactive({
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: '28',
|
fontSize: props.styleMode == "small" ? '14' : '28',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
formatter: '{c}\n\n{b}',
|
formatter: '{c}\n\n{b}',
|
||||||
textBorderWidth: 1,
|
textBorderWidth: 1,
|
||||||
@@ -313,6 +317,7 @@ const getPie3D = (sumValue, pieValue, internalDiameterRatio, height, size) => {
|
|||||||
|
|
||||||
let highlightIndex = 0;
|
let highlightIndex = 0;
|
||||||
let reset = false;
|
let reset = false;
|
||||||
|
|
||||||
const highlight = () => {
|
const highlight = () => {
|
||||||
let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
|
let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
|
||||||
reset = !reset;
|
reset = !reset;
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ use([CanvasRenderer, BarChart, TitleComponent, GridComponent, DataZoomComponent]
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: String,
|
title: String,
|
||||||
color: String,
|
color: String,
|
||||||
myid: String
|
myid: String,
|
||||||
|
styleMode: String
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@@ -68,7 +69,7 @@ const option = reactive({
|
|||||||
top: 36,
|
top: 36,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 36,
|
fontSize: props.styleMode == "small" ? 18 : 36,
|
||||||
textBorderColor: props.color,
|
textBorderColor: props.color,
|
||||||
textBorderWidth: 2,
|
textBorderWidth: 2,
|
||||||
textShadowColor: props.color,
|
textShadowColor: props.color,
|
||||||
@@ -83,7 +84,7 @@ const option = reactive({
|
|||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "white",
|
color: "white",
|
||||||
fontSize: 12,
|
fontSize: props.styleMode == "small" ? 10 : 12,
|
||||||
textBorderColor: props.color,
|
textBorderColor: props.color,
|
||||||
textBorderWidth: 1,
|
textBorderWidth: 1,
|
||||||
textShadowColor: props.color,
|
textShadowColor: props.color,
|
||||||
|
|||||||
@@ -1,10 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="satellite-table h-full flex flex-col">
|
<div class="satellite-table h-full flex flex-col">
|
||||||
<div class="shadow text-center text-3xl my-2">{{ title }}</div>
|
<div class="table-title shadow text-center text-3xl my-2"
|
||||||
|
:style="styleMode == 'small' ?
|
||||||
|
title == '北 斗' ? 'color: #ff3232;text-shadow:0 0 1em #ff3232;font-size: 1rem;'
|
||||||
|
: title == 'G P S' ? 'color: #00ffff;text-shadow:0 0 1em #00ffff;font-size: 1rem;'
|
||||||
|
: title == 'GLONASS' ? 'color: #6600ff;text-shadow:0 0 1em #6600ff;font-size: 1rem;'
|
||||||
|
: title == 'Galileo' ? 'color: #00ff66;text-shadow:0 0 1em #00ff66;font-size: 1rem;'
|
||||||
|
: ''
|
||||||
|
:
|
||||||
|
title == '北 斗' ? 'color: #ff3232;text-shadow:0 0 1em #ff3232;margin-bottom: 0.5rem;'
|
||||||
|
: title == 'G P S' ? 'color: #00ffff;text-shadow:0 0 1em #00ffff;margin-bottom: 0.5rem;'
|
||||||
|
: title == 'GLONASS' ? 'color: #6600ff;text-shadow:0 0 1em #6600ff;margin-bottom: 0.5rem;'
|
||||||
|
: title == 'Galileo' ? 'color: #00ff66;text-shadow:0 0 1em #00ff66;margin-bottom: 0.5rem;'
|
||||||
|
: ''
|
||||||
|
">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="table-header flex">
|
<div class="table-header flex" :style="styleMode == 'small' ? 'font-size: 0.5rem;' : ''">
|
||||||
<div
|
<div
|
||||||
class="table-header-item leading-10 flex-1"
|
class="table-header-item leading-10 flex-1"
|
||||||
|
:style="styleMode == 'small' ? 'height: 1rem;line-height: 1rem;' : ''"
|
||||||
v-for="(headerItem, i) in header"
|
v-for="(headerItem, i) in header"
|
||||||
:key="`${headerItem}${i}`"
|
:key="`${headerItem}${i}`"
|
||||||
v-html="headerItem"
|
v-html="headerItem"
|
||||||
@@ -16,11 +32,16 @@
|
|||||||
class="row-item flex"
|
class="row-item flex"
|
||||||
v-for="(row, ri) in data.satellites"
|
v-for="(row, ri) in data.satellites"
|
||||||
:key="`${row.toString()}`"
|
:key="`${row.toString()}`"
|
||||||
:style="`
|
:style="styleMode == 'small' ?
|
||||||
background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
`background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
||||||
--itemY: -${data.itemY}px;
|
--itemY: -${data.itemY}px;
|
||||||
--itemS: ${data.itemS}s;
|
--itemS: ${data.itemS}s;
|
||||||
`"
|
font-size: 0.5rem;
|
||||||
|
height: 1rem;
|
||||||
|
line-height: 1rem;`:
|
||||||
|
`background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
||||||
|
--itemY: -${data.itemY}px;
|
||||||
|
--itemS: ${data.itemS}s;`"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ceil flex-1 cell"
|
class="ceil flex-1 cell"
|
||||||
@@ -34,17 +55,25 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
import { ref, reactive, getCurrentInstance } from 'vue';;
|
||||||
|
|
||||||
defineProps({
|
const props = defineProps({
|
||||||
title: String
|
title: String,
|
||||||
})
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
const instance = getCurrentInstance()
|
const titleColor = {
|
||||||
const oddRowBGC = '#003B51'
|
"北 斗": 'color: #ff3232',
|
||||||
const evenRowBGC = '#0A2732'
|
"G P S": 'color: #00ffff',
|
||||||
|
"GLONASS": 'color: #6600ff',
|
||||||
|
"Galileo": 'color: #00ff66',
|
||||||
|
};
|
||||||
|
|
||||||
const header = ['卫星编号', '仰角', '方位角', '载噪比']
|
const instance = getCurrentInstance();
|
||||||
|
const oddRowBGC = '#003B51';
|
||||||
|
const evenRowBGC = '#0A2732';
|
||||||
|
|
||||||
|
const header = ['卫星编号', '仰角', '方位角', '载噪比'];
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
satellites: [
|
satellites: [
|
||||||
// {id: 0, svid: 1, cn: 2, sd: 3},
|
// {id: 0, svid: 1, cn: 2, sd: 3},
|
||||||
@@ -60,51 +89,57 @@ const data = reactive({
|
|||||||
],
|
],
|
||||||
itemY: 0,
|
itemY: 0,
|
||||||
itemS: 0
|
itemS: 0
|
||||||
})
|
});
|
||||||
const warehouse = ref([])
|
const warehouse = ref([]);
|
||||||
const count = ref(0)
|
const count = ref(0);
|
||||||
const update = (GSVArr: Array<any>) => {
|
const update = (GSVArr: Array<any>) => {
|
||||||
if (GSVArr.length <= 0 ) return
|
if (GSVArr.length <= 0 ) return;
|
||||||
|
|
||||||
let satellites: any[] = []
|
let satellites: any[] = [];
|
||||||
GSVArr.forEach((GSV) => {
|
GSVArr.forEach((GSV) => {
|
||||||
satellites = satellites.concat(GSV.satellites)
|
satellites = satellites.concat(GSV.satellites);
|
||||||
})
|
});
|
||||||
if(warehouse.value.length < 4){
|
if(warehouse.value.length < 4){
|
||||||
warehouse.value.push(satellites)
|
warehouse.value.push(satellites);
|
||||||
}
|
}
|
||||||
if(warehouse.value.length == 4){
|
if(warehouse.value.length == 4){
|
||||||
if(count.value < 5){
|
if(count.value < 5){
|
||||||
if(count.value == 4){
|
if(count.value == 4){
|
||||||
count.value = 0
|
count.value = 0;
|
||||||
}
|
}
|
||||||
if(warehouse.value[count.value].length == satellites.length){
|
if(warehouse.value[count.value].length == satellites.length){
|
||||||
data.satellites = satellites
|
data.satellites = satellites;
|
||||||
data.itemY = (satellites.length-9<0?0:satellites.length-9)*38.02
|
data.itemY = (satellites.length-9<0?0:satellites.length-9)*38.02;
|
||||||
data.itemS = (satellites.length-9<0?0:satellites.length-9)*6
|
data.itemS = (satellites.length-9<0?0:satellites.length-9)*6;
|
||||||
}else{
|
}else{
|
||||||
warehouse.value[count.value] = satellites
|
warehouse.value[count.value] = satellites;
|
||||||
data.satellites = []
|
data.satellites = [];
|
||||||
data.itemY = 0
|
data.itemY = 0;
|
||||||
data.itemS = 0
|
data.itemS = 0;
|
||||||
}
|
}
|
||||||
count.value = count.value + 1
|
count.value = count.value + 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
defineExpose({ update })
|
defineExpose({ update });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.table-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.table-header {
|
.table-header {
|
||||||
|
font-size: 1rem;
|
||||||
background-color: rgba(25, 129, 246, .6);
|
background-color: rgba(25, 129, 246, .6);
|
||||||
border-top-left-radius: 6px;
|
border-top-left-radius: 6px;
|
||||||
border-top-right-radius: 6px;
|
border-top-right-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-body {
|
.table-body {
|
||||||
height: 342px;
|
height: 16rem;
|
||||||
border-bottom-left-radius: 6px;
|
border-bottom-left-radius: 6px;
|
||||||
border-bottom-right-radius: 6px;
|
border-bottom-right-radius: 6px;
|
||||||
}
|
}
|
||||||
@@ -114,7 +149,7 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table-body:hover::-webkit-scrollbar {
|
.table-body:hover::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-body:hover::-webkit-scrollbar-thumb {
|
.table-body:hover::-webkit-scrollbar-thumb {
|
||||||
@@ -129,7 +164,8 @@ defineExpose({ update })
|
|||||||
}
|
}
|
||||||
|
|
||||||
.row-item {
|
.row-item {
|
||||||
line-height: 38px;
|
font-size: 1rem;
|
||||||
|
line-height: 2rem;
|
||||||
animation: rolling var(--itemS) infinite linear;
|
animation: rolling var(--itemS) infinite linear;
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
transition-duration: 4s;
|
transition-duration: 4s;
|
||||||
|
|||||||
@@ -11,17 +11,17 @@ import 'echarts-liquidfill'
|
|||||||
import VChart from "vue-echarts";
|
import VChart from "vue-echarts";
|
||||||
|
|
||||||
|
|
||||||
use([
|
use([ CanvasRenderer, TitleComponent ]);
|
||||||
CanvasRenderer,
|
|
||||||
TitleComponent
|
const props = defineProps({
|
||||||
]);
|
styleMode: String
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
var mychart = document.getElementById("myWaterLevel");
|
var mychart = document.getElementById("myWaterLevel");
|
||||||
mychart.firstChild.style.margin = "auto";
|
mychart.firstChild.style.margin = "auto";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const option = reactive({
|
const option = reactive({
|
||||||
title: {
|
title: {
|
||||||
text: '海拔',
|
text: '海拔',
|
||||||
@@ -36,7 +36,7 @@ const option = reactive({
|
|||||||
color: 'transparency'
|
color: 'transparency'
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
fontSize : 36,
|
fontSize : props.styleMode == "small" ? 18 : 36,
|
||||||
formatter: function({ value }) {
|
formatter: function({ value }) {
|
||||||
return parseInt(value)
|
return parseInt(value)
|
||||||
}
|
}
|
||||||
|
|||||||
6
src/render/oneShow.ts
Normal file
6
src/render/oneShow.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './page/oneShow.vue';
|
||||||
|
|
||||||
|
import './assets/css/main.css';
|
||||||
|
|
||||||
|
createApp(App).mount('#app');
|
||||||
6
src/render/oneShowAll.ts
Normal file
6
src/render/oneShowAll.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './page/oneShowAll.vue';
|
||||||
|
|
||||||
|
import './assets/css/main.css';
|
||||||
|
|
||||||
|
createApp(App).mount('#app');
|
||||||
6
src/render/oneShowSwitch.ts
Normal file
6
src/render/oneShowSwitch.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './page/oneShowSwitch.vue';
|
||||||
|
|
||||||
|
import './assets/css/main.css';
|
||||||
|
|
||||||
|
createApp(App).mount('#app');
|
||||||
@@ -1,27 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<full-screen-container>
|
<full-screen-container>
|
||||||
<TheHeader title="卫星数据监控平台" />
|
<TheHeader title="卫星数据监控平台" />
|
||||||
|
|
||||||
<div class="main-content flex flex-1 flex-col">
|
<div class="main-content flex flex-1 flex-col">
|
||||||
<DigitalFlopContainer ref="digitalFlopContainer" />
|
<DigitalFlopContainer ref="digitalFlopContainer" styleMode="large" />
|
||||||
|
|
||||||
<div class="block-left-right-content flex flex-1 mt-5">
|
<div class="block-left-right-content flex flex-1 mt-5">
|
||||||
<div class="block-left-content w-1/5 flex flex-col">
|
<div class="block-left-content w-1/5 flex flex-col">
|
||||||
<div class="clock-content mb-2 flex-1">
|
<div class="clock-content mb-2 flex-1">
|
||||||
<Clock ref="clock" />
|
<Clock ref="clock" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="compass-content mb-2 flex-1">
|
<div class="compass-content mb-2 flex-1">
|
||||||
<Compass ref="compass" />
|
<Compass ref="compass" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="water-level-content flex-1">
|
<div class="water-level-content flex-1">
|
||||||
<WaterLevel ref="waterLevel" />
|
<WaterLevel ref="waterLevel" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="block-right-content mx-2 flex flex-1">
|
<div class="block-right-content mx-2 flex flex-1">
|
||||||
<Map ref="map" />
|
<Map ref="map" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
||||||
<NMEAAnimation ref="nmeaAnimate" />
|
<NMEAAnimation ref="nmeaAnimate" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="text-white fixed bottom-0 right-0">
|
<div class="text-white fixed bottom-0 right-0">
|
||||||
四大系统卫星运行状态监控系统V1.0
|
四大系统卫星运行状态监控系统V1.0
|
||||||
@@ -85,19 +83,16 @@ const getMonitoringData = (nmeaStr: string) => {
|
|||||||
const { date, timestamp, variation, variationPole } = RMC;
|
const { date, timestamp, variation, variationPole } = RMC;
|
||||||
// 经度,经度方向,纬度,纬度方向,海拔,用于定位的卫星数目
|
// 经度,经度方向,纬度,纬度方向,海拔,用于定位的卫星数目
|
||||||
const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
|
const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
|
||||||
|
|
||||||
const dateTime = getDate(date, timestamp);
|
const dateTime = getDate(date, timestamp);
|
||||||
|
|
||||||
const longitude = Helpers.parseLongitude(lon, lonPole);
|
const longitude = Helpers.parseLongitude(lon, lonPole);
|
||||||
const latitude = Helpers.parseLatitude(lat, latPole);
|
const latitude = Helpers.parseLatitude(lat, latPole);
|
||||||
|
|
||||||
return { dateTime, longitude, latitude, alt, variation, variationPole, numSat };
|
return { dateTime, longitude, latitude, alt, variation, variationPole, numSat };
|
||||||
};
|
};
|
||||||
|
|
||||||
const update = (nmeaStr: string) => {
|
const update = (nmeaStr: string) => {
|
||||||
const data: any = getMonitoringData(nmeaStr);
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
if (!data) return;
|
if (!data) return;
|
||||||
|
|
||||||
const { dateTime, longitude, latitude, alt, variation, variationPole, numSat } = data;
|
const { dateTime, longitude, latitude, alt, variation, variationPole, numSat } = data;
|
||||||
if (longitude != NaN && latitude != NaN && longitude != "NaN" && latitude != "NaN") {
|
if (longitude != NaN && latitude != NaN && longitude != "NaN" && latitude != "NaN") {
|
||||||
stagingObj.dateTime = dateTime;
|
stagingObj.dateTime = dateTime;
|
||||||
|
|||||||
@@ -1,27 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<full-screen-container>
|
<full-screen-container>
|
||||||
<TheHeader title="卫星信息监控平台" />
|
<TheHeader title="卫星信息监控平台" />
|
||||||
|
|
||||||
<div class="main-content flex flex-1">
|
<div class="main-content flex flex-1">
|
||||||
<div class="w-1/4 px-2 flex flex-col">
|
<div class="w-1/4 px-2 flex flex-col">
|
||||||
<border-box-3>
|
<border-box-3>
|
||||||
<ScrollBoardTable ref="BDScrollBoardTable" title="北 斗" />
|
<ScrollBoardTable ref="BDScrollBoardTable" title="北 斗" styleMode="large" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
<border-box-3>
|
<border-box-3>
|
||||||
<ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" />
|
<ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" styleMode="large" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-1/2 px-2">
|
<div class="w-1/2 px-2">
|
||||||
<border-box-3>
|
<border-box-3>
|
||||||
<CenterCmp ref="centerCmp" />
|
<CenterCmp ref="centerCmp" styleMode="large" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-1/4 flex flex-col px-2">
|
<div class="w-1/4 flex flex-col px-2">
|
||||||
<border-box-3>
|
<border-box-3>
|
||||||
<ScrollBoardTable ref="GPScrollBoardTable" title="G P S" />
|
<ScrollBoardTable ref="GPScrollBoardTable" title="G P S" styleMode="large" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
<border-box-3>
|
<border-box-3>
|
||||||
<ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" />
|
<ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" styleMode="large" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -29,53 +28,55 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue';
|
||||||
import TheHeader from '../components/Layout/TheHeader.vue'
|
import TheHeader from '../components/Layout/TheHeader.vue';
|
||||||
import BorderBox3 from '../components/Layout/BorderBox3.vue'
|
import BorderBox3 from '../components/Layout/BorderBox3.vue';
|
||||||
import CenterCmp from '../components/CenterCmp.vue'
|
import CenterCmp from '../components/CenterCmp.vue';
|
||||||
import ScrollBoardTable from '../components/ScrollBoardTable.vue'
|
import ScrollBoardTable from '../components/ScrollBoardTable.vue';
|
||||||
|
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue';
|
||||||
import { getGSV } from '../api/util'
|
import { getGSV } from '../api/util';
|
||||||
|
|
||||||
const BDScrollBoardTable = ref(null)
|
const BDScrollBoardTable = ref(null);
|
||||||
const GPScrollBoardTable = ref(null)
|
const GPScrollBoardTable = ref(null);
|
||||||
const GLScrollBoardTable = ref(null)
|
const GLScrollBoardTable = ref(null);
|
||||||
const GAScrollBoardTable = ref(null)
|
const GAScrollBoardTable = ref(null);
|
||||||
const centerCmp = ref(null)
|
const centerCmp = ref(null);
|
||||||
const update = (nmeaStr: string) => {
|
|
||||||
|
|
||||||
const data: any = getGSV(nmeaStr)
|
|
||||||
if (!data) return
|
|
||||||
|
|
||||||
const { bd, gp, gl, ga } = data
|
|
||||||
BDScrollBoardTable.value.update(bd.GSVArr)
|
|
||||||
GPScrollBoardTable.value.update(gp.GSVArr)
|
|
||||||
GLScrollBoardTable.value.update(gl.GSVArr)
|
|
||||||
GAScrollBoardTable.value.update(ga.GSVArr)
|
|
||||||
|
|
||||||
const bd_satellite_count = getSatelliteCount(bd.GSVArr)
|
|
||||||
const gp_satellite_count = getSatelliteCount(gp.GSVArr)
|
|
||||||
const gl_satellite_count = getSatelliteCount(gl.GSVArr)
|
|
||||||
const ga_satellite_count = getSatelliteCount(ga.GSVArr)
|
|
||||||
|
|
||||||
centerCmp.value.update(bd_satellite_count, gp_satellite_count, gl_satellite_count, ga_satellite_count)
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
if ('ipcRenderer' in window) {
|
|
||||||
ipcRenderer.receive('nmea', update)
|
|
||||||
|
|
||||||
ipcRenderer.send('APP_MOUNTED')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const getSatelliteCount = (GSVArr: Array<any>) => {
|
const getSatelliteCount = (GSVArr: Array<any>) => {
|
||||||
if (!GSVArr) return
|
if (!GSVArr) return;
|
||||||
|
|
||||||
const count = GSVArr.reduce((total, gsv) => {
|
|
||||||
return total + gsv.satellites.length
|
|
||||||
}, 0)
|
|
||||||
|
|
||||||
return count
|
const count = GSVArr.reduce((total, gsv) => {
|
||||||
}
|
return total + gsv.satellites.length;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = (nmeaStr: string) => {
|
||||||
|
const data: any = getGSV(nmeaStr);
|
||||||
|
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
const { bd, gp, gl, ga } = data;
|
||||||
|
|
||||||
|
BDScrollBoardTable.value.update(bd.GSVArr);
|
||||||
|
GPScrollBoardTable.value.update(gp.GSVArr);
|
||||||
|
GLScrollBoardTable.value.update(gl.GSVArr);
|
||||||
|
GAScrollBoardTable.value.update(ga.GSVArr);
|
||||||
|
|
||||||
|
const bd_satellite_count = getSatelliteCount(bd.GSVArr);
|
||||||
|
const gp_satellite_count = getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_satellite_count = getSatelliteCount(gl.GSVArr);
|
||||||
|
const ga_satellite_count = getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
centerCmp.value.update(bd_satellite_count, gp_satellite_count, gl_satellite_count, ga_satellite_count);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ('ipcRenderer' in window) {
|
||||||
|
ipcRenderer.receive('nmea', update);
|
||||||
|
ipcRenderer.send('APP_MOUNTED');
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,45 +1,85 @@
|
|||||||
<template>
|
<template>
|
||||||
<full-screen-container>
|
<full-screen-container>
|
||||||
<TheHeader title="卫星信号监控平台" />
|
<TheHeader title="卫星信号监控平台" />
|
||||||
|
|
||||||
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
<div class="w-11/12 justify-self-end">
|
<div class="w-11/12 justify-self-end">
|
||||||
<SNRView ref="BDSNRView" color="rgb(255,50,50)" myid="bdBar" title="北斗" />
|
<SNRView ref="BDSNRView" color="rgb(255,50,50)" myid="bdBar" title="北斗" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-11/12 justify-self-start">
|
<div class="w-11/12 justify-self-start">
|
||||||
<SNRView ref="GPSNRView" color="rgb(0,204,255)" myid="gpsBar" title="GPS" />
|
<SNRView ref="GPSNRView" color="rgb(0,204,255)" myid="gpsBar" title="GPS" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-11/12 justify-self-end">
|
<div class="w-11/12 justify-self-end">
|
||||||
<SNRView ref="GLSNRView" color="rgb(102,0,255)" myid="glonassBar" title="GLONASS" />
|
<SNRView ref="GLSNRView" color="rgb(102,0,255)" myid="glonassBar" title="GLONASS" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-11/12 justify-self-start">
|
<div class="w-11/12 justify-self-start">
|
||||||
<SNRView ref="GASNRView" color="rgb(0,204,102)" myid="galileoBar" title="Galileo" />
|
<SNRView ref="GASNRView" color="rgb(0,204,102)" myid="galileoBar" title="Galileo" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</full-screen-container>
|
</full-screen-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue';
|
||||||
import TheHeader from '../components/Layout/TheHeader.vue'
|
import TheHeader from '../components/Layout/TheHeader.vue';
|
||||||
import SNRView from '../components/SNRView.vue'
|
import SNRView from '../components/SNRView.vue';
|
||||||
|
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue';
|
||||||
import { getNMEAObj } from '../api/util'
|
import { getNMEAObj } from '../api/util';
|
||||||
|
|
||||||
|
const BDSNRView = ref(null);
|
||||||
|
const GPSNRView = ref(null);
|
||||||
|
const GLSNRView = ref(null);
|
||||||
|
const GASNRView = ref(null);
|
||||||
|
|
||||||
|
const getMonitoringData = (nmeaStr: string) => {
|
||||||
|
const nmeaObj: any = getNMEAObj(nmeaStr)
|
||||||
|
// console.log(nmeaObj, '================')
|
||||||
|
if (!nmeaObj || !nmeaObj.GSV || !nmeaObj.GSA) return null;
|
||||||
|
const { GSV, GSA } = nmeaObj;
|
||||||
|
const bd = {
|
||||||
|
// NMEA 1083 3.x $BDGSV,...*
|
||||||
|
// NMEA 1083 4.0x $GBGSV,...*
|
||||||
|
// NMEA 1083 4.1x $GBGSV,...,1* | $GBGSV,...,0*
|
||||||
|
// GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
|
||||||
|
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GB'),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GB')
|
||||||
|
};
|
||||||
|
const gp = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
|
||||||
|
};
|
||||||
|
const gl = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
|
||||||
|
};
|
||||||
|
const ga = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
|
||||||
|
};
|
||||||
|
return { bd, gp, gl, ga };
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSatelliteCount = (GSVArr: Array<any>) => {
|
||||||
|
if (!GSVArr) return;
|
||||||
|
|
||||||
|
const count = GSVArr.reduce((total, gsv) => {
|
||||||
|
return total + gsv.satellites.length;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
const BDSNRView = ref(null)
|
|
||||||
const GPSNRView = ref(null)
|
|
||||||
const GLSNRView = ref(null)
|
|
||||||
const GASNRView = ref(null)
|
|
||||||
const update = (nmeaStr: string) => {
|
const update = (nmeaStr: string) => {
|
||||||
const data: any = getMonitoringData(nmeaStr)
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
if (!data) return
|
|
||||||
|
|
||||||
const { bd, gp, gl, ga } = data
|
if (!data) return;
|
||||||
|
|
||||||
const bd_gp_satellite_count = getSatelliteCount(bd.GSVArr)>getSatelliteCount(gp.GSVArr)?getSatelliteCount(bd.GSVArr):getSatelliteCount(gp.GSVArr)
|
const { bd, gp, gl, ga } = data;
|
||||||
const gl_ga_satellite_count = getSatelliteCount(gl.GSVArr)>getSatelliteCount(ga.GSVArr)?getSatelliteCount(gl.GSVArr):getSatelliteCount(ga.GSVArr)
|
|
||||||
const lineMax=bd_gp_satellite_count>gl_ga_satellite_count?bd_gp_satellite_count:gl_ga_satellite_count
|
const bd_gp_satellite_count = getSatelliteCount(bd.GSVArr)>getSatelliteCount(gp.GSVArr)?getSatelliteCount(bd.GSVArr):getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_ga_satellite_count = getSatelliteCount(gl.GSVArr)>getSatelliteCount(ga.GSVArr)?getSatelliteCount(gl.GSVArr):getSatelliteCount(ga.GSVArr);
|
||||||
|
const lineMax=bd_gp_satellite_count>gl_ga_satellite_count?bd_gp_satellite_count:gl_ga_satellite_count;
|
||||||
|
|
||||||
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
|
||||||
@@ -50,58 +90,16 @@ const update = (nmeaStr: string) => {
|
|||||||
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
||||||
|
|
||||||
// 粗细一致,x轴长度以数据最多的条目为准
|
// 粗细一致,x轴长度以数据最多的条目为准
|
||||||
BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax)
|
BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax);
|
||||||
GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax)
|
GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax);
|
||||||
GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax)
|
GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax);
|
||||||
GASNRView.value.update(ga.GSVArr, ga.GSAArr, lineMax)
|
GASNRView.value.update(ga.GSVArr, ga.GSAArr, lineMax);
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if ('ipcRenderer' in window) {
|
if ('ipcRenderer' in window) {
|
||||||
ipcRenderer.receive('nmea', update)
|
ipcRenderer.receive('nmea', update);
|
||||||
|
ipcRenderer.send('APP_MOUNTED');
|
||||||
ipcRenderer.send('APP_MOUNTED')
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
const getSatelliteCount = (GSVArr: Array<any>) => {
|
|
||||||
if (!GSVArr) return
|
|
||||||
|
|
||||||
const count = GSVArr.reduce((total, gsv) => {
|
|
||||||
return total + gsv.satellites.length
|
|
||||||
}, 0)
|
|
||||||
|
|
||||||
return count
|
|
||||||
}
|
|
||||||
|
|
||||||
const getMonitoringData = (nmeaStr: string) => {
|
|
||||||
const nmeaObj: any = getNMEAObj(nmeaStr)
|
|
||||||
// console.log(nmeaObj, '================')
|
|
||||||
if (!nmeaObj || !nmeaObj.GSV || !nmeaObj.GSA) return null
|
|
||||||
|
|
||||||
const { GSV, GSA } = nmeaObj
|
|
||||||
const bd = {
|
|
||||||
// NMEA 1083 3.x $BDGSV,...*
|
|
||||||
// NMEA 1083 4.0x $GBGSV,...*
|
|
||||||
// NMEA 1083 4.1x $GBGSV,...,1* | $GBGSV,...,0*
|
|
||||||
// GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
|
|
||||||
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GB'),
|
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GB')
|
|
||||||
}
|
|
||||||
const gp = {
|
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
|
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
|
|
||||||
}
|
|
||||||
const gl = {
|
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
|
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
|
|
||||||
}
|
|
||||||
const ga = {
|
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
|
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
|
|
||||||
}
|
|
||||||
|
|
||||||
return { bd, gp, gl, ga }
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,63 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<full-screen-container>
|
<full-screen-container>
|
||||||
<TheHeader title="卫星状态监控平台" />
|
<TheHeader title="卫星状态监控平台" />
|
||||||
|
|
||||||
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
<div class="w-5/6 justify-self-end">
|
<div class="w-5/6 justify-self-end">
|
||||||
<PlanisphereView ref="BDPlanisphereView" color="rgb(255,50,50)" title="北斗" baseUrl="beidou" />
|
<PlanisphereView ref="BDPlanisphereView" color="rgb(255,50,50)" title="北斗" baseUrl="beidou" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-5/6 justify-self-start">
|
<div class="w-5/6 justify-self-start">
|
||||||
<PlanisphereView ref="GPPlanisphereView" color="rgb(0,204,255)" title="GPS" baseUrl="gps" />
|
<PlanisphereView ref="GPPlanisphereView" color="rgb(0,204,255)" title="GPS" baseUrl="gps" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-5/6 justify-self-end">
|
<div class="w-5/6 justify-self-end">
|
||||||
<PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="GLONASS" baseUrl="glonass" />
|
<PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="GLONASS" baseUrl="glonass" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-5/6 justify-self-start">
|
<div class="w-5/6 justify-self-start">
|
||||||
<PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="Galileo" baseUrl="galileo" />
|
<PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="Galileo" baseUrl="galileo" styleMode="large" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</full-screen-container>
|
</full-screen-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue';
|
||||||
import TheHeader from '../components/Layout/TheHeader.vue'
|
import TheHeader from '../components/Layout/TheHeader.vue';
|
||||||
import PlanisphereView from '../components/PlanisphereView.vue'
|
import PlanisphereView from '../components/PlanisphereView.vue';
|
||||||
|
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue';
|
||||||
import { getNMEAObj } from '../api/util'
|
import { getNMEAObj } from '../api/util';
|
||||||
|
|
||||||
const BDPlanisphereView = ref(null)
|
const BDPlanisphereView = ref(null);
|
||||||
const GPPlanisphereView = ref(null)
|
const GPPlanisphereView = ref(null);
|
||||||
const GLPlanisphereView = ref(null)
|
const GLPlanisphereView = ref(null);
|
||||||
const GAPlanisphereView = ref(null)
|
const GAPlanisphereView = ref(null);
|
||||||
const update = (nmeaStr: string) => {
|
|
||||||
const data: any = getMonitoringData(nmeaStr)
|
|
||||||
if (!data) return
|
|
||||||
|
|
||||||
const { bd, gp, gl, ga } = data
|
|
||||||
|
|
||||||
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
|
||||||
BDPlanisphereView.value.update(bd.GSVArr, bd.GSAArr)
|
|
||||||
GPPlanisphereView.value.update(gp.GSVArr, gp.GSAArr)
|
|
||||||
GLPlanisphereView.value.update(gl.GSVArr, gl.GSAArr)
|
|
||||||
GAPlanisphereView.value.update(ga.GSVArr, ga.GSAArr)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if ('ipcRenderer' in window) {
|
|
||||||
ipcRenderer.receive('nmea', update)
|
|
||||||
|
|
||||||
ipcRenderer.send('APP_MOUNTED')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const getMonitoringData = (nmeaStr: string) => {
|
const getMonitoringData = (nmeaStr: string) => {
|
||||||
const nmeaObj: any = getNMEAObj(nmeaStr)
|
const nmeaObj: any = getNMEAObj(nmeaStr);
|
||||||
// console.log(nmeaObj, '================')
|
// console.log(nmeaObj, '================')
|
||||||
if (!nmeaObj || !nmeaObj.GSV || !nmeaObj.GSA) return null
|
if (!nmeaObj || !nmeaObj.GSV || !nmeaObj.GSA) return null;
|
||||||
|
|
||||||
const { GSV, GSA } = nmeaObj
|
const { GSV, GSA } = nmeaObj;
|
||||||
|
|
||||||
const bd = {
|
const bd = {
|
||||||
// NMEA 1083 3.x $BDGSV,...*
|
// NMEA 1083 3.x $BDGSV,...*
|
||||||
// NMEA 1083 4.0x $GBGSV,...*
|
// NMEA 1083 4.0x $GBGSV,...*
|
||||||
@@ -66,20 +46,41 @@ const getMonitoringData = (nmeaStr: string) => {
|
|||||||
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GB'),
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GB'),
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GB')
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GB')
|
||||||
}
|
};
|
||||||
const gp = {
|
const gp = {
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
|
||||||
}
|
};
|
||||||
const gl = {
|
const gl = {
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
|
||||||
}
|
};
|
||||||
const ga = {
|
const ga = {
|
||||||
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
|
||||||
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
|
||||||
}
|
};
|
||||||
|
return { bd, gp, gl, ga };
|
||||||
|
};
|
||||||
|
|
||||||
return { bd, gp, gl, ga }
|
|
||||||
}
|
const update = (nmeaStr: string) => {
|
||||||
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
|
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
const { bd, gp, gl, ga } = data;
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
BDPlanisphereView.value.update(bd.GSVArr, bd.GSAArr);
|
||||||
|
GPPlanisphereView.value.update(gp.GSVArr, gp.GSAArr);
|
||||||
|
GLPlanisphereView.value.update(gl.GSVArr, gl.GSAArr);
|
||||||
|
GAPlanisphereView.value.update(ga.GSVArr, ga.GSAArr);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ('ipcRenderer' in window) {
|
||||||
|
ipcRenderer.receive('nmea', update);
|
||||||
|
ipcRenderer.send('APP_MOUNTED');
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
759
src/render/page/oneShow.vue
Normal file
759
src/render/page/oneShow.vue
Normal file
@@ -0,0 +1,759 @@
|
|||||||
|
<template>
|
||||||
|
<select class="showModeView" v-model="showModeView">
|
||||||
|
<option v-for="(value, key) in showMode" :key="key" :value="key">
|
||||||
|
{{ value }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div v-if="showModeView == 'showAll'">
|
||||||
|
<full-screen-container>
|
||||||
|
<div class="w-h-full flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-h-full justify-self-end border-r-4 border-r-sky-500/50">
|
||||||
|
<ShowAllHeader title="卫星数据监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex flex-1 flex-col">
|
||||||
|
<DigitalFlopContainer ref="digitalFlopContainerAll" styleMode="small" />
|
||||||
|
<div class="block-left-right-content flex flex-1 mt-5">
|
||||||
|
<div class="block-left-content w-1/5 flex flex-col">
|
||||||
|
<div class="clock-content mb-2 flex-1">
|
||||||
|
<Clock ref="clockAll" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="compass-content mb-2 flex-1">
|
||||||
|
<Compass ref="compassAll" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="water-level-content flex-1">
|
||||||
|
<WaterLevel ref="waterLevelAll" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content mx-2 flex flex-1">
|
||||||
|
<Map ref="mapAll" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
||||||
|
<NMEAAnimation ref="nmeaAnimate" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-h-full justify-self-start">
|
||||||
|
<ShowAllHeader title="卫星信息监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex flex-1">
|
||||||
|
<div class="w-1/4 h-1/2 px-2 flex flex-col">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="BDScrollBoardTableAll"
|
||||||
|
title="北 斗"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="GLScrollBoardTableAll"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2 px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<CenterCmp ref="centerCmpAll" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/4 h-1/2 flex flex-col px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="GPScrollBoardTableAll"
|
||||||
|
title="G P S"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="GAScrollBoardTableAll"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-h-full justify-self-end border-t-4 border-t-sky-500/50 border-r-4 border-r-sky-500/50"
|
||||||
|
>
|
||||||
|
<ShowAllHeader title="卫星信号监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="BDSNRViewAll"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
myid="bdBar"
|
||||||
|
title="北斗"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GPSNRViewAll"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
myid="gpsBar"
|
||||||
|
title="GPS"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="GLSNRViewAll"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
myid="glonassBar"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GASNRViewAll"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
myid="galileoBar"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-h-full justify-self-start border-t-4 border-t-sky-500/50">
|
||||||
|
<ShowAllHeader title="卫星状态监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="BDPlanisphereViewAll"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
title="北斗"
|
||||||
|
baseUrl="beidou"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GPPlanisphereViewAll"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
title="GPS"
|
||||||
|
baseUrl="gps"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GLPlanisphereViewAll"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
title="GLONASS"
|
||||||
|
baseUrl="glonass"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GAPlanisphereViewAll"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
title="Galileo"
|
||||||
|
baseUrl="galileo"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white fixed bottom-0 right-0">
|
||||||
|
四大系统卫星运行状态监控系统V1.0
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
</div>
|
||||||
|
<div v-if="showModeView == 'showSwitch'">
|
||||||
|
<select class="selectView" v-model="screenView">
|
||||||
|
<option v-for="(value, key) in view" :key="key" :value="key">
|
||||||
|
{{ value }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<full-screen-container v-if="screenView == 'DataMonitorPage'">
|
||||||
|
<TheHeader title="卫星数据监控平台" />
|
||||||
|
<div class="main-content flex flex-1 flex-col">
|
||||||
|
<DigitalFlopContainer ref="digitalFlopContainerSwitch" styleMode="large" />
|
||||||
|
<div class="block-left-right-content flex flex-1 mt-5">
|
||||||
|
<div class="block-left-content w-1/5 flex flex-col">
|
||||||
|
<div class="clock-content mb-2 flex-1">
|
||||||
|
<Clock ref="clockSwitch" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="compass-content mb-2 flex-1">
|
||||||
|
<Compass ref="compassSwitch" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="water-level-content flex-1">
|
||||||
|
<WaterLevel ref="waterLevelSwitch" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content mx-2 flex flex-1">
|
||||||
|
<Map ref="mapSwitch" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
||||||
|
<NMEAAnimation ref="nmeaAnimate" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="text-white fixed bottom-0 right-0">
|
||||||
|
四大系统卫星运行状态监控系统V1.0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'InfoMonitorPage'">
|
||||||
|
<TheHeader title="卫星信息监控平台" />
|
||||||
|
<div class="main-content flex flex-1">
|
||||||
|
<div class="w-1/4 px-2 flex flex-col">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="BDScrollBoardTableSwitch"
|
||||||
|
title="北 斗"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="GLScrollBoardTableSwitch"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2 px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<CenterCmp ref="centerCmpSwitch" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/4 flex flex-col px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GPScrollBoardTableSwitch" title="G P S" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable
|
||||||
|
ref="GAScrollBoardTableSwitch"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'SignalMonitorPage'">
|
||||||
|
<TheHeader title="卫星信号监控平台" />
|
||||||
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="BDSNRViewSwitch"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
myid="bdBar"
|
||||||
|
title="北斗"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GPSNRViewSwitch"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
myid="gpsBar"
|
||||||
|
title="GPS"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="GLSNRViewSwitch"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
myid="glonassBar"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GASNRViewSwitch"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
myid="galileoBar"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'StateMonitorPage'">
|
||||||
|
<TheHeader title="卫星状态监控平台" />
|
||||||
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="BDPlanisphereViewSwitch"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
title="北斗"
|
||||||
|
baseUrl="beidou"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GPPlanisphereViewSwitch"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
title="GPS"
|
||||||
|
baseUrl="gps"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GLPlanisphereViewSwitch"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
title="GLONASS"
|
||||||
|
baseUrl="glonass"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GAPlanisphereViewSwitch"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
title="Galileo"
|
||||||
|
baseUrl="galileo"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import FullScreenContainer from "../components/Layout/FullScreenContainer.vue";
|
||||||
|
import ShowAllHeader from "../components/Layout/ShowAllHeader.vue";
|
||||||
|
import TheHeader from "../components/Layout/TheHeader.vue";
|
||||||
|
import DigitalFlopContainer from "../components/DigitalFlopContainer.vue";
|
||||||
|
import Clock from "../components/Clock.vue";
|
||||||
|
import Compass from "../components/Compass.vue";
|
||||||
|
import WaterLevel from "../components/WaterLevel.vue";
|
||||||
|
import Map from "../components/Map.vue";
|
||||||
|
import NMEAAnimation from "../components/NMEAAnimation.vue";
|
||||||
|
import BorderBox3 from "../components/Layout/BorderBox3.vue";
|
||||||
|
import CenterCmp from "../components/CenterCmp.vue";
|
||||||
|
import ScrollBoardTable from "../components/ScrollBoardTable.vue";
|
||||||
|
import SNRView from "../components/SNRView.vue";
|
||||||
|
import PlanisphereView from "../components/PlanisphereView.vue";
|
||||||
|
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { Helpers } from "nmea";
|
||||||
|
import { getNMEAObj } from "../api/util";
|
||||||
|
|
||||||
|
const showModeView = ref("showAll");
|
||||||
|
const showMode = {
|
||||||
|
showAll: "多页面显示",
|
||||||
|
showSwitch: "单页面切换",
|
||||||
|
};
|
||||||
|
|
||||||
|
const screenView = ref("DataMonitorPage");
|
||||||
|
const view = {
|
||||||
|
DataMonitorPage: "卫星数据监控平台",
|
||||||
|
InfoMonitorPage: "卫星信息监控平台",
|
||||||
|
SignalMonitorPage: "卫星信号监控平台",
|
||||||
|
StateMonitorPage: "卫星状态监控平台",
|
||||||
|
};
|
||||||
|
|
||||||
|
const digitalFlopContainerAll = ref(null);
|
||||||
|
const clockAll = ref(null);
|
||||||
|
const compassAll = ref(null);
|
||||||
|
const waterLevelAll = ref(null);
|
||||||
|
const mapAll = ref(null);
|
||||||
|
|
||||||
|
const digitalFlopContainerSwitch = ref(null);
|
||||||
|
const clockSwitch = ref(null);
|
||||||
|
const compassSwitch = ref(null);
|
||||||
|
const waterLevelSwitch = ref(null);
|
||||||
|
const mapSwitch = ref(null);
|
||||||
|
|
||||||
|
const nmeaAnimate = ref(null);
|
||||||
|
const deepmsg = ref(null);
|
||||||
|
|
||||||
|
const BDScrollBoardTableAll = ref(null);
|
||||||
|
const GPScrollBoardTableAll = ref(null);
|
||||||
|
const GLScrollBoardTableAll = ref(null);
|
||||||
|
const GAScrollBoardTableAll = ref(null);
|
||||||
|
|
||||||
|
const BDScrollBoardTableSwitch = ref(null);
|
||||||
|
const GPScrollBoardTableSwitch = ref(null);
|
||||||
|
const GLScrollBoardTableSwitch = ref(null);
|
||||||
|
const GAScrollBoardTableSwitch = ref(null);
|
||||||
|
|
||||||
|
const centerCmpAll = ref(null);
|
||||||
|
const BDSNRViewAll = ref(null);
|
||||||
|
const GPSNRViewAll = ref(null);
|
||||||
|
const GLSNRViewAll = ref(null);
|
||||||
|
const GASNRViewAll = ref(null);
|
||||||
|
|
||||||
|
const centerCmpSwitch = ref(null);
|
||||||
|
const BDSNRViewSwitch = ref(null);
|
||||||
|
const GPSNRViewSwitch = ref(null);
|
||||||
|
const GLSNRViewSwitch = ref(null);
|
||||||
|
const GASNRViewSwitch = ref(null);
|
||||||
|
|
||||||
|
const BDPlanisphereViewAll = ref(null);
|
||||||
|
const GPPlanisphereViewAll = ref(null);
|
||||||
|
const GLPlanisphereViewAll = ref(null);
|
||||||
|
const GAPlanisphereViewAll = ref(null);
|
||||||
|
|
||||||
|
const BDPlanisphereViewSwitch = ref(null);
|
||||||
|
const GPPlanisphereViewSwitch = ref(null);
|
||||||
|
const GLPlanisphereViewSwitch = ref(null);
|
||||||
|
const GAPlanisphereViewSwitch = ref(null);
|
||||||
|
|
||||||
|
const stagingObjAll = reactive({
|
||||||
|
dataTime: null,
|
||||||
|
longitude: NaN,
|
||||||
|
latitude: NaN,
|
||||||
|
alt: 0,
|
||||||
|
variation: null,
|
||||||
|
variationPole: null,
|
||||||
|
numSat: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const stagingObjSwitch = reactive({
|
||||||
|
dataTime: null,
|
||||||
|
longitude: NaN,
|
||||||
|
latitude: NaN,
|
||||||
|
alt: 0,
|
||||||
|
variation: null,
|
||||||
|
variationPole: null,
|
||||||
|
numSat: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getDate = (date, timestamp) => {
|
||||||
|
const year = date.substring(4);
|
||||||
|
const month = date.substring(2, 4);
|
||||||
|
const day = date.substring(0, 2);
|
||||||
|
const hours = timestamp.substring(0, 2);
|
||||||
|
const minutes = timestamp.substring(2, 4);
|
||||||
|
const seconds = timestamp.substring(4, 6);
|
||||||
|
const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
|
||||||
|
const dateTime = new Date(dateTimeStr);
|
||||||
|
return dateTime;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMonitoringData = (nmeaStr: string) => {
|
||||||
|
const nmeaObj: any = getNMEAObj(nmeaStr);
|
||||||
|
// console.log(nmeaObj, "================");
|
||||||
|
if (
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.RMC ||
|
||||||
|
!nmeaObj.GGA ||
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.GSV ||
|
||||||
|
!nmeaObj.GSA
|
||||||
|
)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
const { RMC, GGA, GSV, GSA } = nmeaObj;
|
||||||
|
// 日期,时间,磁偏角,磁偏角方向
|
||||||
|
const { date, timestamp, variation, variationPole } = RMC;
|
||||||
|
// 经度,经度方向,纬度,纬度方向,海拔,用于定位的卫星数目
|
||||||
|
const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
|
||||||
|
const dateTime = getDate(date, timestamp);
|
||||||
|
const longitude = Helpers.parseLongitude(lon, lonPole);
|
||||||
|
const latitude = Helpers.parseLatitude(lat, latPole);
|
||||||
|
const bd = {
|
||||||
|
// NMEA 1083 3.x $BDGSV,...*
|
||||||
|
// NMEA 1083 4.0x $GBGSV,...*
|
||||||
|
// NMEA 1083 4.1x $GBGSV,...,1* | $GBGSV,...,0*
|
||||||
|
// GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
|
||||||
|
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GB"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GB"),
|
||||||
|
};
|
||||||
|
const gp = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GP"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GP"),
|
||||||
|
};
|
||||||
|
const gl = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GL"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GL"),
|
||||||
|
};
|
||||||
|
const ga = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GA"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GA"),
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSatelliteCount = (GSVArr: Array<any>) => {
|
||||||
|
if (!GSVArr) return;
|
||||||
|
|
||||||
|
const count = GSVArr.reduce((total, gsv) => {
|
||||||
|
return total + gsv.satellites.length;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = (nmeaStr: string) => {
|
||||||
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
|
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
const {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
switch (showModeView.value) {
|
||||||
|
case "showAll":
|
||||||
|
const bd_satellite_count = getSatelliteCount(bd.GSVArr);
|
||||||
|
const gp_satellite_count = getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_satellite_count = getSatelliteCount(gl.GSVArr);
|
||||||
|
const ga_satellite_count = getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const bd_gp_satellite_count =
|
||||||
|
getSatelliteCount(bd.GSVArr) > getSatelliteCount(gp.GSVArr)
|
||||||
|
? getSatelliteCount(bd.GSVArr)
|
||||||
|
: getSatelliteCount(gp.GSVArr);
|
||||||
|
|
||||||
|
const gl_ga_satellite_count =
|
||||||
|
getSatelliteCount(gl.GSVArr) > getSatelliteCount(ga.GSVArr)
|
||||||
|
? getSatelliteCount(gl.GSVArr)
|
||||||
|
: getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const lineMax =
|
||||||
|
bd_gp_satellite_count > gl_ga_satellite_count
|
||||||
|
? bd_gp_satellite_count
|
||||||
|
: gl_ga_satellite_count;
|
||||||
|
|
||||||
|
if (
|
||||||
|
longitude != NaN &&
|
||||||
|
latitude != NaN &&
|
||||||
|
longitude != "NaN" &&
|
||||||
|
latitude != "NaN"
|
||||||
|
) {
|
||||||
|
stagingObjAll.dateTime = dateTime;
|
||||||
|
stagingObjAll.longitude = longitude;
|
||||||
|
stagingObjAll.latitude = latitude;
|
||||||
|
stagingObjAll.alt = alt;
|
||||||
|
stagingObjAll.variation = variation;
|
||||||
|
stagingObjAll.variationPole = variationPole;
|
||||||
|
stagingObjAll.numSat = numSat;
|
||||||
|
} else {
|
||||||
|
stagingObjAll.dateTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
digitalFlopContainerAll.value.update(
|
||||||
|
stagingObjAll.dateTime,
|
||||||
|
stagingObjAll.longitude,
|
||||||
|
stagingObjAll.latitude,
|
||||||
|
stagingObjAll.alt,
|
||||||
|
stagingObjAll.numSat
|
||||||
|
);
|
||||||
|
|
||||||
|
clockAll.value.update(stagingObjAll.dateTime);
|
||||||
|
compassAll.value.update(stagingObjAll.variation, stagingObjAll.variationPole);
|
||||||
|
waterLevelAll.value.update(stagingObjAll.alt);
|
||||||
|
mapAll.value.update(stagingObjAll.longitude, stagingObjAll.latitude, deepmsg.value);
|
||||||
|
|
||||||
|
centerCmpAll.value.update(
|
||||||
|
bd_satellite_count,
|
||||||
|
gp_satellite_count,
|
||||||
|
gl_satellite_count,
|
||||||
|
ga_satellite_count
|
||||||
|
);
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
|
||||||
|
// 粗细不一致,x轴长度以各数据条目自身为准
|
||||||
|
// BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
|
||||||
|
// GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
|
||||||
|
// GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
|
||||||
|
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
||||||
|
|
||||||
|
BDScrollBoardTableAll.value.update(bd.GSVArr);
|
||||||
|
GPScrollBoardTableAll.value.update(gp.GSVArr);
|
||||||
|
GLScrollBoardTableAll.value.update(gl.GSVArr);
|
||||||
|
GAScrollBoardTableAll.value.update(ga.GSVArr);
|
||||||
|
|
||||||
|
// 粗细一致,x轴长度以数据最多的条目为准
|
||||||
|
BDSNRViewAll.value.update(bd.GSVArr, bd.GSAArr, lineMax);
|
||||||
|
GPSNRViewAll.value.update(gp.GSVArr, gp.GSAArr, lineMax);
|
||||||
|
GLSNRViewAll.value.update(gl.GSVArr, gl.GSAArr, lineMax);
|
||||||
|
GASNRViewAll.value.update(ga.GSVArr, ga.GSAArr, lineMax);
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
BDPlanisphereViewAll.value.update(bd.GSVArr, bd.GSAArr);
|
||||||
|
GPPlanisphereViewAll.value.update(gp.GSVArr, gp.GSAArr);
|
||||||
|
GLPlanisphereViewAll.value.update(gl.GSVArr, gl.GSAArr);
|
||||||
|
GAPlanisphereViewAll.value.update(ga.GSVArr, ga.GSAArr);
|
||||||
|
break;
|
||||||
|
case "showSwitch":
|
||||||
|
switch (screenView.value) {
|
||||||
|
case "DataMonitorPage":
|
||||||
|
if (
|
||||||
|
longitude != NaN &&
|
||||||
|
latitude != NaN &&
|
||||||
|
longitude != "NaN" &&
|
||||||
|
latitude != "NaN"
|
||||||
|
) {
|
||||||
|
stagingObjSwitch.dateTime = dateTime;
|
||||||
|
stagingObjSwitch.longitude = longitude;
|
||||||
|
stagingObjSwitch.latitude = latitude;
|
||||||
|
stagingObjSwitch.alt = alt;
|
||||||
|
stagingObjSwitch.variation = variation;
|
||||||
|
stagingObjSwitch.variationPole = variationPole;
|
||||||
|
stagingObjSwitch.numSat = numSat;
|
||||||
|
} else {
|
||||||
|
stagingObjSwitch.dateTime = new Date();
|
||||||
|
}
|
||||||
|
digitalFlopContainerSwitch.value.update(
|
||||||
|
stagingObjSwitch.dateTime,
|
||||||
|
stagingObjSwitch.longitude,
|
||||||
|
stagingObjSwitch.latitude,
|
||||||
|
stagingObjSwitch.alt,
|
||||||
|
stagingObjSwitch.numSat
|
||||||
|
);
|
||||||
|
clockSwitch.value.update(stagingObjSwitch.dateTime);
|
||||||
|
compassSwitch.value.update(stagingObjSwitch.variation, stagingObjSwitch.variationPole);
|
||||||
|
waterLevelSwitch.value.update(stagingObjSwitch.alt);
|
||||||
|
mapSwitch.value.update(stagingObjSwitch.longitude, stagingObjSwitch.latitude, deepmsg.value);
|
||||||
|
break;
|
||||||
|
case "InfoMonitorPage":
|
||||||
|
BDScrollBoardTableSwitch.value.update(bd.GSVArr);
|
||||||
|
GPScrollBoardTableSwitch.value.update(gp.GSVArr);
|
||||||
|
GLScrollBoardTableSwitch.value.update(gl.GSVArr);
|
||||||
|
GAScrollBoardTableSwitch.value.update(ga.GSVArr);
|
||||||
|
|
||||||
|
const bd_satellite_count = getSatelliteCount(bd.GSVArr);
|
||||||
|
const gp_satellite_count = getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_satellite_count = getSatelliteCount(gl.GSVArr);
|
||||||
|
const ga_satellite_count = getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
centerCmpSwitch.value.update(
|
||||||
|
bd_satellite_count,
|
||||||
|
gp_satellite_count,
|
||||||
|
gl_satellite_count,
|
||||||
|
ga_satellite_count
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "SignalMonitorPage":
|
||||||
|
const bd_gp_satellite_count =
|
||||||
|
getSatelliteCount(bd.GSVArr) > getSatelliteCount(gp.GSVArr)
|
||||||
|
? getSatelliteCount(bd.GSVArr)
|
||||||
|
: getSatelliteCount(gp.GSVArr);
|
||||||
|
|
||||||
|
const gl_ga_satellite_count =
|
||||||
|
getSatelliteCount(gl.GSVArr) > getSatelliteCount(ga.GSVArr)
|
||||||
|
? getSatelliteCount(gl.GSVArr)
|
||||||
|
: getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const lineMax =
|
||||||
|
bd_gp_satellite_count > gl_ga_satellite_count
|
||||||
|
? bd_gp_satellite_count
|
||||||
|
: gl_ga_satellite_count;
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
|
||||||
|
// 粗细不一致,x轴长度以各数据条目自身为准
|
||||||
|
// BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
|
||||||
|
// GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
|
||||||
|
// GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
|
||||||
|
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
||||||
|
|
||||||
|
// 粗细一致,x轴长度以数据最多的条目为准
|
||||||
|
BDSNRViewSwitch.value.update(bd.GSVArr, bd.GSAArr, lineMax);
|
||||||
|
GPSNRViewSwitch.value.update(gp.GSVArr, gp.GSAArr, lineMax);
|
||||||
|
GLSNRViewSwitch.value.update(gl.GSVArr, gl.GSAArr, lineMax);
|
||||||
|
GASNRViewSwitch.value.update(ga.GSVArr, ga.GSAArr, lineMax);
|
||||||
|
break;
|
||||||
|
case "StateMonitorPage":
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
BDPlanisphereViewSwitch.value.update(bd.GSVArr, bd.GSAArr);
|
||||||
|
GPPlanisphereViewSwitch.value.update(gp.GSVArr, gp.GSAArr);
|
||||||
|
GLPlanisphereViewSwitch.value.update(gl.GSVArr, gl.GSAArr);
|
||||||
|
GAPlanisphereViewSwitch.value.update(ga.GSVArr, ga.GSAArr);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const nmeaAnmiation = async (nmeaOrigin: string) => {
|
||||||
|
nmeaAnimate.value.update(nmeaOrigin);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deepset = (deepArr: Array<string | boolean>) => {
|
||||||
|
deepmsg.value = deepArr;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ("ipcRenderer" in window) {
|
||||||
|
ipcRenderer.receive("deep", deepset);
|
||||||
|
ipcRenderer.receive("nmea", update);
|
||||||
|
ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
|
||||||
|
ipcRenderer.send("APP_MOUNTED");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.showModeView {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #08e5ff;
|
||||||
|
width: 9rem;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(4, 49, 128, 1);
|
||||||
|
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectView {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #08e5ff;
|
||||||
|
width: 9rem;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(4, 49, 128, 1);
|
||||||
|
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||||||
|
position: fixed;
|
||||||
|
top: 3rem;
|
||||||
|
left: 1rem;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock-content,
|
||||||
|
.compass-content,
|
||||||
|
.water-level-content,
|
||||||
|
.block-right-content {
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animationText {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
403
src/render/page/oneShowAll.vue
Normal file
403
src/render/page/oneShowAll.vue
Normal file
@@ -0,0 +1,403 @@
|
|||||||
|
<template>
|
||||||
|
<full-screen-container>
|
||||||
|
<div class="w-h-full flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-h-full justify-self-end border-r-4 border-r-sky-500/50">
|
||||||
|
<ShowAllHeader title="卫星数据监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex flex-1 flex-col">
|
||||||
|
<DigitalFlopContainer ref="digitalFlopContainer" styleMode="small" />
|
||||||
|
<div class="block-left-right-content flex flex-1 mt-5">
|
||||||
|
<div class="block-left-content w-1/5 flex flex-col">
|
||||||
|
<div class="clock-content mb-2 flex-1">
|
||||||
|
<Clock ref="clock" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="compass-content mb-2 flex-1">
|
||||||
|
<Compass ref="compass" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="water-level-content flex-1">
|
||||||
|
<WaterLevel ref="waterLevel" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content mx-2 flex flex-1">
|
||||||
|
<Map ref="map" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
||||||
|
<NMEAAnimation ref="nmeaAnimate" styleMode="small" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-h-full justify-self-start">
|
||||||
|
<ShowAllHeader title="卫星信息监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex flex-1">
|
||||||
|
<div class="w-1/4 h-1/2 px-2 flex flex-col">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="BDScrollBoardTable" title="北 斗" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2 px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<CenterCmp ref="centerCmp" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/4 h-1/2 flex flex-col px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GPScrollBoardTable" title="G P S" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" styleMode="small" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-h-full justify-self-end border-t-4 border-t-sky-500/50 border-r-4 border-r-sky-500/50">
|
||||||
|
<ShowAllHeader title="卫星信号监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="BDSNRView"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
myid="bdBar"
|
||||||
|
title="北斗"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GPSNRView"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
myid="gpsBar"
|
||||||
|
title="GPS"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="GLSNRView"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
myid="glonassBar"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GASNRView"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
myid="galileoBar"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-h-full justify-self-start border-t-4 border-t-sky-500/50">
|
||||||
|
<ShowAllHeader title="卫星状态监控平台" />
|
||||||
|
<div class="main-content w-full h-5/6 flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="BDPlanisphereView"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
title="北斗"
|
||||||
|
baseUrl="beidou"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GPPlanisphereView"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
title="GPS"
|
||||||
|
baseUrl="gps"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GLPlanisphereView"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
title="GLONASS"
|
||||||
|
baseUrl="glonass"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GAPlanisphereView"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
title="Galileo"
|
||||||
|
baseUrl="galileo"
|
||||||
|
styleMode="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white fixed bottom-0 right-0">
|
||||||
|
四大系统卫星运行状态监控系统V1.0
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import FullScreenContainer from "../components/Layout/FullScreenContainer.vue";
|
||||||
|
import ShowAllHeader from "../components/Layout/ShowAllHeader.vue";
|
||||||
|
import DigitalFlopContainer from "../components/DigitalFlopContainer.vue";
|
||||||
|
import Clock from "../components/Clock.vue";
|
||||||
|
import Compass from "../components/Compass.vue";
|
||||||
|
import WaterLevel from "../components/WaterLevel.vue";
|
||||||
|
import Map from "../components/Map.vue";
|
||||||
|
import NMEAAnimation from "../components/NMEAAnimation.vue";
|
||||||
|
import BorderBox3 from "../components/Layout/BorderBox3.vue";
|
||||||
|
import CenterCmp from "../components/CenterCmp.vue";
|
||||||
|
import ScrollBoardTable from "../components/ScrollBoardTable.vue";
|
||||||
|
import SNRView from "../components/SNRView.vue";
|
||||||
|
import PlanisphereView from "../components/PlanisphereView.vue";
|
||||||
|
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { Helpers } from "nmea";
|
||||||
|
import { getNMEAObj } from "../api/util";
|
||||||
|
|
||||||
|
const digitalFlopContainer = ref(null);
|
||||||
|
const clock = ref(null);
|
||||||
|
const compass = ref(null);
|
||||||
|
const waterLevel = ref(null);
|
||||||
|
const map = ref(null);
|
||||||
|
const nmeaAnimate = ref(null);
|
||||||
|
const deepmsg = ref(null);
|
||||||
|
|
||||||
|
const BDScrollBoardTable = ref(null);
|
||||||
|
const GPScrollBoardTable = ref(null);
|
||||||
|
const GLScrollBoardTable = ref(null);
|
||||||
|
const GAScrollBoardTable = ref(null);
|
||||||
|
|
||||||
|
const centerCmp = ref(null);
|
||||||
|
const BDSNRView = ref(null);
|
||||||
|
const GPSNRView = ref(null);
|
||||||
|
const GLSNRView = ref(null);
|
||||||
|
const GASNRView = ref(null);
|
||||||
|
|
||||||
|
const BDPlanisphereView = ref(null);
|
||||||
|
const GPPlanisphereView = ref(null);
|
||||||
|
const GLPlanisphereView = ref(null);
|
||||||
|
const GAPlanisphereView = ref(null);
|
||||||
|
|
||||||
|
const stagingObj = reactive({
|
||||||
|
dataTime: null,
|
||||||
|
longitude: NaN,
|
||||||
|
latitude: NaN,
|
||||||
|
alt: 0,
|
||||||
|
variation: null,
|
||||||
|
variationPole: null,
|
||||||
|
numSat: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getDate = (date, timestamp) => {
|
||||||
|
const year = date.substring(4);
|
||||||
|
const month = date.substring(2, 4);
|
||||||
|
const day = date.substring(0, 2);
|
||||||
|
const hours = timestamp.substring(0, 2);
|
||||||
|
const minutes = timestamp.substring(2, 4);
|
||||||
|
const seconds = timestamp.substring(4, 6);
|
||||||
|
const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
|
||||||
|
const dateTime = new Date(dateTimeStr);
|
||||||
|
return dateTime;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMonitoringData = (nmeaStr: string) => {
|
||||||
|
const nmeaObj: any = getNMEAObj(nmeaStr);
|
||||||
|
// console.log(nmeaObj, "================");
|
||||||
|
if (
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.RMC ||
|
||||||
|
!nmeaObj.GGA ||
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.GSV ||
|
||||||
|
!nmeaObj.GSA
|
||||||
|
)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
const { RMC, GGA, GSV, GSA } = nmeaObj;
|
||||||
|
// 日期,时间,磁偏角,磁偏角方向
|
||||||
|
const { date, timestamp, variation, variationPole } = RMC;
|
||||||
|
// 经度,经度方向,纬度,纬度方向,海拔,用于定位的卫星数目
|
||||||
|
const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
|
||||||
|
const dateTime = getDate(date, timestamp);
|
||||||
|
const longitude = Helpers.parseLongitude(lon, lonPole);
|
||||||
|
const latitude = Helpers.parseLatitude(lat, latPole);
|
||||||
|
const bd = {
|
||||||
|
// NMEA 1083 3.x $BDGSV,...*
|
||||||
|
// NMEA 1083 4.0x $GBGSV,...*
|
||||||
|
// NMEA 1083 4.1x $GBGSV,...,1* | $GBGSV,...,0*
|
||||||
|
// GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
|
||||||
|
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GB"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GB"),
|
||||||
|
};
|
||||||
|
const gp = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GP"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GP"),
|
||||||
|
};
|
||||||
|
const gl = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GL"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GL"),
|
||||||
|
};
|
||||||
|
const ga = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GA"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GA"),
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSatelliteCount = (GSVArr: Array<any>) => {
|
||||||
|
if (!GSVArr) return;
|
||||||
|
|
||||||
|
const count = GSVArr.reduce((total, gsv) => {
|
||||||
|
return total + gsv.satellites.length;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = (nmeaStr: string) => {
|
||||||
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
|
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
const {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
const bd_satellite_count = getSatelliteCount(bd.GSVArr);
|
||||||
|
const gp_satellite_count = getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_satellite_count = getSatelliteCount(gl.GSVArr);
|
||||||
|
const ga_satellite_count = getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const bd_gp_satellite_count =
|
||||||
|
getSatelliteCount(bd.GSVArr) > getSatelliteCount(gp.GSVArr)
|
||||||
|
? getSatelliteCount(bd.GSVArr)
|
||||||
|
: getSatelliteCount(gp.GSVArr);
|
||||||
|
|
||||||
|
const gl_ga_satellite_count =
|
||||||
|
getSatelliteCount(gl.GSVArr) > getSatelliteCount(ga.GSVArr)
|
||||||
|
? getSatelliteCount(gl.GSVArr)
|
||||||
|
: getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const lineMax =
|
||||||
|
bd_gp_satellite_count > gl_ga_satellite_count
|
||||||
|
? bd_gp_satellite_count
|
||||||
|
: gl_ga_satellite_count;
|
||||||
|
|
||||||
|
if (longitude != NaN && latitude != NaN && longitude != "NaN" && latitude != "NaN") {
|
||||||
|
stagingObj.dateTime = dateTime;
|
||||||
|
stagingObj.longitude = longitude;
|
||||||
|
stagingObj.latitude = latitude;
|
||||||
|
stagingObj.alt = alt;
|
||||||
|
stagingObj.variation = variation;
|
||||||
|
stagingObj.variationPole = variationPole;
|
||||||
|
stagingObj.numSat = numSat;
|
||||||
|
} else {
|
||||||
|
stagingObj.dateTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
digitalFlopContainer.value.update(
|
||||||
|
stagingObj.dateTime,
|
||||||
|
stagingObj.longitude,
|
||||||
|
stagingObj.latitude,
|
||||||
|
stagingObj.alt,
|
||||||
|
stagingObj.numSat
|
||||||
|
);
|
||||||
|
|
||||||
|
clock.value.update(stagingObj.dateTime);
|
||||||
|
compass.value.update(stagingObj.variation, stagingObj.variationPole);
|
||||||
|
waterLevel.value.update(stagingObj.alt);
|
||||||
|
map.value.update(stagingObj.longitude, stagingObj.latitude, deepmsg.value);
|
||||||
|
|
||||||
|
centerCmp.value.update(
|
||||||
|
bd_satellite_count,
|
||||||
|
gp_satellite_count,
|
||||||
|
gl_satellite_count,
|
||||||
|
ga_satellite_count
|
||||||
|
);
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
|
||||||
|
// 粗细不一致,x轴长度以各数据条目自身为准
|
||||||
|
// BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
|
||||||
|
// GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
|
||||||
|
// GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
|
||||||
|
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
||||||
|
|
||||||
|
BDScrollBoardTable.value.update(bd.GSVArr);
|
||||||
|
GPScrollBoardTable.value.update(gp.GSVArr);
|
||||||
|
GLScrollBoardTable.value.update(gl.GSVArr);
|
||||||
|
GAScrollBoardTable.value.update(ga.GSVArr);
|
||||||
|
|
||||||
|
// 粗细一致,x轴长度以数据最多的条目为准
|
||||||
|
BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax);
|
||||||
|
GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax);
|
||||||
|
GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax);
|
||||||
|
GASNRView.value.update(ga.GSVArr, ga.GSAArr, lineMax);
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
BDPlanisphereView.value.update(bd.GSVArr, bd.GSAArr);
|
||||||
|
GPPlanisphereView.value.update(gp.GSVArr, gp.GSAArr);
|
||||||
|
GLPlanisphereView.value.update(gl.GSVArr, gl.GSAArr);
|
||||||
|
GAPlanisphereView.value.update(ga.GSVArr, ga.GSAArr);
|
||||||
|
};
|
||||||
|
|
||||||
|
const nmeaAnmiation = async (nmeaOrigin: string) => {
|
||||||
|
nmeaAnimate.value.update(nmeaOrigin);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deepset = (deepArr: Array<string | boolean>) => {
|
||||||
|
deepmsg.value = deepArr;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ("ipcRenderer" in window) {
|
||||||
|
ipcRenderer.receive("deep", deepset);
|
||||||
|
ipcRenderer.receive("nmea", update);
|
||||||
|
ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
|
||||||
|
ipcRenderer.send("APP_MOUNTED");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.clock-content,
|
||||||
|
.compass-content,
|
||||||
|
.water-level-content,
|
||||||
|
.block-right-content {
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
}
|
||||||
|
.animationText {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
438
src/render/page/oneShowSwitch.vue
Normal file
438
src/render/page/oneShowSwitch.vue
Normal file
@@ -0,0 +1,438 @@
|
|||||||
|
<template>
|
||||||
|
<select class="selectView" v-model="screenView">
|
||||||
|
<option v-for="(value, key) in view" :key="key" :value="key">
|
||||||
|
{{ value }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<full-screen-container v-if="screenView == 'DataMonitorPage'">
|
||||||
|
<TheHeader title="卫星数据监控平台" />
|
||||||
|
<div class="main-content flex flex-1 flex-col">
|
||||||
|
<DigitalFlopContainer ref="digitalFlopContainer" styleMode="large" />
|
||||||
|
<div class="block-left-right-content flex flex-1 mt-5">
|
||||||
|
<div class="block-left-content w-1/5 flex flex-col">
|
||||||
|
<div class="clock-content mb-2 flex-1">
|
||||||
|
<Clock ref="clock" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="compass-content mb-2 flex-1">
|
||||||
|
<Compass ref="compass" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="water-level-content flex-1">
|
||||||
|
<WaterLevel ref="waterLevel" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content mx-2 flex flex-1">
|
||||||
|
<Map ref="map" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="block-right-content w-1/5 flex flex-col py-2 px-2">
|
||||||
|
<NMEAAnimation ref="nmeaAnimate" styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="text-white fixed bottom-0 right-0">
|
||||||
|
四大系统卫星运行状态监控系统V1.0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'InfoMonitorPage'">
|
||||||
|
<TheHeader title="卫星信息监控平台" />
|
||||||
|
<div class="main-content flex flex-1">
|
||||||
|
<div class="w-1/4 px-2 flex flex-col">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="BDScrollBoardTable" title="北 斗" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2 px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<CenterCmp ref="centerCmp" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/4 flex flex-col px-2">
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GPScrollBoardTable" title="G P S" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
<border-box-3>
|
||||||
|
<ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" styleMode="large" />
|
||||||
|
</border-box-3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'SignalMonitorPage'">
|
||||||
|
<TheHeader title="卫星信号监控平台" />
|
||||||
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView ref="BDSNRView"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
myid="bdBar"
|
||||||
|
title="北斗"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GPSNRView"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
myid="gpsBar"
|
||||||
|
title="GPS"
|
||||||
|
styleMode="large" />
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-end">
|
||||||
|
<SNRView
|
||||||
|
ref="GLSNRView"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
myid="glonassBar"
|
||||||
|
title="GLONASS"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-11/12 justify-self-start">
|
||||||
|
<SNRView
|
||||||
|
ref="GASNRView"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
myid="galileoBar"
|
||||||
|
title="Galileo"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
<full-screen-container v-if="screenView == 'StateMonitorPage'">
|
||||||
|
<TheHeader title="卫星状态监控平台" />
|
||||||
|
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="BDPlanisphereView"
|
||||||
|
color="rgb(255,50,50)"
|
||||||
|
title="北斗"
|
||||||
|
baseUrl="beidou"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GPPlanisphereView"
|
||||||
|
color="rgb(0,204,255)"
|
||||||
|
title="GPS"
|
||||||
|
baseUrl="gps"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-end">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GLPlanisphereView"
|
||||||
|
color="rgb(102,0,255)"
|
||||||
|
title="GLONASS"
|
||||||
|
baseUrl="glonass"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="w-5/6 justify-self-start">
|
||||||
|
<PlanisphereView
|
||||||
|
ref="GAPlanisphereView"
|
||||||
|
color="rgb(0,204,102)"
|
||||||
|
title="Galileo"
|
||||||
|
baseUrl="galileo"
|
||||||
|
styleMode="large"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</full-screen-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import FullScreenContainer from "../components/Layout/FullScreenContainer.vue";
|
||||||
|
import TheHeader from "../components/Layout/TheHeader.vue";
|
||||||
|
import DigitalFlopContainer from "../components/DigitalFlopContainer.vue";
|
||||||
|
import Clock from "../components/Clock.vue";
|
||||||
|
import Compass from "../components/Compass.vue";
|
||||||
|
import WaterLevel from "../components/WaterLevel.vue";
|
||||||
|
import Map from "../components/Map.vue";
|
||||||
|
import NMEAAnimation from "../components/NMEAAnimation.vue";
|
||||||
|
import BorderBox3 from "../components/Layout/BorderBox3.vue";
|
||||||
|
import CenterCmp from "../components/CenterCmp.vue";
|
||||||
|
import ScrollBoardTable from "../components/ScrollBoardTable.vue";
|
||||||
|
import SNRView from "../components/SNRView.vue";
|
||||||
|
import PlanisphereView from "../components/PlanisphereView.vue";
|
||||||
|
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { Helpers } from "nmea";
|
||||||
|
import { getNMEAObj } from "../api/util";
|
||||||
|
|
||||||
|
const screenView = ref("DataMonitorPage");
|
||||||
|
const view = {
|
||||||
|
DataMonitorPage: "卫星数据监控平台",
|
||||||
|
InfoMonitorPage: "卫星信息监控平台",
|
||||||
|
SignalMonitorPage: "卫星信号监控平台",
|
||||||
|
StateMonitorPage: "卫星状态监控平台",
|
||||||
|
};
|
||||||
|
|
||||||
|
const digitalFlopContainer = ref(null);
|
||||||
|
const clock = ref(null);
|
||||||
|
const compass = ref(null);
|
||||||
|
const waterLevel = ref(null);
|
||||||
|
const map = ref(null);
|
||||||
|
const nmeaAnimate = ref(null);
|
||||||
|
const deepmsg = ref(null);
|
||||||
|
|
||||||
|
const BDScrollBoardTable = ref(null);
|
||||||
|
const GPScrollBoardTable = ref(null);
|
||||||
|
const GLScrollBoardTable = ref(null);
|
||||||
|
const GAScrollBoardTable = ref(null);
|
||||||
|
|
||||||
|
const centerCmp = ref(null);
|
||||||
|
const BDSNRView = ref(null);
|
||||||
|
const GPSNRView = ref(null);
|
||||||
|
const GLSNRView = ref(null);
|
||||||
|
const GASNRView = ref(null);
|
||||||
|
|
||||||
|
const BDPlanisphereView = ref(null);
|
||||||
|
const GPPlanisphereView = ref(null);
|
||||||
|
const GLPlanisphereView = ref(null);
|
||||||
|
const GAPlanisphereView = ref(null);
|
||||||
|
|
||||||
|
const stagingObj = reactive({
|
||||||
|
dataTime: null,
|
||||||
|
longitude: NaN,
|
||||||
|
latitude: NaN,
|
||||||
|
alt: 0,
|
||||||
|
variation: null,
|
||||||
|
variationPole: null,
|
||||||
|
numSat: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getDate = (date, timestamp) => {
|
||||||
|
const year = date.substring(4);
|
||||||
|
const month = date.substring(2, 4);
|
||||||
|
const day = date.substring(0, 2);
|
||||||
|
const hours = timestamp.substring(0, 2);
|
||||||
|
const minutes = timestamp.substring(2, 4);
|
||||||
|
const seconds = timestamp.substring(4, 6);
|
||||||
|
const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
|
||||||
|
const dateTime = new Date(dateTimeStr);
|
||||||
|
return dateTime;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMonitoringData = (nmeaStr: string) => {
|
||||||
|
const nmeaObj: any = getNMEAObj(nmeaStr);
|
||||||
|
// console.log(nmeaObj, "================");
|
||||||
|
if (
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.RMC ||
|
||||||
|
!nmeaObj.GGA ||
|
||||||
|
!nmeaObj ||
|
||||||
|
!nmeaObj.GSV ||
|
||||||
|
!nmeaObj.GSA
|
||||||
|
)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
const { RMC, GGA, GSV, GSA } = nmeaObj;
|
||||||
|
// 日期,时间,磁偏角,磁偏角方向
|
||||||
|
const { date, timestamp, variation, variationPole } = RMC;
|
||||||
|
// 经度,经度方向,纬度,纬度方向,海拔,用于定位的卫星数目
|
||||||
|
const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
|
||||||
|
const dateTime = getDate(date, timestamp);
|
||||||
|
const longitude = Helpers.parseLongitude(lon, lonPole);
|
||||||
|
const latitude = Helpers.parseLatitude(lat, latPole);
|
||||||
|
const bd = {
|
||||||
|
// NMEA 1083 3.x $BDGSV,...*
|
||||||
|
// NMEA 1083 4.0x $GBGSV,...*
|
||||||
|
// NMEA 1083 4.1x $GBGSV,...,1* | $GBGSV,...,0*
|
||||||
|
// GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
|
||||||
|
// GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GB"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GB"),
|
||||||
|
};
|
||||||
|
const gp = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GP"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GP"),
|
||||||
|
};
|
||||||
|
const gl = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GL"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GL"),
|
||||||
|
};
|
||||||
|
const ga = {
|
||||||
|
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === "GA"),
|
||||||
|
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === "GA"),
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSatelliteCount = (GSVArr: Array<any>) => {
|
||||||
|
if (!GSVArr) return;
|
||||||
|
|
||||||
|
const count = GSVArr.reduce((total, gsv) => {
|
||||||
|
return total + gsv.satellites.length;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = (nmeaStr: string) => {
|
||||||
|
const data: any = getMonitoringData(nmeaStr);
|
||||||
|
|
||||||
|
if (!data) return;
|
||||||
|
|
||||||
|
const {
|
||||||
|
dateTime,
|
||||||
|
longitude,
|
||||||
|
latitude,
|
||||||
|
alt,
|
||||||
|
variation,
|
||||||
|
variationPole,
|
||||||
|
numSat,
|
||||||
|
bd,
|
||||||
|
gp,
|
||||||
|
gl,
|
||||||
|
ga,
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
switch (screenView.value) {
|
||||||
|
case "DataMonitorPage":
|
||||||
|
if (
|
||||||
|
longitude != NaN &&
|
||||||
|
latitude != NaN &&
|
||||||
|
longitude != "NaN" &&
|
||||||
|
latitude != "NaN"
|
||||||
|
) {
|
||||||
|
stagingObj.dateTime = dateTime;
|
||||||
|
stagingObj.longitude = longitude;
|
||||||
|
stagingObj.latitude = latitude;
|
||||||
|
stagingObj.alt = alt;
|
||||||
|
stagingObj.variation = variation;
|
||||||
|
stagingObj.variationPole = variationPole;
|
||||||
|
stagingObj.numSat = numSat;
|
||||||
|
} else {
|
||||||
|
stagingObj.dateTime = new Date();
|
||||||
|
}
|
||||||
|
digitalFlopContainer.value.update(
|
||||||
|
stagingObj.dateTime,
|
||||||
|
stagingObj.longitude,
|
||||||
|
stagingObj.latitude,
|
||||||
|
stagingObj.alt,
|
||||||
|
stagingObj.numSat
|
||||||
|
);
|
||||||
|
clock.value.update(stagingObj.dateTime);
|
||||||
|
compass.value.update(stagingObj.variation, stagingObj.variationPole);
|
||||||
|
waterLevel.value.update(stagingObj.alt);
|
||||||
|
map.value.update(stagingObj.longitude, stagingObj.latitude, deepmsg.value);
|
||||||
|
break;
|
||||||
|
case "InfoMonitorPage":
|
||||||
|
BDScrollBoardTable.value.update(bd.GSVArr);
|
||||||
|
GPScrollBoardTable.value.update(gp.GSVArr);
|
||||||
|
GLScrollBoardTable.value.update(gl.GSVArr);
|
||||||
|
GAScrollBoardTable.value.update(ga.GSVArr);
|
||||||
|
|
||||||
|
const bd_satellite_count = getSatelliteCount(bd.GSVArr);
|
||||||
|
const gp_satellite_count = getSatelliteCount(gp.GSVArr);
|
||||||
|
const gl_satellite_count = getSatelliteCount(gl.GSVArr);
|
||||||
|
const ga_satellite_count = getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
centerCmp.value.update(
|
||||||
|
bd_satellite_count,
|
||||||
|
gp_satellite_count,
|
||||||
|
gl_satellite_count,
|
||||||
|
ga_satellite_count
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "SignalMonitorPage":
|
||||||
|
const bd_gp_satellite_count =
|
||||||
|
getSatelliteCount(bd.GSVArr) > getSatelliteCount(gp.GSVArr)
|
||||||
|
? getSatelliteCount(bd.GSVArr)
|
||||||
|
: getSatelliteCount(gp.GSVArr);
|
||||||
|
|
||||||
|
const gl_ga_satellite_count =
|
||||||
|
getSatelliteCount(gl.GSVArr) > getSatelliteCount(ga.GSVArr)
|
||||||
|
? getSatelliteCount(gl.GSVArr)
|
||||||
|
: getSatelliteCount(ga.GSVArr);
|
||||||
|
|
||||||
|
const lineMax =
|
||||||
|
bd_gp_satellite_count > gl_ga_satellite_count
|
||||||
|
? bd_gp_satellite_count
|
||||||
|
: gl_ga_satellite_count;
|
||||||
|
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
|
||||||
|
// 粗细不一致,x轴长度以各数据条目自身为准
|
||||||
|
// BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
|
||||||
|
// GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
|
||||||
|
// GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
|
||||||
|
// GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
|
||||||
|
|
||||||
|
// 粗细一致,x轴长度以数据最多的条目为准
|
||||||
|
BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax);
|
||||||
|
GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax);
|
||||||
|
GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax);
|
||||||
|
GASNRView.value.update(ga.GSVArr, ga.GSAArr, lineMax);
|
||||||
|
break;
|
||||||
|
case "StateMonitorPage":
|
||||||
|
// TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
|
||||||
|
BDPlanisphereView.value.update(bd.GSVArr, bd.GSAArr);
|
||||||
|
GPPlanisphereView.value.update(gp.GSVArr, gp.GSAArr);
|
||||||
|
GLPlanisphereView.value.update(gl.GSVArr, gl.GSAArr);
|
||||||
|
GAPlanisphereView.value.update(ga.GSVArr, ga.GSAArr);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const nmeaAnmiation = async (nmeaOrigin: string) => {
|
||||||
|
nmeaAnimate.value.update(nmeaOrigin);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deepset = (deepArr: Array<string | boolean>) => {
|
||||||
|
deepmsg.value = deepArr;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if ("ipcRenderer" in window) {
|
||||||
|
ipcRenderer.receive("deep", deepset);
|
||||||
|
ipcRenderer.receive("nmea", update);
|
||||||
|
ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
|
||||||
|
ipcRenderer.send("APP_MOUNTED");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.selectView {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #08e5ff;
|
||||||
|
width: 9rem;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(4, 49, 128, 1);
|
||||||
|
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock-content,
|
||||||
|
.compass-content,
|
||||||
|
.water-level-content,
|
||||||
|
.block-right-content {
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animationText {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './page/DataMonitorPage.vue'
|
import App from './page/DataMonitorPage.vue';
|
||||||
|
|
||||||
import './assets/css/main.css'
|
import './assets/css/main.css';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app');
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './page/InfoMonitorPage.vue'
|
import App from './page/InfoMonitorPage.vue';
|
||||||
|
|
||||||
import './assets/css/main.css'
|
import './assets/css/main.css';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app');
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './page/SignalMonitorPage.vue'
|
import App from './page/SignalMonitorPage.vue';
|
||||||
|
|
||||||
import './assets/css/main.css'
|
import './assets/css/main.css';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app');
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './page/StateMonitorPage.vue'
|
import App from './page/StateMonitorPage.vue';
|
||||||
|
|
||||||
import './assets/css/main.css'
|
import './assets/css/main.css';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app');
|
||||||
|
|||||||
@@ -17,6 +17,9 @@ export default defineConfig({
|
|||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: [
|
input: [
|
||||||
|
'./oneShow.html',
|
||||||
|
'./oneShowAll.html',
|
||||||
|
'./oneShowSwitch.html',
|
||||||
'./satellite-data-monitor-platform.html',
|
'./satellite-data-monitor-platform.html',
|
||||||
'./satellite-info-monitor-platform.html',
|
'./satellite-info-monitor-platform.html',
|
||||||
'./satellite-signal-monitor-platform.html',
|
'./satellite-signal-monitor-platform.html',
|
||||||
|
|||||||
Reference in New Issue
Block a user