86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<SubTitleView :title="'星位视图'" />
|
|
<div @dblclick="close" class="h-4/5">
|
|
<v-chart :option="option" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { use } from "echarts/core";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import { ScatterChart } from "echarts/charts";
|
|
import { PolarComponent } from "echarts/components";
|
|
import VChart from "vue-echarts";
|
|
import { reactive } from "vue";
|
|
import SubTitleView from './SubTitleView.vue'
|
|
import { getPlanisphereOption } from '../api/util'
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
ScatterChart,
|
|
PolarComponent
|
|
]);
|
|
|
|
const LOCATED_COLOR = '#e5323e'
|
|
const UNLOCATED_COLOR = '#9ca3af'
|
|
|
|
|
|
const option = reactive({
|
|
polar: {},
|
|
radiusAxis: {
|
|
inverse: true,
|
|
min: 0,
|
|
max: 90,
|
|
axisLabel: {
|
|
rotate: -25,
|
|
showMinLabel: false,
|
|
showMaxLabel: false,
|
|
verticalAlign: 'bottom'
|
|
}
|
|
},
|
|
angleAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: 360,
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
switch (value)
|
|
{
|
|
case 0 : return 'N';
|
|
case 90 : return 'E';
|
|
case 180 : return 'S';
|
|
case 270 : return 'W';
|
|
}
|
|
},
|
|
}
|
|
},
|
|
series: [{
|
|
coordinateSystem: 'polar',
|
|
type: 'scatter',
|
|
symbolSize: 32,
|
|
label: {
|
|
show: true,
|
|
formatter: '{@[2]}'
|
|
},
|
|
itemStyle: {
|
|
color: ({ value }) => {
|
|
return value[3] ? LOCATED_COLOR : UNLOCATED_COLOR
|
|
}
|
|
}
|
|
}]
|
|
})
|
|
|
|
const update = (nmea) => {
|
|
const newOption = getPlanisphereOption(nmea)
|
|
if (!newOption) return
|
|
|
|
Object.assign(option, newOption)
|
|
}
|
|
|
|
const close = () => {
|
|
window.ipcRenderer.send('CLOSE')
|
|
}
|
|
|
|
defineExpose({ update })
|
|
</script> |