一单四制优化及加入工作流

components/flow/FlowAssigneePickerPopup.vue

@@ -0,0 +1,228 @@
+<template>
+	<u-popup :show="show" mode="bottom" round="20" @close="handleCancel">
+		<view class="user-popup">
+			<view class="popup-header">
+				<view class="popup-title text-bold">选择下一步处理人</view>
+				<view class="popup-close" @click="handleCancel">×</view>
+			</view>
+			<view v-if="pickerIdentityId" class="selected-summary">
+				<text class="summary-label">已选：</text>
+				<text class="summary-text">{{ pickerDisplayName }}</text>
+			</view>
+			<scroll-view class="user-list-scroll" scroll-y>
+				<view v-if="loading" class="empty-tip">加载中...</view>
+				<view v-else-if="!taskId" class="empty-tip">缺少任务ID，无法加载处理人</view>
+				<view v-else-if="deptTree.length === 0" class="empty-tip">暂无人员数据</view>
+				<FlowAssigneeTree
+					v-else
+					:depts="deptTree"
+					:selected-identity-id="pickerIdentityId"
+					@select="handleUserSelect"
+				/>
+			</scroll-view>
+			<view class="popup-footer">
+				<button class="btn-cancel" @click="handleCancel">取消</button>
+				<button class="btn-confirm bg-blue" @click="handleConfirm">确定</button>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { getFlowApproverCandidates } from '@/request/api.js';
+import FlowAssigneeTree from './FlowAssigneeTree.vue';
+import {
+	findAssigneeUserInDeptTree,
+	formatAssigneeDisplayName,
+	normalizeApproverDeptTree,
+	resolveAssigneeIdentityId
+} from './flowAssigneeUtils.js';
+
+const props = defineProps({
+	show: {
+		type: Boolean,
+		default: false
+	},
+	taskId: {
+		type: String,
+		default: ''
+	},
+	pickerIdentityId: {
+		type: String,
+		default: ''
+	},
+	pickerName: {
+		type: String,
+		default: ''
+	}
+});
+
+const emit = defineEmits(['update:pickerIdentityId', 'update:pickerName', 'cancel', 'confirm']);
+
+const loading = ref(false);
+const deptTree = ref([]);
+const localPickerIdentityId = ref('');
+const localPickerName = ref('');
+
+const pickerDisplayName = computed(() => {
+	const user = findAssigneeUserInDeptTree(deptTree.value, localPickerIdentityId.value);
+	return user ? formatAssigneeDisplayName(user) : localPickerName.value;
+});
+
+const syncLocalPicker = () => {
+	localPickerIdentityId.value = props.pickerIdentityId || '';
+	localPickerName.value = props.pickerName || '';
+};
+
+const fetchAssigneeTree = async () => {
+	if (!props.taskId) {
+		deptTree.value = [];
+		return;
+	}
+	loading.value = true;
+	try {
+		const res = await getFlowApproverCandidates(props.taskId);
+		if (res.code === 0) {
+			deptTree.value = normalizeApproverDeptTree(res.data);
+		} else {
+			deptTree.value = [];
+			uni.showToast({ title: res.msg || '获取处理人失败', icon: 'none' });
+		}
+	} catch (error) {
+		console.error('获取处理人失败:', error);
+		deptTree.value = [];
+		uni.showToast({ title: '获取处理人失败', icon: 'none' });
+	} finally {
+		loading.value = false;
+	}
+};
+
+watch(
+	() => props.show,
+	async (visible) => {
+		if (!visible) return;
+		syncLocalPicker();
+		await fetchAssigneeTree();
+	}
+);
+
+const handleUserSelect = (user) => {
+	const identityId = resolveAssigneeIdentityId(user);
+	if (!identityId) return;
+	localPickerIdentityId.value = identityId;
+	localPickerName.value = formatAssigneeDisplayName(user);
+	emit('update:pickerIdentityId', identityId);
+	emit('update:pickerName', localPickerName.value);
+};
+
+const handleCancel = () => {
+	emit('cancel');
+};
+
+const handleConfirm = () => {
+	if (!localPickerIdentityId.value) {
+		uni.showToast({ title: '请选择下一步处理人', icon: 'none' });
+		return;
+	}
+	const user = findAssigneeUserInDeptTree(deptTree.value, localPickerIdentityId.value);
+	if (!user) {
+		uni.showToast({ title: '所选身份无效，请重新选择', icon: 'none' });
+		return;
+	}
+	const name = formatAssigneeDisplayName(user);
+	emit('update:pickerIdentityId', localPickerIdentityId.value);
+	emit('update:pickerName', name);
+	emit('confirm', {
+		identityId: localPickerIdentityId.value,
+		name,
+		user
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+		}
+	}
+
+	.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;
+		}
+	}
+
+	.user-list-scroll {
+		max-height: 600rpx;
+		box-sizing: border-box;
+	}
+
+	.empty-tip {
+		padding: 80rpx 20rpx;
+		text-align: center;
+		color: #909399;
+		font-size: 26rpx;
+	}
+
+	.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;
+		}
+	}
+}
+</style>

components/flow/FlowAssigneeTree.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="assignee-tree">
+		<template v-for="row in flatRows" :key="row.key">
+			<view
+				v-if="row.type === 'dept'"
+				class="dept-node"
+				:style="{ paddingLeft: `${row.level * 24 + 20}rpx` }"
+			>
+				<text class="dept-name">{{ row.deptName }}</text>
+			</view>
+			<view
+				v-else
+				class="user-item"
+				:class="{ active: String(selectedIdentityId) === String(resolveAssigneeIdentityId(row.user)) }"
+				:style="{ paddingLeft: `${row.level * 24 + 20}rpx` }"
+				@click="handleSelect(row.user)"
+			>
+				<text class="user-item-text">{{ formatAssigneeDisplayName(row.user) }}</text>
+				<text
+					v-if="String(selectedIdentityId) === String(resolveAssigneeIdentityId(row.user))"
+					class="cuIcon-check text-blue"
+				></text>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import {
+	flattenApproverDeptTree,
+	formatAssigneeDisplayName,
+	resolveAssigneeIdentityId
+} from './flowAssigneeUtils.js';
+
+const props = defineProps({
+	depts: {
+		type: Array,
+		default: () => []
+	},
+	selectedIdentityId: {
+		type: String,
+		default: ''
+	}
+});
+
+const emit = defineEmits(['select']);
+
+const flatRows = computed(() => flattenApproverDeptTree(props.depts));
+
+const handleSelect = (user) => {
+	emit('select', user);
+};
+</script>
+
+<style lang="scss" scoped>
+.dept-node {
+	padding: 20rpx 20rpx 12rpx;
+	font-size: 26rpx;
+	color: #909399;
+	line-height: 1.4;
+}
+
+.dept-name {
+	font-weight: 600;
+}
+
+.user-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24rpx 20rpx;
+	border-bottom: 1rpx solid #f5f5f5;
+
+	&.active {
+		.user-item-text {
+			color: #2667E9;
+			font-weight: 600;
+		}
+	}
+
+	.user-item-text {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+	}
+}
+</style>

