<template>
|
<div class="photo-container">
|
<div class="photo-statistics">
|
<div class="label">事件照片</div>
|
<div class="num">{{ eventsPhotoArr.length }}</div>
|
</div>
|
<div class="photo-statistics">
|
<div class="label">照片总数</div>
|
<div class="num">{{ allPhotoArr.length }}</div>
|
</div>
|
<div class="list-box">
|
<div class="item" v-for="(item, ind) in allPhotoArr" :key="ind">
|
<el-image
|
style="width: 100%; height: 100%"
|
:src="item.smallUrl"
|
:preview-src-list="[item.showUrl]"
|
fit="cover"
|
preview-teleported
|
></el-image>
|
|
<div class="bottom-box">
|
<div class="time">{{ item.metadata.createdTime }}</div>
|
|
<div
|
class="status"
|
:class="EVENT_STATUS_CLASSES[item.status]"
|
v-if="EVENT_STATUS_CLASSES[item.status]"
|
>
|
{{ EVENT_STATUS_LABELS[item.status] }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getShowImg, getSmallImg } from '@/utils/util'
|
import { EVENT_STATUS_LABELS, EVENT_STATUS_CLASSES } from '@ztzf/constants'
|
|
const eventsPhotoArr = ref([])
|
const allPhotoArr = ref([])
|
|
const init = async (vData, pData) => {
|
await nextTick()
|
|
allPhotoArr.value = pData.map(item => ({
|
...item,
|
showUrl: getShowImg(item.link),
|
smallUrl: getSmallImg(item.link),
|
metadata: {
|
...item.metadata,
|
createdTime: formatTimeDiff(item.metadata.createdTime, vData.start_time),
|
},
|
}))
|
eventsPhotoArr.value = pData.filter(item => item.resultType === 2) || []
|
}
|
|
defineExpose({
|
init,
|
})
|
|
function formatTimeDiff(timestamp1, timestamp2) {
|
// 计算差值（毫秒）
|
const diffMs = Math.abs(timestamp1 - timestamp2)
|
|
// 转换为秒
|
const totalSeconds = Math.floor(diffMs / 1000)
|
|
// 计算小时、分钟、秒
|
const hours = Math.floor(totalSeconds / 3600)
|
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
const seconds = totalSeconds % 60
|
|
// 格式化为两位数
|
const pad = num => num.toString().padStart(2, '0')
|
|
// 根据是否有小时决定格式
|
if (hours > 0) {
|
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
|
} else {
|
return `${pad(minutes)}:${pad(seconds)}`
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.photo-container {
|
padding: 0 16px 16px;
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
font-style: normal;
|
text-transform: none;
|
|
.photo-statistics {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
line-height: 44px;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
|
padding: 0 30px; // 添加内边距让内容有间距
|
box-sizing: border-box; // 确保边框包含在宽度内
|
border-radius: 4px; // 添加圆角让边框更明显
|
background: rgba(0, 0, 0, 0.3); // 添加背景色让边框更清晰
|
|
.num {
|
color: #ff974d;
|
}
|
}
|
|
.list-box {
|
margin-top: 16px;
|
height: 0;
|
flex: 1;
|
overflow: hidden;
|
overflow-y: auto;
|
|
.item {
|
margin-top: 10px;
|
position: relative;
|
width: 100%;
|
height: 190px;
|
background: #ff974d;
|
border-radius: 8px 8px 8px 8px;
|
overflow: hidden;
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
.bottom-box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 12px;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 32px;
|
width: 305px;
|
background: rgba(20, 18, 18, 0.8);
|
border-radius: 0 0 8px 8px;
|
|
.status {
|
padding: 0 8px;
|
line-height: 24px;
|
border-radius: 4px 4px 4px 4px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
// 待处理
|
.pending {
|
background: #ff7411;
|
}
|
// 待审核
|
.reviewed {
|
background: #ff472f;
|
}
|
// 处理中
|
.processing {
|
background: #ffff61;
|
}
|
// 已完成
|
.done {
|
background: #06d957;
|
}
|
// 已完结
|
.ended {
|
background: #06d957;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
