<script setup lang="ts">
|
import { useBoolean } from '@/hooks'
|
import { NTag } from 'naive-ui'
|
import successIcon from '@/assets/point/success.png'
|
import failIcon from '@/assets/point/fail.png'
|
import dayjs from 'dayjs'
|
|
const emit = defineEmits<{
|
open: []
|
close: []
|
}>()
|
|
const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
|
|
const formDefault: any = {
|
id: '',
|
accidentDetailVO: {},
|
chargingDetailVO: {},
|
cleanDetailVO: {},
|
detectionDetailVO: {},
|
preparationDetailVO: {},
|
repairDetailVO: {},
|
routineDetailVO: {},
|
}
|
const formModel = ref({ ...formDefault })
|
|
async function openModal(data: any, id: string) {
|
emit('open')
|
formModel.value = { ...data }
|
formModel.value.id = id
|
showModal()
|
}
|
|
function closeModal() {
|
formModel.value = { ...formDefault }
|
hiddenModal()
|
emit('close')
|
}
|
|
defineExpose({
|
openModal,
|
})
|
const taskUrgencyLevelOptions = [
|
{ label: '一级', value: 0, type: 'error' },
|
{ label: '二级', value: 1, type: 'error' },
|
{ label: '三级', value: 2, type: 'error' },
|
// { label: '四级', value: 3, type: 'warning' },
|
]
|
const statusOptions = [
|
{ label: '待到达', value: 0, type: 'default' },
|
{ label: '待处理', value: 1, type: 'warning' },
|
{ label: '已完成', value: 2, type: 'primary' },
|
{ label: '已取消', value: 3, type: 'default' },
|
]
|
|
function formatCascadeData(data: any): string {
|
if (!Array.isArray(data) || data.length === 0)
|
return '-'
|
return data.map((parent) => {
|
const children = parent.child?.map((c: any) => c.errorName).join('、') ?? ''
|
if (!children)
|
return parent.errorName || '-'
|
return `${parent.errorName}>${children}`
|
}).join(';')
|
}
|
|
function parseAvatarUrl(value: unknown) {
|
if (!value)
|
return ''
|
if (typeof value === 'object')
|
return (value as any)?.url || ''
|
try {
|
return JSON.parse(String(value))?.url || ''
|
}
|
catch {
|
return ''
|
}
|
}
|
|
function parseImageList(value: unknown): Array<{ url?: string }> {
|
if (!value)
|
return []
|
if (Array.isArray(value))
|
return value as any
|
try {
|
const parsed = JSON.parse(String(value))
|
if (Array.isArray(parsed))
|
return parsed
|
return []
|
}
|
catch {
|
return []
|
}
|
}
|
|
function getValidImageList(value: unknown) {
|
return parseImageList(value).filter(it => it?.url)
|
}
|
|
function getVehicleImage(value: unknown) {
|
if (!value)
|
return ''
|
if (typeof value === 'string') {
|
const direct = parseAvatarUrl(value)
|
if (direct)
|
return direct
|
const list = getValidImageList(value)
|
if (list.length)
|
return list[0]?.url || ''
|
return /^https?:\/\//.test(value) ? value : ''
|
}
|
if (typeof value === 'object') {
|
const direct = (value as any)?.url
|
if (direct)
|
return direct
|
}
|
const list = getValidImageList(value)
|
return list[0]?.url || ''
|
}
|
|
const showAccidentHandleSection = computed(() => {
|
const detail = formModel.value.accidentDetailVO
|
if (!detail?.id)
|
return false
|
const hasHandleTime = Boolean(detail.handleTime)
|
|
return hasHandleTime
|
})
|
|
function formatDateTime(value: unknown) {
|
if (!value)
|
return '-'
|
const d = dayjs(String(value))
|
if (!d.isValid())
|
return String(value)
|
return d.format('YYYY/MM/DD HH:mm')
|
}
|
|
function getUrgencyLabel(level: number) {
|
return taskUrgencyLevelOptions.find(it => it.value === level)?.label || '-'
|
}
|
|
function getStatusLabel(status: number) {
|
return statusOptions.find(it => it.value === status)?.label || '-'
|
}
|
|
function getUrgencyTagStyle(level: number) {
|
if (level === 3) {
|
return { color: '#FA8C16', backgroundColor: 'rgba(250, 140, 22, 0.12)' }
|
}
|
return { color: '#FF4D4F', backgroundColor: 'rgba(255, 77, 79, 0.12)' }
|
}
|
|
function getStatusTagStyle(status: number) {
|
if (status === 2) {
|
return { color: '#0068FF', backgroundColor: 'rgba(0, 104, 255, 0.12)' }
|
}
|
if (status === 1) {
|
return { color: '#FA8C16', backgroundColor: 'rgba(250, 140, 22, 0.12)' }
|
}
|
return { color: '#666666', backgroundColor: 'rgba(23, 31, 38, 0.05)' }
|
}
|
|
function getResponsibilityTagStyle(value: number) {
|
if (value === 1)
|
return { color: '#FF4D4F', backgroundColor: 'rgba(255, 77, 79, 0.12)' }
|
if (value === 2)
|
return { color: '#0BB52D', backgroundColor: 'rgba(11, 181, 45, 0.12)' }
|
if (value === 3)
|
return { color: '#0068FF', backgroundColor: 'rgba(0, 104, 255, 0.12)' }
|
return { color: '#666666', backgroundColor: 'rgba(23, 31, 38, 0.05)' }
|
}
|
|
function getResponsibilityLabel(value: number) {
|
const map: Record<number, string> = {
|
1: '我方主责',
|
2: '我方无责',
|
3: '双方同责',
|
}
|
return map[value] || '-'
|
}
|
</script>
|
|
<template>
|
<n-modal
|
v-model:show="modalVisible"
|
:mask-closable="false"
|
preset="card"
|
title="任务详情"
|
:style="{ width: '600px', maxHeight: '80vh' }"
|
:segmented="{ content: true }"
|
:content-style="{ padding: '16px 24px 24px 24px', overflow: 'auto' }"
|
@close="closeModal"
|
>
|
<!-- 事故详情 -->
|
<div v-if="formModel.accidentDetailVO?.id">
|
<div class="content accident-detail">
|
<!-- 任务信息 -->
|
<div class="accident-section">
|
<div class="mb-12px">
|
<div class="head">
|
任务信息
|
</div>
|
</div>
|
<div class="accident-type-row mb-16px">
|
<div class="accident-type-text">
|
{{ formatCascadeData(formModel.accidentDetailVO.errorTypeList) }}
|
</div>
|
<div class="accident-type-tags">
|
<NTag
|
:bordered="false"
|
class="accident-pill-tag"
|
:style="getUrgencyTagStyle(formModel.accidentDetailVO.taskUrgencyLevel)"
|
>
|
{{ getUrgencyLabel(formModel.accidentDetailVO.taskUrgencyLevel) }}
|
</NTag>
|
<NTag
|
:bordered="false"
|
class="accident-pill-tag"
|
:style="getStatusTagStyle(formModel.accidentDetailVO.status)"
|
>
|
{{ getStatusLabel(formModel.accidentDetailVO.status) }}
|
</NTag>
|
</div>
|
</div>
|
<div class="mb-16px flex items-center">
|
<img
|
:src="getVehicleImage(formModel.accidentDetailVO.vehiclePictures)"
|
class="w-112px h-64px mr-16px accident-vehicle-image" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.accidentDetailVO.plateNumber }}
|
</div>
|
<div class="value">
|
{{ formModel.accidentDetailVO.vehicleColor || '-' }}
|
<span class="mx-6px">|</span>
|
VIN{{ formModel.accidentDetailVO.vehicleVin || '-' }}
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-4px">
|
上报地址
|
</div>
|
<div class="value">
|
{{ formModel.accidentDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-4px">
|
事故描述
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.accidentDetailVO.taskDescription }}
|
</div>
|
<div v-if="getValidImageList(formModel.accidentDetailVO.taskImage).length" class="imgs">
|
<img
|
v-for="(item, idx) in getValidImageList(formModel.accidentDetailVO.taskImage)"
|
:key="idx"
|
:src="item.url"
|
class="w-56px h-56px accident-thumb" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px flex gap-24px">
|
<div class="flex items-center flex-1 gap-8px">
|
<img
|
v-if="parseAvatarUrl(formModel.accidentDetailVO.reportUserAvatar)"
|
:src="parseAvatarUrl(formModel.accidentDetailVO.reportUserAvatar)"
|
class="w-40px h-40px accident-avatar" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div class="flex-1 min-w-0">
|
<div class="label mb-4px">
|
上报人
|
</div>
|
<div class="value">
|
{{ formModel.accidentDetailVO.reportUserName || '-' }}
|
{{ formModel.accidentDetailVO.reportUserPhone || '' }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="label mb-4px">
|
上报时间
|
</div>
|
<div class="value">
|
{{ formatDateTime(formModel.accidentDetailVO.createTime) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 处理情况 -->
|
<div v-if="showAccidentHandleSection" class="accident-section">
|
<div class="head mb-12px">
|
处理情况
|
</div>
|
<div class="mb-16px flex items-center gap-8px">
|
<div class="value">
|
人员伤亡情况
|
</div>
|
<div class="flex flex-wrap items-center gap-8px">
|
<NTag :bordered="false" class="accident-pill-tag" :style="{ color: '#0068FF', backgroundColor: 'rgba(0, 104, 255, 0.12)' }">
|
伤亡 {{ formModel.accidentDetailVO.deathCount || 0 }}
|
</NTag>
|
<NTag :bordered="false" class="accident-pill-tag" :style="{ color: '#FF4D4F', backgroundColor: 'rgba(255, 77, 79, 0.12)' }">
|
重伤 {{ formModel.accidentDetailVO.severeCount || 0 }}
|
</NTag>
|
<NTag :bordered="false" class="accident-pill-tag" :style="{ color: '#FA8C16', backgroundColor: 'rgba(250, 140, 22, 0.12)' }">
|
轻伤 {{ formModel.accidentDetailVO.minorCount || 0 }}
|
</NTag>
|
</div>
|
</div>
|
<div class="mb-16px flex items-center gap-8px">
|
<div class="value">
|
初版（交警）责任判断
|
</div>
|
<NTag
|
:bordered="false"
|
class="accident-pill-tag"
|
:style="getResponsibilityTagStyle(formModel.accidentDetailVO.responsibilityJudgment)"
|
>
|
{{ getResponsibilityLabel(formModel.accidentDetailVO.responsibilityJudgment) }}
|
</NTag>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-4px">
|
现场情况
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.accidentDetailVO.situationDescription }}
|
</div>
|
<div v-if="getValidImageList(formModel.accidentDetailVO.situationImage).length" class="imgs">
|
<img
|
v-for="(item, idx) in getValidImageList(formModel.accidentDetailVO.situationImage)"
|
:key="idx"
|
:src="item.url"
|
class="w-56px h-56px accident-thumb" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-4px">
|
处置情况
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.accidentDetailVO.disposalDescription }}
|
</div>
|
<div v-if="getValidImageList(formModel.accidentDetailVO.disposalImage).length" class="imgs">
|
<img
|
v-for="(item, idx) in getValidImageList(formModel.accidentDetailVO.disposalImage)"
|
:key="idx"
|
:src="item.url"
|
class="w-56px h-56px accident-thumb" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px flex gap-24px">
|
<div class="flex items-center flex-1 gap-8px">
|
<img
|
v-if="parseAvatarUrl(formModel.accidentDetailVO.handleUserAvatar)"
|
:src="parseAvatarUrl(formModel.accidentDetailVO.handleUserAvatar)"
|
class="w-40px h-40px accident-avatar" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div class="flex-1 min-w-0">
|
<div class="label mb-4px">
|
处理人
|
</div>
|
<div class="value">
|
{{ formModel.accidentDetailVO.handleUserName || '-' }}
|
{{ formModel.accidentDetailVO.handleUserPhone || '' }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="label mb-4px">
|
处理时间
|
</div>
|
<div class="value">
|
{{ formatDateTime(formModel.accidentDetailVO.handleTime) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 检测详情 -->
|
<div v-if="formModel.detectionDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.detectionDetailVO?.vehiclePictures" :src="formModel.detectionDetailVO.vehiclePictures"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.detectionDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.detectionDetailVO.vehicleColor }} | VIN码：{{
|
formModel.detectionDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.detectionDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<!-- <div class="head mb-12px">
|
系统检测
|
</div>
|
<div class="label mb-16px system-check-grid">
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.networkDetection === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>
|
网络检测
|
</div>
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.versionVerification === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>软件版本核对
|
</div>
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.communicationSelfCheck === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>通讯自检
|
</div>
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.remoteSelfCheck === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>远程控制自检
|
</div>
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.collisionPrevention === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>防撞激活
|
</div>
|
<div class="flex items-center gap-8px">
|
<img
|
:src="formModel.detectionDetailVO.sensorSelfCheck === 1 ? successIcon : failIcon" alt="status"
|
style="width: 18px; height: 18px;"
|
>传感器自检
|
</div>
|
</div>
|
<div class="head mb-12px">
|
人工检测
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
传感器清洁：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.detectionDetailVO.sensorCleaningPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div> -->
|
<div class="mb-16px">
|
<div class="mb-8px">
|
车内交互屏检查：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.detectionDetailVO.interactiveScreenPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
紧急求助按钮/应答机：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.detectionDetailVO.helpButtonPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
交付功能：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.detectionDetailVO.paymentFunctionPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
订单系统检查：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.detectionDetailVO.systemCheckPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.detectionDetailVO.id }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.detectionDetailVO.operationsUserName }}
|
</div>
|
<div class="mb-16px">
|
操作时间：{{ formModel.detectionDetailVO.checkTime
|
? dayjs(formModel.detectionDetailVO.checkTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
</div>
|
</div>
|
<!-- 充电详情 -->
|
<div v-if="formModel.chargingDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.chargingDetailVO?.vehiclePictures.url" :src="formModel.chargingDetailVO.vehiclePictures.url"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.chargingDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.chargingDetailVO.vehicleColor }} | VIN码：{{
|
formModel.chargingDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.chargingDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.chargingDetailVO.id }}
|
</div>
|
<div class="mb-16px">
|
开始充电前电量：{{ formModel.chargingDetailVO.startRemainingBattery }}%
|
</div>
|
<div class="mb-16px">
|
开始充电时间：{{ formModel.chargingDetailVO.startTime
|
? dayjs(formModel.chargingDetailVO.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
<div class="mb-16px">
|
开始充电操作人：{{ formModel.chargingDetailVO.startOperationsUserName }}
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
开始充电图片：
|
</div>
|
<div class="imgs">
|
<div v-for="(item, idx) in JSON.parse(formModel.chargingDetailVO.startChargingPicture)" :key="idx">
|
<img v-if="item?.url" :src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }">
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
充电后电量：{{ formModel.chargingDetailVO.endRemainingBattery }}%
|
</div>
|
<div class="mb-16px">
|
结束充电时间：{{ formModel.chargingDetailVO.endTime
|
? dayjs(formModel.chargingDetailVO.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
<div class="mb-16px">
|
结束充电操作人：{{ formModel.chargingDetailVO.endOperationsUserName }}
|
</div>
|
<div class="mb-16px">
|
<div class="mb-8px">
|
结束充电图片：
|
</div>
|
<div class="imgs">
|
<div v-for="(item, idx) in JSON.parse(formModel.chargingDetailVO.endChargingPicture)" :key="idx">
|
<img v-if="item?.url" :src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 整备详情 -->
|
<div v-if="formModel.preparationDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.preparationDetailVO?.vehiclePictures" :src="formModel.preparationDetailVO.vehiclePictures"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.preparationDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.preparationDetailVO.vehicleColor }} | VIN码：{{
|
formModel.preparationDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.preparationDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
胎压：
|
</div>
|
<div class="value mb-8px">
|
左前轮：{{ formModel.preparationDetailVO.leftFrontWheel }} 右前轮：{{
|
formModel.preparationDetailVO.rightFrontWheel }} 左后轮：{{ formModel.preparationDetailVO.leftRearWheel }}
|
右后轮：{{ formModel.preparationDetailVO.rightRearWheel }}
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
大灯情况：
|
</div>
|
<div v-if="formModel.preparationDetailVO.headLight" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.headLight)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
转向灯情况：
|
</div>
|
<div v-if="formModel.preparationDetailVO.turnSignal" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.turnSignal)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
刹车灯情况：
|
</div>
|
<div v-if="formModel.preparationDetailVO.brakeLight" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.brakeLight)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
雾灯情况：
|
</div>
|
<div v-if="formModel.preparationDetailVO.fogLight" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.fogLight)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
车身标识及清洁：
|
</div>
|
<div v-if="formModel.preparationDetailVO.bodyEmblem" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.bodyEmblem)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
舱内清洁及消毒：
|
</div>
|
<div v-if="formModel.preparationDetailVO.cabinCleaning" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.cabinCleaning)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
遗失物品上报：
|
</div>
|
<div v-if="formModel.preparationDetailVO.lostItems" class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.preparationDetailVO.lostItems)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
<div class="label mt-8px">
|
遗失说明：<div v-html="formModel.preparationDetailVO.lostItemsDetail" />
|
</div>
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.preparationDetailVO.id }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.preparationDetailVO.operationsUserName }}
|
</div>
|
<div class="mb-16px">
|
操作时间：{{ formModel.preparationDetailVO.handleTime
|
? dayjs(formModel.preparationDetailVO.handleTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
</div>
|
</div>
|
<!-- 洗车详情 -->
|
<div v-if="formModel.cleanDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.cleanDetailVO?.vehiclePictures" :src="formModel.cleanDetailVO.vehiclePictures"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.cleanDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.cleanDetailVO.vehicleColor }} | VIN码：{{
|
formModel.cleanDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.cleanDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
图片：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.cleanDetailVO.taskImage)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.cleanDetailVO.id }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.cleanDetailVO.operationsUserName }}
|
</div>
|
<div class="mb-16px">
|
操作时间：{{ formModel.cleanDetailVO.handleTime
|
? dayjs(formModel.cleanDetailVO.handleTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
</div>
|
</div>
|
<!-- 维修详情 -->
|
<div v-if="formModel.repairDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.repairDetailVO?.vehiclePictures" :src="formModel.repairDetailVO.vehiclePictures"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.repairDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.repairDetailVO.vehicleColor }} | VIN码：{{
|
formModel.repairDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.repairDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<div class="mb-16px">
|
维修停运时间：{{ formModel.repairDetailVO.startTime
|
? dayjs(formModel.repairDetailVO.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
<div class="mb-16px">
|
维修原因：{{ formModel.repairDetailVO.repairReason }}
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
维修前图片：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.repairDetailVO.startRepairPicture)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
送修时间：{{ formModel.repairDetailVO.sendTime
|
? dayjs(formModel.repairDetailVO.sendTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.repairDetailVO.sendUserName }}
|
</div>
|
<div class="mb-16px">
|
维修总费用：{{ formModel.repairDetailVO.repairMoney }}
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
维修费用明细单：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.repairDetailVO.repairMoneyDetail)" :key="idx"
|
:src="item.url" class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
取回时间：{{ formModel.repairDetailVO.returnTime
|
? dayjs(formModel.repairDetailVO.returnTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.repairDetailVO.returnUserName }}
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.repairDetailVO.id }}
|
</div>
|
</div>
|
</div>
|
<!-- 保养详情 -->
|
<div v-if="formModel.routineDetailVO?.id">
|
<div class="content">
|
<div class="mb-16px flex items-center">
|
<img
|
v-if="formModel.routineDetailVO?.vehiclePictures" :src="formModel.routineDetailVO.vehiclePictures"
|
class="w-112px h-64px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
<div>
|
<div class="plateNumber mb-8px">
|
{{ formModel.routineDetailVO.plateNumber }}
|
</div>
|
<div class="value mb-8px">
|
{{ formModel.routineDetailVO.vehicleColor }} | VIN码：{{
|
formModel.routineDetailVO.vehicleVin }}
|
</div>
|
<div class="value">
|
车辆位置：{{ formModel.routineDetailVO.vehicleLocation }}
|
</div>
|
</div>
|
</div>
|
<div class="label mb-16px">
|
任务完成情况：{{ formModel.routineDetailVO.taskDescription }}
|
</div>
|
<div class="mb-16px">
|
<div class="label mb-8px">
|
图片：
|
</div>
|
<div class="imgs">
|
<img
|
v-for="(item, idx) in JSON.parse(formModel.routineDetailVO.taskImage)" :key="idx" :src="item.url"
|
class="w-56px h-56px mr-16px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
>
|
</div>
|
</div>
|
<div class="mb-16px">
|
任务单号：{{ formModel.routineDetailVO.id }}
|
</div>
|
<div class="mb-16px">
|
操作人：{{ formModel.routineDetailVO.operationsUserName }}
|
</div>
|
<div class="mb-16px">
|
操作时间：{{ formModel.routineDetailVO.checkTime
|
? dayjs(formModel.routineDetailVO.checkTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
|
</div>
|
</div>
|
</div>
|
</n-modal>
|
</template>
|
|
<style scoped lang="scss">
|
@use '../index.scss';
|
|
.accident-detail {
|
.accident-section + .accident-section {
|
margin-top: 24px;
|
}
|
|
.accident-vehicle-image {
|
border-radius: 4px;
|
object-fit: contain;
|
}
|
|
.accident-thumb {
|
border-radius: 4px;
|
object-fit: contain;
|
}
|
|
.accident-avatar {
|
border-radius: 50%;
|
object-fit: contain;
|
}
|
|
.accident-pill-tag {
|
border-radius: 4px;
|
border: none;
|
padding: 0 8px;
|
height: 22px;
|
line-height: 22px;
|
font-size: 12px;
|
}
|
|
.accident-type-row {
|
display: flex;
|
align-items: center;
|
// justify-content: space-between;
|
gap: 12px;
|
}
|
|
.accident-type-text {
|
// flex: 1;
|
min-width: 0;
|
color: #171F26;
|
line-height: 20px;
|
word-break: break-all;
|
}
|
|
.accident-type-tags {
|
flex: none;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.imgs {
|
flex-wrap: wrap;
|
gap: 16px;
|
}
|
}
|
|
// 系统检测网格
|
.system-check-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
column-gap: 32px;
|
row-gap: 12px;
|
|
.check-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
|
.check-icon {
|
display: flex;
|
align-items: center;
|
}
|
|
.check-name {
|
font-size: 14px;
|
color: #1f2329;
|
}
|
}
|
}
|
</style>
|
