Merge branch 'yzh' into 'main'

修改cron组件

See merge request !8

src/api/apiPaths.ts

 // API路径配置文件
 // 这个文件确保所有API路径在一处统一管理，方便修改
 
+import { pauseJob } from "./schedule"
+
 export const authApi = {
   login: '/auth/login',
   logout: '/auth/logout'
@@ -53,8 +55,8 @@ export const scrapydServerApi = {
   deleteScrapydServer: '/scrapydServer/deleteScrapydServer'
 } as const
 
-export const systemApi = {
   // 系统相关
+export const systemApi = {
   systemInfo: '/system/systemInfo',
   systemData: '/system/systemData',
   systemConfig: '/system/systemConfig',
@@ -62,16 +64,16 @@ export const systemApi = {
   scrapydServerList: '/system/scrapydServerList'        // 没用
 } as const
 
-export const statsApi = {
   // 统计相关
+export const statsApi = {
   statsList: '/statsCollection/listItem',
   statsDetail: '/statsCollection/detail',
   removeStats: '/statsCollection/delete',
   clearAllStats: '/statsCollection/clearAll' // TODO 未实现
 } as const
 
-export const userApi = {
   // 系统用户相关接口
+export const userApi = {
   userList: '/user/list',
   addUser: '/user/insert',
   updateUser: '/user/update',
@@ -79,13 +81,28 @@ export const userApi = {
   batchDelete: '/user/batchDelete',
 } as const
 
-export const spiderApi = {
   // 系统用户相关接口
+export const spiderApi = {
   spiderList: '/scrapyd/listSpiders',
 } as const
 
-export const spiderTaskApi = {
   // 爬虫任务相关接口
+export const spiderTaskApi = {
   taskList: '/schedule/getJobs',
   taskRecord: '/schedule/scheduleLogs',
+  addTask: '/schedule/addJob',
+  deleteTask: '/schedule/removeJob',
+  pauseJob: '/schedule/pauseJob',
+  resumeJob: '/schedule/resumeJob',
+  jobDetail: '/schedule/jobDetail',
+} as const
+
+  // 爬虫数据相关接口
+export const spiderDataApi = {
+  dsnList: '/dsn/list',
+  dsnDetail: '/dsn/detail',
+  dsnDataDelete: '/dsn/delete',
+  ituList: '/itu/list',
+  ituDetail: '/itu/detail',
+  ituDataDelete: '/itu/delete',
 } as const
\ No newline at end of file

src/api/spiderData.ts

+import { request, POST } from '@/utils/request'
+import type { ApiResponse, QueryParams, UserQueryParams } from '@/utils/request'
+import { spiderDataApi } from './apiPaths'
+
+// 获取dsn数据列表
+export function getDsnlist(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.dsnList,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
+
+// 获取dsn数据详情
+export function getDsnDetail(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.dsnDetail,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
+
+// 删除dsn数据
+export function deleteDsnData(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.dsnDataDelete,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
+
+// 获取itu数据列表
+export function getItulist(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.ituList,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
+
+// 获取itu数据详情
+export function getItuDetail(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.ituDetail,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
+
+// 删除itu数据
+export function deleteItuData(data: UserQueryParams) {
+    return request({
+        url: spiderDataApi.ituDataDelete,
+        method: POST,
+        data
+    }) as unknown as Promise<ApiResponse>
+}
\ No newline at end of file

src/api/spiderTask.ts

@@ -19,3 +19,48 @@ export function getSpiderTaskList(data: UserQueryParams) {
     data
   }) as unknown as Promise<ApiResponse>
 }
+
+// 新增/更新爬虫任务
+export function addSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.addTask,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 删除爬虫任务
+export function deleteSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.deleteTask,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 暂停爬虫任务
+export function pauseSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.pauseJob,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 继续爬虫任务
+export function resumeSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.resumeJob,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 获取爬虫任务数据
+export function getTaskData(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.jobDetail,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
\ No newline at end of file

src/components/Crontab/index.ts

+import Crontab from './src/Crontab.vue'
+export { Crontab }

src/components/Delete/enum.ts

@@ -3,5 +3,6 @@
 export enum DeleteMode {
   BATCH_DELETE = 0,
   SINGLE_DELETE = 1,
+  JOB_DELETE = 2,
 }
 

src/components/Delete/index.vue

@@ -23,7 +23,7 @@ interface deleteDialogPropType {
 	dialogVisible: boolean,
 	deleteMode: DeleteMode,
 	id: number,
-	ids: number[]
+	ids: number[],
 }
 const props = defineProps<deleteDialogPropType>()
 const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
@@ -35,7 +35,6 @@ const handleDelelte = async () => {
 		await deleteUser({ id: props.id })
 		emit('getUserList')
 		deleteDialogVisible.value = false
-
 	}
 	else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
 		console.log(props.ids);

src/utils/request.ts

@@ -111,6 +111,12 @@ export interface UserQueryParams {
   ids?: any
   scrapydServerId?: string
   project?: string
-  spiders?:any
-  times?:any
+  spiders?: any
+  times?: any
+  job_id?: string
+  scrapyd_server_id?: string
+  schedule_type?: string
+  spider?: string
+  cron?: string
+  options?: string
 }
\ No newline at end of file

src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue

@@ -200,9 +200,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import exportDialog from '@/components/Export/index.vue'
+import { getDsnlist, getDsnDetail, deleteDsnData } from '@/api/spiderData'
 
 const showDeleteDialog = ref(false)
 const timeValue = ref('')
@@ -243,51 +244,7 @@ const recordTime = ref('')
 const isSuspended = ref('')
 
 const tableData = ref([
-	{
-		number: '1',
-		targetName: 'maven',
-		distance: '2000',
-		roundTripTime: '12',
-		stationName: 'CANBERRA',
-		targetAzimuth: '11',
-		targetElevation: '24',
-		targetDistance: '2000',
-		windSpeed: '10',
-		upSignalSource: 'maven',
-		upSignalFrequencyBand: 'X',
-		upSignalLaunchPower: '123',
-		downSignalSignalSource: 'maven',
-		downSignalFrequencyBand: 'S',
-		downSignalReceptionPower: '23',
-		dataTime: '2025-06-21 12:00:00',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
+	
 ])
 const pageObj = ref({
 	total: 10,
@@ -299,8 +256,11 @@ const handleDetails = (row: any) => {
 	detailVisibleValue.value = true
 }
 
-const getData = () => {
+const getData = async () => {
 	console.log('getData');
+	const res = await getDsnlist({page:pageObj.value.pageNo,size:pageObj.value.pageSize})
+	tableData.value = res.data.list
+	pageObj.value.total = res.data.total
 }
 
 const handleClose = () => {
@@ -312,6 +272,9 @@ const handleExportConfirm = () => {
 const handleExport = () => {
 	showDeleteDialog.value = true
 }
+onMounted(() => {
+	getData()
+})
 </script>
 
 <style scoped lang="scss">

src/views/os-dataDisplay/components/ituDataTab.vue

@@ -242,9 +242,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import exportDialog from '@/components/Export/index.vue'
+import { getItulist, getItuDetail, deleteItuData } from '@/api/spiderData'
 
 const showDeleteDialog = ref(false)
 const timeValue = ref('')
@@ -295,55 +296,7 @@ const isRestoreUsed = ref('')
 const validityPeriodSatelliteNetworkOldName = ref('')
 // 最新相关 BR IFIC 发布日期
 const BFIFICdate = ref('')
-const tableData = ref([
-	{
-		number: '1',
-		SNSNoticeID: '86550007',
-		department: 'ARG',
-		targetName: 'ARGOS',
-		planType: '计划',
-		syncType: '否',
-		syncPosition: '-',
-		perigee: '2000',
-		apogee: '2500',
-		lowestAltitude: '165',
-		referenceSubject: '地球',
-		lowestFrequency: 'None',
-		highestFrequency: 'None',
-		status: 'None',
-		validityPeriod: '-',
-		earliestUsageDate: 'None',
-		isUsed: 'No',
-		isPauseUsed: 'No',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-])
+const tableData = ref([])
 const pageObj = ref({
 	total: 10,
 	pageSize: 10,
@@ -353,8 +306,11 @@ const handleDetails = (row: any) => {
 	console.log(row);
 	detailVisibleValue.value = true
 }
-const getData = () => {
-	console.log('getData');
+const getData = async () => {
+	const res = await getItulist({page:pageObj.value.pageNo,size:pageObj.value.pageSize})
+	pageObj.value.total = res.data.length
+	tableData.value = res.data
+
 }
 const handleClose = () => {
 	detailVisibleValue.value = false
@@ -365,6 +321,10 @@ const handleExportConfirm = () => {
 const handleExport = () => {
 	showDeleteDialog.value = true
 }
+
+onMounted(() => {
+	getData()
+})
 </script>
 
 <style scoped lang="scss">

src/views/os-system/components/addUserDialog.vue

@@ -157,12 +157,11 @@ const handleConfirm = async () => {
 			if (!firstRuleFormRef.value) {
 				return;
 			}
-			// 3. 使用Promise形式的validate（不传入回调），确保await生效
+			// 使用Promise形式的validate（不传入回调），确保await生效
 			const valid = await firstRuleFormRef.value.validate();
 			if (valid) {
-				// 进入这里即197行附近逻辑
 				await addUser({
-					nickname: firstForm.value.userName, // 注意：根据实际接口字段调整
+					nickname: firstForm.value.userName, 
 					username: firstForm.value.userAccount,
 					password: firstForm.value.userPassword,
 					role: userRoleValue.value,

src/views/os-system/index.vue

@@ -37,7 +37,6 @@
 		<deleteDialog v-model:dialogVisible="showDeleteDialog"  @get-user-list="getUserListData"
 			:ids="userIds" :deleteMode="deleteMode" :id="userId" />
 		<!-- 创建用户弹窗组件 -->
-		 <!-- todo -->
 		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nickName="nickName" :userName="userName"
 			:id="userId" :userRole="userRole" :userStatus="userStatus" :userPassword="userPassword"
 			@get-user-list="getUserListData" />

src/views/os-taskInformation/components/addTaskDialog.vue

 <template>
-	<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center
-		@close="handleClose" draggable>
-		<el-form :inline="true" v-if="currentMode === '1'">
-			<el-form-item label="任务名称:">
-				<el-input v-model="taskName" placeholder="请输入任务名称" />
+	<el-dialog v-model="currentVisible" :title="currentMode === AddMode.ADD_TASK ? '新增' : '修改'" width="710" center
+		align-center @close="handleClose" draggable>
+		<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
+			<el-form-item label="任务名称:" v-if="currentMode === AddMode.ADD_TASK" prop="taskName">
+				<el-input v-model="ruleForm.taskName" placeholder="请输入任务名称"style="width: 90%" />
 			</el-form-item>
-			<el-form-item label="执行时间:">
-				<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
-			</el-form-item>
-		</el-form>
-		<div class="m-t-4" />
-		<el-form :inline="true">
-			<el-form-item label="所属爬虫:">
-				<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 181px">
+			<el-form-item label="所属爬虫:" v-if="currentMode === AddMode.ADD_TASK" prop="spiderTypeValue">
+				<el-select v-model="ruleForm.spiderTypeValue" placeholder="请选择所属爬虫" style="width: 90%">
 					<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</el-form-item>
-			<el-form-item label="执行频率:">
-				<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
-			</el-form-item>
-		</el-form>
-		<div class="m-t-4" />
-		<el-form :inline="true">
-			<el-form-item label="启用/停止:">
-				<el-switch v-model="taskSwitchValue" class="ml-2"
-					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+			<el-form-item label="执行频率:" prop="cronExpression">
+				<Crontab v-model="ruleForm.cronExpression" style="width: 90%" />
 			</el-form-item>
 		</el-form>
 		<template #footer>
@@ -39,65 +26,125 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { defineProps } from 'vue';
 import { watch } from 'vue'
+import { addSpiderTask } from '@/api/spiderTask'
+import { AddMode } from './enum'
+import { Crontab } from '@/components/Crontab/index'
+import type { FormInstance, FormRules } from 'element-plus'
 
-const props = defineProps({
-	dialogVisible: {
-		type: Boolean,
-		default: false
-	},
-	mode: {
-		type: String,
-		default: '1'
-	},
-	spiderType: {
-		type: String,
-		default: ''
+interface RuleForm {
+	taskName: string
+	spiderTypeValue: string
+	cronExpression: string
+}
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref<RuleForm>({
+	taskName: '',
+	spiderTypeValue: '',
+	cronExpression: '',
+})
+interface addDialogPropType {
+	dialogVisible: boolean,
+	mode: AddMode,
+	jobId: string,
+	cron: string,
+	spiderType: string,
+	options: string,
+}
+const props = defineProps<addDialogPropType>()
+const rules = ref<FormRules<RuleForm>>({
+	taskName: [
+		{ required: true, message: '请输入任务名称', trigger: 'blur' },
+		{ min: 1, max: 50, message: '任务名称应在1-50个字符之间', trigger: 'blur' },
+	],
+	spiderTypeValue: [
+		{
+			required: true,
+			message: '请选择所属爬虫',
+			trigger: 'change',
 		},
-	frequency: {
-		type: String,
-		default: ''
+	],
+	cronExpression: [
+		{
+			required: true,
+			message: '请输入执行频率',
+			trigger: 'change',
 		},
-	taskStatus: {
-		type: Boolean,
-		default: false
-	}
+		{ min: 1, message: '执行频率应为cron表达式', trigger: 'blur' },
+	]
 })
 // 向父组件传递dialog值
-const emit = defineEmits(['update:dialogVisible', 'confirm'])
+const emit = defineEmits(['update:dialogVisible', 'confirm', 'update:mode', 'getTaskList'])
 // 组件的状态
 const currentVisible = ref(props.dialogVisible)
 const currentMode = ref(props.mode)
 const taskName = ref('')
-const taskFrequency = ref('')
-const taskSwitchValue = ref(false)
 const spiderTypeValue = ref('')
 const spiderTypeOptions = ref([
 	{
-		value: '选项1',
-		label: 'DSN爬虫'
+		value: 'api_spider',
+		label: 'api_spider'
 	},
 	{
-		value: '选项2',
-		label: 'ITU爬虫'
+		value: 'dsn_now',
+		label: 'dsn_now'
 	},
 	{
-		value: '选项3',
-		label: 'ST爬虫'
+		value: 'itu_space_explorer',
+		label: 'itu_space_explorer'
 	},
 ])
-
+const taskParams = ref({
+	scrapyd_server_id: '1',
+	schedule_type: '0',
+	project: 'spiders'
+})
+const cronExpression = ref('')
 
 // 关闭的方法
 const handleClose = () => {
+	ruleForm.value.taskName = ''
+	ruleForm.value.spiderTypeValue
+	ruleForm.value.cronExpression = ''
 	currentVisible.value = false
 }
 // 确定的方法
-const handleConfirm = () => {
-	emit('confirm')
+const handleConfirm = async () => {
+	if (!ruleFormRef.value) return
+	await ruleFormRef.value.validate(async (valid, fields) => {
+		console.log('开始校验');
+		//验证表单内容是否通过，通过继续执行
+		if (valid) {
+			if (currentMode.value === AddMode.ADD_TASK) {
+				await addSpiderTask({
+					scrapyd_server_id: taskParams.value.scrapyd_server_id,
+					schedule_type: taskParams.value.schedule_type,
+					project: taskParams.value.project,
+					spider: ruleForm.value.spiderTypeValue,
+					cron: ruleForm.value.cronExpression,
+					options: JSON.stringify({ jobName: ruleForm.value.taskName })
+				})
+				currentVisible.value = false
+				emit('getTaskList')
+			} else if (currentMode.value === AddMode.UPDATE_TASK) {
+				await addSpiderTask({
+					scrapyd_server_id: taskParams.value.scrapyd_server_id,
+					schedule_type: taskParams.value.schedule_type,
+					project: taskParams.value.project,
+					spider: props.spiderType,
+					job_id: props.jobId,
+					cron: ruleForm.value.cronExpression,
+					options: props.options
+				})
 				currentVisible.value = false
+				emit('getTaskList')
+			}
+		} else {
+			console.log('校验不通过');
+		}
+	})
 }
 
 // 监听props变化，同步给组件内部
@@ -119,6 +166,28 @@ watch(() => props.mode,
 		currentMode.value = newVal
 	}
 )
+
+watch(() => currentMode.value,
+	(newVal) => {
+		emit('update:mode', newVal)
+	}
+)
+watch(
+	[() => props.dialogVisible, () => props.mode, () => props.cron],
+	([newVisible, newMode, newCron]) => {
+		if (newVisible && newMode === AddMode.UPDATE_TASK) {
+			ruleForm.value.cronExpression = newCron;
+		}
+		if (!newVisible) {
+			// 清空表单
+			cronExpression.value = ''
+		}
+	},
+	{ immediate: true }
+);
+onMounted(() => {
+
+})
 </script>
 
 <style>
@@ -133,6 +202,10 @@ watch(() => props.mode,
 	.el-dialog__title {
 		color: #ffffff;
 	}
+
+	.el-input__inner {
+		color: #ffffff;
+	}
 }
 
 /* 修改表单样式 */

src/views/os-taskInformation/components/deleteDialog.vue

+<template>
+	<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
+		<div class="text-center">
+			<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
+		</div>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="close">取消</el-button>
+				<el-button type="primary" @click="handleDelelte">
+					确定
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { defineProps } from 'vue';
+import { deleteSpiderTask } from '@/api/spiderTask.ts'
+interface deleteDialogPropType {
+	dialogVisible: boolean,
+	jobId: string
+}
+const props = defineProps<deleteDialogPropType>()
+const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
+const deleteDialogVisible = ref(props.dialogVisible)
+// 删除方法
+const handleDelelte = async () => {
+    await deleteSpiderTask({job_id: props.jobId})
+    emit('getUserList')
+    deleteDialogVisible.value = false
+}
+
+// 关闭弹窗的方法
+const close = () => {
+	deleteDialogVisible.value = false
+}
+// 监听父组件传过来的值
+watch(() => props.dialogVisible,
+	(newVal) => {
+		deleteDialogVisible.value = newVal
+	}
+)
+// 监听组件内的值并向父组件更新
+watch(() => deleteDialogVisible.value,
+	(newVal) => {
+		emit('update:dialogVisible', newVal)
+	}
+)
+
+</script>
\ No newline at end of file

src/views/os-taskInformation/components/enum.ts

+/// @ts-ignore
+export enum AddMode {
+  ADD_TASK = 0,
+  UPDATE_TASK = 1,
+}
\ No newline at end of file

src/views/os-taskInformation/components/taskCard.vue

 <!-- 任务执行统计卡片组件 -->
 <template>
-	<div class="taskCard  p-6" v-for="task in taskList" :key="task.taskId">
-		<div class="flex justify-center">
+	<div class="text-left p-4 toolbarStyle ">
+		<div class="formStyle">
+			<el-form inline>
 				<el-form-item>
-				<span class="titleStyle">任务名称</span>
+					<el-text class="mx-1" style="color: #fff;">所属爬虫:</el-text>
 				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-select v-model="searchCondition.spiders" placeholder="请选择" style="width: 220px">
+							<el-option v-for="item in taskSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</div>
+				</el-form-item>
+				<el-form-item>
+					<el-text class="mx-1" style="color: #fff;">任务名称:</el-text>
+				</el-form-item>
+				<el-form-item>
+					<el-input v-model="taskName" placeholder="请输入" style="width: 220px" />
+				</el-form-item>
+				<el-form-item>
+					<el-space>
+						<el-button type="primary" @Click="getData">查询</el-button>
+					</el-space>
+				</el-form-item>
+				<el-form-item>
+					<el-space>
+						<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
+					</el-space>
+				</el-form-item>
+			</el-form>
 		</div>
-		<div class="flex justify-center ">
+	</div>
+	<div class="cardStyle">
+		<div class="taskCard  p-6 " v-for="task in taskList" :key="task.taskId">
+			<div class="taskContent">
+				<div>
+					<el-form-item>
+						<span class="titleStyle">{{ task.kwargs.options === '' ? '无名称' : JSON.parse(task.kwargs.options).jobName
+						}}</span>
+					</el-form-item>
+				</div>
+				<div>
 					<el-form-item>
-				<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
+						<el-button type="primary" @click="editTask(task)" class="editButton">编辑</el-button>
 						<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
-				<el-button type="danger" @click="deleteTask" class="deleteButton">删除</el-button>
+						<el-button type="danger" @click="deleteTask(task)" class="deleteButton">删除</el-button>
 					</el-form-item>
 				</div>
-		<div class="wordStyle flex justify-center">
+				<div class="wordStyle">
 					<el-form-item>
 						<el-space>
 							<span class="wordStyle">启用/停止: </span>
-					<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
+							<el-switch v-model="task.status" :active-value="'running'" :inactive-value="'paused'"
+								@change="(newStatus:any) => changeStatus(task, newStatus)"  />
 							<span class="wordStyle">执行频率: {{ task.frequency }} </span>
 						</el-space>
 					</el-form-item>
 				</div>
-		<div class="wordStyle flex justify-center">
+				<div class="wordStyle">
 					<el-form-item>
 						<el-space>
-					<span class="wordStyle">执行次数: {{ task.executeCount }} 个; </span>
-					<span class="wordStyle">成功次数: {{ task.successCount }} 个</span>
+							<span class="wordStyle">执行次数: 个; </span>
+							<span class="wordStyle">成功次数: 个</span>
 						</el-space>
 					</el-form-item>
 				</div>
-		<div class="wordStyle flex justify-center">
+				<div class="wordStyle ">
 					<el-form-item>
 						<el-space>
-					<span class="wordStyle">失败次数: {{ task.failCount }} 个; </span>
-					<span class="wordStyle">异常记录: {{ task.unusualCount }} 个</span>
+							<span class="wordStyle">失败次数: 个; </span>
+							<span class="wordStyle">异常记录: 个</span>
 						</el-space>
 					</el-form-item>
 				</div>
 			</div>
+		</div>
+	</div>
 
-	<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
-	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
+	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" @getTaskList="getData"
+		:jobId="jobId" :cron="frequency" :spiderType="spiderType" :options="taskOptions" />
+
+	<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getData" :jobId="jobId" />
 
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import deleteDialog from '@/components/Delete/index.vue'
 import addTaskDialog from './addTaskDialog.vue'
-import { getSpiderTaskList } from '@/api/spiderTask'
+import { getSpiderTaskList, resumeSpiderTask, pauseSpiderTask } from '@/api/spiderTask'
+import { DeleteMode } from '@/components/Delete/enum.ts'
+import { AddMode } from './enum'
+import deleteDialog from './deleteDialog.vue'
 defineProps({
 	successTask: {
 		type: String,
@@ -65,82 +107,53 @@ defineProps({
 		default: ''
 	}
 })
-const router = useRouter()
-const editMode = ref('')
-const deleteMode = ref('1')
-const showDeleteDialog = ref(false)
-const showTaskDialog = ref(false)
-const taskSwitch = ref(false)
-const taskList = ref([
-	{
-		taskId: '1',
-		taskName: '任务1',
-		status: 1,
-		frequency: '1',
-		executeCount: '2',
-		successCount: '3',
-		failCount: '4',
-		unusualCount: '5'
-	},
-	{
-		taskId: '2',
-		taskName: '任务2',
-		status: 0,
-		frequency: '6',
-		executeCount: '7',
-		successCount: '8',
-		failCount: '9',
-		unusualCount: '10'
-	},
+const taskSelectOptions = [
 	{
-		taskId: '3',
-		taskName: '任务3',
-		status: 1,
-		frequency: '11',
-		executeCount: '12',
-		successCount: '13',
-		failCount: '14',
-		unusualCount: '15'
+		value: 'api_spider',
+		label: 'api_spider',
 	},
 	{
-		taskId: '4',
-		taskName: '任务4',
-		status: 0,
-		frequency: '16',
-		executeCount: '17',
-		successCount: '18',
-		failCount: '19',
-		unusualCount: '20'
+		value: 'dsn_now',
+		label: 'dsn_now',
 	},
 	{
-		taskId: '5',
-		taskName: '任务5',
-		status: 1,
-		frequency: '21',
-		executeCount: '22',
-		successCount: '23',
-		failCount: '24',
-		unusualCount: '25'
+		value: 'itu_space_explorer',
+		label: 'itu_space_explorer',
 	},
-	{
-		taskId: '6',
-		taskName: '任务6',
-		status: 0,
-		frequency: '26',
-		executeCount: '27',
-		successCount: '28',
-		failCount: '29',
-		unusualCount: '30'
-	},
-])
+]
+const searchCondition = ref({
+	spiders: '',
+	options: ''
+})
+const taskName = ref('')
+const taskValue = ref('')
+const spiderType = ref('')
+const router = useRouter()
+const frequency = ref('')
+const editMode = ref(AddMode.UPDATE_TASK)
+const deleteMode = ref(DeleteMode.SINGLE_DELETE)
+const showDeleteDialog = ref(false)
+const showTaskDialog = ref(false)
+const taskSwitch = ref(false)
+const taskOptions = ref('')
+const jobId = ref('')
+const taskList = ref<any[]>([])
 
-const deleteTask = () => {
-	deleteMode.value = '1'
+const deleteTask = (task: any) => {
+	console.log(task);
+	jobId.value = task.id
+	deleteMode.value = DeleteMode.SINGLE_DELETE
 	showDeleteDialog.value = true
 }
-const editTask = () => {
-	editMode.value = '2'
+const editTask = (task: any) => {
+	jobId.value = task.id
+	taskOptions.value = JSON.stringify(JSON.parse(task.kwargs.options))
+	spiderType.value = task.kwargs.spider
+	frequency.value = task.kwargs.cron
+	editMode.value = AddMode.UPDATE_TASK
 	showTaskDialog.value = true
+	// console.log(JSON.stringify(JSON.parse(task.kwargs.options)));
+
 }
 const goToTaskRecord = () => {
 	router.push({
@@ -151,29 +164,43 @@ const goToTaskRecord = () => {
 		}
 	})
 }
-const changeStatus = (task: any) => {
-
-}
+const changeStatus = async (task: any, newStatus: string) => {
+  if (newStatus === "running") { 
+    await resumeSpiderTask({ job_id: task.id });
+  } else if (newStatus === "paused") {
+    await pauseSpiderTask({ job_id: task.id });
+  }
+  await getData();
+};
 const handleEdit = () => {
 
 }
-const handleDeleteConfirm = () => {
-
+const openTaskDialog = () => {
+	editMode.value = AddMode.ADD_TASK
+	showTaskDialog.value = true
 }
 const getData = async () => {
-  console.log('getData');
-  const res = await getSpiderTaskList({spiders:['api_spider']})
-//   taskList.value = res.data
-  console.log(res);
-  
+	const res = await getSpiderTaskList({ spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [], options: JSON.stringify({ jobName: taskName.value }) })
+	taskList.value = res.data
 }
 
 onMounted(() => {
 	getData()
+
 })
 </script>
 
 <style lang="scss" scoped>
+.taskContent {
+	display: flex;
+	flex-direction: column; // 垂直排列
+	align-items: center; // 水平居中
+	justify-content: center; // 垂直居中
+	height: 100%;
+	gap: -15px;
+	padding: 10px 0;
+}
+
 // .editButton{
 // 	background: none;
 //     background-image: url("@/assets/picture/button1.png");
@@ -192,6 +219,15 @@ onMounted(() => {
 //     background-size: 100% 100%;
 //     background-repeat: no-repeat;
 // }
+.cardStyle {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	margin-top: 1.5%;
+	padding: 8px;
+	height: 26vh;
+}
+
 // 任务卡片样式
 .taskCard {
 	background-image: url("@/assets/picture/box2.png");
@@ -202,6 +238,8 @@ onMounted(() => {
 	font-size: 20px;
 	height: 100%;
 	border-radius: 7px;
+	display: flex;
+	flex-direction: column;
 
 	.titleStyle {
 		font-size: 22px;
@@ -216,6 +254,21 @@ onMounted(() => {
 	}
 }
 
+/* 工具栏样式 */
+.toolbarStyle {
+	background-image: url("@/assets/picture/box3.png");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+}
+
+/* 表单样式 */
+.formStyle {
+	display: flex;
+	justify-content: space-around;
+	margin-top: 0.5%;
+	padding: 2px;
+}
+
 // 去除按钮边框
 .el-button:focus {
 	outline: none;
@@ -229,4 +282,8 @@ onMounted(() => {
 	color: #ffffff;
 	border: none;
 } */
+
+.el-input {
+	color: #FFFFFF;
+}
 </style>
\ No newline at end of file

src/views/os-taskInformation/index.vue

@@ -2,63 +2,27 @@
   <div>
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
     <div class="m-t-10" />
-    <div class="text-left p-4 toolbarStyle">
-      <div class="formStyle">
-        <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1">所属爬虫:</el-text>
-          </el-form-item>
-          <el-form-item>
-            <div>
-              <el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
-                <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-text class="mx-1">任务名称:</el-text>
-          </el-form-item>
-          <el-form-item>
-            <el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
-          </el-form-item>
-          <el-form-item>
-            <el-space>
-              <el-button type="primary">查询</el-button>
-            </el-space>
-          </el-form-item>
-          <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
-            </el-space>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <div class="cardStyle">
+    <div >
       <taskCard successTask="100" 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>
-    <!-- 添加任务对话框组件 -->
-    <addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
   </div>
-
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import taskCard from './components/taskCard.vue'
-import addTaskDialog from './components/addTaskDialog.vue'
 import { useRouter } from 'vue-router'
 import { useRoute } from 'vue-router'
-import { getSpiderTaskList } from '@/api/spiderTask'
+import { getSpiderTaskList,getTaskData } from '@/api/spiderTask'
+import { AddMode } from './components/enum'
 
 const route = useRoute()
 const router = useRouter()
-const editMode = ref('1')
 const taskValue = ref('')
 const taskList = ref([])
 const taskOptions = [
@@ -81,23 +45,9 @@ const pageObj = ref({
   pageNo: 1
 })
 
-// 控制对话框显示/隐藏的状态变量
-const showDialog = ref(false)
-
-// 处理删除确认
-const handleDeleteConfirm = () => {
-  console.log('用户确认删除')
-
-}
-
-const openTaskDialog = () => {
-  showDialog.value = true
-}
 const goToTaskInformation = () => {
   router.push({ path: '/osSpiderManager/list' })
 }
-onMounted(() => {
-})
 </script>
 
 <style scoped>