<script setup lang="ts">
|
import { useBoolean } from "@/hooks";
|
import successIcon from "@/assets/point/success.png";
|
import failIcon from "@/assets/point/fail.png";
|
import defaultCarImage from "@/assets/point/car.png";
|
import dayjs from "dayjs";
|
|
const emit = defineEmits<{
|
open: [];
|
close: [];
|
}>();
|
|
const {
|
bool: modalVisible,
|
setTrue: showModal,
|
setFalse: hiddenModal,
|
} = useBoolean(false);
|
|
const formDefault: any = {
|
id: "",
|
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,
|
});
|
|
function parseImageList(value: unknown): Array<{ url?: string }> {
|
let arr: any[] = [];
|
if (!value) return [];
|
if (Array.isArray(value)) {
|
arr = value;
|
} else {
|
try {
|
const parsed = JSON.parse(String(value));
|
if (Array.isArray(parsed)) arr = parsed;
|
} catch {
|
// ignore
|
}
|
}
|
|
return arr.map((item: any) => {
|
if (typeof item === "string") {
|
try {
|
return JSON.parse(item);
|
} catch {
|
return item;
|
}
|
}
|
return item;
|
});
|
}
|
|
function getValidImageList(value: unknown) {
|
return parseImageList(value).filter((it) => it?.url);
|
}
|
|
function getVehicleImage(value: unknown) {
|
if (!value) return "";
|
if (typeof value === "string") {
|
const object = JSON.parse(value);
|
if (object?.url) return object.url;
|
}
|
if (typeof value === "object") {
|
const direct = (value as any)?.url;
|
if (direct) return direct;
|
}
|
const list = getValidImageList(value);
|
return list[0]?.url || "";
|
}
|
|
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");
|
}
|
|
const currentType = computed(() => {
|
if (formModel.value.detectionDetailVO?.id) return "detection";
|
if (formModel.value.chargingDetailVO?.id) return "charging";
|
if (formModel.value.preparationDetailVO?.id) return "preparation";
|
if (formModel.value.cleanDetailVO?.id) return "clean";
|
if (formModel.value.repairDetailVO?.id) return "repair";
|
if (formModel.value.routineDetailVO?.id) return "routine";
|
return "";
|
});
|
|
const currentDetail = computed<any>(() => {
|
switch (currentType.value) {
|
case "detection":
|
return formModel.value.detectionDetailVO;
|
case "charging":
|
return formModel.value.chargingDetailVO;
|
case "preparation":
|
return formModel.value.preparationDetailVO;
|
case "clean":
|
return formModel.value.cleanDetailVO;
|
case "repair":
|
return formModel.value.repairDetailVO;
|
case "routine":
|
return formModel.value.routineDetailVO;
|
default:
|
return null;
|
}
|
});
|
|
const taskCode = computed(() => {
|
const detail = currentDetail.value;
|
return detail?.taskCode || detail?.id || formModel.value.id || "-";
|
});
|
|
const vehicleLocation = computed(() => {
|
const detail = currentDetail.value;
|
return detail?.vehicleLocation || "-";
|
});
|
|
const vehicleImage = computed(() => {
|
const detail = currentDetail.value;
|
return getVehicleImage(detail?.vehiclePictures);
|
});
|
</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="currentDetail" class="regular-detail">
|
<div class="vehicle-header">
|
<img
|
:src="vehicleImage"
|
class="vehicle-image"
|
@error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"
|
/>
|
<div class="vehicle-text">
|
<div class="plate-number">
|
{{ currentDetail.plateNumber || "-" }}
|
</div>
|
<div class="vin-line">
|
<span>{{ currentDetail.vehicleColor || "-" }}</span>
|
<span class="vin-sep">|</span>
|
<span>VIN{{ currentDetail.vehicleVin || "-" }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div v-if="currentType !== 'preparation'" style="display: flex">
|
<div class="flex-1">
|
<div class="kv-label">车辆位置</div>
|
<div class="kv-value pr-4px">
|
{{ vehicleLocation }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">任务单号</div>
|
<div class="kv-value">
|
{{ taskCode }}
|
</div>
|
</div>
|
</div>
|
|
<div v-if="currentType === 'detection'">
|
<!-- <div class="section-title">系统检测</div>
|
<div class="system-check-grid">
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.networkDetection === 1 ? successIcon : failIcon
|
"
|
class="check-icon"
|
/>
|
网络检测
|
</div>
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.versionVerification === 1 ? successIcon : failIcon
|
"
|
class="check-icon"
|
/>
|
软件版本核对
|
</div>
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.communicationSelfCheck === 1
|
? successIcon
|
: failIcon
|
"
|
class="check-icon"
|
/>
|
通讯自检
|
</div>
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.remoteSelfCheck === 1 ? successIcon : failIcon
|
"
|
class="check-icon"
|
/>
|
远程控制自检
|
</div>
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.collisionPrevention === 1 ? successIcon : failIcon
|
"
|
class="check-icon"
|
/>
|
防撞激活
|
</div>
|
<div class="check-item">
|
<img
|
:src="
|
currentDetail.sensorSelfCheck === 1 ? successIcon : failIcon
|
"
|
class="check-icon"
|
/>
|
传感器自检
|
</div>
|
</div> -->
|
|
<div class="section-title">人工检测</div>
|
<div class="grid-gap-3">
|
<div class="block">
|
<div class="block-label">传感器清洁：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.sensorCleaningPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">紧急求组按钮/应答机：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.helpButtonPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">订单系统检查：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.systemCheckPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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>
|
<div class="grid-gap-3">
|
<div class="block">
|
<div class="block-label">车内交互屏检查：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.interactiveScreenPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">支付功能：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.paymentFunctionPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr">
|
<div>
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.operationsUserName || "-" }}
|
</div>
|
</div>
|
<div>
|
<div class="kv-label">操作时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.checkTime) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-else-if="currentType === 'charging'">
|
<!-- <div class="section-title">
|
开始充电
|
</div> -->
|
<div class="flex items-center mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">开始充电前电量</div>
|
<div class="flex items-center gap-4px">
|
<n-image
|
src="/src/assets/element-img/power.png"
|
style="width: 25px; height: 12px"
|
/>
|
<span style="color: #e85050; font-size: 11px"
|
>{{ currentDetail.startRemainingBattery ?? "-" }} km</span
|
>
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">开始充电时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.startTime) }}
|
</div>
|
</div>
|
</div>
|
<div class="flex items-center mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">充电后电量</div>
|
<!-- <div class="kv-value">
|
{{ currentDetail.endRemainingBattery ?? "-" }}%
|
</div> -->
|
<div class="flex items-center gap-4px">
|
<n-image
|
src="/src/assets/element-img/powered.png"
|
style="width: 25px; height: 12px"
|
/>
|
<span style="color: #06b752; font-size: 11px"
|
>{{ currentDetail.endRemainingBattery ?? "-" }} km</span
|
>
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">结束充电时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.endTime) }}
|
</div>
|
</div>
|
</div>
|
<div class="mt-16px">
|
<div class="kv-label mt-4px">充电图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.startChargingPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="flex mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.endOperationsUserName || "-" }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">操作时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.startCheckTime) }}
|
</div>
|
</div>
|
</div>
|
|
<!-- <div class="kv-row">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.startOperationsUserName || "-" }}
|
</div>
|
</div> -->
|
<!-- <div class="block">
|
<div class="block-label">开始充电图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.startChargingPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="section-title">结束充电</div> -->
|
|
<!-- <div class="kv-row">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.endOperationsUserName || "-" }}
|
</div>
|
</div>
|
<div class="block">
|
<div class="block-label">结束充电图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.endChargingPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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>
|
|
<div v-else-if="currentType === 'preparation'">
|
<!-- <div class="section-title">
|
灯光检查
|
</div> -->
|
<div class="block-label color-06 mb-4px">胎压</div>
|
<div style="display: flex; gap: 20px">
|
<div class="w-200px">左前轮：{{ currentDetail.leftFrontWheel }}</div>
|
<div class="w-200px">右前轮：{{ currentDetail.rightFrontWheel }}</div>
|
</div>
|
<div style="display: flex; gap: 20px; margin-bottom: 20px">
|
<div class="w-200px">左后轮：{{ currentDetail.leftRearWheel }}</div>
|
<div class="w-200px">右后轮：{{ currentDetail.rightRearWheel }}</div>
|
</div>
|
<div class="grid-gap-3">
|
<div class="block">
|
<div class="block-label color-06">大灯情况：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.headLight
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label color-06">转向灯情况：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.turnSignal
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">舱内清洁及消毒</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.cabinCleaning
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label color-06">刹车灯情况：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.brakeLight
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label color-06">雾灯情况：</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(currentDetail.fogLight)"
|
:key="idx"
|
:src="item.url"
|
class="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>
|
<div class="grid-gap-3">
|
<!-- <div class="block">
|
<div class="block-label">车身标识及清洁</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.bodyEmblem
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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>
|
|
<!-- <div class="section-title">轮胎检查</div> -->
|
|
<!-- <div class="block">
|
<div class="block-label">左前轮</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.leftFrontWheel
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">右前轮</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.rightFrontWheel
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">左后轮</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.leftRearWheel
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">右后轮</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.rightRearWheel
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="section-title">车辆整备</div> -->
|
|
<!-- <div class="block">
|
<div class="block-label">舱内清洁及消毒</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.cabinCleaning
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="block">
|
<div class="block-label">遗失物品上报</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(currentDetail.lostItems)"
|
:key="idx"
|
:src="item.url"
|
class="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 v-if="currentDetail.remarks" class="block">
|
<div class="block-label">遗失说明</div>
|
<div class="block-text">
|
{{ currentDetail.remarks }}
|
</div>
|
</div>
|
<div class="kv-row">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.operationsUserName || "-" }}
|
</div>
|
</div>
|
<div class="kv-row">
|
<div class="kv-label">操作时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.operationsTime) }}
|
</div>
|
</div> -->
|
</div>
|
|
<div v-else-if="currentType === 'clean'">
|
<div class="block mt-16px">
|
<div class="block-label color-06">图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"
|
:key="idx"
|
:src="item.url"
|
class="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 style="display: grid; grid-template-columns: 1fr 1fr">
|
<div>
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.operationsUserName || "-" }}
|
</div>
|
</div>
|
<div>
|
<div class="kv-label">操作时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.handleTime) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-else-if="currentType === 'repair'">
|
<div class="flex mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">维修停运时间</div>
|
<div class="kv-value">
|
{{
|
currentDetail.startTime
|
? dayjs(currentDetail.startTime).format("YYYY/MM/DD")
|
: "-"
|
}}
|
-
|
{{
|
currentDetail.endTime
|
? dayjs(currentDetail.endTime).format("YYYY/MM/DD")
|
: "-"
|
}}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">维修原因</div>
|
<div class="kv-value">
|
{{ currentDetail.repairReason || "-" }}
|
</div>
|
</div>
|
</div>
|
<div class="block mt-16px">
|
<div class="kv-label mb-4px">维修前图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.startRepairPicture
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="flex mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">送修时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.sendTime) }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.sendUserName || "-" }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-1 mt-16px">
|
<div class="kv-label">维修总费用</div>
|
<div class="kv-value">
|
{{
|
currentDetail.repairMoney ? `¥${currentDetail.repairMoney}` : "-"
|
}}
|
</div>
|
</div>
|
<div class="block mt-16px">
|
<div class="kv-label mb-4px">维修费用明细单</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(
|
currentDetail.repairMoneyDetail
|
)"
|
:key="idx"
|
:src="item.url"
|
class="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="flex mt-16px">
|
<div class="flex-1">
|
<div class="kv-label">取回时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.returnTime) }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="kv-label">操作人</div>
|
<div class="kv-value">
|
{{ currentDetail.returnUserName || "-" }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-else-if="currentType === 'routine'">
|
<div class="block mt-16px">
|
<div class="block-label color-06">任务完成情况</div>
|
<div class="block-text">
|
{{ currentDetail.taskDescription || "-" }}
|
</div>
|
</div>
|
<div class="block">
|
<div class="block-label color-06">图片</div>
|
<div class="thumb-list">
|
<img
|
v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"
|
:key="idx"
|
:src="item.url"
|
class="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 style="display: grid; grid-template-columns: 1fr 1fr">
|
<div>
|
<div class="kv-label">处理人</div>
|
<div class="kv-value">
|
{{ currentDetail.handleUserName || "-" }}
|
</div>
|
</div>
|
<div>
|
<div class="kv-label">处理时间</div>
|
<div class="kv-value">
|
{{ formatDateTime(currentDetail.handleTime) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</n-modal>
|
</template>
|
|
<style scoped lang="scss">
|
.regular-detail {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.vehicle-header {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
margin-bottom: 16px;
|
}
|
|
.vehicle-image {
|
width: 112px;
|
height: 64px;
|
border-radius: 4px;
|
object-fit: contain;
|
flex: none;
|
}
|
|
.vehicle-text {
|
min-width: 0;
|
flex: 1;
|
}
|
|
.plate-number {
|
font-size: 20px;
|
font-weight: 600;
|
color: rgba(23, 31, 38, 1);
|
line-height: 28px;
|
margin-bottom: 8px;
|
}
|
|
.vin-line {
|
font-size: 13px;
|
color: rgba(23, 31, 38, 1);
|
line-height: 18px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
flex-wrap: wrap;
|
}
|
|
.vin-sep {
|
color: rgba(23, 31, 38, 0.3);
|
}
|
|
.kv-row {
|
display: flex;
|
align-items: flex-start;
|
gap: 8px;
|
margin-bottom: 12px;
|
}
|
|
.kv-label {
|
color: rgba(23, 31, 38, 0.6);
|
font-size: 13px;
|
line-height: 18px;
|
flex: none;
|
margin-bottom: 4px;
|
}
|
|
.kv-value {
|
color: rgba(23, 31, 38, 1);
|
font-size: 13px;
|
line-height: 18px;
|
flex: 1;
|
min-width: 0;
|
word-break: break-all;
|
}
|
|
.section-title {
|
margin-top: 24px;
|
margin-bottom: 12px;
|
font-size: 16px;
|
font-weight: 600;
|
color: rgba(23, 31, 38, 1);
|
line-height: 24px;
|
position: relative;
|
padding-left: 11px;
|
}
|
|
.section-title::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 14px;
|
border-radius: 3px;
|
background: #0068ff;
|
}
|
|
.system-check-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
column-gap: 25px;
|
row-gap: 12px;
|
margin-bottom: 12px;
|
}
|
|
.check-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 13px;
|
color: rgba(23, 31, 38, 1);
|
line-height: 18px;
|
}
|
|
.check-icon {
|
width: 14.6px;
|
height: 14.6px;
|
flex: none;
|
}
|
|
.block {
|
margin-bottom: 16px;
|
}
|
|
.block-label {
|
color: rgba(23, 31, 38);
|
font-size: 13px;
|
line-height: 18px;
|
margin-bottom: 8px;
|
}
|
.color-06 {
|
color: rgba(23, 31, 38, 0.6) !important;
|
}
|
|
.block-text {
|
color: rgba(23, 31, 38, 1);
|
font-size: 13px;
|
line-height: 18px;
|
word-break: break-all;
|
}
|
|
.thumb-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 16px;
|
}
|
|
.thumb {
|
width: 56px;
|
height: 56px;
|
border-radius: 4px;
|
object-fit: contain;
|
}
|
.grid-gap-3 {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
column-gap: 32px;
|
row-gap: 16px;
|
}
|
</style>
|
