xzzn/movecheck
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:样式优化、系统日志、报警记录表格展示

Browse Source
This commit is contained in:
吉浩茹
2025-09-30 00:29:23 +08:00
parent 1040f6aca1
commit bb5951df76
8 changed files with 164 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/pages/log/index.vue
View File

@ -7,9 +7,19 @@
<!-- 内容区域 -->
<view class="tabbar-content">
<!-- <view class="filter-item">
<text class="filter-label">时间范围</text>
<picker mode="date" :value="logDate" @change="onDateChange">
<view class="picker-view">
<text>{{ logDate }}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view> -->
<SystemLog />
<!-- 筛选区域 -->
<view class="filter-section">
<!-- <view class="filter-section">
<view class="filter-row">
<view class="filter-item">
<text class="filter-label">日志级别</text>
@ -21,15 +31,6 @@
</picker>
</view>
<view class="filter-item">
<text class="filter-label">时间范围</text>
<picker mode="date" :value="logDate" @change="onDateChange">
<view class="picker-view">
<text>{{ logDate }}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
</view>
<view class="filter-row">
@ -40,52 +41,40 @@
<button class="search-button" @click="searchLogs">搜索</button>
</view>
</view>
</view> -->
<!-- 统计信息 -->
<view class="statistics-section">
<view class="stat-item">
<text class="stat-label">总日志数</text>
<text class="stat-value">{{ totalLogs }}</text>
</view>
<view class="stat-item">
<text class="stat-label">错误日志</text>
<text class="stat-value error">{{ errorLogs }}</text>
</view>
<view class="stat-item">
<text class="stat-label">警告日志</text>
<text class="stat-value warning">{{ warningLogs }}</text>
</view>
<view class="stat-item">
<text class="stat-label">信息日志</text>
<text class="stat-value info">{{ infoLogs }}</text>
</view>
</view>
<!-- 日志列表 -->
<view class="logs-container">
<!-- 日志表格 -->
<!-- <view class="logs-container">
<view class="logs-header">
<text class="logs-title">日志详情</text>
<text class="logs-title">系统日志</text>
<view class="header-actions">
<button class="action-button" @click="refreshLogs">刷新</button>
<button class="action-button" @click="exportLogs">导出</button>
<button class="action-button clear" @click="clearLogs">清空</button>
</view>
</view>
</view> -->
<scroll-view class="logs-list" scroll-y="true" @scrolltolower="loadMoreLogs">
<view class="log-item" v-for="(log, index) in logs" :key="index" :class="log.level">
<view class="log-header">
<view class="log-level" :class="log.level">
<text>{{ log.levelText }}</text>
<!-- 表格头部 -->
<!-- <view class="table-header">
<view class="table-cell event-header">事件</view>
<view class="table-cell time-header">时间</view>
<view class="table-cell status-header">状态</view>
</view> -->
<!-- 表格内容 -->
<!-- <scroll-view class="table-content" scroll-y="true" @scrolltolower="loadMoreLogs">
<view class="table-row" v-for="(log, index) in logs" :key="index" :class="log.level">
<view class="table-cell event-cell">
<text class="event-message">{{ log.message }}</text>
<text class="event-details" v-if="log.details">{{ log.details }}</text>
</view>
<view class="table-cell time-cell">
<text class="time-text">{{ log.time }}</text>
</view>
<view class="table-cell status-cell">
<view class="status-badge" :class="log.level">
<text class="status-text">{{ log.levelText }}</text>
</view>
<text class="log-time">{{ log.time }}</text>
</view>
<view class="log-content">
<text class="log-message">{{ log.message }}</text>
</view>
<view class="log-details" v-if="log.details">
<text class="log-details-text">{{ log.details }}</text>
</view>
</view>
@ -93,13 +82,17 @@
<text class="load-more-text">加载更多...</text>
</view>
</scroll-view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import SystemLog from '@/components/SystemLog.vue'
export default {
components: {
SystemLog
},
data() {
return {
levelIndex: 0,
@ -351,8 +344,8 @@ export default {
.logs-container {
background: white;
border-radius: 15rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
overflow: hidden;
}
@ -360,7 +353,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
padding: 25rpx;
border-bottom: 2rpx solid #f0f0f0;
}
@ -387,39 +380,115 @@ export default {
}
}
.logs-list {
/* 表格样式 */
.table-header {
display: flex;
background-color: #f8f9fa;
border-bottom: 2rpx solid #e0e0e0;
}
.table-cell {
padding: 20rpx 15rpx;
font-size: 28rpx;
font-weight: bold;
color: #333;
border-right: 1rpx solid #e0e0e0;
&:last-child {
border-right: none;
}
}
.event-header {
flex: 2;
text-align: left;
}
.time-header {
flex: 1.2;
text-align: center;
}
.status-header {
flex: 0.8;
text-align: center;
}
.table-content {
height: 600rpx;
}
.log-item {
padding: 30rpx;
border-bottom: 2rpx solid #f0f0f0;
.table-row {
display: flex;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #f8f9fa;
}
&.error {
border-left: 8rpx solid #ff4444;
background-color: #fff5f5;
}
&.warning {
border-left: 8rpx solid #ff9800;
background-color: #fffbf0;
}
&.info {
border-left: 8rpx solid #2196f3;
background-color: #f0f8ff;
}
}
.log-header {
.event-cell {
flex: 2;
padding: 20rpx 15rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
flex-direction: column;
gap: 8rpx;
}
.log-level {
.event-message {
font-size: 28rpx;
color: #333;
line-height: 1.4;
}
.event-details {
font-size: 24rpx;
color: #666;
line-height: 1.3;
background-color: #f8f8f8;
padding: 8rpx 12rpx;
border-radius: 6rpx;
}
.time-cell {
flex: 1.2;
padding: 20rpx 15rpx;
display: flex;
align-items: center;
justify-content: center;
}
.time-text {
font-size: 24rpx;
color: #666;
text-align: center;
}
.status-cell {
flex: 0.8;
padding: 20rpx 15rpx;
display: flex;
align-items: center;
justify-content: center;
}
.status-badge {
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 22rpx;
@ -441,32 +510,8 @@ export default {
}
}
.log-time {
font-size: 24rpx;
color: #666;
}
.log-content {
margin-bottom: 10rpx;
}
.log-message {
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
.log-details {
background-color: #f8f8f8;
padding: 15rpx;
border-radius: 8rpx;
margin-top: 10rpx;
}
.log-details-text {
font-size: 24rpx;
color: #666;
line-height: 1.4;
.status-text {
font-size: 22rpx;
}
.load-more {