gnss-tool-kit/src/render/components/ScrollBoardTable.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 bg-red-100">
      <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: [
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
    {id: "20", elevationDeg: 68, azimuthTrue: 322, SNRdB: 25},
  ]
})

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>