park-shanghai-app/pages/homePage/emergency.vue

<template>
	<view class="container">
		<!-- 自定义标题 -->
		<uni-nav-bar left-icon="left" left-text="返回" background-color="#537CF7" color="#ffffff" @clickLeft="goBack">
			<text class="navbar-title">应急抢险工单</text>
		</uni-nav-bar>

		<!-- 页面内容 -->
		<view class="content">
			<!-- 顶部标签切换 -->
			<view class="top-section">
				<view class="tab" :class="{ active: activeTab === 'pending' }" @click="activeTab = 'pending'">待处理工单</view>
				<view class="divider"></view>
				<view class="tab" :class="{ active: activeTab === 'completed' }" @click="activeTab = 'completed'">已完成工单</view>
			</view>
			<!-- 内容区域 -->
			<view class="content-main">
				<!-- 时间选择器 -->
				<view>
					<uni-datetime-picker type="daterange" v-model="dateRange" start="2023-01-01" end="2023-12-31" @change="onDateChange" placeholder="请选择时间范围" />
				</view>
				<!-- 工单类型选择器 -->
				<view class="filter-section">
					<uni-data-select v-model="value" :localdata="options" placeholder="请选择工单类型" />
					<button class="custom-button" type="primary" size="default" @click="onSearch">查询</button>
				</view>

				<!-- 待处理工单 -->
				<view v-if="activeTab === 'pending'" style="overflow: auto; padding-bottom: 200rpx">
					<view class="order-list">
						<view
							class="order-item"
							v-for="(item, index) in pendingOrders"
							:key="index"
							:class="{
								'to-handle': item.status === 'toHandle',
								'to-dispatch': item.status === 'toDispatch'
							}"
						>
							<view class="status-tag" :class="item.status">
								{{ item.status === 'toHandle' ? '待处理' : '待派发' }}
							</view>

							<view class="form-group">
								<view class="item-form">
									<text>工单描述：</text>
									<text class="item-description">{{ item.description }}</text>
								</view>
								<view class="item-form">
									<text>工单类型：</text>
									<text class="item-description">{{ item.type }}</text>
								</view>
								<view class="item-form">
									<text>工单地址：</text>
									<text class="item-description">{{ item.address }}</text>
								</view>
								<view class="item-form">
									<text>录入时间：</text>
									<text class="item-description">{{ item.createTime }}</text>
								</view>
								<!-- 工单等级显示 -->
								<view class="item-form">
									<text>工单等级：</text>
									<text class="level-tag" :class="getLevelClass(item.level)">
										{{ item.level }}
									</text>
								</view>
								<view class="item-form" v-if="item.status === 'toHandle'">
									<text>处理班组：</text>
									<text class="item-description">{{ item.team || '暂无' }}</text>
								</view>
							</view>
							<!-- 待处理的操作 -->
							<view class="actionstwo" v-if="item.status === 'toHandle'">
								<view class="action-text" @click="handleTransfer(item)">工单转派</view>
								<view class="divider-vertical"></view>
								<view class="action-text" @click="handleTransfer(item)">处理反馈</view>
							</view>

							<!-- 待派发的操作 -->
							<view class="actionsone" v-if="item.status === 'toDispatch'">
								<view class="action-text-center" @click="dispatchOrder(item)">立即指派</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 已完成工单 -->
				<view v-if="activeTab === 'completed'">
					<view class="order-list">
						<view class="order-item to-completed" v-for="(item, index) in completedOrders" :key="index">
							<view class="completed status-tag">已完成</view>
							<view class="item-form">
								<text>工单描述：</text>
								{{ item.description }}
							</view>
							<view class="item-form">
								<text>工单类型：</text>
								{{ item.type }}
							</view>
							<view class="item-form">
								<text>工单地址：</text>
								{{ item.address }}
							</view>
							<view class="item-form">
								<text>完成时间：</text>
								{{ item.completeTime }}
							</view>
							<view class="item-form">
								<text>处理结果：</text>
								{{ item.result }}
							</view>
							<!-- 							<view class="action-buttons">
								<button class="action-btn view-detail" @click="viewDetail(item)">查看详情</button>
							</view> -->
						</view>
					</view>
				</view>
				<view class="bottom-btn">
					<button @click="navigateToPage">立即录入</button>
				</view>
			</view>
		</view>
	</view>
