事故上报记录模块开发

zhangwencui

11 小时以前 c5f7bed27616e3ca0e0de981354be3a4a8e95b54

事故上报记录模块开发

 src/api/safeProduction/accidentReportingRecord.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function safeAccidentListPage(query) {
  return request({
    url: "/safeAccident/page",
    method: "get",
    params: query,
  });
}


export function safeAccidentAdd(query) {
    return request({
        url: '/safeAccident',
        method: 'post',
        data: query
    })
}

export function safeAccidentUpdate(query) {
    return request({
        url: '/safeAccident',
        method: 'put',
        data: query
    })
}

export function safeAccidentDel(ids) {
    return request({
        url: '/safeAccident/' + ids,
        method: 'delete',
        data: ids
    })
}

 src/pages.json

@@ -711,6 +711,27 @@
      }
    },
    {
      "path": "pages/safeProduction/accidentReportingRecord/index",
      "style": {
        "navigationBarTitleText": "事故报告记录",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/safeProduction/accidentReportingRecord/detail",
      "style": {
        "navigationBarTitleText": "事故报告详情",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/safeProduction/accidentReportingRecord/view",
      "style": {
        "navigationBarTitleText": "事故报告详情",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/cooperativeOffice/collaborativeApproval/index8",
      "style": {
        "navigationBarTitleText": "危险作业审批",

 src/pages/index.vue

@@ -327,6 +327,10 @@
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      label: "应急预案",
    },
    {
      icon: "/static/images/icon/guzhangfenxi@2x.png",
      label: "事故上报",
    },
  ]);
  // ååŒåŠžå…¬åŠŸèƒ½æ•°æ®
  const collaborationItems = reactive([
@@ -715,6 +719,11 @@
          url: "/pages/safeProduction/emergencyPlanReview/index",
        });
        break;
      case "事故上报":
        uni.navigateTo({
          url: "/pages/safeProduction/accidentReportingRecord/index",
        });
        break;
      default:
        uni.showToast({
          title: `点击了${item.label}`,

 src/pages/safeProduction/accidentReportingRecord/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,411 @@
<template>
  <view class="accident-detail">
    <PageHeader :title="isEdit ? '编辑事故报告' : '新增事故报告'"
                @back="goBack" />
    <u-form @submit="handleSubmit"
            ref="formRef"
            label-width="110">
      <!-- äº‹æ•…信息 -->
      <u-cell-group title="基本信息">
        <u-form-item label="事故名称"
                     prop="accidentName"
                     required
                     border-bottom>
          <u-input v-model="form.accidentName"
                   placeholder="请输入事故名称" />
        </u-form-item>
        <u-form-item label="事故编码"
                     prop="accidentCode"
                     required
                     border-bottom>
          <u-input v-model="form.accidentCode"
                   placeholder="请输入事故编码" />
        </u-form-item>
        <u-form-item label="事故类型"
                     prop="accidentType"
                     required
                     border-bottom>
          <u-input v-model="accidentTypeName"
                   placeholder="请选择事故类型"
                   @click="showTypeSheet"
                   readonly />
          <template #right>
            <up-icon name="arrow-right"
                     @click="showTypeSheet"></up-icon>
          </template>
        </u-form-item>
        <u-form-item label="事故等级"
                     prop="accidentGrade"
                     required
                     border-bottom>
          <u-input v-model="accidentGradeName"
                   placeholder="请选择事故等级"
                   @click="showGradeSheet"
                   readonly />
          <template #right>
            <up-icon name="arrow-right"
                     @click="showGradeSheet"></up-icon>
          </template>
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="详细信息">
        <u-form-item label="发生时间"
                     prop="happenTime"
                     required
                     border-bottom>
          <u-input v-model="form.happenTime"
                   placeholder="请选择发生时间"
                   @click="showTimePicker"
                   readonly />
          <template #right>
            <up-icon name="arrow-right"
                     @click="showTimePicker"></up-icon>
          </template>
        </u-form-item>
        <u-form-item label="事故地点"
                     prop="happenLocation"
                     required
                     border-bottom>
          <u-input v-model="form.happenLocation"
                   placeholder="请输入事故地点" />
        </u-form-item>
        <u-form-item label="直接财产损失"
                     prop="assetLoss"
                     border-bottom>
          <u-input v-model="form.assetLoss"
                   placeholder="请输入直接财产损失"
                   type="number" />
          <template #right>
            <view class="unit">元</view>
          </template>
        </u-form-item>
        <u-form-item label="事故直接原因"
                     prop="accidentCause"
                     border-bottom>
          <u-textarea v-model="form.accidentCause"
                      placeholder="请输入事故直接原因"
                      :maxlength="200"
                      count
                      :autoHeight="true" />
        </u-form-item>
        <u-form-item label="事故根本原因"
                     prop="rootCause"
                     border-bottom>
          <u-textarea v-model="form.rootCause"
                      placeholder="请输入事故根本原因"
                      :maxlength="200"
                      count
                      :autoHeight="true" />
        </u-form-item>
        <u-form-item label="生产影响情况"
                     prop="productionLoss"
                     border-bottom>
          <u-textarea v-model="form.productionLoss"
                      placeholder="请输入生产影响情况"
                      :maxlength="200"
                      count
                      :autoHeight="true" />
        </u-form-item>
        <u-form-item label="现场应急处置措施"
                     prop="handleMeasures"
                     border-bottom>
          <u-textarea v-model="form.handleMeasures"
                      placeholder="请输入现场应急处置措施"
                      :maxlength="200"
                      count
                      :autoHeight="true" />
        </u-form-item>
        <u-form-item label="备注"
                     prop="remark"
                     border-bottom>
          <u-textarea v-model="form.remark"
                      placeholder="请输入备注"
                      :maxlength="200"
                      count
                      :autoHeight="true" />
        </u-form-item>
      </u-cell-group>
      <!-- æäº¤æŒ‰é’® -->
      <view class="footer-btns">
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="sign-btn"
                  type="primary"
                  @click="handleSubmit"
                  :loading="loading">{{ isEdit ? '保存修改' : '提交' }}</u-button>
      </view>
    </u-form>
    <!-- äº‹æ•…类型选择器 -->
    <up-action-sheet :show="typeSheetVisible"
                     :actions="typeOptions"
                     @select="handleTypeSelect"
                     @close="typeSheetVisible = false"
                     title="选择事故类型" />
    <!-- äº‹æ•…等级选择器 -->
    <up-action-sheet :show="gradeSheetVisible"
                     :actions="gradeOptions"
                     @select="handleGradeSelect"
                     @close="gradeSheetVisible = false"
                     title="选择事故等级" />
    <!-- æ—¶é—´é€‰æ‹©å™¨ -->
    <up-datetime-picker :show="timePickerVisible"
                        mode="datetime"
                        v-model="currentTime"
                        @confirm="handleTimeConfirm"
                        @cancel="timePickerVisible = false"
                        title="选择发生时间" />
  </view>
</template>

<script setup>
  // æ›¿æ¢ toast æ–¹æ³•
  defineOptions({ name: "accident-detail" });
  const showToast = message => {
    uni.showToast({ title: message, icon: "none" });
  };

  import { ref, onMounted } from "vue";
  import PageHeader from "@/components/PageHeader.vue";
  import {
    safeAccidentAdd,
    safeAccidentUpdate,
  } from "@/api/safeProduction/accidentReportingRecord";
  import { onLoad } from "@dcloudio/uni-app";
  import { useDict } from "@/utils/dict";
  import dayjs from "dayjs";

  // èŽ·å–字典数据
  const { accident_type } = useDict("accident_type");

  // è¡¨å•æ•°æ®
  const form = ref({
    accidentName: "",
    accidentCode: "",
    accidentType: "",
    accidentGrade: "",
    happenTime: "",
    happenLocation: "",
    createUserName: "",
    createTime: "",
    assetLoss: "",
    accidentCause: "",
    rootCause: "",
    productionLoss: "",
    handleMeasures: "",
    remark: "",
  });

  // é¡µé¢çŠ¶æ€
  const loading = ref(false);
  const formRef = ref(null);
  const isEdit = ref(false);
  const currentTime = ref(new Date());

  // äº‹æ•…类型选择器
  const typeSheetVisible = ref(false);
  const accidentTypeName = ref("");
  const typeOptions = ref([]);

  const showTypeSheet = () => {
    typeSheetVisible.value = true;
  };

  const handleTypeSelect = item => {
    form.value.accidentType = item.value;
    accidentTypeName.value = item.name;
    typeSheetVisible.value = false;
  };

  // äº‹æ•…等级选择器
  const gradeSheetVisible = ref(false);
  const accidentGradeName = ref("");
  const gradeOptions = ref([
    { value: "轻微事故", name: "轻微事故" },
    { value: "一般事故", name: "一般事故" },
    { value: "较大事故", name: "较大事故" },
    { value: "重大事故", name: "重大事故" },
  ]);

  const showGradeSheet = () => {
    gradeSheetVisible.value = true;
  };

  const handleGradeSelect = item => {
    form.value.accidentGrade = item.value;
    accidentGradeName.value = item.name;
    gradeSheetVisible.value = false;
  };

  // æ—¶é—´é€‰æ‹©å™¨
  const timePickerVisible = ref(false);

  const showTimePicker = () => {
    timePickerVisible.value = true;
  };

  const handleTimeConfirm = e => {
    form.value.happenTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss");
    currentTime.value = e.value;
    timePickerVisible.value = false;
  };

  // è¿”回上一页
  const goBack = () => {
    uni.removeStorageSync("accidentReport");
    uni.navigateBack();
  };

  // æäº¤è¡¨å•
  const handleSubmit = async () => {
    if (!form.value.accidentName) {
      showToast("请输入事故名称");
      return;
    }

    if (!form.value.accidentCode) {
      showToast("请输入事故编码");
      return;
    }

    if (!form.value.accidentType) {
      showToast("请选择事故类型");
      return;
    }

    if (!form.value.accidentGrade) {
      showToast("请选择事故等级");
      return;
    }

    if (!form.value.happenTime) {
      showToast("请选择发生时间");
      return;
    }

    if (!form.value.happenLocation) {
      showToast("请输入事故地点");
      return;
    }

    try {
      loading.value = true;

      // ä½¿ç”¨å®‰å…¨æµ…拷贝
      const source =
        form.value && typeof form.value === "object" ? form.value : {};
      const submitData = {};
      Object.keys(source).forEach(k => {
        submitData[k] = source[k];
      });

      if (isEdit.value) {
        const { code } = await safeAccidentUpdate(submitData);
        if (code === 200) {
          showToast("修改成功");
          setTimeout(() => {
            goBack();
          }, 500);
        } else {
          loading.value = false;
          showToast("修改失败，请重试");
        }
      } else {
        const { code } = await safeAccidentAdd(submitData);
        if (code === 200) {
          showToast("新增成功");
          setTimeout(() => {
            goBack();
          }, 500);
        } else {
          loading.value = false;
          showToast("新增失败，请重试");
        }
      }
    } catch (e) {
      loading.value = false;
      console.error("提交失败:", e);
      showToast("提交失败，请重试");
    }
  };

  onLoad(() => {
    // ç¼–辑事故时，从本地存储获取数据
    const accidentReport = uni.getStorageSync("accidentReport");
    if (accidentReport.id) {
      form.value = accidentReport;
      currentTime.value = dayjs(accidentReport.happenTime).toDate();
      isEdit.value = true;
    } else {
      isEdit.value = false;
    }
  });

  onMounted(() => {
    // åˆå§‹åŒ–事故类型选项
    typeOptions.value =
      accident_type?.value.map(item => ({
        value: item.value,
        name: item.label,
      })) || [];

    // è®¾ç½®å·²é€‰å€¼çš„显示文本
    if (form.value.accidentType) {
      const typeItem = typeOptions.value.find(
        item => String(item.value) === String(form.value.accidentType)
      );
      accidentTypeName.value = typeItem ? typeItem.name : "";
    }
    if (form.value.accidentGrade) {
      const gradeItem = gradeOptions.value.find(
        item => item.value === form.value.accidentGrade
      );
      accidentGradeName.value = gradeItem ? gradeItem.name : "";
    }
  });
</script>

<style scoped lang="scss">
  @import "@/static/scss/form-common.scss";

  .accident-detail {
    min-height: 100vh;
    background: #f8f9fa;
    padding-bottom: 5rem;
  }

  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    width: 45%;
    height: 2.5rem;
    border-radius: 2.5rem;
  }

  .sign-btn {
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    width: 45%;
    height: 2.5rem;
    border-radius: 2.5rem;
  }
</style>

 src/pages/safeProduction/accidentReportingRecord/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,357 @@
<template>
  <view class="accident-report">
    <!-- ä½¿ç”¨é€šç”¨é¡µé¢å¤´éƒ¨ç»„件 -->
    <PageHeader title="事故上报记录"
                @back="goBack" />
    <!-- æœç´¢åŒºåŸŸ -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入事故名称"
                    v-model="accidentName"
                    @change="searchChange"
                    clearable />
        </view>
        <view class="filter-button"
              @click="getList">
          <u-icon name="search"
                  size="24"
                  color="#999"></u-icon>
        </view>
      </view>
    </view>
    <!-- äº‹æ•…记录列表 -->
    <view class="ledger-list"
          v-if="accidentList.length > 0">
      <view v-for="(item, index) in accidentList"
            :key="index">
        <view class="ledger-item">
          <!-- <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">事故名称：{{ item.accidentName }}</text>
            </view>
          </view> -->
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-title">事故名称：{{ item.accidentName }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">事故编码</text>
              <text class="detail-value">{{ item.accidentCode || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">事故类型</text>
              <text class="detail-value">{{ accidentTypeLabel(item.accidentType) || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">发生时间</text>
              <text class="detail-value">{{ item.happenTime || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">事故地点</text>
              <text class="detail-value">{{ item.happenLocation || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">事故等级</text>
              <u-tag :type="accidentGradeType(item.accidentGrade)">
                {{ item.accidentGrade || '-' }}
              </u-tag>
            </view>
          </view>
          <!-- æŒ‰é’®åŒºåŸŸ -->
          <view class="action-buttons">
            <u-button type="info"
                      size="small"
                      class="action-btn"
                      @click="viewDetail(item)">
              æŸ¥çœ‹è¯¦æƒ…
            </u-button>
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      @click="editAccident(item)">
              ç¼–辑
            </u-button>
            <u-button type="error"
                      size="small"
                      class="action-btn"
                      @click="deleteAccident(item)">
              åˆ é™¤
            </u-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无事故记录</text>
    </view>
    <!-- æµ®åŠ¨æ–°å¢žæŒ‰é’® -->
    <view class="fab-button"
          @click="addAccident">
      <up-icon name="plus"
               size="24"
               color="#ffffff"></up-icon>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted, computed } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import {
    safeAccidentListPage,
    safeAccidentDel,
  } from "@/api/safeProduction/accidentReportingRecord";
  import { useDict } from "@/utils/dict";

  // æ›¿æ¢ toast æ–¹æ³•
  defineOptions({ name: "accident-report-index" });
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };
  // åº”急预案类型选项
  const { accident_type } = useDict("accident_type");
  const emergencyPlanTypeOptions = computed(() => accident_type?.value || []);

  // æœç´¢å…³é”®è¯
  const accidentName = ref("");

  // äº‹æ•…记录数据
  const accidentList = ref([]);

  // è¿”回上一页
  const goBack = () => {
    uni.navigateBack();
  };

  const accidentGradeType = val => {
    switch (val) {
      case "轻微事故":
        return "info";
      case "一般事故":
        return "info";
      case "较大事故":
        return "warning";
      case "重大事故":
        return "error";
      default:
        return "info";
    }
  };
  const accidentGradeOptions = [
    {
      label: "轻微事故",
      value: "轻微事故",
    },
    {
      label: "一般事故",
      value: "一般事故",
    },
    {
      label: "较大事故",
      value: "较大事故",
    },
    {
      label: "重大事故",
      value: "重大事故",
    },
  ];
  // èŽ·å–事故类型标签
  const accidentTypeLabel = val => {
    const item = emergencyPlanTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const searchChange = val => {
    accidentName.value = val;
    getList();
  };

  // æŸ¥è¯¢åˆ—表
  const getList = () => {
    showLoadingToast("加载中...");
    const params = {
      current: -1,
      size: -1,
      accidentName: accidentName.value,
    };
    safeAccidentListPage(params)
      .then(res => {
        accidentList.value = res.records || res.data?.records || [];
        closeToast();
      })
      .catch(() => {
        closeToast();
        showToast("获取数据失败");
      });
  };

  // æ˜¾ç¤ºåŠ è½½æç¤º
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

  // å…³é—­æç¤º
  const closeToast = () => {
    uni.hideLoading();
  };

  // æ–°å¢žäº‹æ•…记录
  const addAccident = () => {
    uni.setStorageSync("accidentReport", {});
    uni.navigateTo({
      url: "/pages/safeProduction/accidentReportingRecord/detail",
    });
  };

  // ç¼–辑事故记录
  const editAccident = item => {
    uni.setStorageSync("accidentReport", item);
    uni.navigateTo({
      url: "/pages/safeProduction/accidentReportingRecord/detail",
    });
  };

  // åˆ é™¤äº‹æ•…记录
  const deleteAccident = item => {
    uni.showModal({
      title: "删除确认",
      content: `确定要删除该事故记录吗？`,
      success: res => {
        if (res.confirm) {
          deleteAccidentRecord(item.id);
        }
      },
    });
  };

  // åˆ é™¤äº‹æ•…记录
  const deleteAccidentRecord = id => {
    showLoadingToast("删除中...");
    safeAccidentDel([id])
      .then(() => {
        closeToast();
        showToast("删除成功");
        getList();
      })
      .catch(() => {
        closeToast();
        showToast("删除失败");
      });
  };

  // æŸ¥çœ‹è¯¦æƒ…
  const viewDetail = item => {
    uni.setStorageSync("accidentReport", item);
    uni.navigateTo({
      url: "/pages/safeProduction/accidentReportingRecord/view",
    });
  };

  onMounted(() => {
    getList();
  });

  onShow(() => {
    getList();
  });
</script>

<style scoped lang="scss">
  @import "../../../styles/sales-common.scss";

  // é¡µé¢ç‰¹å®šçš„样式覆盖
  .accident-report {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
    padding-bottom: 80px;
  }

  // ç‰¹å®šçš„图标样式
  .document-icon {
    background: #667eea; // ä¿æŒé¡µé¢ç‰¹æœ‰çš„背景色
  }

  // ç‰¹æœ‰æ ·å¼
  .visit-status {
    display: flex;
    align-items: center;
  }

  .detail-value {
    word-break: break-all; // ä¿ç•™é¡µé¢ç‰¹æœ‰çš„文本换行样式
    white-space: normal;
    line-height: 1.4;
  }

  // ç‰¹å®šçš„浮动按钮样式
  .fab-button {
    background: #667eea; // ä¿æŒé¡µé¢ç‰¹æœ‰çš„背景色
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); // ä¿æŒé¡µé¢ç‰¹æœ‰çš„阴影效果
  }
  .action-buttons {
    gap: 4px;
  }
  .action-buttons {
    padding: 0 0 10rpx 0;
  }

  // è¶…期未整改的隐患样式
  .overdue {
    border-left: 8rpx solid #ff4d4f;
    background-color: rgba(255, 77, 79, 0.02);
  }

  .overdue .item-header {
    position: relative;
    padding-left: 20rpx;
  }

  .overdue .item-header::after {
    content: "超期";
    position: absolute;
    top: 32rpx;
    right: 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
    padding: 4rpx 16rpx;
    border-radius: 16rpx;
    border: 1rpx solid rgba(255, 77, 79, 0.3);
  }

  .overdue .detail-row:nth-child(7) .detail-value {
    color: #ff4d4f;
    font-weight: 500;
  }

  .overdue .detail-row {
    padding-left: 20rpx;
  }
</style>


 src/pages/safeProduction/accidentReportingRecord/view.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,223 @@
<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>