threeonecheck_web/pages/hiddendanger/process-chain.vue

<template>
	<view class="page">
		<view class="top-gradient-wrap">
			<u-navbar
				title="查看隐患"
				:placeholder="true"
				:safeAreaInsetTop="true"
				bgColor="transparent"
				titleColor="#ffffff"
				leftIconColor="#ffffff"
				:autoBack="true"
				:border="false"
			/>

			<view class="summary-card">
				<view class="summary-side summary-side--left">
					<image class="summary-icon" src="/static/yinhuan_detail/status.png" mode="aspectFit" />
					<view class="summary-icon-gap">
						<view class="summary-text">
							<view class="summary-label">隐患状态</view>
							<view class="summary-status">{{ summary.statusName }}</view>
						</view>
					</view>
				</view>
				<view class="summary-divider"></view>
				<view class="summary-side summary-side--right">
					<image class="summary-icon" src="/static/yinhuan_detail/date.png" mode="aspectFit" />
					<view class="summary-text">
						<view class="summary-label">提交日期</view>
						<view class="summary-date">{{ summary.createdAt }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="panel-wrap">
			<HazardProcessChainPanel
				:chain-data="chainData"
				:loading="loading"
				:body-height="panelBodyHeight"
			/>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch, nextTick, getCurrentInstance } from 'vue';
import { onLoad, onReady } from '@dcloudio/uni-app';
import HazardProcessChainPanel from '@/components/hazardDetail/HazardProcessChainPanel.vue';
import { getHazardProcessChain } from '@/request/api.js';
import { resolveProcessChainSummary } from '@/components/hazardDetail/processChain.js';

const instance = getCurrentInstance();
const queryScope = instance?.proxy || instance;

const chainData = ref({});
const loading = ref(false);
const panelBodyHeight = ref(0);

const summary = computed(() => resolveProcessChainSummary(chainData.value));

const calcPanelBodyHeight = () => {
	nextTick(() => {
		const query = uni.createSelectorQuery().in(queryScope);
		query.select('.panel-wrap').boundingClientRect();
		query.exec((res) => {
			const rect = res?.[0];
			if (rect?.height > 0) {
				panelBodyHeight.value = Math.floor(rect.height);
				return;
			}
			const sys = uni.getSystemInfoSync();
			panelBodyHeight.value = Math.floor(sys.windowHeight * 0.55);
		});
	});
};

const loadProcessChain = async (hazardId) => {
	loading.value = true;
	try {
		const res = await getHazardProcessChain(hazardId);
		if (res.code === 0 && res.data) {
			chainData.value = res.data;
		} else {
			chainData.value = {};
			uni.showToast({ title: res.msg || '获取流程链失败', icon: 'none' });
		}
	} catch (error) {
		console.error('获取隐患流程链失败:', error);
		chainData.value = {};
		uni.showToast({ title: '获取流程链失败', icon: 'none' });
	} finally {
		loading.value = false;
		calcPanelBodyHeight();
		setTimeout(calcPanelBodyHeight, 100);
		setTimeout(calcPanelBodyHeight, 400);
	}
};

onReady(() => {
	calcPanelBodyHeight();
	setTimeout(calcPanelBodyHeight, 100);
	setTimeout(calcPanelBodyHeight, 400);
});

watch(loading, (isLoading) => {
	if (!isLoading) {
		calcPanelBodyHeight();
		setTimeout(calcPanelBodyHeight, 100);
		setTimeout(calcPanelBodyHeight, 400);
	}
});

onLoad((options) => {
	if (options.hazardId) {
		loadProcessChain(options.hazardId);
		return;
	}

	uni.showToast({ title: '缺少隐患ID', icon: 'none' });
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
});
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #f5f7fa;
}

.top-gradient-wrap {
	flex-shrink: 0;
	background: linear-gradient(180deg, #046CEA 0%, #2158C8 28.44%, rgba(4, 107, 234, 0) 100%);
}

.summary-card {
	margin: 32rpx 30rpx 0;
	padding: 28rpx 30rpx 32rpx;
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
}

.summary-side {
	display: flex;
	align-items: flex-start;
}

.summary-side--left {
	flex-shrink: 0;
	align-items: center;
}

.summary-side--left .summary-text {
	padding-top: 0;
	padding-bottom: 0;
}

.summary-side--right {
	flex: 1;
	min-width: 0;
	align-items: center;
}

.summary-side--right .summary-icon {
	margin-right: 22rpx;
}

.summary-side--right .summary-text {
	flex: 1;
	min-width: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.summary-icon-gap {
	width: 149rpx;
	flex-shrink: 0;
	box-sizing: border-box;
}

.summary-icon {
	width: 55rpx;
	height: 65rpx;
	flex-shrink: 0;
}

.summary-side--left .summary-icon {
	margin-right: 22rpx;
}

.summary-text {
	flex-shrink: 0;
	box-sizing: border-box;
}

.summary-label {
	font-size: 24rpx;
	color: #8f9ca2;
	line-height: 34rpx;
}

.summary-status {
	margin-top: 8rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 40rpx;
}

.summary-date {
	margin-top: 8rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 40rpx;
	white-space: nowrap;
}

.summary-divider {
	width: 2rpx;
	height: 72rpx;
	flex-shrink: 0;
	background: #eee;
	margin-right: 40rpx;
}

.panel-wrap {
	flex: 1;
	min-height: 0;
	height: 0;
	margin-top: 12rpx;
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
</style>