添加星座图和载噪比视图

src/render/components/PlanisphereView.vue

@@ -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>