fix:新增主页跳转调用MQTT逻辑
This commit is contained in:
吉浩茹
@ -114,7 +114,10 @@ page {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
// padding-bottom: 60px
|
||||
// #ifdef H5
|
||||
margin-bottom: 50px;
|
||||
// #endif
|
||||
}
|
||||
|
||||
/* 非tabbar页面内容区域 */
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/environment/index",
|
||||
"style": {
|
||||
@ -35,12 +41,6 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "移动式检修车间"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/system/index",
|
||||
"style": {
|
||||
|
||||
@ -111,14 +111,14 @@
|
||||
</view>
|
||||
<view class="control-info">
|
||||
<text class="last-update">最后更新: {{ lastUpdate }}</text>
|
||||
<view class="connection-info">
|
||||
<!-- <view class="connection-info">
|
||||
<text class="connection-status" :class="connectionStatus.isConnected ? 'connected' : 'disconnected'">
|
||||
{{ connectionStatus.isConnected ? 'MQTT已连接' : 'MQTT未连接' }}
|
||||
</text>
|
||||
<button v-if="!connectionStatus.isConnected" class="reconnect-btn" @click="manualReconnect">
|
||||
重连
|
||||
</button>
|
||||
</view>
|
||||
</view> -->
|
||||
<text class="temperature-range">温度控制: {{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text>
|
||||
<text class="humidity-range">湿度控制: {{ humidityRange.min }}% - {{ humidityRange.max }}%</text>
|
||||
</view>
|
||||
|
||||
@ -1,24 +1,46 @@
|
||||
<template>
|
||||
<view class="index-page">
|
||||
<!-- 固定头部 -->
|
||||
<view class="fixed-header">
|
||||
<text class="header-title">移动式检修车间</text>
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 上部区域：Logo和标题 -->
|
||||
<view class="top-section">
|
||||
<!-- Logo区域 -->
|
||||
<view class="logo-container">
|
||||
<view class="logo-circle">
|
||||
<view class="logo-inner">
|
||||
<view class="s-shape s-blue">S</view>
|
||||
<view class="s-shape s-green">S</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="non-tabbar-content">
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{ title }}</text>
|
||||
<!-- 应用名称 -->
|
||||
<view class="app-title">
|
||||
<text class="title-text">上动物联</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下部区域：按钮和版本号 -->
|
||||
<view class="bottom-section">
|
||||
<!-- 进入系统按钮 -->
|
||||
<view class="action-container">
|
||||
<button class="enter-button" @click="navigateToTabBar">
|
||||
<text class="button-text">进入系统 →</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 版本号 -->
|
||||
<view class="version-container">
|
||||
<text class="version-text">版本 1.0.0</text>
|
||||
</view>
|
||||
<button class="nav-button" @click="navigateToTabBar">进入检修系统</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { manualReconnect } from '@/utils/sendMqtt.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -28,25 +50,84 @@ export default {
|
||||
onLoad() {},
|
||||
methods: {
|
||||
navigateToTabBar() {
|
||||
console.log('🔧 用户点击进入系统，开始MQTT重连...')
|
||||
|
||||
// 立即显示连接提示
|
||||
uni.showLoading({
|
||||
title: '正在连接MQTT...',
|
||||
// mask: true
|
||||
})
|
||||
|
||||
// 调用MQTT重连函数
|
||||
try {
|
||||
manualReconnect()
|
||||
console.log('✅ MQTT重连函数已调用')
|
||||
|
||||
// 延迟跳转，给MQTT连接一些时间
|
||||
setTimeout(() => {
|
||||
// 更新loading文本
|
||||
uni.showLoading({
|
||||
title: '正在跳转系统...',
|
||||
// mask: true
|
||||
})
|
||||
uni.hideLoading()
|
||||
// 跳转到tabbar的第一个页面（环境参数页面）
|
||||
uni.switchTab({
|
||||
url: '/pages/environment/index',
|
||||
success: () => {
|
||||
console.log('✅ 成功跳转到环境参数页面')
|
||||
uni.showToast({
|
||||
title: '系统连接成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('跳转到tabbar失败:', err);
|
||||
console.error('❌ 跳转到tabbar失败:', err);
|
||||
// 如果失败，尝试使用redirectTo
|
||||
uni.redirectTo({
|
||||
url: '/pages/environment/index'
|
||||
});
|
||||
url: '/pages/environment/index',
|
||||
success: () => {
|
||||
console.log('✅ 使用redirectTo成功跳转')
|
||||
uni.showToast({
|
||||
title: '系统连接成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
fail: (redirectErr) => {
|
||||
console.error('❌ redirectTo也失败:', redirectErr)
|
||||
uni.showToast({
|
||||
title: '页面跳转失败',
|
||||
icon: 'error',
|
||||
duration: 1000
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
}, 300) // 1秒后开始跳转
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ MQTT重连失败:', error)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: 'MQTT连接失败',
|
||||
icon: 'error',
|
||||
duration: 1000
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.index-page {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@ -56,35 +137,114 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
/* 上部区域 */
|
||||
.top-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-container {
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.logo-circle {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 50rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
.logo-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #3f51b5;
|
||||
.s-shape {
|
||||
position: absolute;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial', sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.s-blue {
|
||||
color: #2196f3;
|
||||
transform: rotate(-20deg) translateX(-12rpx) translateY(-2rpx);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.s-green {
|
||||
color: #4caf50;
|
||||
transform: rotate(20deg) translateX(12rpx) translateY(2rpx);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 应用名称 */
|
||||
.app-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下部区域 */
|
||||
.bottom-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
/* 进入系统按钮 */
|
||||
.action-container {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.enter-button {
|
||||
background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 50rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.2);
|
||||
min-width: 200rpx;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #ffffff;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
margin-top: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 版本号 */
|
||||
.version-container {
|
||||
/* 移除绝对定位，让它跟随下部区域布局 */
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -73,7 +73,7 @@ const createMqtt = () => {
|
||||
// 显示连接loading
|
||||
uni.showLoading({
|
||||
title: 'MQTT连接中...',
|
||||
mask: true
|
||||
// mask: true
|
||||
});
|
||||
|
||||
client = mqtt.connect(mqtturl, options);
|
||||
@ -242,7 +242,7 @@ const manualReconnect = () => {
|
||||
closeMqtt();
|
||||
setTimeout(() => {
|
||||
createMqtt();
|
||||
}, 1000);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
export {
|
||||
|
||||
Reference in New Issue
Block a user