components/flow/flowAssigneeUtils.js

@@ -0,0 +1,71 @@
+export const resolveAssigneeIdentityId = (user) => {
+	if (!user) return '';
+	const id = user.identityId ?? user.userIdentityId ?? user.userId ?? '';
+	return id === '' || id == null ? '' : String(id);
+};
+
+export const getAssigneeItemKey = (user) => {
+	const identityId = resolveAssigneeIdentityId(user);
+	if (identityId) return `identity-${identityId}`;
+	return `user-${user.userId || user.nickName || ''}`;
+};
+
+export const formatAssigneeDisplayName = (user) => {
+	if (!user) return '';
+	if (user.identityName) {
+		return `${user.nickName || user.userName || ''}_${user.identityName}`;
+	}
+	if (user.postName) {
+		return `${user.nickName || user.userName || ''}_${user.postName}`;
+	}
+	return user.nickName || user.userName || user.name || '未知人员';
+};
+
+export const normalizeApproverDeptTree = (data) => {
+	if (!data) return [];
+	if (Array.isArray(data)) return data;
+	if (Array.isArray(data.records)) return data.records;
+	if (Array.isArray(data.list)) return data.list;
+	return [];
+};
+
+export const findAssigneeUserInDeptTree = (depts, identityId) => {
+	if (!identityId || !Array.isArray(depts)) return null;
+	for (const dept of depts) {
+		const user = (dept.users || []).find(
+			(item) => String(resolveAssigneeIdentityId(item)) === String(identityId)
+		);
+		if (user) return user;
+		if (dept.children?.length) {
+			const found = findAssigneeUserInDeptTree(dept.children, identityId);
+			if (found) return found;
+		}
+	}
+	return null;
+};
+
+/** 将部门树拍平为可渲染行（部门标题 + 人员），避免小程序递归组件不展示子部门 */
+export const flattenApproverDeptTree = (depts, level = 0) => {
+	const rows = [];
+	if (!Array.isArray(depts)) return rows;
+	for (const dept of depts) {
+		rows.push({
+			type: 'dept',
+			key: `dept-${dept.deptId ?? dept.deptName ?? level}`,
+			deptName: dept.deptName || '',
+			level
+		});
+		for (const user of dept.users || []) {
+			rows.push({
+				type: 'user',
+				key: getAssigneeItemKey(user),
+				user,
+				level: level + 1
+			});
+		}
+		if (dept.children?.length) {
+			rows.push(...flattenApproverDeptTree(dept.children, level + 1));
+		}
+	}
+	return rows;
+};

components/hazard/HazardFormPanel.vue

@@ -173,7 +173,7 @@
 					<view class="text-gray">下一步处理人</view>
 					<view class="text-red">*</view>
 				</view>
-				<view class="static-field">部门、企业管理员、企业成员</view>
+				<view class="static-field">管理人员、执行人员</view>
 			</scroll-view>
 		<view :class="pageMode ? 'page-footer' : 'popup-footer'">
 			<button class="btn-cancel" @click="handleClose">取消</button>

components/hazardDetail/HazardDetailPanel.vue

@@ -62,6 +62,10 @@
 					class="node-section"
 					:class="{ 'node-section--last': index === historyList.length - 1 }"
 				>
+					<view
+						class="detail-card-shell"
+						:class="{ 'detail-card-shell--active': activeIndex === index }"
+					>
 					<view class="detail-card">
 							<view class="card-header">
 								<!-- <text class="card-node-name">{{ item.nodeName }}</text> -->
@@ -320,6 +324,7 @@
 								</block>
 							</view>
 						</view>
+					</view>
 				</view>
 			</scroll-view>
 		</view>
@@ -624,6 +629,23 @@ const previewImages = (attachments, index) => {
 	margin-bottom: 0;
 }
 
