xunyingcloud/totustec-unipp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
18796357645 2025-07-15 12:16:22 +08:00
parent 4deb66a50c
commit e1c87cc001
22 changed files with 3428 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -9,3 +9,6 @@ docs/_book
# TODO: where does this rule come from? # TODO: where does this rule come from?
test/ test/
.idea
.hbuilderx
unpackage

46
App.vue Normal file
View File

@ -0,0 +1,46 @@
<script>
export default {
onLaunch: function () {
console.log("App Launch");
uni.login({
success: (res) => {
if (res.code) {
this.loginWithPhoneNumber(res.code);
}
},
});
},
onShow: function () {
console.log("App Show");
},
onHide: function () {
console.log("App Hide");
},
methods: {
async loginWithPhoneNumber (code) {
try {
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
method: "POST",
data: { code },
header: {
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
},
});
if (res.statusCode == 200) {
// 存储用户信息到本地缓存（uni-app接口）
uni.setStorageSync("userInfo", res.data);
// uni.showToast({ title: "登录成功" });
}
} catch (error) {
// uni.showToast({ title: "登录失败", icon: "none" });
}
},
},
};
</script>
<style>
/*每个页面公共css */
</style>

20
index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

22
main.js Normal file
View File

@ -0,0 +1,22 @@
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

75
manifest.json Normal file
View File

@ -0,0 +1,75 @@
{
"name" : "Project",
"appid" : "__UNI__6C05555",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx583d0c321ef43dfe",
"setting" : {
"urlCheck" : false,
"minified" : true,
"postcss" : true,
"es6" : true
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
}

87
pages.json Normal file
View File

@ -0,0 +1,87 @@
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom" // 首页使用自定义导航栏（需手动绘制）
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/mine/update",
"style": {
"navigationBarTitleText": "个人资料",
"navigationStyle": "custom"
}
},
{
"path": "pages/deviceBind/index",
"style": {
"navigationBarTitleText": "设备绑定",
"navigationStyle": "custom"
}
},
{
"path": "pages/selectDevice/index",
"style": {
"navigationBarTitleText": "选择设备",
"navigationStyle": "custom"
}
},
{
"path": "pages/device/index",
"style": {
"navigationBarTitleText": "设备",
"navigationStyle": "custom"
}
},
{
"path": "pages/deviceManage/index",
"style": {
"navigationBarTitleText": "设备管理",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#8A8A8A",
"selectedColor": "#007AFF",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/index.png",
"selectedIconPath": "static/tabbar/index_select.png"
},
{
"pagePath": "pages/device/index",
"text": "设备",
"iconPath": "static/tabbar/device.png",
"selectedIconPath": "static/tabbar/device_select.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "static/tabbar/mine.png",
"selectedIconPath": "static/tabbar/mine_select.png"
}
]
},
"uniIdRouter": {}
}

450
pages/device/index.vue Normal file
View File

