Skip to content

F
fk-spider-web
Commit f489d1f8 by liucan
Options

pref:修改状态监控页面显示效果

parent 40c8610d
Showing with 459 additions and 422 deletions
src/utils/formatExactLargeNum.ts
...@@ -17,4 +17,4 @@ const formatExactLargeNum = (num: number | string) => { ...@@ -17,4 +17,4 @@ const formatExactLargeNum = (num: number | string) => {
} }
}; };
export default formatExactLargeNum; export default formatExactLargeNum;
\ No newline at end of file
src/views/os-dataDisplay/components/esDataTab.vue
...@@ -2,18 +2,12 @@ ...@@ -2,18 +2,12 @@
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <el-form inline>
<el-form-item> <el-form-item label="目标名称:">
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div> <div>
<el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" /> <el-input placeholder="请输入目标名称:" v-model="searchTargetName" style="width: 180px" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="获取时间:">
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker <el-date-picker
type="datetimerange" type="datetimerange"
...@@ -28,16 +22,13 @@ ...@@ -28,16 +22,13 @@
/> />
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="站点名称:">
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" /> <el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary" @click="handleSearch">查询</el-button> <el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button plain @click="getData">重置表格</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -96,12 +87,14 @@ ...@@ -96,12 +87,14 @@
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" min-width="85"> <el-table-column fixed="right" label="操作" min-width="85">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)"> <div class="btns">
目标信息 <el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)">
</el-button> 目标信息
<el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)" </el-button>
>站点信息</el-button <el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)"
> >站点信息</el-button
>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -125,7 +118,7 @@ ...@@ -125,7 +118,7 @@
<el-card> <el-card>
<div class="title">目标信息：</div> <div class="title">目标信息：</div>
<el-divider style="margin: 0"></el-divider> <el-divider style="margin: 0"></el-divider>
<el-row :gutter="20" style="display: flex; justify-content: space-between"> <el-row :gutter="50" style="display: flex; justify-content: space-between">
<el-col :span="12"> <el-col :span="12">
<div class="info-item"> <div class="info-item">
<span class="item-title">目标名称：</span> <span class="item-title">目标名称：</span>
...@@ -222,7 +215,7 @@ ...@@ -222,7 +215,7 @@
<el-card> <el-card>
<div class="title">站点信息：</div> <div class="title">站点信息：</div>
<el-divider style="margin: 0"></el-divider> <el-divider style="margin: 0"></el-divider>
<el-row :gutter="20" style="display: flex; justify-content: space-between"> <el-row :gutter="50" style="display: flex; justify-content: space-between">
<el-col :span="12"> <el-col :span="12">
<div class="info-item"> <div class="info-item">
<span class="item-title">站点名称：</span> <span class="item-title">站点名称：</span>
...@@ -656,6 +649,9 @@ onMounted(() => { ...@@ -656,6 +649,9 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-form-item__label) {
color: white;
}
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
...@@ -711,6 +707,10 @@ onMounted(() => { ...@@ -711,6 +707,10 @@ onMounted(() => {
.target-desc { .target-desc {
color: white; color: white;
} }
.btns {
display: flex;
}
</style> </style>
<style> <style>
......
src/views/os-dataDisplay/components/ituDataTab.vue
...@@ -2,18 +2,12 @@ ...@@ -2,18 +2,12 @@
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <el-form inline>
<el-form-item> <el-form-item label="目标名称:">
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div> <div>
<el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" /> <el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="获取时间:">
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker <el-date-picker
type="datetimerange" type="datetimerange"
...@@ -28,15 +22,12 @@ ...@@ -28,15 +22,12 @@
/> />
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="SNS Notice ID:">
<el-text class="mx-1">SNS Notice ID:</el-text> <el-input placeholder="请输入ID" v-model="searchTargetId" style="width: 170.5px" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" v-model="searchTargetId" style="width: 170.5px" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button> <el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button plain="" @click="getData">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -369,6 +360,9 @@ onMounted(() => { ...@@ -369,6 +360,9 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-form-item__label) {
color: white;
}
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
// background-image: url("@/assets/picture/dialog1.png"); // background-image: url("@/assets/picture/dialog1.png");
......
src/views/os-dataDisplay/components/stDataTab.vue
...@@ -2,18 +2,10 @@ ...@@ -2,18 +2,10 @@
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <el-form inline>
<el-form-item> <el-form-item label="目标名称:">
<el-text class="mx-1">目标名称:</el-text> <el-input placeholder="请输入目标名称" style="width: 180px" v-model="searchTargetName" />
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 180px" v-model="searchTargetName" />
</div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="获取时间:">
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker <el-date-picker
v-model="timeValue" v-model="timeValue"
...@@ -28,11 +20,8 @@ ...@@ -28,11 +20,8 @@
/> />
</el-config-provider> </el-config-provider>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="NORAD CAT ID:">
<el-text class="mx-1">NORAD CAT ID:</el-text> <el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 170.5px" v-model="noradCatId" />
</el-form-item> </el-form-item>
<!-- <el-form-item> <!-- <el-form-item>
<el-space> <el-space>
...@@ -41,8 +30,8 @@ ...@@ -41,8 +30,8 @@
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary" @click="handleSearch">查询</el-button> <el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button plain @click="getData">重置表格</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -100,7 +89,7 @@ ...@@ -100,7 +89,7 @@
<el-card> <el-card>
<div class="title">目标信息：</div> <div class="title">目标信息：</div>
<el-divider style="margin: 0"></el-divider> <el-divider style="margin: 0"></el-divider>
<el-row :gutter="20" style="display: flex;justify-content: space-between;"> <el-row :gutter="50" style="display: flex; justify-content: space-between">
<el-col :span="12"> <el-col :span="12">
<div class="info-item"> <div class="info-item">
<span class="item-title">目标名称：</span> <span class="item-title">目标名称：</span>
...@@ -316,6 +305,9 @@ onMounted(() => { ...@@ -316,6 +305,9 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-form-item__label) {
color: white;
}
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
......
src/views/os-dataDisplay/index.vue
<template> <template>
<div> <div>
<el-card style="margin-bottom: 0">
<div class="title">数据展示</div>
<div class="low-titme">Data Display</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" /> <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="segment-content"> <div class="segment-content">
<div class="custom-style flex gap-4"> <div class="custom-style flex gap-4">
...@@ -76,6 +81,22 @@ onMounted(() => { ...@@ -76,6 +81,22 @@ onMounted(() => {
outline: none; outline: none;
} }
.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;
}
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #ffffff; color: #ffffff;
......
src/views/os-spiderManager/index.vue
...@@ -39,7 +39,6 @@ ...@@ -39,7 +39,6 @@
/> />
</div> </div>
//编辑弹窗
<el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400"> <el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400">
<div class="No-Content" ref="noContentRef"> <div class="No-Content" ref="noContentRef">
<TransitionGroup <TransitionGroup
...@@ -72,7 +71,26 @@ ...@@ -72,7 +71,26 @@
</div> </div>
<div class="btn"> <div class="btn">
<el-button :disabled="curSateNo == ''" plain type="primary" @click="addNoToList">添加</el-button> <el-button :disabled="curSateNo == ''" plain type="primary" @click="addNoToList">添加</el-button>
<el-button plain type="danger" @click="delNoList">删除</el-button> <el-popconfirm title="确定删除选中编号吗？" width="200">
<template #reference>
<el-button :disabled="curSelSateNo.length === 0" plain type="danger">删除</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button
type="danger"
size="small"
@click="
() => {
confirm();
delNoList();
}
"
>
确定
</el-button>
</template>
</el-popconfirm>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
......
src/views/os-status/components/dataCard.vue
...@@ -7,19 +7,15 @@ ...@@ -7,19 +7,15 @@
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>总数据量:</span> <span>总数据量:</span>
<span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span> <span class="total-num">{{ formatExactLargeNum(totalDataNumber) }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的页面数量:</span> <span>采集的页面数量:</span>
<span class="total-num"> <span class="total-num"> {{ formatExactLargeNum(totalPageNumber) }}</span>
{{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的目标数量:</span> <span>采集的目标数量:</span>
<span class="total-num"> <span class="total-num"> {{ formatExactLargeNum(totalTargetNumber) }}</span>
{{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToTaskRecordPage"> <div class="dataCard" @click="goToTaskRecordPage">
...@@ -28,15 +24,15 @@ ...@@ -28,15 +24,15 @@
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计:</span> <span>任务执行成功统计:</span>
<span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span> <span class="total-num">{{ formatExactLargeNum(successTask) }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行失败统计:</span> <span>任务执行失败统计:</span>
<span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span> <span class="total-num">{{ formatExactLargeNum(failTask) }}</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务异常数统计:</span> <span>任务异常数统计:</span>
<span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span> <span class="total-num">{{ formatExactLargeNum(unusualTask) }}</span>
</div> </div>
</div> </div>
<div class="dataCard"> <div class="dataCard">
...@@ -64,6 +60,7 @@ import { useRouter } from "vue-router"; ...@@ -64,6 +60,7 @@ 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 } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum"; import formatExactLargeNum from "@/utils/formatExactLargeNum";
import { ElSkeleton } from "element-plus";
const router = useRouter(); const router = useRouter();
const totalDataNumber = ref(""); const totalDataNumber = ref("");
...@@ -129,16 +126,21 @@ onMounted(() => { ...@@ -129,16 +126,21 @@ onMounted(() => {
border-radius: 5px; border-radius: 5px;
} }
/* 标题区 */
.titleStyle { .titleStyle {
font-size: 20px; color: #dff6ff;
margin-top: 5%; font-size: 18px;
color: #ffffff; font-weight: 600;
text-align: center;
text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
letter-spacing: 2px;
margin-top: 10px;
} }
.wordStyle { .wordStyle {
font-size: 18px; font-size: 18px;
color: #ffffff; color: #ffffff;
margin-top: 2%; margin-top: 1%;
display: flex; display: flex;
margin-left: 15px; margin-left: 15px;
display: flex; display: flex;
...@@ -147,16 +149,19 @@ onMounted(() => { ...@@ -147,16 +149,19 @@ onMounted(() => {
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 22px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
// display: flex;
} }
.total-num { .total-num {
color: #4edaff;
font-size: 16px;
font-weight: 600;
text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
letter-spacing: 1px;
margin-right: 30px; margin-right: 30px;
color: skyblue;
} }
</style> </style>
src/views/os-status/components/qbDataMonitor.vue
<template> <template>
<div class="flex gap-10"> <div class="flex">
<span class="textStyle">QB数据管理</span> <span class="textStyle">QB数据管理</span>
<!-- <div class="dataCard" @click="goToAllDataPage"> <!-- <div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle"> <div class="titleStyle">
<span>综合数据</span> <span>综合数据</span>
</div> </div>
<div class="iconStyle" /> <div class="iconStyle" />
</div> --> </div> -->
<div class="dataCard" @click="goToDSNDataPage"> <div class="dataCard" @click="goToDSNDataPage">
<div class="titleStyle"> <div class="titleStyle">
<span>DSN数据</span> <span>DSN数据</span>
</div> </div>
<div class="iconStyle" /> <div class="iconStyle" />
</div> </div>
<div class="dataCard" @click="goToITUDataPage"> <div class="dataCard" @click="goToITUDataPage">
<div class="titleStyle"> <div class="titleStyle">
<span>ITU数据</span> <span>ITU数据</span>
</div> </div>
<div class="iconStyle" /> <div class="iconStyle" />
</div> </div>
<div class="dataCard" @click="goToSTDataPage"> <div class="dataCard" @click="goToSTDataPage">
<div class="titleStyle"> <div class="titleStyle">
<span>ST数据</span> <span>ST数据</span>
</div> </div>
<div class="iconStyle" /> <div class="iconStyle" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
const router = useRouter() const router = useRouter();
defineProps({ defineProps({
totalDataNumber: { totalDataNumber: {
type: String, type: String,
default: '' default: "",
}, },
totalPageNumber: { totalPageNumber: {
type: String, type: String,
default: '' default: "",
}, },
totalTargetNumber: { totalTargetNumber: {
type: String, type: String,
default: '' default: "",
}, },
successTask: { successTask: {
type: String, type: String,
default: '' default: "",
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: "",
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: "",
}, },
speed: { speed: {
type: String, type: String,
default: '' default: "",
}, },
errorRate: { errorRate: {
type: String, type: String,
default: '' default: "",
} },
}) });
const goToAllDataPage = () => { const goToAllDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: "/osDataDisplay/list",
query: { query: {
mode: '综合数据', mode: "综合数据",
jump: 'yes' jump: "yes",
} },
}) });
} };
const goToDSNDataPage = () => { const goToDSNDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: "/osDataDisplay/list",
query: { query: {
mode: 'DSN数据', mode: "DSN数据",
jump: 'yes' jump: "yes",
} },
}) });
} };
const goToITUDataPage = () => { const goToITUDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: "/osDataDisplay/list",
query: { query: {
mode: 'ITU数据', mode: "ITU数据",
jump: 'yes' jump: "yes",
} },
}) });
} };
const goToSTDataPage = () => { const goToSTDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: "/osDataDisplay/list",
query: { query: {
mode: 'ST数据', mode: "ST数据",
jump: 'yes' jump: "yes",
} },
}) });
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iconStyle { .iconStyle {
background-image: url("@/assets/picture/wenjianjia.png"); background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%; background-size: 100% 120%;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top: -5%; margin-top: -5%;
display: flex; display: flex;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
height: 65%; height: 65%;
width: 50%; width: 50%;
} }
.dataCard { .dataCard {
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
// background: #c6ebfc; // background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
width: 360px; width: 360px;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 24px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #ffffff;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #ffffff;
margin-top: 2%; margin-top: 2%;
} }
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 22px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #ffffff;
// display: flex; font-weight: 500;
// display: flex;
} }
</style> </style>
src/views/os-status/components/taskCard.vue
<template> <template>
<div class="flex gap-10"> <div class="flex">
<span class="textStyle">任务统计</span> <span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage"> <div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle"> <div class="titleStyle">
...@@ -175,15 +175,19 @@ onMounted(() => { ...@@ -175,15 +175,19 @@ onMounted(() => {
} }
.titleStyle { .titleStyle {
font-size: 20px; color: #dff6ff;
margin-top: 5%; font-size: 18px;
color: #ffffff; font-weight: 600;
text-align: center;
text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
letter-spacing: 2px;
margin-top: 10px;
} }
.wordStyle { .wordStyle {
font-size: 18px; font-size: 18px;
color: #ffffff; color: #ffffff;
margin-top: 2%; margin-top: 1%;
display: flex; display: flex;
margin-left: 15px; margin-left: 15px;
display: flex; display: flex;
...@@ -192,15 +196,19 @@ onMounted(() => { ...@@ -192,15 +196,19 @@ onMounted(() => {
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 22px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #ffffff; color: #ffffff;
// display: flex; font-weight: 500;
} }
.total-num { .total-num {
color: #4edaff;
font-size: 16px;
font-weight: 600;
text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
letter-spacing: 1px;
margin-right: 30px; margin-right: 30px;
color: skyblue;
} }
</style> </style>
src/views/os-status/index.vue
<template> <template>
<div> <div>
<div> <div>
<el-card style="margin-bottom: 0">
<div class="title">状态监控</div>
<div class="low-titme">Status Monitor</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<div class="text-left timeStyle" /> <div class="text-left timeStyle" />
<div class="border-100"> <div class="border-100">
<statusMonitor /> <statusMonitor />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import statusMonitor from './components/statusMonitor.vue' import statusMonitor from "./components/statusMonitor.vue";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -26,5 +30,18 @@ import statusMonitor from './components/statusMonitor.vue' ...@@ -26,5 +30,18 @@ import statusMonitor from './components/statusMonitor.vue'
border: 1.5px solid rgb(193, 188, 188); border: 1.5px solid rgb(193, 188, 188);
} }
.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-system/index.vue
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
:row-style="{ height: '58px' }" :row-style="{ height: '58px' }"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
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" />
...@@ -84,8 +86,8 @@ import { getUserList } from "@/api/user.ts"; ...@@ -84,8 +86,8 @@ import { getUserList } from "@/api/user.ts";
import { DeleteMode } from "@/components/Delete/enum.ts"; import { DeleteMode } from "@/components/Delete/enum.ts";
import { AddMode } from "./components/enum.ts"; import { AddMode } from "./components/enum.ts";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const userId = ref<any>([]); const userId = ref<number>(-1);
const userIds = ref<any>(); const userIds = ref<number[]>([]);
const nickName = ref<string>(""); const nickName = ref<string>("");
const userName = ref<string>(""); const userName = ref<string>("");
const userRole = ref<number>(0); const userRole = ref<number>(0);
...@@ -95,7 +97,7 @@ const showDeleteDialog = ref(false); ...@@ -95,7 +97,7 @@ const showDeleteDialog = ref(false);
const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE); const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE);
const dialogVisible = ref<boolean>(false); const dialogVisible = ref<boolean>(false);
const mode = ref<AddMode>(AddMode.ADD_MODE); const mode = ref<AddMode>(AddMode.ADD_MODE);
const tableData = ref(); const tableData = ref([]);
const pageObj = ref({ const pageObj = ref({
total: 0, total: 0,
pageSize: 10, pageSize: 10,
...@@ -117,11 +119,10 @@ const handleDelete = async (row: any) => { ...@@ -117,11 +119,10 @@ const handleDelete = async (row: any) => {
showDeleteDialog.value = true; showDeleteDialog.value = true;
deleteMode.value = DeleteMode.SINGLE_DELETE; deleteMode.value = DeleteMode.SINGLE_DELETE;
userId.value = row.id; userId.value = row.id;
console.log(userId.value);
}; };
// 批量删除用户的方法 // 批量删除用户的方法
const handleBatchDelete = async () => { const handleBatchDelete = async () => {
if (userIds.value == undefined) { if (!userIds.value || userIds.value.length === 0) {
ElMessage({ ElMessage({
message: "请先选择要删除的用户", message: "请先选择要删除的用户",
type: "warning", type: "warning",
...@@ -153,7 +154,6 @@ const getUserListData = async () => { ...@@ -153,7 +154,6 @@ const getUserListData = async () => {
}); });
tableData.value = userList.data.list; tableData.value = userList.data.list;
pageObj.value.total = userList.data.total; pageObj.value.total = userList.data.total;
console.log(userList);
}; };
onMounted(async () => { onMounted(async () => {
getUserListData(); getUserListData();
......
src/views/os-taskInformation/components/taskCard.vue
...@@ -5,108 +5,81 @@ ...@@ -5,108 +5,81 @@
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <el-form inline>
<el-form-item> <el-row>
<el-text class="mx-1" style="color: #fff">所属爬虫:</el-text> <el-col :span="16" style="display: flex; padding-left: 40px">
</el-form-item> <el-form-item label="所属爬虫:">
<el-form-item> <div>
<div> <el-select
<el-select v-model="searchCondition.spiders"
v-model="searchCondition.spiders" placeholder="请选择"
placeholder="请选择" style="width: 220px"
style="width: 220px" :disabled="!taskSelectOptions.length"
:disabled="!taskSelectOptions.length" >
> <el-option
<el-option v-for="item in taskSelectOptions || []"
v-for="item in taskSelectOptions || []" :key="item?.spider"
:key="item?.spider" :label="item?.spider || '未知'"
:label="item?.spider || '未知'" :value="item?.spider"
:value="item?.spider" />
/> </el-select>
</el-select> </div>
</div> </el-form-item>
</el-form-item> </el-col>
<el-form-item> <el-col :span="8" style="display: flex; justify-content: end">
<el-space> <el-form-item>
<el-button type="primary" @click="search">查询</el-button> <el-button plain type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="resetData">重置列表</el-button> <el-button @click="resetData" style="margin-right: 20px">重置</el-button>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button> <el-button plain type="primary" @click="openTaskDialog">新建任务</el-button>
</el-space> </el-form-item>
</el-form-item> </el-col>
</el-row>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="cardStyle"> <div class="cardStyle">
<!-- 加载状态优化：用专门的 loading 变量，避免依赖 taskList 长度 --> <div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div>
<el-row v-loading="isLoading" element-loading-background="rgba(48, 65, 86, 0.7)"> <div
<!-- 任务列表为空时显示提示，避免空循环 --> v-loading="taskList.length == 0"
<div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div> element-loading-background="rgba(48, 65, 86, 0.7)"
<!-- 循环前确保 taskList 是数组，key 用安全的 id --> class="taskCard p-6"
<div class="taskCard p-6" v-for="task in taskList || []" :key="task?.id || task?.taskId"> v-for="task in taskList || []"
<div class="taskContent"> :key="task?.id || task?.taskId"
<div> >
<el-form-item class="form-item"> <div class="header">
<!-- 安全访问 JSON 解析，避免 options 为 undefined 或 JSON 解析失败 --> <span class="task-name"
<span class="titleStyle">{{ >任务名称: {{ (task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称" }}</span
(task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称" >
}}</span> <el-divider style="margin-top: 5px"></el-divider>
</el-form-item> </div>
</div> <div class="btns">
<div> <el-button plain type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id"
<el-form-item class="form-item"> >编辑</el-button
<el-button type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id" >
>编辑</el-button <el-button plain type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
> >删除</el-button
<el-button type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id" >
>删除</el-button </div>
> <div class="info">
</el-form-item> <div class="item">
</div> <span class="wordStyle">启用/停止: </span>
<div class="wordStyle"> <el-switch
<el-form-item class="form-item"> v-model="task.status"
<el-space> :active-value="'running'"
<span class="wordStyle">启用/停止: </span> :inactive-value="'paused'"
<!-- 确保 task.status 有默认值，避免 v-model 绑定 undefined --> @change="(newStatus: any) => changeStatus(task, newStatus)"
<el-switch :disabled="!task?.id"
v-model="task.status" />
:active-value="'running'" </div>
:inactive-value="'paused'" <div class="item">
@change="(newStatus: any) => changeStatus(task, newStatus)" <span class="wordStyle">执行频率: </span>
:disabled="!task?.id" <span class="wordStyle">{{ parseCronExpression(task?.kwargs?.cron) || "未设置" }} </span>
/> </div>
</el-space> <div class="item">
</el-form-item> <span class="wordStyle">执行次数: </span>
</div> <span class="wordStyle">{{ formatExactLargeNum(task?.count || 0) }}</span>
<div class="wordStyle">
<el-form-item class="form-item">
<el-space>
<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"
>执行次数: <span style="color: skyblue">{{ formatExactLargeNum(task?.count || 0) }}</span>
</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle">
<el-form-item class="form-item">
<el-space>
<span class="wordStyle"
>所属爬虫: <span style="color: skyblue"> {{ task?.kwargs?.spider || "未知" }}</span></span
>
</el-space>
</el-form-item>
</div>
</div> </div>
</div> </div>
</el-row> </div>
</div> </div>
<addTaskDialog <addTaskDialog
...@@ -158,7 +131,6 @@ const searchCondition = ref({ ...@@ -158,7 +131,6 @@ const searchCondition = ref({
options: "", options: "",
}); });
const belongSpider = ref("");
const taskName = ref(""); const taskName = ref("");
const taskValue = ref(""); const taskValue = ref("");
const belongSpiderType = ref(""); const belongSpiderType = ref("");
...@@ -198,16 +170,6 @@ const editTask = (task: any) => { ...@@ -198,16 +170,6 @@ const editTask = (task: any) => {
showTaskDialog.value = true; showTaskDialog.value = true;
}; };
const goToTaskRecord = () => {
router.push({
path: "/osTaskRecord/list",
query: {
jump: "yes",
mode: "任务信息",
},
});
};
// 启动与停止任务的方法 // 启动与停止任务的方法
const changeStatus = async (task: any, newStatus: string) => { const changeStatus = async (task: any, newStatus: string) => {
if (!task?.id) return; // 避免 task 为 undefined if (!task?.id) return; // 避免 task 为 undefined
...@@ -377,6 +339,9 @@ onMounted(() => { ...@@ -377,6 +339,9 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-form-item__label) {
color: white;
}
.cardStyle { .cardStyle {
margin-top: 1.5%; margin-top: 1.5%;
padding: 18px; padding: 18px;
...@@ -390,25 +355,25 @@ onMounted(() => { ...@@ -390,25 +355,25 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: start;
height: 100%; height: 100%;
gap: 6px; gap: 6px;
padding: 5px 0; padding: 5px 0;
} }
.task-name {
color: #fff !important;
}
/* 任务卡片样式 */ /* 任务卡片样式 */
.taskCard { .taskCard {
margin-left: 1%;
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-bottom: 10px;
width: 380px;
font-size: 20px; font-size: 20px;
min-height: 240px; min-height: 240px;
min-width: 300px;
border-radius: 7px; border-radius: 7px;
display: flex;
flex-direction: column;
} }
/* 减小表单的间距 */ /* 减小表单的间距 */
...@@ -417,10 +382,23 @@ onMounted(() => { ...@@ -417,10 +382,23 @@ onMounted(() => {
} }
.taskCard .titleStyle { .taskCard .titleStyle {
font-size: 22px; display: flex;
font-size: 20px;
color: #ffffff; color: #ffffff;
} }
.task-name {
color: #ccc;
}
.item {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 8px 0;
}
.taskCard .wordStyle { .taskCard .wordStyle {
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
...@@ -442,8 +420,6 @@ onMounted(() => { ...@@ -442,8 +420,6 @@ onMounted(() => {
/* 表单样式 */ /* 表单样式 */
.formStyle { .formStyle {
display: flex;
justify-content: space-around;
margin-top: 0.5%; margin-top: 0.5%;
padding: 2px; padding: 2px;
} }
......
src/views/os-taskInformation/index.vue
<template> <template>
<div> <div>
<el-card style="margin-bottom: 0">
<div class="title">任务信息</div>
<div class="low-titme">Task Information</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" /> <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
<div class="m-t-8" /> <div class="m-t-8" />
<div> <div>
<taskCard :spiderType="spiderType" failTask="10" unusualTask="1" /> <taskCard :spiderType="spiderType" failTask="10" unusualTask="1" />
<!-- <div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div> -->
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref } from "vue";
import Pagination from '@/components/pagination/index.vue' import taskCard from "./components/taskCard.vue";
import taskCard from './components/taskCard.vue' import { useRouter } from "vue-router";
import { useRouter } from 'vue-router' import { useRoute } from "vue-router";
import { useRoute } from 'vue-router'
import { getSpiderTaskList,getTaskData } from '@/api/spiderTask' const route = useRoute();
import { AddMode } from './components/enum' const router = useRouter();
const spiderType = ref<any>(route.query.spiderType);
const route = useRoute()
const router = useRouter()
const spiderType = ref<any>(route.query.spiderType)
const taskValue = ref('')
const taskList = ref([])
const taskOptions = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const goToTaskInformation = () => { const goToTaskInformation = () => {
if(route.query.page === 'spiderManager'){ if (route.query.page === "spiderManager") {
router.push({ path: '/osSpiderManager/list' }) router.push({ path: "/osSpiderManager/list" });
}else{ } else {
router.push({ path: '/osStatus/list' }) router.push({ path: "/osStatus/list" });
} }
} };
onMounted(async () => {
// if(route.query.spiderType){
// spiderType.value = route.query.spiderType
// }
})
</script> </script>
<style scoped> <style scoped>
.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;
}
/* 返回样式 */ /* 返回样式 */
.backStyle { .backStyle {
background-image: url("@/assets/picture/back.png"); background-image: url("@/assets/picture/back.png");
...@@ -85,7 +71,7 @@ onMounted(async () => { ...@@ -85,7 +71,7 @@ onMounted(async () => {
/* 文本样式 */ /* 文本样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
/* 工具栏样式 */ /* 工具栏样式 */
...@@ -129,7 +115,7 @@ onMounted(async () => { ...@@ -129,7 +115,7 @@ onMounted(async () => {
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #ffffff;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
...@@ -141,4 +127,4 @@ onMounted(async () => { ...@@ -141,4 +127,4 @@ onMounted(async () => {
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
\ No newline at end of file
src/views/os-taskRecord/index.vue
<template> <template>
<div> <div>
<el-card style="margin-bottom: 0">
<div class="title">任务执行记录</div>
<div class="low-titme">Task Record</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" /> <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="m-t-7" /> <div class="m-t-7" />
<div class="text-left p-6 toolbarStyle"> <div class="text-left toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <div class="form-content">
<el-form-item> <el-form inline>
<el-text class="mx-1">时间:</el-text> <el-row>
</el-form-item> <el-col :span="12">
<el-form-item> <el-form-item label="时间:">
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-date-picker <el-date-picker
v-model="timeValue" v-model="timeValue"
type="datetimerange" type="datetimerange"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" time-format="A hh:mm:ss"
value-format="YYYY-MM-DD 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-col>
<el-space> <el-col :span="12" style="display: flex; justify-content: end">
<el-button type="primary" @click="searchData">查询</el-button> <el-form-item>
<el-button type="primary" @click="getData">重置表格</el-button> <el-button plain type="primary" @click="searchData">查询</el-button>
</el-space> <el-button plain @click="getData">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-col>
</el-row>
</el-form>
</div>
</div> </div>
</div> </div>
<div class="m-t-10" /> <div class="m-t-10" />
...@@ -97,7 +105,6 @@ zhCn.el.pagination.pagesize = "条/页"; ...@@ -97,7 +105,6 @@ 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 timeValue = ref(""); const timeValue = ref("");
const taskOptions = [ const taskOptions = [
{ {
...@@ -174,6 +181,9 @@ onMounted(() => { ...@@ -174,6 +181,9 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
:deep(.el-form-item__label) {
color: white;
}
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
...@@ -183,8 +193,6 @@ onMounted(() => { ...@@ -183,8 +193,6 @@ onMounted(() => {
/* 表格样式 */ /* 表格样式 */
.formStyle { .formStyle {
display: flex;
justify-content: space-around;
padding: 3px; padding: 3px;
} }
...@@ -197,6 +205,11 @@ onMounted(() => { ...@@ -197,6 +205,11 @@ onMounted(() => {
padding: 0 10px; padding: 0 10px;
} }
.form-content {
margin-top: 20px;
padding-left: 50px;
}
.backStyle { .backStyle {
background-image: url("@/assets/picture/back.png"); background-image: url("@/assets/picture/back.png");
background-size: 100% 100%; background-size: 100% 100%;
...@@ -206,6 +219,22 @@ onMounted(() => { ...@@ -206,6 +219,22 @@ onMounted(() => {
display: flex; display: flex;
margin-left: 0.8%; margin-left: 0.8%;
} }
.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>
<style> <style>
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
......
src/views/system/SystemIndex.vue deleted 100644 → 0
<template>
<h1>system index</h1>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
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