park-shanghai-app/components/emDetailsform.vue

<template>
	<view class="form-inner">
		<view class="form-head">
			<view class="borderleft"><text>&nbsp;</text></view>
			工单基本信息
		</view>
		<view class="form-item">
			<text class="form-label">工单地址：</text>
			<view class="form-value">
				<text>{{ orderData.address }}</text>
			</view>
		</view>
		<!-- 工单类型 -->
		<view class="form-item">
			<text class="form-label">工单类型：</text>
			<view class="form-value">
				<text>
					<dictTag class="item-description" type="gdlx" :value="orderData.gdType" />
					<text v-if="orderData.gdType === 0 && orderData.xdsqm !== null">-</text>
					<dictTag class="item-description" type="xdsqm" :value="orderData.xdsqm" />
				</text>
			</view>
		</view>

		<!-- 影响类型 -->
		<view class="form-item">
			<text class="form-label">影响类型：</text>
			<view class="form-value">
				<text>
					<dictTag class="item-description" type="yxlx" :value="orderData.yxlx" />
				</text>
			</view>
		</view>
		<!-- 处理班组 -->
		<view class="form-item">
			<text class="form-label">处理班组：</text>
			<view class="form-value">
				<text>{{ orderData.deptName }}</text>
			</view>
		</view>
		<!-- 工单描述 -->
		<view class="form-item">
			<text class="form-label">工单描述：</text>
			<view class="form-value">
				<text>{{ orderData.gdms }}</text>
			</view>
		</view>

		<!-- 工单图片 -->
		<view class="form-item">
			<text class="form-label">工单图片：</text>
			<view class="form-value">
				<uni-file-picker v-model="orderData.gdtp" fileMediatype="image" mode="grid" />
			</view>
		</view>

		<view class="form-item">
			<text class="form-label">参与人数：</text>
			<view class="form-value">
				<text>{{ orderData.pqrs }}</text>
			</view>
		</view>

		<view class="form-item">
			<text class="form-label">参与车辆：</text>
			<view class="form-value">
				<text v-if="orderData.hyc != 0">货车：{{ orderData.hyc || 0 }}辆</text>
				<text v-if="orderData.dc != 0">吊车：{{ orderData.dc || 0 }}辆</text>
				<text v-if="orderData.dgc != 0">登高车：{{ orderData.dgc || 0 }}辆</text>
			</view>
		</view>

		<view class="form-item">
			<text class="form-label">处理描述：</text>
			<view class="form-value">
				<text>{{ orderData.clms }}</text>
			</view>
		</view>

		<!-- 工单图片 -->
		<view class="form-item">
			<text class="form-label">处理后图片：</text>
			<view class="form-value">
				<uni-file-picker v-model="orderData.clhtp" fileMediatype="image" mode="grid" />
			</view>
		</view>
	</view>
	<view class="form-inner">
		<view class="form-head" style="margin-top: 20rpx">
			<view class="borderleft"><text>&nbsp;</text></view>
			工单流程信息
		</view>
		<view class="processinformation">
			<view class="process-container">
				<view class="process-node" v-for="(node, index) in processNodes" :key="index">
					<!-- 左侧蓝色节点 -->
					<view class="node-circle"></view>
					<!-- 右侧信息 -->
					<view class="node-info">
						<text class="node-name">{{ node.name }}</text>
						<text class="node-time">{{ node.createTime }}</text>
					</view>
					<!-- 连接线 -->
					<view v-if="index < processNodes.length - 1" class="node-line"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getDicts } from '@/api/system/dict/data';

import { getEmergencyOrderById } from '@/api/emergency/api';
import dictTag from '@/components/dictTag.vue'; // 字典翻译组件
const props = defineProps({
	orderId: {
		type: String,
		required: true
	}
});
const orderData = ref({});

onMounted(async () => {
	if (props.orderId) {
		await fetchOrderDetails();
	}
});

watch(
	() => props.orderId,
	async () => {
		await fetchOrderDetails();
	}
);

async function fetchOrderDetails() {
	try {
		const response = await getEmergencyOrderById(props.orderId);
		orderData.value = response.data;
	} catch (error) {
		console.error('获取工单详情失败:', error);
	}
}
// 示例数据
const processNodes = ref([
	{ name: '节点1', createTime: '2023-10-01 10:00' },
	{ name: '节点2', createTime: '2023-10-02 12:00' },
	{ name: '节点3', createTime: '2023-10-03 14:00' }
]);

// 获取工单类型字典
const fetchDicts = async () => {
	const response = await getDicts('gdlx', 'xdsqm', 'yxlx');
	options.value = response.data.map((item) => ({
		value: item.dictValue,
		text: item.dictLabel
	}));
};
</script>

<style scoped>
.form-inner {
	/* background-color: #f2f2f2; */
	padding: 20rpx 30rpx 10rpx 5rpx;
	margin-bottom: 20rpx;
}
.form-head {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding-left: 20rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #ccc;
}
.borderleft {
	width: 5rpx;
	height: 90%;
	background-color: #02a7f0;
}
.form-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0rpx 20rpx 40rpx;
	/* border-bottom: 1rpx solid #eee; */
}

.form-label {
	width: 195rpx;
	font-size: 28rpx;
	color: #767d9c;
}

.form-value {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 28rpx;
	color: #333;
}

.arrow {
	color: #999;
	font-size: 30rpx;
}

.checkbox-item {
	margin-right: 30rpx;
	margin-bottom: 20rpx;
	display: inline-flex;
	align-items: center;
}

.checkbox {
	margin-right: 10rpx;
	transform: scale(0.9);
}

.textarea {
	width: 100%;
	min-height: 200rpx;
	padding-left: 5rpx;
	border: 1px solid #eee;
	border-radius: 8rpx;
}
.processinformation {
	width: 100%;
	height: 200rpx;
}

button[type='default'] {
	background-color: #f8f8f8;
	color: #333;
}

.process-container {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
}

.process-node {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 20rpx;
}

.node-circle {
	width: 16rpx;
	height: 16rpx;
	background-color: #537cf7;
	border-radius: 50%;
	flex-shrink: 0;
}

.node-info {
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.node-name {
	font-size: 28rpx;
	color: #333;
}

.node-time {
	font-size: 24rpx;
	color: #666;
	margin-top: 5rpx;
}

.node-line {
	position: absolute;
	width: 2rpx;
	height: calc(100% + 30rpx);
	background-color: #537cf7;
	left: 8rpx;
	top: 16rpx;
}
</style>