Skip to content

F
fk-spider-web
Commit 5973f881 by yzh
Options

feat:修改了任务信息中的开关组件逻辑。

parent 93eafedc
Showing with 163 additions and 52 deletions
src/views/os-spiderManager/index.vue
......@@ -80,7 +80,10 @@ const pageObj = ref({
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/os-taskInformation',
path: '/osTaskInformation/list',
query: {
jump: 'yes'
}
})
}
const getData = () => {
......
src/views/os-status/components/dataCard.vue
......@@ -99,7 +99,8 @@ const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes'
jump: 'yes',
mode: '状态监控'
}
})
}
......
src/views/os-system/components/addUserDialog.vue
......@@ -3,19 +3,19 @@
@close="handleClose" draggable>
<el-form :inline="true">
<el-form-item label="用户账号:">
<el-input v-model="taskName" />
<el-input v-model="userAccount" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
<el-input v-model="userName" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
<el-input v-model="userRemark" />
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
<el-input v-model="userPassword" />
</el-form-item>
</el-form>
<div class="m-t-4">
......@@ -67,8 +67,11 @@ const emit = defineEmits(['update:dialogVisible', 'confirm'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
const userAccount = ref('')
const userName = ref('')
const userRemark = ref('')
const userPassword = ref('')
// 关闭的方法
const handleClose = () => {
......@@ -76,7 +79,11 @@ const handleClose = () => {
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
if (currentMode.value === '1') {
} else if (currentMode.value === '2') {
}
currentVisible.value = false
}
......
src/views/os-system/index.vue
......@@ -6,7 +6,7 @@
<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
<el-button type="danger" plain @click="handleDelete">批量删除</el-button>
</el-form-item>
</el-form>
</div>
......@@ -21,10 +21,10 @@
<el-table-column property="createTime" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
<el-button type="primary" plain @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)">
<el-button type="danger" plain @click="handleDelete(scope.row)">
删除
</el-button>
</template>
......@@ -35,10 +35,10 @@
@pagination="getData" />
</div>
<!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<deleteDialog v-model:dialogVisible="showDeleteDialog" @mode="deleteMode" />
<!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword" @confirm="handleConfirm" />
:user-remark="userRemark" :user-password="userPassword" />
</div>
</template>
......@@ -98,7 +98,7 @@ const pageObj = ref({
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
const handleEdit = (row: any) => {
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
......@@ -108,7 +108,7 @@ const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
const handleDelete = (row: any) => {
showDeleteDialog.value = true
}
......
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="taskCard p-6" v-for="task in taskList" :key="task.taskId">
<div class="flex justify-center">
<el-form-item>
<span class="titleStyle">任务名称</span>
</el-form-item>
</div>
<div class="flex justify-center">
<div class="flex justify-center ">
<el-form-item>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button>
<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
<el-button type="danger" @click="deleteTask" class="deleteButton">删除</el-button>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">启用/停止: </span>
<el-switch v-model="taskSwitch" />
<span class="wordStyle">执行频率: {{ successTask }} </span>
<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
<span class="wordStyle">执行频率: {{ task.frequency }} </span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">执行次数: {{ failTask }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span>
<span class="wordStyle">执行次数: {{ task.executeCount }} 个; </span>
<span class="wordStyle">成功次数: {{ task.successCount }} 个</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">失败次数: {{ failTask }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
<span class="wordStyle">失败次数: {{ task.failCount }} 个; </span>
<span class="wordStyle">异常记录: {{ task.unusualCount }} 个</span>
</el-space>
</el-form-item>
</div>
......@@ -47,6 +47,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
......@@ -63,37 +64,74 @@ defineProps({
default: ''
}
})
const router = useRouter()
const editMode = ref('')
const deleteMode = ref('1')
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const options = [
const taskList = ref([
{
value: 'year',
label: '近一年',
taskId: '1',
taskName: '任务1',
status: 1,
frequency: '1',
executeCount: '2',
successCount: '3',
failCount: '4',
unusualCount: '5'
},
{
value: 'month',
label: '近一月',
taskId: '2',
taskName: '任务2',
status: 0,
frequency: '6',
executeCount: '7',
successCount: '8',
failCount: '9',
unusualCount: '10'
},
{
value: 'week',
label: '近一周',
taskId: '3',
taskName: '任务3',
status: 1,
frequency: '11',
executeCount: '12',
successCount: '13',
failCount: '14',
unusualCount: '15'
},
{
value: 'day',
label: '近一日',
taskId: '4',
taskName: '任务4',
status: 0,
frequency: '16',
executeCount: '17',
successCount: '18',
failCount: '19',
unusualCount: '20'
},
{
value: 'year',
label: '近一年',
taskId: '5',
taskName: '任务5',
status: 1,
frequency: '21',
executeCount: '22',
successCount: '23',
failCount: '24',
unusualCount: '25'
},
{
value: 'month',
label: '近一月',
taskId: '6',
taskName: '任务6',
status: 0,
frequency: '26',
executeCount: '27',
successCount: '28',
failCount: '29',
unusualCount: '30'
},
]
])
const deleteTask = () => {
deleteMode.value = '1'
......@@ -103,6 +141,18 @@ const editTask = () => {
editMode.value = '2'
showTaskDialog.value = true
}
const goToTaskRecord = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '任务信息'
}
})
}
const changeStatus = (task: any) => {
}
const handleEdit = () => {
}
......@@ -113,7 +163,20 @@ const handleDeleteConfirm = () => {
<style lang="scss" scoped>
// .editButton{
// background-image: url("@/assets/picture/box2.png");
// background: none;
// background-image: url("@/assets/picture/button1.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .recordButton{
// background: none;
// background-image: url("@/assets/picture/button2.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .deleteButton{
// background: none;
// background-image: url("@/assets/picture/button3.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
......@@ -144,5 +207,14 @@ const handleDeleteConfirm = () => {
// 去除按钮边框
.el-button:focus {
outline: none;
color: #ffffff;
border: none;
}
</style>
<style>
/* .el-button{
color: #ffffff;
border: none;
} */
</style>
\ No newline at end of file
src/views/os-taskInformation/index.vue
<template>
<div>
<div class="m-t-7" />
<div class="text-left p-6 toolbarStyle">
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
<div class="m-t-5" />
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
......@@ -51,7 +52,10 @@ import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue'
import addTaskDialog from './components/addTaskDialog.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const editMode = ref('1')
const taskValue = ref('')
const taskOptions = [
......@@ -82,19 +86,32 @@ const showDialog = ref(false)
// 处理删除确认
const handleDeleteConfirm = () => {
console.log('用户确认删除')
// 在这里执行实际的删除操作
}
const openTaskDialog = () => {
showDialog.value = true
}
const goToTaskInformation = () => {
router.push({ path: '/osSpiderManager/list' })
}
onMounted(() => {
console.log('任务信息');
})
</script>
<style scoped>
/* 返回样式 */
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
/* 卡片样式 */
.cardStyle {
display: flex;
......@@ -121,8 +138,8 @@ onMounted(() => {
.formStyle {
display: flex;
justify-content: space-around;
margin-top: 1%;
padding: 3px;
margin-top: 0.5%;
padding: 2px;
}
</style>
......
src/views/os-taskRecord/index.vue
<template>
<div>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
</div>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="m-t-7" />
<div class="text-left p-6 toolbarStyle">
<div class="formStyle">
......@@ -12,7 +11,8 @@
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</el-form-item>
......@@ -30,7 +30,8 @@
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</el-form-item>
......@@ -221,9 +222,18 @@ const handleDetails = (row: any) => {
})
}
const goToStatus = () => {
if (route.query.mode === '状态监控') {
router.push({
path: '/osStatus/list',
})
} else {
router.push({
path: '/osTaskInformation/list',
})
}
}
const getData = () => {
console.log('getData');
......
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