v1.2.1版本,优化调整了很多,整改验收阶段新加字段

This commit is contained in:
王利强
2026-06-13 08:50:51 +08:00
parent 2af9f1fd59
commit 1fe87ec438
591 changed files with 5072 additions and 2706 deletions

View File

@@ -61,7 +61,7 @@
</view>
<!-- 新增弹窗 -->
<u-popup :show="showAddPopup" mode="center" round="20" @close="showAddPopup = false">
<u-popup :show="showAddPopup" mode="center" round="20" :safe-area-inset-bottom="false" @close="showAddPopup = false">
<view class="popup-content">
<view class="popup-header">
<view class="popup-title text-bold">新增隐患排查</view>
@@ -69,6 +69,20 @@
</view>
<scroll-view class="popup-body" scroll-y>
<view class="flex margin-bottom">
<view class="text-gray">检查形式</view>
<view class="text-red">*</view>
</view>
<view class="source-choose-scroll">
<up-choose
v-model="formData.source"
:options="sourceOptions"
:wrap="false"
item-width="152rpx"
item-height="64rpx"
></up-choose>
</view>
<!-- <view class="text-gray text-sm margin-top-xs">左右滑动可查看更多来源</view> -->
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患图片</view>
<view class="text-red">*</view>
</view>
@@ -101,12 +115,6 @@
item-width="183rpx"
item-height="72rpx"
></up-choose>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患来源</view>
<view class="text-red">*</view>
</view>
<up-choose v-model="formData.source" :options="sourceOptions" :wrap="false" item-width="183rpx"
item-height="72rpx"></up-choose>
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患位置</view>
<view class="text-red">*</view>
@@ -158,7 +166,7 @@
</u-popup>
<!-- 选择法规弹出框 -->
<u-popup :show="showLawPopup" mode="center" round="20" @close="showLawPopup = false">
<u-popup :show="showLawPopup" mode="center" round="20" :safe-area-inset-bottom="false" @close="showLawPopup = false">
<view class="law-popup">
<view class="popup-header">
<view class="popup-title">选择法律依据</view>
@@ -249,13 +257,8 @@
analyzeHazardImage
} from '@/request/api.js'
import { getAreaList } from '@/request/three_one_api/area.js'
import { addTimestampWatermark } from '@/utils/watermark.js'
import {
baseUrl,
getToken,
toImageUrl,
imageBaseUrl
} from '@/request/request.js'
import { toImageUrl } from '@/request/request.js'
import { createUploadListHandlers, buildAttachmentItem } from '@/utils/upload.js'
// 弹窗控制
const showAddPopup = ref(false);
@@ -533,16 +536,9 @@
return;
}
const attachments = fileList1.value.map(file => {
const path = file.serverPath || '';
const fileName = path ? path.split('/').pop() : (file.name || '');
return {
fileName: fileName || '',
filePath: path,
fileType: file.type || 'image/png',
fileSize: file.size || 0
};
});
const attachments = fileList1.value
.filter((f) => f.status === 'success')
.map((file) => buildAttachmentItem(file));
// 获取隐患标签ID
const selectedTag = tagOptions.value[formData.tagIndex];
@@ -640,9 +636,11 @@
})
}
const Rectification = (item) => {
uni.navigateTo({
url: `/pages/hiddendanger/rectification?hazardId=${item.hazardId}&assignId=${item.assignId}`
})
let url = `/pages/hiddendanger/rectification?hazardId=${item.hazardId}&assignId=${item.assignId}`
if (item.deadline) {
url += `&deadline=${encodeURIComponent(item.deadline)}`
}
uni.navigateTo({ url })
}
// 编辑整改信息(待验收状态)
@@ -664,77 +662,15 @@
})
}
const fileList1 = ref([]);
// 删除图片
const deletePic = (event) => {
fileList1.value.splice(event.index, 1);
};
// 新增图片
const afterRead = async (event) => {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
let fileListLen = fileList1.value.length;
lists.map((item) => {
fileList1.value.push({
...item,
status: 'uploading',
message: '上传中',
});
});
for (let i = 0; i < lists.length; i++) {
let watermarkedUrl = lists[i].url;
try {
const instance = getCurrentInstance();
watermarkedUrl = await addTimestampWatermark({
tempFilePath: lists[i].url,
canvasId: 'watermarkCanvas',
canvasWidthRef: canvasWidth,
canvasHeightRef: canvasHeight,
instance
});
} catch (e) {
console.error('加水印失败,将使用原图上传:', e);
}
const result = await uploadFilePromise(watermarkedUrl);
let item = fileList1.value[fileListLen];
const serverPath = typeof result === 'string' ? result : (result?.url || result?.path || '');
fileList1.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
// url: baseUrl + serverPath,
url: toImageUrl(serverPath),
serverPath: serverPath,
});
fileListLen++;
const uploadInstance = getCurrentInstance();
const { afterRead, deletePic } = createUploadListHandlers(fileList1, {
watermark: {
canvasId: 'watermarkCanvas',
canvasWidthRef: canvasWidth,
canvasHeightRef: canvasHeight,
instance: uploadInstance
}
};
const uploadFilePromise = (filePath) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: baseUrl + '/frontend/attachment/upload',
filePath: filePath,
name: 'file',
header: {
'Authorization': getToken()
},
success: (res) => {
const data = JSON.parse(res.data);
if (data.code === 0) {
resolve(data.data);
} else {
reject(data.msg || '上传失败');
}
},
fail: (err) => {
console.error('上传失败:', err);
reject(err);
}
});
});
};
});
// AI 识别隐患
const aiAnalyzing = ref(false);
@@ -833,19 +769,19 @@
//隐患来源
const sourceOptions = ref([{
id: 1,
title: '随手拍'
title: '部门检查'
},
{
id: 2,
title: '企业自查'
title: '都导检查'
},
{
id: 3,
title: '行业互查'
title: '企业自查'
},
{
id: 4,
title: '专家诊查'
title: '行业互查'
}
])
@@ -1013,6 +949,43 @@
overflow-y: auto;
}
// 检查形式横向滚动,露出第 4 项一角提示可滑动
.source-choose-scroll {
width: 100%;
overflow: hidden;
:deep(.up-choose) {
width: 100%;
white-space: nowrap;
}
:deep(.u-tag-wrapper) {
margin-right: 12rpx;
}
:deep(.u-tag) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
padding: 0 8rpx !important;
line-height: normal !important;
}
:deep(.u-tag__content) {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
:deep(.u-tag__text) {
font-size: 24rpx !important;
line-height: 1.3 !important;
text-align: center;
}
}
.popup-footer {
display: flex;
border-top: 1rpx solid #eee;

View File

@@ -8,9 +8,33 @@
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyPlan || '暂无' }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">完成情况</view>
<view style="color: #999; margin-bottom: 10rpx;">整改措施</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectificationMeasures || '暂无' }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">管控措施</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.controlMeasures || '暂无' }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">整改完成情况</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyResult || '暂无' }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">计划投资资金</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ formatMoney(rectifyData.planCost) }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">实际投资资金</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ formatMoney(rectifyData.actualCost) }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">整改责任人</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifierName || '暂无' }}</view>
</view>
<view class="margin-top">
<view style="color: #999; margin-bottom: 10rpx;">完成情况</view>
<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyStatusName || '暂无' }}</view>
</view>
<view class="margin-top-sm">
<view>整改附件</view>
<view class="flex margin-top-xs" style="flex-wrap: wrap; gap: 10rpx;" v-if="rectifyAttachments.length > 0">
@@ -84,8 +108,12 @@
import { ref, reactive, watch, nextTick, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { acceptanceRectification, getHiddenDangerDetail } from '@/request/api.js';
import { baseUrl, getToken, toImageUrl, imageBaseUrl } from '@/request/request.js';
import { addTimestampWatermark } from '@/utils/watermark.js';
import { toImageUrl } from '@/request/request.js';
import {
createUploadListHandlers,
buildAttachmentItem,
uploadToCloud
} from '@/utils/upload.js';
// 页面参数
const rectifyId = ref('');
@@ -95,9 +123,26 @@
// 整改记录数据
const rectifyData = reactive({
rectifyPlan: '',
rectifyResult: ''
rectificationMeasures: '',
controlMeasures: '',
rectifyResult: '',
planCost: null,
actualCost: null,
rectifierName: '',
rectifyStatusName: ''
});
const formatMoney = (value) => {
if (value === null || value === undefined || value === '') {
return '暂无';
}
const num = Number(value);
if (Number.isNaN(num)) {
return '暂无';
}
return `${num.toFixed(2)}`;
};
// 整改附件
const rectifyAttachments = ref([]);
@@ -148,25 +193,52 @@
});
};
// 从 assigns 中找到包含整改记录的那一项
const resolveAssignWithRectify = (assigns) => {
if (!assigns?.length) return null;
if (rectifyId.value) {
const byRectifyId = assigns.find(
(item) => item.rectify && String(item.rectify.rectifyId) === String(rectifyId.value)
);
if (byRectifyId) return byRectifyId;
}
if (assignId.value) {
const byAssignId = assigns.find(
(item) => String(item.assignId) === String(assignId.value) && item.rectify
);
if (byAssignId) return byAssignId;
}
return assigns.find((item) => item.rectify) || null;
};
const applyRectifyData = (rectify) => {
if (!rectify) return;
rectifyData.rectifyPlan = rectify.rectifyPlan || '';
rectifyData.rectificationMeasures = rectify.rectificationMeasures || '';
rectifyData.controlMeasures = rectify.controlMeasures || '';
rectifyData.rectifyResult = rectify.rectifyResult || '';
rectifyData.planCost = rectify.planCost ?? null;
rectifyData.actualCost = rectify.actualCost ?? null;
rectifyData.rectifierName = rectify.rectifierName || '';
rectifyData.rectifyStatusName = rectify.rectifyStatusName || '';
rectifyAttachments.value = rectify.attachments || [];
};
// 获取隐患详情
const fetchDetail = async () => {
if (!hazardId.value || !assignId.value) return;
if (!hazardId.value) return;
try {
const res = await getHiddenDangerDetail({ hazardId: hazardId.value, assignId: assignId.value });
const res = await getHiddenDangerDetail({
hazardId: hazardId.value,
assignId: assignId.value
});
if (res.code === 0 && res.data) {
// 提取整改信息assigns[0].rectify
if (res.data.assigns && res.data.assigns.length > 0) {
const assign = res.data.assigns[0];
if (assign.rectify) {
rectifyData.rectifyPlan = assign.rectify.rectifyPlan || '';
rectifyData.rectifyResult = assign.rectify.rectifyResult || '';
if (assign.rectify.attachments) {
rectifyAttachments.value = assign.rectify.attachments;
}
console.log('整改记录:', rectifyData);
console.log('整改附件:', rectifyAttachments.value);
}
const assign = resolveAssignWithRectify(res.data.assigns);
if (assign?.rectify) {
applyRectifyData(assign.rectify);
console.log('整改记录:', rectifyData);
console.log('整改附件:', rectifyAttachments.value);
}
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
@@ -176,23 +248,7 @@
uni.showToast({ title: '请求失败', icon: 'none' });
}
};
onLoad((options) => {
if (options.rectifyId) {
rectifyId.value = options.rectifyId;
}
if (options.hazardId) {
hazardId.value = options.hazardId;
}
if (options.assignId) {
assignId.value = options.assignId;
}
console.log('验收页面参数:', { rectifyId: rectifyId.value, hazardId: hazardId.value, assignId: assignId.value });
// 获取隐患详情
fetchDetail();
});
// 取消
const handleCancel = () => {
uni.navigateBack();
@@ -240,25 +296,9 @@
// 真正调取后台接口提交验收
const executeSubmit = async () => {
// 构建附件列表
const attachments = fileList1.value.map(file => {
let url = '';
if (typeof file.url === 'string') {
url = file.url;
} else if (file.url && typeof file.url === 'object') {
url = file.url.url || file.url.path || '';
}
// 将预览绝对路径还原为服务端相对路径,避免后端保存带域名的绝对地址
if (typeof url === 'string' && url.startsWith('http')) {
url = url.replace(imageBaseUrl, '');
}
const fileName = (typeof url === 'string' && url) ? url.split('/').pop() : (file.name || '');
return {
fileName: fileName || '',
filePath: url || '',
fileType: file.type || 'image/png',
fileSize: file.size || 0
};
});
const attachments = fileList1.value
.filter((f) => f.status === 'success')
.map((file) => buildAttachmentItem(file));
const params = {
rectifyId: Number(rectifyId.value),
@@ -300,91 +340,15 @@
}
};
// 删除图片
const deletePic = (event) => {
fileList1.value.splice(event.index, 1);
};
// 新增图片
/**
* 在前端为图片进行实时渲染,添加当前系统时间戳水印(防作弊)
* @param {string} tempFilePath 原始选择的图片临时路径
* @returns {Promise<string>} 渲染后的带水印图片临时文件路径
*/
const addWatermark = (tempFilePath) => {
const instance = getCurrentInstance();
return addTimestampWatermark({
tempFilePath,
const acceptUploadInstance = getCurrentInstance();
const { afterRead, deletePic } = createUploadListHandlers(fileList1, {
watermark: {
canvasId: 'watermarkCanvas',
canvasWidthRef: canvasWidth,
canvasHeightRef: canvasHeight,
instance
});
};
// 新增图片(自动加入实时前端水印渲染防作弊功能)
const afterRead = async (event) => {
let lists = [].concat(event.file);
let fileListLen = fileList1.value.length;
lists.map((item) => {
fileList1.value.push({
...item,
status: 'uploading',
message: '处理中...',
});
});
for (let i = 0; i < lists.length; i++) {
try {
// 1. 进行前端实时渲染绘制水印,得到新图片临时路径
const watermarkedUrl = await addWatermark(lists[i].url);
// 2. 将加完水印的新图片进行服务器上传
const result = await uploadFilePromise(watermarkedUrl);
let item = fileList1.value[fileListLen];
fileList1.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
url: toImageUrl(result.url || result.filePath || result),
});
} catch (e) {
console.error('加水印或上传失败:', e);
let item = fileList1.value[fileListLen];
fileList1.value.splice(fileListLen, 1, {
...item,
status: 'failed',
message: '处理失败',
});
}
fileListLen++;
}
};
const uploadFilePromise = (filePath) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: baseUrl + '/frontend/attachment/upload',
filePath: filePath,
name: 'file',
header: {
'Authorization': getToken()
},
success: (res) => {
const data = JSON.parse(res.data);
if (data.code === 0) {
resolve(data.data);
} else {
reject(data.msg || '上传失败');
}
},
fail: (err) => {
console.error('上传失败:', err);
reject(err);
}
});
});
};
instance: acceptUploadInstance
}
});
// 电子签名画布手写线条变动回调
const onSignatureChange = () => {
@@ -557,13 +521,12 @@
// 签名导出成功回调
const onSignatureConfirm = async (tempFilePath) => {
try {
// 上传签名
const res = await uploadFilePromise(tempFilePath);
// 兼容后端返回对象或者单纯字符串路径
const path = (res && typeof res === 'object') ? (res.url || res.filePath || '') : (res || '');
signatureServerPath.value = path;
signatureUrl.value = path.startsWith('http') ? path : (baseUrl.replace('/api', '') + path);
const { url } = await uploadToCloud(tempFilePath);
signatureServerPath.value = url;
signatureUrl.value = url;
showCanvas.value = false;
isSignatureEmpty.value = false;
if (isSubmitting.value) {
await executeSubmit();
}

View File

@@ -10,19 +10,61 @@
<text class="text-blue text-bold" style="cursor: pointer; padding: 0 10rpx; color: #2667E9; font-weight: bold;" @click="clearDraft(true)">清空草稿</text>
</view>
<view class="flex margin-bottom">
<view class="text-gray">整改人</view>
<view class="text-gray">整改责任</view>
<view class="text-red">*</view>
</view>
<view class="picker-input" @click="showUserPicker = true">
<text :class="selectedUser ? '' : 'text-gray'">{{ selectedUser || '请选择整改人员' }}</text>
<view class="select-trigger" @click="openUserPopup">
<view class="select-content" :class="{ 'text-gray': !selectedUser }">
{{ selectedUser || '请选择整改责任人' }}
</view>
<text class="cuIcon-unfold"></text>
</view>
<up-picker
:show="showUserPicker"
:columns="userColumns"
@confirm="onUserConfirm"
@cancel="showUserPicker = false"
@close="showUserPicker = false"
></up-picker>
<!-- 整改责任人部门-人员级联单选弹窗 -->
<u-popup :show="showUserPopup" mode="bottom" round="20" @close="cancelUserSelect">
<view class="user-popup cascader-user-popup">
<view class="popup-header">
<view class="popup-title text-bold">选择整改责任人</view>
<view class="popup-close" @click="cancelUserSelect">×</view>
</view>
<view v-if="userPickerSelectedId" class="selected-summary">
<text class="summary-label">已选</text>
<text class="summary-text">{{ userPickerSelectedText }}</text>
</view>
<view class="cascader-body">
<scroll-view class="cascader-col dept-col" scroll-y>
<view
v-for="(dept, index) in deptList"
:key="dept.deptId"
:class="['cascader-item', { active: activeDeptIndex === index }]"
@click="activeDeptIndex = index"
>
<text class="cascader-item-text">{{ dept.deptName }}</text>
<text v-if="deptHasSelectedUser(dept)" class="dept-dot"></text>
</view>
</scroll-view>
<scroll-view class="cascader-col user-col" scroll-y :key="'dept-users-' + activeDeptIndex">
<view v-if="currentDeptUsers.length === 0" class="empty-tip">该部门暂无人员</view>
<view v-else>
<view
class="user-item"
v-for="user in currentDeptUsers"
:key="'user-' + user.userId"
:class="{ active: String(userPickerSelectedId) === String(user.userId) }"
@click="onUserItemClick(user.userId)"
>
<text class="user-item-text">{{ formatUserDisplayName(user) }}</text>
<text v-if="String(userPickerSelectedId) === String(user.userId)" class="cuIcon-check text-blue"></text>
</view>
</view>
</scroll-view>
</view>
<view class="popup-footer">
<button class="btn-cancel" @click="cancelUserSelect">取消</button>
<button class="btn-confirm bg-blue" @click="confirmUserSelect">确定</button>
</view>
</view>
</u-popup>
<view class="flex margin-bottom margin-top">
<view class="text-gray">整改期限</view>
@@ -49,7 +91,7 @@
</template>
<script setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { ref, computed, watch, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDepartmentPersonUsers,assignHiddenDanger } from '@/request/api.js';
@@ -58,11 +100,63 @@
const assignId = ref('');
// 整改人员选择
const showUserPicker = ref(false);
const showUserPopup = ref(false);
const selectedUser = ref('');
const selectedUserId = ref('');
const userColumns = ref([['暂无数据']]);
const userList = ref([]); // 存储完整用户数据
const deptList = ref([]);
const activeDeptIndex = ref(0);
const userPickerSelectedId = ref('');
const formatUserDisplayName = (user) => {
if (user.postName) {
return `${user.nickName}_${user.postName}`;
}
return user.nickName || '';
};
const currentDeptUsers = computed(() => {
const dept = deptList.value[activeDeptIndex.value];
return dept?.users || [];
});
const userPickerSelectedText = computed(() => {
if (!userPickerSelectedId.value) return '';
for (const dept of deptList.value) {
const user = (dept.users || []).find((u) => String(u.userId) === String(userPickerSelectedId.value));
if (user) return formatUserDisplayName(user);
}
return '';
});
const deptHasSelectedUser = (dept) => {
if (!userPickerSelectedId.value || !dept.users?.length) return false;
return dept.users.some((user) => String(user.userId) === String(userPickerSelectedId.value));
};
const onUserItemClick = (userId) => {
userPickerSelectedId.value = String(userId);
};
const openUserPopup = () => {
userPickerSelectedId.value = selectedUserId.value;
const firstDeptWithUsers = deptList.value.findIndex((dept) => dept.users?.length > 0);
activeDeptIndex.value = firstDeptWithUsers >= 0 ? firstDeptWithUsers : 0;
showUserPopup.value = true;
};
const cancelUserSelect = () => {
showUserPopup.value = false;
};
const confirmUserSelect = () => {
if (!userPickerSelectedId.value) {
uni.showToast({ title: '请选择整改责任人', icon: 'none' });
return;
}
selectedUserId.value = String(userPickerSelectedId.value);
selectedUser.value = userPickerSelectedText.value;
showUserPopup.value = false;
};
// 整改期限选择
const showDatePicker = ref(false);
@@ -74,41 +168,14 @@
try {
const res = await getDepartmentPersonUsers();
if (res.code === 0 && res.data) {
const users = [];
res.data.forEach(dept => {
if (dept.users && dept.users.length > 0) {
dept.users.forEach(user => {
users.push({
id: String(user.userId),
name: `${user.nickName}${dept.deptName}`
});
});
}
});
userList.value = users;
// 转换为 picker 需要的格式
userColumns.value = [users.map(u => u.name)];
console.log('整改人员列表:', users);
deptList.value = res.data;
console.log('部门人员树:', deptList.value);
}
} catch (error) {
console.error('获取部门人员失败:', error);
}
};
// 人员选择确认
const onUserConfirm = (e) => {
console.log('选择的人员:', e);
if (e.value && e.value.length > 0) {
selectedUser.value = e.value[0];
// 找到对应的用户ID
const user = userList.value.find(u => u.name === e.value[0]);
if (user) {
selectedUserId.value = user.id;
}
}
showUserPicker.value = false;
};
// 日期时间选择确认
const onDateConfirm = (e) => {
console.log('选择的日期时间:', e);
@@ -280,6 +347,194 @@
color: #333;
}
}
.select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
padding: 20rpx 24rpx;
margin-bottom: 20rpx;
.select-content {
flex: 1;
font-size: 28rpx;
color: #333;
}
}
.user-popup {
background: #fff;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
.popup-title {
font-size: 32rpx;
color: #333;
}
.popup-close {
font-size: 40rpx;
color: #999;
line-height: 1;
}
}
&.cascader-user-popup {
.selected-summary {
padding: 16rpx 30rpx;
background: #f5f7fa;
border-bottom: 1rpx solid #eee;
font-size: 24rpx;
line-height: 1.5;
.summary-label {
color: #909399;
}
.summary-text {
color: #333;
}
}
.cascader-body {
display: flex;
height: 600rpx;
}
.cascader-col {
height: 600rpx;
box-sizing: border-box;
}
.dept-col {
width: 38%;
background: #f7f8fa;
border-right: 1rpx solid #eee;
}
.user-col {
width: 62%;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.cascader-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx 24rpx;
font-size: 28rpx;
color: #333;
border-bottom: 1rpx solid #eef0f3;
&.active {
background: #fff;
color: #2667E9;
font-weight: 600;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6rpx;
background: #2667E9;
}
}
}
.cascader-item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dept-dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #2667E9;
margin-left: 8rpx;
flex-shrink: 0;
}
.empty-tip {
padding: 80rpx 20rpx;
text-align: center;
color: #909399;
font-size: 26rpx;
}
}
.user-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&.active {
.user-item-text {
color: #2667E9;
font-weight: 600;
}
}
.user-item-text {
flex: 1;
font-size: 28rpx;
color: #333;
}
}
.popup-footer {
display: flex;
gap: 24rpx;
padding: 24rpx 30rpx;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
background: #fff;
button {
flex: 1;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
font-size: 30rpx;
margin: 0;
padding: 0;
&::after {
border: none;
}
}
.btn-cancel {
background: #fff;
color: #2667E9;
border: 2rpx solid #2667E9;
}
.btn-confirm {
color: #fff;
border: none;
}
}
}
.btn-group {
display: flex;

File diff suppressed because it is too large Load Diff

View File

@@ -1,75 +1,100 @@
<template>
<view class="padding page">
<view class="padding bg-white radius">
<view class="flex">
<view class="text-gray">隐患图片/视频</view>
<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">
<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>
<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 class="text-gray text-sm margin-top-xs">必填请上传现场照片作为隐患证据</view>
</view>
<view class="flex margin-bottom">
<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="true" disabledColor="#F6F6F6" border="surround"/>
<view class="margin-bottom text-gray text-sm margin-top-xs" >请用简洁的语言概括隐患要点</view>
<view class="flex margin-bottom">
<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-3" style="gap: 10rpx;">
<view :class="detailData.level === 1 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">轻微隐患</view>
<view :class="detailData.level === 2 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">一般隐患</view>
<view :class="detailData.level === 3 ? 'bg-blue light' : 'bg-gray'" style="padding: 16rpx 40rpx;">重大隐患</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="text-gray text-sm margin-top-xs margin-bottom">请用隐患可能造成的危害程度选择等级</view>
<view class="flex">
<view class="flex margin-bottom margin-top">
<view class="text-gray">隐患位置</view>
<view class="text-red">*</view>
</view>
<view class="address-box margin-top-sm margin-bottom-sm">
<input
class="address-input"
v-model="detailData.address"
placeholder="暂无地址"
disabled
/>
<button class="address-btn bg-blue">选择地址</button>
<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="text-gray text-sm">办公楼3层东侧消防通道生产车间A区设备旁等或点击"选择地址"按钮在地图上选择</view>
<!-- 隐患区域 -->
<view class="text-gray margin-top margin-bottom">隐患区域</view>
<view class="bg-gray padding radius">{{ detailData.areaName || '暂无' }}</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></up-textarea>
<view class="text-gray text-sm margin-top-xs margin-bottom">请详细说明隐患现状潜在风险及影响范围</view>
<view class="text-gray margin-bottom">隐患来源</view>
<view class="bg-gray padding radius">{{ detailData.source || '暂无' }}</view>
<view class="text-gray margin-top margin-bottom">创建时间</view>
<view class="bg-gray padding radius">{{ detailData.createdAt || '暂无' }}</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>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHiddenDangerDetail } from '@/request/api.js'
import { toImageUrl } from '@/request/request.js'
// 详情数据
const detailData = reactive({
hazardId: '',
assignId: '',
@@ -79,69 +104,47 @@
source: '',
description: '',
address: '',
areaName: '', // 隐患区域名称
createdAt: '',
areaName: '',
areaColor: '',
tagName: '',
legalBasis: '',
regulationName: '',
attachments: []
});
// 整改附件(单独存储)
const rectifyAttachments = ref([]);
// 获取完整图片路径
const getFullPath = (filePath) => {
return toImageUrl(filePath);
};
// 图片预览 - 隐患图片
})
const legalBasisText = computed(() => detailData.legalBasis || detailData.regulationName || '')
const getFullPath = (filePath) => toImageUrl(filePath)
const previewHazardImage = (index) => {
if (!detailData.attachments || detailData.attachments.length === 0) return;
const urls = detailData.attachments.map(item => getFullPath(item.filePath));
if (!detailData.attachments || detailData.attachments.length === 0) return
uni.previewImage({
current: index,
urls: urls
});
};
// 图片预览 - 整改图片
const previewRectifyImage = (index) => {
const urls = rectifyAttachments.value.map(item => getFullPath(item.filePath));
uni.previewImage({
current: index,
urls: urls
});
};
// 获取隐患详情
urls: detailData.attachments.map(item => getFullPath(item.filePath))
})
}
const fetchDetail = async (hazardId, assignId) => {
try {
const res = await getHiddenDangerDetail({ hazardId, assignId });
const params = { hazardId }
if (assignId) params.assignId = assignId
const res = await getHiddenDangerDetail(params)
if (res.code === 0 && res.data) {
Object.assign(detailData, res.data);
console.log('隐患详情数据:', res.data);
console.log('隐患附件:', res.data.attachments);
// 提取整改附件assigns[0].rectify.attachments
if (res.data.assigns && res.data.assigns.length > 0) {
const assign = res.data.assigns[0];
if (assign.rectify && assign.rectify.attachments) {
rectifyAttachments.value = assign.rectify.attachments;
console.log('整改附件:', rectifyAttachments.value);
}
}
Object.assign(detailData, res.data)
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
}
} catch (error) {
console.error('获取隐患详情失败:', error);
uni.showToast({ title: '请求失败', icon: 'none' });
console.error('获取隐患详情失败:', error)
uni.showToast({ title: '请求失败', icon: 'none' })
}
};
}
onLoad((options) => {
if (options.hazardId && options.assignId) {
fetchDetail(options.hazardId, options.assignId);
if (options.hazardId) {
fetchDetail(options.hazardId, options.assignId)
}
});
})
</script>
<style lang="scss" scoped>
@@ -149,30 +152,45 @@
min-height: 100vh;
background: #EBF2FC;
}
.address-box {
display: flex;
align-items: center;
gap: 20rpx;
}
.address-input {
flex: 1;
height: 80rpx;
background: #F6F6F6;
border-radius: 12rpx;
padding: 0 24rpx;
.read-only-box {
background: #f5f5f5;
border-radius: 8rpx;
padding: 20rpx 24rpx;
font-size: 28rpx;
color: #333;
}
.address-btn {
flex-shrink: 0;
height: 80rpx;
line-height: 80rpx;
padding: 0 32rpx;
border-radius: 12rpx;
.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;
color: #fff;
}
.area-color-dot {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
margin-right: 16rpx;
flex-shrink: 0;
}
</style>