feat: Batch 4 - remaining pages (23 pages)
Agent Loop: 3 agents, all passed - 8 pshgl pages (排水户管理) - 8 fxgl+xjgl pages (防汛+工程) - 7 remaining (map/project/QR)
This commit is contained in:
Ubuntu
173
src/views/projectManagement/detail.vue
Normal file
173
src/views/projectManagement/detail.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 项目详情页
|
||||
*
|
||||
* 展示单个项目的详细信息、进度和里程碑。
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const detailId = computed(() => route.params.detail as string | undefined)
|
||||
|
||||
/** 模拟项目详情 */
|
||||
const project = ref({
|
||||
id: detailId.value || 'XM-2025-001',
|
||||
name: '城北雨水管网改造工程',
|
||||
no: 'XM-2025-001',
|
||||
company: '中建三局',
|
||||
progress: 75,
|
||||
status: 'building',
|
||||
manager: '赵工',
|
||||
startDate: '2025-03-01',
|
||||
endDate: '2025-12-31',
|
||||
budget: '3800万元',
|
||||
description: '对城北片区老旧雨水管网进行全面改造，包括新建DN300-DN600雨水管12.5km，改造检查井280座，新建雨水泵站1座。',
|
||||
})
|
||||
|
||||
const statusMap: Record<string, string> = {
|
||||
building: '在建',
|
||||
paused: '暂停',
|
||||
completed: '竣工',
|
||||
}
|
||||
|
||||
const statusTagType: Record<string, 'primary' | 'warning' | 'success'> = {
|
||||
building: 'primary',
|
||||
paused: 'warning',
|
||||
completed: 'success',
|
||||
}
|
||||
|
||||
function progressColor(pct: number): string {
|
||||
if (pct >= 80) return '#07c160'
|
||||
if (pct >= 40) return '#1989fa'
|
||||
return '#ff976a'
|
||||
}
|
||||
|
||||
/** 模拟里程碑 */
|
||||
const milestones = ref([
|
||||
{ text: '项目立项', time: '2025-02-15', done: true },
|
||||
{ text: '施工设计', time: '2025-03-15', done: true },
|
||||
{ text: '管网铺设', time: '2025-06-30', done: true },
|
||||
{ text: '泵站建设', time: '2025-09-30', done: false },
|
||||
{ text: '竣工验收', time: '2025-12-31', done: false },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<van-nav-bar title="项目详情" left-arrow fixed placeholder @click-left="router.back()" />
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<van-cell-group title="基本信息" inset>
|
||||
<van-cell title="项目编号" :value="project.no" />
|
||||
<van-cell title="项目名称" :value="project.name" />
|
||||
<van-cell title="施工单位" :value="project.company" />
|
||||
<van-cell title="负责人" :value="project.manager" />
|
||||
<van-cell title="计划工期">
|
||||
<span class="date-range">{{ project.startDate }} ~ {{ project.endDate }}</span>
|
||||
</van-cell>
|
||||
<van-cell title="预算金额" :value="project.budget" />
|
||||
<van-cell title="当前状态">
|
||||
<van-tag :type="statusTagType[project.status]" size="medium">
|
||||
{{ statusMap[project.status] }}
|
||||
</van-tag>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 项目描述 -->
|
||||
<van-cell-group title="项目描述" inset>
|
||||
<van-cell>
|
||||
<p class="project-desc">{{ project.description }}</p>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 进度 -->
|
||||
<van-cell-group title="工程进度" inset>
|
||||
<div class="progress-section">
|
||||
<van-progress
|
||||
:percentage="project.progress"
|
||||
:color="progressColor(project.progress)"
|
||||
:pivot-text="`${project.progress}%`"
|
||||
stroke-width="10"
|
||||
/>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 里程碑 -->
|
||||
<van-cell-group title="项目里程碑" inset>
|
||||
<div class="milestones-section">
|
||||
<van-steps :active="milestones.filter(m => m.done).length - 1" direction="vertical" active-color="#1989fa">
|
||||
<van-step v-for="(step, idx) in milestones" :key="idx">
|
||||
<template #active-icon>
|
||||
<van-icon name="checked" color="#1989fa" />
|
||||
</template>
|
||||
<template #inactive-icon>
|
||||
<van-icon name="clock-o" color="#ccc" />
|
||||
</template>
|
||||
<h4>{{ step.text }}</h4>
|
||||
<p>{{ step.time }}</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: 20px;
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
:deep(.van-cell-group) {
|
||||
margin: 12px 8px;
|
||||
}
|
||||
|
||||
:deep(.van-cell-group__title) {
|
||||
padding: 12px 16px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-regular);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.milestones-section {
|
||||
padding: 12px 0;
|
||||
|
||||
:deep(.van-step__title) {
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-regular);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user