| | |
| | | <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' |
| | | 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: [] |
| | | }>() |
| | | open: []; |
| | | close: []; |
| | | }>(); |
| | | |
| | | const { |
| | | bool: modalVisible, |
| | | setTrue: showModal, |
| | | setFalse: hiddenModal, |
| | | } = useBoolean(false) |
| | | } = useBoolean(false); |
| | | |
| | | const formDefault: any = { |
| | | id: '', |
| | | id: "", |
| | | chargingDetailVO: {}, |
| | | cleanDetailVO: {}, |
| | | detectionDetailVO: {}, |
| | | preparationDetailVO: {}, |
| | | repairDetailVO: {}, |
| | | routineDetailVO: {}, |
| | | } |
| | | const formModel = ref({ ...formDefault }) |
| | | }; |
| | | const formModel = ref({ ...formDefault }); |
| | | |
| | | async function openModal(data: any, id: string) { |
| | | emit('open') |
| | | formModel.value = { ...data } |
| | | formModel.value.id = id |
| | | showModal() |
| | | emit("open"); |
| | | formModel.value = { ...data }; |
| | | formModel.value.id = id; |
| | | showModal(); |
| | | } |
| | | |
| | | function closeModal() { |
| | | formModel.value = { ...formDefault } |
| | | hiddenModal() |
| | | emit('close') |
| | | formModel.value = { ...formDefault }; |
| | | hiddenModal(); |
| | | emit("close"); |
| | | } |
| | | |
| | | defineExpose({ |
| | | openModal, |
| | | }) |
| | | }); |
| | | |
| | | function parseImageList(value: unknown): Array<{ url?: string }> { |
| | | let arr: any[] = [] |
| | | if (!value) |
| | | return [] |
| | | let arr: any[] = []; |
| | | if (!value) return []; |
| | | if (Array.isArray(value)) { |
| | | arr = value |
| | | } |
| | | else { |
| | | arr = value; |
| | | } else { |
| | | try { |
| | | const parsed = JSON.parse(String(value)) |
| | | if (Array.isArray(parsed)) |
| | | arr = parsed |
| | | } |
| | | catch { |
| | | const parsed = JSON.parse(String(value)); |
| | | if (Array.isArray(parsed)) arr = parsed; |
| | | } catch { |
| | | // ignore |
| | | } |
| | | } |
| | | |
| | | return arr.map((item: any) => { |
| | | if (typeof item === 'string') { |
| | | if (typeof item === "string") { |
| | | try { |
| | | return JSON.parse(item) |
| | | } |
| | | catch { |
| | | return item |
| | | return JSON.parse(item); |
| | | } catch { |
| | | return item; |
| | | } |
| | | } |
| | | return item |
| | | }) |
| | | return item; |
| | | }); |
| | | } |
| | | |
| | | function getValidImageList(value: unknown) { |
| | | return parseImageList(value).filter(it => it?.url) |
| | | 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 (!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 |
| | | if (typeof value === "object") { |
| | | const direct = (value as any)?.url; |
| | | if (direct) return direct; |
| | | } |
| | | const list = getValidImageList(value) |
| | | return list[0]?.url || '' |
| | | 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') |
| | | 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 '' |
| | | }) |
| | | 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 |
| | | 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 |
| | | return null; |
| | | } |
| | | }) |
| | | }); |
| | | |
| | | const taskCode = computed(() => { |
| | | const detail = currentDetail.value |
| | | return detail?.taskCode || detail?.id || formModel.value.id || '-' |
| | | }) |
| | | const detail = currentDetail.value; |
| | | return detail?.taskCode || detail?.id || formModel.value.id || "-"; |
| | | }); |
| | | |
| | | const vehicleLocation = computed(() => { |
| | | const detail = currentDetail.value |
| | | return detail?.vehicleLocation || '-' |
| | | }) |
| | | const detail = currentDetail.value; |
| | | return detail?.vehicleLocation || "-"; |
| | | }); |
| | | |
| | | const vehicleImage = computed(() => { |
| | | const detail = currentDetail.value |
| | | return getVehicleImage(detail?.vehiclePictures) |
| | | }) |
| | | const detail = currentDetail.value; |
| | | return getVehicleImage(detail?.vehiclePictures); |
| | | }); |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | :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 v-if="currentType !== 'preparation'" style="display: flex"> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 车辆位置 |
| | | </div> |
| | | <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-label">任务单号</div> |
| | | <div class="kv-value"> |
| | | {{ taskCode }} |
| | | </div> |
| | |
| | | </div> |
| | | </div> --> |
| | | |
| | | <div class="section-title"> |
| | | 人工检测 |
| | | </div> |
| | | <div class="section-title">人工检测</div> |
| | | <div class="grid-gap-3"> |
| | | <div class="block"> |
| | | <div class="block-label"> |
| | | 传感器清洁: |
| | | </div> |
| | | <div class="block-label">传感器清洁:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.sensorCleaningPicture, |
| | | 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="block-label">紧急求组按钮/应答机:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.helpButtonPicture, |
| | | 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="block-label">订单系统检查:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.systemCheckPicture, |
| | | 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="block-label">车内交互屏检查:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.interactiveScreenPicture, |
| | | 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="block-label">支付功能:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.paymentFunctionPicture, |
| | | 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-label">操作人</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.operationsUserName || "-" }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div class="kv-label"> |
| | | 操作时间 |
| | | </div> |
| | | <div class="kv-label">操作时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.checkTime) }} |
| | | </div> |
| | |
| | | </div> --> |
| | | <div class="flex items-center mt-16px"> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 开始充电前电量 |
| | | </div> |
| | | <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" |
| | | style="width: 25px; height: 12px" |
| | | /> |
| | | <span style="color:#E85050;font-size: 11px;">{{ currentDetail.startRemainingBattery ?? "-" }} km</span> |
| | | <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-label">开始充电时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.startTime) }} |
| | | </div> |
| | |
| | | </div> |
| | | <div class="flex items-center mt-16px"> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 充电后电量 |
| | | </div> |
| | | <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" |
| | | style="width: 25px; height: 12px" |
| | | /> |
| | | <span style="color:#06B752;font-size: 11px;">{{ currentDetail.endRemainingBattery ?? "-" }} km</span> |
| | | <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-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="kv-label mt-4px">充电图片</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.startChargingPicture, |
| | | 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-label">操作人</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.endOperationsUserName || "-" }} |
| | | </div> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 操作时间 |
| | | </div> |
| | | <div class="kv-label">操作时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.startCheckTime) }} |
| | | </div> |
| | |
| | | <!-- <div class="section-title"> |
| | | 灯光检查 |
| | | </div> --> |
| | | <div class="block-label color-06 mb-4px"> |
| | | 胎压 |
| | | </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 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 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="block-label color-06">大灯情况:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.headLight, |
| | | 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="block-label color-06">转向灯情况:</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.turnSignal, |
| | | 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 color-06"> |
| | | 刹车灯情况: |
| | | </div> |
| | | <div class="block-label">舱内清洁及消毒</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.brakeLight, |
| | | 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> |
| | | <div class="grid-gap-3"> |
| | | <div class="block"> |
| | | <div class="block-label color-06"> |
| | | 雾灯情况: |
| | | <!-- <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)" |
| | |
| | | :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> |
| | | <div class="grid-gap-3"> |
| | | <!-- <div class="block"> |
| | | <div class="block-label">车身标识及清洁</div> |
| | | <div class="thumb-list"> |
| | |
| | | |
| | | <div v-else-if="currentType === 'clean'"> |
| | | <div class="block mt-16px"> |
| | | <div class="block-label color-06"> |
| | | 图片 |
| | | </div> |
| | | <div class="block-label color-06">图片</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList(currentDetail.taskImage)" |
| | |
| | | :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-label">操作人</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.operationsUserName || "-" }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div class="kv-label"> |
| | | 操作时间 |
| | | </div> |
| | | <div class="kv-label">操作时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.handleTime) }} |
| | | </div> |
| | |
| | | <div v-else-if="currentType === 'repair'"> |
| | | <div class="flex mt-16px"> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 维修停运时间 |
| | | </div> |
| | | <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') : '-' }} |
| | | {{ |
| | | 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-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="kv-label mb-4px">维修前图片</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.startRepairPicture, |
| | | 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-label">送修时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.sendTime) }} |
| | | </div> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 操作人 |
| | | </div> |
| | | <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-label">维修总费用</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.repairMoney ? `¥${currentDetail.repairMoney}` : "-" }} |
| | | {{ |
| | | currentDetail.repairMoney ? `¥${currentDetail.repairMoney}` : "-" |
| | | }} |
| | | </div> |
| | | </div> |
| | | <div class="block mt-16px"> |
| | | <div class="kv-label mb-4px"> |
| | | 维修费用明细单 |
| | | </div> |
| | | <div class="kv-label mb-4px">维修费用明细单</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList( |
| | | currentDetail.repairMoneyDetail, |
| | | 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-label">取回时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.returnTime) }} |
| | | </div> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div class="kv-label"> |
| | | 操作人 |
| | | </div> |
| | | <div class="kv-label">操作人</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.returnUserName || "-" }} |
| | | </div> |
| | |
| | | |
| | | <div v-else-if="currentType === 'routine'"> |
| | | <div class="block mt-16px"> |
| | | <div class="block-label color-06"> |
| | | 任务完成情况 |
| | | </div> |
| | | <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="block-label color-06">图片</div> |
| | | <div class="thumb-list"> |
| | | <img |
| | | v-for="(item, idx) in getValidImageList(currentDetail.taskImage)" |
| | |
| | | :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-label">处理人</div> |
| | | <div class="kv-value"> |
| | | {{ currentDetail.handleUserName || "-" }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div class="kv-label"> |
| | | 处理时间 |
| | | </div> |
| | | <div class="kv-label">处理时间</div> |
| | | <div class="kv-value"> |
| | | {{ formatDateTime(currentDetail.handleTime) }} |
| | | </div> |