| | |
| | | <div class="search-box"> |
| | | <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" /> |
| | | <el-button :icon="Search" @click="searchNickName"/> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | <div class="table-list"> |
| | | <div class="table-list" v-if="tableList.length > 0" |
| | | infinite-scroll-distance="6" |
| | | v-infinite-scroll="loadMore" |
| | | :infinite-scroll-disabled="busy" |
| | | infinite-scroll-immediate="true">> |
| | | <div class="item" v-for="(item,index) in tableList"> |
| | | <div class="left"> |
| | | <div class="left-t"> |
| | | <span>{{ index+1 }}.</span>{{ item.title }} |
| | | <span class="status" :class="item.status==='执行中'?'active':''">{{ item.status }}</span> |
| | | <span>{{ index+1 }}.</span>{{ item.name }} |
| | | <span class="status" :class="item.status===2?'active':''"> |
| | | {{ getStatusText(item.status) }} |
| | | </span> |
| | | </div> |
| | | <div class="left-b"> |
| | | <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.time }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.name }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.begin_time }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.creator_name || '' }} |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-empty class="custom-empty" v-else> |
| | | <template #description> |
| | | <span class="custom-text">暂无数据</span> |
| | | </template> |
| | | </el-empty> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <script setup> |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import { getBeforeJob, getTodayJob } from '@/api/home/index.js' |
| | | |
| | | const isMore = ref(true); |
| | | // 控制加载状态 |
| | | const busy = ref(false); |
| | | |
| | | let searchText = ref('') |
| | | const tableList = ref([ |
| | | { |
| | | title: '园区巡查-20250313001', |
| | | status: '待执行', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | { |
| | | title: '园区巡查-20250313002', |
| | | status: '执行中', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | { |
| | | title: '园区巡查-20250313003', |
| | | status: '已完成', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | ]); |
| | | const tableList = ref([]); |
| | | |
| | | // 分页 |
| | | const pageParams = ref({ |
| | | current: 1, |
| | | size: 5, |
| | | total: 0 |
| | | }); |
| | | |
| | | // 当前任务和历史任务切换 |
| | | let tabIndex = ref(1); |
| | | const tabClick = (value) => { |
| | | tabIndex.value = value; |
| | | clearData(); |
| | | }; |
| | | |
| | | // 状态文字判断 |
| | | const getStatusText = (status) => { |
| | | switch (status) { |
| | | case 1: |
| | | return '待执行'; |
| | | case 2: |
| | | return '执行中'; |
| | | case 3: |
| | | return '完成'; |
| | | case 4: |
| | | return '取消'; |
| | | case 5: |
| | | return '失败'; |
| | | default: |
| | | return '未知'; |
| | | } |
| | | }; |
| | | |
| | | // 获取历史巡检任务列表 |
| | | const getJobList = async () => { |
| | | const params = { |
| | | area_code: '', |
| | | device_sn: '', |
| | | job_name: searchText.value, |
| | | current: pageParams.value.current, |
| | | size: pageParams.value.size, |
| | | } |
| | | let result = null; |
| | | if (tabIndex.value === 1) { |
| | | result = await getTodayJob(params) |
| | | } else { |
| | | result = await getBeforeJob(params) |
| | | } |
| | | if (result.data.code !== 0) return; |
| | | if (result.data.data.records.length === 0) return (isMore.value = false); |
| | | pageParams.value.current += 1; |
| | | tableList.value = [...tableList.value, ...result.data.data.records]; |
| | | busy.value = false; |
| | | } |
| | | |
| | | // 清除数据 |
| | | const clearData = () => { |
| | | tableList.value = []; |
| | | pageParams.value.current = 1; |
| | | isMore.value = true; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 加载更多数据 |
| | | const loadMore = async () => { |
| | | busy.value = true; |
| | | if (!isMore.value) return; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 搜索数据 |
| | | const searchNickName = () => { |
| | | clearData(); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getJobList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | .table-list { |
| | | width: 358px; |
| | | height: 202px; |
| | | overflow: auto; |
| | | &::-webkit-scrollbar { |
| | | width: 0; |
| | | display: none; |
| | | } |
| | | -ms-overflow-style: none; /* IE and Edge */ |
| | | scrollbar-width: none; /* Firefox */ |
| | | .item { |
| | | width: 100%; |
| | | height: 72px; |
| | |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #4CA6FF; |
| | | color: #4CA6FF; |
| | | margin-left: 10px; |
| | | } |
| | | .active { |
| | | border: 1px solid #04F0D1; |
| | |
| | | } |
| | | } |
| | | } |
| | | .custom-empty { |
| | | color: #fff; |
| | | margin: 16px 0; |
| | | padding: 0; |
| | | :deep(.el-empty__image) { |
| | | width: 100px; |
| | | height: 100px; |
| | | } |
| | | } |
| | | } |
| | | </style> |