Skip to content

F
fk-spider-web
Commit 1c213f76 by liucan
Options

pref:调整页面样式布局

parent 85fdc758
Showing with 1132 additions and 878 deletions
src/styles/_element.scss
...@@ -97,3 +97,22 @@ ...@@ -97,3 +97,22 @@
.el-date-editor .el-range-input{ .el-date-editor .el-range-input{
color: #ffffff; color: #ffffff;
} }
.el-loading-spinner .path {
stroke: white !important;
/* 替换为你需要的颜色（如 #304156 或 rgb(48, 65, 86)） */
}
/* 卡片外层容器透明 */
.el-card {
background-color: transparent !important;
border: none;
/* 可选：去除边框 */
}
/* 卡片内容区域透明 */
.el-card__body {
background-color: transparent !important;
padding: 16px;
/* 保持默认内边距，可按需调整 */
}
\ No newline at end of file
src/utils/formatExactLargeNum.ts 0 → 100644
const formatExactLargeNum = (num: number | string) => {
if (num === null || num === undefined) return num;
if (typeof num !== "number" && typeof num !== "string") return num;
const parsedNum = typeof num === "string" ? Number(num.replace(/,/g, "")) : num;
if (isNaN(parsedNum)) return num;
if (Math.abs(parsedNum) > 100000000) {
return parsedNum.toExponential(2);
} else {
return parsedNum.toLocaleString("en-US", {
useGrouping: true,
maximumFractionDigits: 0,
minimumFractionDigits: 0,
});
}
};
export default formatExactLargeNum;
\ No newline at end of file
src/views/os-dataDisplay/components/allDataTab.vue
...@@ -14,8 +14,15 @@ ...@@ -14,8 +14,15 @@
<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="开始时间" end-placeholder="结束时间" <el-date-picker
format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" /> 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-form-item> <el-form-item>
<el-text class="mx-1">站点名称:</el-text> <el-text class="mx-1">站点名称:</el-text>
...@@ -23,7 +30,6 @@ ...@@ -23,7 +30,6 @@
<el-form-item> <el-form-item>
<el-input placeholder="请输入" style="width: 220px" /> <el-input placeholder="请输入" style="width: 220px" />
</el-form-item> </el-form-item>
<br></br>
<el-form-item> <el-form-item>
<el-text class="mx-1">Norad Cat ID:</el-text> <el-text class="mx-1">Norad Cat ID:</el-text>
</el-form-item> </el-form-item>
...@@ -56,8 +62,14 @@ ...@@ -56,8 +62,14 @@
</div> </div>
<div class="m-t-5" /> <div class="m-t-5" />
<div> <div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }" <el-table
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> :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 type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" /> <el-table-column property="number" label="序号" width="55" />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip /> <el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
...@@ -71,23 +83,23 @@ ...@@ -71,23 +83,23 @@
<el-table-column property="isSync" label="是否为同步" show-overflow-tooltip /> <el-table-column property="isSync" label="是否为同步" show-overflow-tooltip />
<el-table-column label="操作" width="60"> <el-table-column label="操作" width="60">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
详情
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div> </div>
</div> </div>
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="155px" size="small" class="px-4"> <el-form label-width="155px" size="small" class="px-4">
<div> <div>
...@@ -356,160 +368,158 @@ ...@@ -356,160 +368,158 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import exportDialog from '@/components/Export/index.vue' import exportDialog from "@/components/Export/index.vue";
const timeValue = ref('') const timeValue = ref("");
const detailVisibleValue = ref(false) const detailVisibleValue = ref(false);
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
// SNS Notice ID // SNS Notice ID
const snsId = ref('') const snsId = ref("");
// 主管部门 // 主管部门
const department = ref('') const department = ref("");
// 目标名称 // 目标名称
const targetName = ref('') const targetName = ref("");
// 计划类型 // 计划类型
const planType = ref('') const planType = ref("");
// 是否为同步 // 是否为同步
const syncType = ref('') const syncType = ref("");
// 同步位置 // 同步位置
const syncPosition = ref('') const syncPosition = ref("");
// 近地点 // 近地点
const perigee = ref('') const perigee = ref("");
// 远地点 // 远地点
const apogee = ref('') const apogee = ref("");
// 最低海拔 // 最低海拔
const lowestAltitude = ref('') const lowestAltitude = ref("");
// 参考主体 // 参考主体
const referenceSubject = ref('') const referenceSubject = ref("");
// 最低频率 // 最低频率
const lowestFrequency = ref('') const lowestFrequency = ref("");
// 最高频率 // 最高频率
const highestFrequency = ref('') const highestFrequency = ref("");
// 状态 // 状态
const status = ref('') const status = ref("");
// 有效期 // 有效期
const validityPeriod = ref('') const validityPeriod = ref("");
// 最早使用日期 // 最早使用日期
const earliestUsageDate = ref('') const earliestUsageDate = ref("");
// 是否确认使用 // 是否确认使用
const isUsed = ref('') const isUsed = ref("");
// 是否暂停使用 // 是否暂停使用
const isPauseUsed = ref('') const isPauseUsed = ref("");
// 记录时间 // 记录时间
const recordTime = ref('') const recordTime = ref("");
// 是否在国际频率列表中 // 是否在国际频率列表中
const IsInTheInternationalFrequencyList = ref('') const IsInTheInternationalFrequencyList = ref("");
// 最早监管日期 // 最早监管日期
const earliestRegulatoryDate = ref('') const earliestRegulatoryDate = ref("");
// 是否恢复使用 // 是否恢复使用
const isRestoreUsed = ref('') const isRestoreUsed = ref("");
// 最新相关BF IFIC发布日期 // 最新相关BF IFIC发布日期
const BFIFICdate = ref('') const BFIFICdate = ref("");
// 往返光时 // 往返光时
const roundTripTime = ref('') const roundTripTime = ref("");
// 距离 // 距离
const distance = ref('') const distance = ref("");
// 目标方位 // 目标方位
const targetAzimuth = ref('') const targetAzimuth = ref("");
// 目标俯仰 // 目标俯仰
const targetElevation = ref('') const targetElevation = ref("");
// 上行信号来源 // 上行信号来源
const upstreamSignalSource = ref('') const upstreamSignalSource = ref("");
// 上行发射功率 // 上行发射功率
const upstreamLaunchPower = ref('') const upstreamLaunchPower = ref("");
// 上行信号频段 // 上行信号频段
const upstreamFrequencyBand = ref('') const upstreamFrequencyBand = ref("");
// 风速 // 风速
const windSpeed = ref('') const windSpeed = ref("");
// 下行信号来源 // 下行信号来源
const downstreamSignalSource = ref('') const downstreamSignalSource = ref("");
// 下行信号频段 // 下行信号频段
const downstreamFrequencyBand = ref('') const downstreamFrequencyBand = ref("");
// 下行接收功率 // 下行接收功率
const downstreamReceptionPower = ref('') const downstreamReceptionPower = ref("");
// 类型 // 类型
const type = ref('') const type = ref("");
// INTLDES // INTLDES
const intldes = ref('') const intldes = ref("");
// 失效时间 // 失效时间
const expirationTime = ref('') const expirationTime = ref("");
// 周期 // 周期
const period = ref('') const period = ref("");
// INCL // INCL
const incl = ref('') const incl = ref("");
// RCS // RCS
const rcs = ref('') const rcs = ref("");
// SITE // SITE
const site = ref('') const site = ref("");
// TLE // TLE
const tle = ref('') const tle = ref("");
const tableData = ref([ const tableData = ref([
{ {
number: '1', number: "1",
targetName: 'VOYAGER-2', targetName: "VOYAGER-2",
stationPosition: '[148.98,-35.22]', stationPosition: "[148.98,-35.22]",
stationName: 'CANBERRA', stationName: "CANBERRA",
NoradCatId: '2134', NoradCatId: "2134",
SNSNoticeId: '90504649', SNSNoticeId: "90504649",
dataTime: '2025-06-24 14:35:23', dataTime: "2025-06-24 14:35:23",
recordTime: '2025-06-25 14:35:23', recordTime: "2025-06-25 14:35:23",
tle: '-', tle: "-",
isSync: '是', isSync: "是",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
{ {
name: '1', name: "1",
}, },
]) ]);
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
detailVisibleValue.value = true detailVisibleValue.value = true;
} };
const getData = () => { const getData = () => {
console.log('getData'); console.log("getData");
} };
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false;
} };
const handleExportConfirm = () => {
} const handleExportConfirm = () => {};
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true;
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -537,7 +547,7 @@ const handleExport = () => { ...@@ -537,7 +547,7 @@ const handleExport = () => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
...@@ -572,7 +582,7 @@ const handleExport = () => { ...@@ -572,7 +582,7 @@ const handleExport = () => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -582,7 +592,7 @@ const handleExport = () => { ...@@ -582,7 +592,7 @@ const handleExport = () => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
/* 去除按钮点击后的黑边框 */ /* 去除按钮点击后的黑边框 */
......
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
...@@ -32,14 +32,23 @@ ...@@ -32,14 +32,23 @@
</el-form> </el-form>
</div> </div>
</div> --> </div> -->
<div class="flex justify-left m-l-1%"> <div class="flex justify-left" style="padding-left: 10px">
<el-button :type="statusMode === false ? 'primary' : 'danger'" @click="handleRefresh" size="small">{{ statusMode === false ? <el-button :type="statusMode === false ? 'primary' : 'danger'" @click="handleRefresh" size="small">{{
'开始刷新' : '停止刷新' }}</el-button> statusMode === false ? "开始刷新" : "停止刷新"
}}</el-button>
</div> </div>
<div class="m-t-5" /> <div class="m-t-5" />
<div> <div class="table-content">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '46px' }" <el-table
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> v-loading="!tableData"
element-loading-background="rgba(48, 65, 86, 0.7)"
:data="tableData"
style="width: 100%"
border
:row-style="{ height: '46px' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<!-- <el-table-column type="selection" width="40" /> --> <!-- <el-table-column type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="name" label="天线名称" show-overflow-tooltip /> <el-table-column property="name" label="天线名称" show-overflow-tooltip />
...@@ -52,35 +61,31 @@ ...@@ -52,35 +61,31 @@
<!-- <el-table-column property="targetDistance" label="目标距离" show-overflow-tooltip /> --> <!-- <el-table-column property="targetDistance" label="目标距离" show-overflow-tooltip /> -->
<el-table-column property="windSpeed" label="风速(km/hr)" show-overflow-tooltip> <el-table-column property="windSpeed" label="风速(km/hr)" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.windSpeed === '' ? '无' : scope.row.windSpeed }} {{ scope.row.windSpeed === "" ? "无" : scope.row.windSpeed }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="targets[0].name" label="上行信号来源" show-overflow-tooltip /> <el-table-column property="targets[0].name" label="上行信号来源" show-overflow-tooltip />
<el-table-column property="signals[0].band" label="上行信号频段" show-overflow-tooltip> <el-table-column property="signals[0].band" label="上行信号频段" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.signals.length === 0 ? '无' : scope.row.signals[0].band }} {{ scope.row.signals.length === 0 ? "无" : scope.row.signals[0].band }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="signals[0].power" label="上行发射功率" show-overflow-tooltip> <el-table-column property="signals[0].power" label="上行发射功率" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.signals.length === 0 ? '无' : scope.row.signals[0].power }} {{ scope.row.signals.length === 0 ? "无" : scope.row.signals[0].power }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="targets[0].name" label="下行信号来源" show-overflow-tooltip /> <el-table-column property="targets[0].name" label="下行信号来源" show-overflow-tooltip />
<el-table-column property="signals[1].band" label="下行信号频段" show-overflow-tooltip> <el-table-column property="signals[1].band" label="下行信号频段" show-overflow-tooltip>
<template #default="scope"> <template #default="scope"> {{ scope.row.signals.length < 2 ? "无" : scope.row.signals[1].band }} </template>
{{ scope.row.signals.length < 2 ? '无' : scope.row.signals[1].band }} </template>
</el-table-column> </el-table-column>
<el-table-column property="signals[1].power" label="下行接收功率" show-overflow-tooltip> <el-table-column property="signals[1].power" label="下行接收功率" show-overflow-tooltip>
<template #default="scope"> <template #default="scope"> {{ scope.row.signals.length < 2 ? "无" : scope.row.signals[1].power }} </template>
{{ scope.row.signals.length < 2 ? '无' : scope.row.signals[1].power }} </template>
</el-table-column> </el-table-column>
<!-- <el-table-column property="dataTime" label="数据时间" show-overflow-tooltip /> --> <!-- <el-table-column property="dataTime" label="数据时间" show-overflow-tooltip /> -->
<el-table-column label="操作" width="60"> <el-table-column label="操作" width="60">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
详情
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -93,9 +98,7 @@ ...@@ -93,9 +98,7 @@
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="800px" align-center @close="handleClose" draggable> <el-dialog v-model="detailVisibleValue" center width="800px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="94px" size="small" class="px-4"> <el-form label-width="94px" size="small" class="px-4">
<div> <div>
...@@ -250,110 +253,109 @@ ...@@ -250,110 +253,109 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import { getDsnList } from '@/api/spiderData' import { getDsnList } from "@/api/spiderData";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
const timeValue = ref('') const timeValue = ref("");
const statusMode = ref(false) const statusMode = ref(false);
const detailVisibleValue = ref(false) const detailVisibleValue = ref(false);
// 目标名称 // 目标名称
const targetName = ref('') const targetName = ref("");
// 距离(km) // 距离(km)
const distance = ref('') const distance = ref("");
// 往返光时 // 往返光时
const roundTripTime = ref('') const roundTripTime = ref("");
// 站点名称 // 站点名称
const stationName = ref('') const stationName = ref("");
// 天线名称 // 天线名称
const antennaName = ref('') const antennaName = ref("");
// 天线状态 // 天线状态
const antennaStatus = ref('') const antennaStatus = ref("");
// 目标方位 // 目标方位
const targetAzimuth = ref('') const targetAzimuth = ref("");
// 目标俯仰 // 目标俯仰
const targetElevation = ref('') const targetElevation = ref("");
// 目标距离 // 目标距离
const targetDistance = ref('') const targetDistance = ref("");
// 风速(km/hr) // 风速(km/hr)
const windSpeed = ref('') const windSpeed = ref("");
// 上行信号状态 // 上行信号状态
const upSignalStatus = ref('') const upSignalStatus = ref("");
// 上行信号来源 // 上行信号来源
const upSignalSource = ref('') const upSignalSource = ref("");
// 上行信号频段 // 上行信号频段
const upSignalFrequencyBand = ref('') const upSignalFrequencyBand = ref("");
// 上行发射功率 // 上行发射功率
const upSignalLaunchPower = ref('') const upSignalLaunchPower = ref("");
// 下行信号状态 // 下行信号状态
const downSignalStatus = ref('') const downSignalStatus = ref("");
// 下行信号来源 // 下行信号来源
const downSignalSource = ref('') const downSignalSource = ref("");
// 下行信号频段 // 下行信号频段
const downSignalFrequencyBand = ref('') const downSignalFrequencyBand = ref("");
// 下行接收功率 // 下行接收功率
const downSignalReceptionPower = ref('') const downSignalReceptionPower = ref("");
// 数据时间 // 数据时间
const dataTime = ref('') const dataTime = ref("");
// 记录时间 // 记录时间
const recordTime = ref('') const recordTime = ref("");
// 是否暂停使用 // 是否暂停使用
const isSuspended = ref('') const isSuspended = ref("");
interface dsnInfo { interface dsnInfo {
targetName:string targetName: string;
targetNam:string targetNam: string;
} }
const dsnInfoDialog = ref<dsnInfo>() const dsnInfoDialog = ref<dsnInfo>();
// 存放定时器的id // 存放定时器的id
const timerId = ref<number | null>() const timerId = ref<number | null>();
const tableData = ref() const tableData = ref();
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 1, pageSize: 1,
pageNo: 1 pageNo: 1,
}) });
// 查看数据详情的方法 // 查看数据详情的方法
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
targetName.value = row.targets[0].name targetName.value = row.targets[0].name;
windSpeed.value = row.windSpeed === '' ? '无' : row.windSpeed windSpeed.value = row.windSpeed === "" ? "无" : row.windSpeed;
antennaName.value = row.name antennaName.value = row.name;
antennaStatus.value = row.activity antennaStatus.value = row.activity;
targetAzimuth.value = row.azimuthAngle targetAzimuth.value = row.azimuthAngle;
targetElevation.value = row.elevationAngle targetElevation.value = row.elevationAngle;
upSignalStatus.value = row.signals.length < 1 ? '无' : row.signals[0].active upSignalStatus.value = row.signals.length < 1 ? "无" : row.signals[0].active;
upSignalSource.value = row.signals.length < 1 ? '无' : row.targets[0].name upSignalSource.value = row.signals.length < 1 ? "无" : row.targets[0].name;
upSignalFrequencyBand.value = row.signals.length < 1 ? '无' : row.signals[0].band upSignalFrequencyBand.value = row.signals.length < 1 ? "无" : row.signals[0].band;
upSignalLaunchPower.value = row.signals.length < 1 ? '无' : row.signals[0].power upSignalLaunchPower.value = row.signals.length < 1 ? "无" : row.signals[0].power;
downSignalStatus.value = row.signals.length < 2 ? '无' : row.signals[1].active downSignalStatus.value = row.signals.length < 2 ? "无" : row.signals[1].active;
downSignalSource.value = row.signals.length < 2 ? '无' : row.targets[0].name downSignalSource.value = row.signals.length < 2 ? "无" : row.targets[0].name;
downSignalFrequencyBand.value = row.signals.length < 2 ? '无' : row.signals[1].band downSignalFrequencyBand.value = row.signals.length < 2 ? "无" : row.signals[1].band;
downSignalReceptionPower.value = row.signals.length < 2 ? '无' : row.signals[1].power downSignalReceptionPower.value = row.signals.length < 2 ? "无" : row.signals[1].power;
roundTripTime.value = row.targets[0].rtlt roundTripTime.value = row.targets[0].rtlt;
detailVisibleValue.value = true detailVisibleValue.value = true;
} };
// 获取dsn数据列表的方法 // 获取dsn数据列表的方法
const getData = async () => { const getData = async () => {
const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
let dishesData = [] let dishesData = [];
for(let i = 0; i < res.data.list[0].stations.length; i++){ for (let i = 0; i < res.data.list[0].stations.length; i++) {
for(let j = 0; j < res.data.list[0].stations[i].dishes.length; j++){ for (let j = 0; j < res.data.list[0].stations[i].dishes.length; j++) {
dishesData.push(res.data.list[0].stations[i].dishes[j]) dishesData.push(res.data.list[0].stations[i].dishes[j]);
} }
} }
pageObj.value.total = dishesData.length pageObj.value.total = dishesData.length;
tableData.value = dishesData tableData.value = dishesData;
} };
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false;
} };
// 刷新数据的方法 // 刷新数据的方法
const handleRefresh = () => { const handleRefresh = () => {
// 切换是否开始刷新的状态 // 切换是否开始刷新的状态
statusMode.value = !statusMode.value statusMode.value = !statusMode.value;
// 删除定时器 // 删除定时器
if (timerId.value !== null) { if (timerId.value !== null) {
clearInterval(timerId.value); clearInterval(timerId.value);
...@@ -361,26 +363,26 @@ const handleRefresh = () => { ...@@ -361,26 +363,26 @@ const handleRefresh = () => {
} }
// 开始刷新时重新设置一个定时器 // 开始刷新时重新设置一个定时器
if (statusMode.value) { if (statusMode.value) {
ElMessage.success('开始刷新') ElMessage.success("开始刷新");
// 保存id删除的时候用 // 保存id删除的时候用
timerId.value = setInterval(async () => { timerId.value = setInterval(async () => {
const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize }); const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
tableData.value = res.data.list[0].dishes tableData.value = res.data.list[0].dishes;
}, 5000); }, 5000);
} else { } else {
ElMessage.success('停止刷新') ElMessage.success("停止刷新");
getData() getData();
} }
} };
onMounted(async () => { onMounted(async () => {
// 进入页面时先删除定时器 // 进入页面时先删除定时器
if (timerId.value !== null) { if (timerId.value !== null) {
clearInterval(timerId.value); clearInterval(timerId.value);
} }
statusMode.value = false statusMode.value = false;
// 先获取一次 // 先获取一次
getData() getData();
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -412,13 +414,13 @@ onMounted(async () => { ...@@ -412,13 +414,13 @@ onMounted(async () => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
<style> <style>
.el-input { .el-input {
--el-input-text-color: #FFFFFF; --el-input-text-color: #ffffff;
} }
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
...@@ -445,7 +447,7 @@ onMounted(async () => { ...@@ -445,7 +447,7 @@ onMounted(async () => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -455,10 +457,14 @@ onMounted(async () => { ...@@ -455,10 +457,14 @@ onMounted(async () => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.table-content {
padding: 0 10px;
}
</style> </style>
src/views/os-dataDisplay/components/esDataTab.vue
...@@ -15,9 +15,17 @@ ...@@ -15,9 +15,17 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker type="datetimerange" format="YYYY-MM-DD HH:mm:ss" v-model="searchTimeValue" <el-date-picker
start-placeholder="开始时间" style="width: 330px" end-placeholder="结束时间" type="datetimerange"
date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" /> format="YYYY-MM-DD HH:mm:ss"
v-model="searchTimeValue"
start-placeholder="开始时间"
style="width: 200px"
end-placeholder="结束时间"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -37,20 +45,28 @@ ...@@ -37,20 +45,28 @@
</div> </div>
<div class="m-t-5" /> <div class="m-t-5" />
<div> <div class="table-content">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45.5px' }" <el-table
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> :data="tableData"
style="width: 100%"
border
:row-style="{ height: '45.5px' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
v-loading="tableData.length == 0"
element-loading-background="rgba(48, 65, 86, 0.7)"
>
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="data.mission" label="目标名称" width="86" show-overflow-tooltip /> <el-table-column property="data.mission" label="目标名称" width="86" show-overflow-tooltip />
<el-table-column property="data.station" label="站点名称" width="88" show-overflow-tooltip /> <el-table-column property="data.station" label="站点名称" width="88" show-overflow-tooltip />
<el-table-column property="data.distance" label="距离" show-overflow-tooltip> <el-table-column property="data.distance" label="距离" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.data.distance === null ? '-' : scope.row.data.distance }} {{ scope.row.data.distance === null ? "-" : scope.row.data.distance }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="data.roundTripLightTime" label="往返光时" show-overflow-tooltip> <el-table-column property="data.roundTripLightTime" label="往返光时" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.data.roundTripLightTime === null ? '-' : scope.row.data.roundTripLightTime }} {{ scope.row.data.roundTripLightTime === null ? "-" : scope.row.data.roundTripLightTime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="data.boa" label="行动开始时间" show-overflow-tooltip> <el-table-column property="data.boa" label="行动开始时间" show-overflow-tooltip>
...@@ -75,7 +91,7 @@ ...@@ -75,7 +91,7 @@
</el-table-column> </el-table-column>
<el-table-column label="目标在线状态" width="110" show-overflow-tooltip> <el-table-column label="目标在线状态" width="110" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.data.target?.[scope.row.data.mission] === 'true' ? '是' : '否' }} {{ scope.row.data.target?.[scope.row.data.mission] === "true" ? "是" : "否" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" min-width="85"> <el-table-column fixed="right" label="操作" min-width="85">
...@@ -83,23 +99,26 @@ ...@@ -83,23 +99,26 @@
<el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)"> <el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)">
目标信息 目标信息
</el-button> </el-button>
<el-button link type="primary" size="small" <el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)"
@click="handleStationDetails(scope.row.data.station)">站点信息</el-button> >站点信息</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div> </div>
</div> </div>
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="155px" size="small" class="px-4"> <el-form label-width="155px" size="small" class="px-4">
<div> <div>
...@@ -238,9 +257,7 @@ ...@@ -238,9 +257,7 @@
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="stationVisibleValue" center width="880px" align-center @close="handleClose" draggable> <el-dialog v-model="stationVisibleValue" center width="880px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="196px" size="small" class="px-4"> <el-form label-width="196px" size="small" class="px-4">
<div> <div>
...@@ -428,254 +445,265 @@ ...@@ -428,254 +445,265 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import exportDialog from '@/components/Export/index.vue' import exportDialog from "@/components/Export/index.vue";
import { getESAList, getESAMissionDetail, getESAStationDetail } from '@/api/spiderData' import { getESAList, getESAMissionDetail, getESAStationDetail } from "@/api/spiderData";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
// ElConfigProvider 组件 // ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from "element-plus";
// 引入中文包 // 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'; import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: 'Pagination' }) defineOptions({ name: "Pagination" });
// 更改分页文字 // 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = '页'; zhCn.el.pagination.pageClassifier = "页";
// 查找字段 // 查找字段
const searchTargetName = ref('') const searchTargetName = ref("");
const searchTimeValue = ref('') const searchTimeValue = ref("");
const searchStation = ref('') const searchStation = ref("");
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const detailVisibleValue = ref(false) const detailVisibleValue = ref(false);
const stationVisibleValue = ref(false) const stationVisibleValue = ref(false);
// 目标详情信息 // 目标详情信息
const targetName = ref('') const targetName = ref("");
// 任务类型 // 任务类型
const targetMissionType = ref('') const targetMissionType = ref("");
// 目标运行轨道 // 目标运行轨道
const targetOrbit = ref('') const targetOrbit = ref("");
// 目标尺寸 // 目标尺寸
const targetDimension = ref('') const targetDimension = ref("");
// 目标发射质量 // 目标发射质量
const targetLaunchMass = ref('') const targetLaunchMass = ref("");
// 目标干质量 // 目标干质量
const targetDryMass = ref('') const targetDryMass = ref("");
// 近地点 // 近地点
const targetPerigee = ref('') const targetPerigee = ref("");
// 远地点 // 远地点
const targetApogee = ref('') const targetApogee = ref("");
// 目标功率 // 目标功率
const targetPower = ref('') const targetPower = ref("");
// 轨道倾角 // 轨道倾角
const targetInclination = ref('') const targetInclination = ref("");
// 轨道周期 // 轨道周期
const targetPeriod = ref('') const targetPeriod = ref("");
// 发射日期 // 发射日期
const targetLaunchDate = ref('') const targetLaunchDate = ref("");
// 发射站点 // 发射站点
const targetLaunchLocation = ref('') const targetLaunchLocation = ref("");
// 相关仪器 // 相关仪器
const targetInstruments = ref('') const targetInstruments = ref("");
// 服役日期 // 服役日期
const targetServiceDate = ref('') const targetServiceDate = ref("");
// 是否为核心任务 // 是否为核心任务
const targetIsCoreMission = ref('') const targetIsCoreMission = ref("");
// 太阳风速 // 太阳风速
const targetSolarWindSpeed = ref('') const targetSolarWindSpeed = ref("");
// 太阳通量密度 // 太阳通量密度
const targetSolarFluxDensity = ref('') const targetSolarFluxDensity = ref("");
// 是否在仪表盘中显示 // 是否在仪表盘中显示
// const targetIsShowInDashboard = ref('') // const targetIsShowInDashboard = ref('')
// 目标类型 // 目标类型
const targetType = ref('') const targetType = ref("");
// 描述 // 描述
const targetDescription = ref('') const targetDescription = ref("");
// 站点详情信息 // 站点详情信息
// 站点名称 // 站点名称
const stationName = ref('') const stationName = ref("");
// 站点所在国家 // 站点所在国家
const stationCountry = ref('') const stationCountry = ref("");
// 站点经度 // 站点经度
const stationLongitude = ref('') const stationLongitude = ref("");
// 站点纬度 // 站点纬度
const stationLatitude = ref('') const stationLatitude = ref("");
// 站点海拔高度 // 站点海拔高度
const stationAltitude = ref('') const stationAltitude = ref("");
// 站点直径 // 站点直径
const stationDiameter = ref('') const stationDiameter = ref("");
// 天线方位角速度 // 天线方位角速度
const stationAzimuthSpeed = ref('') const stationAzimuthSpeed = ref("");
// 天线俯仰角速度 // 天线俯仰角速度
const stationElevationSpeed = ref('') const stationElevationSpeed = ref("");
// 天线信号频段 // 天线信号频段
const stationBand = ref('') const stationBand = ref("");
// TMTC标准 // TMTC标准
const stationTMTC = ref('') const stationTMTC = ref("");
// 信号频率与定时 // 信号频率与定时
const stationFrequencyAndTiming = ref('') const stationFrequencyAndTiming = ref("");
// 天气 // 天气
const stationWeather = ref('') const stationWeather = ref("");
// 上行信号S频段极化 // 上行信号S频段极化
const stationUplinkSPolarization = ref('') const stationUplinkSPolarization = ref("");
// 上行信号S频段等效全向辐射功率 // 上行信号S频段等效全向辐射功率
const stationUplinkSEirp = ref('') const stationUplinkSEirp = ref("");
// 上行信号X频段极化 // 上行信号X频段极化
const stationUplinkXPolarization = ref('') const stationUplinkXPolarization = ref("");
// 上行信号X频段等效全向辐射功率 // 上行信号X频段等效全向辐射功率
const stationUplinkXEirp = ref('') const stationUplinkXEirp = ref("");
// 上行信号Ka频段极化 // 上行信号Ka频段极化
const stationUplinkKaPolarization = ref('') const stationUplinkKaPolarization = ref("");
// 上行信号Ka频段等效全向辐射功率 // 上行信号Ka频段等效全向辐射功率
const stationUplinkKaEirp = ref('') const stationUplinkKaEirp = ref("");
// 下行信号S频段极化 // 下行信号S频段极化
const stationDownlinkSPolarization = ref('') const stationDownlinkSPolarization = ref("");
// 下行信号S频段G/T比 // 下行信号S频段G/T比
const stationDownlinkSGt = ref('') const stationDownlinkSGt = ref("");
// 下行信号X频段极化 // 下行信号X频段极化
const stationDownlinkXPolarization = ref('') const stationDownlinkXPolarization = ref("");
// 下行信号X频段G/T比 // 下行信号X频段G/T比
const stationDownlinkXGt = ref('') const stationDownlinkXGt = ref("");
// 下行信号Ka频段极化 // 下行信号Ka频段极化
const stationDownlinkKaPolarization = ref('') const stationDownlinkKaPolarization = ref("");
// 下行信号Ka频段G/T比 // 下行信号Ka频段G/T比
const stationDownlinkKaGt = ref('') const stationDownlinkKaGt = ref("");
// 温度 // 温度
const stationTemperature = ref('') const stationTemperature = ref("");
// 气压 // 气压
const stationPressure = ref('') const stationPressure = ref("");
// 湿度 // 湿度
const stationHumidity = ref('') const stationHumidity = ref("");
// 站点类型 // 站点类型
const stationType = ref('') const stationType = ref("");
// 描述 // 描述
const stationDescription = ref('') const stationDescription = ref("");
// 查看esa站点详情的方法 // 查看esa站点详情的方法
const handleStationDetails = async (id: any) => { const handleStationDetails = async (id: any) => {
const res = await getESAStationDetail({ name: id }) const res = await getESAStationDetail({ name: id });
// 防止残留数据 // 防止残留数据
stationDescription.value = '' stationDescription.value = "";
// 字段赋值 // 字段赋值
stationName.value = res.data.data[0].name stationName.value = res.data.data[0].name;
stationCountry.value = res.data.data[0].country stationCountry.value = res.data.data[0].country;
stationLongitude.value = res.data.data[0].longitude stationLongitude.value = res.data.data[0].longitude;
stationLatitude.value = res.data.data[0].latitude stationLatitude.value = res.data.data[0].latitude;
stationAltitude.value = res.data.data[0].altitude stationAltitude.value = res.data.data[0].altitude;
stationDiameter.value = res.data.data[0].diameter stationDiameter.value = res.data.data[0].diameter;
stationAzimuthSpeed.value = res.data.data[0].antennaSpeedAzimuth stationAzimuthSpeed.value = res.data.data[0].antennaSpeedAzimuth;
stationElevationSpeed.value = res.data.data[0].antennaSpeedElevation stationElevationSpeed.value = res.data.data[0].antennaSpeedElevation;
stationBand.value = res.data.data[0].band stationBand.value = res.data.data[0].band;
stationTMTC.value = res.data.data[0].tmtcStandards stationTMTC.value = res.data.data[0].tmtcStandards;
stationFrequencyAndTiming.value = res.data.data[0].frequencyAndTiming stationFrequencyAndTiming.value = res.data.data[0].frequencyAndTiming;
stationWeather.value = res.data.data[0].weather === null ? '无' : res.data.data[0].weather stationWeather.value = res.data.data[0].weather === null ? "无" : res.data.data[0].weather;
stationUplinkSPolarization.value = res.data.data[0].uplinkSBandPolarization === null ? '无' : res.data.data[0].uplinkSBandPolarization stationUplinkSPolarization.value =
stationUplinkSEirp.value = res.data.data[0].uplinkSBandEirp === null ? '无' : res.data.data[0].uplinkSBandEirp res.data.data[0].uplinkSBandPolarization === null ? "无" : res.data.data[0].uplinkSBandPolarization;
stationUplinkXPolarization.value = res.data.data[0].uplinkXBandPolarization === null ? '无' : res.data.data[0].uplinkXBandPolarization stationUplinkSEirp.value = res.data.data[0].uplinkSBandEirp === null ? "无" : res.data.data[0].uplinkSBandEirp;
stationUplinkXEirp.value = res.data.data[0].uplinkXBandEirp === null ? '无' : res.data.data[0].uplinkXBandEirp stationUplinkXPolarization.value =
stationUplinkKaPolarization.value = res.data.data[0].uplinkKaBandPolarization === null ? '无' : res.data.data[0].uplinkKaBandPolarization res.data.data[0].uplinkXBandPolarization === null ? "无" : res.data.data[0].uplinkXBandPolarization;
stationUplinkKaEirp.value = res.data.data[0].uplinkKaBandEirp === null ? '无' : res.data.data[0].uplinkKaBandEirp stationUplinkXEirp.value = res.data.data[0].uplinkXBandEirp === null ? "无" : res.data.data[0].uplinkXBandEirp;
stationDownlinkSPolarization.value = res.data.data[0].downlinkSBandPolarization === null ? '无' : res.data.data[0].downlinkSBandPolarization stationUplinkKaPolarization.value =
stationDownlinkSGt.value = res.data.data[0].downlinkSBandGT === null ? '无' : res.data.data[0].downlinkSBandGT res.data.data[0].uplinkKaBandPolarization === null ? "无" : res.data.data[0].uplinkKaBandPolarization;
stationDownlinkXPolarization.value = res.data.data[0].downlinkXBandPolarization === null ? '无' : res.data.data[0].downlinkXBandPolarization stationUplinkKaEirp.value = res.data.data[0].uplinkKaBandEirp === null ? "无" : res.data.data[0].uplinkKaBandEirp;
stationDownlinkXGt.value = res.data.data[0].downlinkXBandGT === null ? '无' : res.data.data[0].downlinkXBandGT stationDownlinkSPolarization.value =
stationDownlinkKaPolarization.value = res.data.data[0].downlinkKaBandPolarization === null ? '无' : res.data.data[0].downlinkKaBandPolarization res.data.data[0].downlinkSBandPolarization === null ? "无" : res.data.data[0].downlinkSBandPolarization;
stationDownlinkKaGt.value = res.data.data[0].downlinkKaBandGT === null ? '无' : res.data.data[0].downlinkKaBandGT stationDownlinkSGt.value = res.data.data[0].downlinkSBandGT === null ? "无" : res.data.data[0].downlinkSBandGT;
stationTemperature.value = res.data.data[0].temperature stationDownlinkXPolarization.value =
stationPressure.value = res.data.data[0].airPressure res.data.data[0].downlinkXBandPolarization === null ? "无" : res.data.data[0].downlinkXBandPolarization;
stationHumidity.value = res.data.data[0].humidity stationDownlinkXGt.value = res.data.data[0].downlinkXBandGT === null ? "无" : res.data.data[0].downlinkXBandGT;
stationType.value = res.data.data[0].type stationDownlinkKaPolarization.value =
res.data.data[0].downlinkKaBandPolarization === null ? "无" : res.data.data[0].downlinkKaBandPolarization;
stationDownlinkKaGt.value = res.data.data[0].downlinkKaBandGT === null ? "无" : res.data.data[0].downlinkKaBandGT;
stationTemperature.value = res.data.data[0].temperature;
stationPressure.value = res.data.data[0].airPressure;
stationHumidity.value = res.data.data[0].humidity;
stationType.value = res.data.data[0].type;
for (let i = 0; i < res.data.data[0].description.length; i++) { for (let i = 0; i < res.data.data[0].description.length; i++) {
stationDescription.value += res.data.data[0].description[i] stationDescription.value += res.data.data[0].description[i];
} }
stationVisibleValue.value = true stationVisibleValue.value = true;
} };
const tableData = ref([]) const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 0, total: 0,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
const formatTimestamp = (timestamp: any) => { const formatTimestamp = (timestamp: any) => {
if (!timestamp || typeof timestamp !== 'number' || timestamp <= 0) { if (!timestamp || typeof timestamp !== "number" || timestamp <= 0) {
return '-'; return "-";
} }
const msTimestamp = String(timestamp).length === 10 ? timestamp * 1000 : timestamp; const msTimestamp = String(timestamp).length === 10 ? timestamp * 1000 : timestamp;
const date = new Date(msTimestamp); const date = new Date(msTimestamp);
if (isNaN(date.getTime())) { if (isNaN(date.getTime())) {
return '-'; return "-";
} }
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, '0'); const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, '0'); const minute = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, '0'); const second = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${second}`; return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}; };
// 查看esa任务详情的方法 // 查看esa任务详情的方法
const handleMissionDetails = async (id: any) => { const handleMissionDetails = async (id: any) => {
const res = await getESAMissionDetail({ name: id }) const res = await getESAMissionDetail({ name: id });
// 防止残留数据 // 防止残留数据
targetDescription.value = '' targetDescription.value = "";
// 字段赋值 // 字段赋值
targetName.value = res.data.data[0].name targetName.value = res.data.data[0].name;
targetMissionType.value = res.data.data[0].type targetMissionType.value = res.data.data[0].type;
targetOrbit.value = res.data.data[0].orbitsAround targetOrbit.value = res.data.data[0].orbitsAround;
targetDimension.value = res.data.data[0].dimensions targetDimension.value = res.data.data[0].dimensions;
targetLaunchMass.value = res.data.data[0].launchMass targetLaunchMass.value = res.data.data[0].launchMass;
targetDryMass.value = res.data.data[0].dryMass targetDryMass.value = res.data.data[0].dryMass;
targetPerigee.value = res.data.data[0].perigee targetPerigee.value = res.data.data[0].perigee;
targetApogee.value = res.data.data[0].apogee targetApogee.value = res.data.data[0].apogee;
targetPower.value = res.data.data[0].power targetPower.value = res.data.data[0].power;
targetInclination.value = res.data.data[0].inclination targetInclination.value = res.data.data[0].inclination;
targetLaunchDate.value = formatTimestamp(res.data.data[0].launchDate) targetLaunchDate.value = formatTimestamp(res.data.data[0].launchDate);
targetLaunchLocation.value = res.data.data[0].launchSite targetLaunchLocation.value = res.data.data[0].launchSite;
targetPeriod.value = res.data.data[0].period targetPeriod.value = res.data.data[0].period;
targetInstruments.value = res.data.data[0].instruments targetInstruments.value = res.data.data[0].instruments;
targetServiceDate.value = formatTimestamp(res.data.data[0].enteredService) targetServiceDate.value = formatTimestamp(res.data.data[0].enteredService);
targetIsCoreMission.value = res.data.data[0].coreMission targetIsCoreMission.value = res.data.data[0].coreMission;
targetSolarWindSpeed.value = res.data.data[0].solarWindSpeed targetSolarWindSpeed.value = res.data.data[0].solarWindSpeed;
targetSolarFluxDensity.value = res.data.data[0].solarFluxDensity targetSolarFluxDensity.value = res.data.data[0].solarFluxDensity;
for (let i = 0; i < res.data.data[0].description.length; i++) { for (let i = 0; i < res.data.data[0].description.length; i++) {
targetDescription.value += res.data.data[0].description[i] targetDescription.value += res.data.data[0].description[i];
} }
detailVisibleValue.value = true detailVisibleValue.value = true;
} };
// 获取esa数据列表的方法 // 获取esa数据列表的方法
const getData = async () => { const getData = async () => {
searchStation.value = '' searchStation.value = "";
searchTargetName.value = '' searchTargetName.value = "";
searchTimeValue.value = '' searchTimeValue.value = "";
const res = await getESAList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getESAList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
pageObj.value.total = res.data.total pageObj.value.total = res.data.total;
tableData.value = res.data.list tableData.value = res.data.list;
} };
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false;
} };
const handleSearch = async () => { const handleSearch = async () => {
if (searchTargetName.value === '' && searchStation.value === '' && searchTimeValue.value === '') { if (searchTargetName.value === "" && searchStation.value === "" && searchTimeValue.value === "") {
ElMessage.warning('请输入搜索内容') ElMessage.warning("请输入搜索内容");
return return;
} }
const res = await getESAList({ spacecraft: searchTargetName.value, station: searchStation.value, times: searchTimeValue.value, page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getESAList({
pageObj.value.total = res.data.total spacecraft: searchTargetName.value,
tableData.value = res.data.list station: searchStation.value,
} times: searchTimeValue.value,
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
};
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
font-size: 180px; font-size: 180px;
} }
...@@ -702,13 +730,13 @@ onMounted(() => { ...@@ -702,13 +730,13 @@ onMounted(() => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
<style> <style>
.el-input { .el-input {
--el-input-text-color: #FFFFFF; --el-input-text-color: #ffffff;
} }
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
...@@ -735,7 +763,7 @@ onMounted(() => { ...@@ -735,7 +763,7 @@ onMounted(() => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -745,10 +773,14 @@ onMounted(() => { ...@@ -745,10 +773,14 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.table-content {
padding: 0 10px;
}
</style> </style>
src/views/os-dataDisplay/components/ituDataTab.vue
...@@ -15,9 +15,17 @@ ...@@ -15,9 +15,17 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker type="datetimerange" format="YYYY-MM-DD HH:mm:ss" v-model="searchTimeValue" <el-date-picker
start-placeholder="开始时间" style="width: 330px" end-placeholder="结束时间" type="datetimerange"
date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" /> format="YYYY-MM-DD HH:mm:ss"
v-model="searchTimeValue"
start-placeholder="开始时间"
style="width: 200px"
end-placeholder="结束时间"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -27,19 +35,25 @@ ...@@ -27,19 +35,25 @@
<el-input placeholder="请输入" v-model="searchTargetId" style="width: 170.5px" /> <el-input placeholder="请输入" v-model="searchTargetId" style="width: 170.5px" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space>
<el-button type="primary" @click="handleSearch">查询</el-button> <el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button type="primary" @click="getData">重置表格</el-button>
</el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="m-t-5" /> <div class="m-t-5" />
<div> <div class="itu-table">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }" <el-table
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> :data="tableData"
style="width: 100%"
border
:row-style="{ height: '45px' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
v-loading="tableData.length == 0"
element-loading-background="rgba(48, 65, 86, 0.7)"
>
<!-- <el-table-column type="selection" width="40" /> --> <!-- <el-table-column type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="item.ntc_id" label="SNS Notice ID" show-overflow-tooltip /> <el-table-column property="item.ntc_id" label="SNS Notice ID" show-overflow-tooltip />
...@@ -48,12 +62,12 @@ ...@@ -48,12 +62,12 @@
<el-table-column property="item.plan_txt" label="计划/非计划类型" show-overflow-tooltip /> <el-table-column property="item.plan_txt" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="identity.ntc_type" label="是否为同步" show-overflow-tooltip> <el-table-column property="identity.ntc_type" label="是否为同步" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.identity.ntc_type === 'G' ? '是' : '否' }} {{ scope.row.identity.ntc_type === "G" ? "是" : "否" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="identity.long_nom" label="同步位置" show-overflow-tooltip> <el-table-column property="identity.long_nom" label="同步位置" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.identity.long_nom === null ? '-' : scope.row.identity.long_nom }} {{ scope.row.identity.long_nom === null ? "-" : scope.row.identity.long_nom }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column property="item.minPerigee" label="近地点" show-overflow-tooltip> <!-- <el-table-column property="item.minPerigee" label="近地点" show-overflow-tooltip>
...@@ -78,116 +92,115 @@ ...@@ -78,116 +92,115 @@
</el-table-column> --> </el-table-column> -->
<el-table-column property="item.freq_min" label="最低频率" show-overflow-tooltip> <el-table-column property="item.freq_min" label="最低频率" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.item.freq_min === null ? '-' : scope.row.item.freq_min }} {{ scope.row.item.freq_min === null ? "-" : scope.row.item.freq_min }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="item.freq_max" label="最高频率" show-overflow-tooltip> <el-table-column property="item.freq_max" label="最高频率" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.item.freq_max === null ? '-' : scope.row.item.freq_max }} {{ scope.row.item.freq_max === null ? "-" : scope.row.item.freq_max }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="regulatory_status.active_status" label="状态" show-overflow-tooltip /> <el-table-column property="regulatory_status.active_status" label="状态" show-overflow-tooltip />
<el-table-column property="regulatory_status.prd_valid" label="有效期" show-overflow-tooltip /> <el-table-column property="regulatory_status.prd_valid" label="有效期" show-overflow-tooltip />
<el-table-column property="regulatory_status.d_reg_limit" label="最早使用日期" show-overflow-tooltip> <el-table-column property="regulatory_status.d_reg_limit" label="最早使用日期" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.regulatory_status.d_reg_limit === null ? '-' : scope.row.regulatory_status.d_reg_limit {{ scope.row.regulatory_status.d_reg_limit === null ? "-" : scope.row.regulatory_status.d_reg_limit }}
}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="regulatory_status.f_biu_grps" label="是否确认使用" show-overflow-tooltip /> <el-table-column property="regulatory_status.f_biu_grps" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="regulatory_status.resumption_list" label="是否暂停使用" show-overflow-tooltip /> <el-table-column property="regulatory_status.resumption_list" label="是否暂停使用" show-overflow-tooltip />
<el-table-column label="操作" width="60"> <el-table-column label="操作" width="60">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
详情
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div> </div>
</div> </div>
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="155px" size="small" class="px-4"> <el-form label-width="155px" size="small" class="px-4">
<div> <div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="SNS Notice ID:" label-position="left"> <el-form-item label="SNS Notice ID:" label-position="left">
<el-input v-model="snsId" /> <el-input disabled v-model="snsId" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="主管部门:" label-position="left"> <el-form-item label="主管部门:" label-position="left">
<el-input v-model="department" /> <el-input disabled v-model="department" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="目标名称:" label-position="left"> <el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" /> <el-input disabled v-model="targetName" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="计划/非计划类型:" label-position="left"> <el-form-item label="计划/非计划类型:" label-position="left">
<el-input v-model="planType" /> <el-input disabled v-model="planType" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否为同步:" label-position="left"> <el-form-item label="是否为同步:" label-position="left">
<el-input v-model="syncType" /> <el-input disabled v-model="syncType" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="同步位置:" label-position="left"> <el-form-item label="同步位置:" label-position="left">
<el-input v-model="syncPosition" /> <el-input disabled v-model="syncPosition" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="近地点:" label-position="left"> <el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" /> <el-input disabled v-model="perigee" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="远地点:" label-position="left"> <el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" /> <el-input disabled v-model="apogee" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最低海拔:" label-position="left"> <el-form-item label="最低海拔:" label-position="left">
<el-input v-model="lowestAltitude" /> <el-input disabled v-model="lowestAltitude" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="参考主体:" label-position="left"> <el-form-item label="参考主体:" label-position="left">
<el-input v-model="referenceSubject" /> <el-input disabled v-model="referenceSubject" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最低频率:" label-position="left"> <el-form-item label="最低频率:" label-position="left">
<el-input v-model="lowestFrequency" /> <el-input disabled v-model="lowestFrequency" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最高频率:" label-position="left"> <el-form-item label="最高频率:" label-position="left">
<el-input v-model="highestFrequency" /> <el-input disabled v-model="highestFrequency" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -199,55 +212,55 @@ ...@@ -199,55 +212,55 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="有效期:" label-position="left"> <el-form-item label="有效期:" label-position="left">
<el-input v-model="validityPeriod" /> <el-input disabled v-model="validityPeriod" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最早使用日期:" label-position="left"> <el-form-item label="最早使用日期:" label-position="left">
<el-input v-model="earliestUsageDate" /> <el-input disabled v-model="earliestUsageDate" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否确认使用:" label-position="left"> <el-form-item label="是否确认使用:" label-position="left">
<el-input v-model="isUsed" /> <el-input disabled v-model="isUsed" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left"> <el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isPauseUsed" /> <el-input disabled v-model="isPauseUsed" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="记录时间:" label-position="left"> <el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" /> <el-input disabled v-model="recordTime" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否纳入国际频率总表:" label-position="left"> <el-form-item label="是否纳入国际频率总表:" label-position="left">
<el-input v-model="IsInTheInternationalFrequencyList" /> <el-input disabled v-model="IsInTheInternationalFrequencyList" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最早监管日期:" label-position="left"> <el-form-item label="最早监管日期:" label-position="left">
<el-input v-model="earliestRegulatoryDate" /> <el-input disabled v-model="earliestRegulatoryDate" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否恢复使用:" label-position="left"> <el-form-item label="是否恢复使用:" label-position="left">
<el-input v-model="isRestoreUsed" /> <el-input disabled v-model="isRestoreUsed" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left"> <el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left">
<el-input v-model="BFIFICdate" /> <el-input disabled v-model="BFIFICdate" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -266,138 +279,144 @@ ...@@ -266,138 +279,144 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import exportDialog from '@/components/Export/index.vue' import exportDialog from "@/components/Export/index.vue";
import { getItuList, getItuDetail, deleteItuData } from '@/api/spiderData' import { getItuList, getItuDetail, deleteItuData } from "@/api/spiderData";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
// ElConfigProvider 组件 // ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from "element-plus";
// 引入中文包 // 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'; import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: 'Pagination' }) defineOptions({ name: "Pagination" });
// 更改分页文字 // 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = '页'; zhCn.el.pagination.pageClassifier = "页";
const searchTargetName = ref('') const searchTargetName = ref("");
const searchTimeValue = ref('') const searchTimeValue = ref("");
const searchTargetId = ref('') const searchTargetId = ref("");
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const detailVisibleValue = ref(false) const detailVisibleValue = ref(false);
// SNS Notice ID // SNS Notice ID
const snsId = ref('') const snsId = ref("");
// 主管部门 // 主管部门
const department = ref('') const department = ref("");
// 目标名称 // 目标名称
const targetName = ref('') const targetName = ref("");
// 计划/非计划类型 // 计划/非计划类型
const planType = ref('') const planType = ref("");
// 是否为同步 // 是否为同步
const syncType = ref('') const syncType = ref("");
// 同步位置 // 同步位置
const syncPosition = ref('') const syncPosition = ref("");
// 近地点 // 近地点
const perigee = ref('') const perigee = ref("");
// 远地点 // 远地点
const apogee = ref('') const apogee = ref("");
// 最低海拔 // 最低海拔
const lowestAltitude = ref('') const lowestAltitude = ref("");
// 参考主体 // 参考主体
const referenceSubject = ref('') const referenceSubject = ref("");
// 最低频率 // 最低频率
const lowestFrequency = ref('') const lowestFrequency = ref("");
// 最高频率 // 最高频率
const highestFrequency = ref('') const highestFrequency = ref("");
// 状态 // 状态
const status = ref('') const status = ref("");
// 有效期 // 有效期
const validityPeriod = ref('') const validityPeriod = ref("");
// 最早使用日期 // 最早使用日期
const earliestUsageDate = ref('') const earliestUsageDate = ref("");
// 是否确认使用 // 是否确认使用
const isUsed = ref('') const isUsed = ref("");
// 是否暂停使用 // 是否暂停使用
const isPauseUsed = ref('') const isPauseUsed = ref("");
// 记录时间 // 记录时间
const recordTime = ref('') const recordTime = ref("");
// 是否纳入国际频率总表 // 是否纳入国际频率总表
const IsInTheInternationalFrequencyList = ref('') const IsInTheInternationalFrequencyList = ref("");
// 最早监管日期 // 最早监管日期
const earliestRegulatoryDate = ref('') const earliestRegulatoryDate = ref("");
// 是否恢复使用 // 是否恢复使用
const isRestoreUsed = ref('') const isRestoreUsed = ref("");
// 有效期卫星网络旧名称 // 有效期卫星网络旧名称
const validityPeriodSatelliteNetworkOldName = ref('') const validityPeriodSatelliteNetworkOldName = ref("");
// 最新相关 BR IFIC 发布日期 // 最新相关 BR IFIC 发布日期
const BFIFICdate = ref('') const BFIFICdate = ref("");
const tableData = ref([]) const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 0, total: 0,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
// 查看数据详情的方法 // 查看数据详情的方法
const handleDetails = async (id: any) => { const handleDetails = async (id: any) => {
const res = await getItuDetail({ id: id._id }) const res = await getItuDetail({ id: id._id });
console.log(res); console.log(res);
snsId.value = res.data.item.ntc_id snsId.value = res.data.item.ntc_id;
department.value = res.data.item.adm department.value = res.data.item.adm;
targetName.value = res.data.identity.sat_name targetName.value = res.data.identity.sat_name;
planType.value = res.data.identity.plan_type planType.value = res.data.identity.plan_type;
syncType.value = res.data.identity.ntc_type syncType.value = res.data.identity.ntc_type;
syncPosition.value = res.data.identity.long_nom === null ? '无' : res.data.identity.long_nom syncPosition.value = res.data.identity.long_nom === null ? "无" : res.data.identity.long_nom;
perigee.value = res.data.item.minPerigee === null ? '无' : res.data.item.minPerigee perigee.value = res.data.item.minPerigee === null ? "无" : res.data.item.minPerigee;
apogee.value = res.data.item.maxApog === null ? '无' : res.data.item.maxApog apogee.value = res.data.item.maxApog === null ? "无" : res.data.item.maxApog;
lowestAltitude.value = res.data.item.minAltitude === null ? '无' : res.data.item.minAltitude lowestAltitude.value = res.data.item.minAltitude === null ? "无" : res.data.item.minAltitude;
referenceSubject.value = res.data.item.ref_body === null ? '无' : res.data.item.ref_body referenceSubject.value = res.data.item.ref_body === null ? "无" : res.data.item.ref_body;
lowestFrequency.value = res.data.item.freq_min === null ? '无' : res.data.item.freq_min lowestFrequency.value = res.data.item.freq_min === null ? "无" : res.data.item.freq_min;
highestFrequency.value = res.data.item.freq_max === null ? '无' : res.data.item.freq_max highestFrequency.value = res.data.item.freq_max === null ? "无" : res.data.item.freq_max;
status.value = res.data.regulatory_status.active_status status.value = res.data.regulatory_status.active_status;
validityPeriod.value = res.data.regulatory_status.prd_valid validityPeriod.value = res.data.regulatory_status.prd_valid;
earliestUsageDate.value = res.data.regulatory_status.d_reg_limit === null ? '无' : res.data.regulatory_status.d_reg_limit earliestUsageDate.value =
isUsed.value = res.data.regulatory_status.f_biu_grps res.data.regulatory_status.d_reg_limit === null ? "无" : res.data.regulatory_status.d_reg_limit;
isPauseUsed.value = res.data.regulatory_status.resumption_list isUsed.value = res.data.regulatory_status.f_biu_grps;
recordTime.value = res.data.crawl_time isPauseUsed.value = res.data.regulatory_status.resumption_list;
IsInTheInternationalFrequencyList.value = res.data.regulatory_status.mifr recordTime.value = res.data.crawl_time;
earliestRegulatoryDate.value = res.data.regulatory_status.d_inuse_list IsInTheInternationalFrequencyList.value = res.data.regulatory_status.mifr;
isRestoreUsed.value = res.data.regulatory_status.resumption_list earliestRegulatoryDate.value = res.data.regulatory_status.d_inuse_list;
validityPeriodSatelliteNetworkOldName.value = res.data.regulatory_status.old_satellite_network_name isRestoreUsed.value = res.data.regulatory_status.resumption_list;
BFIFICdate.value = res.data.regulatory_status.d_wic === null ? '无' : res.data.regulatory_status.d_wic validityPeriodSatelliteNetworkOldName.value = res.data.regulatory_status.old_satellite_network_name;
detailVisibleValue.value = true BFIFICdate.value = res.data.regulatory_status.d_wic === null ? "无" : res.data.regulatory_status.d_wic;
detailVisibleValue.value = true;
} };
// 获取itu数据列表的方法 // 获取itu数据列表的方法
const getData = async () => { const getData = async () => {
const res = await getItuList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getItuList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
searchTargetName.value = '' searchTargetName.value = "";
searchTargetId.value = '' searchTargetId.value = "";
searchTimeValue.value = '' searchTimeValue.value = "";
pageObj.value.total = res.data.total pageObj.value.total = res.data.total;
tableData.value = res.data.list tableData.value = res.data.list;
} console.log(res.data.list);
};
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false;
} };
const handleSearch = async () => { const handleSearch = async () => {
if (searchTargetName.value === '' && searchTargetId.value === '' && searchTimeValue.value === '') { if (searchTargetName.value === "" && searchTargetId.value === "" && searchTimeValue.value === "") {
ElMessage.warning('请输入搜索内容') ElMessage.warning("请输入搜索内容");
return return;
} }
const res = await getItuList({ sat_name: searchTargetName.value, ntc_id: searchTargetId.value, times: searchTimeValue.value, page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getItuList({
pageObj.value.total = res.data.total sat_name: searchTargetName.value,
tableData.value = res.data.list ntc_id: searchTargetId.value,
} times: searchTimeValue.value,
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
};
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
// background-image: url("@/assets/picture/dialog1.png"); // background-image: url("@/assets/picture/dialog1.png");
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
...@@ -417,6 +436,10 @@ onMounted(() => { ...@@ -417,6 +436,10 @@ onMounted(() => {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.itu-table {
padding: 0 10px;
}
/* 表格样式 */ /* 表格样式 */
.formStyle { .formStyle {
display: flex; display: flex;
...@@ -427,13 +450,13 @@ onMounted(() => { ...@@ -427,13 +450,13 @@ onMounted(() => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
<style> <style>
.el-input { .el-input {
--el-input-text-color: #FFFFFF; --el-input-text-color: #ffffff;
} }
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
...@@ -460,7 +483,7 @@ onMounted(() => { ...@@ -460,7 +483,7 @@ onMounted(() => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -470,7 +493,7 @@ onMounted(() => { ...@@ -470,7 +493,7 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
.el-button:focus { .el-button:focus {
......
src/views/os-dataDisplay/components/stDataTab.vue
...@@ -15,9 +15,17 @@ ...@@ -15,9 +15,17 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" v-model="timeValue"
time-format="A hh:mm:ss" style="width: 330px" value-format="YYYY-MM-DD HH:mm:ss" /> 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"
style="width: 200px"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -42,9 +50,15 @@ ...@@ -42,9 +50,15 @@
</div> </div>
<div class="m-t-5" /> <div class="m-t-5" />
<div> <div class="table-content">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45.5px' }" <el-table
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> :data="tableData"
style="width: 100%"
border
:row-style="{ height: '45.5px' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<!-- <el-table-column type="selection" width="40" /> --> <!-- <el-table-column type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="data[0].NORAD_CAT_ID" label="Norad Cat ID" show-overflow-tooltip /> <el-table-column property="data[0].NORAD_CAT_ID" label="Norad Cat ID" show-overflow-tooltip />
...@@ -65,24 +79,24 @@ ...@@ -65,24 +79,24 @@
<el-table-column property="data[0].TLE_LINE2" label="TLE_LINE2" show-overflow-tooltip /> <el-table-column property="data[0].TLE_LINE2" label="TLE_LINE2" show-overflow-tooltip />
<el-table-column label="操作" width="60"> <el-table-column label="操作" width="60">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
详情
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div> </div>
</div> </div>
<div class="detailForm"> <div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header> <template #header>
<div class="text-center font-size-8"> <div class="text-center font-size-8">详情</div>
详情
</div>
</template> </template>
<el-form label-width="70px" size="small" class="px-4"> <el-form label-width="70px" size="small" class="px-4">
<div> <div>
...@@ -173,102 +187,108 @@ ...@@ -173,102 +187,108 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import exportDialog from '@/components/Export/index.vue' import exportDialog from "@/components/Export/index.vue";
import { getStList, getStDetail, deleteStData } from '@/api/spiderData' import { getStList, getStDetail, deleteStData } from "@/api/spiderData";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
// ElConfigProvider 组件 // ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from "element-plus";
// 引入中文包 // 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'; import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: 'Pagination' }) defineOptions({ name: "Pagination" });
// 更改分页文字 // 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = '页'; zhCn.el.pagination.pageClassifier = "页";
const searchTargetName = ref('') const searchTargetName = ref("");
const noradCatId = ref('') const noradCatId = ref("");
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const timeValue = ref('') const timeValue = ref("");
const detailVisibleValue = ref(false) const detailVisibleValue = ref(false);
// NoradCatID // NoradCatID
const NoradCatID = ref('') const NoradCatID = ref("");
// 目标名称 // 目标名称
const targetName = ref('') const targetName = ref("");
// INTLDES // INTLDES
const intleds = ref('') const intleds = ref("");
// 类型 // 类型
const type = ref('') const type = ref("");
// 记录时间 // 记录时间
const recordTime = ref('') const recordTime = ref("");
// 所属国家 // 所属国家
const belongCountry = ref('') const belongCountry = ref("");
// 近地点 // 近地点
const perigee = ref('') const perigee = ref("");
// 远地点 // 远地点
const apogee = ref('') const apogee = ref("");
// 周期 // 周期
const period = ref('') const period = ref("");
// INCL // INCL
const incl = ref('') const incl = ref("");
// RCS // RCS
const rcs = ref('') const rcs = ref("");
// SITE // SITE
const site = ref('') const site = ref("");
// TLE // TLE
const tle = ref('') const tle = ref("");
const tableData = ref([]) const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
// 查看数据详情的方法 // 查看数据详情的方法
const handleDetails = async (row: any) => { const handleDetails = async (row: any) => {
const res = await getStDetail({ id: row._id }) const res = await getStDetail({ id: row._id });
NoradCatID.value = res.data.data[0].NORAD_CAT_ID NoradCatID.value = res.data.data[0].NORAD_CAT_ID;
targetName.value = res.data.data[0].OBJECT_NAME targetName.value = res.data.data[0].OBJECT_NAME;
type.value = res.data.data[0].OBJECT_TYPE type.value = res.data.data[0].OBJECT_TYPE;
period.value = res.data.data[0].PERIOD period.value = res.data.data[0].PERIOD;
intleds.value = res.data.data[0].INTLDES intleds.value = res.data.data[0].INTLDES;
recordTime.value = res.data.data[0].CREATION_DATE recordTime.value = res.data.data[0].CREATION_DATE;
belongCountry.value = res.data.data[0].COUNTRY_CODE belongCountry.value = res.data.data[0].COUNTRY_CODE;
perigee.value = res.data.data[0].PERIAPSIS perigee.value = res.data.data[0].PERIAPSIS;
apogee.value = res.data.data[0].APOAPSIS apogee.value = res.data.data[0].APOAPSIS;
rcs.value = res.data.data[0].RCS_SIZE rcs.value = res.data.data[0].RCS_SIZE;
site.value = res.data.data[0].SITE site.value = res.data.data[0].SITE;
tle.value = `${res.data.data[0].TLE_LINE0} tle.value = `${res.data.data[0].TLE_LINE0}
${res.data.data[0].TLE_LINE1} ${res.data.data[0].TLE_LINE1}
${res.data.data[0].TLE_LINE2}` ${res.data.data[0].TLE_LINE2}`;
detailVisibleValue.value = true detailVisibleValue.value = true;
} };
// 获取st数据列表的方法 // 获取st数据列表的方法
const getData = async () => { const getData = async () => {
const res = await getStList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getStList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
pageObj.value.total = res.data.total pageObj.value.total = res.data.total;
tableData.value = res.data.list tableData.value = res.data.list;
noradCatId.value = '' noradCatId.value = "";
searchTargetName.value = '' searchTargetName.value = "";
timeValue.value = '' timeValue.value = "";
} };
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false;
} };
const handleSearch = async () => { const handleSearch = async () => {
if (searchTargetName.value === '' && noradCatId.value === '' && timeValue.value === '') { if (searchTargetName.value === "" && noradCatId.value === "" && timeValue.value === "") {
ElMessage.warning('请输入搜索内容') ElMessage.warning("请输入搜索内容");
return return;
} }
const res = await getStList({ norad_cat_id: noradCatId.value, object_name: searchTargetName.value, times: timeValue.value, page: pageObj.value.pageNo, size: pageObj.value.pageSize }) const res = await getStList({
tableData.value = res.data.list norad_cat_id: noradCatId.value,
pageObj.value.total = res.data.total object_name: searchTargetName.value,
} times: timeValue.value,
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
});
tableData.value = res.data.list;
pageObj.value.total = res.data.total;
};
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -300,17 +320,17 @@ onMounted(() => { ...@@ -300,17 +320,17 @@ onMounted(() => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
<style> <style>
.el-textarea__inner { .el-textarea__inner {
color: #FFFFFF; color: #ffffff;
} }
.el-input { .el-input {
--el-input-text-color: #FFFFFF; --el-input-text-color: #ffffff;
} }
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
...@@ -332,12 +352,12 @@ onMounted(() => { ...@@ -332,12 +352,12 @@ onMounted(() => {
/* 修改el下拉框的背景颜色 */ /* 修改el下拉框的背景颜色 */
.el-select-dropdown { .el-select-dropdown {
background-color: #1d5484; background-color: #1d252c;
} }
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -347,10 +367,14 @@ onMounted(() => { ...@@ -347,10 +367,14 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.table-contet {
padding: 0 10px;
}
</style> </style>
src/views/os-dataDisplay/index.vue
<template> <template>
<div> <div>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" /> <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="text-left p-4 "> <div class="segment-content">
<div class="custom-style flex gap-4"> <div class="custom-style flex gap-4">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" /> <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
<el-button type="primary" @click="handleExport">导出</el-button> <el-button type="primary" @click="handleExport">导出</el-button>
...@@ -11,71 +11,65 @@ ...@@ -11,71 +11,65 @@
<!-- <allDataTab v-if="mode === '综合数据'"> <!-- <allDataTab v-if="mode === '综合数据'">
</allDataTab> --> </allDataTab> -->
<!-- DSN数据页面组件 --> <!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'"> <dsnDataTab v-if="mode === 'DSN数据'"> </dsnDataTab>
</dsnDataTab>
<!-- ITU数据页面组件 --> <!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'"> <ituDataTab v-if="mode === 'ITU数据'"> </ituDataTab>
</ituDataTab>
<!-- ST数据页面组件 --> <!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'"> <stDataTab v-if="mode === 'ST数据'"> </stDataTab>
</stDataTab>
<!-- ESA数据页面组件 --> <!-- ESA数据页面组件 -->
<esDataTab v-if="mode === 'ESA数据'"> <esDataTab v-if="mode === 'ESA数据'"> </esDataTab>
</esDataTab>
</div> </div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" /> <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import allDataTab from './components/allDataTab.vue' import allDataTab from "./components/allDataTab.vue";
import ituDataTab from './components/ituDataTab.vue' import ituDataTab from "./components/ituDataTab.vue";
import stDataTab from './components/stDataTab.vue' import stDataTab from "./components/stDataTab.vue";
import dsnDataTab from './components/dsnData/dsnTab.vue' import dsnDataTab from "./components/dsnData/dsnTab.vue";
import esDataTab from './components/esDataTab.vue' import esDataTab from "./components/esDataTab.vue";
import exportDialog from '@/components/Export/index.vue' import exportDialog from "@/components/Export/index.vue";
import { genFileId } from 'element-plus' import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus' import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
const mode = ref('DSN数据') const mode = ref("DSN数据");
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const sizeOptions = ['DSN数据', 'ITU数据', 'ST数据', 'ESA数据'] const sizeOptions = ["DSN数据", "ITU数据", "ST数据", "ESA数据"];
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const modeValue = ref<any>('数据展示') const modeValue = ref<any>("数据展示");
const upload = ref<UploadInstance>() const upload = ref<UploadInstance>();
const handleExceed: UploadProps['onExceed'] = (files) => { const handleExceed: UploadProps["onExceed"] = (files) => {
upload.value!.clearFiles() upload.value!.clearFiles();
const file = files[0] as UploadRawFile const file = files[0] as UploadRawFile;
file.uid = genFileId() file.uid = genFileId();
upload.value!.handleStart(file) upload.value!.handleStart(file);
} };
const submitUpload = () => { const submitUpload = () => {
upload.value!.submit() upload.value!.submit();
} };
const goToStatus = () => { const goToStatus = () => {
router.push({ router.push({
path: '/osStatus/list', path: "/osStatus/list",
}) });
} };
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true;
} };
const handleExportConfirm = () => { const handleExportConfirm = () => {};
}
onMounted(() => { onMounted(() => {
if (route.query.mode) { if (route.query.mode) {
modeValue.value = route.query.mode modeValue.value = route.query.mode;
mode.value = modeValue.value mode.value = modeValue.value;
} }
console.log(mode.value) console.log(mode.value);
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -85,7 +79,7 @@ onMounted(() => { ...@@ -85,7 +79,7 @@ onMounted(() => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
.backStyle { .backStyle {
...@@ -97,4 +91,8 @@ onMounted(() => { ...@@ -97,4 +91,8 @@ onMounted(() => {
display: flex; display: flex;
margin-left: 0.8%; margin-left: 0.8%;
} }
.segment-content {
padding: 10px 10px 0 10px;
}
</style> </style>
src/views/os-spiderManager/index.vue
<template> <template>
<div> <div>
<div class="mt-20" /> <el-card>
<div> <div class="title">爬虫管理</div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" <div class="low-titme">Spider Manager</div>
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }"> <el-divider class="divider" />
</el-card>
<div class="table-content">
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
:row-style="{ height: '60px' }"
>
<!-- <el-table-column type="selection" width="40" height="40" /> --> <!-- <el-table-column type="selection" width="40" height="40" /> -->
<el-table-column property="number" label="序号" type="index" width="80" /> <el-table-column property="number" label="序号" type="index" width="80" />
<el-table-column property="spider" label="爬虫名称" show-overflow-tooltip /> <el-table-column property="spider" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务"> <el-table-column label="查看任务">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)"> <el-button type="primary" plain @click="handleDetails(scope.row)"> 任务 </el-button>
任务
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { getSpiderList } from '@/api/system.ts' import { getSpiderList } from "@/api/system.ts";
const router = useRouter() const router = useRouter();
const tableData = ref([]) const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
// console.log(row); // console.log(row);
router.push({ router.push({
path: '/osTaskInformation/list', path: "/osTaskInformation/list",
query: { query: {
jump: 'yes', jump: "yes",
spiderType: row.spider, spiderType: row.spider,
page:'spiderManager' page: "spiderManager",
} },
}) });
} };
// 获取爬虫数据的方法 // 获取爬虫数据的方法
const getData = async () => { const getData = async () => {
const res = await getSpiderList({scrapydServerId:'1',project:'spiders'}) const res = await getSpiderList({ scrapydServerId: "1", project: "spiders" });
tableData.value = res.data tableData.value = res.data;
} };
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style scoped> <style scoped>
...@@ -62,4 +74,24 @@ onMounted(() => { ...@@ -62,4 +74,24 @@ onMounted(() => {
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.table-content {
padding: 10px;
}
.title {
text-align: left;
font-size: 18px;
font-weight: 500;
color: white;
}
.low-titme {
color: #ccc;
text-align: left;
margin-left: 20px;
}
.divider {
margin-top: 15px;
}
</style> </style>
src/views/os-status/components/dataCard.vue
...@@ -6,13 +6,20 @@ ...@@ -6,13 +6,20 @@
<span>数据统计</span> <span>数据统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>总数据量: {{ totalDataNumber }}</span> <span>总数据量:</span>
<span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }}</span> <span>采集的页面数量:</span>
<span class="total-num">
{{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }}</span> <span>采集的目标数量:</span>
<span class="total-num">
{{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToTaskRecordPage"> <div class="dataCard" @click="goToTaskRecordPage">
...@@ -20,13 +27,16 @@ ...@@ -20,13 +27,16 @@
<span>任务执行统计</span> <span>任务执行统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ successTask }}</span> <span>任务执行成功统计:</span>
<span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行失败统计: {{ failTask }}</span> <span>任务执行失败统计:</span>
<span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }}</span> <span>任务异常数统计:</span>
<span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
</div> </div>
</div> </div>
<div class="dataCard"> <div class="dataCard">
...@@ -34,74 +44,77 @@ ...@@ -34,74 +44,77 @@
<span>性能统计</span> <span>性能统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均成功率: {{ speed }}</span> <span>平均成功率:</span>
<span class="total-num"> {{ speed !== "" ? speed : "加载中..." }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均错误率: {{ errorRate }}</span> <span>平均错误率: </span>
<span class="total-num">{{ errorRate !== "" ? errorRate : "加载中..." }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均异常率: {{ unusualRate }}</span> <span>平均异常率:</span>
<span class="total-num">{{ unusualRate !== "" ? unusualRate : "加载中..." }}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from '@/api/staticData'; import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
import { onMounted, ref } from 'vue'; import { onMounted, ref, watch } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
const router = useRouter() const router = useRouter();
const totalDataNumber = ref('') const totalDataNumber = ref("");
const totalPageNumber = ref('') const totalPageNumber = ref("");
const totalTargetNumber = ref('') const totalTargetNumber = ref("");
const successTask = ref('') const successTask = ref("");
const failTask = ref('') const failTask = ref("");
const unusualTask = ref('') const unusualTask = ref("");
const speed = ref('') const speed = ref("");
const errorRate = ref('') const errorRate = ref("");
const unusualRate = ref('') const unusualRate = ref("");
const goToAllDataPage = () => { const goToAllDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: "/osDataDisplay/list",
query: { query: {
jump: 'yes', jump: "yes",
mode: 'DSN数据' mode: "DSN数据",
} },
}) });
} };
const goToTaskRecordPage = () => { const goToTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: "/osTaskRecord/list",
query: { query: {
jump: 'yes', jump: "yes",
mode: '状态监控' mode: "状态监控",
} },
}) });
} };
// 获取数据统计数据的方法 // 获取数据统计数据的方法
const getData = async () => { const getData = async () => {
const staticData = await getStatsDataList({}) const staticData = await getStatsDataList({});
const spiderTask = await getSpiderTaskList({}) const spiderTask = await getSpiderTaskList({});
const performance = await getPerformanceList({}) const performance = await getPerformanceList({});
totalDataNumber.value = staticData.data.totalData totalDataNumber.value = staticData.data.totalData;
totalPageNumber.value = staticData.data.ituPage totalPageNumber.value = staticData.data.ituPage;
totalTargetNumber.value = staticData.data.spaceTrackItemCount totalTargetNumber.value = staticData.data.spaceTrackItemCount;
successTask.value = spiderTask.data.successCount successTask.value = spiderTask.data.successCount;
failTask.value = spiderTask.data.failCount failTask.value = spiderTask.data.failCount;
unusualTask.value = spiderTask.data.exceptionCount unusualTask.value = spiderTask.data.exceptionCount;
speed.value = performance.data.success speed.value = performance.data.success;
errorRate.value = performance.data.error errorRate.value = performance.data.error;
unusualRate.value = performance.data.exception unusualRate.value = performance.data.exception;
} };
onMounted(() => { onMounted(() => {
getData(); getData();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -117,15 +130,19 @@ onMounted(() => { ...@@ -117,15 +130,19 @@ onMounted(() => {
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 20px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #ffffff;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
margin-top: 2%; margin-top: 2%;
display: flex;
margin-left: 15px;
display: flex;
justify-content: space-between;
} }
.textStyle { .textStyle {
...@@ -133,7 +150,13 @@ onMounted(() => { ...@@ -133,7 +150,13 @@ onMounted(() => {
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #ffffff;
font-weight: 500;
// display: flex; // display: flex;
} }
.total-num {
margin-right: 30px;
color: skyblue;
}
</style> </style>
src/views/os-status/components/taskCard.vue
...@@ -6,16 +6,26 @@ ...@@ -6,16 +6,26 @@
<span>DSN爬取任务</span> <span>DSN爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>DSN爬虫任务数: {{ dsnTotalTaskNumber }} </span> <span>DSN爬虫任务数:</span>
<span class="total-num">{{
dsnTotalTaskNumber !== "" ? formatExactLargeNum(dsnTotalTaskNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ dsnTaskSuccessNumber }} </span> <span>任务执行成功统计:</span>
<span class="total-num">{{
dsnTaskSuccessNumber !== "" ? formatExactLargeNum(dsnTaskSuccessNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行失败统计: {{ dsnTaskFailNumber }} </span> <span>任务执行失败统计:</span>
<span class="total-num">{{
dsnTaskFailNumber !== "" ? formatExactLargeNum(dsnTaskFailNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ dsnErrorRate }} </span> <span>错误率: {{ dsnErrorRate }} </span>
<span class="total-num">{{ dsnErrorRate !== "" ? dsnErrorRate : "加载中..." }}</span>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToITUTaskRecordPage"> <div class="dataCard" @click="goToITUTaskRecordPage">
...@@ -23,16 +33,26 @@ ...@@ -23,16 +33,26 @@
<span>ITU爬取任务</span> <span>ITU爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>ITU爬虫任务数: {{ ituTotalTaskNumber }} </span> <span>ITU爬虫任务数:</span>
<span class="total-num">{{
ituTotalTaskNumber !== "" ? formatExactLargeNum(ituTotalTaskNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ ituTaskSuccessNumber }} </span> <span>任务执行成功统计:</span>
<span class="total-num">{{
ituTaskSuccessNumber !== "" ? formatExactLargeNum(ituTaskSuccessNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行失败统计: {{ ituTaskFailNumber }} </span> <span>任务执行失败统计:</span>
<span class="total-num">{{
ituTaskFailNumber !== "" ? formatExactLargeNum(ituTaskFailNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ ituErrorRate }} </span> <span>错误率:</span>
<span class="total-num">{{ ituErrorRate !== "" ? ituErrorRate : "加载中..." }}</span>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToSTTaskRecordPage"> <div class="dataCard" @click="goToSTTaskRecordPage">
...@@ -40,97 +60,106 @@ ...@@ -40,97 +60,106 @@
<span>ST爬取任务</span> <span>ST爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>ST爬虫任务数: {{ stTotalTaskNumber }} </span> <span>ST爬虫任务数:</span>
<span class="total-num">{{
stTotalTaskNumber !== "" ? formatExactLargeNum(stTotalTaskNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ stTaskSuccessNumber }} </span> <span>任务执行成功统计:</span>
<span class="total-num">{{
stTaskSuccessNumber !== "" ? formatExactLargeNum(stTaskSuccessNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集速度: {{ stTaskFailNumber }} </span> <span>采集速度:</span>
<span class="total-num">{{
stTaskFailNumber !== "" ? formatExactLargeNum(stTaskFailNumber) : "加载中..."
}}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ stErrorRate }} </span> <span>错误率:</span>
<span class="total-num">{{ stErrorRate !== "" ? stErrorRate : "加载中..." }}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { getAllSpiderTaskStatistics } from '@/api/staticData'; import { getAllSpiderTaskStatistics } from "@/api/staticData";
import { onMounted,ref } from 'vue'; import { onMounted, ref } from "vue";
import { getSpiderTaskList } from '@/api/spiderTask' import { getSpiderTaskList } from "@/api/spiderTask";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
const router = useRouter() const router = useRouter();
const dsnTotalTaskNumber = ref('')
const dsnTaskSuccessNumber = ref('')
const dsnTaskFailNumber = ref('')
const dsnErrorRate = ref('')
const ituTotalTaskNumber = ref('')
const ituTaskSuccessNumber = ref('')
const ituTaskFailNumber = ref('')
const ituErrorRate = ref('')
const stTotalTaskNumber = ref('')
const stTaskSuccessNumber = ref('')
const stTaskFailNumber = ref('')
const stErrorRate = ref('')
const dsnTotalTaskNumber = ref("");
const dsnTaskSuccessNumber = ref("");
const dsnTaskFailNumber = ref("");
const dsnErrorRate = ref("");
const ituTotalTaskNumber = ref("");
const ituTaskSuccessNumber = ref("");
const ituTaskFailNumber = ref("");
const ituErrorRate = ref("");
const stTotalTaskNumber = ref("");
const stTaskSuccessNumber = ref("");
const stTaskFailNumber = ref("");
const stErrorRate = ref("");
const goToDSNTaskRecordPage = () => { const goToDSNTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskInformation/list', path: "/osTaskInformation/list",
query: { query: {
spiderType: 'dsn_now', spiderType: "dsn_now",
jump: 'yes', jump: "yes",
page: 'statusMonitor' page: "statusMonitor",
} },
}) });
} };
const goToITUTaskRecordPage = () => { const goToITUTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskInformation/list', path: "/osTaskInformation/list",
query: { query: {
spiderType: 'itu_space_explorer', spiderType: "itu_space_explorer",
jump: 'yes', jump: "yes",
page: 'statusMonitor' page: "statusMonitor",
},
} });
}) };
}
const goToSTTaskRecordPage = () => { const goToSTTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskInformation/list', path: "/osTaskInformation/list",
query: { query: {
spiderType: 'api_spider', spiderType: "api_spider",
jump: 'yes', jump: "yes",
page: 'statusMonitor' page: "statusMonitor",
} },
}) });
} };
// 获取任务统计数据的方法 // 获取任务统计数据的方法
const getData = async () => { const getData = async () => {
const res = await getAllSpiderTaskStatistics({}) const res = await getAllSpiderTaskStatistics({});
const dsnTask = await getSpiderTaskList({ spiders: 'dsn_now' }) const dsnTask = await getSpiderTaskList({ spiders: "dsn_now" });
const ituTask = await getSpiderTaskList({ spiders: 'itu_space_explorer' }) const ituTask = await getSpiderTaskList({ spiders: "itu_space_explorer" });
const stTask = await getSpiderTaskList({ spiders: 'api_spider' }) const stTask = await getSpiderTaskList({ spiders: "api_spider" });
dsnTotalTaskNumber.value = dsnTask.data.length dsnTotalTaskNumber.value = dsnTask.data.length;
dsnTaskSuccessNumber.value = res.data.dsn_now.successCount dsnTaskSuccessNumber.value = res.data.dsn_now.successCount;
dsnTaskFailNumber.value = res.data.dsn_now.failCount dsnTaskFailNumber.value = res.data.dsn_now.failCount;
dsnErrorRate.value = res.data.dsn_now.errorRate dsnErrorRate.value = res.data.dsn_now.errorRate;
ituTotalTaskNumber.value = ituTask.data.length ituTotalTaskNumber.value = ituTask.data.length;
ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount;
ituTaskFailNumber.value = res.data.itu_space_explorer.failCount ituTaskFailNumber.value = res.data.itu_space_explorer.failCount;
ituErrorRate.value = res.data.itu_space_explorer.errorRate ituErrorRate.value = res.data.itu_space_explorer.errorRate;
stTotalTaskNumber.value = stTask.data.length stTotalTaskNumber.value = stTask.data.length;
stTaskSuccessNumber.value = res.data.space_track.successCount stTaskSuccessNumber.value = res.data.space_track.successCount;
stTaskFailNumber.value = res.data.space_track.failCount stTaskFailNumber.value = res.data.space_track.failCount;
stErrorRate.value = res.data.space_track.errorRate stErrorRate.value = res.data.space_track.errorRate;
} };
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -146,15 +175,19 @@ onMounted(() => { ...@@ -146,15 +175,19 @@ onMounted(() => {
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 20px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #ffffff;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
margin-top: 2%; margin-top: 2%;
display: flex;
margin-left: 15px;
display: flex;
justify-content: space-between;
} }
.textStyle { .textStyle {
...@@ -162,7 +195,12 @@ onMounted(() => { ...@@ -162,7 +195,12 @@ onMounted(() => {
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #ffffff;
// display: flex; // display: flex;
} }
.total-num {
margin-right: 30px;
color: skyblue;
}
</style> </style>
src/views/os-system/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="sys-content"> <div class="sys-content">
<el-card> <el-card>
<div class="title">系统管理</div> <div class="title">系统管理</div>
<div class="low-titme">System Admin</div> <div class="low-titme">System Manager</div>
<el-divider class="divider" /> <el-divider class="divider" />
<div class="btns"> <div class="btns">
<el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog" <el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog"
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button> <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
</div> </div>
</el-card> </el-card>
<div class="table-content">
<el-table <el-table
:data="tableData" :data="tableData"
style="width: 100%"
border border
:header-cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
...@@ -50,6 +50,8 @@ ...@@ -50,6 +50,8 @@
@pagination="getUserListData" @pagination="getUserListData"
/> />
</div> </div>
</div>
<!-- 删除弹窗组件 --> <!-- 删除弹窗组件 -->
<deleteDialog <deleteDialog
v-model:dialogVisible="showDeleteDialog" v-model:dialogVisible="showDeleteDialog"
...@@ -163,9 +165,6 @@ onMounted(async () => { ...@@ -163,9 +165,6 @@ onMounted(async () => {
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.sys-content {
padding: 10px;
}
.title { .title {
text-align: left; text-align: left;
font-size: 18px; font-size: 18px;
...@@ -204,15 +203,7 @@ onMounted(async () => { ...@@ -204,15 +203,7 @@ onMounted(async () => {
box-shadow: none; box-shadow: none;
} }
/* 卡片外层容器透明 */ .table-content {
.el-card { padding: 0 10px;
background-color: transparent !important;
border: none; /* 可选：去除边框 */
}
/* 卡片内容区域透明 */
.el-card__body {
background-color: transparent !important;
padding: 16px; /* 保持默认内边距，可按需调整 */
} }
</style> </style>
src/views/os-taskInformation/components/taskCard.vue
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="cardStyle"> <div class="cardStyle">
<el-row> <el-row v-loading="taskList.length == 0" element-loading-background="rgba(48, 65, 86, 0.7)">
<div class="taskCard p-6" v-for="task in taskList" :key="task.taskId"> <div class="taskCard p-6" v-for="task in taskList" :key="task.taskId">
<div class="taskContent"> <div class="taskContent">
<div> <div>
...@@ -70,21 +70,28 @@ ...@@ -70,21 +70,28 @@
<div class="wordStyle"> <div class="wordStyle">
<el-form-item class="form-item"> <el-form-item class="form-item">
<el-space> <el-space>
<span class="wordStyle">执行频率: {{ parseCronExpression(task.kwargs.cron) }} </span> <span class="wordStyle"
>执行频率:
<span style="color: skyblue">{{ parseCronExpression(task.kwargs.cron) }} </span>
</span>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<el-form-item class="form-item"> <el-form-item class="form-item">
<el-space> <el-space>
<span class="wordStyle">执行次数: {{ task.count }} </span> <span class="wordStyle"
>执行次数: <span style="color: skyblue">{{ formatExactLargeNum(task.count) }}</span>
</span>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<el-form-item class="form-item"> <el-form-item class="form-item">
<el-space> <el-space>
<span class="wordStyle">所属爬虫: {{ task.kwargs.spider }}</span> <span class="wordStyle"
>所属爬虫: <span style="color: skyblue"> {{ task.kwargs.spider }}</span></span
>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
...@@ -117,16 +124,16 @@ ...@@ -117,16 +124,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import addTaskDialog from "./addTaskDialog.vue"; import addTaskDialog from "./addTaskDialog.vue";
import { getSpiderTaskList, resumeSpiderTask, pauseSpiderTask, getTaskCount } from "@/api/spiderTask"; import { getSpiderTaskList, resumeSpiderTask, pauseSpiderTask, getTaskCount } from "@/api/spiderTask";
import { DeleteMode } from "@/components/Delete/enum.ts"; import { DeleteMode } from "@/components/Delete/enum.ts";
import { AddMode } from "./enum"; import { AddMode } from "./enum";
import deleteDialog from "./deleteDialog.vue"; import deleteDialog from "./deleteDialog.vue";
import { CronExpressionParser } from "cron-parser";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { getSpiderList } from "@/api/system.ts"; import { getSpiderList } from "@/api/system.ts";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
const props = defineProps({ const props = defineProps({
spiderType: { spiderType: {
......
src/views/os-taskRecord/index.vue
...@@ -10,96 +10,116 @@ ...@@ -10,96 +10,116 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间" <el-date-picker
end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" v-model="timeValue"
time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" /> 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"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary" @click="searchData">查询</el-button> <el-button type="primary" @click="searchData">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button type="primary" @click="getData">重置表格</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="m-t-10" /> <div class="m-t-10" />
<div class="table-content">
<div> <div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" <el-table
:cell-style="{ textAlign: 'center' }"> v-loading="tableData.length == 0"
element-loading-background="rgba(48, 65, 86, 0.7)"
:data="tableData"
style="width: 100%"
border
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="spider" label="所属爬虫" show-overflow-tooltip /> <el-table-column property="spider" label="所属爬虫" show-overflow-tooltip />
<el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip /> <el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
<el-table-column property="run_status" label="调度状态" show-overflow-tooltip> <el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ '已完成' }} {{ "已完成" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="错误消息" show-overflow-tooltip> <el-table-column label="错误消息" show-overflow-tooltip>
<!-- 当错误消息为空时默认值为'-' --> <!-- 当错误消息为空时默认值为'-' -->
<template #default="scope"> <template #default="scope">
{{ scope.row.message || '-' }} {{ scope.row.message || "-" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="run_status" label="运行状态" show-overflow-tooltip> <el-table-column property="run_status" label="运行状态" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.run_status === "unknown" ? '已结束' : scope.row.run_status }} {{ scope.row.run_status === "unknown" ? "已结束" : scope.row.run_status }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="create_time" label="调度时间" width="200" show-overflow-tooltip /> <el-table-column property="create_time" label="调度时间" width="200" show-overflow-tooltip />
</el-table> </el-table>
</div> </div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <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
@pagination="getData" v-model:pagerCount="pageObj.pagerCount" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
v-model:pagerCount="pageObj.pagerCount"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { getSpiderTaskRecord } from '@/api/spiderTask.ts' import { getSpiderTaskRecord } from "@/api/spiderTask.ts";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
// ElConfigProvider 组件 // ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from "element-plus";
// 引入中文包 // 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'; import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: 'Pagination' }) defineOptions({ name: "Pagination" });
// 更改分页文字 // 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = '页'; zhCn.el.pagination.pageClassifier = "页";
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const taskValue = ref('') const taskValue = ref("");
const timeValue = ref('') const timeValue = ref("");
const taskOptions = [ const taskOptions = [
{ {
value: 'task1', value: "task1",
label: 'sk网', label: "sk网",
}, },
{ {
value: 'task2', value: "task2",
label: 'nasa网', label: "nasa网",
}, },
{ {
value: 'task3', value: "task3",
label: '网', label: "网",
}, },
] ];
const tableData = ref([]) const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1, pageNo: 1,
pagerCount: 5, pagerCount: 5,
}) });
// 前往运行日志，暂时不要 // 前往运行日志，暂时不要
// const handleDetails = (row: any) => { // const handleDetails = (row: any) => {
// console.log(row); // console.log(row);
...@@ -111,41 +131,46 @@ const pageObj = ref({ ...@@ -111,41 +131,46 @@ const pageObj = ref({
// }) // })
// } // }
const goToStatus = () => { const goToStatus = () => {
if (route.query.mode === '状态监控') { if (route.query.mode === "状态监控") {
router.push({ router.push({
path: '/osStatus/list', path: "/osStatus/list",
}) });
} else { } else {
router.push({ router.push({
path: '/osTaskInformation/list', path: "/osTaskInformation/list",
}) });
} }
} };
// 获取任务执行记录列表 // 获取任务执行记录列表
const getData = async () => { const getData = async () => {
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total' }) const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: "total" });
pageObj.value.total = res.data.total pageObj.value.total = res.data.total;
tableData.value = res.data.list tableData.value = res.data.list;
} };
// 数据的方法 // 数据的方法
const searchData = async () => { const searchData = async () => {
if (!timeValue.value) { if (!timeValue.value) {
ElMessage.warning('请先选择时间段') ElMessage.warning("请先选择时间段");
return return;
} }
let resTime = [] let resTime = [];
const startTime = timeValue.value[0] const startTime = timeValue.value[0];
const endTime = timeValue.value[1] const endTime = timeValue.value[1];
resTime.push(startTime) resTime.push(startTime);
resTime.push(endTime) resTime.push(endTime);
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total', times: resTime }) const res = await getSpiderTaskRecord({
pageObj.value.total = res.data.total page: pageObj.value.pageNo,
tableData.value = res.data.list size: pageObj.value.pageSize,
} status: "total",
times: resTime,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
};
onMounted(() => { onMounted(() => {
getData() getData();
}) });
</script> </script>
<style scoped> <style scoped>
...@@ -165,7 +190,11 @@ onMounted(() => { ...@@ -165,7 +190,11 @@ onMounted(() => {
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
}
.table-content {
padding: 0 10px;
} }
.backStyle { .backStyle {
...@@ -203,7 +232,7 @@ onMounted(() => { ...@@ -203,7 +232,7 @@ onMounted(() => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -218,6 +247,6 @@ onMounted(() => { ...@@ -218,6 +247,6 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none;
} }
</style> </style>
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