Commit 58a93d86 by yzh

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

parent a1c51994
......@@ -101,4 +101,8 @@ onBeforeUnmount(() => {
color: #666666;
font-size: 12px;
}
.el-button:focus {
outline: none;
}
</style>
......@@ -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([
......
......@@ -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',
......
......@@ -88,7 +88,7 @@ defineProps({
width: 400px;
height: 14vh;
border-radius: 5px;
// min-width: 200px;
.titleStyle {
font-size: 22px;
}
......
......@@ -5,7 +5,6 @@
<span>综合监控</span>
</div>
<dataCard>
</dataCard>
</div>
</template>
......
......@@ -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([
......
......@@ -104,4 +104,7 @@ const options = [
font-size: 16px;
}
}
.el-button:focus {
outline: none;
}
</style>
......@@ -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>
......
<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>
......@@ -13,10 +9,14 @@
<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>
......@@ -28,46 +28,58 @@
{{ 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>
......@@ -305,7 +313,8 @@ const handleDeleteProject = (row: any) => {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
}
).then(async () => {
try {
......@@ -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
......@@ -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>
......@@ -203,7 +192,7 @@ const setupAutoRefresh = () => {
isAutoRefreshing.value = true
ElMessage({
type: 'success',
message: `已设置每${refreshFrequency/1000}秒自动刷新`
message: `已设置每${refreshFrequency / 1000}秒自动刷新`
})
}
}
......@@ -234,7 +223,8 @@ const handleClearLogs = () => {
ElMessageBox.confirm(confirmMsg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
}).then(async () => {
try {
// 构造清空参数,可以按项目、爬虫过滤
......@@ -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
......@@ -198,3 +198,12 @@ const submit = () => {
};
</script>
<style>
.el-button:focus {
outline: none;
}
.el-dialog__headerbtn:focus {
outline: none;
}
</style>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -199,7 +169,9 @@ const confirmClear = () => {
ElMessageBox.confirm('确认清空所有统计数据?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
customClass: 'custom-message-box',
})
.then(async () => {
try {
......@@ -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