@ -0,0 +1,450 @@
<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="middle_area_warp">
<!-- 设备状态 -->
<view class="device_area_warp">
<view class="device_top">
<view class="device_top_left">
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img1.png"></image>
<view class="top_left_text">设备状态</view>
</view>
<view class="device_top_right" @click="toPage('绑定设备')">
<image class="top_right_icon" src="https://online.totustec.com/upload/indexPage/top_right_icon.png"></image>
<view class="top_right_text">绑定设备</view>
</view>
</view>
<view class="device_table_warp">
<view class="device_table_area">
<view class="device_table_top">
<view class="table_top_item" style="padding-left: 27rpx">机器序号</view>
<view class="table_top_item" style="width: 301rpx">机器描述</view>
<view class="table_top_item" style="width: 200rpx">设备运行状态</view>
</view>
<view class="table_data_warp" v-if="deviceList.length > 0">
<view class="table_data_item" v-for="(item, index) in deviceList">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view>
<view class="data_item_line" style="width: 301rpx">{{ item.brand }}</view>
<view class="data_item_line" style="width: 200rpx">
<view class="label_warp" v-if="item.status == 0">
<view class="label_icon"></view>
<view class="label_text">空闲</view>
</view>
<view class="label_warp" v-if="item.status == 2">
<view class="label_icon" style="background: #00abff"></view>
<view class="label_text" style="color: #00abff">准备中</view>
</view>
<view class="label_warp" v-if="item.status == 1">
<view class="label_icon" style="background: #00d195"></view>
<view class="label_text" style="color: #00d195">打印中</view>
</view>
<view class="label_warp" v-if="item.status == 3">
<view class="label_icon" style="background: #FDCB3B"></view>
<view class="label_text" style="color: #FDCB3B">铲件中</view>
</view>
<view class="label_warp" v-if="item.status == -1">
<view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
</view>
<!-- 暂无数据 -->
<view class="table_nodata_area" v-else>
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
</image>
<view class="table_nodata_text">暂无设备，请绑定设备～</view>
</view>
</view>
</view>
</view>
<view style="height: 100rpx"></view>
</view>
<image class="equipment_control_warp" src="https://online.totustec.com/upload/devicePage/equipment_control_warp.png"
@click="toPage('设备控制')">
</image>
</view>
</template>
<script>
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 = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
// 初始化 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('实时消息');
},
toPage (type) {
if (type == "设备控制") {
uni.navigateTo({
url: "/pages/selectDevice/index",
});
}
if (type == "绑定设备") {
uni.navigateTo({
url: "/pages/deviceBind/index",
});
}
},
async getDeviceList () {
try {
// 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({
url: "https://online.totustec.com/api/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>
.label_icon {
width: 18rpx;
height: 18rpx;
background: #cccccc;
border-radius: 100%;
}
.label_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
margin-left: 8rpx;
}
.label_text2 {
color: #ff0000;
}
.label_warp {
display: flex;
align-items: center;
margin-left: 48rpx;
}
.label_warp2 {
display: flex;
align-items: center;
}
.data_item_line {
width: 209rpx;
min-height: 82rpx;
display: flex;
align-items: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
}
.table_data_warp {
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
}
.table_data_item {
width: 100%;
display: flex;
flex-direction: column;
}
.data_display_warp {
display: flex;
align-items: center;
}
.data_dline_warp {
padding: 0 22rpx;
}
.data_dline_css {
width: 100%;
border: 1rpx solid #ededed;
}
</style>
<style scoped>
.equipment_control_warp {
position: fixed;
right: 44rpx;
bottom: 15%;
width: 120rpx;
height: 120rpx;
}
.contai_warp {
display: flex;
flex-direction: column;
align-items: center;
font-family: PingFang SC, PingFang SC !important;
min-height: 100vh;
background-color: #f1f6fc;
}
.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;
}
.container_warp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: PingFang SC, PingFang SC !important;
}
.table_nodata_area {
width: 100%;
height: 429rpx;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.table_nodata_img {
width: 316rpx;
height: 262rpx;
}
.table_nodata_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #666666;
}
.table_top_item {
width: 209rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.device_table_top {
width: 100%;
height: 73rpx;
background: #f0f0f0;
border-radius: 20rpx 20rpx 0rpx 0rpx;
display: flex;
align-items: center;
}
.device_table_area {
width: 100%;
display: flex;
flex-direction: column;
}
.device_table_warp {
padding: 0 20rpx;
}
.device_top_right {
display: flex;
width: 158rpx;
height: 42rpx;
background: #0095de;
border-radius: 21rpx;
align-items: center;
margin-right: 18rpx;
}
.top_right_icon {
display: flex;
width: 31rpx;
height: 31rpx;
margin: 0 10rpx 0 14rpx;
}
.top_right_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #ffffff;
}
.device_area_warp {
display: flex;
flex-direction: column;
}
.device_top {
width: 100%;
display: flex;
justify-content: space-between;
margin: 12rpx 0 29rpx 0;
}
.device_top_left {
display: flex;
margin-left: 20rpx;
}
.top_left_img1 {
width: 46rpx;
height: 46rpx;
display: block;
}
.top_left_text {
font-family: PingFang SC, PingFang SC !important;
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin-left: 7rpx;
}
.middle_area_warp {
width: 100%;
background: #f1f6fc;
border-radius: 30rpx 30rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
margin-top: -28rpx;
padding-top: 28rpx;
}
</style>

312
pages/deviceBind/index.vue Normal file
View File

