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