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

增加友好提示

Browse Source
This commit is contained in:
18796357645 2025-07-19 18:39:37 +08:00
parent 13cd1c300b
commit 30fe13dac2
2 changed files with 169 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/deviceBind/index.vue
View File

@ -136,10 +136,20 @@ export default {
showCancel: false // 不显示取消按钮（可选） showCancel: false // 不显示取消按钮（可选）
}); });
// console.log('res', res); // console.log('res', res);
if (res.statusCode === 200) {
if (res.statusCode === 200) { uni.showToast({
uni.showToast({ title: "绑定成功" }); title: "绑定成功",
} icon: "success", // 可选，增加成功图标
duration: 1500 // 1.5秒后自动关闭
});
// 1.5秒后跳转到设备页面
setTimeout(() => {
uni.navigateTo({
url: "/pages/device/index"
});
}, 1500);
}
} catch (error) { } catch (error) {
console.error("设备绑定失败:", error); console.error("设备绑定失败:", error);
uni.showToast({ title: "设备绑定失败", icon: "none" }); uni.showToast({ title: "设备绑定失败", icon: "none" });

283
pages/deviceManage/index.vue
View File

@ -16,7 +16,7 @@
<view class="select_device_warp"> <view class="select_device_warp">
<view class="modal_warp"> <view class="modal_warp">
<view class="select_device_item" :class="{ device_active: getType == 'video' }" <view class="select_device_item" :class="{ device_active: getType == 'video' }"
@click="getVideoImg('video')"> @click="getVideoImg('video')">
获取视频 获取视频
</view> </view>
<view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')"> <view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')">
@ -24,11 +24,6 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 临时调试 -->
<!-- <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="media_container"> <view class="media_container">
<!-- 加载动画（转圈效果） --> <!-- 加载动画（转圈效果） -->
@ -38,23 +33,23 @@
<!-- 媒体内容 --> <!-- 媒体内容 -->
<video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl" <video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"
@loadedmetadata="isMediaLoading = false" @error="isMediaLoading = false"></video> @loadedmetadata="isMediaLoading = false" @error="isMediaLoading = false"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl" @load="isMediaLoading = false" <image class="img_video_warp" v-else :src="socketData.imageUrl" @load="isMediaLoading = false"
@error="isMediaLoading = false"></image> @error="isMediaLoading = false"></image>
</view> </view>
<!-- 设备状态选择 --> <!-- 设备状态选择 -->
<view class="select_device_warp"> <view class="select_device_warp">
<view class="modal_warp"> <view class="modal_warp">
<view class="select_device_item device_model" :class="{ device_active: deviceType == 1 }" <view class="select_device_item device_model" :class="{ device_active: deviceType == 1 }"
@click="deviceType = 1">设备状态 @click="deviceType = 1">设备状态
</view> </view>
<view class="select_device_item device_model" :class="{ device_active: deviceType == 2 }" <view class="select_device_item device_model" :class="{ device_active: deviceType == 2 }"
@click="deviceType = 2">设备日志 @click="deviceType = 2">设备日志
</view> </view>
<view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }" <view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }"
@click="deviceType = 3">设备控制 @click="deviceType = 3">设备控制
</view> </view>
</view> </view>
</view> </view>
@ -66,21 +61,21 @@
<view class="item_content_warp"> <view class="item_content_warp">
<view class="item_content_left">{{ field.label }}</view> <view class="item_content_left">{{ field.label }}</view>
<view class="item_content_middel"> <view class="item_content_middel">
<!-- 状态处理 完成-->
<!-- 状态处理 -->
<template v-if="field.isStatus"> <template v-if="field.isStatus">
<view class="label_warp" v-if="deviceDetail.status == 0"> <view class="label_warp" v-if="deviceDetail.status == 0">
<view class="label_icon"></view> <view class="label_icon"></view>
<view class="label_text">空闲</view> <view class="label_text">空闲</view>
</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_warp" v-if="deviceDetail.status == 1">
<view class="label_icon" style="background: #00d195"></view> <view class="label_icon" style="background: #00d195"></view>
<view class="label_text" style="color: #00d195">打印中</view> <view class="label_text" style="color: #00d195">打印中</view>
</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 == 3"> <view class="label_warp" v-if="deviceDetail.status == 3">
<view class="label_icon" style="background: #fdcb3b"></view> <view class="label_icon" style="background: #fdcb3b"></view>
<view class="label_text" style="color: #fdcb3b">铲件中</view> <view class="label_text" style="color: #fdcb3b">铲件中</view>
@ -94,10 +89,9 @@
<!-- 子状态处理 --> <!-- 子状态处理 -->
<template v-else-if="field.isErrorStatus"> <template v-else-if="field.isErrorStatus">
<view class="label_warp2"> <view class="label_warp2">
<view class="label_icon" :style="{ background: getStatusColor(deviceDetail.printStatus) }"> <view class="label_icon" :style="{ background: getStatusColor(printInfo.status) }"></view>
</view> <view class="label_text label_text2" :style="{ color: getStatusColor(printInfo.status) }">
<view class="label_text label_text2" :style="{ color: getStatusColor(deviceDetail.printStatus) }"> {{ getStatusText2(printInfo.status) }}
{{ getStatusText2(deviceDetail.printStatus) }}
</view> </view>
</view> </view>
</template> </template>
@ -111,10 +105,10 @@
<template v-else-if="field.isCurrentTime"> <template v-else-if="field.isCurrentTime">
{{ getCurrentTime() }} {{ getCurrentTime() }}
</template> </template>
<template v-else> <template v-else>
{{ deviceDetail[field.key] }} {{ deviceDetail[field.key] }}
</template> </template>
</view> </view>
</view> </view>
<view class="itemContent_line_warp"> <view class="itemContent_line_warp">
@ -124,7 +118,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 打印详情 --> <!-- 打印详情 -->
<view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx"> <view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx">
<view class="statusItem_modal_warp"> <view class="statusItem_modal_warp">
<view class="item_content_warp"> <view class="item_content_warp">
@ -141,68 +135,77 @@
</view> </view>
</view> </view>
</view> </view>
<view class="device_status_warp" v-if="deviceType == 2"> <view class="device_status_warp" v-if="deviceType == 2">
<view class="empty_state_warp"> <view class="empty_state_warp">
<image class="empty_state_icon" src="https://online.totustec.com/upload/deviceManage/empty_log_icon.png"></image> <image class="empty_state_icon"
<view class="empty_state_title">暂无日志数据</view> src="https://online.totustec.com/upload/deviceManage/empty_log_icon.png"></image>
<!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> --> <view class="empty_state_title">暂无日志数据</view>
</view> <!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> -->
</view> </view>
</view>
<!-- 设备控制 -->
<!-- 设备控制 -->
<view class="device_control_warp" v-if="deviceType == 3"> <view class="device_control_warp" v-if="deviceType == 3">
<view class="deviceN_input_warp"> <view class="deviceN_input_warp">
<view class="device_name_txt"> 打印文件名称：</view> <view class="device_name_txt"> 打印文件名称：</view>
<view class="deviceN_input_area"> <view class="deviceN_input_area">
<input class="deviceN_input" type="text" v-model="deviceName" @input="onDeviceNameInput" /> <input class="deviceN_input" type="text" v-model="deviceName" @input="onDeviceNameInput"/>
<view class="clear_deviceN_warp"> <view class="clear_deviceN_warp">
<image class="clear_deviceN_icon" @click="deviceName = ''" v-if="deviceName" <image class="clear_deviceN_icon" @click="deviceName = ''" v-if="deviceName"
src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png"> src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png">
</image> </image>
</view> </view>
</view> </view>
</view> </view>
<view class="deviceN_input_tip">文件位置：桌面File文件夹内</view> <view class="deviceN_input_tip">文件位置：桌面File文件夹内</view>
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{ <!--只有主状态等于0时候开始打印才能点击，其他都不能点击-->
backgroundColor: <view class="device_operation_btn"
deviceDetail.status == 0 @click="operationData('PRINT')"
? '#ffffff' :style="{backgroundColor:deviceDetail.status === 0? '#ffffff':'#cccccc'}
: '#cccccc', ">
}"> <image class="operation_btn_icon"
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
</image> <view class="operation_btn_txt"
<view class="operation_btn_txt">开始打印</view> :style="{
color:deviceDetail.status === 0 ?'#333333':'#ece8e8' ,}"
>开始打印</view>
</view> </view>
<view class="device_operation_btn" @click="operationData('CONTINUE')" :style="{ <!--继续打印-->
backgroundColor: <view class="device_operation_btn"
deviceDetail.status != 0 && @click="operationData('CONTINUE')"
deviceDetail.status != 1 && :style="{backgroundColor:deviceDetail.status === 0 || printInfo.status !== 6? '#cccccc': '#ffffff'}"
deviceDetail.printStatus != 6 && >
deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">继续打印</view> <view class="operation_btn_txt"
:style="{color:deviceDetail.status === 0 || printInfo.status !== 6? '#ece8e8': '#333333'}"
>继续打印</view>
</view> </view>
</view> </view>
<!--暂停打印 退出打印-->
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{ <view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor: backgroundColor:
deviceDetail.status == 1 || deviceDetail.status == 2 deviceDetail.status === 1 ||
deviceDetail.status === 2 ||
printInfo.status === 6
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<!-- <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> -->
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">暂停打印</view> <view class="operation_btn_txt"
:style="{
color:
deviceDetail.status === 1 ||
deviceDetail.status === 2 ||
printInfo.status === 6
?'#333333':'#ece8e8' ,
}"
>暂停打印</view>
</view> </view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{ <view class="device_operation_btn" @click="operationData('EXIT')" :style="{
@ -211,10 +214,17 @@
}"> }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">退出打印</view> <view class="operation_btn_txt"
:style="{
color:
deviceDetail.status != -1
?'#ece8e8': '#333333',
}"
>退出打印</view>
</view> </view>
</view> </view>
<!-- 报警继续 报警退出-->
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')"> <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 class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
@ -238,7 +248,7 @@ import {
} from "@/config.js"; } from "@/config.js";
export default { export default {
data () { data() {
return { return {
isMediaLoading: false, isMediaLoading: false,
deviceName: "", deviceName: "",
@ -357,7 +367,7 @@ export default {
label: '错误码', label: '错误码',
key: 'errorStatus', key: 'errorStatus',
isErrorCode: true, isErrorCode: true,
}, },
{ {
label: '当前时间', label: '当前时间',
@ -403,7 +413,7 @@ export default {
socketData: {}, socketData: {},
}; };
}, },
onLoad (options) { onLoad(options) {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
@ -421,12 +431,15 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onUnload () { onUnload() {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket() {
const wsUrl = BASE_STOKECT_URL; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
@ -444,7 +457,7 @@ export default {
}); });
}, },
listenSocketMessage () { listenSocketMessage() {
// 监听 WebSocket 消息 // 监听 WebSocket 消息
uni.onSocketMessage((event) => { uni.onSocketMessage((event) => {
console.log("event", event); console.log("event", event);
@ -455,7 +468,7 @@ export default {
}); });
}, },
closeWebSocket () { closeWebSocket() {
// 关闭连接并清理资源 // 关闭连接并清理资源
if (this.socketTask) { if (this.socketTask) {
uni.closeSocket(); uni.closeSocket();
@ -465,7 +478,7 @@ export default {
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
}, },
tryReconnect () { tryReconnect() {
// 自动重连机制 // 自动重连机制
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => { this.reconnectTimer = setTimeout(() => {
@ -474,7 +487,7 @@ export default {
}, this.reconnectInterval); }, this.reconnectInterval);
}, },
updateDeviceStatus (message) { updateDeviceStatus(message) {
console.log("实时消息", message); console.log("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行 // CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") { if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
@ -493,7 +506,7 @@ export default {
this.socketData = message.data; this.socketData = message.data;
if (this.socketData.imageUrl) { if (this.socketData.imageUrl) {
this.socketData.imageUrl = this.socketData.imageUrl =
BASE_IMG_URL + message.data.imageUrl; BASE_IMG_URL + message.data.imageUrl;
} }
} }
// WRITEIMG 接收图片数据中 // WRITEIMG 接收图片数据中
@ -510,7 +523,7 @@ export default {
* 发送 WebSocket 指令 * 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等） * @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/ */
sendWsCommand (command) { sendWsCommand(command) {
if (!this.isSocketConnected) { if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令"); console.warn("WebSocket 未连接，无法发送指令");
return; return;
@ -532,18 +545,18 @@ export default {
// 发送消息（使用 uni-app 的 sendSocketMessage） // 发送消息（使用 uni-app 的 sendSocketMessage）
uni uni
.sendSocketMessage({ .sendSocketMessage({
data: JSON.stringify(message), data: JSON.stringify(message),
}) })
.then(() => { .then(() => {
console.log("指令发送成功:", message); console.log("指令发送成功:", message);
}) })
.catch((err) => { .catch((err) => {
console.error("指令发送失败:", err); console.error("指令发送失败:", err);
}); });
}, },
operationData (type) { operationData(type) {
if (type == "PRINT") { if (type == "PRINT") {
// 检查设备名称是否为空 // 检查设备名称是否为空
if (!this.deviceName || this.deviceName.trim() === '') { if (!this.deviceName || this.deviceName.trim() === '') {
@ -554,7 +567,6 @@ export default {
}); });
return; return;
} }
// 检查设备状态 // 检查设备状态
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) { if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
// 显示确认提示框 // 显示确认提示框
@ -572,19 +584,30 @@ export default {
}); });
} }
} }
if (type == "CONTINUE") { if (type === "CONTINUE") {
if ( // 检查设备状态
this.deviceDetail.status != 0 && if (this.deviceDetail.status === 0) {
this.deviceDetail.status != 1 && uni.showToast({
this.deviceDetail.printStatus != 6 && title: "当前设备空闲，禁止继续打印",
this.deviceDetail.status != -1 icon: "none",
) { duration: 1500
this.sendWsCommand(type); });
console.log("设备未就绪，禁止继续打印");
return;
} }
if (this.printInfo.status !== 6) {
uni.showToast({
title: "当前设备未暂定，禁止继续打印",
icon: "none",
duration: 1500
});
return;
}
this.sendWsCommand(type);
} }
if (type == 'PAUSE') { if (type == 'PAUSE') {
if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2) && this.deviceDetail.status != - if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2 || this.printInfo.status == 3) && this.deviceDetail.status != -1) {
1) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要暂停打印吗？', content: '确定要暂停打印吗？',
@ -614,7 +637,7 @@ export default {
} }
} }
}, },
getVideoImg (type) { getVideoImg(type) {
this.isMediaLoading = true; this.isMediaLoading = true;
if (type == "img") { if (type == "img") {
this.getType = "img"; this.getType = "img";
@ -625,39 +648,41 @@ export default {
} }
}, },
// 获取状态文字 // 获取状态文字
getStatusText (status) { getStatusText(status) {
if (status == -1) { if (status == -1) {
return "断开"; return "断开";
} }
return this.statusMap[status]?.text || ""; return this.statusMap[status]?.text || "";
}, },
getStatusText2 (status) { getStatusText2(status) {
if (status == -1) { //如果状态为-1就算断开
if (status === -1) {
return "断开"; return "断开";
} }
return this.childStatusMap[status]?.text || ""; return this.childStatusMap[status]?.text || "";
}, },
// 获取状态颜色 // 获取状态颜色
getStatusColor (status) { getStatusColor(status) {
if (status == -1) { if (status == -1) {
return "#999999"; return "#999999";
} }
return this.childStatusMap[status]?.color; // 默认灰色 return this.childStatusMap[status]?.color; // 默认灰色
}, },
getCurrentTime () { getCurrentTime() {
const date = new Date(); const date = new Date();
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份补零
const day = String(date.getDate()).padStart(2, "0"); const day = String(date.getDate()).padStart(2, "0"); // 日期补零
const hours = String(date.getHours()).padStart(2, "0"); const hours = String(date.getHours()).padStart(2, "0"); // 小时补零
const minutes = String(date.getMinutes()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); // 分钟补零
const seconds = String(date.getSeconds()).padStart(2, "0"); // 新增：秒补零
return `${year}年${month}月${day}日${hours}时${minutes}分`; // 格式：YYYY.MM.DD HH:MM:SS
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
}, },
goBack () { goBack() {
uni.navigateBack(); uni.navigateBack();
}, },
async getDeviceDetail () { async getDeviceDetail() {
try { try {
const res = await uni.request({ const res = await uni.request({
url: BASE_API_URL + '/api/front/device/get', url: BASE_API_URL + '/api/front/device/get',
@ -675,24 +700,24 @@ export default {
this.deviceDetail = res.data; this.deviceDetail = res.data;
this.printInfo = res.data.printInfo; this.printInfo = res.data.printInfo;
console.log("设备详情:", this.deviceDetail); console.log("设备详情:", this.deviceDetail);
//判断状态是否为断开 //判断状态是否为断开
// 判断状态是否为断开 // 判断状态是否为断开
if (res.data.status == -1) { if (res.data.status == -1) {
uni.showToast({ uni.showToast({
title: '设备处于断开状态，暂不支持查看', title: '设备处于断开状态，暂不支持查看',
icon: 'none', icon: 'none',
duration: 2000, // 提示显示时长 duration: 2000, // 提示显示时长
complete: () => { complete: () => {
// 提示显示完成后跳转 // 提示显示完成后跳转
setTimeout(() => { setTimeout(() => {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/index' url: '/pages/index/index'
}); });
}, 1500); // 稍微延迟一点确保用户看到提示 }, 1500); // 稍微延迟一点确保用户看到提示
} }
}); });
return; return;
} }
} }
} catch (error) { } catch (error) {
console.error("获取设备详情失败:", error); console.error("获取设备详情失败:", error);
@ -702,7 +727,7 @@ export default {
}); });
} }
}, },
onDeviceNameInput (e) { onDeviceNameInput(e) {
this.deviceName = e.detail.value; this.deviceName = e.detail.value;
// console.log('输入内容：', e.detail.value); // console.log('输入内容：', e.detail.value);
}, },
@ -810,6 +835,8 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 2rpx solid #cccccc;
color: #cccccc;
} }
.device_operation_warp { .device_operation_warp {