Skip to content

F
fk-spider-web
Commit 9d18f6e5 by yzh
Options

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

parent 4da0d493
Showing with 371 additions and 323 deletions
src/router/index.ts
......@@ -221,7 +221,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-taskInformation",
redirect: "/os-taskInformation/list",
......@@ -237,20 +236,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-taskManager",
redirect: "/os-status/list",
component: Layout,
children: [
{
path: "list",
name: "taskManager",
component: () => import("@/views/os-taskManager/index.vue"),
meta: { title: "任务执行记录", icon: "Key" }
},
]
} as unknown as RouteRecordRaw,
{
path: "/os-taskRecord",
redirect: "/os-taskRecord/list",
component: Layout,
......@@ -279,15 +264,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-preprocessingRecord",
redirect: "/os-preprocessingRecord/list",
path: "/os-spiderManager",
redirect: "/os-spiderManager/list",
component: Layout,
children: [
{
path: "list",
name: "preprocessingRecord",
component: () => import("@/views/os-preprocessingRecord/index.vue"),
meta: { title: "预处理记录", icon: "Key" }
name: "osSpiderManager",
component: () => import("@/views/os-spiderManager/index.vue"),
meta: { title: "爬虫管理", icon: "Key" }
},
]
} as unknown as RouteRecordRaw,
......@@ -301,11 +286,27 @@ export const constantRoutes: Array<RouteRecordRaw> = [
path: "list",
name: "osSystem",
component: () => import("@/views/os-system/index.vue"),
meta: { title: "开源系统管理", icon: "Key" }
meta: { title: "系统管理", icon: "Key" }
},
]
} as unknown as RouteRecordRaw,
{
path: "/os-log",
redirect: "/os-log/list",
component: Layout,
hidden: true,
children: [
{
path: "list",
name: "osLog",
component: () => import("@/views/os-log/index.vue"),
meta: { title: "日志", icon: "Key" }
},
]
} as unknown as RouteRecordRaw,
// 404 页面必须放在最后 !!!
// { path: '/:pathMatch(.*)*', redirect: '/404', hidden: true } as unknown as RouteRecordRaw
]
......
src/styles/_element.scss 0 → 100644
/* 表格最外层透明 */
.el-table,
.el-table__expanded-cell {
background-color: transparent;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
background-color: transparent !important;
}
/* 通过css变量修改el-table样式 */
.el-table {
// 表头
--el-table-header-text-color: #FFFFFF;
/* 行样式 */
--el-table-text-color: #FFFFFF;
.el-table__body {
tr {
// 行高
height: 48px;
// 行悬停效果
&:hover {
td {
background-color: #92b7ef88 !important;
}
}
}
}
}
.el-input{
--el-table-text-color: #FFFFFF;
}
\ No newline at end of file
src/styles/index.scss
......@@ -3,6 +3,7 @@
@forward 'layout';
@forward 'sidebar';
@forward 'transition';
@forward 'element';
/* 全局样式 */
html, body {
......
src/views/os-log/index.vue 0 → 100644
<template>
<div class="backStyle" @click="bactToRecord()">
</div>
<div class="m-t-4">
</div>
<div>
<el-input v-model="textarea" style="width: 93%" :rows="33" type="textarea" placeholder=" " />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const textarea = ref('')
const bactToRecord = () => {
router.push({
path: '/os-taskRecord/list',
})
}
</script>
<style scoped>
.backStyle{
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 8vh;
width: 9%;
display: flex;
margin-left: 2.5%;
}
</style>
<style>
.el-textarea__inner,.el-input__inner {
background: transparent !important;
color: #FFFFFF;
}
</style>
\ No newline at end of file
src/views/os-preprocessingRecord/index.vue → src/views/os-spiderManager/index.vue
<template>
<div class="text-left p-10">
<el-form inline>
<el-form-item label="目标选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 200px">
<el-option v-for="item in targetOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="预处理结果选择:">
<el-select v-model="errorValue" placeholder=" " style="width: 200px">
<el-option v-for="item in resOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger">批量处理</el-button>
</el-form-item>
</el-form>
<div class="mt-20">
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="标题" show-overflow-tooltip />
<el-table-column property="name" label="关键字" show-overflow-tooltip />
<el-table-column property="name" label="数据分类" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" width="200" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" width="200" show-overflow-tooltip />
<el-table-column label="操作" width="240">
<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="name" label="序号" />
<el-table-column property="address" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="success" plain @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
任务
</el-button>
</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" />
......@@ -95,13 +67,44 @@ const tableData = ref([
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
}
},
{
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 pageObj = ref({
total: 10,
......
src/views/os-taskManager/index.vue deleted 100644 → 0
<template>
<div class="m-t-7">
</div>
<div class="text-left p-6 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-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" />
</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-select>
</div>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-8">
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="address" label="任务名称" show-overflow-tooltip />
<el-table-column property="address" label="目标网址" show-overflow-tooltip />
<el-table-column property="status" label="是否启用">
<template #default="scope">
<el-switch v-model="scope.row.status" @change="changeSwitch(scope.row)" />
</template>
</el-table-column>
<el-table-column property="address" label="执行频率" show-overflow-tooltip />
<el-table-column property="address" label="执行次数" show-overflow-tooltip />
<el-table-column property="address" label="成功次数" show-overflow-tooltip />
<el-table-column property="address" label="失败次数" width="200" show-overflow-tooltip />
<el-table-column property="address" label="异常记录" width="200" show-overflow-tooltip />
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button size="small" plain type="success" @click="handleDetails(scope.row)">
详情
</el-button>
<el-button size="small" plain type="danger" @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
</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="getData" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { Search } from '@element-plus/icons-vue'
const searchInput = ref('')
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const errorOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
value: 'task3',
label: '反爬虫',
},
]
const tableData = ref([
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const paginationSize = ref('default')
const disabled = ref(false)
const background = ref(false)
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const changeSwitch = (row: any) => {
console.log(row);
}
const handleSizeChange = (val: number) => {
}
const handleCurrentChange = (val: number) => {
}
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped>
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
}
.el-text {
color: #FFFFFF;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
.el-date-picker__wrapper {
border: none;
}
</style>
\ No newline at end of file
src/views/os-taskRecord/index.vue
<template>
<div class="text-left p-10">
<div class="m-t-7">
</div>
<div class="text-left p-6 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item label="任务选择:">
<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>
<el-form-item>
<el-text class="mx-1">任务名称:</el-text>
</el-form-item>
<el-form-item label="异常选择:">
<el-select v-model="errorValue" placeholder=" " style="width: 220px">
<el-option v-for="item in errorOptions" :key="item.value" :label="item.label" :value="item.value" />
<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 label="时间:">
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
<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" />
</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-select>
</div>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
<el-button type="danger">批量确认</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
</div>
<div class="m-t-10">
</div>
<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="name" label="序号" width="55" />
<el-table-column property="address" label="任务名称" show-overflow-tooltip />
<el-table-column property="address" label="执行结果" show-overflow-tooltip />
<el-table-column property="address" label="收集数" show-overflow-tooltip />
<el-table-column property="address" label="丢弃数" show-overflow-tooltip />
<el-table-column property="address" label="异常信息" show-overflow-tooltip />
<el-table-column property="address" label="调度模式" show-overflow-tooltip />
<el-table-column property="status" label="调度状态" show-overflow-tooltip />
<el-table-column property="address" label="错误消息" show-overflow-tooltip />
<el-table-column property="address" label="运行状态" show-overflow-tooltip />
<el-table-column property="address" label="持续时间" show-overflow-tooltip />
<el-table-column property="address" label="开始时间" width="200" show-overflow-tooltip />
<el-table-column property="address" label="结束时间" width="200" show-overflow-tooltip />
<el-table-column label="操作" width="220">
<el-table-column property="address" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="success" @click="handleDetails(scope.row)">
详情
</el-button>
<el-button size="small" plain type="danger" @click="handleConfirm(scope.row)">
异常确认
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</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>
......@@ -58,7 +79,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchInput = ref('')
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
......@@ -100,6 +125,105 @@ const tableData = ref([
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
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
])
const pageObj = ref({
......@@ -109,10 +233,12 @@ const pageObj = ref({
})
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
router.push({
path: '/os-log/list',
query: {
id: row.id
}
})
}
const getData = () => {
......@@ -120,4 +246,56 @@ const getData = () => {
}
</script>
<style scoped></style>
<style scoped>
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
}
</style>
\ No newline at end of file
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