311 lines
7.1 KiB
Vue
311 lines
7.1 KiB
Vue
<template>
|
||
<view class="contai_warp">
|
||
<view class="top_area_warp">
|
||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="top_nav_warp">
|
||
<view>选择设备</view>
|
||
<view class="back_button_warp" @click="goBack()">
|
||
<image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_warp">
|
||
<view class="model_warp">
|
||
<view class="content_title">设备名称</view>
|
||
<view class="content_data_warp">
|
||
<!-- 设备列表容器 -->
|
||
<div v-for="(item, index) in deviceList" :key="index" class="content_data_item">
|
||
<!-- 设备项左侧内容 -->
|
||
<div class="data_item_left">
|
||
<image class="data_item_icon" src="https://online.totustec.com/upload/selectDevice/data_item_icon.png">
|
||
</image>
|
||
<div class="data_item_txt">{{ item.brand }}</div>
|
||
</div>
|
||
|
||
<!-- 设备项右侧操作 -->
|
||
<div class="data_item_right" @click="handleView(item.deviceCode, item.status)">查看</div>
|
||
|
||
<!-- 设备使用状态图标（根据状态显示） -->
|
||
<image v-if="item.isInUse" class="in_use_warp"
|
||
src="https://online.totustec.com/upload/selectDevice/in_use_warp.png"></image>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
BASE_API_URL,
|
||
BASE_STOKECT_URL,
|
||
BASE_IMG_URL
|
||
} from "@/config.js";
|
||
export default {
|
||
data () {
|
||
return {
|
||
title: "Hello",
|
||
statusBarHeight: 0,
|
||
searchList: {
|
||
page: 1,
|
||
size: 10000,
|
||
},
|
||
deviceList: [],
|
||
|
||
|
||
// WebSocket 相关状态
|
||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||
isSocketConnected: false, // 连接状态
|
||
reconnectTimer: null, // 重连定时器
|
||
reconnectInterval: 5000 // 重连间隔（5秒）
|
||
};
|
||
},
|
||
onLoad () {
|
||
const systemInfo = wx.getSystemInfoSync();
|
||
const {
|
||
statusBarHeight, // 状态栏高度（单位：px）
|
||
} = systemInfo;
|
||
|
||
this.statusBarHeight = statusBarHeight;
|
||
|
||
|
||
this.connectWebSocket(); // 初始化 WebSocket 连接
|
||
},
|
||
onUnload () {
|
||
this.closeWebSocket(); // 页面卸载时关闭连接
|
||
},
|
||
onShow () {
|
||
this.getDeviceList(); // 每次显示页面时调用
|
||
},
|
||
methods: {
|
||
// ---------------------- WebSocket 核心方法 ----------------------
|
||
connectWebSocket () {
|
||
const wsUrl = BASE_STOKECT_URL;
|
||
|
||
// 初始化 WebSocket 连接（使用 uni-app 接口）
|
||
this.socketTask = uni.connectSocket({
|
||
url: wsUrl,
|
||
success: () => {
|
||
console.log('WebSocket 连接成功');
|
||
this.isSocketConnected = true;
|
||
this.listenSocketMessage(); // 监听消息
|
||
},
|
||
fail: (err) => {
|
||
console.error('连接失败:', err);
|
||
this.tryReconnect(); // 尝试重连
|
||
}
|
||
});
|
||
},
|
||
|
||
listenSocketMessage () {
|
||
// 监听 WebSocket 消息
|
||
uni.onSocketMessage((event) => {
|
||
console.log('event', event);
|
||
|
||
const message = JSON.parse(event.data);
|
||
console.log('收到实时消息:', message);
|
||
this.getDeviceList();
|
||
// this.updateDeviceStatus(message); // 更新设备状态
|
||
});
|
||
},
|
||
|
||
closeWebSocket () {
|
||
// 关闭连接并清理资源
|
||
if (this.socketTask) {
|
||
uni.closeSocket();
|
||
this.socketTask = null;
|
||
this.isSocketConnected = false;
|
||
}
|
||
clearTimeout(this.reconnectTimer);
|
||
},
|
||
|
||
tryReconnect () {
|
||
// 自动重连机制
|
||
clearTimeout(this.reconnectTimer);
|
||
this.reconnectTimer = setTimeout(() => {
|
||
console.log('尝试重连 WebSocket...');
|
||
this.connectWebSocket();
|
||
}, this.reconnectInterval);
|
||
},
|
||
|
||
updateDeviceStatus (message) {
|
||
console.log('实时消息');
|
||
|
||
},
|
||
goBack () {
|
||
uni.navigateBack();
|
||
},
|
||
handleView (deviceCode, status) {
|
||
if (status == -1) {
|
||
uni.showToast({
|
||
title: '设备处于断开状态，暂不支持查看',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
console.log("data", deviceCode);
|
||
uni.navigateTo({
|
||
url: `/pages/deviceManage/index?deviceCode=${deviceCode}`
|
||
});
|
||
},
|
||
async getDeviceList () {
|
||
try {
|
||
// 从本地缓存获取用户信息
|
||
const userInfo = uni.getStorageSync("userInfo") || {};
|
||
const res = await uni.request({
|
||
url: BASE_API_URL + "/api/front/user/myDevice",
|
||
method: "GET",
|
||
data: this.searchList,
|
||
header: {
|
||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||
"Authorization": userInfo.token || ""
|
||
},
|
||
});
|
||
|
||
if (res.statusCode == 200) {
|
||
this.deviceList = res.data.content
|
||
console.log('this.deviceList', this.deviceList);
|
||
|
||
}
|
||
} catch (error) {
|
||
console.log('请求接口失败', error);
|
||
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<!-- 临时样式 -->
|
||
<style scoped>
|
||
.in_use_warp {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 69rpx;
|
||
height: 67rpx;
|
||
}
|
||
|
||
.data_item_right {
|
||
width: 114rpx;
|
||
height: 48rpx;
|
||
background: #f2c141;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.data_item_txt {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.data_item_left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.data_item_icon {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.content_data_item {
|
||
height: 100rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 22rpx 0 53rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.content_data_warp {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.content_title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.content_warp {
|
||
width: 100%;
|
||
}
|
||
|
||
.model_warp {
|
||
padding: 16rpx 12rpx 0 28rpx;
|
||
}
|
||
|
||
.back_button_icon {
|
||
transform: rotate(180deg);
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.back_button_warp {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 20rpx;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contai_warp {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC !important;
|
||
min-height: 100vh;
|
||
background-color: #f1f6fc;
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
.top_area_warp {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.top_status_area {
|
||
width: 100%;
|
||
}
|
||
|
||
.top_nav_warp {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
position: relative;
|
||
z-index: 5;
|
||
position: relative;
|
||
}
|
||
</style>
|