Skip to content

F
fk-spider-web
Commit e66e6c21 by yzh
Options

feat:完成了爬虫管理页面，任务执行记录页面

parent c91a0f1d
Showing with 138 additions and 210 deletions
src/api/apiPaths.ts
......@@ -77,4 +77,15 @@ export const userApi = {
updateUser: '/user/update',
deleteUser: '/user/delete',
batchDelete: '/user/batchDelete',
} as const
export const spiderApi = {
// 系统用户相关接口
spiderList: '/scrapyd/listSpiders',
} as const
export const spiderTaskApi = {
// 爬虫任务相关接口
taskList: '/schedule/getJobs',
taskRecord: '/schedule/scheduleLogs',
} as const
\ No newline at end of file
src/api/spiderTask.ts 0 → 100644
import { request, POST } from '@/utils/request'
import type { ApiResponse, QueryParams ,UserQueryParams } from '@/utils/request'
import { systemApi, scrapydServerApi, spiderApi,spiderTaskApi} from './apiPaths'
// 爬虫任务执行记录
export function getSpiderTaskRecord(data: UserQueryParams) {
return request({
url: spiderTaskApi.taskRecord,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 爬虫任务列表
export function getSpiderTaskList(data: UserQueryParams) {
return request({
url: spiderTaskApi.taskList,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
\ No newline at end of file
src/api/system.ts
import { request, POST } from '@/utils/request'
import type { ApiResponse, QueryParams } from '@/utils/request'
import { systemApi, scrapydServerApi } from './apiPaths'
import type { ApiResponse, QueryParams ,UserQueryParams } from '@/utils/request'
import { systemApi, scrapydServerApi, spiderApi } from './apiPaths'
// 获取系统信息
export function getSystemInfo(): Promise<ApiResponse> {
......@@ -52,3 +52,11 @@ export const getScrapydServerList = (): Promise<ApiResponse> => {
}) as unknown as Promise<ApiResponse>
}
// 爬虫列表
export function getSpiderList(data: UserQueryParams) {
return request({
url: spiderApi.spiderList,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
\ No newline at end of file
src/components/Delete/index.vue
......@@ -50,9 +50,9 @@ const handleDelelte = async () => {
}
else if (props.deleteMode == '2') {
console.log(props.ids);
await batchDeleteUser({ ids: props.ids })
emit('getUserList')
deleteDialogVisible.value = false
// await batchDeleteUser({ ids: props.ids })
// emit('getUserList')
// deleteDialogVisible.value = false
}
}
// 关闭弹窗的方法
......
src/utils/request.ts
......@@ -106,8 +106,11 @@ export interface UserQueryParams {
nickname?: string
password?: string
role?: number
status?: boolean
status?: any
id?: number
ids?: any
scrapydServerId?: string
project?: string
spiders?:any
times?:any
}
\ No newline at end of file
src/views/os-log/index.vue
......@@ -18,7 +18,7 @@ const textarea = ref('')
const bactToRecord = () => {
router.push({
path: '/os-taskRecord/list',
path: '/osTaskRecord/list',
})
}
</script>
......
src/views/os-spiderManager/index.vue
......@@ -4,9 +4,9 @@
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
<el-table-column type="selection" width="40" height="40" />
<el-table-column property="number" label="序号" />
<el-table-column property="spiderName" label="爬虫名称" show-overflow-tooltip />
<!-- <el-table-column type="selection" width="40" height="40" /> -->
<el-table-column property="number" label="序号" type="index" width="80" />
<el-table-column property="spider" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
......@@ -27,51 +27,9 @@
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'
import { getSpiderList } from '@/api/system.ts'
const router = useRouter()
const tableData = ref([
{
number: '1',
spiderName: 'sk网爬虫',
},
{
name: '2',
address: 'sk网',
},
{
name: '3',
address: 'sk网',
},
{
name: '4',
address: 'sk网',
},
{
name: '5',
address: 'sk网',
},
{
name: '6',
address: 'sk网',
},
{
name: '7',
address: 'sk网',
},
{
name: '8',
address: 'sk网',
},
{
name: '9',
address: 'sk网',
},
{
name: '10',
address: 'sk网',
},
])
const tableData = ref([])
const pageObj = ref({
total: 10,
pageSize: 10,
......@@ -86,11 +44,13 @@ const handleDetails = (row: any) => {
}
})
}
const getData = () => {
console.log('getData');
const getData = async () => {
const res = await getSpiderList({scrapydServerId:'1',project:'spiders'})
tableData.value = res.data
}
onMounted(() => {
getData()
})
</script>
......
src/views/os-system/index.vue
......@@ -95,6 +95,8 @@ const handleSelectionChange = (data: any) => {
array.push(data[i].id)
}
userIds.value = array
console.log(userIds.value);
}
const openAddUserDialog = () => {
......
src/views/os-taskInformation/components/addTaskDialog.vue
......@@ -12,7 +12,7 @@
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 181px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
......
src/views/os-taskInformation/components/taskCard.vue
......@@ -46,10 +46,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
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'
defineProps({
successTask: {
type: String,
......@@ -159,6 +160,17 @@ const handleEdit = () => {
const handleDeleteConfirm = () => {
}
const getData = async () => {
console.log('getData');
const res = await getSpiderTaskList({spiders:['api_spider']})
// taskList.value = res.data
console.log(res);
}
onMounted(() => {
getData()
})
</script>
<style lang="scss" scoped>
......
src/views/os-taskInformation/index.vue
<template>
<div>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
<div class="m-t-5" />
<div class="m-t-10" />
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
......@@ -36,10 +36,10 @@
</div>
<div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<!-- <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>
<!-- 添加任务对话框组件 -->
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
......@@ -54,10 +54,13 @@ 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'
const route = useRoute()
const router = useRouter()
const editMode = ref('1')
const taskValue = ref('')
const taskList = ref([])
const taskOptions = [
{
value: 'task1',
......@@ -77,9 +80,7 @@ const pageObj = ref({
pageSize: 10,
pageNo: 1
})
const getData = () => {
console.log('getData');
}
// 控制对话框显示/隐藏的状态变量
const showDialog = ref(false)
......@@ -105,8 +106,8 @@ onMounted(() => {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
height: 7vh;
width: 7%;
display: flex;
margin-left: 0.8%;
}
......
src/views/os-taskRecord/index.vue
......@@ -6,38 +6,28 @@
<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-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date"
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" 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"/>
</el-form-item>
<el-form-item>
<!-- <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-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-form-item>
<el-space>
<el-button type="primary">查询</el-button>
<el-button type="primary" @click="searchData">查询</el-button>
<el-button type="primary" @click="getData">重置表格</el-button>
</el-space>
</el-form-item>
</el-form>
......@@ -47,27 +37,36 @@
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="taskName" label="任务名称" show-overflow-tooltip />
<el-table-column property="scheduleMode" label="调度模式" show-overflow-tooltip />
<el-table-column property="scheduleStatus" label="调度状态" show-overflow-tooltip />
<el-table-column property="errorMessage" label="错误消息" show-overflow-tooltip />
<el-table-column property="runningStatus" label="运行状态" show-overflow-tooltip />
<el-table-column property="duration" label="持续时间" show-overflow-tooltip />
<el-table-column property="scheduleTime" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="project" label="项目名称" show-overflow-tooltip />
<el-table-column property="spider" label="所属爬虫" show-overflow-tooltip />
<el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
<el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
<template #default="scope">
{{ '已完成' }}
</template>
</el-table-column>
<el-table-column label="错误消息" show-overflow-tooltip>
<!-- 当错误消息为空时默认值为'-' -->
<template #default="scope">
{{ scope.row.message || '-' }}
</template>
</el-table-column>
<el-table-column property="run_status" label="运行状态" show-overflow-tooltip />
<!-- <el-table-column property="duration" label="持续时间" show-overflow-tooltip /> -->
<el-table-column property="create_time" label="调度时间" width="200" show-overflow-tooltip />
<!-- <el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
@pagination="getData" v-model:pagerCount="pageObj.pagerCount" />
</div>
</div>
</template>
......@@ -77,6 +76,7 @@ import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getSpiderTaskRecord } from '@/api/spiderTask.ts'
const route = useRoute()
const router = useRouter()
......@@ -96,121 +96,12 @@ const taskOptions = [
label: '网',
},
]
const tableData = ref([
{
number: '1',
taskName: 'dsn爬虫任务',
scheduleMode: '自动',
scheduleStatus: '自动',
errorMessage: '无',
runningStatus: '完成',
duration: '10s',
scheduleTime: '2023-05-13 10:00:00',
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
])
const tableData = ref([])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
pageNo: 1,
pagerCount: 5,
})
const handleDetails = (row: any) => {
console.log(row);
......@@ -235,12 +126,27 @@ const goToStatus = () => {
}
const getData = () => {
const getData = async () => {
console.log('getData');
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total' })
pageObj.value.total = res.data.total
tableData.value = res.data.list
console.log(res);
}
onMounted(() => {
const searchData = async () => {
let resTime = []
const startTime = timeValue.value[0]
const endTime = timeValue.value[1]
resTime.push(startTime)
resTime.push(endTime)
const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total' ,times: resTime})
pageObj.value.total = res.data.total
tableData.value = res.data.list
}
onMounted(() => {
getData()
})
</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