添加星座图和载噪比视图
parent
46769106b5
commit
b6c21343f3
|
@ -0,0 +1,13 @@
|
|||
<!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" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body class="w-h-full">
|
||||
<div id="app" class="w-h-full text-white"></div>
|
||||
<script type="module" src="/src/render/planisphere.ts"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,13 @@
|
|||
<!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" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body class="w-h-full">
|
||||
<div id="app" class="w-h-full text-white"></div>
|
||||
<script type="module" src="/src/render/snr.ts"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<full-screen-container>
|
||||
<TheHeader />
|
||||
|
||||
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
|
||||
<div class="">
|
||||
<PlanisphereView title="北斗" />
|
||||
</div>
|
||||
<div class="">
|
||||
<PlanisphereView title="GPS" />
|
||||
</div>
|
||||
<div class="">
|
||||
<PlanisphereView title="格洛纳斯" />
|
||||
</div>
|
||||
<div class="">
|
||||
<PlanisphereView title="伽利略" />
|
||||
</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 PlanisphereView from './components/PlanisphereView.vue'
|
||||
</script>
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<full-screen-container>
|
||||
<TheHeader />
|
||||
|
||||
<div class="main-content flex flex-wrap flex-1">
|
||||
<div class="w-1/2 h/1/2">
|
||||
<PlanisphereView />
|
||||
</div>
|
||||
<div class="w-1/2 h/1/2">
|
||||
<PlanisphereView />
|
||||
</div>
|
||||
<div class="w-1/2 h/1/2">
|
||||
<PlanisphereView />
|
||||
</div>
|
||||
<div class="w-1/2 h/1/2">
|
||||
<PlanisphereView />
|
||||
</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 SNRView from './components/SNRView.vue'
|
||||
</script>
|
|
@ -25,3 +25,12 @@ export function getPolylineLength(points) {
|
|||
|
||||
return mulAdd(lengths)
|
||||
}
|
||||
|
||||
export function get_in_positioning_id(GSAArr) {
|
||||
let in_positioning_id = []
|
||||
GSAArr.forEach(({ satellites }) => {
|
||||
in_positioning_id.push(...satellites)
|
||||
});
|
||||
|
||||
return in_positioning_id
|
||||
}
|
||||
|
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<VChart :option="option" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue";
|
||||
import { use } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
TitleComponent,
|
||||
PolarComponent
|
||||
} from "echarts/components";
|
||||
import VChart from "vue-echarts";
|
||||
import { get_in_positioning_id } from '../api/util'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
ScatterChart,
|
||||
TitleComponent,
|
||||
PolarComponent
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
title: String
|
||||
})
|
||||
|
||||
const option = reactive({
|
||||
title: {
|
||||
text: props.title,
|
||||
left: 'center'
|
||||
// textAlign: 'center'
|
||||
},
|
||||
polar: {
|
||||
radius: '75%'
|
||||
},
|
||||
angleAxis: {
|
||||
min: 0,
|
||||
max: 360,
|
||||
interval: 45,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 24,
|
||||
formatter: function (value: number) {
|
||||
switch (value)
|
||||
{
|
||||
case 0 : return '北';
|
||||
case 90 : return '东';
|
||||
case 180 : return '南';
|
||||
case 270 : return '西';
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
min: -90,
|
||||
max: 0,
|
||||
interval: 30,
|
||||
axisLabel: {
|
||||
rotate: -25,
|
||||
showMinLabel: false,
|
||||
showMaxLabel: false,
|
||||
verticalAlign: 'bottom',
|
||||
formatter: function(value: number){
|
||||
return Math.abs(value)
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
nmea: 'un-positioning',
|
||||
coordinateSystem: 'polar',
|
||||
type: 'scatter',
|
||||
symbolSize: 32,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{@[2]}'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#9ca3af'
|
||||
}
|
||||
}, {
|
||||
nmea: 'in-positioning',
|
||||
coordinateSystem: 'polar',
|
||||
type: 'scatter',
|
||||
symbolSize: 32,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{@[2]}'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#e5323e'
|
||||
}
|
||||
}]
|
||||
})
|
||||
|
||||
const update = (GSVArr: Array<any>, GSAArr: Array<any>) => {
|
||||
const planisphereOption: any = getPlanisphereOption(GSVArr, GSAArr)
|
||||
if (!planisphereOption) return
|
||||
|
||||
Object.assign(option, planisphereOption)
|
||||
}
|
||||
const getPlanisphereOption = (GSVArr: Array<any>, GSAArr: Array<any>) => {
|
||||
try {
|
||||
let in_positioning_data: Array<any> = [],
|
||||
un_positioning_data: Array<any> = []
|
||||
const in_positioning_id = utils.get_in_positioning_id(GSAArr)
|
||||
|
||||
GSVArr.forEach(({ satellites }) => {
|
||||
satellites.forEach(({ id, elevationDeg, azimuthTrue }) => {
|
||||
if (in_positioning_id.indexOf(parseInt(id)) < 0) {
|
||||
un_positioning_data.push([parseInt(elevationDeg) * -1, azimuthTrue, id])
|
||||
} else {
|
||||
in_positioning_data.push([parseInt(elevationDeg) * -1, azimuthTrue, id])
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const planisphereOption = {
|
||||
series: [{
|
||||
data: un_positioning_data
|
||||
}, {
|
||||
data: in_positioning_data
|
||||
}]
|
||||
}
|
||||
|
||||
return planisphereOption
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ update })
|
||||
</script>
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="w-h-full">
|
||||
<v-chart :option="option" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue"
|
||||
import { use, graphic } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { BarChart } from "echarts/charts";
|
||||
import { GridComponent } from "echarts/components";
|
||||
import VChart from "vue-echarts";
|
||||
import utils from '../api/utils'
|
||||
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent
|
||||
]);
|
||||
|
||||
const BAR_COUNT = 16
|
||||
const UN_POSITIONING_COLOR = '#9ca3af'
|
||||
const IN_POSITIONING_COLOR = new graphic.LinearGradient(
|
||||
0, 1, 0, 0,
|
||||
[
|
||||
{offset: 0.3, color: '#83bff6'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
]
|
||||
)
|
||||
|
||||
const option = reactive({
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
axisLabel: {
|
||||
color: 'black'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
max: 60,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
barCategoryGap: '50%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: function ({ value }) {
|
||||
return !value || value[1] === 0 ? '' : value[1];
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: ({ value }) => {
|
||||
return value[2] ? IN_POSITIONING_COLOR : UN_POSITIONING_COLOR
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
const update = (GSVArr: Array<any>, GSAArr: Array<any>) => {
|
||||
const SNROption: any = getSNROption(GSVArr, GSAArr)
|
||||
if (!SNROption) return
|
||||
|
||||
if (SNROption.xAxis.data.length !== SNROption.series[0].data.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const length = SNROption.xAxis.data.length
|
||||
if (length < BAR_COUNT) {
|
||||
const fill_num = BAR_COUNT - length
|
||||
SNROption.xAxis.data = SNROption.xAxis.data.concat(new Array(fill_num).fill(''))
|
||||
SNROption.series[0].data = SNROption.series[0].data.concat(new Array(fill_num).fill(0))
|
||||
}
|
||||
|
||||
Object.assign(option, SNROption)
|
||||
}
|
||||
const getSNROption = (GSVArr: Array<any>, GSAArr: Array<any>) => {
|
||||
try {
|
||||
let xAxis_data : Array<any> = []
|
||||
let series_data : Array<any> = []
|
||||
const in_positioning_id = utils.get_in_positioning_id(GSAArr)
|
||||
|
||||
GSAArr.forEach(({ satellites }) => {
|
||||
in_positioning_id.push(...satellites)
|
||||
});
|
||||
|
||||
GSVArr.forEach(({ satellites }) => {
|
||||
satellites.forEach(({ id, SNRdB }) => {
|
||||
xAxis_data.push(id)
|
||||
if (in_positioning_id.indexOf(parseInt(id)) < 0) {
|
||||
series_data.push([id, SNRdB, false])
|
||||
} else {
|
||||
series_data.push([id, SNRdB, true])
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const SNROption = {
|
||||
xAxis: {
|
||||
data: xAxis_data
|
||||
},
|
||||
series: [{
|
||||
data: series_data
|
||||
}]
|
||||
}
|
||||
|
||||
return SNROption
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ update })
|
||||
</script>
|
|
@ -0,0 +1,6 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './PlanispherePage.vue'
|
||||
|
||||
import './assets/css/main.css'
|
||||
|
||||
createApp(App).mount('#app')
|
|
@ -0,0 +1,6 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './SNRPage.vue'
|
||||
|
||||
import './assets/css/main.css'
|
||||
|
||||
createApp(App).mount('#app')
|
Loading…
Reference in New Issue