<template>
|
<div class="executionError">
|
<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
|
<van-list
|
v-model:loading="loading"
|
:finished="finished"
|
:error="error"
|
error-text="加载失败，点击重新加载"
|
@load="getJobList"
|
>
|
<div class="card" v-for="item in list" :key="item.id">
|
<div class="drone_svg">
|
<img :src="taskDrone" alt="" />
|
</div>
|
<div class="drone-right" @click="taskClick(item)">
|
<div class="c-top">
|
<div class="name">{{ item.name }}</div>
|
<img v-if="item.status === 5" :src="errorSvg" alt="" @click.stop="errorClick(item.reason)" />
|
<div class="status" :style="{ background: changeColor(item.status) }">
|
{{ changStatus(item.status) }}
|
</div>
|
</div>
|
<div class="c-center">
|
<div class="create-name">{{ item.creator_name }}</div>
|
<div class="device">
|
<img :src="flySvg" alt="" />
|
<span class="text">{{ item.device_names }}</span>
|
</div>
|
</div>
|
<div class="c-bottom">
|
<div class="item left">{{ item.job_info_num }}</div>
|
<div class="item right">
|
<div class="value">{{ item.cycle_time_value }}</div>
|
<div class="jump" @click="taskClick(item)"><img :src="linkSvg" alt="" /></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
<!-- 空状态 -->
|
<van-empty v-if="!loading && list.length === 0" description="暂无数据" />
|
<van-dialog v-model:show="showDialog" :show-confirm-button="false" :show-cancel-button="false">
|
<template #title>
|
<div class="custom-header">
|
<div class="ts">提示</div>
|
<div class="close-icon">
|
<van-icon name="cross" @click="showDialog = false" />
|
</div>
|
</div>
|
</template>
|
<div class="dialog-content">
|
<p class="reason">{{ reasonRe || '暂无原因' }}</p>
|
</div>
|
</van-dialog>
|
<!-- </van-pull-refresh>-->
|
</div>
|
</template>
|
|
<script setup>
|
import taskDrone from '@/appDataSource/inspectionTask/task_drone.png'
|
import flySvg from '@/appDataSource/inspectionTask/fly.svg'
|
import errorSvg from '@/appDataSource/inspectionTask/error.svg'
|
import linkSvg from '@/appDataSource/inspectionTask/link.svg'
|
import { getDeviceJobList } from '@/api/home/task'
|
import { showToast } from 'vant'
|
|
const showDialog = ref(false)
|
const props = defineProps(['indexTab', 'searchTxt'])
|
const params = ref({
|
device_sn: null,
|
order_by_create_time: false,
|
my_task: false,
|
app_key_word: '',
|
status_list: [5],
|
})
|
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
|
}
|
})
|
}
|
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 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
|
}
|
const emit = defineEmits(['taskDetails'])
|
function taskClick(row) {
|
emit('taskDetails', row)
|
}
|
let reasonRe = ref('')
|
function errorClick(reason) {
|
// showToast(reason)
|
reasonRe.value = reason
|
showDialog.value = true
|
}
|
function refreshData() {
|
list.value = []
|
sizeParams.value.current = 1
|
params.value.app_key_word = props.searchTxt
|
params.value.my_task = false
|
params.value.status_list = [5]
|
loading.value = true
|
finished.value = false
|
getJobList()
|
}
|
watch(
|
() => props.searchTxt,
|
(newValue, oldValue) => {
|
refreshData()
|
}
|
)
|
watch(
|
() => props.indexTab,
|
(newValue, oldValue) => {
|
if (newValue.name === 5) {
|
refreshData()
|
}
|
}
|
)
|
onMounted(() => {
|
refreshData()
|
})
|
</script>
|
<style scoped lang="scss">
|
.executionError {
|
//height: calc(100vh - 54px - 74px);
|
//overflow: auto;
|
.card {
|
margin: 12px;
|
padding: 13px 9px 12px 8px;
|
height: 93px;
|
border-radius: 10px 10px 10px 10px;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
.drone_svg {
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
width: 55px;
|
height: 68px;
|
|
background: rgba(251, 251, 251, 0.54);
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 12px 12px 12px 12px;
|
border: 1px solid rgba(212, 212, 212, 0.99);
|
|
img {
|
width: 49.63px;
|
height: 33.67px;
|
}
|
}
|
.drone-right {
|
width: calc(100% - 55px - 8px);
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
.c-top {
|
height: 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 7px;
|
.name {
|
width: 68%;
|
font-weight: 500;
|
font-size: 16px;
|
color: #191919;
|
line-height: 20px;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
img {
|
width: 16px;
|
height: 16px;
|
margin-right: 2px;
|
}
|
.status {
|
padding: 0 4px;
|
min-width: 54px;
|
height: 22px;
|
line-height: 22px;
|
text-align: center;
|
color: #ffffff;
|
font-size: 14px;
|
font-weight: 500;
|
border-radius: 4px 4px 4px 4px;
|
}
|
}
|
.c-center {
|
height: 21px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 5px;
|
.device {
|
display: flex;
|
align-items: center;
|
min-width: 88px;
|
height: 21px;
|
background: rgba(174, 185, 255, 0.38);
|
border-radius: 4px 4px 4px 4px;
|
padding: 0 8px;
|
img {
|
width: 15px;
|
height: 15px;
|
margin-right: 4px;
|
}
|
font-weight: 500;
|
font-size: 13px;
|
color: #2160ff;
|
line-height: 21px;
|
.text {
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
}
|
.create-name {
|
padding: 0 8px;
|
width: 58px;
|
height: 21px;
|
background: #dae6ff;
|
border-radius: 4px 4px 4px 4px;
|
font-weight: 500;
|
font-size: 13px;
|
color: #207aff;
|
line-height: 21px;
|
text-align: center;
|
margin-right: 10px;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 超出隐藏 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
}
|
.c-bottom {
|
height: 20px;
|
line-height: 20px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 13px;
|
font-weight: 400;
|
.left {
|
color: #222324;
|
}
|
.right {
|
color: #191919;
|
display: flex;
|
align-items: center;
|
justify-items: center;
|
.value {
|
margin-right: 4px;
|
}
|
.jump {
|
img {
|
height: 11px;
|
width: 7px;
|
margin-top: 2px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.card:first-child {
|
margin: 0px 12px 12px 12px;
|
}
|
:deep(.van-dialog) {
|
min-height: 70px;
|
width: 234px;
|
border-radius: 8px 8px 8px 8px;
|
.van-dialog__header {
|
padding-top: 4px;
|
}
|
.custom-header {
|
display: flex;
|
justify-items: center;
|
justify-content: space-between;
|
height: 24px;
|
line-height: 24px;
|
padding: 0 10px 0 11px;
|
.close-icon {
|
width: 11px;
|
height: 11px;
|
}
|
.ts {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bolder;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
.dialog-content {
|
position: relative;
|
font-size: 14px;
|
height: 100%;
|
p {
|
//margin: 6px auto;
|
padding: 6px 17px 11px 17px;
|
width: 100%;
|
min-height: 30px;
|
text-align: justify
|
}
|
}
|
}
|
}
|
</style>
|
