Skip to content

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

pref:调整页面样式布局

parent 85fdc758
Showing with 382 additions and 290 deletions
src/styles/_element.scss
...@@ -96,4 +96,23 @@ ...@@ -96,4 +96,23 @@
.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/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>
</div> </div>
</div> </div>
<!-- 综合数据页面组件 --> <!-- 综合数据页面组件 -->
<!-- <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>
<ituDataTab v-if="mode === 'ITU数据'"> <!-- ST数据页面组件 -->
</ituDataTab> <stDataTab v-if="mode === 'ST数据'"> </stDataTab>
<!-- ST数据页面组件 --> <!-- ESA数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'"> <esDataTab v-if="mode === 'ESA数据'"> </esDataTab>
</stDataTab> </div>
<!-- ESA数据页面组件 -->
<esDataTab v-if="mode === 'ESA数据'">
</esDataTab>
</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">
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #ffffff;
} }
.backStyle { .backStyle {
background-image: url("@/assets/picture/back.png"); background-image: url("@/assets/picture/back.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 5vh; height: 5vh;
width: 5%; width: 5%;
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-table-column type="selection" width="40" height="40" /> --> </el-card>
<el-table-column property="number" label="序号" type="index" width="80" /> <div class="table-content">
<el-table-column property="spider" label="爬虫名称" show-overflow-tooltip /> <el-table
<el-table-column label="查看任务"> :data="tableData"
<template #default="scope"> style="width: 100%"
<el-button type="primary" plain @click="handleDetails(scope.row)"> border
任务 :header-cell-style="{ textAlign: 'center' }"
</el-button> :cell-style="{ textAlign: 'center' }"
</template> :row-style="{ height: '60px' }"
</el-table-column> >
</el-table> <!-- <el-table-column type="selection" width="40" height="40" /> -->
</div> <el-table-column property="number" label="序号" type="index" width="80" />
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <el-table-column property="spider" label="爬虫名称" show-overflow-tooltip />
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" <el-table-column label="查看任务">
@pagination="getData" /> <template #default="scope">
</div> <el-button type="primary" plain @click="handleDetails(scope.row)"> 任务 </el-button>
</div> </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"
/>
</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>
/* 去除按钮边框 */ /* 去除按钮边框 */
.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
<template> <template>
<div class="flex gap-10"> <div class="flex gap-10">
<span class="textStyle">数据统计</span> <span class="textStyle">数据统计</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="wordStyle"> <div class="wordStyle">
<span>总数据量: {{ totalDataNumber }}</span> <span>总数据量:</span>
</div> <span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
<div class="wordStyle"> </div>
<span>采集的页面数量: {{ totalPageNumber }}</span> <div class="wordStyle">
</div> <span>采集的页面数量:</span>
<div class="wordStyle"> <span class="total-num">
<span>采集的目标数量: {{ totalTargetNumber }}</span> {{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
</div> >
</div> </div>
<div class="dataCard" @click="goToTaskRecordPage"> <div class="wordStyle">
<div class="titleStyle"> <span>采集的目标数量:</span>
<span>任务执行统计</span> <span class="total-num">
</div> {{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
<div class="wordStyle"> >
<span>任务执行成功统计: {{ successTask }}</span> </div>
</div> </div>
<div class="wordStyle"> <div class="dataCard" @click="goToTaskRecordPage">
<span>任务执行失败统计: {{ failTask }}</span> <div class="titleStyle">
</div> <span>任务执行统计</span>
<div class="wordStyle"> </div>
<span>任务异常数统计: {{ unusualTask }}</span> <div class="wordStyle">
</div> <span>任务执行成功统计:</span>
</div> <span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
<div class="dataCard"> </div>
<div class="titleStyle"> <div class="wordStyle">
<span>性能统计</span> <span>任务执行失败统计:</span>
</div> <span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
<div class="wordStyle"> </div>
<span>平均成功率: {{ speed }}</span> <div class="wordStyle">
</div> <span>任务异常数统计:</span>
<div class="wordStyle"> <span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
<span>平均错误率: {{ errorRate }}</span> </div>
</div> </div>
<div class="wordStyle"> <div class="dataCard">
<span>平均异常率: {{ unusualRate }}</span> <div class="titleStyle">
</div> <span>性能统计</span>
</div> </div>
</div> <div class="wordStyle">
<span>平均成功率:</span>
<span class="total-num"> {{ speed !== "" ? speed : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>平均错误率: </span>
<span class="total-num">{{ errorRate !== "" ? errorRate : "加载中..." }}</span>
</div>
<div class="wordStyle">
<span>平均异常率:</span>
<span class="total-num">{{ unusualRate !== "" ? unusualRate : "加载中..." }}</span>
</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>
.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;
} }
.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 {
writing-mode: vertical-lr; writing-mode: vertical-lr;
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; font-weight: 500;
// 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,45 +11,47 @@ ...@@ -11,45 +11,47 @@
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button> <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
</div> </div>
</el-card> </el-card>
<el-table <div class="table-content">
:data="tableData" <el-table
style="width: 100%" :data="tableData"
border border
:header-cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
:row-style="{ height: '58px' }" :row-style="{ height: '58px' }"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<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="username" label="用户账号" show-overflow-tooltip /> <el-table-column property="username" label="用户账号" show-overflow-tooltip />
<el-table-column property="nickname" label="用户名称" show-overflow-tooltip /> <el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
<el-table-column property="role" label="用户角色" show-overflow-tooltip> <el-table-column property="role" label="用户角色" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.role == 1 ? "管理员" : "普通用户" }} {{ scope.row.role == 1 ? "管理员" : "普通用户" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="status" label="用户状态" show-overflow-tooltip> <el-table-column property="status" label="用户状态" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ scope.row.status ? "启用" : "停用" }} {{ scope.row.status ? "启用" : "停用" }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip /> <el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220"> <el-table-column label="操作" width="220">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> 编辑 </el-button> <el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> 编辑 </el-button>
<el-button type="danger" plain @click="handleDelete(scope.row)"> 删除 </el-button> <el-button type="danger" plain @click="handleDelete(scope.row)"> 删除 </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 <Pagination
:total="pageObj.total" :total="pageObj.total"
v-model:page="pageObj.pageNo" v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize" v-model:limit="pageObj.pageSize"
@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: {
......
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