Skip to content

F
fk-spider-web
Commit c4c362d6 by yzh
Options

feat:完成了数据展示静态页面

parent 0742a0eb
Showing with 1265 additions and 110 deletions
src/components/Delete/index.vue 0 → 100644
<template>
<el-dialog
v-model="dialogVisible"
title="Tips"
width="500"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
ElMessageBox.confirm('Are you sure to close this dialog?')
.then(() => {
done()
})
.catch(() => {
// catch error
})
}
</script>
\ No newline at end of file
src/router/index.ts
...@@ -41,6 +41,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -41,6 +41,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
path: '', path: '',
component: Layout, component: Layout,
redirect: '/dashboard', redirect: '/dashboard',
hidden: true,
children: [{ children: [{
path: '/dashboard', path: '/dashboard',
name: 'Dashboard', name: 'Dashboard',
...@@ -52,6 +53,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -52,6 +53,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: "/scrapyd-server", path: "/scrapyd-server",
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: "list", path: "list",
...@@ -65,6 +67,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -65,6 +67,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: '/project', path: '/project',
component: Layout, component: Layout,
hidden: true,
redirect: '/project/list', redirect: '/project/list',
name: 'project', name: 'project',
meta: { title: '项目', icon: 'House' }, meta: { title: '项目', icon: 'House' },
...@@ -88,6 +91,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -88,6 +91,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: '/spider', path: '/spider',
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: 'list', path: 'list',
...@@ -101,6 +105,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -101,6 +105,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: '/schedule', path: '/schedule',
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: 'list', path: 'list',
...@@ -114,6 +119,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -114,6 +119,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: "/schedule-log", path: "/schedule-log",
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: 'list', path: 'list',
...@@ -127,6 +133,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -127,6 +133,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: "/job", path: "/job",
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: "list", path: "list",
...@@ -140,6 +147,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -140,6 +147,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: '/stats', path: '/stats',
component: Layout, component: Layout,
hidden: true,
children: [ children: [
{ {
path: 'list', path: 'list',
......
src/styles/_element.scss
/* 表格最外层透明 */ /* 表格最外层透明 */
.el-table, .el-table,
.el-table__expanded-cell { .el-table__expanded-cell {
background-color: transparent; background-color: transparent;
} }
/* 表格内背景颜色 */ /* 表格内背景颜色 */
.el-table th, .el-table th,
.el-table tr, .el-table tr,
.el-table td { .el-table td {
background-color: transparent !important; background-color: transparent !important;
} }
/* 通过css变量修改el-table样式 */ /* 通过css变量修改el-table样式 */
.el-table { .el-table {
// 表头 // 表头
--el-table-header-text-color: #FFFFFF; --el-table-header-text-color: #FFFFFF;
/* 行样式 */ /* 行样式 */
--el-table-text-color: #FFFFFF; --el-table-text-color: #FFFFFF;
.el-table__body { .el-table__body {
tr { tr {
// 行高 // 行高
height: 48px; height: 48px;
...@@ -34,6 +34,32 @@ ...@@ -34,6 +34,32 @@
} }
} }
.el-input{ .el-input {
--el-table-text-color: #FFFFFF; --el-table-text-color: #FFFFFF;
}
// 分段选择器的样式
.custom-style .el-segmented {
// 选中选项的背景颜色
--el-segmented-item-selected-bg-color: #1977d5d7;
// 分段选择器的背景颜色
--el-segmented-bg-color: #1b1c54;
// 选项悬停时的背景颜色
--el-segmented-item-hover-bg-color: #1977d5d7;
// 选项文字颜色
--el-segmented-color: #FFFFFF;
// 选项悬停时的文字颜色
--el-segmented-item-hover-color: #FFFFFF;
// 选中选项的背景颜色
--el-segmented-item-active-bg-color: #1977d5d7;
}
.segmentedStyle .el-segmented {
--el-segmented-item-selected-bg-color: #1977d5d7;
--el-segmented-bg-color: #1b1c54;
--el-segmented-item-hover-bg-color: #1977d5d7;
--el-segmented-color: #FFFFFF;
--el-segmented-item-hover-color: #FFFFFF;
--el-segmented-item-active-bg-color: #1977d5d7;
} }
\ No newline at end of file
src/views/os-dataDisplay/components/allDataTab.vue 0 → 100644
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请选择" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间"
end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">Norad Cat ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="站点位置" show-overflow-tooltip />
<el-table-column property="name" label="站点名称" show-overflow-tooltip />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" show-overflow-tooltip />
<el-table-column property="name" label="TLE" show-overflow-tooltip />
<el-table-column property="name" label="是否为同步" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const tableData = ref([
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
/* 去除按钮点击后的黑边框 */
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue 0 → 100644
<template>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-space>
<el-button type="primary">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '41px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="距离(km)" show-overflow-tooltip />
<el-table-column property="name" label="往返光时(s)" show-overflow-tooltip />
<el-table-column property="name" label="站点名称" show-overflow-tooltip />
<el-table-column property="name" label="目标方位" show-overflow-tooltip />
<el-table-column property="name" label="目标俯仰" show-overflow-tooltip />
<el-table-column property="name" label="目标距离" show-overflow-tooltip />
<el-table-column property="name" label="风速(km/hr)" show-overflow-tooltip />
<el-table-column property="name" label="上行信号来源" show-overflow-tooltip />
<el-table-column property="name" label="上行信号频段" show-overflow-tooltip />
<el-table-column property="name" label="上行发射功率" show-overflow-tooltip />
<el-table-column property="name" label="下行信号来源" show-overflow-tooltip />
<el-table-column property="name" label="下行信号频段" show-overflow-tooltip />
<el-table-column property="tle" label="下行接收功率" show-overflow-tooltip />
<el-table-column property="tle" label="数据时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('DSN数据')
const sizeOptions = ['DSN数据', '新闻']
const tableData = ref([
{
name: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605'
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnTab.vue 0 → 100644
<template>
<div class="text-left p-s">
<div class="segmentedStyle">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
</div>
</div>
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
</newsDataTab>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dsnDataTab from './dsnDataTab.vue'
import newsDataTab from './newsDataTab.vue'
const mode = ref('DSN数据')
const sizeOptions = ['DSN数据', '新闻']
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/newsDataTab.vue 0 → 100644
<template>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle m-l-20">
<el-form inline>
<el-form-item>
<el-text class="mx-1">新闻标题:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '48px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="新闻标题" show-overflow-tooltip />
<el-table-column property="name" label="新闻来源" show-overflow-tooltip />
<el-table-column property="name" label="新闻日期" show-overflow-tooltip />
<el-table-column property="name" label="获取时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('DSN数据')
const sizeOptions = ['DSN数据', '新闻']
const tableData = ref([
{
name: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605'
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
// justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/ituDataTab.vue 0 → 100644
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="主管部门" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="name" label="是否为同步" show-overflow-tooltip />
<el-table-column property="name" label="同步位置" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="最低海拔" show-overflow-tooltip />
<el-table-column property="name" label="参考主体" show-overflow-tooltip />
<el-table-column property="name" label="最高频率" show-overflow-tooltip />
<el-table-column property="name" label="最低频率" show-overflow-tooltip />
<el-table-column property="name" label="状态" show-overflow-tooltip />
<el-table-column property="name" label="有效期" show-overflow-tooltip />
<el-table-column property="name" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="name" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="name" label="是否暂停使用" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const tableData = ref([
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/stDataTab.vue 0 → 100644
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">NORAD CAT ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="INTLDES" show-overflow-tooltip />
<el-table-column property="name" label="类型" show-overflow-tooltip />
<el-table-column property="name" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="name" label="运行时间" show-overflow-tooltip />
<el-table-column property="name" label="SITE" show-overflow-tooltip />
<el-table-column property="name" label="失效时间" show-overflow-tooltip />
<el-table-column property="name" label="周期" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="INCL" show-overflow-tooltip />
<el-table-column property="name" label="RCS" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const tableData = ref([
{
name: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605'
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
.el-button:focus {
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/index.vue
<template> <template>
<div class="text-left p-10"> <div class="text-left p-4">
<el-form inline> <div class="custom-style">
<el-form-item label="目标选择:"> <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" />
<el-select v-model="taskValue" placeholder=" " style="width: 140px"> </div>
<el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="分类选择:">
<el-select v-model="errorValue" placeholder=" " style="width: 140px">
<el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="关键词搜索:">
<el-input v-model="searchInput" style="width: 220px" placeholder="Search" :prefix-icon="Search" />
</el-form-item>
<el-form-item label="时间:">
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary">批量导出</el-button>
<el-button type="danger">批量删除</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="标题" show-overflow-tooltip />
<el-table-column property="name" label="关键字" show-overflow-tooltip />
<el-table-column property="name" label="数据分类" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" width="200" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" width="200" show-overflow-tooltip />
<el-table-column label="操作" width="240">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="success" plain @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div> </div>
<allDataTab v-if="mode === '综合数据'">
</allDataTab>
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
...@@ -61,58 +25,25 @@ ...@@ -61,58 +25,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' import allDataTab from './components/allDataTab.vue'
import { Search } from '@element-plus/icons-vue' import ituDataTab from './components/ituDataTab.vue'
const errorValue = ref('') import stDataTab from './components/stDataTab.vue'
const taskValue = ref('') import dsnDataTab from './components/dsnData/dsnTab.vue'
const timeValue = ref('')
const searchInput = ref('')
const sortOptions = [
{
value: 'task1',
label: '基础信息',
},
{
value: 'task2',
label: '信号信息',
},
{
value: 'task3',
label: '其他信息',
},
]
const tableData = ref([
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => { const mode = ref('综合数据')
console.log(row); const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
}
const getData = () => {
console.log('getData');
}
</script> </script>
<style scoped> <style scoped lang="scss">
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style> </style>
src/views/os-taskInformation/index.vue
...@@ -148,4 +148,8 @@ const getData = () => { ...@@ -148,4 +148,8 @@ const getData = () => {
.el-select-dropdown__item:hover{ .el-select-dropdown__item:hover{
color:#409eff; color:#409eff;
} }
.el-button:focus {
outline: none;
}
</style> </style>
\ No newline at end of file
src/views/os-taskRecord/index.vue
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-text class="mx-1">时间:</el-text> <el-text class="mx-1">时间:</el-text>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date" <el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date"
...@@ -298,4 +297,7 @@ const getData = () => { ...@@ -298,4 +297,7 @@ const getData = () => {
color: #409eff; color: #409eff;
} }
.el-button:focus {
outline: none;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment