7cd91082d6
Agent Loop: 3 agents, all passed - Inspection: index/detail, records index/detail - InspectionProblem: index/detail/management - Maintenance: index/detail, records index/detail, check index
134 lines
3.4 KiB
Vue
134 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 巡检任务详情页
|
|
*
|
|
* 展示任务详细信息，包含基本信息和操作按钮。
|
|
* 可通过路由 query.id 获取任务 id。
|
|
*/
|
|
import { ref } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { showToast } from 'vant'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const taskId = route.query.id as string
|
|
|
|
/** 模拟任务详情 */
|
|
const task = ref({
|
|
id: taskId || '1',
|
|
name: '管网巡检-城北片区',
|
|
facility: '供水管网',
|
|
status: 'pending',
|
|
planDate: '2025-06-15',
|
|
inspector: '张工',
|
|
address: '城北工业大道1-50号',
|
|
description: '对城北片区供水管网进行全面巡检，检查管道是否有渗漏、腐蚀等情况。重点检查老旧管道及近期施工区域。',
|
|
createTime: '2025-06-10 09:00:00',
|
|
updateTime: '2025-06-14 17:30:00',
|
|
})
|
|
|
|
const statusMap: Record<string, string> = {
|
|
pending: '待巡检',
|
|
in_progress: '巡检中',
|
|
completed: '已完成',
|
|
}
|
|
|
|
const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
|
|
pending: 'warning',
|
|
in_progress: 'primary',
|
|
completed: 'success',
|
|
}
|
|
|
|
/** 开始巡检 */
|
|
function startInspection() {
|
|
showToast('开始巡检')
|
|
}
|
|
|
|
/** 查看巡检记录 */
|
|
function viewRecords() {
|
|
router.push(`/inspectionRecords?taskId=${taskId}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="inspection-detail-page">
|
|
<van-nav-bar title="任务详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
|
|
|
|
<!-- 状态标签 -->
|
|
<div class="status-bar">
|
|
<van-tag :type="statusColorMap[task.status]" size="large">
|
|
{{ statusMap[task.status] }}
|
|
</van-tag>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<van-cell-group title="基本信息" class="info-group">
|
|
<van-cell title="任务名称" :value="task.name" />
|
|
<van-cell title="设施类型" :value="task.facility" />
|
|
<van-cell title="计划日期" :value="task.planDate" />
|
|
<van-cell title="巡检人员" :value="task.inspector" />
|
|
<van-cell title="巡检地址" :value="task.address" />
|
|
</van-cell-group>
|
|
|
|
<!-- 任务描述 -->
|
|
<van-cell-group title="任务描述" class="info-group">
|
|
<van-cell>
|
|
<p class="desc-text">{{ task.description }}</p>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<!-- 时间信息 -->
|
|
<van-cell-group title="时间信息" class="info-group">
|
|
<van-cell title="创建时间" :value="task.createTime" />
|
|
<van-cell title="更新时间" :value="task.updateTime" />
|
|
</van-cell-group>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<van-button type="primary" block round @click="startInspection">开始巡检</van-button>
|
|
<van-button plain block round class="mt-sm" @click="viewRecords">查看巡检记录</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.inspection-detail-page {
|
|
min-height: 100vh;
|
|
background: var(--color-bg-page);
|
|
padding-bottom: 24px;
|
|
|
|
:deep(.van-nav-bar) {
|
|
background: var(--color-primary);
|
|
--van-nav-bar-title-text-color: #fff;
|
|
--van-nav-bar-text-color: #fff;
|
|
--van-nav-bar-icon-color: #fff;
|
|
}
|
|
}
|
|
|
|
.status-bar {
|
|
padding: 12px 16px;
|
|
background: var(--color-bg-card);
|
|
text-align: center;
|
|
}
|
|
|
|
.info-group {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.desc-text {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--color-text-regular);
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.action-buttons {
|
|
padding: 24px 16px;
|
|
|
|
.mt-sm {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
</style>
|