+.detail-card-shell {
+	border-radius: 22rpx;
+	padding: 2rpx;
+	background: transparent;
+	transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.detail-card-shell--active {
+	background: linear-gradient(
+		145deg,
+		rgba(4, 108, 234, 0.48) 0%,
+		rgba(38, 103, 233, 0.3) 50%,
+		rgba(33, 88, 200, 0.16) 100%
+	);
+	box-shadow: 0 8rpx 24rpx rgba(38, 103, 233, 0.12);
+}
+
 .detail-card {
 	background: #fff;
 	border-radius: 16rpx;

components/hazardDetail/HazardDetailPanelV2.vue

@@ -62,6 +62,10 @@
 					class="node-section"
 					:class="{ 'node-section--last': index === historyList.length - 1 }"
 				>
+					<view
+						class="detail-card-shell"
+						:class="{ 'detail-card-shell--active': activeIndex === index }"
+					>
 					<view class="detail-card">
 						<view class="card-header-v2">
 							<view class="card-header-main">
@@ -328,6 +332,7 @@
 								</block>
 							</view>
 						</view>
+					</view>
 				</view>
 			</scroll-view>
 		</view>
@@ -552,6 +557,23 @@ const previewImages = (attachments, index) => {
 	margin-bottom: 0;
 }
 
+.detail-card-shell {
+	border-radius: 22rpx;
+	padding: 2rpx;
+	background: transparent;
+	transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.detail-card-shell--active {
+	background: linear-gradient(
+		145deg,
+		rgba(4, 108, 234, 0.48) 0%,
+		rgba(38, 103, 233, 0.3) 50%,
+		rgba(33, 88, 200, 0.16) 100%
+	);
+	box-shadow: 0 8rpx 24rpx rgba(38, 103, 233, 0.12);
+}
+
 .detail-card {
 	background: #fff;
 	border-radius: 20rpx;

components/hazardDetail/HazardProcessChainPanel.vue

@@ -0,0 +1,787 @@
+<template>
+	<view class="hazard-process-chain-panel">
+		<view v-if="loading" class="loading-wrap">
+			<text class="loading-text">{{ labels.loading }}</text>
+		</view>
+
+		<view v-else-if="historyList.length === 0" class="empty-wrap">
+			<text class="empty-text">{{ labels.empty }}</text>
+		</view>
+
+		<view v-else class="detail-body" :style="detailBodyStyle">
+			<scroll-view
+				class="steps-card"
+				scroll-y
+				:style="scrollAreaStyle"
+				:show-scrollbar="false"
+				:scroll-into-view="stepScrollIntoView"
+				:scroll-with-animation="true"
+			>
+				<view
+					v-for="(item, index) in historyList"
+					:key="'step-' + index"
+					:id="'process-step-' + index"
+					class="step-item"
+					:class="{ 'step-item--active': activeIndex === index }"
+					@tap="scrollToNode(index)"
+				>
+					<view class="step-track">
+						<view
+							class="step-dot"
+							:class="{ 'step-dot--active': activeIndex === index }"
+						>
+							<image
+								class="step-icon"
+								:src="getProcessStepIconPath(item, activeIndex === index)"
+								mode="aspectFit"
+							/>
+						</view>
+						<text
+							class="step-label"
+							:class="{ 'step-label--active': activeIndex === index }"
+						>{{ item.nodeName }}</text>
+						<view v-if="index < historyList.length - 1" class="step-line"></view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<scroll-view
+				class="content-column content-scroll"
+				scroll-y
+				:style="scrollAreaStyle"
+				:show-scrollbar="false"
+				:scroll-into-view="contentScrollIntoView"
+				:scroll-with-animation="scrollWithAnimation"
+				@scroll="onContentScroll"
+				@scrolltolower="onScrollToLower"
+			>
+				<view
+					v-for="(item, index) in historyList"
+					:key="'node-' + index"
+					:id="'process-node-' + index"
+					class="node-section"
+					:class="{ 'node-section--last': index === historyList.length - 1 }"
+				>
+					<view
+						class="detail-card-shell"
+						:class="{ 'detail-card-shell--active': activeIndex === index }"
+					>
+					<view class="detail-card">
+						<view class="card-header-v2">
+							<view class="card-header-main">
+								<text class="operator">{{ item.titlePrefix }}{{ labels.personnelSuffix }}{{ fieldText(item, item.operator) }}</text>
+								<text class="time">{{ fieldText(item, item.time) }}</text>
+							</view>
+							<view
+								v-if="item.type === 'add' && item.content.levelName"
+								:class="['level-badge', getLevelTagClass(item.content)]"
+							>
+								{{ item.content.levelName }}
+							</view>
+						</view>
+						<view class="card-divider"></view>
+
+						<view class="card-body">
+							<block v-if="item.type === 'add'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardCode }}</text>
+									<text class="value">{{ fieldText(item, item.content.code) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardTitle }}</text>
+									<text class="value">{{ fieldText(item, item.content.title) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.checkSource }}</text>
+									<text class="value">{{ fieldText(item, item.content.source) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardSource }}</text>
+									<text class="value">{{ fieldText(item, item.content.hazardSourceName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardArea }}</text>
+									<text class="value">{{ fieldText(item, item.content.areaName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.address }}</text>
+									<text class="value">{{ fieldText(item, item.content.address) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardLevel }}</text>
+									<view class="value">
+										<view :class="['level-tag', getLevelTagClass(item.content)]">
+											{{ fieldText(item, item.content.levelName) }}
+										</view>
+									</view>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.hazardTag }}</text>
+									<text class="value">{{ fieldText(item, item.content.tagName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.description }}</text>
+									<text class="value">{{ fieldText(item, item.content.description) }}</text>
+								</view>
+								<view
+									v-if="(item.content.attachments && item.content.attachments.length) || !item.completed"
+									class="detail-row-v2 detail-row-v2--block"
+								>
+									<text class="label">{{ labels.hazardAttachments }}</text>
+									<view v-if="item.content.attachments && item.content.attachments.length" class="attachment-list">
+										<image
+											v-for="(file, idx) in item.content.attachments"
+											:key="idx"
+											class="attachment-img"
+											:src="resolveFileUrl(file.filePath)"
+											mode="aspectFill"
+											@tap="previewImages(item.content.attachments, idx)"
+											@load="scheduleMeasureLayout"
+										/>
+									</view>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.legalBasis }}</text>
+									<text class="value">{{ fieldText(item, item.content.legalBasis) }}</text>
+								</view>
+							</block>
+
+							<block v-else-if="item.type === 'assign'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.assigneeName }}</text>
+									<text class="value">{{ fieldText(item, item.content.assigneeName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.assignDeadline }}</text>
+									<text class="value">{{ fieldText(item, item.content.deadline) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.assignStatus }}</text>
+									<text class="value">{{ fieldText(item, item.content.assignStatusName) }}</text>
+								</view>
+							</block>
+
+							<block v-else-if="item.type === 'rectify'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.rectifyStatus }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectifyStatusName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.rectifyPlan }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectifyPlan) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.rectifyResult }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectifyResult) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.rectifyMeasures }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectificationMeasures) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.controlMeasures }}</text>
+									<text class="value">{{ fieldText(item, item.content.controlMeasures) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.rectifierName }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectifierName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.managerNames }}</text>
+									<text class="value">{{ fieldText(item, item.content.managerNames) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.memberNames }}</text>
+									<text class="value">{{ fieldText(item, item.content.memberNames) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.planCost }}</text>
+									<text class="value">{{ formatCost(item.content.planCost, item.completed) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.actualCost }}</text>
+									<text class="value">{{ formatCost(item.content.actualCost, item.completed) }}</text>
+								</view>
+								<view
+									v-if="(item.content.attachments && item.content.attachments.length) || !item.completed"
+									class="detail-row-v2 detail-row-v2--block"
+								>
+									<text class="label">{{ labels.rectifyAttachments }}</text>
+									<view v-if="item.content.attachments && item.content.attachments.length" class="attachment-list">
+										<template v-for="(file, idx) in item.content.attachments" :key="idx">
+											<image
+												v-if="file.fileType === 'image' || !file.fileType"
+												class="attachment-img"
+												:src="resolveFileUrl(file.filePath)"
+												mode="aspectFill"
+												@tap="previewImages(item.content.attachments, idx)"
+												@load="scheduleMeasureLayout"
+											/>
+											<text v-else class="file-link">{{ file.fileName || labels.attachmentFallback }}</text>
+										</template>
+									</view>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+								<view v-if="item.content.signPath || !item.completed" class="detail-row-v2 detail-row-v2--block">
+									<text class="label">{{ labels.rectifySign }}</text>
+									<image
+										v-if="item.content.signPath"
+										class="sign-img"
+										:src="resolveFileUrl(item.content.signPath)"
+										mode="aspectFit"
+										@tap="previewSingle(item.content.signPath)"
+										@load="scheduleMeasureLayout"
+									/>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+							</block>
+
+							<block v-else-if="item.type === 'verify' || item.type === 'writeoff_approve'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.verifyResult }}</text>
+									<text
+										v-if="item.completed && item.content.resultName"
+										class="result-tag"
+										:class="item.content.resultName === labels.pass ? 'result-tag--pass' : 'result-tag--fail'"
+									>
+										{{ item.content.resultName }}
+									</text>
+									<text v-else class="value value--pending">{{ fieldText(item, item.content.resultName) }}</text>
+								</view>
+								<view v-if="item.content.remark || !item.completed" class="detail-row-v2">
+									<text class="label">{{ labels.verifyRemark }}</text>
+									<text class="value">{{ fieldText(item, item.content.remark) }}</text>
+								</view>
+								<view
+									v-if="(item.content.attachments && item.content.attachments.length) || !item.completed"
+									class="detail-row-v2 detail-row-v2--block"
+								>
+									<text class="label">{{ labels.verifyAttachments }}</text>
+									<view v-if="item.content.attachments && item.content.attachments.length" class="attachment-list">
+										<template v-for="(file, idx) in item.content.attachments" :key="idx">
+											<image
+												v-if="file.fileType === 'image' || !file.fileType"
+												class="attachment-img"
+												:src="resolveFileUrl(file.filePath)"
+												mode="aspectFill"
+												@tap="previewImages(item.content.attachments, idx)"
+												@load="scheduleMeasureLayout"
+											/>
+											<text v-else class="file-link">{{ file.fileName || labels.attachmentFallback }}</text>
+										</template>
+									</view>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+								<view v-if="item.content.signPath || !item.completed" class="detail-row-v2 detail-row-v2--block">
+									<text class="label">{{ labels.verifySign }}</text>
+									<image
+										v-if="item.content.signPath"
+										class="sign-img"
+										:src="resolveFileUrl(item.content.signPath)"
+										mode="aspectFit"
+										@tap="previewSingle(item.content.signPath)"
+										@load="scheduleMeasureLayout"
+									/>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+							</block>
+
+							<block v-else-if="item.type === 'writeoff_apply'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.writeoffDeadline }}</text>
+									<text class="value">{{ fieldText(item, item.content.rectifyDeadline) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.responsibleDept }}</text>
+									<text class="value">{{ fieldText(item, item.content.responsibleDeptName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.responsiblePerson }}</text>
+									<text class="value">{{ fieldText(item, item.content.responsiblePerson) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.mainTreatment }}</text>
+									<text class="value">{{ fieldText(item, item.content.mainTreatmentContent) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.treatmentResult }}</text>
+									<text class="value">{{ fieldText(item, item.content.treatmentResult) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.selfVerify }}</text>
+									<text class="value">{{ fieldText(item, item.content.selfVerifyContent) }}</text>
+								</view>
+								<view v-if="item.content.signPath || !item.completed" class="detail-row-v2 detail-row-v2--block">
+									<text class="label">{{ labels.applySign }}</text>
+									<image
+										v-if="item.content.signPath"
+										class="sign-img"
+										:src="resolveFileUrl(item.content.signPath)"
+										mode="aspectFit"
+										@tap="previewSingle(item.content.signPath)"
+										@load="scheduleMeasureLayout"
+									/>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+							</block>
+
+							<block v-else-if="item.type === 'approval'">
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.approvalOpinion }}</text>
+									<text
+										v-if="item.completed && item.content.approveTypeName"
+										class="result-tag"
+										:class="item.content.pass ? 'result-tag--pass' : 'result-tag--fail'"
+									>
+										{{ item.content.approveTypeName }}
+									</text>
+									<text v-else class="value value--pending">{{ fieldText(item, item.content.approveTypeName) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.approvalComment }}</text>
+									<text class="value" :class="{ 'value--pending': isPendingText(item, item.content.comment) }">{{ fieldText(item, item.content.comment) }}</text>
+								</view>
+								<view class="detail-row-v2">
+									<text class="label">{{ labels.smsReminder }}</text>
+									<text class="value">
+										<template v-if="item.content.sendMsgFlag != null">{{ item.content.sendMsgFlag ? labels.yes : labels.no }}</template>
+										<text v-else class="value--pending">{{ fieldText(item, '') }}</text>
+									</text>
+								</view>
+								<view v-if="item.content.signPath || !item.completed" class="detail-row-v2 detail-row-v2--block">
+									<text class="label">{{ labels.approvalSign }}</text>
+									<image
+										v-if="item.content.signPath"
+										class="sign-img"
+										:src="resolveFileUrl(item.content.signPath)"
+										mode="aspectFit"
+										@tap="previewSingle(item.content.signPath)"
+										@load="scheduleMeasureLayout"
+									/>
+									<text v-else class="value value--pending">{{ fieldText(item, '') }}</text>
+								</view>
+							</block>
+						</view>
+					</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, toRefs, watch } from 'vue';
+import { toImageUrl } from '@/request/request.js';
+import { getProcessStepIconPath, PENDING_LABEL, resolveFieldDisplay } from './processChain.js';
+import { CHAIN_LABELS, LEVEL_NAME_CLASS_MAP } from './processChainLabels.js';
+import { useProcessChainScroll } from './useProcessChainScroll.js';
+
+const labels = CHAIN_LABELS;
+
+const props = defineProps({
+	chainData: {
+		type: Object,
+		default: () => ({})
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	bodyHeight: {
+		type: Number,
+		default: 0
+	}
+});
+
+const { chainData, loading } = toRefs(props);
+
+const {
+	historyList,
+	activeIndex,
+	contentScrollIntoView,
+	stepScrollIntoView,
+	scrollWithAnimation,
+	onContentScroll,
+	onScrollToLower,
+	scrollToNode,
+	scheduleMeasureLayout
+} = useProcessChainScroll(chainData, loading);
+
+const scrollAreaStyle = computed(() => {
+	const height = props.bodyHeight > 0 ? props.bodyHeight : 400;
+	return { height: `${height}px` };
+});
+
+const detailBodyStyle = computed(() => {
+	const height = props.bodyHeight > 0 ? props.bodyHeight : 400;
+	return { height: `${height}px` };
+});
+
+watch(
+	() => props.bodyHeight,
+	(height) => {
+		if (height > 0) {
+			scheduleMeasureLayout();
+			setTimeout(scheduleMeasureLayout, 100);
+		}
+	}
+);
+
+const LEVEL_CLASS_MAP = {
+	2: 'level-normal',
+	3: 'level-major'
+};
+
+const getLevelTagClass = (content) => {
+	const level = content?.level;
+	const levelName = content?.levelName;
+	if (level != null && LEVEL_CLASS_MAP[level]) {
+		return LEVEL_CLASS_MAP[level];
+	}
+	if (levelName && LEVEL_NAME_CLASS_MAP[levelName]) {
+		return LEVEL_NAME_CLASS_MAP[levelName];
+	}
+	return '';
+};
+
+const resolveFileUrl = (path) => toImageUrl(path);
+
+const fieldText = (item, value) => resolveFieldDisplay(value, item.completed);
+
+const isPendingText = (item, value) => fieldText(item, value) === PENDING_LABEL;
+
+const formatCost = (cost, completed = true) => {
+	if (cost == null || cost === '') return resolveFieldDisplay('', completed);
+	const num = Number(cost);
+	if (Number.isNaN(num)) return resolveFieldDisplay('', completed);
+	return `${num} ${labels.yuan}`;
+};
+
+const previewSingle = (path) => {
+	const url = resolveFileUrl(path);
+	if (!url) return;
+	uni.previewImage({ current: url, urls: [url] });
+};
+
+const previewImages = (attachments, index) => {
+	const urls = (attachments || [])
+		.filter((f) => f.fileType === 'image' || !f.fileType)
+		.map((f) => resolveFileUrl(f.filePath))
+		.filter(Boolean);
+	if (!urls.length) return;
+	uni.previewImage({ current: urls[index] || urls[0], urls });
+};
+</script>
+
+<style lang="scss" scoped>
+.hazard-process-chain-panel {
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.loading-wrap,
+.empty-wrap {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 0;
+}
+
+.loading-text,
+.empty-text {
+	font-size: 28rpx;
+	color: #909399;
+}
+
+.detail-body {
+	display: flex;
+	gap: 20rpx;
+	align-items: stretch;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+
+.steps-card {
+	width: 148rpx;
+	flex-shrink: 0;
+	background: #fff;
+	border-radius: 20rpx;
+	box-sizing: border-box;
+}
+
+.step-item {
+	padding: 0 8rpx;
+}
+
+.step-track {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 24rpx 0 0;
+}
+
+.step-dot {
+	width: 66rpx;
+	height: 66rpx;
+	border-radius: 50%;
+	background: #f3f3f3;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.2s;
+}
+
+.step-dot--active {
+	background: #2667e9;
+}
+
+.step-icon {
+	width: 36rpx;
+	height: 36rpx;
+}
+
+.step-label {
+	margin-top: 10rpx;
+	font-size: 20rpx;
+	color: #999;
+	line-height: 1.3;
+	text-align: center;
+	word-break: break-all;
+}
+
+.step-label--active {
+	color: #2667e9;
+	font-weight: 600;
+}
+
+.step-line {
+	width: 0;
+	height: 36rpx;
+	margin: 8rpx 0;
+	border-left: 2rpx dashed #dcdfe6;
+}
+
+.content-column {
+	flex: 1;
+	width: 0;
+	min-height: 0;
+	box-sizing: border-box;
+}
+
+.content-scroll {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.node-section {
+	box-sizing: border-box;
+	padding: 0;
+	margin-bottom: 24rpx;
+}
+
+.node-section--last {
+	padding-bottom: 40rpx;
+	margin-bottom: 0;
+}
+
+.detail-card-shell {
+	border-radius: 22rpx;
+	padding: 2rpx;
+	background: transparent;
+	transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.detail-card-shell--active {
+	background: linear-gradient(
+		145deg,
+		rgba(4, 108, 234, 0.48) 0%,
+		rgba(38, 103, 233, 0.3) 50%,
+		rgba(33, 88, 200, 0.16) 100%
+	);
+	box-shadow: 0 8rpx 24rpx rgba(38, 103, 233, 0.12);
+}
+
+.detail-card {
+	background: #fff;
+	border-radius: 20rpx;
+	overflow: hidden;
+	padding: 28rpx 38rpx;
+	box-sizing: border-box;
+}
+
+.card-header-v2 {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16rpx;
+	padding: 0;
+}
+
+.card-header-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.operator {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #303133;
+	line-height: 1.5;
+	word-break: break-all;
+}
+
+.time {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 24rpx;
+	color: #999;
+	line-height: 1.4;
+}
+
+.level-badge {
+	flex-shrink: 0;
+	padding: 6rpx 16rpx;
+	border-radius: 8rpx;
+	font-size: 22rpx;
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+.level-badge.level-normal {
+	background: #fff7e6;
+	border: 2rpx solid #ffd591;
+	color: #fa8c16;
+}
+
+.level-badge.level-major {
+	background: #fff1f0;
+	border: 2rpx solid #ffa39e;
+	color: #f5222d;
+}
+
+.card-divider {
+	height: 0;
+	margin: 20rpx 0;
+	border-top: 2rpx dashed #eee;
+}
+
+.card-body {
+	padding: 0;
+}
+
+.detail-row-v2 {
+	display: flex;
+	align-items: flex-start;
+	justify-content: flex-start;
+	gap: 24rpx;
+	padding: 18rpx 0;
+}
+
+.detail-row-v2--block {
+	flex-wrap: wrap;
+}
+
+.label {
+	flex-shrink: 0;
+	font-size: 26rpx;
+	color: #999;
+	line-height: 1.5;
+}
+
+.value {
+	flex: 1;
+	min-width: 0;
+	font-size: 26rpx;
+	color: #333;
+	line-height: 1.6;
+	text-align: left;
+	word-break: break-all;
+}
+
+.value--pending {
+	color: #e6a23c;
+}
+
+.level-tag {
+	display: inline-flex;
+	align-items: center;
+	padding: 4rpx 16rpx;
+	border-radius: 8rpx;
+	font-size: 24rpx;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+.level-normal {
+	background: #fff7e6;
+	border: 2rpx solid #ffd591;
+	color: #fa8c16;
+}
+
+.level-major {
+	background: #fff1f0;
+	border: 2rpx solid #ffa39e;
+	color: #f5222d;
+}
+
+.attachment-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16rpx;
+	flex: 1;
+	min-width: 0;
+}
+
+.attachment-img {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 12rpx;
+	background: #f5f7fa;
+}
+
+.sign-img {
+	width: 300rpx;
+	height: 160rpx;
+	border: 1rpx solid #e4e7ed;
+	border-radius: 8rpx;
+	background: #fafafa;
+	flex: 1;
+	min-width: 0;
+	max-width: 100%;
+}
+
+.file-link {
+	display: inline-block;
+	padding: 12rpx 20rpx;
+	background: #f5f7fa;
+	border: 1rpx solid #e4e7ed;
+	border-radius: 8rpx;
+	color: #2667e9;
+	font-size: 24rpx;
+}
+
+.result-tag {
+	padding: 6rpx 16rpx;
+	border-radius: 6rpx;
+	font-size: 24rpx;
+}
+
+.result-tag--pass {
+	background: #f0f9eb;
+	color: #67c23a;
+}
+
+.result-tag--fail {
+	background: #fef0f0;
+	color: #f56c6c;
+}
+</style>

components/hazardDetail/processChain.js

@@ -0,0 +1,383 @@
+import { formatNameList } from './hazardDetail.js';
+
+export const PENDING_LABEL = '待处理';
+
+/** completed 未传时视为已完成（兼容旧数据） */
+export const isNodeCompleted = (node) => node?.completed !== false;
+
+/** 空值：已完成显示 -，未完成显示待处理 */
+export const resolveFieldDisplay = (value, completed = true) => {
+	if (value != null && value !== '') return value;
+	return completed ? '-' : PENDING_LABEL;
+};
+
+export const PROCESS_NODE_TYPES = {
+	ADD: 'add',
+	ASSIGN: 'assign',
+	RECTIFY: 'rectify',
+	RECTIFY_ASSIGN: 'rectifyAssign',
+	VERIFY: 'verify',
+	VERIFY_SUB: 'verify_sub',
+	WRITEOFF_APPLY: 'writeoff_apply',
+	WRITEOFF_APPROVE: 'writeoff_approve',
+	WRITEOFF_SUB: 'writeoff_sub',
+	APPROVAL: 'approval'
+};
+
+const SUB_TYPE_SUFFIX_MAP = {
+	verify: '验收',
+	writeoff: '销号'
+};
+
+const TITLE_PREFIX_MAP = {
+	add: '提交',
+	assign: '交办',
+	rectify: '整改',
+	rectifyAssign: '交办',
+	verify: '验收',
+	verify_sub: '审批',
+	writeoff_apply: '销号申请',
+	writeoff_approve: '销号审核',
+	writeoff_sub: '审批'
+};
+
+const APPROVAL_TASK_KEY_ICON = {
+	department_review: 'bumenshenpi',
+	section_chief_review: 'fenguanshenpi',
+	supervising_executive_review: 'fenguanshenpi',
+	supervising_leader_review_1: 'zhuguanshenpi',
+	supervising_leader_review_2: 'zhuguanshenpi'
+};
+
+const NODE_TYPE_ICON = {
+	add: 'tijiao',
+	assign: 'jiaoban',
+	rectifyAssign: 'jiaoban',
+	rectify: 'zhenggai',
+	verify: 'yanshou',
+	writeoff_apply: 'xiaohao',
+	writeoff_approve: 'xiaohao'
+};
+
+const resolveTaskKey = (node) => {
+	return node?.taskKey || node?.subProcessApprovalInfo?.taskKey || '';
+};
+
+/** null/undefined 等非对象值统一转为 {}，避免默认参数对 null 不生效 */
+const toSafeObject = (value) => (value && typeof value === 'object' ? value : {});
+
+/** null/undefined/空字符串展示为空 */
+const toDisplayText = (value) => {
+	if (value == null || value === '') return '';
+	return value;
+};
+
+export const getProcessStepDisplayName = (node) => {
+	if (!node) return '';
+	const nodeType = node.nodeType;
+	if (nodeType === 'verify_sub' || nodeType === 'writeoff_sub') {
+		const subType = node.subProcessApprovalInfo?.subType;
+		const suffix = SUB_TYPE_SUFFIX_MAP[subType];
+		return suffix ? `${node.nodeName}（${suffix}）` : node.nodeName;
+	}
+	return node.nodeName || '';
+};
+
+export const getProcessStepIconPath = (item, active = false) => {
+	const type = item?.type;
+	const taskKey = item?.taskKey || '';
+	const state = active ? 'selected' : 'unselected';
+
+	if (type === PROCESS_NODE_TYPES.APPROVAL) {
+		const iconBase = APPROVAL_TASK_KEY_ICON[taskKey] || 'bumenshenpi';
+		return `/static/yinhuan_detail/${iconBase}_${state}.png`;
+	}
+
+	const base = NODE_TYPE_ICON[item?.rawType] || NODE_TYPE_ICON[type] || 'tijiao';
+	if (base === 'zhenggai') {
+		return active
+			? '/static/yinhuan_detail/zhenggai_selected.png'
+			: '/static/yinhuan_detail/zhenggai__unselected.png';
+	}
+	return `/static/yinhuan_detail/${base}__${state}.png`;
+};
+
+const resolveOperator = (node, nodeType) => {
+	const completed = isNodeCompleted(node);
+	const fallback = completed ? '-' : '';
+	if (nodeType === PROCESS_NODE_TYPES.ADD) {
+		return node.hazardInfo?.reporterName || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.ASSIGN) {
+		return node.assignInfo?.assignerName || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.RECTIFY) {
+		return node.rectifyInfo?.rectifierName || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.VERIFY || nodeType === PROCESS_NODE_TYPES.WRITEOFF_APPROVE) {
+		return node.verifyInfo?.verifierName || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.WRITEOFF_APPLY) {
+		return node.writeOffApplyInfo?.applicantName || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.APPROVAL) {
+		const info = node.subProcessApprovalInfo || {};
+		return info.operatorName || info.assigneeName || fallback;
+	}
+	return fallback;
+};
+
+const resolveTime = (node, nodeType) => {
+	const completed = isNodeCompleted(node);
+	const fallback = completed ? '-' : '';
+	if (nodeType === PROCESS_NODE_TYPES.ADD) {
+		return node.hazardInfo?.createdAt || node.completedAt || node.occurredAt || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.ASSIGN) {
+		return node.assignInfo?.assignTime || node.completedAt || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.RECTIFY) {
+		return node.rectifyInfo?.rectifyTime || node.completedAt || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.VERIFY || nodeType === PROCESS_NODE_TYPES.WRITEOFF_APPROVE) {
+		return node.verifyInfo?.verifyTime || node.completedAt || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.WRITEOFF_APPLY) {
+		return node.writeOffApplyInfo?.applyTime || node.completedAt || fallback;
+	}
+	if (nodeType === PROCESS_NODE_TYPES.APPROVAL) {
+		return node.subProcessApprovalInfo?.endTime || node.completedAt || fallback;
+	}
+	return node.completedAt || node.occurredAt || fallback;
+};
+
+const mapAddContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		code: toDisplayText(data.code),
+		title: toDisplayText(data.title),
+		source: toDisplayText(data.source),
+		hazardSourceName: toDisplayText(data.hazardSourceName),
+		areaName: toDisplayText(data.areaName),
+		address: toDisplayText(data.address),
+		level: data.level ?? null,
+		levelName: toDisplayText(data.levelName),
+		tagName: toDisplayText(data.tagName),
+		description: toDisplayText(data.description),
+		attachments: Array.isArray(data.attachments) ? data.attachments : [],
+		legalBasis: toDisplayText(data.legalBasis)
+	};
+};
+
+const mapAssignContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		assigneeName: toDisplayText(data.assigneeName),
+		deadline: toDisplayText(data.deadline),
+		assignRemark: toDisplayText(data.assignRemark),
+		assignStatusName: toDisplayText(data.assignStatusName)
+	};
+};
+
+const mapRectifyContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		rectifyStatusName: toDisplayText(data.rectifyStatusName),
+		rectifyPlan: toDisplayText(data.rectifyPlan),
+		rectifyResult: toDisplayText(data.rectifyResult),
+		rectificationMeasures: toDisplayText(data.rectificationMeasures),
+		controlMeasures: toDisplayText(data.controlMeasures),
+		rectifierName: toDisplayText(data.rectifierName),
+		managerNames: formatNameList(data.managerNames, ''),
+		memberNames: formatNameList(data.memberNames, ''),
+		planCost: data.planCost ?? null,
+		actualCost: data.actualCost ?? null,
+		attachments: Array.isArray(data.attachments) ? data.attachments : [],
+		signPath: toDisplayText(data.signPath)
+	};
+};
+
+const mapVerifyContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		resultName: toDisplayText(data.resultName),
+		remark: toDisplayText(data.remark),
+		attachments: Array.isArray(data.attachments) ? data.attachments : [],
+		signPath: toDisplayText(data.signPath)
+	};
+};
+
+const mapApprovalContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		approveTypeName: toDisplayText(data.approveTypeName),
+		pass: data.pass ?? null,
+		comment: toDisplayText(data.comment),
+		nextStepName: toDisplayText(data.nextStepName),
+		nextAssigneeName: toDisplayText(data.nextAssigneeName),
+		sendMsgFlag: data.sendMsgFlag ?? null,
+		signPath: toDisplayText(data.signPath)
+	};
+};
+
+const mapWriteoffApplyContent = (info) => {
+	const data = toSafeObject(info);
+	return {
+		rectifyDeadline: toDisplayText(data.rectifyDeadline),
+		responsibleDeptName: toDisplayText(data.responsibleDeptName),
+		responsiblePerson: toDisplayText(data.responsiblePerson),
+		mainTreatmentContent: toDisplayText(data.mainTreatmentContent),
+		treatmentResult: toDisplayText(data.treatmentResult),
+		selfVerifyContent: toDisplayText(data.selfVerifyContent),
+		signPath: toDisplayText(data.signPath)
+	};
+};
+
+const resolveNodeType = (node) => {
+	const nodeType = node?.nodeType;
+	if (nodeType === 'verify_sub' || nodeType === 'writeoff_sub') {
+		return PROCESS_NODE_TYPES.APPROVAL;
+	}
+	return nodeType || PROCESS_NODE_TYPES.ADD;
+};
+
+const hasRectifyData = (rectifyInfo) => {
+	if (!rectifyInfo || typeof rectifyInfo !== 'object') {
+		return false;
+	}
+	return Boolean(
+		rectifyInfo.rectifyId
+		|| rectifyInfo.rectifyPlan
+		|| rectifyInfo.rectifyResult
+		|| rectifyInfo.rectifyTime
+		|| rectifyInfo.rectifierName
+	);
+};
+
+const hasAssignData = (assignInfo) => {
+	if (!assignInfo || typeof assignInfo !== 'object') {
+		return false;
+	}
+	return Boolean(
+		assignInfo.assignId
+		|| assignInfo.assigneeName
+		|| assignInfo.assignerName
+		|| assignInfo.assignTime
+	);
+};
+
+/** 交办 / 整改转派节点 */
+const isAssignLikeNodeType = (nodeType) => (
+	nodeType === PROCESS_NODE_TYPES.ASSIGN
+	|| nodeType === PROCESS_NODE_TYPES.RECTIFY_ASSIGN
+);
+
+/** 交办/整改节点：有整改数据展示整改，否则有交办数据展示交办 */
+export const resolveAssignRectifyDisplayType = (node) => {
+	if (hasRectifyData(node?.rectifyInfo)) {
+		return PROCESS_NODE_TYPES.RECTIFY;
+	}
+	if (hasAssignData(node?.assignInfo)) {
+		return PROCESS_NODE_TYPES.ASSIGN;
+	}
+	return null;
+};
+
+const resolveDisplayType = (node, nodeType) => {
+	// assign：隐患交办 → assignInfo
+	// rectifyAssign：整改转派 → assignInfo（若同节点附带整改数据则展示整改）
+	if (isAssignLikeNodeType(nodeType)) {
+		return resolveAssignRectifyDisplayType(node) || PROCESS_NODE_TYPES.ASSIGN;
+	}
+	// rectify：隐患整改 → rectifyInfo；未整改前可能只有转派信息
+	if (nodeType === PROCESS_NODE_TYPES.RECTIFY) {
+		return resolveAssignRectifyDisplayType(node) || PROCESS_NODE_TYPES.RECTIFY;
+	}
+	return nodeType;
+};
+
+const resolveTitlePrefix = (rawType, displayType, node) => {
+	if (displayType === PROCESS_NODE_TYPES.ASSIGN) {
+		return TITLE_PREFIX_MAP[rawType] || TITLE_PREFIX_MAP.assign;
+	}
+	if (displayType === PROCESS_NODE_TYPES.RECTIFY) {
+		return TITLE_PREFIX_MAP.rectify;
+	}
+	return TITLE_PREFIX_MAP[displayType] || TITLE_PREFIX_MAP[rawType] || node.nodeName || '处理';
+};
+
+const mapNodeContent = (node, displayType) => {
+	switch (displayType) {
+	case PROCESS_NODE_TYPES.ADD:
+		return mapAddContent(node.hazardInfo);
+	case PROCESS_NODE_TYPES.ASSIGN:
+		return mapAssignContent(node.assignInfo);
+	case PROCESS_NODE_TYPES.RECTIFY:
+		return mapRectifyContent(node.rectifyInfo);
+	case PROCESS_NODE_TYPES.VERIFY:
+	case PROCESS_NODE_TYPES.WRITEOFF_APPROVE:
+		return mapVerifyContent(node.verifyInfo);
+	case PROCESS_NODE_TYPES.WRITEOFF_APPLY:
+		return mapWriteoffApplyContent(node.writeOffApplyInfo);
+	case PROCESS_NODE_TYPES.APPROVAL:
+		return mapApprovalContent(node.subProcessApprovalInfo);
+	default:
+		return {};
+	}
+};
+
+export const mapProcessNodeToHistoryItem = (node) => {
+	if (!node || typeof node !== 'object') {
+		return {
+			type: PROCESS_NODE_TYPES.ADD,
+			rawType: '',
+			taskKey: '',
+			nodeName: '',
+			titlePrefix: '处理',
+			operator: '',
+			time: '',
+			content: {},
+			flowTaskId: '',
+			completed: true
+		};
+	}
+
+	const nodeType = resolveNodeType(node);
+	const rawType = node.nodeType || nodeType;
+	const displayType = resolveDisplayType(node, nodeType);
+
+	return {
+		type: displayType,
+		rawType,
+		taskKey: resolveTaskKey(node),
+		nodeName: getProcessStepDisplayName(node),
+		titlePrefix: resolveTitlePrefix(rawType, displayType, node),
+		operator: resolveOperator(node, displayType),
+		time: resolveTime(node, displayType),
+		content: mapNodeContent(node, displayType),
+		flowTaskId: node.flowTaskId || '',
+		completed: isNodeCompleted(node)
+	};
+};
+
+export const mapProcessChainNodes = (nodes = []) => {
+	if (!Array.isArray(nodes) || nodes.length === 0) return [];
+	return nodes.map((node) => mapProcessNodeToHistoryItem(node));
+};
+
+export const resolveProcessChainSummary = (data) => {
+	if (!data) {
+		return {
+			statusName: '-',
+			createdAt: '-'
+		};
+	}
+
+	const addNode = (data.nodes || []).find((item) => item.nodeType === 'add');
+	const createdAt = addNode?.hazardInfo?.createdAt || '-';
+
+	return {
+		statusName: data.statusName || '-',
+		createdAt
+	};
+};