@ -0,0 +1,312 @@
<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_area_warp">
<view class="content_warp">
<view class="content_item_warp" @click="scanCode()">
<view class="content_item_left">
<view class="item_left_txt1">扫码绑定</view>
<!-- <view class="item_left_txt2">副文案副文案</view> -->
</view>
<image class="content_item_right" src="https://online.totustec.com/upload/deviceBind/content_item_right1.png">
</image>
</view>
<!-- <view class="content_item_warp" @click="deviceBingDialog.show = true">
<view class="content_item_left">
<view class="item_left_txt1">输入设备名称</view>
<view class="item_left_txt2">副文案副文案</view>
</view>
<image
class="content_item_right"
src="https://online.totustec.com/upload/deviceBind/content_item_right2.png"
></image>
</view> -->
</view>
</view>
<view class="pop_up_warp" v-if="deviceBingDialog.show">
<view class="pop_up_content">
<view class="popUp_content">
<input class="popUp_input" placeholder="请输入设备名称" v-model="deviceBingDialog.deviceName" />
</view>
<view class="popUp_button_warp">
<view class="popUp_button_item">取消</view>
<view class="popUp_button_item popUp_button_css" @click="binding()">绑定</view>
</view>
<image class="colse_icon" src="https://online.totustec.com/upload/deviceBind/colse_icon.png"
@click="deviceBingDialog.show = false">
</image>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
title: "Hello",
statusBarHeight: 0,
deviceBingDialog: {
show: false,
deviceName: "",
},
deviceCode: ""
};
},
onLoad () {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // 状态栏高度（单位：px）
} = systemInfo;
this.statusBarHeight = statusBarHeight;
},
methods: {
binding () {
console.log("此处绑定");
},
goBack () {
uni.navigateBack();
},
scanCode () {
uni.scanCode({
onlyFromCamera: true, // 只允许从相机扫码
scanType: ['qrCode'], // 只识别二维码
success: (res) => {
console.log('扫码结果:', res);
if (res.result) {
// 扫码成功，获取到设备ID或编码
this.deviceCode = res.result;
// 调用绑定接口
this.bindDevice();
}
},
fail: (err) => {
console.error('扫码失败:', err);
// uni.showToast({
// title: '扫码失败，请重试',
// icon: 'none'
// });
}
});
},
async bindDevice () {
try {
const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/bindingDevice`,
method: "GET",
data: {
deviceCode: this.deviceCode
},
header: {
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
"Authorization": uni.getStorageSync("userInfo")?.token || ""
}
});
uni.showModal({
title: '提示',
content: res.data.message, // 直接显示完整文本
showCancel: false // 不显示取消按钮（可选）
});
// console.log('res', res);
// if (res.statusCode === 200) {
// uni.showToast({ title: "绑定成功" });
// }
} catch (error) {
console.error("设备绑定失败:", error);
uni.showToast({ title: "设备绑定失败", icon: "none" });
}
},
},
};
</script>
<!-- 临时样式 -->
<style scoped>
.colse_icon {
position: absolute;
right: 21rpx;
top: 19rpx;
width: 40rpx;
height: 40rpx;
}
.popUp_button_css {
color: #0095de !important;
border-left: 1rpx solid #f0f0f0;
}
.popUp_button_item {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #666666;
}
.popUp_button_warp {
width: 100%;
height: 80rpx;
border-top: 1rpx solid #f0f0f0;
display: flex;
}
.popUp_input {
width: 534rpx;
height: 80rpx;
background: #f3f3f3;
border-radius: 10rpx;
padding-left: 31rpx;
}
.popUp_content {
width: 100%;
height: 230rpx;
display: flex;
justify-content: center;
align-items: center;
}
.pop_up_content {
width: 600rpx;
background: #ffffff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
position: relative;
}
.pop_up_warp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.content_item_right {
width: 106rpx;
height: 106rpx;
margin-right: 23rpx;
}
.item_left_txt2 {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-top: 3rpx;
}
.item_left_txt1 {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #000000;
}
.content_item_left {
display: flex;
flex-direction: column;
margin-left: 26rpx;
}
.content_item_warp {
width: 340rpx;
height: 158rpx;
background: linear-gradient(180deg, #eaebfc 0%, #ffffff 100%);
border-radius: 20rpx;
border: 1rpx solid #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
}
.content_area_warp {
width: 100%;
}
.content_warp {
padding: 23rpx 20rpx 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<style scoped>
.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;
}
.contai_warp {
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>

785
pages/deviceManage/index.vue Normal file
View File

@ -0,0 +1,785 @@
<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_area_warp">
<view class="content_warp">
<!-- 视频、图片 -->
<view class="select_device_warp">
<view class="modal_warp">
<view class="select_device_item" :class="{ device_active: getType == 'video' }"
@click="getVideoImg('video')">
获取视频
</view>
<view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')">
获取图片</view>
</view>
</view>
<!-- 临时调试 -->
<!-- <video class="img_video_warp" src="http://broadcasting.totustec.com/live/12345678.m3u8" v-if="socketData.videoUrl"></video> -->
<video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl"></image>
<!-- 设备状态选择 -->
<view class="select_device_warp">
<view class="modal_warp">
<view class="select_device_item device_model" :class="{ device_active: deviceType == 1 }"
@click="deviceType = 1">设备状态</view>
<view class="select_device_item device_model" :class="{ device_active: deviceType == 2 }"
@click="deviceType = 2">设备日志</view>
<view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }"
@click="deviceType = 3">设备控制</view>
</view>
</view>
<!-- 设备状态 -->
<view class="device_status_warp" v-if="deviceType == 1">
<!-- 设备名称 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">设备名称</view>
<view class="item_content_middel">{{
deviceDetail.brand
}}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 打印状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">状态</view>
<view class="item_content_middel">
<view class="label_warp" v-if="deviceDetail.status == 0">
<view class="label_icon"></view>
<view class="label_text">空闲</view>
</view>
<view class="label_warp" v-if="deviceDetail.status == 2">
<view class="label_icon" style="background: #00abff"></view>
<view class="label_text" style="color: #00abff">准备中</view>
</view>
<view class="label_warp" v-if="deviceDetail.status == 1">
<view class="label_icon" style="background: #00d195"></view>
<view class="label_text" style="color: #00d195">打印中</view>
</view>
<view class="label_warp" v-if="deviceDetail.status == 3">
<view class="label_icon" style="background: #fdcb3b"></view>
<view class="label_text" style="color: #fdcb3b">铲件中</view>
</view>
<view class="label_warp" v-if="deviceDetail.status == -1">
<view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view>
</view>
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"> </view>
</view>
</view>
</view>
</view>
<!-- 子状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">子状态</view>
<view class="item_content_middel">
<view class="label_warp2">
<!-- 状态图标颜色映射 -->
<view class="label_icon" :style="{
background: getStatusColor(deviceDetail.errorStatus),
}"></view>
<!-- 状态文字条件渲染 -->
<view class="label_text label_text2" :style="{
color: getStatusColor(deviceDetail.errorStatus),
}">
{{ getStatusText(deviceDetail.errorStatus) }}
</view>
</view>
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 当前时间 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">当前时间</view>
<view class="item_content_middel">{{ getCurrentTime() }}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 错误码 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">错误码</view>
<view class="item_content_middel">
<!-- {{deviceDetail.errorStatus}} -->
{{ deviceDetail.errorStatus === -1 ? '断开' : deviceDetail.errorStatus }}
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 设备控制 -->
<view class="device_control_warp" v-if="deviceType == 3">
<view class="deviceN_input_warp">
<view class="device_name_txt"> 请输入设备名称：</view>
<view class="deviceN_input_area">
<input class="deviceN_input" type="text" v-model="deviceName" />
<view class="clear_deviceN_warp">
<image class="clear_deviceN_icon" @click="deviceName = ''" v-if="deviceName"
src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png"></image>
</view>
</view>
</view>
<view class="deviceN_input_tip">文件位置：桌面File文件夹内</view>
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{
backgroundColor:
deviceDetail.status == 0 && deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt">开始打印</view>
</view>
<view class="device_operation_btn" @click="operationData('CONTINUE')" :style="{
backgroundColor:
deviceDetail.status != 1 &&
deviceDetail.printStatus != 6 &&
deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">继续打印</view>
</view>
</view>
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor:
deviceDetail.status == 2 && deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt">暂停打印</view>
</view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{
backgroundColor:
deviceDetail.status != 0 && deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">退出打印</view>
</view>
</view>
<view class="device_operation_warp">
<view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image>
<view class="operation_btn_txt">报警继续</view>
</view>
<view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image>
<view class="operation_btn_txt">报警退出</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
deviceName: "",
title: "Hello",
statusBarHeight: 0,
getType: "video",
deviceType: 3,
deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据
statusMap: {
0: { text: "正常", color: "#00d195" }, // 绿色
1: { text: "文件校验失败", color: "#ff0000" }, // 红色
2: { text: "设备或加密错误", color: "#ff0000" },
3: { text: "打印准备过程出错", color: "#ff0000" }, // 橙色
4: { text: "打印出错", color: "#ff0000" },
5: { text: "加液失败", color: "#ff9800" },
6: { text: "铲件失败", color: "#ff9800" },
7: { text: "图片异物", color: "#ff0000" },
},
// WebSocket 相关状态
socketTask: null, // uni-app 的 WebSocket 任务实例
isSocketConnected: false, // 连接状态
reconnectTimer: null, // 重连定时器
reconnectInterval: 5000, // 重连间隔（5秒）
socketData: {},
};
},
onLoad (options) {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // 状态栏高度（单位：px）
} = systemInfo;
this.statusBarHeight = statusBarHeight;
this.deviceCode = options.deviceCode || "";
console.log("接收到的设备编码:", this.deviceCode);
// 立即根据设备编码获取详情数据
if (this.deviceCode) {
this.getDeviceDetail();
}
this.connectWebSocket(); // 初始化 WebSocket 连接
},
onUnload () {
this.closeWebSocket(); // 页面卸载时关闭连接
},
methods: {
// ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () {
const wsUrl = "ws://e7eb22d8.natappfree.cc/webSocket/vue";
// 初始化 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);
this.getDeviceDetail();
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("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
this.getDeviceDetail();
}
// ERROR 抛出异常信息
if (message.msgType == "ERROR") {
uni.showToast({ title: message.msg, icon: "none" });
}
// INFO 返回视频/图片地址
if (message.msgType == "INFO") {
this.socketData = message.data;
if (this.socketData.imageUrl) {
this.socketData.imageUrl =
"http://e7eb22d8.natappfree.cc" + message.data.imageUrl;
}
}
// WRITEIMG 接收图片数据中
if (message.msgType == "WRITEIMG") {
if (message.data.chunkIndex == message.data.totalChunks) {
// 微信图片小区域转圈圈加载
} else {
// 关闭加载
}
}
},
/**
* 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/
sendWsCommand (command) {
if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令");
return;
}
// 确保 deviceCode 存在（从 URL 参数获取）
if (!this.deviceCode) {
console.error("设备编号未获取，无法发送指令");
return;
}
const message = {
Topic: `sdcp/request/${this.deviceCode}`, // 替换 MainboardID 为 deviceCode
command: command,
};
if (command == "PRINT") {
message.filename = this.deviceName;
}
// 发送消息（使用 uni-app 的 sendSocketMessage）
uni
.sendSocketMessage({
data: JSON.stringify(message),
})
.then(() => {
console.log("指令发送成功:", message);
})
.catch((err) => {
console.error("指令发送失败:", err);
});
},
operationData (type) {
if (type == "PRINT") {
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
this.sendWsCommand(type);
}
}
if (type == "CONTINUE") {
if (
this.deviceDetail.status != 1 &&
this.deviceDetail.printStatus != 6 &&
this.deviceDetail.status != -1
) {
this.sendWsCommand(type);
}
}
if (type == 'PAUSE') {
if (this.deviceDetail.status == 2 && this.deviceDetail.status != -1) {
this.sendWsCommand(type);
}
}
if (type == 'EXIT') {
if (this.deviceDetail.status != 0 && this.deviceDetail.status != -1) {
this.sendWsCommand(type);
}
}
},
getVideoImg (type) {
if (type == "img") {
this.getType = "img";
this.sendWsCommand("IMAGE");
} else {
this.getType = "video";
this.sendWsCommand("OPEN_VIDEO");
}
},
// 获取状态文字
getStatusText (status) {
if (status == -1) {
return "断开";
}
return this.statusMap[status]?.text || "";
},
// 获取状态颜色
getStatusColor (status) {
if (status == -1) {
return "#999999";
}
return this.statusMap[status]?.color; // 默认灰色
},
getCurrentTime () {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
return `${year}.${month}.${day} ${hours}:${minutes}`;
},
goBack () {
uni.navigateBack();
},
async getDeviceDetail () {
try {
const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/get`,
method: "GET",
data: {
deviceCode: this.deviceCode,
},
header: {
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
Authorization: uni.getStorageSync("userInfo")?.token || "",
},
});
if (res.statusCode === 200) {
this.deviceDetail = res.data;
console.log("设备详情:", this.deviceDetail);
}
} catch (error) {
console.error("获取设备详情失败:", error);
uni.showToast({ title: "获取设备信息失败", icon: "none" });
}
},
},
};
</script>
<!-- 临时样式 -->
<style scoped>
.operation_btn_icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.operation_btn_txt {
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.device_operation_btn {
width: 320rpx;
height: 68rpx;
background: #ffffff;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.device_operation_warp {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
}
.deviceN_input_tip {
margin: 24rpx 0 70rpx 0;
font-weight: 400;
font-size: 26rpx;
color: #666666;
width: 100%;
display: flex;
justify-content: center;
}
.device_control_warp {
width: 710rpx;
margin-top: 32rpx;
display: flex;
flex-direction: column;
}
.deviceN_input_warp {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.device_name_txt {
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
.deviceN_input_area {
position: relative;
}
.clear_deviceN_warp {
position: absolute;
right: 16rpx;
top: 0;
height: 100%;
display: flex;
align-items: center;
z-index: 99;
}
.clear_deviceN_icon {
width: 26rpx;
height: 26rpx;
}
.deviceN_input {
width: 419rpx;
height: 74rpx;
background: #ffffff;
border-radius: 10rpx;
padding-left: 30rpx;
font-weight: 400;
font-size: 28rpx;
color: #666666;
}
.label_text {
margin-left: 8rpx;
}
.label_text2 {
color: #ff0000;
}
.label_warp {
display: flex;
align-items: center;
}
.label_warp2 {
display: flex;
align-items: center;
}
.label_icon {
width: 18rpx;
height: 18rpx;
background: #cccccc;
border-radius: 100%;
}
.item_content_model {
padding: 0 20rpx;
}
.item_content_line {
width: 100%;
height: 1rpx;
background-color: #ededed;
}
.itemContent_line_warp {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.item_content_middel {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
display: flex;
align-items: center;
}
.item_content_left {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #333333;
margin-left: 5rpx;
width: 222rpx;
}
.item_content_warp {
display: flex;
align-items: center;
}
.statusItem_modal_warp {
padding: 0 22rpx;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.device_status_item {
width: 100%;
height: 81rpx;
}
.device_status_warp {
width: 710rpx;
background: #ffffff;
margin-top: 23rpx;
display: flex;
flex-direction: column;
}
.modal_warp {
padding: 0 16rpx;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.device_active {
background-color: #ffffff !important;
}
.select_device_item {
width: 329rpx;
height: 56rpx;
background: #e2edff;
border-radius: 60rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
.select_device_warp {
width: 710rpx;
height: 68rpx;
background: #e2edff;
border-radius: 60rpx;
}
.content_warp {
padding: 16rpx 20rpx 0 20rpx;
display: flex;
flex-direction: column;
}
.content_area_warp {
width: 100%;
}
</style>
<style scoped>
.device_model {
width: 33%;
}
.img_video_warp {
width: 100%;
height: 281rpx;
background: rgba(0, 0, 0, 0.3);
border-radius: 20rpx;
margin: 22rpx 0 32rpx 0;
}
.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;
}
.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>

657
pages/index/index.vue Normal file
View File

@ -0,0 +1,657 @@
<template>
<view class="contai_warp">
<view class="top_mimicry" :style="{ height: statusBarHeight + 45 + 'px' }"></view>
<view class="top_fixed_warp">
<view style="width: 100%" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="top_warp">
<image class="company_logo_css" src="https://online.totustec.com/upload/indexPage/company_logo1.png"></image>
</view>
</view>
<image class="nav_warp" src="https://online.totustec.com/upload/indexPage/nav_img.png"></image>
<view class="middle_area_warp">
<!-- 设备状态 -->
<view class="device_area_warp">
<view class="device_top">
<view class="device_top_left">
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img1.png"></image>
<view class="top_left_text">设备状态</view>
</view>
<view class="device_top_right" @click="toPage()">
<image class="top_right_icon" src="https://online.totustec.com/upload/indexPage/top_right_icon.png"></image>
<view class="top_right_text">绑定设备</view>
</view>
</view>
<view class="device_table_warp">
<view class="device_table_area">
<view class="device_table_top">
<view class="table_top_item" style="padding-left: 27rpx">机器序号</view>
<view class="table_top_item" style="width: 301rpx">机器描述</view>
<view class="table_top_item" style="width: 200rpx">设备运行状态</view>
</view>
<view class="table_data_warp" v-if="deviceList.length > 0">
<view class="table_data_item" v-for="(item, index) in deviceList">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view>
<view class="data_item_line" style="width: 301rpx">{{ item.brand }}</view>
<view class="data_item_line" style="width: 200rpx">
<view class="label_warp" v-if="item.status == 0">
<view class="label_icon"></view>
<view class="label_text">空闲</view>
</view>
<view class="label_warp" v-if="item.status == 2">
<view class="label_icon" style="background: #00abff"></view>
<view class="label_text" style="color: #00abff">准备中</view>
</view>
<view class="label_warp" v-if="item.status == 1">
<view class="label_icon" style="background: #00d195"></view>
<view class="label_text" style="color: #00d195">打印中</view>
</view>
<view class="label_warp" v-if="item.status == 3">
<view class="label_icon" style="background: #FDCB3B"></view>
<view class="label_text" style="color: #FDCB3B">铲件中</view>
</view>
<view class="label_warp" v-if="item.status == -1">
<view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<!-- 以下是演示数据，对接数据时删除 -->
<!-- <view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="width: 301rpx">调试二号机</view>
<view class="data_item_line" style="width: 200rpx">
<view class="label_warp">
<view class="label_icon" style="background: #00abff"></view>
<view class="label_text" style="color: #00abff">准备中</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="width: 301rpx">调试三号机</view>
<view class="data_item_line" style="width: 200rpx">
<view class="label_warp">
<view class="label_icon" style="background: #00d195"></view>
<view class="label_text" style="color: #00d195">打印中</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="width: 301rpx">调试四号机</view>
<view class="data_item_line" style="width: 200rpx">
<view class="label_warp">
<view class="label_icon" style="background: #fdcb3b"></view>
<view class="label_text" style="color: #fdcb3b">铲件中</view>
</view>
</view>
</view>
</view> -->
</view>
<!-- 暂无数据 -->
<view class="table_nodata_area" v-else>
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
</image>
<view class="table_nodata_text">暂无设备，请绑定设备～</view>
</view>
</view>
</view>
</view>
<!-- 设备预警 -->
<view class="device_area_warp" style="margin-top: 56rpx">
<view class="device_top">
<view class="device_top_left">
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img2.png"></image>
<view class="top_left_text">设备预警</view>
</view>
</view>
<view class="device_table_warp">
<view class="device_table_area">
<view class="device_table_top">
<view class="table_top_item" style="padding-left: 27rpx">机器序号</view>
<view class="table_top_item" style="flex: 1">报警状态</view>
</view>
<view class="table_data_warp" v-if="deviceList.length > 0">
<view class="table_data_item" v-for="(item, index) in deviceList">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view>
<view class="data_item_line" style="flex: 1">
<!-- <view class="label_warp2">
<view class="label_icon" style="background: #00d195"></view>
<view class="label_text label_text2" style="color: #00d195">空闲</view>
</view> -->
<view class="label_warp2">
<!-- 状态图标颜色映射 -->
<view class="label_icon" :style="{ background: getStatusColor(item.errorStatus) }"></view>
<!-- 状态文字条件渲染 -->
<view class="label_text label_text2" :style="{ color: getStatusColor(item.errorStatus) }">
{{ getStatusText(item.errorStatus) }}
</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<!-- 以下是演示数据，对接数据时删除 -->
<!-- <view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">文件校验失败</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">设备出错</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">准备过程出错</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">打印出错</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">加液失败</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">铲件失败</view>
</view>
</view>
</view>
<view class="data_dline_warp">
<view class="data_dline_css"></view>
</view>
</view>
<view class="table_data_item">
<view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
<view class="data_item_line" style="flex: 1">
<view class="label_warp2">
<view class="label_icon" style="background: #ff0000"></view>
<view class="label_text label_text2">图片异物</view>
</view>
</view>
</view>
</view> -->
</view>
<view class="table_nodata_area" v-else>
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
</image>
<view class="table_nodata_text">暂无设备预警</view>
</view>
</view>
</view>
</view>
<view style="height: 100rpx"></view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
title: "Hello",
statusBarHeight: 0,
searchList: {
page: 1,
size: 10000,
},
deviceList: [],
statusMap: {
0: { text: '正常', color: '#00d195' }, // 绿色
1: { text: '文件校验失败', color: '#ff0000' }, // 红色
2: { text: '设备或加密错误', color: '#ff0000' },
3: { text: '打印准备过程出错', color: '#ff0000' },
4: { text: '打印出错', color: '#ff0000' },
5: { text: '加液失败', color: '#ff9800' },
6: { text: '铲件失败', color: '#ff9800' },
7: { text: '图片异物', color: '#ff0000' }
},
// 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 连接
},
onShow () {
this.getDeviceList(); // 每次显示页面时调用
},
onUnload () {
this.closeWebSocket(); // 页面卸载时关闭连接
},
methods: {
// ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () {
const wsUrl = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
// 初始化 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('实时消息');
},
// 获取状态文字
getStatusText (status) {
if (status == -1) {
return '断开'
}
return this.statusMap[status]?.text || '';
},
// 获取状态颜色
getStatusColor (status) {
if (status == -1) {
return '#999999'
}
return this.statusMap[status]?.color; // 默认灰色
},
toPage () {
uni.navigateTo({
url: "/pages/deviceBind/index",
});
},
async getDeviceList () {
try {
// 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({
url: "https://online.totustec.com/api/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>
.label_icon {
width: 18rpx;
height: 18rpx;
background: #cccccc;
border-radius: 100%;
}
.label_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
margin-left: 8rpx;
}
.label_text2 {
color: #ff0000;
}
.label_warp {
display: flex;
align-items: center;
margin-left: 48rpx;
}
.label_warp2 {
display: flex;
align-items: center;
}
.data_item_line {
width: 209rpx;
min-height: 82rpx;
display: flex;
align-items: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
}
.table_data_warp {
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
}
.table_data_item {
width: 100%;
display: flex;
flex-direction: column;
}
.data_display_warp {
display: flex;
align-items: center;
}
.data_dline_warp {
padding: 0 22rpx;
}
.data_dline_css {
width: 100%;
border: 1rpx solid #ededed;
}
.top_mimicry {
width: 100%;
}
.top_fixed_warp {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
}
</style>
<style scoped>
.container_warp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: PingFang SC, PingFang SC !important;
}
.table_nodata_area {
width: 100%;
height: 429rpx;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.table_nodata_img {
width: 316rpx;
height: 262rpx;
}
.table_nodata_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #666666;
}
.table_top_item {
width: 209rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.device_table_top {
width: 100%;
height: 73rpx;
background: #f0f0f0;
border-radius: 20rpx 20rpx 0rpx 0rpx;
display: flex;
align-items: center;
}
.device_table_area {
width: 100%;
display: flex;
flex-direction: column;
}
.device_table_warp {
padding: 0 20rpx;
}
.device_top_right {
display: flex;
width: 158rpx;
height: 42rpx;
background: #0095de;
border-radius: 21rpx;
align-items: center;
margin-right: 18rpx;
}
.top_right_icon {
display: flex;
width: 31rpx;
height: 31rpx;
margin: 0 10rpx 0 14rpx;
}
.top_right_text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #ffffff;
}
.device_area_warp {
display: flex;
flex-direction: column;
}
.device_top {
width: 100%;
display: flex;
justify-content: space-between;
margin: 12rpx 0 29rpx 0;
}
.device_top_left {
display: flex;
margin-left: 20rpx;
}
.top_left_img1 {
width: 46rpx;
height: 46rpx;
display: block;
}
.top_left_text {
font-family: PingFang SC, PingFang SC !important;
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin-left: 7rpx;
}
.middle_area_warp {
width: 100%;
background: #f1f6fc;
border-radius: 30rpx 30rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
margin-top: -28rpx;
padding-top: 28rpx;
min-height: 75vh;
}
.nav_warp {
width: 100%;
height: 224rpx;
display: block;
}
.top_warp {
height: 88rpx;
display: flex;
align-items: center;
padding-left: 40rpx;
}
.company_logo_css {
width: 175rpx;
height: 71rpx;
}
</style>

357
pages/mine/index.vue Normal file
View File

@ -0,0 +1,357 @@
<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 class="mine_area_warp">
<view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')">
<view class="mine_area_left" >
<image class="mine_avater" :src="'https://online.totustec.com/upload' + userInfo.avatar"></image>
<!-- <view class="mine_avater"></view> -->
<view class="mine_info_warp">
<view class="mine_info_txt1" v-if="userInfo.nikeName">{{
userInfo.nikeName
}}</view>
<view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view>
<view class="mine_info_txt2" >账户设置</view>
</view>
</view>
<image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view>
</view>
<view class="top_area_backimg">
<image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image>
</view>
</view>
<view class="function_area1_warp">
<view style="padding: 0 20rpx">
<view class="function_area1_content">
<view class="area1_content_title">常用工具</view>
<view class="area1_content_warp">
<view v-for="(item, index) in area1ContentList" :key="index" class="area1_content_item"
:style="index === 1 ? 'margin: 0 73rpx;' : ''" @click="toPage(item.text)">
<image class="area1_content_icon" :src="item.icon" mode="widthFix"></image>
<view class="area1_content_txt">{{ item.text }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="function_area2_warp">
<view class="function_area2_content">
<!-- <view class="function_area2_item" style="border-top-left-radius: 20rpx; border-top-right-radius: 20rpx">
<view class="area2_item_left">
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon1.png">
</image>
<view class="area2_item_txt">使用向导</view>
</view>
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> -->
<!-- <view class="function_area2_item" style="
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
">
<view class="area2_item_left">
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
</image>
<view class="area2_item_txt">分享小程序</view>
</view>
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> -->
</view>
</view>
<!-- <video style="width: 100%;height: 200rpx;" src="http://broadcasting.totustec.com/live/12345678.m3u8"></video> -->
</view>
</template>
<script>
export default {
data () {
return {
title: "Hello",
statusBarHeight: 0,
area1ContentList: [
{
icon: "https://online.totustec.com/upload/minePage/area1_content_icon1.png",
text: "设备管理",
},
{
icon: "https://online.totustec.com/upload/minePage/area1_content_icon2.png",
text: "预警管理",
},
// {
// icon: "https://online.totustec.com/upload/minePage/area1_content_icon3.png",
// text: "我的收藏",
// },
],
userInfo: {
},
};
},
onLoad () {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // 状态栏高度（单位：px）
} = systemInfo;
this.statusBarHeight = statusBarHeight;
// 页面加载时获取缓存用户信息
this.getUserInfoFromCache();
},
methods: {
getUserInfoFromCache () {
const userInfo = uni.getStorageSync("userInfo");
console.log('userInfo',userInfo);
if (userInfo) {
this.userInfo = userInfo;
}
},
toPage (pageName) {
if (pageName == "设备管理") {
uni.navigateTo({
url: "/pages/selectDevice/index",
});
}
},
navigateToAccountSettings(path) {
console.log("okk")
uni.navigateTo({
url: path,
});
},
getLoginCode () {
uni.login({
success: (res) => {
if (res.code) {
this.loginWithPhoneNumber(res.code);
}
},
});
},
async loginWithPhoneNumber (code) {
try {
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
method: "POST",
data: { code },
header: {
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
},
});
if (res.statusCode == 200) {
this.userInfo = res.data;
console.log('this.userInfo', this.userInfo);
// 存储用户信息到本地缓存（uni-app接口）
uni.setStorageSync("userInfo", this.userInfo);
uni.showToast({ title: "登录成功" });
}
} catch (error) {
uni.showToast({ title: "登录失败", icon: "none" });
}
},
},
};
</script>
<!-- 临时样式 -->
<style scoped>
.area2_item_right {
width: 28rpx;
height: 28rpx;
}
.area2_item_txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-left: 23rpx;
}
.area2_item_icon1 {
width: 30rpx;
height: 32rpx;
}
.area2_item_left {
display: flex;
align-items: center;
}
.function_area2_content {
display: flex;
flex-direction: column;
padding: 0 20rpx;
}
.function_area2_item {
height: 110rpx;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 23rpx 0 37rpx;
}
.function_area2_warp {
width: 100%;
margin-top: 24rpx;
}
.area1_content_txt {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #333333;
}
.area1_content_icon {
width: 60rpx;
height: 60rpx;
}
.area1_content_item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.area1_content_warp {
display: flex;
margin-left: 38rpx;
align-items: center;
margin-top: 39rpx;
}
.area1_content_title {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin: 19rpx 0 0 28rpx;
}
.function_area1_content {
width: 100%;
height: 238rpx;
background: #ffffff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
}
.function_area1_warp {
width: 100%;
margin-top: -20rpx;
}
</style>
<style scoped>
.contai_warp {
display: flex;
flex-direction: column;
align-items: center;
font-family: PingFang SC, PingFang SC !important;
min-height: 100vh;
background-color: #f1f6fc;
}
.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;
}
.bg-image {
width: 100%;
height: 100%;
}
.top_area_backimg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.mine_area_right {
width: 28rpx;
height: 28rpx;
}
.mine_info_txt2 {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
}
.mine_info_txt1 {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #030303;
}
.mine_info_warp {
display: flex;
flex-direction: column;
margin-left: 23rpx;
}
.mine_avater {
width: 120rpx;
height: 120rpx;
border-radius: 100%;
}
.mine_area_left {
display: flex;
align-items: center;
}
.mimicry {
display: flex;
justify-content: space-between;
align-items: center;
}
.mine_area_warp {
height: 229rpx;
padding: 26rpx 34rpx 0 47rpx;
position: relative;
z-index: 5;
}
</style>

216
pages/mine/update.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<view class="contai_warp">
<!-- Top Navigation Bar -->
<view class="top_area_warp">
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="top_nav_warp">
<view class="back_icon" @click="goBack">
<image src="https://online.totustec.com/upload/minePage/back.png" mode="aspectFit"></image>
</view>
<text>个人资料</text>
</view>
</view>
<!-- Profile Content -->
<view class="profile_content">
<!-- Avatar Section -->
<view class="profile_item">
<text class="item_label">头像</text>
<view class="avatar_wrapper" @click="changeAvatar">
<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
<image class="edit_icon" src="https://online.totustec.com/upload/minePage/user.png" mode="aspectFit"></image>
</view>
</view>
<!-- Nickname Section -->
<view class="profile_item">
<text class="item_label">昵称</text>
<input class="nickname_input" v-model="userInfo.nickname" placeholder="请输入昵称" />
</view>
<!-- Save Button -->
<button class="save_btn" @click="saveProfile">保存修改</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0,
userInfo: {
avatar: '',
nickname: ''
}
};
},
onLoad() {
// Get system info for status bar height
const systemInfo = wx.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
// Load user info
this.loadUserInfo();
},
methods: {
loadUserInfo() {
// Mock data - replace with actual data fetching
this.userInfo = {
avatar: '/static/default-avatar.png',
nickname: '微信用户'
};
},
changeAvatar() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.userInfo.avatar = tempFilePaths[0];
// Here you would typically upload the image to your server
}
});
},
saveProfile() {
if (!this.userInfo.nickname.trim()) {
uni.showToast({
title: '昵称不能为空',
icon: 'none'
});
return;
}
// Here you would typically send the updated info to your server
uni.showToast({
title: '保存成功',
icon: 'success'
});
// Simulate API call
setTimeout(() => {
uni.navigateBack();
}, 1500);
},
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.contai_warp {
display: flex;
flex-direction: column;
align-items: center;
font-family: PingFang SC, PingFang SC !important;
min-height: 100vh;
background-color: #f1f6fc; /* 保持原有背景色 */
}
/* Top Navigation Styles */
.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;
}
.back_icon {
position: absolute;
left: 20rpx;
width: 40rpx;
height: 40rpx;
}
.back_icon image {
width: 100%;
height: 100%;
}
/* Profile Content Styles */
.profile_content {
width: 90%;
padding: 40rpx 30rpx;
background-color: #ffffff;
border-radius: 20rpx 20rpx 0 0;
margin-top: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.profile_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.item_label {
font-size: 28rpx;
color: #333;
}
.avatar_wrapper {
position: relative;
width: 100rpx;
height: 100rpx;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.edit_icon {
position: absolute;
right: -10rpx;
bottom: -10rpx;
width: 100rpx;
height: 100rpx;
background: #fff;
border-radius: 50%;
padding: 5rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
}
.nickname_input {
text-align: right;
font-size: 28rpx;
color: #333;
flex: 1;
margin-left: 20rpx;
}
.save_btn {
margin-top: 60rpx;
background-color: #0095de;
color: white;
border-radius: 50rpx;
font-size: 32rpx;
}
.save_btn:active {
background-color: #06AD56;
}
</style>

309
pages/selectDevice/index.vue Normal file
View File

@ -0,0 +1,309 @@
<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>
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 = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
// 初始化 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: "https://online.totustec.com/api/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>

BIN
static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/tabbar/device.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 835 B

BIN
static/tabbar/device_select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/tabbar/index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/tabbar/index_select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/tabbar/mine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/tabbar/mine_select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

13
uni.promisify.adaptor.js Normal file
View File

@ -0,0 +1,13 @@
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});

76
uni.scss Normal file
View File

@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;