feat: 移动式检修车间系统前端完成
- 完成系统日志页面，优化表格滚动和样式 - 完成报警记录页面，优化表格滚动和报警级别显示 - 完成环境参数页面，优化参数显示和监控画面 - 完成参数记录页面，优化图表样式和简洁设计 - 集成MQTT配置，支持实时数据对接 - 统一UI设计风格，采用现代化卡片式布局 - 添加响应式设计，适配不同屏幕尺寸 - 预留MQTT数据接口，支持AC空调和WSD温湿度设备
This commit is contained in:
吉浩茹
73
src/pages/index/index.vue
Normal file
73
src/pages/index/index.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
<button class="nav-button" @click="navigateToSystem">进入检修系统</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
navigateToSystem() {
|
||||
uni.navigateTo({
|
||||
url: '../system/index',
|
||||
fail: (err) => {
|
||||
console.error('导航失败:', err);
|
||||
// 尝试使用替代方法
|
||||
uni.redirectTo({
|
||||
url: '../system/index'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #3f51b5;
|
||||
color: #ffffff;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
</style>
|
||||
163
src/pages/system/index.vue
Normal file
163
src/pages/system/index.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="system-container">
|
||||
<!-- 左侧菜单栏 -->
|
||||
<SideMenu
|
||||
:activeMenuIndex="activeMenuIndex"
|
||||
@update:activeMenuIndex="updateActiveMenu"
|
||||
@showAlert="showAlert"
|
||||
/>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<view class="content-area">
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="main-content">
|
||||
<!-- <text class="content-title">{{ currentMenu.name }}</text> -->
|
||||
|
||||
<!-- 根据选中的菜单显示不同内容 -->
|
||||
<EnvironmentParams v-if="activeMenuIndex === 0" @openSettings="openSettings" />
|
||||
<ParameterRecord v-else-if="activeMenuIndex === 1" />
|
||||
<VisualMonitoring v-else-if="activeMenuIndex === 2" />
|
||||
<SystemLog v-else-if="activeMenuIndex === 3" />
|
||||
<AlarmRecord v-else-if="activeMenuIndex === 4" />
|
||||
<PlaceholderContent v-else :title="currentMenu.name" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设置弹窗 -->
|
||||
<SettingsModal
|
||||
v-model:visible="showSettingsModal"
|
||||
@save="saveSettings"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import SideMenu from '@/components/SideMenu.vue';
|
||||
import EnvironmentParams from '@/components/EnvironmentParams.vue';
|
||||
import ParameterRecord from '@/components/ParameterRecord.vue';
|
||||
import VisualMonitoring from '@/components/VisualMonitoring.vue';
|
||||
import SystemLog from '@/components/SystemLog.vue';
|
||||
import AlarmRecord from '@/components/AlarmRecord.vue';
|
||||
import SettingsModal from '@/components/SettingsModal.vue';
|
||||
import PlaceholderContent from '@/components/PlaceholderContent.vue';
|
||||
|
||||
// 菜单列表
|
||||
const menuList = ref([
|
||||
{ name: '现场环境参数' },
|
||||
{ name: '参数记录' },
|
||||
{ name: '视觉监控' },
|
||||
{ name: '日志' },
|
||||
{ name: '报警' }
|
||||
]);
|
||||
|
||||
// 当前选中的菜单索引
|
||||
const activeMenuIndex = ref(0);
|
||||
|
||||
// 当前菜单
|
||||
const currentMenu = computed(() => menuList.value[activeMenuIndex.value]);
|
||||
|
||||
// 不再需要动态组件，直接使用v-if/v-else进行条件渲染
|
||||
|
||||
// 更新当前选中的菜单
|
||||
const updateActiveMenu = (index) => {
|
||||
activeMenuIndex.value = index;
|
||||
};
|
||||
|
||||
// 显示报警信息
|
||||
const showAlert = () => {
|
||||
uni.showToast({
|
||||
title: '暂无报警项目',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
|
||||
// 设置弹窗状态
|
||||
const showSettingsModal = ref(false);
|
||||
|
||||
// 打开设置弹窗
|
||||
const openSettings = () => {
|
||||
showSettingsModal.value = true;
|
||||
};
|
||||
|
||||
// 保存设置
|
||||
const saveSettings = (settings) => {
|
||||
console.log('保存的设置:', settings);
|
||||
// 这里可以添加保存设置的逻辑
|
||||
};
|
||||
|
||||
// 页面加载时强制横屏
|
||||
onMounted(() => {
|
||||
setOrientation();
|
||||
});
|
||||
|
||||
// 设置横屏
|
||||
const setOrientation = () => {
|
||||
try {
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation('landscape-primary');
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
// H5环境下的横屏设置
|
||||
if (screen.orientation && screen.orientation.lock) {
|
||||
screen.orientation.lock('landscape').catch(err => {
|
||||
console.log('横屏锁定失败:', err);
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
} catch (error) {
|
||||
console.log('设置横屏失败:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.system-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 右侧内容区样式 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.camera-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 140rpx);
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user