Skip to content

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

pref:调整页面样式布局

parent 85fdc758
Showing with 664 additions and 471 deletions
src/styles/_element.scss
......@@ -97,3 +97,22 @@
.el-date-editor .el-range-input{
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 @@
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
<el-date-picker
v-model="timeValue"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
......@@ -23,7 +30,6 @@
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">Norad Cat ID:</el-text>
</el-form-item>
......@@ -56,8 +62,14 @@
</div>
<div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table
:data="tableData"
style="width: 100%"
border
:row-style="{ height: '45px' }"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<!-- <el-table-column type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
......@@ -71,23 +83,23 @@
<el-table-column property="isSync" label="是否为同步" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
<Pagination
:total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div>
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
<div class="text-center font-size-8">详情</div>
</template>
<el-form label-width="155px" size="small" class="px-4">
<div>
......@@ -356,160 +368,158 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
const timeValue = ref('')
const detailVisibleValue = ref(false)
const showDeleteDialog = ref(false)
import { ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import exportDialog from "@/components/Export/index.vue";
const timeValue = ref("");
const detailVisibleValue = ref(false);
const showDeleteDialog = ref(false);
// 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发布日期
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
const intldes = ref('')
const intldes = ref("");
// 失效时间
const expirationTime = ref('')
const expirationTime = ref("");
// 周期
const period = ref('')
const period = ref("");
// INCL
const incl = ref('')
const incl = ref("");
// RCS
const rcs = ref('')
const rcs = ref("");
// SITE
const site = ref('')
const site = ref("");
// TLE
const tle = ref('')
const tle = ref("");
const tableData = ref([
{
number: '1',
targetName: 'VOYAGER-2',
stationPosition: '[148.98,-35.22]',
stationName: 'CANBERRA',
NoradCatId: '2134',
SNSNoticeId: '90504649',
dataTime: '2025-06-24 14:35:23',
recordTime: '2025-06-25 14:35:23',
tle: '-',
isSync: '是',
number: "1",
targetName: "VOYAGER-2",
stationPosition: "[148.98,-35.22]",
stationName: "CANBERRA",
NoradCatId: "2134",
SNSNoticeId: "90504649",
dataTime: "2025-06-24 14:35:23",
recordTime: "2025-06-25 14:35:23",
tle: "-",
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({
total: 10,
pageSize: 10,
pageNo: 1
})
pageNo: 1,
});
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
}
detailVisibleValue.value = true;
};
const getData = () => {
console.log('getData');
}
console.log("getData");
};
const handleClose = () => {
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
detailVisibleValue.value = false;
};
}
const handleExportConfirm = () => {};
const handleExport = () => {
showDeleteDialog.value = true
}
showDeleteDialog.value = true;
};
</script>
<style scoped lang="scss">
......@@ -537,7 +547,7 @@ const handleExport = () => {
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #ffffff;
}
</style>
......@@ -572,7 +582,7 @@ const handleExport = () => {
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #ffffff;
}
/* 修改el下拉框选项选中时的文字颜色 */
......@@ -582,7 +592,7 @@ const handleExport = () => {
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none;
}
/* 去除按钮点击后的黑边框 */
......
src/views/os-dataDisplay/components/stDataTab.vue
......@@ -15,9 +15,17 @@
</el-form-item>
<el-form-item>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" style="width: 330px" value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker
v-model="timeValue"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
style="width: 200px"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item>
......@@ -42,9 +50,15 @@
</div>
<div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45.5px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<div class="table-content">
<el-table
: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 property="number" label="序号" width="55" type="index" />
<el-table-column property="data[0].NORAD_CAT_ID" label="Norad Cat ID" show-overflow-tooltip />
......@@ -65,24 +79,24 @@
<el-table-column property="data[0].TLE_LINE2" label="TLE_LINE2" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
<Pagination
:total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div>
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
<div class="text-center font-size-8">详情</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
......@@ -173,102 +187,108 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
import { getStList, getStDetail, deleteStData } from '@/api/spiderData'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import exportDialog from "@/components/Export/index.vue";
import { getStList, getStDetail, deleteStData } from "@/api/spiderData";
import { ElMessage } from "element-plus";
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus';
import { ElConfigProvider } from "element-plus";
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
defineOptions({ name: 'Pagination' })
import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: "Pagination" });
// 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`';
zhCn.el.pagination.goto = '跳至';
zhCn.el.pagination.pagesize = '条/页';
zhCn.el.pagination.pageClassifier = '页';
const searchTargetName = ref('')
const noradCatId = ref('')
const showDeleteDialog = ref(false)
const timeValue = ref('')
const detailVisibleValue = ref(false)
zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = "页";
const searchTargetName = ref("");
const noradCatId = ref("");
const showDeleteDialog = ref(false);
const timeValue = ref("");
const detailVisibleValue = ref(false);
// NoradCatID
const NoradCatID = ref('')
const NoradCatID = ref("");
// 目标名称
const targetName = ref('')
const targetName = ref("");
// 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
const incl = ref('')
const incl = ref("");
// RCS
const rcs = ref('')
const rcs = ref("");
// SITE
const site = ref('')
const site = ref("");
// TLE
const tle = ref('')
const tle = ref("");
const tableData = ref([])
const tableData = ref([]);
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
pageNo: 1,
});
// 查看数据详情的方法
const handleDetails = async (row: any) => {
const res = await getStDetail({ id: row._id })
NoradCatID.value = res.data.data[0].NORAD_CAT_ID
targetName.value = res.data.data[0].OBJECT_NAME
type.value = res.data.data[0].OBJECT_TYPE
period.value = res.data.data[0].PERIOD
intleds.value = res.data.data[0].INTLDES
recordTime.value = res.data.data[0].CREATION_DATE
belongCountry.value = res.data.data[0].COUNTRY_CODE
perigee.value = res.data.data[0].PERIAPSIS
apogee.value = res.data.data[0].APOAPSIS
rcs.value = res.data.data[0].RCS_SIZE
site.value = res.data.data[0].SITE
const res = await getStDetail({ id: row._id });
NoradCatID.value = res.data.data[0].NORAD_CAT_ID;
targetName.value = res.data.data[0].OBJECT_NAME;
type.value = res.data.data[0].OBJECT_TYPE;
period.value = res.data.data[0].PERIOD;
intleds.value = res.data.data[0].INTLDES;
recordTime.value = res.data.data[0].CREATION_DATE;
belongCountry.value = res.data.data[0].COUNTRY_CODE;
perigee.value = res.data.data[0].PERIAPSIS;
apogee.value = res.data.data[0].APOAPSIS;
rcs.value = res.data.data[0].RCS_SIZE;
site.value = res.data.data[0].SITE;
tle.value = `${res.data.data[0].TLE_LINE0}
${res.data.data[0].TLE_LINE1}
${res.data.data[0].TLE_LINE2}`
detailVisibleValue.value = true
}
${res.data.data[0].TLE_LINE2}`;
detailVisibleValue.value = true;
};
// 获取st数据列表的方法
const getData = async () => {
const res = await getStList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize })
pageObj.value.total = res.data.total
tableData.value = res.data.list
noradCatId.value = ''
searchTargetName.value = ''
timeValue.value = ''
}
const res = await getStList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
noradCatId.value = "";
searchTargetName.value = "";
timeValue.value = "";
};
const handleClose = () => {
detailVisibleValue.value = false
}
detailVisibleValue.value = false;
};
const handleSearch = async () => {
if (searchTargetName.value === '' && noradCatId.value === '' && timeValue.value === '') {
ElMessage.warning('请输入搜索内容')
return
if (searchTargetName.value === "" && noradCatId.value === "" && timeValue.value === "") {
ElMessage.warning("请输入搜索内容");
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 })
tableData.value = res.data.list
pageObj.value.total = res.data.total
}
const res = await getStList({
norad_cat_id: noradCatId.value,
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(() => {
getData()
})
getData();
});
</script>
<style scoped lang="scss">
......@@ -300,17 +320,17 @@ onMounted(() => {
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #ffffff;
}
</style>
<style>
.el-textarea__inner {
color: #FFFFFF;
color: #ffffff;
}
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #ffffff;
}
/* 修改el选择器的样式 */
......@@ -332,12 +352,12 @@ onMounted(() => {
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d252c;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #ffffff;
}
/* 修改el下拉框选项选中时的文字颜色 */
......@@ -347,10 +367,14 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none;
}
.el-button:focus {
outline: none;
}
.table-contet {
padding: 0 10px;
}
</style>
src/views/os-dataDisplay/index.vue
<template>
<div>
<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">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
<el-button type="primary" @click="handleExport">导出</el-button>
......@@ -11,71 +11,65 @@
<!-- <allDataTab v-if="mode === '综合数据'">
</allDataTab> -->
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<dsnDataTab v-if="mode === 'DSN数据'"> </dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<ituDataTab v-if="mode === 'ITU数据'"> </ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
<stDataTab v-if="mode === 'ST数据'"> </stDataTab>
<!-- ESA数据页面组件 -->
<esDataTab v-if="mode === 'ESA数据'">
</esDataTab>
<esDataTab v-if="mode === 'ESA数据'"> </esDataTab>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import allDataTab from './components/allDataTab.vue'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
import esDataTab from './components/esDataTab.vue'
import exportDialog from '@/components/Export/index.vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import allDataTab from "./components/allDataTab.vue";
import ituDataTab from "./components/ituDataTab.vue";
import stDataTab from "./components/stDataTab.vue";
import dsnDataTab from "./components/dsnData/dsnTab.vue";
import esDataTab from "./components/esDataTab.vue";
import exportDialog from "@/components/Export/index.vue";
import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
const mode = ref('DSN数据')
const showDeleteDialog = ref(false)
const sizeOptions = ['DSN数据', 'ITU数据', 'ST数据', 'ESA数据']
const route = useRoute()
const router = useRouter()
const modeValue = ref<any>('数据展示')
const upload = ref<UploadInstance>()
const mode = ref("DSN数据");
const showDeleteDialog = ref(false);
const sizeOptions = ["DSN数据", "ITU数据", "ST数据", "ESA数据"];
const route = useRoute();
const router = useRouter();
const modeValue = ref<any>("数据展示");
const upload = ref<UploadInstance>();
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}
const handleExceed: UploadProps["onExceed"] = (files) => {
upload.value!.clearFiles();
const file = files[0] as UploadRawFile;
file.uid = genFileId();
upload.value!.handleStart(file);
};
const submitUpload = () => {
upload.value!.submit()
}
upload.value!.submit();
};
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
}
path: "/osStatus/list",
});
};
const handleExport = () => {
showDeleteDialog.value = true
}
const handleExportConfirm = () => {
}
showDeleteDialog.value = true;
};
const handleExportConfirm = () => {};
onMounted(() => {
if (route.query.mode) {
modeValue.value = route.query.mode
mode.value = modeValue.value
modeValue.value = route.query.mode;
mode.value = modeValue.value;
}
console.log(mode.value)
})
console.log(mode.value);
});
</script>
<style scoped lang="scss">
......@@ -85,7 +79,7 @@ onMounted(() => {
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #ffffff;
}
.backStyle {
......@@ -97,4 +91,8 @@ onMounted(() => {
display: flex;
margin-left: 0.8%;
}
.segment-content {
padding: 10px 10px 0 10px;
}
</style>
src/views/os-spiderManager/index.vue
<template>
<div>
<div class="mt-20" />
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
<el-card>
<div class="title">爬虫管理</div>
<div class="low-titme">Spider Manager</div>
<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 property="number" label="序号" type="index" width="80" />
<el-table-column property="spider" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
任务
</el-button>
<el-button type="primary" plain @click="handleDetails(scope.row)"> 任务 </el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
<Pagination
:total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'
import { getSpiderList } from '@/api/system.ts'
const router = useRouter()
const tableData = ref([])
import { ref, onMounted } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { useRouter } from "vue-router";
import { getSpiderList } from "@/api/system.ts";
const router = useRouter();
const tableData = ref([]);
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
pageNo: 1,
});
const handleDetails = (row: any) => {
// console.log(row);
router.push({
path: '/osTaskInformation/list',
path: "/osTaskInformation/list",
query: {
jump: 'yes',
jump: "yes",
spiderType: row.spider,
page:'spiderManager'
}
})
}
page: "spiderManager",
},
});
};
// 获取爬虫数据的方法
const getData = async () => {
const res = await getSpiderList({scrapydServerId:'1',project:'spiders'})
tableData.value = res.data
}
const res = await getSpiderList({ scrapydServerId: "1", project: "spiders" });
tableData.value = res.data;
};
onMounted(() => {
getData()
})
getData();
});
</script>
<style scoped>
......@@ -62,4 +74,24 @@ onMounted(() => {
.el-button:focus {
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>
src/views/os-status/components/dataCard.vue
......@@ -6,13 +6,20 @@
<span>数据统计</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }}</span>
<span>总数据量:</span>
<span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }}</span>
<span>采集的页面数量:</span>
<span class="total-num">
{{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }}</span>
<span>采集的目标数量:</span>
<span class="total-num">
{{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
......@@ -20,13 +27,16 @@
<span>任务执行统计</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ successTask }}</span>
<span>任务执行成功统计:</span>
<span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ failTask }}</span>
<span>任务执行失败统计:</span>
<span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }}</span>
<span>任务异常数统计:</span>
<span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
</div>
</div>
<div class="dataCard">
......@@ -34,74 +44,77 @@
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }}</span>
<span>平均成功率:</span>
<span class="total-num"> {{ speed !== "" ? speed : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }}</span>
<span>平均错误率: </span>
<span class="total-num">{{ errorRate !== "" ? errorRate : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ unusualRate }}</span>
<span>平均异常率:</span>
<span class="total-num">{{ unusualRate !== "" ? unusualRate : "加载中..." }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from '@/api/staticData';
import { onMounted, ref } from 'vue';
import { useRouter } from "vue-router";
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
import { onMounted, ref, watch } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
const router = useRouter()
const totalDataNumber = ref('')
const totalPageNumber = ref('')
const totalTargetNumber = ref('')
const successTask = ref('')
const failTask = ref('')
const unusualTask = ref('')
const speed = ref('')
const errorRate = ref('')
const unusualRate = ref('')
const router = useRouter();
const totalDataNumber = ref("");
const totalPageNumber = ref("");
const totalTargetNumber = ref("");
const successTask = ref("");
const failTask = ref("");
const unusualTask = ref("");
const speed = ref("");
const errorRate = ref("");
const unusualRate = ref("");
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
path: "/osDataDisplay/list",
query: {
jump: 'yes',
mode: 'DSN数据'
}
})
}
jump: "yes",
mode: "DSN数据",
},
});
};
const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
path: "/osTaskRecord/list",
query: {
jump: 'yes',
mode: '状态监控'
}
})
}
jump: "yes",
mode: "状态监控",
},
});
};
// 获取数据统计数据的方法
const getData = async () => {
const staticData = await getStatsDataList({})
const spiderTask = await getSpiderTaskList({})
const performance = await getPerformanceList({})
totalDataNumber.value = staticData.data.totalData
totalPageNumber.value = staticData.data.ituPage
totalTargetNumber.value = staticData.data.spaceTrackItemCount
successTask.value = spiderTask.data.successCount
failTask.value = spiderTask.data.failCount
unusualTask.value = spiderTask.data.exceptionCount
speed.value = performance.data.success
errorRate.value = performance.data.error
unusualRate.value = performance.data.exception
}
const staticData = await getStatsDataList({});
const spiderTask = await getSpiderTaskList({});
const performance = await getPerformanceList({});
totalDataNumber.value = staticData.data.totalData;
totalPageNumber.value = staticData.data.ituPage;
totalTargetNumber.value = staticData.data.spaceTrackItemCount;
successTask.value = spiderTask.data.successCount;
failTask.value = spiderTask.data.failCount;
unusualTask.value = spiderTask.data.exceptionCount;
speed.value = performance.data.success;
errorRate.value = performance.data.error;
unusualRate.value = performance.data.exception;
};
onMounted(() => {
getData();
})
});
</script>
<style lang="scss" scoped>
......@@ -117,15 +130,19 @@ onMounted(() => {
}
.titleStyle {
font-size: 30px;
font-size: 20px;
margin-top: 5%;
color: #FFFFFF;
color: #ffffff;
}
.wordStyle {
font-size: 20px;
color: #FFFFFF;
font-size: 18px;
color: #ffffff;
margin-top: 2%;
display: flex;
margin-left: 15px;
display: flex;
justify-content: space-between;
}
.textStyle {
......@@ -133,7 +150,13 @@ onMounted(() => {
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
color: #ffffff;
font-weight: 500;
// display: flex;
}
.total-num {
margin-right: 30px;
color: skyblue;
}
</style>
src/views/os-status/components/taskCard.vue
......@@ -6,16 +6,26 @@
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>DSN爬虫任务数: {{ dsnTotalTaskNumber }} </span>
<span>DSN爬虫任务数:</span>
<span class="total-num">{{
dsnTotalTaskNumber !== "" ? formatExactLargeNum(dsnTotalTaskNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ dsnTaskSuccessNumber }} </span>
<span>任务执行成功统计:</span>
<span class="total-num">{{
dsnTaskSuccessNumber !== "" ? formatExactLargeNum(dsnTaskSuccessNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ dsnTaskFailNumber }} </span>
<span>任务执行失败统计:</span>
<span class="total-num">{{
dsnTaskFailNumber !== "" ? formatExactLargeNum(dsnTaskFailNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>错误率: {{ dsnErrorRate }} </span>
<span class="total-num">{{ dsnErrorRate !== "" ? dsnErrorRate : "加载中..." }}</span>
</div>
</div>
<div class="dataCard" @click="goToITUTaskRecordPage">
......@@ -23,16 +33,26 @@
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>ITU爬虫任务数: {{ ituTotalTaskNumber }} </span>
<span>ITU爬虫任务数:</span>
<span class="total-num">{{
ituTotalTaskNumber !== "" ? formatExactLargeNum(ituTotalTaskNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ ituTaskSuccessNumber }} </span>
<span>任务执行成功统计:</span>
<span class="total-num">{{
ituTaskSuccessNumber !== "" ? formatExactLargeNum(ituTaskSuccessNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ ituTaskFailNumber }} </span>
<span>任务执行失败统计:</span>
<span class="total-num">{{
ituTaskFailNumber !== "" ? formatExactLargeNum(ituTaskFailNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>错误率: {{ ituErrorRate }} </span>
<span>错误率:</span>
<span class="total-num">{{ ituErrorRate !== "" ? ituErrorRate : "加载中..." }}</span>
</div>
</div>
<div class="dataCard" @click="goToSTTaskRecordPage">
......@@ -40,97 +60,106 @@
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>ST爬虫任务数: {{ stTotalTaskNumber }} </span>
<span>ST爬虫任务数:</span>
<span class="total-num">{{
stTotalTaskNumber !== "" ? formatExactLargeNum(stTotalTaskNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ stTaskSuccessNumber }} </span>
<span>任务执行成功统计:</span>
<span class="total-num">{{
stTaskSuccessNumber !== "" ? formatExactLargeNum(stTaskSuccessNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ stTaskFailNumber }} </span>
<span>采集速度:</span>
<span class="total-num">{{
stTaskFailNumber !== "" ? formatExactLargeNum(stTaskFailNumber) : "加载中..."
}}</span>
</div>
<div class="wordStyle">
<span>错误率: {{ stErrorRate }} </span>
<span>错误率:</span>
<span class="total-num">{{ stErrorRate !== "" ? stErrorRate : "加载中..." }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getAllSpiderTaskStatistics } from '@/api/staticData';
import { onMounted,ref } from 'vue';
import { getSpiderTaskList } from '@/api/spiderTask'
import { useRouter } from "vue-router";
import { getAllSpiderTaskStatistics } from "@/api/staticData";
import { onMounted, ref } from "vue";
import { getSpiderTaskList } from "@/api/spiderTask";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
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 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 goToDSNTaskRecordPage = () => {
router.push({
path: '/osTaskInformation/list',
path: "/osTaskInformation/list",
query: {
spiderType: 'dsn_now',
jump: 'yes',
page: 'statusMonitor'
}
})
}
spiderType: "dsn_now",
jump: "yes",
page: "statusMonitor",
},
});
};
const goToITUTaskRecordPage = () => {
router.push({
path: '/osTaskInformation/list',
path: "/osTaskInformation/list",
query: {
spiderType: 'itu_space_explorer',
jump: 'yes',
page: 'statusMonitor'
}
})
}
spiderType: "itu_space_explorer",
jump: "yes",
page: "statusMonitor",
},
});
};
const goToSTTaskRecordPage = () => {
router.push({
path: '/osTaskInformation/list',
path: "/osTaskInformation/list",
query: {
spiderType: 'api_spider',
jump: 'yes',
page: 'statusMonitor'
}
})
}
spiderType: "api_spider",
jump: "yes",
page: "statusMonitor",
},
});
};
// 获取任务统计数据的方法
const getData = async () => {
const res = await getAllSpiderTaskStatistics({})
const dsnTask = await getSpiderTaskList({ spiders: 'dsn_now' })
const ituTask = await getSpiderTaskList({ spiders: 'itu_space_explorer' })
const stTask = await getSpiderTaskList({ spiders: 'api_spider' })
dsnTotalTaskNumber.value = dsnTask.data.length
dsnTaskSuccessNumber.value = res.data.dsn_now.successCount
dsnTaskFailNumber.value = res.data.dsn_now.failCount
dsnErrorRate.value = res.data.dsn_now.errorRate
ituTotalTaskNumber.value = ituTask.data.length
ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount
ituTaskFailNumber.value = res.data.itu_space_explorer.failCount
ituErrorRate.value = res.data.itu_space_explorer.errorRate
stTotalTaskNumber.value = stTask.data.length
stTaskSuccessNumber.value = res.data.space_track.successCount
stTaskFailNumber.value = res.data.space_track.failCount
stErrorRate.value = res.data.space_track.errorRate
}
const res = await getAllSpiderTaskStatistics({});
const dsnTask = await getSpiderTaskList({ spiders: "dsn_now" });
const ituTask = await getSpiderTaskList({ spiders: "itu_space_explorer" });
const stTask = await getSpiderTaskList({ spiders: "api_spider" });
dsnTotalTaskNumber.value = dsnTask.data.length;
dsnTaskSuccessNumber.value = res.data.dsn_now.successCount;
dsnTaskFailNumber.value = res.data.dsn_now.failCount;
dsnErrorRate.value = res.data.dsn_now.errorRate;
ituTotalTaskNumber.value = ituTask.data.length;
ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount;
ituTaskFailNumber.value = res.data.itu_space_explorer.failCount;
ituErrorRate.value = res.data.itu_space_explorer.errorRate;
stTotalTaskNumber.value = stTask.data.length;
stTaskSuccessNumber.value = res.data.space_track.successCount;
stTaskFailNumber.value = res.data.space_track.failCount;
stErrorRate.value = res.data.space_track.errorRate;
};
onMounted(() => {
getData()
})
getData();
});
</script>
<style lang="scss" scoped>
......@@ -146,15 +175,19 @@ onMounted(() => {
}
.titleStyle {
font-size: 30px;
font-size: 20px;
margin-top: 5%;
color: #FFFFFF;
color: #ffffff;
}
.wordStyle {
font-size: 20px;
color: #FFFFFF;
font-size: 18px;
color: #ffffff;
margin-top: 2%;
display: flex;
margin-left: 15px;
display: flex;
justify-content: space-between;
}
.textStyle {
......@@ -162,7 +195,12 @@ onMounted(() => {
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
color: #ffffff;
// display: flex;
}
.total-num {
margin-right: 30px;
color: skyblue;
}
</style>
src/views/os-system/index.vue
......@@ -2,7 +2,7 @@
<div class="sys-content">
<el-card>
<div class="title">系统管理</div>
<div class="low-titme">System Admin</div>
<div class="low-titme">System Manager</div>
<el-divider class="divider" />
<div class="btns">
<el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog"
......@@ -11,9 +11,9 @@
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
</div>
</el-card>
<div class="table-content">
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
......@@ -50,6 +50,8 @@
@pagination="getUserListData"
/>
</div>
</div>
<!-- 删除弹窗组件 -->
<deleteDialog
v-model:dialogVisible="showDeleteDialog"
......@@ -163,9 +165,6 @@ onMounted(async () => {
.el-button:focus {
outline: none;
}
.sys-content {
padding: 10px;
}
.title {
text-align: left;
font-size: 18px;
......@@ -204,15 +203,7 @@ onMounted(async () => {
box-shadow: none;
}
/* 卡片外层容器透明 */
.el-card {
background-color: transparent !important;
border: none; /* 可选：去除边框 */
}
/* 卡片内容区域透明 */
.el-card__body {
background-color: transparent !important;
padding: 16px; /* 保持默认内边距，可按需调整 */
.table-content {
padding: 0 10px;
}
</style>
src/views/os-taskInformation/components/taskCard.vue
......@@ -37,7 +37,7 @@
</div>
</div>
<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="taskContent">
<div>
......@@ -70,21 +70,28 @@
<div class="wordStyle">
<el-form-item class="form-item">
<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-form-item>
</div>
<div class="wordStyle">
<el-form-item class="form-item">
<el-space>
<span class="wordStyle">执行次数: {{ task.count }} </span>
<span class="wordStyle"
>执行次数: <span style="color: skyblue">{{ formatExactLargeNum(task.count) }}</span>
</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle">
<el-form-item class="form-item">
<el-space>
<span class="wordStyle">所属爬虫: {{ task.kwargs.spider }}</span>
<span class="wordStyle"
>所属爬虫: <span style="color: skyblue"> {{ task.kwargs.spider }}</span></span
>
</el-space>
</el-form-item>
</div>
......@@ -117,16 +124,16 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import addTaskDialog from "./addTaskDialog.vue";
import { getSpiderTaskList, resumeSpiderTask, pauseSpiderTask, getTaskCount } from "@/api/spiderTask";
import { DeleteMode } from "@/components/Delete/enum.ts";
import { AddMode } from "./enum";
import deleteDialog from "./deleteDialog.vue";
import { CronExpressionParser } from "cron-parser";
import { ElMessage } from "element-plus";
import { getSpiderList } from "@/api/system.ts";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
const props = defineProps({
spiderType: {
......
src/views/os-taskRecord/index.vue
......@@ -10,96 +10,116 @@
</el-form-item>
<el-form-item>
<el-config-provider :locale="zhCn">
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间"
end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker
v-model="timeValue"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="searchData">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-10" />
<div class="table-content">
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table
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="spider" label="所属爬虫" show-overflow-tooltip />
<el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
<el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
<template #default="scope">
{{ '已完成' }}
{{ "已完成" }}
</template>
</el-table-column>
<el-table-column label="错误消息" show-overflow-tooltip>
<!-- 当错误消息为空时默认值为'-' -->
<template #default="scope">
{{ scope.row.message || '-' }}
{{ scope.row.message || "-" }}
</template>
</el-table-column>
<el-table-column property="run_status" label="运行状态" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.run_status === "unknown" ? '已结束' : scope.row.run_status }}
{{ scope.row.run_status === "unknown" ? "已结束" : scope.row.run_status }}
</template>
</el-table-column>
<el-table-column property="create_time" label="调度时间" width="200" show-overflow-tooltip />
</el-table>
</div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" v-model:pagerCount="pageObj.pagerCount" />
<Pagination
:total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getData"
v-model:pagerCount="pageObj.pagerCount"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getSpiderTaskRecord } from '@/api/spiderTask.ts'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { getSpiderTaskRecord } from "@/api/spiderTask.ts";
import { ElMessage } from "element-plus";
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus';
import { ElConfigProvider } from "element-plus";
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
defineOptions({ name: 'Pagination' })
import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: "Pagination" });
// 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`';
zhCn.el.pagination.goto = '跳至';
zhCn.el.pagination.pagesize = '条/页';
zhCn.el.pagination.pageClassifier = '页';
const route = useRoute()
const router = useRouter()
const taskValue = ref('')
const timeValue = ref('')
zhCn.el.pagination.total = "共 `{total} 条`";
zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = "页";
const route = useRoute();
const router = useRouter();
const taskValue = ref("");
const timeValue = ref("");
const taskOptions = [
{
value: 'task1',
label: 'sk网',
value: "task1",
label: "sk网",
},
{
value: 'task2',
label: 'nasa网',
value: "task2",
label: "nasa网",
},
{
value: 'task3',
label: '网',
value: "task3",
label: "网",
},
]
const tableData = ref([])
];
const tableData = ref([]);
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1,
pagerCount: 5,
})
});
// 前往运行日志，暂时不要
// const handleDetails = (row: any) => {
// console.log(row);
......@@ -111,41 +131,46 @@ const pageObj = ref({
// })
// }
const goToStatus = () => {
if (route.query.mode === '状态监控') {
if (route.query.mode === "状态监控") {
router.push({
path: '/osStatus/list',
})
path: "/osStatus/list",
});
} else {
router.push({
path: '/osTaskInformation/list',
})
path: "/osTaskInformation/list",
});
}
}
};
// 获取任务执行记录列表
const getData = async () => {
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total' })
pageObj.value.total = res.data.total
tableData.value = res.data.list
}
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: "total" });
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
};
// 数据的方法
const searchData = async () => {
if (!timeValue.value) {
ElMessage.warning('请先选择时间段')
return
ElMessage.warning("请先选择时间段");
return;
}
let resTime = []
const startTime = timeValue.value[0]
const endTime = timeValue.value[1]
resTime.push(startTime)
resTime.push(endTime)
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total', times: resTime })
pageObj.value.total = res.data.total
tableData.value = res.data.list
}
let resTime = [];
const startTime = timeValue.value[0];
const endTime = timeValue.value[1];
resTime.push(startTime);
resTime.push(endTime);
const res = await getSpiderTaskRecord({
page: pageObj.value.pageNo,
size: pageObj.value.pageSize,
status: "total",
times: resTime,
});
pageObj.value.total = res.data.total;
tableData.value = res.data.list;
};
onMounted(() => {
getData()
})
getData();
});
</script>
<style scoped>
......@@ -165,7 +190,11 @@ onMounted(() => {
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #ffffff;
}
.table-content {
padding: 0 10px;
}
.backStyle {
......@@ -203,7 +232,7 @@ onMounted(() => {
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #ffffff;
}
/* 修改el下拉框选项选中时的文字颜色 */
......@@ -218,6 +247,6 @@ onMounted(() => {
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none;
}
</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