134 lines
2.8 KiB
Vue
134 lines
2.8 KiB
Vue
<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'
|
|
},
|
|
polar: {
|
|
radius: '72%'
|
|
},
|
|
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> |