隐患详情重新设计，检查计划重新设计成做题排查式
This commit is contained in:
王利强
@@ -1,196 +1,50 @@
|
||||
<template>
|
||||
<view class="padding page">
|
||||
<view class="padding bg-white radius">
|
||||
<view class="flex margin-bottom">
|
||||
<view class="text-gray">检查形式</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<view class="read-only-box">{{ detailData.source || '暂无' }}</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患图片</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<view class="margin-bottom">
|
||||
<view v-if="detailData.attachments && detailData.attachments.length > 0" class="margin-top-xs">
|
||||
<view class="flex" style="flex-wrap: wrap; gap: 10rpx;">
|
||||
<image
|
||||
v-for="(img, idx) in detailData.attachments"
|
||||
:key="idx"
|
||||
:src="getFullPath(img.filePath)"
|
||||
style="width: 136rpx;height: 136rpx;border-radius: 16rpx;"
|
||||
mode="aspectFill"
|
||||
@click="previewHazardImage(idx)"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="text-gray text-sm">暂无图片</view>
|
||||
<view class="text-gray text-sm margin-top-xs">必填：请上传现场照片作为隐患证据</view>
|
||||
</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患标题</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<up-input v-model="detailData.title" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无" />
|
||||
<view class="text-sm text-gray margin-top-xs">请用简洁的语言概括隐患要点</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患等级</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<view class="flex col-2" style="gap: 10rpx;">
|
||||
<view :class="detailData.level === 2 ? 'bg-blue light' : 'bg-gray'" class="level-item">一般隐患</view>
|
||||
<view :class="detailData.level === 3 ? 'bg-blue light' : 'bg-gray'" class="level-item">重大隐患</view>
|
||||
</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患位置</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<up-input v-model="detailData.address" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无地址" />
|
||||
<view class="text-gray text-sm margin-top-xs">如：办公楼3层东侧消防通道、生产车间A区设备旁等，或点击"选择地址"按钮在地图上选择</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">法律依据</view>
|
||||
</view>
|
||||
<view class="read-only-select">
|
||||
<view class="select-value" :class="{ placeholder: !legalBasisText }">
|
||||
{{ legalBasisText || '暂无' }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患区域</view>
|
||||
</view>
|
||||
<view class="read-only-select">
|
||||
<view class="flex align-center">
|
||||
<view
|
||||
v-if="detailData.areaColor"
|
||||
class="area-color-dot"
|
||||
:style="{ backgroundColor: detailData.areaColor }"
|
||||
></view>
|
||||
<view class="select-value" :class="{ placeholder: !detailData.areaName }">
|
||||
{{ detailData.areaName || '暂无' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex margin-bottom margin-top">
|
||||
<view class="text-gray">隐患描述</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<up-textarea v-model="detailData.description" placeholder="暂无描述" disabled autoHeight></up-textarea>
|
||||
<view class="text-gray text-sm margin-top-xs">请详细说明隐患现状、潜在风险及影响范围</view>
|
||||
|
||||
<view class="text-gray margin-bottom margin-top">隐患标签</view>
|
||||
<view class="read-only-box">{{ detailData.tagName || '暂无' }}</view>
|
||||
</view>
|
||||
<view class="page">
|
||||
<HazardDetailPanel :detail="detailData" :loading="loading" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getHiddenDangerDetail } from '@/request/api.js'
|
||||
import { toImageUrl } from '@/request/request.js'
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import HazardDetailPanel from '@/components/hazardDetail/HazardDetailPanel.vue';
|
||||
import { getHazardDetail } from '@/request/api.js';
|
||||
|
||||
const detailData = reactive({
|
||||
hazardId: '',
|
||||
assignId: '',
|
||||
title: '',
|
||||
level: 0,
|
||||
levelName: '',
|
||||
source: '',
|
||||
description: '',
|
||||
address: '',
|
||||
areaName: '',
|
||||
areaColor: '',
|
||||
tagName: '',
|
||||
legalBasis: '',
|
||||
regulationName: '',
|
||||
attachments: []
|
||||
})
|
||||
const detailData = ref({});
|
||||
const loading = ref(false);
|
||||
|
||||
const legalBasisText = computed(() => detailData.legalBasis || detailData.regulationName || '')
|
||||
const loadDetail = async (hazardId) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getHazardDetail(hazardId);
|
||||
if (res.code === 0 && res.data) {
|
||||
detailData.value = res.data;
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取隐患详情失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getFullPath = (filePath) => toImageUrl(filePath)
|
||||
|
||||
const previewHazardImage = (index) => {
|
||||
if (!detailData.attachments || detailData.attachments.length === 0) return
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: detailData.attachments.map(item => getFullPath(item.filePath))
|
||||
})
|
||||
onLoad((options) => {
|
||||
if (options.hazardId) {
|
||||
loadDetail(options.hazardId);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchDetail = async (hazardId, assignId) => {
|
||||
try {
|
||||
const params = { hazardId }
|
||||
if (assignId) params.assignId = assignId
|
||||
const res = await getHiddenDangerDetail(params)
|
||||
if (res.code === 0 && res.data) {
|
||||
Object.assign(detailData, res.data)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取隐患详情失败:', error)
|
||||
uni.showToast({ title: '请求失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.hazardId) {
|
||||
fetchDetail(options.hazardId, options.assignId)
|
||||
}
|
||||
})
|
||||
uni.showToast({ title: '缺少隐患ID', icon: 'none' });
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
}
|
||||
|
||||
.read-only-box {
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.read-only-select {
|
||||
background: #f5f5f5;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
|
||||
.select-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
|
||||
&.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level-item {
|
||||
padding: 16rpx 40rpx;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.area-color-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #ebf2fc;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user