<template>
|
<div class="yzx-events">
|
<van-list v-model:loading="loading" :finished="finished" :error="error" error-text="加载失败，点击重新加载"
|
@load="getList">
|
<div class="events">
|
<div class="eve-card" v-for="(item,index) in list" :key="item.id">
|
<div class="bg-img" @click="jumpOrder(item,index+1)">
|
<!-- <img :src="item.photo_url" alt="">-->
|
<van-image :src="item.smallUrl" fit="cover" />
|
</div>
|
<div class="title">{{ item.ai_types || '暂无事件' }}</div>
|
<div class="time-sf">
|
<div class="time">
|
<span v-if="item.status === 0" style="background-color: #ff7411"></span>
|
<span v-else-if="item.status === 2" style="background-color: #ff472f"></span>
|
<span v-else-if="item.status === 3" style="background-color: #ffc300"></span>
|
<span v-else-if="item.status === 4" style="background-color: #06d957"></span>
|
{{ formatDate(item.job_create_time) }}
|
</div>
|
<div class="sf" @click.stop="showImagePreviews(item)"><img :src="sfSvg" alt=""></div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
<van-empty v-if="!loading && list.length === 0" description="暂无数据" />
|
</div>
|
</template>
|
<script setup>
|
import sfSvg from '@/appDataSource/inspectionTask/sf.svg'
|
import { getDeviceEventList } from '@/api/home/machineNest'
|
import { showImagePreview } from 'vant'
|
import { getShowImg, getSmallImg } from '@/utils/util'
|
import dayjs from 'dayjs'
|
import { ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
const route = useRoute()
|
|
const props = defineProps(['wayLineJobInfoId'])
|
|
const total = ref(0)
|
const loading = ref(false)
|
const finished = ref(false)
|
const error = ref(false)
|
const list = ref([])
|
const emit = defineEmits(['returnNum'])
|
const currentIndex = ref(null)
|
const imageArr = ref([])
|
|
function getList () {
|
loading.value = true
|
const params = {
|
way_line_job_info_id: props.wayLineJobInfoId,
|
batch_no: route.query.batch_no,
|
}
|
getDeviceEventList(params, { current: 1, size: 1999 }).then(res => {
|
const resData = res?.data?.data || {}
|
if (resData.records.length > 0) {
|
list.value = resData.records.map(i => ({
|
...i,
|
url: i.photo_url,
|
smallUrl: getSmallImg(i.photo_url),
|
showUrl: getShowImg(i.photo_url)
|
}))
|
}
|
total.value = res.data.data.total
|
imageArr.value = list.value.map(item => item.showUrl)
|
// 检查是否加载完成
|
if (list.value.length >= res.data.data.total) {
|
finished.value = true
|
}
|
loading.value = false
|
})
|
}
|
|
function showImagePreviews (val) {
|
currentIndex.value = list.value.findIndex(item => item.event_num === val.event_num)
|
showImagePreview({
|
images: imageArr.value,
|
startPosition: currentIndex.value,
|
})
|
}
|
|
const formatDate = dateString => {
|
return dayjs(dateString).format('MM/DD HH:mm')
|
}
|
|
function jumpOrder (item, current) {
|
const transmitData = { data: { type: 'workid', eventNum: item.event_num, wLJobInfoId: props.wayLineJobInfoId,current } }
|
|
wx.miniProgram.navigateTo({ url: `/subPackages/workDetail/index?eventNum=${item.event_num}&wLJobInfoId=${props.wayLineJobInfoId}¤t=${current}` })
|
wx.miniProgram.postMessage(transmitData)
|
uni.postMessage(transmitData)
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.yzx-events {
|
margin: 12px;
|
|
.events {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
|
.eve-card {
|
width: calc((100vw - 12px - 12px - 10px)/2);
|
height: 146px;
|
background: #FFFFFF;
|
border-radius: 6px 6px 6px 6px;
|
|
.bg-img {
|
width: calc((100vw - 12px - 12px - 10px)/2);
|
height: 98px;
|
margin-bottom: 4px;
|
|
:deep(.van-image) {
|
width: 100%;
|
height: 100%;
|
|
img {
|
border-radius: 6px 6px 6px 6px;
|
}
|
}
|
}
|
|
.title {
|
padding: 0 4px;
|
font-weight: 500;
|
font-size: 14px;
|
color: #000000;
|
white-space: nowrap;
|
/* 不换行 */
|
overflow: hidden;
|
/* 超出隐藏 */
|
text-overflow: ellipsis;
|
/* 显示省略号 */
|
}
|
|
.time-sf {
|
padding: 0 4px;
|
display: flex;
|
justify-content: space-between;
|
|
span {
|
display: inline-block;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
//margin-right: 2px;
|
}
|
|
.time {
|
font-size: 12px;
|
color: #a6a6a6;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