components/hazardDetail/processChainLabels.js

@@ -0,0 +1,58 @@
+export const CHAIN_LABELS = {
+	loading: '加载中...',
+	empty: '暂无流程记录',
+	personnelSuffix: '人员：',
+	hazardCode: '隐患编号',
+	hazardTitle: '隐患标题',
+	checkSource: '检查形式',
+	hazardSource: '隐患来源',
+	hazardArea: '隐患区域',
+	address: '位置描述',
+	hazardLevel: '隐患等级',
+	hazardTag: '隐患标签',
+	description: '问题描述',
+	hazardAttachments: '隐患附件',
+	legalBasis: '参考法规',
+	assigneeName: '指定整改责任人',
+	assignDeadline: '指定整改截至日期',
+	assignStatus: '交办状态',
+	rectifyStatus: '整改状态',
+	rectifyPlan: '整改方案',
+	rectifyResult: '整改结果',
+	rectifyMeasures: '整改措施',
+	controlMeasures: '管控措施',
+	rectifierName: '整改责任人',
+	managerNames: '管理人员',
+	memberNames: '整改成员',
+	planCost: '预计费用',
+	actualCost: '实际费用',
+	rectifyAttachments: '整改附件',
+	rectifySign: '整改签字',
+	verifyResult: '验收结果',
+	pass: '通过',
+	verifyRemark: '验收备注',
+	verifyAttachments: '验收附件',
+	verifySign: '验收签字',
+	writeoffDeadline: '整改时限',
+	responsibleDept: '治理责任单位',
+	responsiblePerson: '主要负责人',
+	mainTreatment: '主要治理内容',
+	treatmentResult: '治理完成内容',
+	selfVerify: '自行验收情况',
+	applySign: '申请签字',
+	approvalOpinion: '审批意见',
+	approvalComment: '意见说明',
+	smsReminder: '短信提醒',
+	yes: '是',
+	no: '否',
+	approvalSign: '审批签字',
+	attachmentFallback: '附件',
+	yuan: '元'
+};
+
+export const LEVEL_NAME_CLASS_MAP = {
+	一般: 'level-normal',
+	一般隐患: 'level-normal',
+	重大: 'level-major',
+	重大隐患: 'level-major'
+};

