bonus
/
eme_small_desk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接口调试完成

This commit is contained in:
BianLzhaoMin 2025-09-26 18:32:20 +08:00
parent eb77d0ecff
commit 8674eefe11
12 changed files with 1518 additions and 670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/alert/index.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 获取预警管理列表
export function getAlertListAPI(data) {
return request({
url: '/task/getTaskLogs',
method: 'GET',
params: data,
})
}

15
src/api/platform/index.js
View File

@ -1,11 +1,11 @@
import request from '@/utils/request'
// 获取平台管理列表数据
export function getPlatformListAPI() {
export function getPlatformListAPI(data = {}) {
return request({
url: '/platform/list',
method: 'POST',
data: {},
method: 'GET',
params: data,
})
}
@ -35,3 +35,12 @@ export function delPlatformAPI(data) {
data,
})
}
// 获取平台下拉列表
export function getPlatformSelectListAPI() {
return request({
url: '/platform/getSelected',
method: 'POST',
data: {},
})
}

42
src/api/task/index.js
View File

@ -1,11 +1,11 @@
import request from '@/utils/request'
// 获取任务管理列表数据
export function getTaskListAPI() {
export function getTaskListAPI(data = {}) {
return request({
url: '/task/list',
method: 'POST',
data: {},
method: 'GET',
params: data,
})
}
@ -35,3 +35,39 @@ export function delTaskAPI(data) {
data,
})
}
// 获取任务下拉列表
export function getTaskSelectListAPI(data) {
return request({
url: '/task/getTaskSelected',
method: 'POST',
data,
})
}
// 获取任务详情
export function getTaskDetailsAPI(data) {
return request({
url: '/task/getTaskDetails',
method: 'POST',
data,
})
}
// 修改任务状态
export function updateTaskStatusAPI(data) {
return request({
url: '/task/updateStatus',
method: 'POST',
data,
})
}
// 获取任务运行情况列表
export function getTaskRunListAPI(data) {
return request({
url: '/task/getTaskLogs',
method: 'GET',
params: data,
})
}

519
src/views/alert/components/details.vue
View File

