实现载造比数据的更新

master
yezhichao 2021-11-23 08:37:30 +08:00
parent ce6dc0b882
commit 9e19585d1f
4 changed files with 106 additions and 71 deletions

View File

@ -50,12 +50,10 @@ const doHandle = (value) => {
nmeaObj.GGA = result
break;
case 'GSA':
if (result.talker_id === 'BD') nmeaObj.GSA.push(result)
nmeaObj.GSA.push(result)
break;
case 'GSV':
if (result.talker_id === 'BD') nmeaObj.GSV.push(result)
break;
case 'TXT':
nmeaObj.GSV.push(result)
break;
}
}

View File

@ -22,9 +22,9 @@ function createWindow(page: String) {
}
function launch() {
createWindow('satellite-data-monitor-platform')
// createWindow('satellite-data-monitor-platform')
// createWindow('satellite-info-monitor-platform')
// createWindow('satellite-signal-monitor-platform')
createWindow('satellite-signal-monitor-platform')
// createWindow('satellite-state-monitor-platform')
}

View File

@ -1,7 +1,7 @@
<template>
<div class="w-h-full">
<v-chart :option="option" />
</div>
<div class="w-h-full">
<v-chart :option="option" />
</div>
</template>
<script lang="ts" setup>
@ -17,7 +17,7 @@ import { get_in_positioning_id } from '../api/util'
use([
CanvasRenderer,
BarChart,
TitleComponent,
TitleComponent,
GridComponent
]);
@ -25,14 +25,14 @@ const props = defineProps({
title: String
})
const BAR_COUNT = 16
const BAR_COUNT = 30
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'}
]
0, 1, 0, 0,
[
{offset: 0.3, color: '#83bff6'},
{offset: 1, color: '#188df0'}
]
)
const option = reactive({
@ -40,64 +40,57 @@ const option = reactive({
text: props.title,
left: 'center'
},
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
}
}
}]
xAxis: {
type: 'category',
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {
color: 'black'
}
},
yAxis: {
show: false,
max: 60
},
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) return
if (SNROption.xAxis.data.length !== SNROption.series[0].data.length) {
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))
}
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)
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)
const in_positioning_id = get_in_positioning_id(GSAArr)
GSAArr.forEach(({ satellites }) => {
in_positioning_id.push(...satellites)

View File

@ -4,16 +4,16 @@
<div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
<div>
<SNRView title="北斗" />
<SNRView ref="BDSNRView" title="北斗" />
</div>
<div>
<SNRView title="GPS" />
<SNRView ref="GPSNRView" title="GPS" />
</div>
<div>
<SNRView title="格洛纳斯" />
<SNRView ref="GLSNRView" title="格洛纳斯" />
</div>
<div>
<SNRView title="伽利略" />
<SNRView ref="GASNRView" title="伽利略" />
</div>
</div>
</full-screen-container>
@ -24,13 +24,57 @@ import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
import TheHeader from '../components/Layout/TheHeader.vue'
import SNRView from '../components/SNRView.vue'
import { onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import { getNMEAObj } from '../api/util'
const BDSNRView = ref()
const GPSNRView = ref()
const GLSNRView = ref()
const GASNRView = ref()
const update = (nmeaStr: string) => {
const data: any = getMonitoringData(nmeaStr)
if (!data) return
const { bd, gp, gl, ga } = data
// TODO: bdgsv7gsatalker_id
BDSNRView.value.update(bd.GSVArr, bd.GSAArr)
GPSNRView.value.update(gp.GSVArr, gp.GSAArr)
GLSNRView.value.update(gl.GSVArr, gl.GSAArr)
GASNRView.value.update(ga.GSVArr, ga.GSAArr)
}
onMounted(() => {
if ('ipcRenderer' in window) {
ipcRenderer.receive('nmea', console.log)
ipcRenderer.receive('nmea', update)
ipcRenderer.send('APP_MOUNTED')
}
})
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 = {
GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
}
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>