99 lines
3.3 KiB
Vue
99 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div id="satellite-table-container" class="text-white absolute bottom-0 text-center">
|
|
<button @click="show = !show" class="rounded border-blue-900 bg-blue-900">
|
|
<svg v-if="show" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
<table ref="satelliteTable" v-show="show" class="text-center">
|
|
<thead class="text-2xl">
|
|
<th class="py-3 bg-blue-900 border border-gray-900"
|
|
v-for="label, index in ['序号', '卫星名称', '显示/隐藏', '跟踪']"
|
|
:key="label"
|
|
:style="{width: index == 1 ? '37.5vw' : '12.5vw'}">
|
|
{{ label }}
|
|
</th>
|
|
</thead>
|
|
<tbody class="text-lg odd:bg-gray-50">
|
|
<tr v-for="{ id, show }, index in satellites" :key="id">
|
|
<td class="border border-gray-900"> {{ index + 1 }} </td>
|
|
<td class="border border-gray-900"> {{ id }} </td>
|
|
<td class="border border-gray-900">
|
|
<input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onShowStateCheckboxChanged(id)" />
|
|
</td>
|
|
<td class="border border-gray-900">
|
|
<button @click="onTrackButtonClicked(id)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useStore } from 'vuex'
|
|
import { ref, computed, watch } from 'vue'
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
const store = useStore()
|
|
const satellites = computed(() => store.getters["satelliteSystem/satellites"])
|
|
const onTrackButtonClicked = id => store.dispatch('satelliteSystem/track', id)
|
|
const onShowStateCheckboxChanged = id => store.dispatch('satelliteSystem/toggleShow', id)
|
|
|
|
// 表格数据更新时，滚动条回到最顶部
|
|
const satelliteTable = ref(null)
|
|
watch(satellites, () => satelliteTable.value.scrollTop = 0)
|
|
</script>
|
|
|
|
<style scoped>
|
|
#satellite-table-container {
|
|
left: 12.5vw;
|
|
right: 12.5vw;
|
|
}
|
|
|
|
table {
|
|
display: block;
|
|
height: 360px;
|
|
overflow: auto;
|
|
}
|
|
|
|
tr:nth-child(odd) {
|
|
background-color: rgb(17, 24, 39);
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color:rgb(31, 41, 55)
|
|
}
|
|
|
|
td {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
::-webkit-scrollbar
|
|
{
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
|
|
background-color: #4fbee2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
|
|
background-color: #111827;
|
|
}
|
|
|
|
</style>> |