@ -1,55 +1,104 @@
<template>
<!-- 详情1 -->
<div style="padding-bottom: 40px">
<h3> 基本信息 </h3>
<el-form :model="basicInfoForm" :rules="basicInfoFormRules" ref="basicInfoFormRef" label-width="120px" disabled>
<el-form :model="basicInfoForm" label-width="120px" disabled>
<el-row>
<el-col :span="12">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="任务名称">
<el-input v-model="basicInfoForm.taskName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="平台名称" prop="platformName">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="平台名称">
<el-select style="width: 100%" v-model="basicInfoForm.systemId">
<el-option
:key="item.id"
:value="item.id"
:label="item.name"
v-for="item in platformList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="平台网址">
<el-input v-model="basicInfoForm.url" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否需要登录">
<el-select style="width: 100%" v-model="basicInfoForm.isLogin">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="账号角色">
<el-select style="width: 100%" v-model="basicInfoForm.userId">
<el-option
:key="item.id"
:value="item.id"
:label="item.roleName"
v-for="item in roleList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="系统账号">
<el-input v-model="basicInfoForm.userName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务类型">
<el-select style="width: 100%" v-model="basicInfoForm.taskType">
<el-option label="填报" value="填报" />
<el-option label="采集" value="采集" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="cron表达式">
<el-input v-model="basicInfoForm.cron" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="平台网址" prop="platformUrl">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="分辨率">
<el-input v-model="basicInfoForm.resolution" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否需要登录" prop="isLogin">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="浏览器路径">
<el-input v-model="basicInfoForm.browserUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动路径">
<el-input v-model="basicInfoForm.driverUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动名称">
<el-input v-model="basicInfoForm.driverName" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="账号角色" prop="accountRole">
<el-input v-model="basicInfoForm.name" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="系统账号" prop="systemAccount">
<el-input v-model="basicInfoForm.name" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="运行策略" prop="runStrategy">
<el-input v-model="basicInfoForm.address" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="任务失败" prop="taskFail">
<el-input v-model="basicInfoForm.address" />
<el-col :span="6">
<el-form-item label="任务失败">
<el-input-number :min="0" :max="9999" :precision="0" v-model="basicInfoForm.errTimes" />
<span> 次，本次任务终止 </span>
</el-form-item>
</el-col>
</el-row>
@ -57,86 +106,368 @@
<h3> 流程配置 </h3>
<el-row>
<el-col :span="1" style="height: 600px">
<el-steps direction="vertical" :active="1">
<el-step></el-step>
<el-step></el-step>
<el-step></el-step>
</el-steps>
</el-col>
<el-col :span="23">
<el-form
disabled
:key="item.id"
:model="item"
label-width="120px"
class="account-form"
:rules="accountFormRules"
:ref="`accountFormRef${index}`"
v-for="(item, index) in accountForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="操作元素" prop="loginAccount">
<el-input v-model="item.loginAccount" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="元素值" prop="loginPassword">
<el-input v-model="item.loginPassword" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="交互方式" prop="accountRole">
<el-input v-model="item.accountRole" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
<div v-for="(item, index) in accountForm" :key="item.sid" class="draggable-item">
<el-form :model="item" label-width="120px" class="account-form" :ref="`accountFormRef${index}`" disabled>
<el-row>
<el-col :span="6">
<el-form-item label="操作元素">
<el-input v-model="item.element" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素路径">
<el-input v-model="item.xpath" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素值">
<el-input v-model="item.elementName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<i
v-if="runStatus || (!runStatus && errId != item.id && index < errIndex)"
style="color: #67c23a; font-size: 22px"
class="el-icon-circle-check"
/>
<i
v-if="!runStatus && errId == item.id"
style="color: #f56c6c; font-size: 22px"
class="el-icon-circle-close"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="等待时间(秒)">
<el-input-number
:min="0"
:max="10"
:precision="1"
style="width: 100%"
v-model="item.sleepTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="依赖上一步">
<el-select style="width: 100%" v-model="item.isStep">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="交互方式">
<el-select clearable style="width: 100%" v-model="item.interactive">
<el-option
:key="item.value"
:value="item.value"
:label="item.label"
v-for="item in interactiveList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
:label="item.interactive !== '数据采集' ? '内容' : '关联任务'"
v-if="!['单击', '双击', '悬停', ''].includes(item.interactive)"
>
<el-input v-if="item.interactive !== '数据采集'" v-model="item.content" />
<el-select v-else style="width: 100%" v-model="item.realTaskId">
<el-option
:key="item.taskId"
:value="item.taskId"
:label="item.taskName"
v-for="item in taskSelectList"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import { getPlatformSelectListAPI } from '@/api/platform/index'
import { getTaskSelectListAPI, getTaskDetailsAPI } from '@/api/task/index'
export default {
name: 'DetailsOne',
props: {
detailsIds: {
type: [String, Number],
default: () => '',
},
runStatus: {
type: Boolean,
default: true,
},
errId: {
type: [String, Number],
default: () => '',
},
},
data() {
return {
// 基本信息
basicInfoForm: {
taskName: '',
platformName: '',
platformUrl: '',
taskName: '测试任务',
systemName: '',
systemId: '',
url: '',
isLogin: '',
accountRole: '',
systemAccount: '',
runStrategy: '',
taskFail: '',
roleId: '',
roleName: '',
userName: '',
password: '',
strategy: 'D', // 运行策略
weeks: '', // 每周
startTime: '', // 开始时间
endTime: '', // 结束时间
day: '', // 月天
times: '', // 时间段
errTimes: 10,
browserUrl: '测试浏览器路径',
driverUrl: '测试驱动路径',
resolution: '--force-device-scale-factor=0.7',
taskId: null,
taskType: '填报',
driverName: '测试驱动名称',
cronExpression: '',
cron: '',
userId: '',
},
accountForm: [
{
loginAccount: '',
loginPassword: '',
accountRole: '',
id: Date.now(), // 给个唯一id 绑定key
},
// 流程配置
accountForm: [],
// 平台信息
platformList: [],
// 账号角色
roleList: [],
// 交互方式
interactiveList: [
{ value: '单击', label: '单击' },
{ value: '双击', label: '双击' },
{ value: '悬停', label: '悬停' },
{ value: '获取对象', label: '获取对象' },
{ value: '文本输入', label: '文本输入' },
{ value: '数据采集', label: '数据采集' },
{ value: '单选', label: '下拉选择-单选' },
{ value: '多选', label: '下拉选择-多选' },
],
expression: '',
openCron: false,
taskSelectList: [],
}
},
methods: {},
computed: {
// 错误索引
errIndex() {
return this.accountForm.findIndex((e) => e.id == this.errId)
},
},
created() {
this.getPlatformList()
},
methods: {
// 获取平台信息
async getPlatformList() {
const res = await getPlatformSelectListAPI()
this.platformList = res?.data
},
// 获取任务下拉列表
async getTaskSelectList(data) {
const res = await getTaskSelectListAPI(data)
this.taskSelectList = res?.data
},
// 获取任务详情
async getTaskDetails() {
const res = await getTaskDetailsAPI({ taskId: this.detailsIds })
this.getTaskSelectList({ taskId: this.detailsIds })
const {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
driverName,
cron,
list,
} = res.data
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
// strategy,
// weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
cron,
driverName,
// startTime: times.split('-')[0],
// endTime: times.split('-')[1],
}
this.accountForm = list.map((item) => {
return { ...item, sid: item.id }
})
this.roleList = this.platformList.find((item) => item.id === systemId)?.list || []
},
//
},
watch: {
detailsIds: {
handler(newVal) {
if (newVal !== '') {
this.getTaskDetails()
}
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
.account-form {
.draggable-container {
margin-top: 20px;
}
.draggable-item {
margin-bottom: 15px;
transition: all 0.3s ease;
}
.account-form {
border: 1px solid #dfe6ec;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #fff;
transition: all 0.3s ease;
&:hover {
border-color: #409eff;
}
}
.drag-handle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
cursor: move;
color: #909399;
font-size: 12px;
padding: 10px 5px;
border: 1px dashed #dcdfe6;
border-radius: 4px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
background: #f5f7fa;
transition: all 0.3s ease;
&:hover {
color: #409eff;
border-color: #409eff;
background: #ecf5ff;
}
i {
font-size: 16px;
margin-bottom: 4px;
}
span {
font-size: 10px;
}
}
.action-buttons {
display: flex;
align-items: center;
gap: 5px;
.el-button {
padding: 5px 8px;
min-height: auto;
&:hover {
background: #f5f7fa;
}
&.is-disabled {
color: #c0c4cc;
cursor: not-allowed;
}
}
}
// 拖拽时的样式
.sortable-ghost {
opacity: 0.5;
background: #f0f9ff;
border: 2px dashed #409eff;
}
.sortable-chosen {
background: #ecf5ff;
border-color: #409eff;
}
.sortable-drag {
transform: rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
</style>

86
src/views/alert/index.vue
View File

@ -1,28 +1,43 @@
<template>
<!-- 预警管理 -->
<div class="platform-container">
<el-form :model="queryParams" label-width="100px" inline>
<el-form-item>
<el-input placeholder="平台名称" v-model="queryParams.platformName" />
<el-form :model="queryParams" ref="queryFormRef" label-width="100px" inline>
<el-form-item prop="systemName">
<el-input placeholder="平台名称" v-model="queryParams.systemName" />
</el-form-item>
<el-form-item prop="createTime">
<!-- <el-input placeholder="运行时间" v-model="queryParams.createTime" /> -->
<el-date-picker
type="date"
placeholder="运行时间"
value-format="yyyy-MM-dd"
v-model="queryParams.createTime"
/>
</el-form-item>
<el-form-item prop="status">
<el-select v-model="queryParams.status" clearable placeholder="运行状态" style="width: 240px">
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-input placeholder="运行时间" v-model="queryParams.runTime" />
</el-form-item>
<el-form-item>
<el-input placeholder="运行装填" v-model="queryParams.runStatus" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="getPlatformList">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-search" @click="getAlertList">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column align="center" type="index" label="序号" />
<el-table-column align="center" prop="name" label="任务名称" />
<el-table-column align="center" prop="description" label="平台名称" />
<el-table-column align="center" prop="status" label="运行时间" />
<el-table-column align="center" prop="status" label="运行状态" />
<el-table-column align="center" prop="taskName" label="任务名称" />
<el-table-column align="center" prop="systemName" label="平台名称" />
<el-table-column align="center" prop="createTime" label="运行时间" />
<el-table-column align="center" label="运行状态">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.status == 1 ? 'success' : 'danger'">
{{ scope.row.status == 1 ? '成功' : '失败' }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button size="mini" style="padding: 4px 6px" type="success" @click="onHandelDetails(scope.row)">
@ -33,14 +48,14 @@
</el-table>
<pagination
:total="total"
@pagination="getPlatformList"
@pagination="getAlertList"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<DialogModal :dialogConfig="dialogConfig" @closeDialogOuter="handleCloseDialogOuter">
<template #outerContent>
<Details />
<Details :detailsIds="detailsIds" :runStatus="runStatus" :errId="errId" />
</template>
</DialogModal>
</div>
@ -49,6 +64,7 @@
<script>
import DialogModal from '@/components/DialogModel'
import Details from './components/details.vue'
import { getAlertListAPI } from '@/api/alert/index'
export default {
name: 'Platform',
components: {
@ -74,19 +90,27 @@ export default {
],
// 页面数据
queryParams: {
platformName: '',
runTime: '',
runStatus: '',
// platformName: '',
// runTime: '',
// runStatus: '',
pageNum: 1,
pageSize: 10,
taskId: '',
},
dialogConfig: {
outerTitle: '详情',
outerVisible: false,
outerWidth: '70%',
},
detailsIds: '',
runStatus: true,
errId: '',
}
},
created() {
this.getAlertList()
},
methods: {
handleEdit(row) {
console.log(row)
@ -94,16 +118,32 @@ export default {
handleDelete(row) {
console.log(row)
},
getPlatformList() {
console.log(this.queryParams)
async getAlertList() {
// console.log(this.queryParams)
const res = await getAlertListAPI(this.queryParams)
this.tableData = res?.rows
this.total = res?.total
},
onHandleReset() {
console.log('新增')
// console.log('新增')
this.resetForm('queryFormRef')
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getAlertList()
},
onHandelDetails(row) {
console.log(row)
this.detailsIds = row.taskId
if (row.status == 1) {
this.runStatus = true
this.errId = ''
} else {
this.runStatus = false
this.errId = row.errId
}
this.dialogConfig.outerVisible = true
this.dialogConfig.outerVisible = true
},

24
src/views/platform/index.vue
View File

@ -6,7 +6,7 @@
<el-input placeholder="平台名称" v-model="queryParams.name" clearable />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-search" @click="getPlatformList">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
@ -45,7 +45,7 @@
</el-table>
<pagination
:total="total"
@pagination="onHandlePagination"
@pagination="getPlatformList"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
@ -125,7 +125,7 @@ export default {
},
handleDelete(row) {
console.log(row)
// console.log(row)
this.$modal
.confirm('确定删除该平台吗？')
.then(async () => {
@ -139,17 +139,17 @@ export default {
.catch(() => {})
},
async getPlatformList() {
const res = await getPlatformListAPI()
const res = await getPlatformListAPI(this.queryParams)
// this.tableData = res?.data
if (res?.data.length > 10) {
this.tableData = res?.data.slice(0, 10)
} else {
this.tableData = res?.data
}
this.tableDataAll = res?.data
this.total = res?.data?.length
this.rightTableData = res?.data[0]?.list || []
// if (res?.data.length > 10) {
// this.tableData = res?.data.slice(0, 10)
// } else {
// this.tableData = res?.data
// }
this.tableData = res?.rows
this.total = res?.total
this.rightTableData = res?.rows[0]?.list || []
},
handleAdd() {

336
src/views/task/components/addAndEditForm.vue
View File

@ -50,7 +50,7 @@
<el-row>
<el-col :span="6">
<el-form-item label="账号角色" prop="roleId">
<el-form-item label="账号角色" prop="userId">
<!-- <el-input v-model="basicInfoForm.roleId" clearable placeholder="请输入账号角色" /> -->
<el-select
filterable
@ -58,7 +58,7 @@
style="width: 100%"
placeholder="请选择账号角色"
@change="handleChangeRoleId"
v-model="basicInfoForm.roleId"
v-model="basicInfoForm.userId"
>
<el-option
:key="item.id"
@ -76,8 +76,21 @@
</el-col>
<el-col :span="6">
<el-form-item label="任务类型" prop="taskType">
<el-select
clearable
style="width: 100%"
placeholder="请选择交"
v-model="basicInfoForm.taskType"
>
<el-option label="填报" value="填报" />
<el-option label="采集" value="采集" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="运行策略" prop="strategy">
<!-- <el-input v-model="basicInfoForm.strategy" clearable placeholder="请输入运行策略" /> -->
<el-select
clearable
style="width: 100%"
@ -90,8 +103,8 @@
<el-option label="每月" value="M"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" v-if="basicInfoForm.strategy">
</el-col> -->
<!-- <el-col :span="6" v-if="basicInfoForm.strategy">
<el-form-item>
<template #label>
<span>
@ -165,6 +178,19 @@
</el-col>
</el-row>
</el-form-item>
</el-col> -->
<el-col :span="6">
<el-form-item label="cron表达式" prop="cron">
<el-input v-model="basicInfoForm.cron" clearable placeholder="请输入cron执行表达式">
<template slot="append">
<el-button type="primary" @click="handleShowCron">
生成表达式
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
@ -184,20 +210,15 @@
<el-input v-model="basicInfoForm.driverUrl" clearable placeholder="请输入交互方式" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="cron表达式" prop="cronExpression">
<el-input v-model="basicInfoForm.cronExpression" clearable placeholder="请输入cron执行表达式">
<template slot="append">
<el-button type="primary" @click="handleShowCron">
生成表达式
<i class="el-icon-time el-icon--right"></i>
</el-button>
</template>
</el-input>
<el-form-item label="驱动名称" prop="driverName">
<el-input v-model="basicInfoForm.driverName" clearable placeholder="请输入交互方式" />
</el-form-item>
</el-col>
<!-- <el-col :span="6">
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="任务失败" prop="errTimes">
<el-input-number
:min="0"
@ -208,28 +229,6 @@
/>
<span> 次，本次任务终止 </span>
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="任务类型" prop="taskType">
<el-select
clearable
style="width: 100%"
placeholder="请选择交"
v-model="basicInfoForm.taskType"
>
<el-option label="填报" value="填报" />
<el-option label="采集" value="采集" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动名称" prop="driverName">
<el-input v-model="basicInfoForm.driverName" clearable placeholder="请输入交互方式" />
</el-form-item>
</el-col>
</el-row>
</el-form>
@ -295,7 +294,6 @@
<el-button
type="text"
title="删除"
v-if="index > 0"
style="color: red"
icon="el-icon-delete"
@click="handleDeleteAccount(index)"
@ -343,6 +341,7 @@
style="width: 100%"
placeholder="请选择交互方式"
v-model="item.interactive"
@change="handleChangeInteractive"
>
<el-option
:key="item.value"
@ -355,11 +354,30 @@
</el-col>
<el-col :span="6">
<el-form-item
label="内容"
prop="content"
:label="item.interactive !== '数据采集' ? '内容' : '关联任务'"
v-if="!['单击', '双击', '悬停', ''].includes(item.interactive)"
>
<el-input v-model="item.content" clearable placeholder="请输入内容" />
<el-input
v-if="item.interactive !== '数据采集'"
v-model="item.content"
clearable
placeholder="请输入内容"
/>
<el-select
v-else
clearable
style="width: 100%"
placeholder="请选择任务"
v-model="item.realTaskId"
>
<el-option
:key="item.taskId"
:value="item.taskId"
:label="item.taskName"
v-for="item in taskSelectList"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -383,8 +401,8 @@
<script>
import draggable from 'vuedraggable'
import Crontab from '@/components/Crontab'
import { getPlatformListAPI } from '@/api/platform/index'
import { addTaskAPI, editTaskAPI } from '@/api/task/index'
import { getPlatformSelectListAPI } from '@/api/platform/index'
import { addTaskAPI, editTaskAPI, getTaskSelectListAPI, getTaskDetailsAPI } from '@/api/task/index'
export default {
name: 'AddAndEditForm',
components: {
@ -392,9 +410,9 @@ export default {
Crontab,
},
props: {
editRow: {
type: Object,
default: () => {},
detailsId: {
type: [String, Number],
default: () => '',
},
formType: {
type: Number,
@ -420,7 +438,7 @@ export default {
endTime: '', // 结束时间
day: '', // 月天
times: '', // 时间段
errTimes: 0,
errTimes: 10,
browserUrl: '测试浏览器路径',
driverUrl: '测试驱动路径',
resolution: '--force-device-scale-factor=0.7',
@ -428,6 +446,8 @@ export default {
taskType: '填报',
driverName: '测试驱动名称',
cronExpression: '',
cron: '',
userId: '',
},
// 流程配置
accountForm: [
@ -439,6 +459,7 @@ export default {
xpath: '测试元素路径', // 元素路径
isStep: '是', // 是否依赖上一步
content: '测试内容', //内容
realTaskId: '', // 关联任务
sid: Date.now(), // 给个唯一id 绑定key
},
],
@ -463,6 +484,7 @@ export default {
day: [{ required: true, message: '请选择日期', trigger: 'change' }],
taskType: [{ required: true, message: '请选择任务类型', trigger: 'blur' }],
driverName: [{ required: true, message: '请选择驱动名称', trigger: 'blur' }],
cron: [{ required: true, message: '请输入cron表达式', trigger: 'blur' }],
},
accountFormRules: {
@ -494,6 +516,8 @@ export default {
expression: '',
openCron: false,
taskSelectList: [],
}
},
@ -504,10 +528,15 @@ export default {
methods: {
handleAddAccount() {
this.accountForm.push({
loginAccount: '',
loginPassword: '',
accountRole: '',
id: Date.now(), // 动态生成一个唯一的id 时间戳
element: 'div', // 操作元素
elementName: '测试元素值', // 元素值
interactive: '单击', // 交互方式
sleepTime: 0.5, // 等待时间
xpath: '测试元素路径', // 元素路径
isStep: '是', // 是否依赖上一步
content: '', //内容
realTaskId: '', // 关联任务
sid: Date.now(), // 给个唯一id 绑定key
})
},
@ -574,6 +603,9 @@ export default {
browserUrl,
driverUrl,
systemId,
userId,
cron,
driverName,
} = this.basicInfoForm
const params = {
taskName,
@ -584,33 +616,54 @@ export default {
roleName,
userName,
password,
strategy,
// strategy,
errTimes,
resolution,
browserUrl,
driverUrl,
taskType,
systemId,
times: `${startTime}-${endTime}`,
list: this.accountForm.map((item) => {
return {
element: item.element,
elementName: item.elementName,
interactive: item.interactive,
sleepTime: item.sleepTime,
xpath: item.xpath,
isStep: item.isStep,
content: item.content,
cron,
userId,
driverName,
// times: `${startTime}-${endTime}`,
list: this.accountForm.map((item, index) => {
if (this.formType === 2) {
return {
sort: index + 1,
element: item.element,
elementName: item.elementName,
interactive: item.interactive,
sleepTime: item.sleepTime,
xpath: item.xpath,
isStep: item.isStep,
content: item.content,
realTaskId: item.interactive === '数据采集' ? item.realTaskId : '',
id: item?.id || '',
taskId: item?.taskId || '',
}
} else {
return {
sort: index + 1,
element: item.element,
elementName: item.elementName,
interactive: item.interactive,
sleepTime: item.sleepTime,
xpath: item.xpath,
isStep: item.isStep,
content: item.content,
realTaskId: item.interactive === '数据采集' ? item.realTaskId : '',
}
}
}),
}
if (strategy === 'W') {
params.weeks = weeks
}
if (strategy === 'M') {
params.day = day
}
// if (strategy === 'W') {
// params.weeks = weeks
// }
// if (strategy === 'M') {
// params.day = day
// }
if (this.formType === 2) {
params.taskId = taskId
@ -633,7 +686,7 @@ export default {
// 获取平台信息
async getPlatformList() {
const res = await getPlatformListAPI()
const res = await getPlatformSelectListAPI()
this.platformList = res?.data
},
@ -641,6 +694,7 @@ export default {
handleChangeSystemName(value) {
this.basicInfoForm.url = this.platformList.find((item) => item.id === value)?.url
this.basicInfoForm.systemName = this.platformList.find((item) => item.id === value)?.name
this.basicInfoForm.isLogin = this.platformList.find((item) => item.id === value)?.isLogin
this.roleList = this.platformList.find((item) => item.id === value)?.list || []
@ -649,6 +703,7 @@ export default {
this.basicInfoForm.roleName = ''
this.basicInfoForm.password = ''
this.basicInfoForm.userName = ''
this.basicInfoForm.userId = ''
}
},
@ -657,6 +712,7 @@ export default {
this.basicInfoForm.roleName = this.roleList.find((item) => item.id === value)?.roleName
this.basicInfoForm.password = this.roleList.find((item) => item.id === value)?.password
this.basicInfoForm.userName = this.roleList.find((item) => item.id === value)?.userName
// this.basicInfoForm.userId = this.roleList.find((item) => item.id === value)?.id
},
// 选择运行策略
@ -669,71 +725,101 @@ export default {
// 生成cron表达式
handleShowCron() {
// this.$modal.show('CronExpression')
this.expression = this.basicInfoForm.cronExpression
this.expression = this.basicInfoForm.cron
this.openCron = true
},
crontabFill(value) {
this.basicInfoForm.cronExpression = value
this.basicInfoForm.cron = value
},
// 获取任务下拉列表
async getTaskSelectList(data) {
const res = await getTaskSelectListAPI(data)
// console.log(res, '任务下拉列表')
this.taskSelectList = res?.data
},
// 交互方式变化
handleChangeInteractive(val) {
if (val === '数据采集') {
this.getTaskSelectList({ taskId: null })
}
},
// 获取任务详情
async getTaskDetails() {
const res = await getTaskDetailsAPI({ taskId: this.detailsId })
this.getTaskSelectList({ taskId: this.detailsId })
const {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
driverName,
cron,
list,
} = res.data
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
// strategy,
// weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
cron,
driverName,
// startTime: times.split('-')[0],
// endTime: times.split('-')[1],
}
this.accountForm = list.map((item) => {
return { ...item, sid: item.id }
})
this.roleList = this.platformList.find((item) => item.id === systemId)?.list || []
},
//
},
watch: {
editRow: {
detailsId: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
const {
taskName,
systemName,
url,
isLogin,
roleId,
roleName,
userName,
password,
strategy,
weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
list,
} = newVal
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
roleId,
roleName,
userName,
password,
strategy,
weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
startTime: times.split('-')[0],
endTime: times.split('-')[1],
}
this.accountForm = newVal.list.map((item) => {
return { ...item, sid: item.id }
})
if (newVal !== '') {
this.getTaskDetails()
}
},
deep: true,

437
src/views/task/components/details-one.vue
View File

@ -1,21 +1,16 @@
<template>
<div style="padding-bottom: 40px">
<h3> 基本信息 </h3>
<el-form :model="basicInfoForm" ref="basicInfoFormRef" label-width="120px" disabled>
<el-form :model="basicInfoForm" label-width="120px" disabled>
<el-row>
<el-col :span="6">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="basicInfoForm.taskName" clearable placeholder="请输入任务名称" />
<el-form-item label="任务名称">
<el-input v-model="basicInfoForm.taskName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="平台名称" prop="systemId">
<el-select
clearable
style="width: 100%"
placeholder="请选择平台名称"
v-model="basicInfoForm.systemId"
>
<el-form-item label="平台名称">
<el-select style="width: 100%" v-model="basicInfoForm.systemId">
<el-option
:key="item.id"
:value="item.id"
@ -26,20 +21,14 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="平台网址" prop="url">
<el-input v-model="basicInfoForm.url" clearable placeholder="请选择平台" disabled />
<el-form-item label="平台网址">
<el-input v-model="basicInfoForm.url" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否需要登录" prop="isLogin">
<el-select
clearable
disabled
style="width: 100%"
placeholder="请选择平台"
v-model="basicInfoForm.isLogin"
>
<el-form-item label="是否需要登录">
<el-select style="width: 100%" v-model="basicInfoForm.isLogin">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
@ -49,15 +38,8 @@
<el-row>
<el-col :span="6">
<el-form-item label="账号角色" prop="roleId">
<!-- <el-input v-model="basicInfoForm.roleId" clearable placeholder="请输入账号角色" /> -->
<el-select
filterable
clearable
style="width: 100%"
placeholder="请选择账号角色"
v-model="basicInfoForm.roleId"
>
<el-form-item label="账号角色">
<el-select style="width: 100%" v-model="basicInfoForm.userId">
<el-option
:key="item.id"
:value="item.id"
@ -68,142 +50,14 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="系统账号" prop="userName">
<el-input v-model="basicInfoForm.userName" clearable placeholder="请选择账号角色" disabled />
<el-form-item label="系统账号">
<el-input v-model="basicInfoForm.userName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运行策略" prop="strategy">
<!-- <el-input v-model="basicInfoForm.strategy" clearable placeholder="请输入运行策略" /> -->
<el-select
clearable
style="width: 100%"
placeholder="请选择运行策略"
v-model="basicInfoForm.strategy"
>
<el-option label="每天" value="D"></el-option>
<el-option label="每周" value="W"></el-option>
<el-option label="每月" value="M"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" v-if="basicInfoForm.strategy">
<el-form-item>
<template #label>
<span>
<i style="color: #ff4949">*</i>
运行时间
</span>
</template>
<el-row style="width: 100%" type="flex" justify="space-between" :gutter="4">
<el-col :span="basicInfoForm.strategy === 'W' || basicInfoForm.strategy === 'M' ? 10 : 0">
<el-form-item prop="weeks" v-if="basicInfoForm.strategy === 'W'">
<el-select
clearable
size="mini"
style="width: 100%"
placeholder="请选择"
v-model="basicInfoForm.weeks"
>
<el-option label="周一" value="1" />
<el-option label="周二" value="2" />
<el-option label="周三" value="3" />
<el-option label="周四" value="4" />
<el-option label="周五" value="5" />
<el-option label="周六" value="6" />
<el-option label="周日" value="7" />
</el-select>
</el-form-item>
<el-form-item prop="day" v-if="basicInfoForm.strategy === 'M'">
<el-date-picker
type="date"
size="mini"
style="width: 100%"
placeholder="选择日期"
v-model="basicInfoForm.day"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="basicInfoForm.strategy === 'D' ? 12 : 7">
<el-form-item prop="startTime">
<el-time-select
placeholder="开始"
v-model="basicInfoForm.startTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
}"
style="width: 100%"
size="mini"
>
</el-time-select>
</el-form-item>
</el-col>
<el-col :span="basicInfoForm.strategy === 'D' ? 12 : 7">
<el-form-item prop="endTime">
<el-time-select
placeholder="结束"
v-model="basicInfoForm.endTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
minTime: basicInfoForm.startTime,
}"
style="width: 100%"
size="mini"
>
</el-time-select>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="分辨率" prop="resolution">
<el-input v-model="basicInfoForm.resolution" clearable placeholder="请输入分辨率" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="浏览器路径" prop="browserUrl">
<el-input v-model="basicInfoForm.browserUrl" clearable placeholder="请输入交互方式" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动路径" prop="driverUrl">
<el-input v-model="basicInfoForm.driverUrl" clearable placeholder="请输入交互方式" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务失败" prop="errTimes">
<el-input-number
:min="0"
:max="9999"
:precision="0"
label="请输入"
v-model="basicInfoForm.errTimes"
/>
<span> 次，本次任务终止 </span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="任务类型" prop="taskType">
<el-select
clearable
style="width: 100%"
placeholder="请选择交"
v-model="basicInfoForm.taskType"
>
<el-form-item label="任务类型">
<el-select style="width: 100%" v-model="basicInfoForm.taskType">
<el-option label="填报" value="填报" />
<el-option label="采集" value="采集" />
</el-select>
@ -211,8 +65,40 @@
</el-col>
<el-col :span="6">
<el-form-item label="驱动名称" prop="driverName">
<el-input v-model="basicInfoForm.driverName" clearable placeholder="请输入交互方式" />
<el-form-item label="cron表达式">
<el-input v-model="basicInfoForm.cron" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="分辨率">
<el-input v-model="basicInfoForm.resolution" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="浏览器路径">
<el-input v-model="basicInfoForm.browserUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动路径">
<el-input v-model="basicInfoForm.driverUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动名称">
<el-input v-model="basicInfoForm.driverName" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="任务失败">
<el-input-number :min="0" :max="9999" :precision="0" v-model="basicInfoForm.errTimes" />
<span> 次，本次任务终止 </span>
</el-form-item>
</el-col>
</el-row>
@ -221,37 +107,33 @@
<h3> 流程配置 </h3>
<div v-for="(item, index) in accountForm" :key="item.sid" class="draggable-item">
<el-form disabled :model="item" label-width="120px" class="account-form" :ref="`accountFormRef${index}`">
<el-form :model="item" label-width="120px" class="account-form" :ref="`accountFormRef${index}`" disabled>
<el-row>
<el-col :span="6">
<el-form-item label="操作元素" prop="element">
<el-input v-model="item.element" clearable placeholder="请输入操作元素" />
<el-form-item label="操作元素">
<el-input v-model="item.element" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素路径" prop="xpath">
<el-input v-model="item.xpath" clearable placeholder="请输入交互方式" />
<el-form-item label="元素路径">
<el-input v-model="item.xpath" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素值" prop="elementName">
<el-input v-model="item.elementName" clearable placeholder="请输入元素值" />
<el-form-item label="元素值">
<el-input v-model="item.elementName" />
</el-form-item>
</el-col>
<el-col :span="6"> </el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="等待时间(秒)" prop="sleepTime">
<el-form-item label="等待时间(秒)">
<el-input-number
:min="0"
clearable
:max="10"
:precision="1"
label="请输入"
style="width: 100%"
v-model="item.sleepTime"
/>
@ -259,8 +141,8 @@
</el-col>
<el-col :span="6">
<el-form-item label="依赖上一步" prop="isStep">
<el-select clearable style="width: 100%" placeholder="请选择交" v-model="item.isStep">
<el-form-item label="依赖上一步">
<el-select style="width: 100%" v-model="item.isStep">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
@ -268,13 +150,8 @@
</el-col>
<el-col :span="6">
<el-form-item label="交互方式" prop="interactive">
<el-select
clearable
style="width: 100%"
placeholder="请选择交互方式"
v-model="item.interactive"
>
<el-form-item label="交互方式">
<el-select clearable style="width: 100%" v-model="item.interactive">
<el-option
:key="item.value"
:value="item.value"
@ -286,11 +163,18 @@
</el-col>
<el-col :span="6">
<el-form-item
label="内容"
prop="content"
:label="item.interactive !== '数据采集' ? '内容' : '关联任务'"
v-if="!['单击', '双击', '悬停', ''].includes(item.interactive)"
>
<el-input v-model="item.content" clearable placeholder="请输入内容" />
<el-input v-if="item.interactive !== '数据采集'" v-model="item.content" />
<el-select v-else style="width: 100%" v-model="item.realTaskId">
<el-option
:key="item.taskId"
:value="item.taskId"
:label="item.taskName"
v-for="item in taskSelectList"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -300,25 +184,52 @@
</template>
<script>
import { getPlatformListAPI } from '@/api/platform/index'
import { addTaskAPI, editTaskAPI } from '@/api/task/index'
import { getPlatformSelectListAPI } from '@/api/platform/index'
import { getTaskSelectListAPI, getTaskDetailsAPI } from '@/api/task/index'
export default {
name: 'AddAndEditForm',
name: 'DetailsOne',
props: {
detailsRow: {
type: Object,
default: () => {},
detailsId: {
type: [String, Number],
default: () => '',
},
},
data() {
return {
// 基本信息
basicInfoForm: {},
basicInfoForm: {
taskName: '测试任务',
systemName: '',
systemId: '',
url: '',
isLogin: '',
roleId: '',
roleName: '',
userName: '',
password: '',
strategy: 'D', // 运行策略
weeks: '', // 每周
startTime: '', // 开始时间
endTime: '', // 结束时间
day: '', // 月天
times: '', // 时间段
errTimes: 10,
browserUrl: '测试浏览器路径',
driverUrl: '测试驱动路径',
resolution: '--force-device-scale-factor=0.7',
taskId: null,
taskType: '填报',
driverName: '测试驱动名称',
cronExpression: '',
cron: '',
userId: '',
},
// 流程配置
accountForm: [],
// 平台信息
platformList: [],
// 账号角色
roleList: [],
@ -333,6 +244,11 @@ export default {
{ value: '单选', label: '下拉选择-单选' },
{ value: '多选', label: '下拉选择-多选' },
],
expression: '',
openCron: false,
taskSelectList: [],
}
},
@ -343,67 +259,88 @@ export default {
methods: {
// 获取平台信息
async getPlatformList() {
const res = await getPlatformListAPI()
const res = await getPlatformSelectListAPI()
this.platformList = res?.data
},
// 获取任务下拉列表
async getTaskSelectList(data) {
const res = await getTaskSelectListAPI(data)
this.taskSelectList = res?.data
},
// 获取任务详情
async getTaskDetails() {
const res = await getTaskDetailsAPI({ taskId: this.detailsId })
this.getTaskSelectList({ taskId: this.detailsId })
const {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
driverName,
cron,
list,
} = res.data
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
// strategy,
// weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
cron,
driverName,
// startTime: times.split('-')[0],
// endTime: times.split('-')[1],
}
this.accountForm = list.map((item) => {
return { ...item, sid: item.id }
})
this.roleList = this.platformList.find((item) => item.id === systemId)?.list || []
},
//
},
watch: {
detailsRow: {
detailsId: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
const {
taskName,
systemName,
url,
isLogin,
roleId,
roleName,
userName,
password,
strategy,
weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
list,
} = newVal
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
roleId,
roleName,
userName,
password,
strategy,
weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
startTime: times.split('-')[0],
endTime: times.split('-')[1],
}
this.accountForm = newVal.list.map((item) => {
return { ...item, sid: item.id }
})
if (newVal !== '') {
this.getTaskDetails()
}
},
deep: true,

519
src/views/task/components/details-three.vue
View File

@ -1,55 +1,104 @@
<template>
<!-- 详情1 -->
<div style="padding-bottom: 40px">
<h3> 基本信息 </h3>
<el-form :model="basicInfoForm" :rules="basicInfoFormRules" ref="basicInfoFormRef" label-width="120px" disabled>
<el-form :model="basicInfoForm" label-width="120px" disabled>
<el-row>
<el-col :span="12">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="任务名称">
<el-input v-model="basicInfoForm.taskName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="平台名称" prop="platformName">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="平台名称">
<el-select style="width: 100%" v-model="basicInfoForm.systemId">
<el-option
:key="item.id"
:value="item.id"
:label="item.name"
v-for="item in platformList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="平台网址">
<el-input v-model="basicInfoForm.url" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否需要登录">
<el-select style="width: 100%" v-model="basicInfoForm.isLogin">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="账号角色">
<el-select style="width: 100%" v-model="basicInfoForm.userId">
<el-option
:key="item.id"
:value="item.id"
:label="item.roleName"
v-for="item in roleList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="系统账号">
<el-input v-model="basicInfoForm.userName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务类型">
<el-select style="width: 100%" v-model="basicInfoForm.taskType">
<el-option label="填报" value="填报" />
<el-option label="采集" value="采集" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="cron表达式">
<el-input v-model="basicInfoForm.cron" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="平台网址" prop="platformUrl">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="分辨率">
<el-input v-model="basicInfoForm.resolution" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否需要登录" prop="isLogin">
<el-input v-model="basicInfoForm.name" />
<el-col :span="6">
<el-form-item label="浏览器路径">
<el-input v-model="basicInfoForm.browserUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动路径">
<el-input v-model="basicInfoForm.driverUrl" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="驱动名称">
<el-input v-model="basicInfoForm.driverName" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="账号角色" prop="accountRole">
<el-input v-model="basicInfoForm.name" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="系统账号" prop="systemAccount">
<el-input v-model="basicInfoForm.name" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="运行策略" prop="runStrategy">
<el-input v-model="basicInfoForm.address" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="任务失败" prop="taskFail">
<el-input v-model="basicInfoForm.address" />
<el-col :span="6">
<el-form-item label="任务失败">
<el-input-number :min="0" :max="9999" :precision="0" v-model="basicInfoForm.errTimes" />
<span> 次，本次任务终止 </span>
</el-form-item>
</el-col>
</el-row>
@ -57,86 +106,368 @@
<h3> 流程配置 </h3>
<el-row>
<el-col :span="1" style="height: 600px">
<el-steps direction="vertical" :active="1">
<el-step></el-step>
<el-step></el-step>
<el-step></el-step>
</el-steps>
</el-col>
<el-col :span="23">
<el-form
disabled
:key="item.id"
:model="item"
label-width="120px"
class="account-form"
:rules="accountFormRules"
:ref="`accountFormRef${index}`"
v-for="(item, index) in accountForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="操作元素" prop="loginAccount">
<el-input v-model="item.loginAccount" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="元素值" prop="loginPassword">
<el-input v-model="item.loginPassword" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="交互方式" prop="accountRole">
<el-input v-model="item.accountRole" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
<div v-for="(item, index) in accountForm" :key="item.sid" class="draggable-item">
<el-form :model="item" label-width="120px" class="account-form" :ref="`accountFormRef${index}`" disabled>
<el-row>
<el-col :span="6">
<el-form-item label="操作元素">
<el-input v-model="item.element" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素路径">
<el-input v-model="item.xpath" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="元素值">
<el-input v-model="item.elementName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<i
v-if="runStatus || (!runStatus && errId != item.id && index < errIndex)"
style="color: #67c23a; font-size: 22px"
class="el-icon-circle-check"
/>
<i
v-if="!runStatus && errId == item.id"
style="color: #f56c6c; font-size: 22px"
class="el-icon-circle-close"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="等待时间(秒)">
<el-input-number
:min="0"
:max="10"
:precision="1"
style="width: 100%"
v-model="item.sleepTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="依赖上一步">
<el-select style="width: 100%" v-model="item.isStep">
<el-option label="是" value="是" />
<el-option label="否" value="否" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="交互方式">
<el-select clearable style="width: 100%" v-model="item.interactive">
<el-option
:key="item.value"
:value="item.value"
:label="item.label"
v-for="item in interactiveList"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
:label="item.interactive !== '数据采集' ? '内容' : '关联任务'"
v-if="!['单击', '双击', '悬停', ''].includes(item.interactive)"
>
<el-input v-if="item.interactive !== '数据采集'" v-model="item.content" />
<el-select v-else style="width: 100%" v-model="item.realTaskId">
<el-option
:key="item.taskId"
:value="item.taskId"
:label="item.taskName"
v-for="item in taskSelectList"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import { getPlatformSelectListAPI } from '@/api/platform/index'
import { getTaskSelectListAPI, getTaskDetailsAPI } from '@/api/task/index'
export default {
name: 'DetailsOne',
props: {
detailsIds: {
type: [String, Number],
default: () => '',
},
runStatus: {
type: Boolean,
default: true,
},
errId: {
type: [String, Number],
default: () => '',
},
},
data() {
return {
// 基本信息
basicInfoForm: {
taskName: '',
platformName: '',
platformUrl: '',
taskName: '测试任务',
systemName: '',
systemId: '',
url: '',
isLogin: '',
accountRole: '',
systemAccount: '',
runStrategy: '',
taskFail: '',
roleId: '',
roleName: '',
userName: '',
password: '',
strategy: 'D', // 运行策略
weeks: '', // 每周
startTime: '', // 开始时间
endTime: '', // 结束时间
day: '', // 月天
times: '', // 时间段
errTimes: 10,
browserUrl: '测试浏览器路径',
driverUrl: '测试驱动路径',
resolution: '--force-device-scale-factor=0.7',
taskId: null,
taskType: '填报',
driverName: '测试驱动名称',
cronExpression: '',
cron: '',
userId: '',
},
accountForm: [
{
loginAccount: '',
loginPassword: '',
accountRole: '',
id: Date.now(), // 给个唯一id 绑定key
},
// 流程配置
accountForm: [],
// 平台信息
platformList: [],
// 账号角色
roleList: [],
// 交互方式
interactiveList: [
{ value: '单击', label: '单击' },
{ value: '双击', label: '双击' },
{ value: '悬停', label: '悬停' },
{ value: '获取对象', label: '获取对象' },
{ value: '文本输入', label: '文本输入' },
{ value: '数据采集', label: '数据采集' },
{ value: '单选', label: '下拉选择-单选' },
{ value: '多选', label: '下拉选择-多选' },
],
expression: '',
openCron: false,
taskSelectList: [],
}
},
methods: {},
computed: {
// 错误索引
errIndex() {
return this.accountForm.findIndex((e) => e.id == this.errId)
},
},
created() {
this.getPlatformList()
},
methods: {
// 获取平台信息
async getPlatformList() {
const res = await getPlatformSelectListAPI()
this.platformList = res?.data
},
// 获取任务下拉列表
async getTaskSelectList(data) {
const res = await getTaskSelectListAPI(data)
this.taskSelectList = res?.data
},
// 获取任务详情
async getTaskDetails() {
const res = await getTaskDetailsAPI({ taskId: this.detailsIds })
this.getTaskSelectList({ taskId: this.detailsIds })
const {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
driverName,
cron,
list,
} = res.data
this.basicInfoForm = {
taskName,
systemName,
url,
isLogin,
// roleId,
roleName,
userName,
password,
// strategy,
// weeks,
startTime,
endTime,
day,
times,
errTimes,
resolution,
taskType,
taskId,
browserUrl,
driverUrl,
systemId,
userId,
cron,
driverName,
// startTime: times.split('-')[0],
// endTime: times.split('-')[1],
}
this.accountForm = list.map((item) => {
return { ...item, sid: item.id }
})
this.roleList = this.platformList.find((item) => item.id === systemId)?.list || []
},
//
},
watch: {
detailsIds: {
handler(newVal) {
if (newVal !== '') {
this.getTaskDetails()
}
},
deep: true,
immediate: true,
},
},
}
</script>
<style lang="scss" scoped>
.account-form {
.draggable-container {
margin-top: 20px;
}
.draggable-item {
margin-bottom: 15px;
transition: all 0.3s ease;
}
.account-form {
border: 1px solid #dfe6ec;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #fff;
transition: all 0.3s ease;
&:hover {
border-color: #409eff;
}
}
.drag-handle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
cursor: move;
color: #909399;
font-size: 12px;
padding: 10px 5px;
border: 1px dashed #dcdfe6;
border-radius: 4px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
background: #f5f7fa;
transition: all 0.3s ease;
&:hover {
color: #409eff;
border-color: #409eff;
background: #ecf5ff;
}
i {
font-size: 16px;
margin-bottom: 4px;
}
span {
font-size: 10px;
}
}
.action-buttons {
display: flex;
align-items: center;
gap: 5px;
.el-button {
padding: 5px 8px;
min-height: auto;
&:hover {
background: #f5f7fa;
}
&.is-disabled {
color: #c0c4cc;
cursor: not-allowed;
}
}
}
// 拖拽时的样式
.sortable-ghost {
opacity: 0.5;
background: #f0f9ff;
border: 2px dashed #409eff;
}
.sortable-chosen {
background: #ecf5ff;
border-color: #409eff;
}
.sortable-drag {
transform: rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
</style>

96
src/views/task/components/details-two.vue
View File

@ -1,11 +1,24 @@
<template>
<div>
<el-form :model="queryParams" ref="queryFormRef" label-width="100px" inline>
<el-form-item>
<el-input placeholder="运行时间" v-model="queryParams.name" />
<el-form-item prop="createTime">
<!-- <el-input placeholder="运行时间" v-model="queryParams.createTime" /> -->
<el-date-picker
type="date"
style="width: 240px"
placeholder="运行时间"
value-format="yyyy-MM-dd"
v-model="queryParams.createTime"
/>
</el-form-item>
<el-form-item>
<el-input placeholder="运行状态" v-model="queryParams.cronExpression" />
<el-form-item prop="status">
<!-- <el-input placeholder="运行状态" v-model="queryParams.cronExpression" /> -->
<el-select v-model="queryParams.status" clearable placeholder="运行状态" style="width: 240px">
<el-option label="成功" value="1" />
<el-option label="失败" value="0" />
</el-select>
</el-form-item>
<el-form-item>
@ -16,8 +29,15 @@
<el-table :data="tableData" style="width: 100%">
<el-table-column align="center" type="index" label="序号" />
<el-table-column align="center" prop="name" label="运行时间" />
<el-table-column align="center" prop="description" label="运行状态" />
<el-table-column align="center" prop="createTime" label="运行时间" />
<el-table-column align="center" prop="message" label="运行状态">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.status == 1 ? 'success' : 'danger'">
{{ scope.row.status == 1 ? '成功' : '失败' }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="taskName" label="任务名称" />
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button style="padding: 4px 6px" size="mini" type="success" @click="handleDetails(scope.row)">
@ -34,7 +54,7 @@
/>
<DialogModal :dialogConfig="dialogConfig" @closeDialogOuter="handleCloseDialogOuter">
<template #outerContent>
<DetailsThree />
<DetailsThree :detailsIds="detailsIds" :runStatus="runStatus" :errId="errId" />
</template>
</DialogModal>
</div>
@ -43,12 +63,13 @@
<script>
import DialogModal from '@/components/DialogModel'
import DetailsThree from './details-three.vue'
import { getTaskRunListAPI } from '@/api/task/index'
export default {
name: 'DetailsTwo',
props: {
detailsRow: {
type: Object,
default: () => ({}),
detailsId: {
type: [String, Number],
default: () => '',
},
},
components: {
@ -57,20 +78,16 @@ export default {
},
data() {
return {
tableData: [
{
name: '运行时间1',
description: '运行状态1',
},
{
name: '运行时间2',
description: '运行状态2',
},
],
tableData: [],
detailsIds: '',
runStatus: true,
errId: '',
queryParams: {
name: '',
cronExpression: '',
jobStatus: '',
createTime: '',
status: '',
pageNum: 1,
pageSize: 10,
taskId: '',
},
dialogConfig: {
@ -81,14 +98,28 @@ export default {
}
},
methods: {
getTaskList() {
console.log(this.queryParams)
async getTaskList() {
const res = await getTaskRunListAPI(this.queryParams)
console.log(res, '任务运行情况列表')
this.tableData = res?.rows
this.total = res?.total
},
handleReset() {
this.resetForm('queryFormRef')
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getTaskList()
},
handleDetails(row) {
console.log(row)
this.detailsIds = row.taskId
if (row.status == 1) {
this.runStatus = true
this.errId = ''
} else {
this.runStatus = false
this.errId = row.errId
}
this.dialogConfig.outerVisible = true
},
@ -96,6 +127,19 @@ export default {
this.dialogConfig.outerVisible = false
},
},
watch: {
detailsId: {
handler(newVal) {
if (newVal !== '') {
this.queryParams.taskId = newVal
this.getTaskList()
}
},
deep: true,
immediate: true,
},
},
}
</script>

8
src/views/task/components/taskDetails.vue
View File

@ -6,7 +6,7 @@
<el-radio-button label="任务运行情况"></el-radio-button>
</el-radio-group>
<component :is="components[activeName]" :detailsRow="detailsRow" />
<component :is="components[activeName]" :detailsId="detailsId" />
</div>
</template>
@ -16,9 +16,9 @@ import DetailsTwo from './details-two.vue'
export default {
name: 'TaskDetails',
props: {
detailsRow: {
type: Object,
default: () => ({}),
detailsId: {
type: [String, Number],
default: () => '',
},
},
components: {

96
src/views/task/index.vue
View File

@ -2,47 +2,52 @@
<!-- 任务管理 -->
<div class="task-container">
<el-form :model="queryParams" ref="queryFormRef" label-width="100px" inline>
<el-form-item>
<el-input placeholder="任务名称" v-model="queryParams.name" />
<el-form-item prop="taskName">
<el-input placeholder="任务名称" v-model="queryParams.taskName" />
</el-form-item>
<el-form-item>
<el-input placeholder="运行策略" v-model="queryParams.cronExpression" />
<el-form-item prop="systemName">
<el-input placeholder="平台名称" v-model="queryParams.systemName" />
</el-form-item>
<el-form-item>
<el-input placeholder="运行状态" v-model="queryParams.jobStatus" />
</el-form-item>
<el-form-item>
<el-input placeholder="更新时间" v-model="queryParams.updateTime" />
<el-form-item prop="status">
<!-- <el-input placeholder="运行状态" v-model="queryParams.status" /> -->
<el-select v-model="queryParams.status" placeholder="状态" clearable>
<el-option label="关闭" value="0" />
<el-option label="开启" value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="getTaskList">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-refresh" @click="handleReset">重置</el-button>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="onHandleAddAndEditAndCopy(1, {})"
<el-button size="mini" type="primary" icon="el-icon-plus" @click="onHandleAddAndEditAndCopy(1, '')"
>新建任务</el-button
>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column align="center" type="index" label="序号" />
<el-table-column align="center" prop="taskName" label="任务名称" />
<el-table-column align="center" prop="systemName" label="平台名称" />
<el-table-column align="center" label="运行策略">
<template slot-scope="scope">
<span v-if="scope.row.strategy === 'D'">每天</span>
<span v-if="scope.row.strategy === 'W'">每周</span>
<span v-if="scope.row.strategy === 'M'">每月</span>
</template>
</el-table-column>
<el-table-column align="center" prop="status" label="运行时间" />
<el-table-column align="center" prop="browserUrl" label="浏览器路径" />
<el-table-column align="center" prop="driverName" label="驱动名称" />
<el-table-column align="center" prop="driverUrl" label="驱动路径" />
<el-table-column align="center" prop="taskType" label="任务类型" />
<el-table-column align="center" label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" />
<el-switch
active-value="1"
inactive-value="0"
v-model="scope.row.status"
@change="handleStatusChange($event, scope.row)"
/>
</template>
</el-table-column>
<el-table-column align="center" prop="status" label="上次运行时间" />
<el-table-column align="center" prop="status" label="上次运行状态" />
<el-table-column align="center" prop="exeTime" label="上次运行时间" />
<el-table-column align="center" label="执行">
<template slot-scope="scope">
<el-button
@ -65,7 +70,7 @@
style="padding: 4px 6px"
size="mini"
type="primary"
@click="onHandleAddAndEditAndCopy(2, scope.row)"
@click="onHandleAddAndEditAndCopy(2, scope.row.taskId)"
>
编辑
</el-button>
@ -73,7 +78,7 @@
style="padding: 4px 6px"
size="mini"
type="primary"
@click="onHandleAddAndEditAndCopy(3, scope.row)"
@click="onHandleAddAndEditAndCopy(3, scope.row.taskId)"
>
复制
</el-button>
@ -93,13 +98,13 @@
<DialogModal :dialogConfig="dialogConfig" @closeDialogOuter="handleCloseDialogOuter">
<template #outerContent>
<template v-if="dialogConfig.outerTitle === '详情'">
<TaskDetails :detailsRow="detailsRow" />
<TaskDetails :detailsId="detailsId" />
</template>
<template v-else>
<AddAndEditForm
:formType="formType"
:editRow="editRow"
:detailsId="detailsId"
ref="addAndEditFormRef"
@addSuccess="onHandleAddSuccess"
/>
@ -117,7 +122,7 @@
import DialogModal from '@/components/DialogModel'
import TaskDetails from './components/taskDetails.vue'
import AddAndEditForm from './components/addAndEditForm.vue'
import { getTaskListAPI, delTaskAPI } from '@/api/task'
import { getTaskListAPI, delTaskAPI, updateTaskStatusAPI } from '@/api/task'
export default {
name: 'Task',
components: {
@ -131,15 +136,15 @@ export default {
formType: 1,
tableData: [],
editRow: {},
detailsId: '',
detailsRow: {},
// 页面数据
queryParams: {
name: '',
pageNum: 1,
pageSize: 10,
cronExpression: '',
jobStatus: '',
updateTime: '',
systemName: '',
status: '',
},
dialogConfig: {
outerTitle: '新增任务',
@ -154,9 +159,10 @@ export default {
},
methods: {
// 新增编辑复制
onHandleAddAndEditAndCopy(type, row) {
onHandleAddAndEditAndCopy(type, taskId) {
this.formType = type
this.editRow = row
// this.editRow = row
this.detailsId = taskId
this.dialogConfig.outerTitle = type === 1 ? '新增任务' : type === 2 ? '编辑任务' : '复制任务'
this.dialogConfig.outerVisible = true
},
@ -176,14 +182,14 @@ export default {
.catch(() => {})
},
handleDetails(row) {
this.detailsRow = row
this.detailsId = row.taskId
this.dialogConfig.outerTitle = '详情'
this.dialogConfig.outerVisible = true
},
async getTaskList() {
const res = await getTaskListAPI()
this.tableData = res.data
this.total = res.data.length
const res = await getTaskListAPI(this.queryParams)
this.tableData = res?.rows
this.total = res?.total
},
handleReset() {
@ -224,6 +230,24 @@ export default {
handleExecute(row) {
console.log(row)
},
// 修改任务状态
async handleStatusChange(event, row) {
const data = {
taskId: row.taskId,
status: event,
}
try {
const res = await updateTaskStatusAPI(data)
if (res.code === 200) {
this.$modal.msgSuccess('修改任务状态成功')
this.getTaskList()
}
} catch (error) {
row.status = event === '1' ? '0' : '1'
}
},
},
}
</script>