实现卫星信息监控页面的显示

src/render/components/ScrollBoardTable.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="satellite-table overflow-hidden">
+  <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"
@@ -9,13 +11,12 @@
       />
     </div>
 
-    <div class="table-body flex flex-col overflow-hidden">
+    <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="`
-          line-height: 40px;
           background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
         `"
       >
@@ -33,12 +34,26 @@
 <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}]
+  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>) => {
@@ -59,4 +74,8 @@ defineExpose({ update })
 .table-header {
   background-color: rgb(25, 129, 246);
 }
+
+.row-item {
+  line-height: 38px;
+}
 </style>