Jelajahi Sumber

feat(log-report): 新增日志详情页面

- 创建日志详情页基础结构与样式- 实现根据ID获取并展示日志详细信息
- 支持显示日志状态、级别及处理信息
- 添加返回上一页功能
- 模拟不同日志数据用于展示效果
nahida 6 bulan lalu
induk
melakukan
7e1e7374d9
1 mengubah file dengan 155 tambahan dan 0 penghapusan
  1. 155 0
      src/pages/log-report/list/detail/index.vue

+ 155 - 0
src/pages/log-report/list/detail/index.vue

@@ -0,0 +1,155 @@
+<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>