<template>
|
<div class="inspectionTask">
|
<van-search v-model="params.key_word" placeholder="请输入搜索关键词" :shape="round" @search="getJobList" />
|
<van-tabs v-model:active="currentTab" @click-tab="onClickTab">
|
<van-tab
|
v-for="item in tabList"
|
:key="item.name"
|
:title="item.name"
|
:badge="item.number > 99 ? `${99}+` : item.number"
|
>
|
<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
|
<van-list
|
v-model:loading="loading"
|
:finished="finished"
|
finished-text="没有更多了"
|
:error="error"
|
error-text="加载失败，点击重新加载"
|
@load="getJobList"
|
>
|
<div class="card" v-for="item in list" :key="item.id" @click="taskClick(item)">
|
<div class="drone_svg">
|
<img :src="droneSvg" alt="" />
|
</div>
|
<div class="drone-right">
|
<div class="c-top">
|
<div class="create-name">
|
<div class="name">{{ item.name }}</div>
|
<div class="creator_name">{{ item.creator_name }}</div>
|
</div>
|
<div class="device_status">
|
<div class="device">
|
<img :src="flySvg" alt="" />
|
<span>{{ item.device_names }}</span>
|
</div>
|
<img v-if="item.status === 5" :src="errorSvg" alt="" />
|
<div class="status" :style="{ background: changeColor(item.status) }">
|
{{ changStatus(item.status) }}
|
</div>
|
</div>
|
</div>
|
<div class="c-bottom">
|
<div class="item">{{ item.job_info_num }}</div>
|
<div class="item">{{ item.cycle_time_value }}</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
<!-- </van-pull-refresh>-->
|
<!-- 空状态 -->
|
<van-empty v-if="!loading && list.length === 0" description="暂无数据" />
|
</van-tab>
|
</van-tabs>
|
</div>
|
</template>
|
|
<script setup>
|
import { getDeviceJobList, jobStatistics } from '@/api/home/task'
|
import { useStore } from 'vuex'
|
import { showToast, showLoadingToast, closeToast } from 'vant'
|
import _ from 'lodash'
|
import droneSvg from '@/appDataSource/inspectionTask/drone.svg'
|
import flySvg from '@/appDataSource/inspectionTask/fly.svg'
|
import errorSvg from '@/appDataSource/inspectionTask/error.svg'
|
|
const store = useStore()
|
|
const currentTab = ref(1)
|
const tabList = ref([
|
{ name: '我的任务', number: 0, id: 'my_planned_executions' },
|
{ name: '计划执行', number: 0, id: 'planned_executions' },
|
{ name: '执行中', number: 0, id: 'running_num' },
|
{ name: '待执行', number: 0, id: 'pending_executions' },
|
{ name: '已执行', number: 0, id: 'executed' },
|
{ name: '执行失败', number: 0, id: 'failed_executions' },
|
{ name: '取消执行', number: 0, id: 'go_home_executions' },
|
])
|
|
const params = ref({
|
device_sn: null,
|
order_by_create_time: false,
|
my_task: false,
|
key_word: '',
|
status_list: [],
|
})
|
const total = ref(0)
|
const sizeParams = ref({
|
current: 1,
|
size: 10,
|
})
|
const loading = ref(false)
|
const finished = ref(false)
|
const error = ref(false)
|
const refreshing = ref(false)
|
const list = ref([])
|
function getJobList(isRefresh = false) {
|
// if (refreshing.value) {
|
// list.value = [];
|
// refreshing.value = false;
|
// }
|
// 如果是刷新，重置分页
|
if (isRefresh) {
|
sizeParams.value.current = 1
|
list.value = []
|
finished.value = false
|
}
|
getDeviceJobList(params.value, sizeParams.value).then(res => {
|
// 更新数据
|
if (isRefresh) {
|
list.value = res.data.data.records
|
} else {
|
list.value.push(...res.data.data.records)
|
}
|
|
loading.value = false
|
|
// 更新分页信息
|
total.value = res.data.data.total
|
sizeParams.value.current++
|
// 检查是否加载完成
|
if (list.value.length >= res.data.data.total) {
|
finished.value = true
|
}
|
})
|
}
|
|
// function onRefresh() {
|
// finished.value = false;
|
// loading.value = true;
|
// getJobList()
|
// }
|
|
function getNumbers() {
|
jobStatistics({ date_enum: '' }).then(res => {
|
// {executed:56,my_planned_executions:34,planned_executions:45 }
|
tabList.value.forEach(tab => {
|
if (res.data.data.hasOwnProperty(tab.id)) {
|
tab.number = res.data.data[tab.id]
|
}
|
})
|
})
|
}
|
const listStatus = ref([
|
{ name: '执行中', color: '#FF8B42', status: [2] },
|
{ name: '待执行', color: '#F3B200', status: [1] },
|
{ name: '已执行', color: '#39B002', status: [3] },
|
{ name: '执行失败', color: '#FF381D', status: [5] },
|
{ name: '取消执行', color: '#ADADAD', status: [7] },
|
])
|
// function executed() {
|
// uni.navigateTo({
|
// url: '/pages/inspectionTask/TaskDetails/TaskDetails'
|
// })
|
// }
|
function changStatus(status) {
|
return listStatus.value.find(item => item.status.includes(status)).name
|
}
|
function changeColor(status) {
|
return listStatus.value.find(item => item.status.includes(status)).color
|
}
|
function onClickTab() {
|
sizeParams.value.current = 1
|
list.value = []
|
params.value.my_task = false
|
params.value.status_list = []
|
loading.value = true
|
// showLoadingToast({
|
// message: '加载中...',
|
// duration: 0, // 不会自动关闭
|
// forbidClick: true, // 禁止背景点击
|
// });
|
if (currentTab.value === 0) {
|
params.value.my_task = true
|
} else if (currentTab.value === 1) {
|
params.value.status_list = [1, 2, 3, 5, 7]
|
} else if (currentTab.value === 2) {
|
params.value.status_list = [2]
|
} else if (currentTab.value === 3) {
|
params.value.status_list = [1]
|
} else if (currentTab.value === 4) {
|
params.value.status_list = [3]
|
} else if (currentTab.value === 5) {
|
params.value.status_list = [5]
|
} else if (currentTab.value === 6) {
|
params.value.status_list = [7]
|
}
|
getJobList()
|
}
|
|
function taskClick(item) {
|
const transmitData = { data: { type: 'taskDetails', rowItem: { ..._.cloneDeep(item) } } }
|
if ([1, 2].includes(item.status)) {
|
wx.miniProgram.navigateTo({ url: `/subPackages/taskDetail/inProgress/index?wayLineJobInfoId=${item.id}` })
|
} else {
|
wx.miniProgram.navigateTo({ url: `/subPackages/taskDetail/execution/index?wayLineJobInfoId=${item.id}&waylineJobId=${item.wayline_job_id}&batch_no=${item.batch_no}` })
|
}
|
wx.miniProgram.postMessage(transmitData)
|
uni.postMessage(transmitData)
|
}
|
|
onMounted(() => {
|
// getJobList()
|
getNumbers()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.inspectionTask {
|
background: #f8f8f8;
|
:deep(.van-badge) {
|
background-color: #1d6fe9;
|
}
|
.card {
|
margin: 6px;
|
padding: 6px;
|
height: 72px;
|
border-radius: 10px 10px 10px 10px;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
.drone_svg {
|
margin-right: 6px;
|
margin-top: 10px;
|
img {
|
width: 46px;
|
height: 46px;
|
}
|
}
|
.drone-right {
|
width: calc(100% - 46px - 6px);
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
.c-top {
|
height: 36px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.create-name {
|
display: flex;
|
.name {
|
width: 82px;
|
font-weight: bold;
|
font-size: 15px;
|
color: #191919;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
.creator_name {
|
height: 20px;
|
line-height: 20px;
|
padding: 0 2px;
|
font-weight: 500;
|
font-size: 13px;
|
color: #207aff;
|
background: #dae6ff;
|
border-radius: 30px 30px 30px 30px;
|
}
|
}
|
.device_status {
|
display: flex;
|
.device {
|
display: flex;
|
align-items: center;
|
margin-right: 2px;
|
img {
|
width: 14px;
|
height: 14px;
|
}
|
span {
|
width: 60px;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
font-weight: 500;
|
font-size: 14px;
|
color: #282828;
|
}
|
.status {
|
margin-left: 2px;
|
font-size: 14px;
|
color: white;
|
border-radius: 2px 2px 2px 2px;
|
padding: 0px 2px;
|
}
|
}
|
}
|
.c-bottom {
|
display: flex;
|
justify-content: space-between;
|
.item {
|
width: 46%;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
}
|
}
|
}
|
}
|
</style>
|