</template>

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

const activeTab = ref('pending');
const dateRange = ref([]);

// 定义响应式数据
const value = ref(1);
const options = ref([]);

// 示例数据 - 待处理工单
const pendingOrders = ref([
	{
		orderNo: 'GD20230601001',
		description: '行道树发生倒伏，影响车辆和行人正常通行',
		type: '行道树倒伏',
		address: '徐汇区xx街道xx路',
		createTime: '2023-06-01 09:30',
		level: '高危险',
		team: '一分公司一组',
		status: 'toHandle'
	},
	{
		orderNo: 'GD20230601002',
		description: '行道树出现明显倾斜，可能存在安全隐患',
		type: '行道树倾斜',
		address: '徐汇区XX路与XX路交叉口',
		createTime: '2023-06-01 10:15',
		level: '中危险',
		team: null,
		status: 'toDispatch'
	}
]);

// 示例数据 - 已完成工单
const completedOrders = ref([
	{
		orderNo: 'GD20230531001',
		description: '某小区停电故障处理',
		type: '电力维修',
		address: 'XX小区配电室',
		createTime: '2023-05-31 08:20',
		completeTime: '2023-05-31 10:45',
		level: '紧急',
		team: '电力维修组',
		result: '已修复，恢复正常供电'
	}
]);

// 工单等级样式映射
const getLevelClass = (level) => {
	const levelMap = {
		高危险: 'high-risk',
		中危险: 'medium-risk',
		紧急: 'urgent'
	};
	return levelMap[level] || '';
};

// 返回
const goBack = () => {
	uni.navigateBack();
};

// 获取数据字典的方法
const fetchDicts = async () => {
	const response = await getDicts('gdlx');
	options.value = response.data.map((item) => ({
		value: item.dictValue,
		text: item.dictLabel
	}));
};

// 在组件挂载时加载数据
onMounted(() => {
	fetchDicts();
});

const onDateChange = (e) => {
	console.log('时间范围变更：', e);
};

const onSearch = () => {
	console.log('查询条件：', {
		activeTab: activeTab.value,
		dateRange: dateRange.value
	});
};

// 工单操作
const dispatchOrder = (order) => {
	uni.showToast({
		title: `派发工单 ${order.orderNo}`,
		icon: 'none'
	});
};

const handleOrder = (order) => {
	uni.showToast({
		title: `开始处理 ${order.orderNo}`,
		icon: 'none'
	});
};

const viewDetail = (order) => {
	uni.showToast({
		title: `查看详情 ${order.orderNo}`,
		icon: 'none'
	});
};

//立即录入的操作
const navigateToPage = () => {
	uni.navigateTo({
		url: '/pages/homePage/emergencyEntry'
	});
};
</script>

<style scoped>
.container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 自定义导航栏标题字体 */
.navbar-title {
	font-family: 'Alimama ShuHeiTi-Bold';
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}

/* 内容区域（自动扩展剩余空间） */
.content {
	flex: 1;
	overflow-y: auto;
	background-color: #ffffff;
}

/* 标签切换样式 */
.top-section {
	display: flex;
	height: 90rpx;
	background-color: #f5f8fd;
	font-size: 32rpx;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	font-family: 'MiSans-Regular';
}

/* 分割线 */
.divider {
	width: 1rpx;
	background-color: #dbe5f4;
	height: 32rpx;
	align-self: center;
}

.tab {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	color: black;
}

.tab.active {
	color: #537cf7;
}

