yuto-water-h5/src/views/projectManagement/detail.vue

<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>