Skip to content

F
fk-spider-web
Commit 85fdc758 by liucan
Options

pref:调整任务信息页面、系统管理页面显示

parent cff37174
Showing with 482 additions and 415 deletions
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/os-system/index.vue
<template> <template>
<div> <div class="sys-content">
<div class="text-left p-8"> <el-card>
<el-form inline> <div class="title">系统管理</div>
<el-form-item> <div class="low-titme">System Admin</div>
<el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog">创建用户</el-button> <el-divider class="divider" />
</el-form-item> <div class="btns">
<el-form-item> <el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog"
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button> >创建用户</el-button
</el-form-item> >
</el-form> <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
</div> </div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" </el-card>
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }" <el-table
@selection-change="handleSelectionChange"> :data="tableData"
<el-table-column type="selection" width="40" /> style="width: 100%"
<el-table-column property="number" label="序号" width="55" type="index" /> border
<el-table-column property="username" label="用户账号" show-overflow-tooltip /> :header-cell-style="{ textAlign: 'center' }"
<el-table-column property="nickname" label="用户名称" show-overflow-tooltip /> :cell-style="{ textAlign: 'center' }"
<el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip /> :row-style="{ height: '58px' }"
<el-table-column label="操作" width="220"> @selection-change="handleSelectionChange"
<template #default="scope"> >
<el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> <el-table-column type="selection" width="40" />
编辑 <el-table-column property="number" label="序号" width="55" type="index" />
</el-button> <el-table-column property="username" label="用户账号" show-overflow-tooltip />
<el-button type="danger" plain @click="handleDelete(scope.row)"> <el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
删除 <el-table-column property="role" label="用户角色" show-overflow-tooltip>
</el-button> <template #default="scope">
</template> {{ scope.row.role == 1 ? "管理员" : "普通用户" }}
</el-table-column> </template>
</el-table> </el-table-column>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <el-table-column property="status" label="用户状态" show-overflow-tooltip>
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" <template #default="scope">
@pagination="getUserListData" /> {{ scope.row.status ? "启用" : "停用" }}
</div> </template>
<!-- 删除弹窗组件 --> </el-table-column>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getUserListData" <el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
:ids="userIds" :deleteMode="deleteMode" :id="userId" /> <el-table-column label="操作" width="220">
<!-- 创建用户弹窗组件 --> <template #default="scope">
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nickName="nickName" :userName="userName" <el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> 编辑 </el-button>
:id="userId" :userRole="userRole" :userStatus="userStatus" :userPassword="userPassword" <el-button type="danger" plain @click="handleDelete(scope.row)"> 删除 </el-button>
@get-user-list="getUserListData" /> </template>
</div> </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="getUserListData"
/>
</div>
<!-- 删除弹窗组件 -->
<deleteDialog
v-model:dialogVisible="showDeleteDialog"
@get-user-list="getUserListData"
:ids="userIds"
:deleteMode="deleteMode"
:id="userId"
/>
<!-- 创建用户弹窗组件 -->
<addUserDialog
v-model:dialogVisible="dialogVisible"
:mode="mode"
:nickName="nickName"
:userName="userName"
:id="userId"
:userRole="userRole"
:userStatus="userStatus"
:userPassword="userPassword"
@get-user-list="getUserListData"
/>
</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 deleteDialog from '@/components/Delete/index.vue' import deleteDialog from "@/components/Delete/index.vue";
import addUserDialog from './components/addUserDialog.vue' import addUserDialog from "./components/addUserDialog.vue";
import { getUserList } from '@/api/user.ts' 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<any>([]);
const userIds = ref<any>() const userIds = ref<any>();
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);
const userStatus = ref<boolean>(true) const userStatus = ref<boolean>(true);
const userPassword = ref<string>('') const userPassword = ref<string>("");
const showDeleteDialog = ref(false) 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,
pageNo: 1 pageNo: 1,
}) });
// 编辑用户信息的方法 // 编辑用户信息的方法
const handleEdit = async (row: any) => { const handleEdit = async (row: any) => {
mode.value = AddMode.UPDATE_MODE mode.value = AddMode.UPDATE_MODE;
nickName.value = row.nickname nickName.value = row.nickname;
userName.value = row.username userName.value = row.username;
userRole.value = row.role userRole.value = row.role;
userStatus.value = row.status userStatus.value = row.status;
userPassword.value = row.password userPassword.value = row.password;
dialogVisible.value = true dialogVisible.value = true;
userId.value = row.id userId.value = row.id;
} };
// 弹窗关闭的方法 // 弹窗关闭的方法
const handleDelete = async (row: any) => { 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); console.log(userId.value);
} };
// 批量删除用户的方法 // 批量删除用户的方法
const handleBatchDelete = async () => { const handleBatchDelete = async () => {
if(userIds.value == undefined){ if (userIds.value == undefined) {
ElMessage({ ElMessage({
message: '请先选择要删除的用户', message: "请先选择要删除的用户",
type: 'warning' type: "warning",
}) });
return return;
}else{ } else {
deleteMode.value = DeleteMode.BATCH_DELETE deleteMode.value = DeleteMode.BATCH_DELETE;
showDeleteDialog.value = true showDeleteDialog.value = true;
} }
} };
// 多选框改变后的方法 // 多选框改变后的方法
const handleSelectionChange = (data: any) => { const handleSelectionChange = (data: any) => {
let array = [] let array = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
array.push(data[i].id) array.push(data[i].id);
} }
userIds.value = array userIds.value = array;
} };
const openAddUserDialog = () => { const openAddUserDialog = () => {
mode.value = AddMode.ADD_MODE mode.value = AddMode.ADD_MODE;
dialogVisible.value = true dialogVisible.value = true;
} };
// 获取用户列表数据的方法 // 获取用户列表数据的方法
const getUserListData = async () => { const getUserListData = async () => {
const userList = await getUserList({ const userList = await getUserList({
page: pageObj.value.pageNo, page: pageObj.value.pageNo,
size: pageObj.value.pageSize size: pageObj.value.pageSize,
}) });
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); console.log(userList);
};
}
onMounted(async () => { onMounted(async () => {
getUserListData() getUserListData();
}) });
</script> </script>
<style scoped> <style scoped>
/* 去除按钮边框 */ /* 去除按钮边框 */
.el-button:focus { .el-button:focus {
outline: none; outline: none;
}
.sys-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;
}
.btns {
display: flex;
justify-content: end;
} }
</style> </style>
<style> <style>
/* 修改弹窗样式 */ /* 修改弹窗样式 */
.el-dialog { .el-dialog {
background-image: url("@/assets/picture/dialog1.png"); background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.el-dialog__title { .el-dialog__title {
color: #ffffff; color: #ffffff;
} }
} }
/* 修改el输入框的样式 */ /* 修改el输入框的样式 */
.el-input__wrapper { .el-input__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
}
/* 卡片外层容器透明 */
.el-card {
background-color: transparent !important;
border: none; /* 可选：去除边框 */
}
/* 卡片内容区域透明 */
.el-card__body {
background-color: transparent !important;
padding: 16px; /* 保持默认内边距，可按需调整 */
} }
</style> </style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 --> <!-- 任务执行统计卡片组件 -->
<template> <template>
<div> <div>
<div class="m-t-2" /> <div class="m-t-2" />
<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>
<el-text class="mx-1" style="color: #fff;">所属爬虫:</el-text> <el-text class="mx-1" style="color: #fff">所属爬虫:</el-text>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div> <div>
<el-select v-model="searchCondition.spiders" placeholder="请选择" style="width: 220px"> <el-select v-model="searchCondition.spiders" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskSelectOptions" :key="item.spider" :label="item.spider" <el-option
:value="item.spider" /> v-for="item in taskSelectOptions"
</el-select> :key="item.spider"
</div> :label="item.spider"
</el-form-item> :value="item.spider"
<!-- <el-form-item> />
</el-select>
</div>
</el-form-item>
<!-- <el-form-item>
<el-text class="mx-1" style="color: #fff;">任务名称:</el-text> <el-text class="mx-1" style="color: #fff;">任务名称:</el-text>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input v-model="taskName" placeholder="请输入" style="width: 220px" /> <el-input v-model="taskName" placeholder="请输入" style="width: 220px" />
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary" @Click="search">查询</el-button> <el-button type="primary" @Click="search">查询</el-button>
<el-button type="primary" @Click="resetData">重置列表</el-button> <el-button type="primary" @Click="resetData">重置列表</el-button>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button> <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="cardStyle"> <div class="cardStyle">
<div class="taskCard p-6" v-for="task in taskList" :key="task.taskId"> <el-row>
<div class="taskContent"> <div class="taskCard p-6" v-for="task in taskList" :key="task.taskId">
<div> <div class="taskContent">
<el-form-item class="form-item"> <div>
<span class="titleStyle">{{ task.kwargs.options === '' ? '无名称' : <el-form-item class="form-item">
JSON.parse(task.kwargs.options).jobName <span class="titleStyle">{{
}}</span> task.kwargs.options === "" ? "无名称" : JSON.parse(task.kwargs.options).jobName
</el-form-item> }}</span>
</div> </el-form-item>
<div> </div>
<el-form-item class="form-item"> <div>
<el-button type="primary" @click="editTask(task)" class="editButton">编辑</el-button> <el-form-item class="form-item">
<!-- <el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button> --> <el-button type="primary" @click="editTask(task)" class="editButton">编辑</el-button>
<el-button type="danger" @click="deleteTask(task)" class="deleteButton">删除</el-button> <!-- <el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button> -->
</el-form-item> <el-button type="danger" @click="deleteTask(task)" class="deleteButton">删除</el-button>
</div> </el-form-item>
<div class="wordStyle"> </div>
<el-form-item class="form-item"> <div class="wordStyle">
<el-space> <el-form-item class="form-item">
<span class="wordStyle">启用/停止: </span> <el-space>
<el-switch v-model="task.status" :active-value="'running'" :inactive-value="'paused'" <span class="wordStyle">启用/停止: </span>
@change="(newStatus: any) => changeStatus(task, newStatus)" /> <el-switch
</el-space> v-model="task.status"
</el-form-item> :active-value="'running'"
</div> :inactive-value="'paused'"
<div class="wordStyle"> @change="(newStatus: any) => changeStatus(task, newStatus)"
<el-form-item class="form-item"> />
<el-space> </el-space>
<span class="wordStyle">执行频率: {{ parseCronExpression(task.kwargs.cron) }} </span> </el-form-item>
</el-space> </div>
</el-form-item> <div class="wordStyle">
</div> <el-form-item class="form-item">
<div class="wordStyle"> <el-space>
<el-form-item class="form-item"> <span class="wordStyle">执行频率: {{ parseCronExpression(task.kwargs.cron) }} </span>
<el-space> </el-space>
<span class="wordStyle">执行次数: {{ task.count }} </span> </el-form-item>
</el-space> </div>
</el-form-item> <div class="wordStyle">
</div> <el-form-item class="form-item">
<div class="wordStyle"> <el-space>
<el-form-item class="form-item"> <span class="wordStyle">执行次数: {{ task.count }} </span>
<el-space> </el-space>
<span class="wordStyle">所属爬虫: {{ task.kwargs.spider }}</span> </el-form-item>
</el-space> </div>
</el-form-item> <div class="wordStyle">
</div> <el-form-item class="form-item">
<!-- <div class="wordStyle"> <el-space>
<span class="wordStyle">所属爬虫: {{ task.kwargs.spider }}</span>
</el-space>
</el-form-item>
</div>
<!-- <div class="wordStyle">
<el-form-item class="form-item"> <el-form-item class="form-item">
<el-space> <el-space>
<span class="wordStyle">失败次数: </span> <span class="wordStyle">失败次数: </span>
...@@ -87,202 +96,206 @@ ...@@ -87,202 +96,206 @@
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </el-row>
</div>
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode"
@getTaskList="getData" :jobId="jobId" :cron="frequency" :spiderType="belongSpiderType" <addTaskDialog
:options="taskOptions" /> v-model:dialogVisible="showTaskDialog"
@confirm="handleEdit"
<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getData" :jobId="jobId" /> :mode="editMode"
</div> @getTaskList="getData"
:jobId="jobId"
:cron="frequency"
:spiderType="belongSpiderType"
:options="taskOptions"
/>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getData" :jobId="jobId" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } 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 { 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";
const props = defineProps({ const props = defineProps({
spiderType: { spiderType: {
type: String, type: String,
default: '' default: "",
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: "",
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: "",
} },
}) });
const taskSelectOptions = ref() const taskSelectOptions = ref();
const searchCondition = ref({ const searchCondition = ref({
spiders: '', spiders: "",
options: '' options: "",
}) });
const belongSpider = ref('') const belongSpider = ref("");
const taskName = ref('') const taskName = ref("");
const taskValue = ref('') const taskValue = ref("");
const belongSpiderType = ref('') const belongSpiderType = ref("");
const router = useRouter() const router = useRouter();
const frequency = ref() const frequency = ref();
const editMode = ref(AddMode.UPDATE_TASK) const editMode = ref(AddMode.UPDATE_TASK);
const deleteMode = ref(DeleteMode.SINGLE_DELETE) const deleteMode = ref(DeleteMode.SINGLE_DELETE);
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const showTaskDialog = ref(false) const showTaskDialog = ref(false);
const taskSwitch = ref(false) const taskSwitch = ref(false);
const taskOptions = ref('') const taskOptions = ref("");
const jobId = ref('') const jobId = ref("");
const taskList = ref<any[]>([]) const taskList = ref<any[]>([]);
// 删除任务的方法 // 删除任务的方法
const deleteTask = (task: any) => { const deleteTask = (task: any) => {
jobId.value = task.id jobId.value = task.id;
deleteMode.value = DeleteMode.SINGLE_DELETE deleteMode.value = DeleteMode.SINGLE_DELETE;
showDeleteDialog.value = true showDeleteDialog.value = true;
} };
// 编辑任务的方法 // 编辑任务的方法
const editTask = (task: any) => { const editTask = (task: any) => {
jobId.value = task.id jobId.value = task.id;
taskOptions.value = JSON.stringify(JSON.parse(task.kwargs.options)) taskOptions.value = JSON.stringify(JSON.parse(task.kwargs.options));
belongSpiderType.value = task.kwargs.spider belongSpiderType.value = task.kwargs.spider;
frequency.value = task.kwargs.cron frequency.value = task.kwargs.cron;
editMode.value = AddMode.UPDATE_TASK editMode.value = AddMode.UPDATE_TASK;
showTaskDialog.value = true showTaskDialog.value = true;
// console.log(JSON.stringify(JSON.parse(task.kwargs.options))); // console.log(JSON.stringify(JSON.parse(task.kwargs.options)));
};
}
const goToTaskRecord = () => { const goToTaskRecord = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: "/osTaskRecord/list",
query: { query: {
jump: 'yes', jump: "yes",
mode: '任务信息' mode: "任务信息",
} },
}) });
} };
// 启动与停止任务的方法 // 启动与停止任务的方法
const changeStatus = async (task: any, newStatus: string) => { const changeStatus = async (task: any, newStatus: string) => {
if (newStatus === "running") { if (newStatus === "running") {
await resumeSpiderTask({ job_id: task.id }); await resumeSpiderTask({ job_id: task.id });
} else if (newStatus === "paused") { } else if (newStatus === "paused") {
await pauseSpiderTask({ job_id: task.id }); await pauseSpiderTask({ job_id: task.id });
} }
// await getData(); // await getData();
}; };
const handleEdit = () => { const handleEdit = () => {};
}
// 打开新建任务弹窗 // 打开新建任务弹窗
const openTaskDialog = () => { const openTaskDialog = () => {
editMode.value = AddMode.ADD_TASK editMode.value = AddMode.ADD_TASK;
frequency.value = '* * * * * *' frequency.value = "* * * * * *";
showTaskDialog.value = true showTaskDialog.value = true;
} };
// 获取任务列表的方法 // 获取任务列表的方法
const getData = async () => { const getData = async () => {
const res = await getSpiderTaskList({ spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [] }) const res = await getSpiderTaskList({
const resId = await getTaskCount({}) spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [],
for (let i = 0; i < res.data.length; i++) { });
res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id] const resId = await getTaskCount({});
} for (let i = 0; i < res.data.length; i++) {
taskList.value = res.data res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id];
} }
taskList.value = res.data;
};
// 重置任务列表的方法 // 重置任务列表的方法
const resetData = async () => { const resetData = async () => {
searchCondition.value.spiders = '' searchCondition.value.spiders = "";
const res = await getSpiderTaskList({ spiders: [], options: JSON.stringify({ jobName: taskName.value }) }) const res = await getSpiderTaskList({ spiders: [], options: JSON.stringify({ jobName: taskName.value }) });
const resId = await getTaskCount({}) const resId = await getTaskCount({});
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id] res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id];
} }
taskList.value = res.data taskList.value = res.data;
} };
// 搜索任务的方法 // 搜索任务的方法
const search = async () => { const search = async () => {
if (searchCondition.value.spiders === '') { if (searchCondition.value.spiders === "") {
ElMessage.warning('请先选择爬虫') ElMessage.warning("请先选择爬虫");
return return;
} }
const res = await getSpiderTaskList({ spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [], options: JSON.stringify({ jobName: taskName.value }) }) const res = await getSpiderTaskList({
const resId = await getTaskCount({}) spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [],
for (let i = 0; i < res.data.length; i++) { options: JSON.stringify({ jobName: taskName.value }),
res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id] });
} const resId = await getTaskCount({});
taskList.value = res.data for (let i = 0; i < res.data.length; i++) {
} res.data[i].count = resId.data[res.data[i].id] === undefined ? 0 : resId.data[res.data[i].id];
}
taskList.value = res.data;
};
// 解析cron表达式的方法 // 解析cron表达式的方法
const parseCronExpression = (cronExpression: string) => { const parseCronExpression = (cronExpression: string) => {
const res = cronExpression.split('*').length - 1 const res = cronExpression.split("*").length - 1;
if (res >= 5) { if (res >= 5) {
const aaa = cronExpression.split(' ') const aaa = cronExpression.split(" ");
for (let i = 0; i < aaa.length; i++) { for (let i = 0; i < aaa.length; i++) {
if (aaa[i] != '*') { if (aaa[i] != "*") {
if (i == 0) { if (i == 0) {
if (aaa[i].length === 3) { if (aaa[i].length === 3) {
return `每${aaa[i][2]}秒执行一次` return `每${aaa[i][2]}秒执行一次`;
} else { } else {
return `每${aaa[i][2] + aaa[i][3]}秒执行一次` return `每${aaa[i][2] + aaa[i][3]}秒执行一次`;
} }
} else if (i == 1) { } else if (i == 1) {
if (aaa[i].length === 3) { if (aaa[i].length === 3) {
return `每${aaa[i][2]}分钟执行一次` return `每${aaa[i][2]}分钟执行一次`;
} else { } else {
return `每${aaa[i][2] + aaa[i][3]}分钟执行一次` return `每${aaa[i][2] + aaa[i][3]}分钟执行一次`;
} }
} else if (i == 2) { } else if (i == 2) {
if (aaa[i].length === 3) { if (aaa[i].length === 3) {
return `每${aaa[i][2]}小时执行一次` return `每${aaa[i][2]}小时执行一次`;
} else { } else {
return `每${aaa[i][2] + aaa[i][3]}小时执行一次` return `每${aaa[i][2] + aaa[i][3]}小时执行一次`;
} }
} else if (i == 3) { } else if (i == 3) {
if (aaa[i].length === 3) { if (aaa[i].length === 3) {
return `每${aaa[i][2]}天执行一次` return `每${aaa[i][2]}天执行一次`;
} else { } else {
return `每${aaa[i][2] + aaa[i][3]}天执行一次` return `每${aaa[i][2] + aaa[i][3]}天执行一次`;
} }
} else if (i == 4) { } else if (i == 4) {
if (aaa[i].length === 3) { if (aaa[i].length === 3) {
return `每${aaa[i][2]}月执行一次` return `每${aaa[i][2]}月执行一次`;
} else { } else {
return `每${aaa[i][2] + aaa[i][3]}月执行一次` return `每${aaa[i][2] + aaa[i][3]}月执行一次`;
} }
} }
} }
} }
} }
} };
const getSpiderTypeList = async () => { const getSpiderTypeList = async () => {
const res = await getSpiderList({ scrapydServerId: '1', project: 'spiders' }) const res = await getSpiderList({ scrapydServerId: "1", project: "spiders" });
console.log(res,8888888888888); console.log(res, 8888888888888);
taskSelectOptions.value = res.data taskSelectOptions.value = res.data;
// taskSelectOptions.value = res.data // taskSelectOptions.value = res.data
} };
onMounted(() => { onMounted(() => {
if (props.spiderType !== '') { if (props.spiderType !== "") {
searchCondition.value.spiders = props.spiderType searchCondition.value.spiders = props.spiderType;
} }
getData() getData();
getSpiderTypeList() getSpiderTypeList();
});
})
// const parseCronExpression=(cronExpression: string)=> { // const parseCronExpression=(cronExpression: string)=> {
// try { // try {
...@@ -305,87 +318,80 @@ onMounted(() => { ...@@ -305,87 +318,80 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.cardStyle { .cardStyle {
display: flex; margin-top: 1.5%;
flex-wrap: wrap; padding: 18px;
margin-top: 1.5%; gap: 15px;
padding: 18px; width: auto !important;
gap: 15px;
width: auto !important;
justify-content: space-between;
} }
.taskContent { .taskContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
gap: 6px; gap: 6px;
/* 进一步减小项目之间的间距 */ /* 进一步减小项目之间的间距 */
padding: 5px 0; padding: 5px 0;
} }
/* 任务卡片样式 */ /* 任务卡片样式 */
.taskCard { .taskCard {
margin-left: 1%; 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; margin-bottom: 10px;
width: 380px; width: 380px;
font-size: 20px; font-size: 20px;
min-height: 240px; min-height: 240px;
border-radius: 7px; border-radius: 7px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 减小表单的间距 */ /* 减小表单的间距 */
.form-item { .form-item {
margin-bottom: 3px !important; margin-bottom: 3px !important;
} }
.taskCard .titleStyle { .taskCard .titleStyle {
font-size: 22px; font-size: 22px;
color: #FFFFFF; color: #ffffff;
} }
.taskCard .wordStyle { .taskCard .wordStyle {
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #ffffff;
} }
/* 按钮样式微调 */ /* 按钮样式微调 */
.editButton, .editButton,
.recordButton, .recordButton,
.deleteButton { .deleteButton {
margin: 0 3px !important; margin: 0 3px !important;
} }
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* 表单样式 */ /* 表单样式 */
.formStyle { .formStyle {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 0.5%; margin-top: 0.5%;
padding: 2px; padding: 2px;
} }
// 去除按钮边框 // 去除按钮边框
.el-button:focus { .el-button:focus {
outline: none; outline: none;
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
</style> </style>
...@@ -396,10 +402,10 @@ onMounted(() => { ...@@ -396,10 +402,10 @@ onMounted(() => {
} */ } */
.el-input { .el-input {
color: #FFFFFF; color: #ffffff;
} }
.el-select__placeholder { .el-select__placeholder {
color: #FFFFFF; color: #ffffff;
} }
</style> </style>
\ No newline at end of file
vite.config.ts
...@@ -31,7 +31,7 @@ export default defineConfig({ ...@@ -31,7 +31,7 @@ export default defineConfig({
proxy: { proxy: {
// 代理API请求，使用更精确的路径匹配 // 代理API请求，使用更精确的路径匹配
'/api': { '/api': {
target: 'http://192.168.0.176:5001/', target: 'http://192.168.3.10:5001/',
changeOrigin: true, changeOrigin: true,
}, },
} }
......
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