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

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 模拟日志数据
interface LogItem {
  id: number
  content: string
  imageUrl?: string
  date: string
  status: '已处理' | '处理中' | '待处理'
  level: 'info' | 'warning' | 'error'
}

const logList = ref<LogItem[]>([
  {
    id: 1,
    content: '系统运行正常，未发现异常情况。',
    imageUrl: '',
    date: '2025-10-28 14:30',
    status: '已处理',
    level: 'info'
  },
  {
    id: 2,
    content: '警告：内存使用率超过80%，请注意监控。',
    imageUrl: '/static/plus.png',
    date: '2025-10-29 09:15',
    status: '处理中',
    level: 'warning'
  },
  {
    id: 3,
    content: '严重错误：数据库连接失败，导致部分功能不可用。',
    imageUrl: '',
    date: '2025-10-29 15:42',
    status: '待处理',
    level: 'error'
  }
])

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

// 页面加载时获取数据
onMounted(() => {
  // 这里可以调用 API 获取实际数据
})

// 下拉刷新
const onPullDownRefresh = () => {
  // 模拟刷新数据
  setTimeout(() => {
    uni.stopPullDownRefresh()

    // 模拟更新数据
    logList.value.unshift({
      id: logList.value.length + 1,
      content: '新上报的日志信息，需要及时处理。',
      imageUrl: '',
      date: new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).replace(/\//g, '-'),
      status: '待处理',
      level: 'info'
    })
  }, 1000)
}

// 跳转到详情页
const goToDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/log-report/list/detail/index?id=${id}`
  })
}

// 触发下拉刷新的方法（用于测试）
const triggerRefresh = () => {
  onPullDownRefresh()
}
</script>

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

    <!-- 列表内容 -->
    <view class="p-3">
      <view
        v-for="item in logList"
        :key="item.id"
        class="bg-white rounded-lg shadow-sm mb-4 p-4"
        @click="goToDetail(item.id)"
      >
        <view class="flex justify-between items-start mb-2">
          <text class="text-gray-900 font-medium">日志 #{{ item.id }}</text>
          <text class="text-xs px-2 py-1 rounded" :class="{
            'bg-green-100 text-green-800': item.status === '已处理',
            'bg-yellow-100 text-yellow-800': item.status === '处理中',
            'bg-red-100 text-red-800': item.status === '待处理'
          }">{{ item.status }}</text>
        </view>

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

        <view v-if="item.imageUrl" class="mb-3">
          <image
            :src="item.imageUrl"
            class="w-24 h-24 rounded object-cover"
            mode="aspectFill"
          />
        </view>

        <view class="text-xs text-gray-500">
          {{ item.date }}
        </view>
      </view>

      <view v-if="logList.length === 0" class="text-center py-10 text-gray-500">
        暂无日志记录
      </view>
    </view>
  </view>
</template>

<style scoped>
</style>