<template>
|
<div class="image-slider">
|
<!-- 左切换按钮 -->
|
<button class="arrow left-arrow" @click="prevImage">
|
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
width="24"
|
height="24"
|
viewBox="0 0 24 24"
|
fill="none"
|
stroke="currentColor"
|
stroke-width="2"
|
stroke-linecap="round"
|
stroke-linejoin="round"
|
>
|
<polyline points="15 18 9 12 15 6"></polyline>
|
</svg>
|
</button>
|
<!-- 显示当前图片 -->
|
<div class="image-container">
|
<img :src="currentDetail.photo_url" alt="Slider Image" class="slider-image" />
|
<div class="detailTitle">
|
<div class="titleText">
|
<div class="itemStatus">
|
<span v-if="currentDetail.status === 0" style="background-color: #ff7411"></span>
|
<span v-else-if="currentDetail.status === 2" style="background-color: #ff472f"></span>
|
<span v-else-if="currentDetail.status === 3" style="background-color: #ffc300"></span>
|
<span v-else-if="currentDetail.status === 4" style="background-color: #06d957"></span>
|
<div>{{ currentDetail.event_name }}</div>
|
</div>
|
<div class="timeNavigation">
|
<p>{{ formatDate(currentDetail.create_time) }}</p>
|
<img src="/src/appDataSource/appwork/navigation.svg" alt="导航" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 右切换按钮 -->
|
<button class="arrow right-arrow" @click="nextImage">
|
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
width="24"
|
height="24"
|
viewBox="0 0 24 24"
|
fill="none"
|
stroke="currentColor"
|
stroke-width="2"
|
stroke-linecap="round"
|
stroke-linejoin="round"
|
>
|
<polyline points="9 18 15 12 9 6"></polyline>
|
</svg>
|
</button>
|
</div>
|
</template>
|
|
<script setup>
|
import { getList } from '/src/api/work/index.js'
|
|
import dayjs from 'dayjs'
|
import { useRoute } from 'vue-router'
|
import { showToast } from 'vant' // 假设使用 Vant UI 库的提示组件
|
|
const route = useRoute()
|
|
// 格式化日期
|
const formatDate = dateString => {
|
return dateString ? dayjs(dateString).format('MM/DD HH:mm') : ''
|
}
|
|
// 响应式变量
|
const eventNum = ref('')
|
const currentIndex = ref(null)
|
const currentDetail = ref({})
|
const tableData = ref([])
|
|
// 获取当前事件详情
|
const getDataList = async val => {
|
if (!val) return
|
const params = {
|
current: 1,
|
size: 99999,
|
source: 1,
|
event_name: val,
|
}
|
try {
|
const res = await getList(params)
|
const response = res.data?.data?.records || []
|
if (response.length > 0) {
|
currentDetail.value = {
|
...response[0],
|
processingDetail: response[0].content || '',
|
processing_details: response[0].processing_details || '',
|
update_photo_url: response[0].update_photo_url || '',
|
photos: [],
|
aiType: response[0].ai_type_key_list?.join(',') || '',
|
}
|
}
|
} catch (error) {
|
showToast('获取详情失败')
|
}
|
}
|
|
// 获取所有工单列表
|
const gettableList = async () => {
|
const params = {
|
current: 1,
|
size: 9999,
|
source: 1,
|
}
|
try {
|
const res = await getList(params)
|
tableData.value = res.data?.data?.records || []
|
} catch (error) {
|
showToast('获取列表失败')
|
}
|
}
|
|
// 更新当前显示的详情
|
const updateCurrentDetail = () => {
|
if (tableData.value[currentIndex.value]) {
|
currentDetail.value = { ...tableData.value[currentIndex.value] }
|
}
|
}
|
|
// 上一张
|
const prevImage = () => {
|
if (currentIndex.value === null || tableData.value.length === 0) return
|
if (currentIndex.value > 0) {
|
currentIndex.value--
|
updateCurrentDetail()
|
} else {
|
showToast('已经是第一页')
|
}
|
}
|
|
// 下一张
|
const nextImage = () => {
|
if (currentIndex.value === null || tableData.value.length === 0) return
|
if (currentIndex.value < tableData.value.length - 1) {
|
currentIndex.value++
|
updateCurrentDetail()
|
} else {
|
showToast('已经是最后一页')
|
}
|
}
|
|
// 页面初始化
|
onMounted(async () => {
|
eventNum.value = route.query.eventNum || ''
|
|
await gettableList()
|
if (tableData.value.length > 0) {
|
currentIndex.value = tableData.value.findIndex(item => item.event_num === eventNum.value)
|
|
if (currentIndex.value === -1) {
|
currentIndex.value = 0
|
showToast('未找到对应工单，显示第一条')
|
}
|
// 加载当前详情
|
await getDataList(eventNum.value)
|
} else {
|
showToast('暂无工单数据')
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.image-slider {
|
position: relative;
|
width: 100%;
|
height: auto;
|
}
|
|
.image-container {
|
position: relative;
|
width: 100%;
|
height: 205px;
|
|
.slider-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover; // 确保图片填充容器且不变形
|
}
|
|
.detailTitle {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
padding: 5px;
|
height: 30px;
|
background: rgba(7, 7, 7, 0.4);
|
}
|
|
.titleText {
|
display: flex;
|
width: 100%;
|
justify-content: space-between;
|
align-items: center;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 13px;
|
color: #ffffff;
|
|
.itemStatus {
|
display: flex;
|
align-items: center;
|
white-space: nowrap; // 防止文字换行
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 60%; // 限制最大宽度，避免挤压右侧时间
|
|
span {
|
display: inline-block;
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 7px;
|
}
|
}
|
}
|
|
.timeNavigation {
|
display: flex;
|
align-items: center;
|
white-space: nowrap; // 防止时间换行
|
|
img {
|
width: 11px;
|
height: 13px;
|
margin-left: 13px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.arrow {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
background: rgba(0, 0, 0, 0.5);
|
color: white;
|
border: none;
|
border-radius: 50%;
|
width: 40px;
|
height: 40px;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: background 0.3s; // 增加 hover 过渡效果
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.7);
|
}
|
}
|
|
.left-arrow {
|
left: 20px;
|
z-index: 9;
|
}
|
|
.right-arrow {
|
right: 20px;
|
}
|
</style>
|
