| | |
| | | <template> |
| | | <el-divider content-position="left">相关任务 {{ total }}次</el-divider> |
| | | <el-table :data="list" style="width: 100%"> |
| | | <el-table-column prop="id" label="id" /> |
| | | <el-table-column prop="name" label="名称" /> |
| | | <el-table-column prop="industry_type_str" label="任务类型" /> |
| | | <el-table-column prop="ai_type_str" label="关联算法" /> |
| | | <el-table-column prop="event_number" label="事件工单" /> |
| | | <el-table-column prop="remark" label="备注" /> |
| | | <el-table-column prop="area_code" label="地区代码" /> |
| | | <el-table-column prop="begin_time" label="开始时间" /> |
| | | <el-table-column prop="end_time" label="结束时间" /> |
| | | <el-table-column prop="creator_name" label="创建者" /> |
| | | <el-table-column label="操作"> |
| | | <template #default="scope"> |
| | | <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination |
| | | background |
| | | :page-sizes="[10, 20, 30, 50]" |
| | | v-model:current-page="sizeParams.current" |
| | | v-model:page-size="sizeParams.size" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | | @change="pageChange" |
| | | <div class="devicejob-container"> |
| | | <div class="machineTableDetailsTitle"> |
| | | <p> |
| | | 相关任务 |
| | | <span>{{ total }}</span> |
| | | 次 |
| | | </p> |
| | | </div> |
| | | <div class="devicelob-table ztzf-table"> |
| | | <el-table |
| | | :data="list" |
| | | :row-class-name="tableRowClassName" |
| | | style="width: 100%" |
| | | :row-style="{ height: '35px', fontSize: '14px', 'text-align': 'center' }" |
| | | :header-cell-style="{ 'text-align': 'center', height: '30px', fontSize: '14px' }" |
| | | > |
| | | <el-table-column label="序号" type="index" width="60"> |
| | | <template #default="{ $index }"> |
| | | {{ ($index + 1).toString().padStart(2, '0') }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="id" label="任务编号" /> |
| | | <el-table-column show-overflow-tooltip prop="name" label="任务名称" /> |
| | | <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" /> |
| | | <el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" /> |
| | | <el-table-column show-overflow-tooltip prop="event_number" label="事件工单" /> |
| | | |
| | | <el-table-column label="操作" width="80"> |
| | | <template #default="scope"> |
| | | <div class="ztzf-view" @click="viewJob(scope.row)">查看</div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <el-pagination |
| | | class="ztzf-pagination" |
| | | background |
| | | |
| | | v-model:current-page="sizeParams.current" |
| | | v-model:page-size="sizeParams.size" |
| | | layout=" prev, pager, next, jumper" |
| | | :total="total" |
| | | @change="pageChange" |
| | | /> |
| | | </div> |
| | | |
| | | <DeviceJobDetails |
| | | v-if="deviceJobDetailsShow" |
| | | v-model:show="deviceJobDetailsShow" |
| | | :wayLineJodInfoId="wayLineJodInfoId" |
| | | /> |
| | | |
| | | <DeviceJobDetails v-model:show="deviceJobDetailsShow"/> |
| | | |
| | | </template> |
| | | <script setup> |
| | | import { useStore } from 'vuex' |
| | | import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue'; |
| | | import DeviceJobDetails from '@/components/DeviceJobDetails/DeviceJobDetails.vue' |
| | | import { getDeviceJobList } from '@/api/home/task' |
| | | |
| | | const list = ref([]) |
| | |
| | | }) |
| | | const sizeParams = ref({ |
| | | current: 1, |
| | | size: 10, |
| | | size: 5, |
| | | }) |
| | | const store = useStore() |
| | | const device_sn = computed(() => store.state.home.singleUavHome.device_sn) |
| | | const total = ref(0) |
| | | const deviceJobDetailsShow = ref(false) |
| | | const wayLineJodInfoId = ref(null) |
| | | provide('wayLineJodInfoId', wayLineJodInfoId) |
| | | const viewJob = (row) => { |
| | | wayLineJodInfoId.value = row.id |
| | | deviceJobDetailsShow.value = true |
| | | const viewJob = row => { |
| | | wayLineJodInfoId.value = row.id |
| | | deviceJobDetailsShow.value = true |
| | | } |
| | | |
| | | const getList = () => { |
| | |
| | | sizeParams.value.current = val |
| | | getList() |
| | | } |
| | | // 表格隔行变色 |
| | | const tableRowClassName = ({ row, rowIndex }) => { |
| | | if (rowIndex % 2 === 1) { |
| | | return 'warning-row' |
| | | } else { |
| | | return 'success-row' |
| | | } |
| | | } |
| | | onMounted(() => { |
| | | getList() |
| | | }) |
| | | </script> |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | // 标题 |
| | | .machineTableDetailsTitle { |
| | | margin: 0 24px; |
| | | margin-bottom: 10px; |
| | | background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center; |
| | | background-size: 100% 100%; |
| | | p { |
| | | display: inline-block; |
| | | margin-left: 30px; |
| | | font-size: 16px; |
| | | color: #ddf0ff; |
| | | line-height: 20px; |
| | | text-align: left; |
| | | margin-bottom: 8px; |
| | | span { |
| | | font-size: 26px; |
| | | color: #0282ff; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | } |
| | | // 表格 |
| | | .devicelob-table { |
| | | padding: 0 17px; |
| | | |
| | | } |
| | | |
| | | |
| | | // 分页 |
| | | :deep(.el-pagination) { |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | :deep(.el-pagination button) { |
| | | background: center center no-repeat none !important; |
| | | color: #8eb8ea !important; |
| | | } |
| | | </style> |