Skip to content

F
fk-spider-web
Commit 58a93d86 by yzh
Options

feat:修改了按钮点击时会有黑框的问题，修改了所有表格的布局

parent a1c51994
Showing with 287 additions and 193 deletions
src/components/AutoRefresh.vue
......@@ -101,4 +101,8 @@ onBeforeUnmount(() => {
color: #666666;
font-size: 12px;
}
.el-button:focus {
outline: none;
}
</style>
src/views/os-dataDisplay/index.vue
......@@ -3,19 +3,19 @@
<el-form inline>
<el-form-item label="目标选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 140px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in sortOptions" :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: 140px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="关键词搜索:">
<el-input v-model="searchInput" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
<el-input v-model="searchInput" style="width: 220px" placeholder="Search" :prefix-icon="Search" />
</el-form-item>
<el-form-item label="时间:">
<el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
......@@ -28,15 +28,15 @@
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55" />
<el-table-column property="name" label="序号" width="60" />
<el-table-column property="name" label="目标名称" width="160" show-overflow-tooltip />
<el-table-column property="name" label="标题" width="160" show-overflow-tooltip />
<el-table-column property="name" label="关键字" width="160" show-overflow-tooltip />
<el-table-column property="name" label="数据分类" width="160" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" width="220" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" width="220" show-overflow-tooltip />
<el-table-column label="操作">
<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">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
......@@ -71,18 +71,18 @@ const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const taskOptions = [
const sortOptions = [
{
value: 'task1',
label: 'sk网',
label: '基础信息',
},
{
value: 'task2',
label: 'nasa网',
label: '信号信息',
},
{
value: 'task3',
label: '网',
label: '其他信息',
},
]
const tableData = ref([
......
src/views/os-preprocessingRecord/index.vue
......@@ -3,16 +3,16 @@
<el-form inline>
<el-form-item label="目标选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 200px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<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 taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<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 v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
......@@ -24,23 +24,23 @@
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55" />
<el-table-column property="name" label="序号" width="60" />
<el-table-column property="name" label="目标名称" width="160" show-overflow-tooltip />
<el-table-column property="name" label="标题" width="160" show-overflow-tooltip />
<el-table-column property="name" label="关键字" width="160" show-overflow-tooltip />
<el-table-column property="name" label="数据分类" width="160" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" width="220" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" width="220" show-overflow-tooltip />
<el-table-column label="操作">
<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">
<template #default="scope">
<el-button type="primary" @click="handleDetails(scope.row)">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="success" @click="handleDetails(scope.row)">
<el-button type="success" plain @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="danger" @click="handleConfirm(scope.row)">
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
......@@ -67,7 +67,7 @@ const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const taskOptions = [
const targetOptions = [
{
value: 'task1',
label: 'sk网',
......@@ -81,6 +81,20 @@ const taskOptions = [
label: '网',
},
]
const resOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
value: 'task3',
label: '反爬虫',
},
]
const tableData = ref([
{
name: '1',
......
src/views/os-status/components/dataCard.vue
......@@ -88,7 +88,7 @@ defineProps({
width: 400px;
height: 14vh;
border-radius: 5px;
// min-width: 200px;
.titleStyle {
font-size: 22px;
}
......
src/views/os-status/components/integratedMonitoringBox.vue
......@@ -5,7 +5,6 @@
<span>综合监控</span>
</div>
<dataCard>
</dataCard>
</div>
</template>
......
src/views/os-system/index.vue
......@@ -3,7 +3,7 @@
<el-form inline>
<el-form-item label="角色选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 200px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in rolesOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
......@@ -15,21 +15,21 @@
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55" />
<el-table-column property="name" label="序号" width="100" />
<el-table-column property="name" label="用户名" width="280" show-overflow-tooltip />
<el-table-column property="name" label="用户名称" width="280" show-overflow-tooltip />
<el-table-column property="name" label="角色" width="280" show-overflow-tooltip />
<el-table-column property="name" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作">
<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 label="操作" width="240">
<template #default="scope">
<el-button type="primary" @click="handleDetails(scope.row)">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="success" @click="handleDetails(scope.row)">
<el-button type="success" plain @click="handleDetails(scope.row)">
详情
</el-button>
<el-button type="danger" @click="handleConfirm(scope.row)">
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
......@@ -56,18 +56,14 @@ const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const taskOptions = [
const rolesOptions = [
{
value: 'task1',
label: 'sk网',
label: '管理员',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
label: '用户',
},
]
const tableData = ref([
......
src/views/os-taskInformation/components/taskCard.vue
......@@ -104,4 +104,7 @@ const options = [
font-size: 16px;
}
}
.el-button:focus {
outline: none;
}
</style>
src/views/os-taskRecord/index.vue
......@@ -2,17 +2,17 @@
<div class="text-left p-10">
<el-form inline>
<el-form-item label="任务选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 240px">
<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-form-item label="异常选择:">
<el-select v-model="errorValue" placeholder=" " style="width: 240px">
<el-select v-model="errorValue" 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-form-item label="时间:">
<el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
<el-date-picker style="width: 240px" v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
......@@ -24,22 +24,22 @@
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55" />
<el-table-column property="name" label="序号" width="60" />
<el-table-column property="address" label="任务名称" width="150" show-overflow-tooltip />
<el-table-column property="address" label="执行结果" width="150" show-overflow-tooltip />
<el-table-column property="address" label="收集数" width="130" show-overflow-tooltip />
<el-table-column property="address" label="丢弃数" width="130" show-overflow-tooltip />
<el-table-column property="address" label="异常信息" width="170" show-overflow-tooltip />
<el-table-column property="address" label="持续时间" width="170" show-overflow-tooltip />
<el-table-column property="address" label="开始时间" width="170" show-overflow-tooltip />
<el-table-column property="address" label="结束时间" width="170" show-overflow-tooltip />
<el-table-column label="操作">
<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="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" type="success" @click="handleDetails(scope.row)">
<el-button size="small" plain type="success" @click="handleDetails(scope.row)">
详情
</el-button>
<el-button size="small" type="danger" @click="handleConfirm(scope.row)">
<el-button size="small" plain type="danger" @click="handleConfirm(scope.row)">
异常确认
</el-button>
</template>
......
src/views/project/index.vue
<template>
<div class="app-container">
<!-- 添加服务器选择器 -->
<SelectScrapydServer
v-model:value="scrapydServerId"
@change="handleServerChange"
@on-init="handleServerInit"
/>
<SelectScrapydServer v-model:value="scrapydServerId" @change="handleServerChange" @on-init="handleServerInit" />
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>爬虫项目管理</span>
<div class="right-panel">
<el-button type="primary" @click="handleAddProject">
<el-icon><Plus /></el-icon>添加项目
<el-icon>
<Plus />
</el-icon>添加项目
</el-button>
<el-button type="primary" @click="refreshProjectList">
<el-icon><Refresh /></el-icon>刷新
<el-icon>
<Refresh />
</el-icon>刷新
</el-button>
</div>
</div>
</template>
<el-table v-loading="loading" :data="projectList" stripe border style="width: 100%">
<el-table-column label="序号" width="80" align="center">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="项目名称" align="center" width="800"/>
<el-table-column prop="name" label="项目名称" align="center" width="800" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button text type="primary" size="small" @click="viewSpiders(scope.row)">
<el-icon><Document /></el-icon>Spider
<el-icon>
<Document />
</el-icon>Spider
</el-button>
</template>
</el-table-column>
<el-table-column label="查看版本" align="center">
<template #default="scope">
<el-button text type="success" size="small" @click="viewVersions(scope.row)">
<el-icon><Files /></el-icon>版本
<el-icon>
<Files />
</el-icon>版本
</el-button>
</template>
</el-table-column>
<el-table-column label="查看任务" align="center">
<template #default="scope">
<el-button text type="info" size="small" @click="viewJobs(scope.row)">
<el-icon><List /></el-icon>任务
<el-icon>
<List />
</el-icon>任务
</el-button>
</template>
</el-table-column>
<el-table-column label="查看日志" align="center">
<template #default="scope">
<el-button text type="warning" size="small" @click="viewLogs(scope.row)">
<el-icon><Notebook /></el-icon>日志
<el-icon>
<Notebook />
</el-icon>日志
</el-button>
</template>
</el-table-column>
<el-table-column label="更新版本" align="center">
<template #default="scope">
<el-button text type="primary" size="small" @click="handleUpdateVersion(scope.row)">
<el-icon><EditPen /></el-icon>编辑
<el-icon>
<EditPen />
</el-icon>编辑
</el-button>
</template>
</el-table-column>
<el-table-column label="删除项目" align="center">
<template #default="scope">
<el-button text type="danger" size="small" @click="handleDeleteProject(scope.row)">
<el-icon><Delete /></el-icon>删除
<el-icon>
<Delete />
</el-icon>删除
</el-button>
</template>
</el-table-column>
......@@ -78,15 +90,10 @@
<el-dialog v-model="addDialogVisible" :title="dialogTitle" width="500px">
<el-form :model="addForm" label-width="100px" :rules="rules" ref="addFormRef">
<el-form-item label="项目文件" prop="file">
<el-upload
class="upload-demo"
drag
action=""
:auto-upload="false"
:limit="1"
:on-change="handleFileChange"
>
<el-icon class="el-icon--upload"><Upload /></el-icon>
<el-upload class="upload-demo" drag action="" :auto-upload="false" :limit="1" :on-change="handleFileChange">
<el-icon class="el-icon--upload">
<Upload />
</el-icon>
<div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip">请上传爬虫项目文件（.zip 或 .egg）</div>
......@@ -102,8 +109,9 @@
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitAddProject" :loading="submitLoading">确认</el-button>
<el-button @click="addDialogVisible = false" class="outline-none">取消</el-button>
<el-button type="primary" @click="submitAddProject" :loading="submitLoading"
class="outline-none">确认</el-button>
</span>
</template>
</el-dialog>
......@@ -175,7 +183,7 @@ const refreshProjectList = () => {
const viewSpiders = (row: any) => {
router.push({
path: '/spider',
query: {
query: {
project: row.name,
scrapydServerId: scrapydServerId.value
}
......@@ -186,7 +194,7 @@ const viewSpiders = (row: any) => {
const viewVersions = (row: any) => {
router.push({
path: '/project/version-list',
query: {
query: {
project: row.name,
scrapydServerId: scrapydServerId.value
}
......@@ -197,7 +205,7 @@ const viewVersions = (row: any) => {
const viewJobs = (row: any) => {
router.push({
path: '/job/list',
query: {
query: {
project: row.name,
scrapydServerId: scrapydServerId.value
}
......@@ -208,7 +216,7 @@ const viewJobs = (row: any) => {
const viewLogs = (row: any) => {
router.push({
path: '/logs/project',
query: {
query: {
project: row.name,
scrapydServerId: scrapydServerId.value
}
......@@ -248,21 +256,21 @@ const handleFileChange = (file: UploadFile) => {
ElMessage.warning('只能上传 .egg 或 .zip 格式的文件！');
return false;
}
// 设置文件和自动填写项目名称
addForm.value.file = file.raw
// 自动提取项目名称（仅在添加模式下）
if (!isEditMode.value && !addForm.value.project) {
addForm.value.project = fileName.replace(/\.(egg|zip)$/, '');
// 自动生成版本号
if (!addForm.value.version) {
const now = new Date();
addForm.value.version = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`;
}
}
return true;
}
return false;
......@@ -271,17 +279,17 @@ const handleFileChange = (file: UploadFile) => {
// 提交添加项目
const submitAddProject = async () => {
if (!addFormRef.value) return
await addFormRef.value.validate(async (valid: any) => {
if (valid && addForm.value.file) {
submitLoading.value = true
const formData = new FormData()
formData.append('project', addForm.value.project)
formData.append('version', addForm.value.version)
formData.append('file', addForm.value.file)
formData.append('scrapydServerId', scrapydServerId.value)
try {
await addProjectVersion(formData)
ElMessage.success(isEditMode.value ? '更新版本成功' : '添加项目成功')
......@@ -305,13 +313,14 @@ const handleDeleteProject = (row: any) => {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
}
).then(async () => {
try {
await deleteProject({
await deleteProject({
project: row.name,
scrapydServerId: scrapydServerId.value
scrapydServerId: scrapydServerId.value
})
ElMessage.success('删除项目成功')
fetchProjectList()
......@@ -375,4 +384,26 @@ onMounted(() => {
.box-card {
margin-top: 20px;
}
.el-button:focus {
outline: none;
}
</style>
<style>
.el-dialog__headerbtn:focus {
outline: none;
}
.custom-message-box .el-button--primary {
outline: none;
}
.custom-message-box .el-button--default {
outline: none;
}
.custom-message-box .el-message-box__headerbtn {
outline: none;
}
</style>
\ No newline at end of file
src/views/schedule/logs.vue
......@@ -19,21 +19,16 @@
<el-button type="primary" @click="getList">查询</el-button>
<el-button type="danger" @click="handleClearLogs">清空日志</el-button>
<el-button type="default" @click="setupAutoRefresh">
<el-icon v-if="isAutoRefreshing"><Loading /></el-icon>
<el-icon v-if="isAutoRefreshing">
<Loading />
</el-icon>
{{ isAutoRefreshing ? '停止自动刷新' : '自动刷新' }}
</el-button>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column align="center" label="ID" width="80">
<template #default="scope">
{{ scope.$index + 1 }}
......@@ -83,15 +78,9 @@
<div class="pagination-container">
<el-config-provider :locale="zhCn">
<el-pagination
:current-page="listQuery.page"
:page-sizes="[10, 20, 30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</el-config-provider>
</div>
</div>
......@@ -154,7 +143,7 @@ const getList = async () => {
})
list.value = res.data.list || []
total.value = res.data.total || 0
// 更新状态计数
if (res.data) {
statusInfo.total = res.data.total || 0
......@@ -203,7 +192,7 @@ const setupAutoRefresh = () => {
isAutoRefreshing.value = true
ElMessage({
type: 'success',
message: `已设置每${refreshFrequency/1000}秒自动刷新`
message: `已设置每${refreshFrequency / 1000}秒自动刷新`
})
}
}
......@@ -212,13 +201,13 @@ const setupAutoRefresh = () => {
const handleClearLogs = () => {
// 构建确认提示信息
let confirmMsg = '确认清空'
if (status.value !== 'total') {
confirmMsg += `${status.value === 'success' ? '成功' : '失败'}`
}
confirmMsg += '调度日志'
if (listQuery.project) {
confirmMsg += `（项目：${listQuery.project}`
if (listQuery.spider) {
......@@ -228,13 +217,14 @@ const handleClearLogs = () => {
} else if (listQuery.spider) {
confirmMsg += `（爬虫：${listQuery.spider}）`
}
confirmMsg += '?'
ElMessageBox.confirm(confirmMsg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
}).then(async () => {
try {
// 构造清空参数，可以按项目、爬虫过滤
......@@ -245,7 +235,7 @@ const handleClearLogs = () => {
scrapydServerId: listQuery.scrapydServerId,
job_id: listQuery.job_id
}
await scheduleApi.removeScheduleLogs(clearParams)
ElMessage({
type: 'success',
......@@ -271,12 +261,12 @@ onMounted(() => {
const querySpider = route.query.spider as string
const queryServerId = route.query.scrapydServerId as string
const queryJob = route.query.job as string
if (queryProject) listQuery.project = queryProject
if (querySpider) listQuery.spider = querySpider
if (queryServerId) listQuery.scrapydServerId = queryServerId
if (queryJob) listQuery.job_id = queryJob
getList()
})
......@@ -297,4 +287,24 @@ onBeforeUnmount(() => {
.pagination-container {
padding: 10px 0;
}
.el-button:focus {
outline: none;
}
</style>
<style>
.custom-message-box .el-button--primary {
outline: none;
}
.custom-message-box .el-button--default {
outline: none;
}
.custom-message-box .el-message-box__headerbtn {
outline: none;
}
</style>
\ No newline at end of file
src/views/scrapyd-server/components/ScrapydServerAdd.vue
......@@ -198,3 +198,12 @@ const submit = () => {
};
</script>
<style>
.el-button:focus {
outline: none;
}
.el-dialog__headerbtn:focus {
outline: none;
}
</style>
src/views/scrapyd-server/components/ScrapydServerDelete.vue
......@@ -31,7 +31,8 @@ const handleDelete = () => {
ElMessageBox.confirm(`确定要删除服务"${props.row.server_name}"吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
}).then(async () => {
try {
const res = await deleteScrapydServer({
......@@ -55,3 +56,9 @@ const handleDelete = () => {
</script>
<style lang="scss" scoped></style>
<style>
.custom-message-box .el-message-box__headerbtn {
outline: none;
}
</style>
src/views/stats/components/StatsRemove.vue
......@@ -42,7 +42,8 @@ const confirmRemove = () => {
ElMessageBox.confirm('确认删除所选的统计数据?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
})
.then(async () => {
try {
......@@ -88,6 +89,23 @@ const confirmRemove = () => {
<style lang="scss" scoped>
.stats-remove {
margin-left: 10px;
margin-top: -2px;
display: inline-block;
}
.el-button:focus {
outline: none;
}
.custom-message-box .el-button--primary {
outline: none;
}
.custom-message-box .el-button--default {
outline: none;
}
.custom-message-box .el-message-box__headerbtn {
outline: none;
}
</style>
src/views/stats/components/StatsTool.vue
......@@ -2,58 +2,28 @@
<div class="stats-tool">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="服务器" size="default">
<select-scrapyd-server
v-model:value="serverValue"
@change="handleServerChange"
/>
<select-scrapyd-server v-model:value="serverValue" @change="handleServerChange" />
</el-form-item>
<el-form-item size="default" label="项目">
<el-select
v-model="projectValue"
placeholder="请选择项目"
clearable
@change="handleProjectChange"
style="width: 180px"
size="default"
>
<el-option
v-for="item in projectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="projectValue" placeholder="请选择项目" clearable @change="handleProjectChange"
style="width: 180px" size="default">
<el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="爬虫" size="default">
<el-select
v-model="spiderValue"
placeholder="请选择爬虫"
clearable
size="default"
@change="handleSpiderChange"
style="width: 180px"
>
<el-option
v-for="item in spiderOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="spiderValue" placeholder="请选择爬虫" clearable size="default" @change="handleSpiderChange"
style="width: 180px">
<el-option v-for="item in spiderOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="danger" @click="confirmClear">清空数据</el-button>
<stats-remove
:scrapyd-server-id="serverValue"
:project="projectValue"
:spider="spiderValue"
button-text="批量删除"
@success="handleRemoveSuccess"
/>
<stats-remove :scrapyd-server-id="serverValue" :project="projectValue" :spider="spiderValue" button-text="批量删除"
@success="handleRemoveSuccess" />
</el-form-item>
</el-form>
</div>
......@@ -106,12 +76,12 @@ const spiderOptions = ref<OptionItem[]>([])
// 获取项目列表
const getProjects = async () => {
if (!serverValue.value) return
try {
const res = await projectApi.listProjects({
scrapydServerId: serverValue.value
})
if (res.code === 0) {
projectOptions.value = (res.data || []).map((item: string) => ({
label: item,
......@@ -126,13 +96,13 @@ const getProjects = async () => {
// 获取爬虫列表
const getSpiders = async () => {
if (!serverValue.value || !projectValue.value) return
try {
const res = await projectApi.listSpiders({
scrapydServerId: serverValue.value,
project: projectValue.value
})
if (res.code === 0) {
spiderOptions.value = (res.data || []).map((item: string) => ({
label: item,
......@@ -148,13 +118,13 @@ const getSpiders = async () => {
const handleServerChange = async (val: string) => {
serverValue.value = val
emit('update:scrapyd-server-id', val)
// 清空项目和爬虫选择
projectValue.value = ''
emit('update:project', '')
spiderValue.value = ''
emit('update:spider', '')
// 重新加载项目列表
await getProjects()
}
......@@ -163,14 +133,14 @@ const handleServerChange = async (val: string) => {
const handleProjectChange = async (val: string) => {
projectValue.value = val
emit('update:project', val)
// 清空爬虫选择
spiderValue.value = ''
emit('update:spider', '')
// 重新加载爬虫列表
await getSpiders()
// 触发项目变化事件
emit('project-change')
}
......@@ -179,7 +149,7 @@ const handleProjectChange = async (val: string) => {
const handleSpiderChange = async (val: string) => {
spiderValue.value = val
emit('update:spider', val)
// 触发爬虫变化事件
emit('spider-change')
}
......@@ -199,7 +169,9 @@ const confirmClear = () => {
ElMessageBox.confirm('确认清空所有统计数据?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
})
.then(async () => {
try {
......@@ -208,7 +180,7 @@ const confirmClear = () => {
project: projectValue.value,
spider: spiderValue.value
})
if (res.code === 0) {
ElMessage({
type: 'success',
......@@ -241,7 +213,7 @@ watch(() => props.spider, (val) => {
onMounted(async () => {
if (serverValue.value) {
await getProjects()
if (projectValue.value) {
await getSpiders()
}
......@@ -250,8 +222,37 @@ onMounted(async () => {
</script>
<style lang="scss" scoped>
// .custom-message-box .el-button--primary {
// outline: none;
// // background-color: aqua;
// }
.stats-tool {
margin-bottom: 20px;
text-align: left;
}
:deep(.Border) {
border-color: white;
}
::v-deep .el-button:focus {
outline: none;
}
</style>
<style>
.custom-message-box .el-button--primary {
outline: none;
}
.custom-message-box .el-button--default {
outline: none;
}
.custom-message-box .el-message-box__headerbtn {
outline: none;
}
</style>
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