| | |
| | | <!-- 任务统计表格 --> |
| | | <template> |
| | | <SearchBox></SearchBox> |
| | | <SearchBox @search="searchClick" @addTask="handleAddTask"></SearchBox> |
| | | <div class="task-intermediate-content"> |
| | | <el-table :data="jobListData" style="width: 100%" height="calc(100vh - 180px)"> |
| | | <el-table-column label="序号" width="60"> |
| | | <template #default="scope"> |
| | | {{ (jobListParams.page - 1) * jobListParams.limit + scope.$index + 1 }} |
| | | {{ (jobListParams.current - 1) * jobListParams.size + scope.$index + 1 }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="job_info_num" label="任务编号" /> |
| | |
| | | <el-table-column prop="dept_name" label="所属部门" /> |
| | | <el-table-column prop="device_names" label="所属机巢" /> |
| | | <el-table-column prop="ai_type_str" label="关联算法" /> |
| | | <el-table-column prop="status" label="任务状态" > |
| | | <el-table-column label="任务状态" > |
| | | <template #default="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | | {{ getStatusText(scope.row.status) }} |
| | | </el-tag> |
| | | {{ scope.row.status ? getStatusText(scope.row.status) : '' }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="industry_type_str" label="任务类型" /> |
| | |
| | | </el-table> |
| | | <div class="pagination"> |
| | | <el-pagination |
| | | v-model:current-page="jobListParams.page" |
| | | v-model:page-size="jobListParams.limit" |
| | | v-model:current-page="jobListParams.current" |
| | | v-model:page-size="jobListParams.size" |
| | | :page-sizes="[10, 20, 30, 50]" |
| | | layout="total, sizes, prev, pager, next" |
| | | :total="total" |
| | |
| | | /> |
| | | </div> |
| | | </div> |
| | | <!-- 添加任务 --> |
| | | <AddTask v-model:show="isShowAddTask" @refresh="searchClick"/> |
| | | <!-- 当前任务详情 --> |
| | | <CurrentTaskDetails v-model:show="isShowCurrentTaskDetails" :rowData="rowData"/> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import SearchBox from '../SearchBox.vue'; |
| | | import AddTask from './AddTask.vue'; |
| | | import CurrentTaskDetails from './CurrentTaskDetails.vue'; |
| | | import { jobList } from '@/api/home/task'; |
| | | |
| | | const jobListParams = reactive({ |
| | | page: 1, |
| | | limit: 10, |
| | | current: 1, |
| | | size: 10, |
| | | searchParams:{} |
| | | }); |
| | | const jobListData = ref([]); |
| | | const total = ref(0); |
| | | |
| | | // 获取任务列表 |
| | | const getJobList = () => { |
| | | jobList({current:1,size:10}).then(res => { |
| | | jobList(jobListParams).then(res => { |
| | | if (res.data.code !== 0) return; |
| | | jobListData.value = res.data.data.records; |
| | | total.value = res.data.data.total; |
| | |
| | | 4: '已取消', |
| | | 5: '执行失败' |
| | | }; |
| | | return statusMap[status] || '未知'; |
| | | return statusMap[status] || '-'; |
| | | }; |
| | | |
| | | // 状态标签类型 |
| | | const getStatusType = (status) => { |
| | | const typeMap = { |
| | | 1: 'info', |
| | | 2: 'warning', |
| | | 3: 'success', |
| | | 4: '', |
| | | 5: 'danger' |
| | | }; |
| | | return typeMap[status] || ''; |
| | | }; |
| | | |
| | | // 查看详情 |
| | | // 查看当前任务详情 如果是一台机则显示详情 如果是多台机则进入集群调度(暂未开发) |
| | | let isShowCurrentTaskDetails = ref(false); |
| | | let rowData = ref({}); |
| | | const handleDetail = (row) => { |
| | | console.log('查看详情', row); |
| | | isShowCurrentTaskDetails.value = true; |
| | | rowData.value = row? row : {}; |
| | | }; |
| | | |
| | | // 分页大小改变 |
| | | const handleSizeChange = (val) => { |
| | | jobListParams.limit = val; |
| | | jobListParams.size = val; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 页码改变 |
| | | const handleCurrentChange = (val) => { |
| | | jobListParams.page = val; |
| | | jobListParams.current = val; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 传参查询条件 |
| | | const searchClick = (params) => { |
| | | jobListParams.current = 1; |
| | | jobListParams.size = 10; |
| | | jobListParams.searchParams = params; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 新建任务 |
| | | const isShowAddTask = ref(false); |
| | | const handleAddTask = () => { |
| | | isShowAddTask.value = true; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | |
| | | <style lang="scss" scoped> |
| | | .task-intermediate-content { |
| | | position: absolute; |
| | | top: 190px; |
| | | width: calc(100% - 400px - 400px - 100px); |
| | | left: 450px; |
| | | height: 770px; |
| | | top: 400px; |
| | | width: calc(100% - 80px); |
| | | left: 40px; |
| | | height: 500px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |