<template>
|
<view class="accident-view">
|
<PageHeader title="事故报告详情"
|
@back="goBack" />
|
<view class="detail-container">
|
<!-- 事故基本信息 -->
|
<view class="info-section">
|
<view class="info-title">基本信息</view>
|
<view class="info-content">
|
<view class="info-row">
|
<view class="info-label">事故名称：</view>
|
<view class="info-value">{{ accidentInfo.accidentName || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故编码：</view>
|
<view class="info-value">{{ accidentInfo.accidentCode || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故类型：</view>
|
<view class="info-value">{{ accidentTypeLabel(accidentInfo.accidentType) || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故等级：</view>
|
<view class="info-value">
|
<u-tag :type="getAccidentLevelType(accidentInfo.accidentGrade)">
|
{{ accidentInfo.accidentGrade || '-' }}
|
</u-tag>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 事故详细信息 -->
|
<view class="info-section">
|
<view class="info-title">详细信息</view>
|
<view class="info-content">
|
<view class="info-row">
|
<view class="info-label">发生时间：</view>
|
<view class="info-value">{{ accidentInfo.happenTime || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故地点：</view>
|
<view class="info-value">{{ accidentInfo.happenLocation || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">上报人：</view>
|
<view class="info-value">{{ accidentInfo.createUserName || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">上报时间：</view>
|
<view class="info-value">{{ accidentInfo.createTime || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">直接财产损失：</view>
|
<view class="info-value">{{ accidentInfo.assetLoss || '-' }}<span v-if="accidentInfo.assetLoss">元</span></view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">上报时间：</view>
|
<view class="info-value">{{ accidentInfo.createTime || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故直接原因：</view>
|
<view class="info-value">{{ accidentInfo.accidentCause || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">事故根本原因：</view>
|
<view class="info-value">{{ accidentInfo.rootCause || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">生产影响情况：</view>
|
<view class="info-value">{{ accidentInfo.productionLoss || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">现场应急处置措施：</view>
|
<view class="info-value">{{ accidentInfo.handleMeasures || '-' }}</view>
|
</view>
|
<view class="info-row">
|
<view class="info-label">备注：</view>
|
<view class="info-value">{{ accidentInfo.remark || '-' }}</view>
|
</view>
|
</view>
|
</view>
|
<!-- 事故描述 -->
|
<view class="info-section"
|
v-if="accidentInfo.accidentDescription">
|
<view class="info-title">事故描述</view>
|
<view class="description-content">
|
{{ accidentInfo.accidentDescription }}
|
</view>
|
</view>
|
<!-- 处理措施 -->
|
<view class="info-section"
|
v-if="accidentInfo.handlingMeasures">
|
<view class="info-title">处理措施</view>
|
<view class="description-content">
|
{{ accidentInfo.handlingMeasures }}
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, computed } from "vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import { useDict } from "@/utils/dict";
|
// 应急预案类型选项
|
const { accident_type } = useDict("accident_type");
|
const emergencyPlanTypeOptions = computed(() => accident_type?.value || []);
|
|
// 获取事故类型标签
|
const accidentTypeLabel = val => {
|
const item = emergencyPlanTypeOptions.value.find(
|
i => String(i.value) === String(val)
|
);
|
return item ? item.label : val;
|
};
|
|
// 替换 toast 方法
|
defineOptions({ name: "accident-view" });
|
const showToast = message => {
|
uni.showToast({ title: message, icon: "none" });
|
};
|
|
// 事故信息
|
const accidentInfo = ref({});
|
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
// 获取事故等级标签类型
|
const getAccidentLevelType = val => {
|
switch (val) {
|
case "轻微事故":
|
return "info";
|
case "一般事故":
|
return "info";
|
case "较大事故":
|
return "warning";
|
case "重大事故":
|
return "error";
|
default:
|
return "info";
|
}
|
};
|
|
onLoad(() => {
|
// 从本地存储获取事故信息
|
const accidentReport = uni.getStorageSync("accidentReport");
|
if (accidentReport) {
|
accidentInfo.value = accidentReport;
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.accident-view {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 2rem;
|
}
|
|
.detail-container {
|
padding: 1rem;
|
}
|
|
.info-section {
|
background: #fff;
|
border-radius: 0.5rem;
|
margin-bottom: 1rem;
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
|
overflow: hidden;
|
}
|
|
.info-title {
|
padding: 1rem;
|
font-size: 1rem;
|
font-weight: 500;
|
color: #303133;
|
background: #f5f5f5;
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.info-content {
|
padding: 1rem;
|
}
|
|
.info-row {
|
display: flex;
|
margin-bottom: 0.75rem;
|
align-items: flex-start;
|
}
|
|
.info-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.info-label {
|
width: 240rpx;
|
font-size: 0.875rem;
|
color: #606266;
|
}
|
|
.info-value {
|
flex: 1;
|
font-size: 0.875rem;
|
color: #303133;
|
word-break: break-all;
|
white-space: normal;
|
line-height: 1.4;
|
}
|
|
.description-content {
|
padding: 1rem;
|
font-size: 0.875rem;
|
color: #303133;
|
line-height: 1.5;
|
}
|
</style>
|
