LandSurveyApplet/pages/log-report/list/detail/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 日志详情数据
interface LogDetail {
  id: number
  content: string
  imageUrl?: string
  date: string
  status: '已处理' | '处理中' | '待处理'
  level: 'info' | 'warning' | 'error'
  handler?: string
  handleDate?: string
  remarks?: string
}

const logDetail = ref<LogDetail>({
  id: 0,
  content: '',
  imageUrl: '',
  date: '',
  status: '待处理',
  level: 'info'
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 使用UniApp的onLoad钩子获取页面参数
onLoad((options) => {
  if (options && options.id) {
    // 模拟根据ID获取详情数据
    // 实际项目中这里应该调用API获取数据
    setTimeout(() => {
      const id = parseInt(options.id)
      if (id === 1) {
        logDetail.value = {
          id: id,
          content: '系统运行正常，未发现异常情况。系统各模块运行稳定，资源使用率在正常范围内。',
          imageUrl: '',
          date: '2025-10-28 14:30',
          status: '已处理',
          level: 'info',
          handler: '张三',
          handleDate: '2025-10-28 16:45',
          remarks: '已确认系统运行正常，关闭此日志。'
        }
      } else if (id === 2) {
        logDetail.value = {
          id: id,
          content: '警告：内存使用率超过80%，请注意监控。当前内存使用率达到85%，接近系统预警线，请及时处理。',
          imageUrl: '/static/plus.png',
          date: '2025-10-29 09:15',
          status: '处理中',
          level: 'warning',
          handler: '李四',
          handleDate: '2025-10-29 10:30',
          remarks: '正在监控内存使用情况，准备扩容方案。'
        }
      } else {
        logDetail.value = {
          id: id,
          content: '严重错误：数据库连接失败，导致部分功能不可用。多个用户反馈无法访问订单查询功能。',
          imageUrl: '',
          date: '2025-10-29 15:42',
          status: '待处理',
          level: 'error'
        }
      }
    }, 500)
  }
})
</script>

<template>
  <view class="bg-gray-50 min-h-screen">

    <!-- 详情内容 -->
    <view class="p-4">
      <view class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <view class="flex justify-between items-start mb-3">
          <text class="text-gray-900 font-medium">日志 #{{ logDetail.id }}</text>
          <text class="text-xs px-2 py-1 rounded" :class="{
            'bg-green-100 text-green-800': logDetail.status === '已处理',
            'bg-yellow-100 text-yellow-800': logDetail.status === '处理中',
            'bg-red-100 text-red-800': logDetail.status === '待处理'
          }">{{ logDetail.status }}</text>
        </view>

        <view class="mb-3">
          <view class="text-gray-700 text-sm mb-2 flex items-start">
            <text class="mr-2 mt-0.5" :class="{
              'text-blue-500': logDetail.level === 'info',
              'text-yellow-500': logDetail.level === 'warning',
              'text-red-500': logDetail.level === 'error'
            }">●</text>
            <text>{{ logDetail.content }}</text>
          </view>
        </view>

        <view v-if="logDetail.imageUrl" class="mb-4">
          <image
            :src="logDetail.imageUrl"
            class="w-32 h-32 rounded object-cover"
            mode="aspectFill"
          />
        </view>

        <view class="grid grid-cols-2 gap-2 text-xs mb-3">
          <view class="text-gray-500">上报时间:</view>
          <view class="text-gray-900">{{ logDetail.date }}</view>

          <view class="text-gray-500">日志级别:</view>
          <view class="text-gray-900 capitalize">{{ logDetail.level }}</view>
        </view>
      </view>

      <!-- 处理信息 -->
      <view
        v-if="logDetail.handler"
        class="bg-white rounded-lg shadow-sm p-4 mb-4"
      >
        <view class="font-medium text-gray-900 mb-3 border-b border-gray-100 pb-2">处理信息</view>

        <view class="grid grid-cols-2 gap-2 text-xs mb-2">
          <view class="text-gray-500">处理人:</view>
          <view class="text-gray-900">{{ logDetail.handler }}</view>

          <view class="text-gray-500">处理时间:</view>
          <view class="text-gray-900">{{ logDetail.handleDate }}</view>
        </view>

        <view class="text-gray-500 text-xs mb-1">备注:</view>
        <view class="text-gray-700 text-sm bg-gray-50 p-2 rounded">
          {{ logDetail.remarks }}
        </view>
      </view>

      <view
        v-else
        class="bg-white rounded-lg shadow-sm p-4"
      >
        <view class="text-gray-500 text-center py-6">
          暂无处理信息
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
</style>