|
|
@@ -0,0 +1,261 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="content">
|
|
|
+ <!-- 遍历表单数据生成卡片列表 -->
|
|
|
+ <view class="card-list">
|
|
|
+ <!-- 事件时间 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件时间</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-datepicker
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择事件时间"
|
|
|
+ :disabled="true"
|
|
|
+ v-model="form.actualTime"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件级别 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件级别</view>
|
|
|
+ <view class="card-value text-value">{{
|
|
|
+ form.accidentGrade || "-"
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件类型 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件类型</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ v-model="form.accidentType"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件地址 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件地址</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ v-model="form.accidentAddress"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 现场负责人 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">现场负责人</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ v-model.number="form.dutyPerson"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件损失情况 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件损失情况</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ v-model="form.lossSituation"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 现场采取措施 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">现场采取措施</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ type="textarea"
|
|
|
+ autoHeight
|
|
|
+ v-model="form.emergencyMeasure"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件简要经过 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">事件简要经过</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ type="textarea"
|
|
|
+ autoHeight
|
|
|
+ v-model="form.description"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 附件/现场图片 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">附件/现场图片</view>
|
|
|
+ <view class="card-value image-container">
|
|
|
+ <view class="image-list">
|
|
|
+ <view class="image-item" v-if="form.pic">
|
|
|
+ <image
|
|
|
+ :src="form.pic"
|
|
|
+ mode="widthFix"
|
|
|
+ @click="previewImage(form.pic)"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <text v-else class="no-data">暂无图片</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 备注 -->
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="card-label">备注</view>
|
|
|
+ <view class="card-value">
|
|
|
+ <uni-easyinput
|
|
|
+ type="textarea"
|
|
|
+ autoHeight
|
|
|
+ v-model="form.remark"
|
|
|
+ :disabled="true"
|
|
|
+ border="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, computed } from "vue";
|
|
|
+import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import { getDetail } from "@/api/qhse";
|
|
|
+
|
|
|
+// 当前查看的任务 id
|
|
|
+const id = ref(null);
|
|
|
+let form = ref({}); // 初始化为空对象，避免渲染报错
|
|
|
+
|
|
|
+// 从路由参数读取详情 id
|
|
|
+onLoad(async (options) => {
|
|
|
+ id.value = Number(options.id) || null;
|
|
|
+
|
|
|
+ if (id.value) {
|
|
|
+ try {
|
|
|
+ let data = await getDetail(id.value);
|
|
|
+ form.value = data.data || {};
|
|
|
+ console.log("data>>>>>>>>>>>>", form.value);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取详情失败", error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 预览图片方法
|
|
|
+const previewImage = (url) => {
|
|
|
+ if (!url) return;
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [url],
|
|
|
+ current: url,
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f7fa; // 浅灰色背景，突出卡片
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.card-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx; // 卡片之间的间距
|
|
|
+}
|
|
|
+
|
|
|
+.card-item {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); // 轻微阴影
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .card-label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #909399; // 标签颜色稍浅
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-value {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #303133; // 内容颜色深
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ // 覆盖 uni-easyinput 的默认样式，使其融入卡片
|
|
|
+ ::v-deep .uni-easyinput__content {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ min-height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-easyinput__content-input {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #303133;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-textarea {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-value {
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-container {
|
|
|
+ .image-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1rpx solid #ebeef5;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-data {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #c0c4cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
