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

5
src/App.vue
View File

@ -78,10 +78,15 @@ page {
// top: 0; // top: 0;
// left: 0; // left: 0;
// right: 0; // right: 0;
height: 40px;
z-index: 1000; z-index: 1000;
background-color: #3f51b5; background-color: #3f51b5;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} }
.header-title { .header-title {

4
src/components/AlarmRecord.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="page-container alarm-record-container"> <view class="page-container alarm-record-container">
<!-- 页面头部 --> <!-- 页面头部 -->
<view class="page-header"> <!-- <view class="page-header">
<view class="header-left"> <view class="header-left">
<text class="page-title">报警记录</text> <text class="page-title">报警记录</text>
</view> </view>
@ -13,7 +13,7 @@
<text class="system-title-text">移动式检修车间系统</text> <text class="system-title-text">移动式检修车间系统</text>
</view> </view>
</view> </view>
</view> </view> -->
<!-- 报警表格 --> <!-- 报警表格 -->
<view class="page-content"> <view class="page-content">

4
src/components/SystemLog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="page-container system-log-container"> <view class="page-container system-log-container">
<!-- 页面头部 --> <!-- 页面头部 -->
<view class="page-header"> <!-- <view class="page-header">
<view class="header-left"> <view class="header-left">
<text class="page-title">日志</text> <text class="page-title">日志</text>
</view> </view>
@ -13,7 +13,7 @@
<text class="system-title-text">移动式检修车间系统</text> <text class="system-title-text">移动式检修车间系统</text>
</view> </view>
</view> </view>
</view> </view> -->
<!-- 日志表格 --> <!-- 日志表格 -->
<view class="page-content"> <view class="page-content">

1
src/pages.json
View File

@ -61,6 +61,7 @@
"selectedColor": "#3f51b5", "selectedColor": "#3f51b5",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"borderStyle": "black", "borderStyle": "black",
"fontSize": "14px",
"list": [ "list": [
{ {
"pagePath": "pages/environment/index", "pagePath": "pages/environment/index",

17
src/pages/alarm/index.vue
View File

@ -7,9 +7,10 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<view class="tabbar-content"> <view class="tabbar-content">
<AlarmRecord />
<!-- 报警统计 --> <!-- 报警统计 -->
<view class="alarm-statistics"> <!-- <view class="alarm-statistics">
<view class="stat-item"> <view class="stat-item">
<text class="stat-label">总报警数</text> <text class="stat-label">总报警数</text>
<text class="stat-value total">{{ totalAlarms }}</text> <text class="stat-value total">{{ totalAlarms }}</text>
@ -26,10 +27,10 @@
<text class="stat-label">紧急报警</text> <text class="stat-label">紧急报警</text>
<text class="stat-value urgent">{{ urgentAlarms }}</text> <text class="stat-value urgent">{{ urgentAlarms }}</text>
</view> </view>
</view> </view> -->
<!-- 筛选区域 --> <!-- 筛选区域 -->
<view class="filter-section"> <!-- <view class="filter-section">
<view class="filter-row"> <view class="filter-row">
<view class="filter-item"> <view class="filter-item">
<text class="filter-label">报警级别</text> <text class="filter-label">报警级别</text>
@ -65,10 +66,10 @@
<button class="search-button" @click="searchAlarms">搜索</button> <button class="search-button" @click="searchAlarms">搜索</button>
</view> </view>
</view> </view> -->
<!-- 报警列表 --> <!-- 报警列表 -->
<view class="alarms-container"> <!-- <view class="alarms-container">
<view class="alarms-header"> <view class="alarms-header">
<text class="alarms-title">报警详情</text> <text class="alarms-title">报警详情</text>
<view class="header-actions"> <view class="header-actions">
@ -121,13 +122,17 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view> -->
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import AlarmRecord from '@/components/AlarmRecord.vue'
export default { export default {
components: {
AlarmRecord
},
data() { data() {
return { return {
totalAlarms: 28, totalAlarms: 28,

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

@ -7,9 +7,19 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<view class="tabbar-content"> <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-row">
<view class="filter-item"> <view class="filter-item">
<text class="filter-label">日志级别</text> <text class="filter-label">日志级别</text>
@ -21,15 +31,6 @@
</picker> </picker>
</view> </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>
<view class="filter-row"> <view class="filter-row">
@ -40,52 +41,40 @@
<button class="search-button" @click="searchLogs">搜索</button> <button class="search-button" @click="searchLogs">搜索</button>
</view> </view>
</view> </view> -->
<!-- 统计信息 --> <!-- 日志表格 -->
<view class="statistics-section"> <!-- <view class="logs-container">
<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-header"> <view class="logs-header">
<text class="logs-title">日志详情</text> <text class="logs-title">系统日志</text>
<view class="header-actions"> <view class="header-actions">
<button class="action-button" @click="refreshLogs">刷新</button> <button class="action-button" @click="refreshLogs">刷新</button>
<button class="action-button" @click="exportLogs">导出</button> <button class="action-button" @click="exportLogs">导出</button>
<button class="action-button clear" @click="clearLogs">清空</button> <button class="action-button clear" @click="clearLogs">清空</button>
</view> </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="table-header">
<view class="log-header"> <view class="table-cell event-header">事件</view>
<view class="log-level" :class="log.level"> <view class="table-cell time-header">时间</view>
<text>{{ log.levelText }}</text> <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>
<text class="log-time">{{ log.time }}</text> <view class="table-cell time-cell">
<text class="time-text">{{ log.time }}</text>
</view> </view>
<view class="log-content"> <view class="table-cell status-cell">
<text class="log-message">{{ log.message }}</text> <view class="status-badge" :class="log.level">
<text class="status-text">{{ log.levelText }}</text>
</view> </view>
<view class="log-details" v-if="log.details">
<text class="log-details-text">{{ log.details }}</text>
</view> </view>
</view> </view>
@ -93,13 +82,17 @@
<text class="load-more-text">加载更多...</text> <text class="load-more-text">加载更多...</text>
</view> </view>
</scroll-view> </scroll-view>
</view> </view> -->
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import SystemLog from '@/components/SystemLog.vue'
export default { export default {
components: {
SystemLog
},
data() { data() {
return { return {
levelIndex: 0, levelIndex: 0,
@ -351,8 +344,8 @@ export default {
.logs-container { .logs-container {
background: white; background: white;
border-radius: 15rpx; border-radius: 12rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
overflow: hidden; overflow: hidden;
} }
@ -360,7 +353,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx; padding: 25rpx;
border-bottom: 2rpx solid #f0f0f0; 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; height: 600rpx;
} }
.log-item { .table-row {
padding: 30rpx; display: flex;
border-bottom: 2rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
&:hover {
background-color: #f8f9fa;
}
&.error { &.error {
border-left: 8rpx solid #ff4444; background-color: #fff5f5;
} }
&.warning { &.warning {
border-left: 8rpx solid #ff9800; background-color: #fffbf0;
} }
&.info { &.info {
border-left: 8rpx solid #2196f3; background-color: #f0f8ff;
} }
} }
.log-header { .event-cell {
flex: 2;
padding: 20rpx 15rpx;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 8rpx;
margin-bottom: 15rpx;
} }
.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; padding: 8rpx 16rpx;
border-radius: 20rpx; border-radius: 20rpx;
font-size: 22rpx; font-size: 22rpx;
@ -441,32 +510,8 @@ export default {
} }
} }
.log-time { .status-text {
font-size: 24rpx; font-size: 22rpx;
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;
} }
.load-more { .load-more {

93
src/pages/visual/index.vue
View File

@ -7,99 +7,6 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<view class="tabbar-content"> <view class="tabbar-content">
<!-- 摄像头状态 -->
<view class="camera-status">
<view class="status-item">
<view class="status-icon camera-icon">📹</view>
<view class="status-info">
<text class="status-label">摄像头状态</text>
<text class="status-value" :class="cameraStatus.class">{{ cameraStatus.text }}</text>
</view>
</view>
<view class="status-item">
<view class="status-icon recording-icon">🔴</view>
<view class="status-info">
<text class="status-label">录制状态</text>
<text class="status-value" :class="recordingStatus.class">{{ recordingStatus.text }}</text>
</view>
</view>
</view>
<!-- 视频区域 -->
<view class="video-container">
<view class="video-placeholder" v-if="!videoLoaded">
<image class="placeholder-image" src="/static/camera-placeholder.jpg" mode="aspectFit"></image>
<text class="placeholder-text">摄像头未连接</text>
<button class="connect-button" @click="connectCamera">连接摄像头</button>
</view>
<view class="video-player" v-else>
<text class="video-text">实时视频流</text>
<view class="video-controls">
<button class="control-button" @click="toggleRecording">
{{ isRecording ? '停止录制' : '开始录制' }}
</button>
<button class="control-button" @click="takeSnapshot">拍照</button>
<button class="control-button" @click="toggleFullscreen">全屏</button>
</view>
</view>
</view>
<!-- 监控设置 -->
<view class="monitoring-settings">
<view class="settings-header">
<text class="settings-title">监控设置</text>
</view>
<view class="setting-item">
<text class="setting-label">录制质量</text>
<picker :value="qualityIndex" :range="qualityOptions" @change="onQualityChange">
<view class="picker-view">
<text>{{ qualityOptions[qualityIndex] }}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
<view class="setting-item">
<text class="setting-label">录制时长</text>
<picker :value="durationIndex" :range="durationOptions" @change="onDurationChange">
<view class="picker-view">
<text>{{ durationOptions[durationIndex] }}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
<view class="setting-item">
<text class="setting-label">自动保存</text>
<switch :checked="autoSave" @change="onAutoSaveChange" color="#3f51b5"/>
</view>
</view>
<!-- 录制历史 -->
<view class="recording-history">
<view class="history-header">
<text class="history-title">录制历史</text>
<button class="clear-button" @click="clearHistory">清空</button>
</view>
<scroll-view class="history-list" scroll-y="true">
<view class="history-item" v-for="(item, index) in historyList" :key="index">
<view class="history-info">
<text class="history-time">{{ item.time }}</text>
<text class="history-duration">{{ item.duration }}</text>
</view>
<view class="history-actions">
<button class="action-button" @click="playVideo(item)">播放</button>
<button class="action-button" @click="downloadVideo(item)">下载</button>
<button class="action-button delete" @click="deleteVideo(item)">删除</button>
</view>
</view>
</scroll-view>
</view>
</view> </view>
</view> </view>
</template> </template>

15
src/utils/sendMqtt.js
View File

@ -88,11 +88,14 @@ const createMqtt = () => {
// 连接失败时隐藏loading // 连接失败时隐藏loading
uni.hideLoading(); uni.hideLoading();
uni.showToast({ // uni.showToast({
title: 'MQTT连接失败' + mqtturl, // title: 'MQTT连接失败',
icon: 'error', // icon: 'error',
duration: 3000 // duration: 3000
}); // });
// 重置客户端，允许重试
client = null;
} }
}; };
@ -105,7 +108,7 @@ const initEventHandleMqtt = (topicUrl) => {
// 显示连接成功提示 // 显示连接成功提示
uni.showToast({ uni.showToast({
title: 'MQTT连接成功' + mqtturl, title: 'MQTT连接成功',
icon: 'success', icon: 'success',
duration: 2000 duration: 2000
}); });