71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<template>
|
|
<div class="satellite-table h-full flex flex-col">
|
|
<div class="text-center text-3xl my-2">{{ title }}</div>
|
|
|
|
<div class="table-header flex">
|
|
<div
|
|
class="table-header-item leading-10 flex-1"
|
|
v-for="(headerItem, i) in header"
|
|
:key="`${headerItem}${i}`"
|
|
v-html="headerItem"
|
|
/>
|
|
</div>
|
|
|
|
<div class="table-body flex-grow">
|
|
<div
|
|
class="row-item flex"
|
|
v-for="(row, ri) in data.satellites"
|
|
:key="`${row.toString()}`"
|
|
:style="`
|
|
background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
|
`"
|
|
>
|
|
<div
|
|
class="ceil flex-1"
|
|
v-for="(ceil, ci) in row"
|
|
:key="`${ceil}${ri}${ci}`"
|
|
v-html="ceil"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive } from 'vue'
|
|
|
|
defineProps({
|
|
title: String
|
|
})
|
|
|
|
const oddRowBGC = '#003B51'
|
|
const evenRowBGC = '#0A2732'
|
|
|
|
const header = ['卫星编号', '仰角', '方位角', '载噪比']
|
|
const data = reactive({
|
|
satellites: []
|
|
})
|
|
|
|
const update = (GSVArr: Array<any>) => {
|
|
if (GSVArr.length <= 0 ) return
|
|
|
|
let satellites: any[] = []
|
|
GSVArr.forEach((GSV) => {
|
|
satellites = satellites.concat(GSV.satellites)
|
|
})
|
|
// console.log(satellites, '====================');
|
|
data.satellites = satellites
|
|
}
|
|
|
|
defineExpose({ update })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table-header {
|
|
background-color: rgb(25, 129, 246);
|
|
}
|
|
|
|
.row-item {
|
|
line-height: 38px;
|
|
}
|
|
</style> |