/* 主要内容区域 */
.content-main {
	padding: 24rpx;
}

/* 工单类型选择区域 */
.filter-section {
	display: flex;
	margin-top: 20rpx;
	gap: 5%;
}

.custom-button {
	width: 38%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: normal;
	font-size: 32rpx;
	background-color: #566dff;
}

/* 工单列表样式 */

.order-list {
	margin-top: 25rpx;
	display: flex;
	flex-direction: column;
	gap: 35rpx;
	width: 100%;
	margin-bottom: 20rpx;
}

.order-item {
	width: 100%;
	height: 550rpx;
	border-radius: 25rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 状态标签样式 */
.status-tag {
	width: 27%;
	padding: 16rpx;
	border-top-left-radius: 25rpx;
	border-bottom-right-radius: 120rpx;
	font-size: 30rpx;
	margin-bottom: 15rpx;
	color: white;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	padding-left: 30rpx;
}

.to-handle .status-tag {
	background-color: #eb4646;
}

.to-dispatch .status-tag {
	background-color: #faad14;
}

.completed {
	background-color: #52c41a;
}

/* 待处理工单背景 */
.to-handle {
	background: linear-gradient(to bottom, #ffdddd, #ffffff);
}

/* 待派发工单背景 */
.to-dispatch {
	background: linear-gradient(to bottom, #fff3dd, #ffffff);
}

/* 已完成工单背景 */
.to-completed {
	background: linear-gradient(to bottom, #ddffdd, #ffffff);
}
/* 工单等级标签基础样式 */
.level-tag {
	display: inline-block;
	padding: 2rpx 16rpx;
	width: 120rpx;
	border-radius: 25rpx;
	text-align: center;
	color: white !important;
	font-size: 28rpx;
	margin-left: 10rpx;
}

/* 高危险（红色） */
.level-tag.high-risk {
	background-color: #eb4646;
}

/* 中危险（黄色） */
.level-tag.medium-risk {
	background-color: #faad14;
}

/* 紧急（深红色） */
.level-tag.urgent {
	background-color: #ff4d4f;
}

/* 工单项样式 */
.form-group {
	margin-top: 10rpx;
}

.item-form {
	display: flex; /* 使用flex布局保持同行 */
	align-items: center; /* 垂直居中 */
	margin: 8rpx 0;
	font-size: 32rpx;
	line-height: 1.5;
	padding-left: 30rpx;
	font-family: 'MiSans-Regular';
	overflow: hidden; /* 隐藏溢出内容 */
	white-space: nowrap; /* 禁止换行 */
}

.item-form text:first-child {
	color: #767d9c;
	font-family: 'MiSans-Regular';
	flex-shrink: 0; /* 防止标签被压缩 */
}

/* 内容部分 */
.item-description {
	flex: 1; /* 占据剩余空间 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 10rpx; /* 和标签保持间距 */
}

/* 操作文字通用样式 */
.action-text,
.action-text-center {
	color: #566dff;
	font-size: 30rpx;
	text-align: center;
	width: 100%;
	font-family: 'MiSans-Regular';
}

/* 左右分开的文字容器 */
.actionstwo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30rpx;
	gap: 20rpx;
	margin-top: 50rpx;
	font-family: 'MiSans-Regular';
}

/* 居中的文字容器 */
.actionsone {
	display: flex;
	justify-content: center;
	margin: 30rpx;
	margin-top: 80rpx;
}

/* 垂直分隔线 */
.divider-vertical {
	width: 2rpx;
	height: 40rpx;
	background-color: #566dff;
	opacity: 0.5;
}

/* 居中的文字样式 */
.action-text-center {
	text-align: center;
}
/* 已完成的工单 */
.view-detail {
	background-color: #52c41a;
}
.bottom-btn {
	margin-top: 60rpx;
}
.bottom-btn button {
	color: #ffffff;
	background-color: #566dff;
	height: 76rpx;
	font-size: 30rpx;
}
</style>