yuto-water-h5/src/views/pshgl/pshProblemDetail.vue

<script setup lang="ts">
/**
 * 排水户问题详情页
 *
 * 展示排水户问题详细信息，支持处理/转派等操作。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

const problemId = (route.params.detail || route.query.id) as string

/** 模拟问题详情 */
const problem = ref({
  id: problemId || '1',
  pshName: '华丰食品厂',
  title: '排水管道堵塞',
  severity: 'high',
  status: 'pending',
  reporter: '张工',
  reportTime: '2025-06-15 09:30',
  address: '城北工业园区A1栋东侧排水口',
  description: '日常巡检中发现华丰食品厂东侧排水管道存在严重堵塞现象，排水不畅导致污水溢出，存在环境污染风险。经初步排查，堵塞原因为油脂凝固和杂物堆积。需尽快安排疏通车进行清淤处理，并建议排水户定期清理隔油池。',
  assignee: '待分配',
  createTime: '2025-06-15 09:30:00',
  updateTime: '2025-06-15 09:30:00',
})

const statusMap: Record<string, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已解决',
}

const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
  pending: 'warning',
  processing: 'primary',
  resolved: 'success',
}

const severityMap: Record<string, string> = {
  low: '低',
  medium: '中',
  high: '高',
  critical: '紧急',
}

const severityColorMap: Record<string, string> = {
  low: '#07c160',
  medium: '#ff976a',
  high: '#ee0a24',
  critical: '#ee0a24',
}

/** 接单 */
function acceptProblem() {
  showToast('已接单处理')
}

/** 转派 */
function transferProblem() {
  showToast('转派功能')
}

/** 解决 */
function resolveProblem() {
  showToast('已标记为已解决')
}
</script>

<template>
  <div class="detail-page">
    <van-nav-bar title="问题详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 状态栏 -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[problem.status]" size="large">
        {{ statusMap[problem.status] }}
      </van-tag>
      <span class="severity-tag" :style="{ color: severityColorMap[problem.severity] }">
        严重程度: {{ severityMap[problem.severity] }}
      </span>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="问题编号" :value="`PSH-PROB-${problem.id}`" />
      <van-cell title="问题标题" :value="problem.title" />
      <van-cell title="所属排水户" :value="problem.pshName" />
      <van-cell title="上报人员" :value="problem.reporter" />
      <van-cell title="上报时间" :value="problem.reportTime" />
      <van-cell title="问题地址" :value="problem.address" />
      <van-cell title="责任人" :value="problem.assignee" />
    </van-cell-group>

    <!-- 问题描述 -->
    <van-cell-group title="问题描述" class="info-group">
      <van-cell>
        <p class="desc-text">{{ problem.description }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 时间信息 -->
    <van-cell-group title="时间信息" class="info-group">
      <van-cell title="创建时间" :value="problem.createTime" />
      <van-cell title="更新时间" :value="problem.updateTime" />
    </van-cell-group>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button type="primary" block round @click="acceptProblem">接单处理</van-button>
      <van-button plain block round class="mt-sm" @click="transferProblem">转派他人</van-button>
      <van-button type="success" block round class="mt-sm" @click="resolveProblem">标记已解决</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-card);
}

.severity-tag {
  font-size: 13px;
  font-weight: 500;
}

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