components/hazardDetail/useProcessChainScroll.js

@@ -0,0 +1,163 @@
+import { ref, watch, nextTick, getCurrentInstance } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+import { mapProcessChainNodes } from './processChain.js';
+
+/**
+ * 流程链左右联动滚动（与 HazardDetailPanelV2 保持一致）
+ */
+export function useProcessChainScroll(chainSource, loadingSource) {
+	const instance = getCurrentInstance();
+	const queryScope = instance?.proxy || instance;
+
+	const historyList = ref([]);
+	const activeIndex = ref(0);
+	const sectionOffsets = ref([0]);
+	const contentViewHeight = ref(0);
+	const contentScrollIntoView = ref('');
+	const stepScrollIntoView = ref('');
+	const scrollWithAnimation = ref(true);
+	const isProgrammaticScroll = ref(false);
+	let measureLayoutTimer = null;
+
+	const measureLayout = () => {
+		if (!historyList.value.length) return;
+
+		nextTick(() => {
+			const query = uni.createSelectorQuery().in(queryScope);
+			query.select('.content-scroll').boundingClientRect();
+			query.select('.content-scroll').scrollOffset();
+			query.selectAll('.node-section').boundingClientRect();
+			query.exec((res) => {
+				const containerRect = res?.[0];
+				const scrollOffset = res?.[1];
+				const sections = res?.[2] || [];
+				if (!containerRect || !sections.length) return;
+
+				contentViewHeight.value = containerRect.height || 0;
+				const baseScrollTop = scrollOffset?.scrollTop || 0;
+				sectionOffsets.value = sections.map(
+					(section) => section.top - containerRect.top + baseScrollTop
+				);
+			});
+		});
+	};
+
+	const scheduleMeasureLayout = () => {
+		clearTimeout(measureLayoutTimer);
+		measureLayoutTimer = setTimeout(() => {
+			measureLayout();
+		}, 80);
+	};
+
+	const rebuildHistory = (data) => {
+		const nodes = data?.nodes || [];
+		historyList.value = mapProcessChainNodes(nodes);
+		activeIndex.value = 0;
+		contentScrollIntoView.value = '';
+		scheduleMeasureLayout();
+		setTimeout(scheduleMeasureLayout, 300);
+	};
+
+	const syncActiveIndex = (scrollTop, scrollHeight = 0) => {
+		const count = historyList.value.length;
+		if (!count) return;
+
+		if (scrollHeight > 0 && contentViewHeight.value > 0) {
+			if (scrollTop + contentViewHeight.value >= scrollHeight - 60) {
+				if (activeIndex.value !== count - 1) {
+					activeIndex.value = count - 1;
+				}
+				return;
+			}
+		}
+
+		const offsets = sectionOffsets.value;
+		if (!offsets.length) return;
+
+		let idx = 0;
+		for (let i = offsets.length - 1; i >= 0; i--) {
+			if (scrollTop >= offsets[i] - 80) {
+				idx = i;
+				break;
+			}
+		}
+
+		if (idx !== activeIndex.value) {
+			activeIndex.value = idx;
+		}
+	};
+
+	const onContentScroll = (e) => {
+		if (isProgrammaticScroll.value) return;
+		const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};
+		syncActiveIndex(scrollTop, scrollHeight);
+		scheduleMeasureLayout();
+	};
+
+	const onScrollToLower = () => {
+		const count = historyList.value.length;
+		if (count > 0 && activeIndex.value !== count - 1) {
+			activeIndex.value = count - 1;
+		}
+	};
+
+	const scrollToNode = (index) => {
+		if (index < 0 || index >= historyList.value.length) return;
+
+		isProgrammaticScroll.value = true;
+		scrollWithAnimation.value = true;
+		activeIndex.value = index;
+		contentScrollIntoView.value = 'process-node-' + index;
+
+		setTimeout(() => {
+			contentScrollIntoView.value = '';
+			isProgrammaticScroll.value = false;
+			scheduleMeasureLayout();
+		}, 350);
+	};
+
+	watch(
+		() => (typeof loadingSource === 'function' ? loadingSource() : loadingSource?.value),
+		(loading) => {
+			if (!loading) {
+				scheduleMeasureLayout();
+				setTimeout(scheduleMeasureLayout, 300);
+			}
+		}
+	);
+
+	watch(
+		() => (typeof chainSource === 'function' ? chainSource() : chainSource?.value),
+		(val) => rebuildHistory(val),
+		{ immediate: true, deep: true }
+	);
+
+	watch(activeIndex, (index) => {
+		stepScrollIntoView.value = 'process-step-' + index;
+		setTimeout(() => {
+			stepScrollIntoView.value = '';
+		}, 300);
+	});
+
+	watch(
+		() => historyList.value.length,
+		() => scheduleMeasureLayout()
+	);
+
+	onReady(() => {
+		scheduleMeasureLayout();
+		setTimeout(scheduleMeasureLayout, 300);
+	});
+
+	return {
+		historyList,
+		activeIndex,
+		contentScrollIntoView,
+		stepScrollIntoView,
+		scrollWithAnimation,
+		onContentScroll,
+		onScrollToLower,
+		scrollToNode,
+		scheduleMeasureLayout
+	};
+}