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

开发

Browse Source
This commit is contained in:
LINCE 2025-07-20 22:41:10 +08:00
parent bb3e6c69fe
commit 7509335cf0
3 changed files with 130 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages.json
View File

@ -23,7 +23,6 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/deviceBind/index",
"style": {
@ -38,7 +37,6 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/device/index",
"style": {
@ -65,7 +63,8 @@
"selectedColor": "#007AFF",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/index.png",

163
pages/deviceManage/index.vue
View File

@ -32,11 +32,16 @@
</view>
<!-- 媒体内容 -->
<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>
<image class="img_video_warp" v-else :src="socketData.imageUrl" @load="isMediaLoading = false"
@error="isMediaLoading = false"></image>
@error="isMediaLoading = false"></image> -->
<video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"
@loadedmetadata="handleMediaLoaded" @error="handleMediaError"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl" @load="handleMediaLoaded"
@error="handleMediaError"></image>
</view>
<!-- 设备状态选择 -->
@ -138,8 +143,8 @@
<view class="device_status_warp" v-if="deviceType == 2">
<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" src="https://online.totustec.com/upload/deviceManage/empty_log_icon.png">
</image>
<view class="empty_state_title">暂无日志数据</view>
<!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> -->
</view>
@ -150,7 +155,7 @@
<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" @input="onDeviceNameInput"/>
<input class="deviceN_input" type="text" v-model="deviceName" @input="onDeviceNameInput" />
<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">
@ -161,34 +166,29 @@
<view class="deviceN_input_tip">文件位置：桌面File文件夹内</view>
<view class="device_operation_warp">
<!--只有主状态等于0时候开始打印才能点击，其他都不能点击-->
<view class="device_operation_btn"
@click="operationData('PRINT')"
:style="{backgroundColor:deviceDetail.status === 0? '#ffffff':'#cccccc'}
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{ backgroundColor: deviceDetail.status === 0 ? '#ffffff' : '#cccccc' }
">
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
<view class="operation_btn_txt"
:style="{
color:deviceDetail.status === 0 ?'#333333':'#ece8e8' ,}"
>开始打印</view>
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt" :style="{
color: deviceDetail.status === 0 ? '#333333' : '#ece8e8',
}">开始打印</view>
</view>
<!--继续打印-->
<view class="device_operation_btn"
@click="operationData('CONTINUE')"
:style="{backgroundColor:deviceDetail.status === 0 || printInfo.status !== 6? '#cccccc': '#ffffff'}"
>
<view class="device_operation_btn" @click="operationData('CONTINUE')"
:style="{ backgroundColor: deviceDetail.status === 0 || printInfo.status !== 6 ? '#cccccc' : '#ffffff' }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt"
:style="{color:deviceDetail.status === 0 || printInfo.status !== 6? '#ece8e8': '#333333'}"
>继续打印</view>
:style="{ color: deviceDetail.status === 0 || printInfo.status !== 6 ? '#ece8e8' : '#333333' }">继续打印
</view>
</view>
</view>
<!--暂停打印 退出打印-->
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor:printInfo.status !== 6 && deviceDetail.status !==0
backgroundColor: printInfo.status !== 6 && deviceDetail.status !== 0
? '#ffffff'
: '#cccccc',
}">
@ -196,10 +196,9 @@
</image>
<view class="operation_btn_txt" :style="{
color:
printInfo.status !== 6 && deviceDetail.status !==0
? '#333333':'#ece8e8',
}"
>暂停打印</view>
printInfo.status !== 6 && deviceDetail.status !== 0
? '#333333' : '#ece8e8',
}">暂停打印</view>
</view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{
@ -208,11 +207,9 @@
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt"
:style="{
color: deviceDetail.status != 0 && deviceDetail.status != -1 ?'#333333': '#ece8e8',
}"
>退出打印</view>
<view class="operation_btn_txt" :style="{
color: deviceDetail.status != 0 && deviceDetail.status != -1 ? '#333333' : '#ece8e8',
}">退出打印</view>
</view>
</view>
@ -240,7 +237,7 @@ import {
} from "@/config.js";
export default {
data() {
data () {
return {
isMediaLoading: false,
deviceName: "",
@ -403,9 +400,10 @@ export default {
reconnectTimer: null, // 重连定时器
reconnectInterval: 5000, // 重连间隔（5秒）
socketData: {},
isMediaRequesting: false, // 媒体请求状态锁，防止并发请求
};
},
onLoad(options) {
onLoad (options) {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // 状态栏高度（单位：px）
@ -423,15 +421,26 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接
},
onUnload() {
onUnload () {
this.closeWebSocket(); // 页面卸载时关闭连接
},
methods: {
// 媒体加载成功处理
handleMediaLoaded () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
},
// 媒体加载失败处理
handleMediaError () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
},
// ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket() {
connectWebSocket () {
const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口）
@ -449,7 +458,7 @@ export default {
});
},
listenSocketMessage() {
listenSocketMessage () {
// 监听 WebSocket 消息
uni.onSocketMessage((event) => {
console.log("event", event);
@ -460,7 +469,7 @@ export default {
});
},
closeWebSocket() {
closeWebSocket () {
// 关闭连接并清理资源
if (this.socketTask) {
uni.closeSocket();
@ -470,7 +479,7 @@ export default {
clearTimeout(this.reconnectTimer);
},
tryReconnect() {
tryReconnect () {
// 自动重连机制
clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => {
@ -479,7 +488,7 @@ export default {
}, this.reconnectInterval);
},
updateDeviceStatus(message) {
updateDeviceStatus (message) {
console.log("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
@ -515,7 +524,7 @@ export default {
* 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/
sendWsCommand(command) {
sendWsCommand (command) {
if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令");
return;
@ -548,7 +557,7 @@ export default {
});
},
operationData(type) {
operationData (type) {
if (type == "PRINT") {
// 检查设备状态
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
@ -598,8 +607,8 @@ export default {
}
if (type == 'PAUSE') {
console.log(this.deviceDetail.status ===0)
if (this.printInfo.status === 6 || this.deviceDetail.status ===0){
console.log(this.deviceDetail.status === 0)
if (this.printInfo.status === 6 || this.deviceDetail.status === 0) {
// uni.showToast({
// title: "当前设备已暂定，禁止操作",
// icon: "none",
@ -635,24 +644,65 @@ export default {
}
}
},
getVideoImg(type) {
// getVideoImg (type) {
// this.isMediaLoading = true;
// if (!this.isMediaLoading) {
// if (type == "img") {
// uni.showToast({
// title: "请等待图片获取完毕再进行切换",
// icon: "none"
// });
// } else {
// uni.showToast({
// title: "请等待视频获取完毕再进行切换",
// icon: "none"
// });
// }
// return
// }
// if (type == "img") {
// this.getType = "img";
// this.sendWsCommand("IMAGE");
// } else {
// this.getType = "video";
// this.sendWsCommand("OPEN_VIDEO");
// }
// },
getVideoImg (type) {
// 如果正在请求媒体资源，提示并阻止操作
if (this.isMediaRequesting) {
const tipText = this.getType === "img"
? "请等待图片获取完毕再切换"
: "请等待视频获取完毕再切换";
uni.showToast({
title: tipText,
icon: "none",
duration: 2000
});
return;
}
// 开始新的媒体请求，锁定状态
this.isMediaRequesting = true;
this.isMediaLoading = true;
if (type == "img") {
this.getType = "img";
this.getType = type;
// 根据类型发送对应指令
if (type === "img") {
this.sendWsCommand("IMAGE");
} else {
this.getType = "video";
this.sendWsCommand("OPEN_VIDEO");
}
},
// 获取状态文字
getStatusText(status) {
getStatusText (status) {
if (status == -1) {
return "断开";
}
return this.statusMap[status]?.text || "";
},
getStatusText2(status) {
getStatusText2 (status) {
//如果状态为-1就算断开
if (status === -1) {
return "断开";
@ -660,13 +710,13 @@ export default {
return this.childStatusMap[status]?.text || "";
},
// 获取状态颜色
getStatusColor(status) {
getStatusColor (status) {
if (status == -1) {
return "#999999";
}
return this.childStatusMap[status]?.color; // 默认灰色
},
getCurrentTime() {
getCurrentTime () {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份补零
@ -677,10 +727,10 @@ export default {
// 格式：YYYY.MM.DD HH:MM:SS
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
},
goBack() {
goBack () {
uni.navigateBack();
},
async getDeviceDetail() {
async getDeviceDetail () {
try {
const res = await uni.request({
url: BASE_API_URL + '/api/front/device/get',
@ -725,7 +775,7 @@ export default {
});
}
},
onDeviceNameInput(e) {
onDeviceNameInput (e) {
this.deviceName = e.detail.value;
// console.log('输入内容：', e.detail.value);
},
@ -896,7 +946,8 @@ export default {
}
.deviceN_input {
width: 419rpx;
/* width: 419rpx; */
width: 347rpx;
height: 74rpx;
background: #ffffff;
border-radius: 10rpx;
@ -904,6 +955,7 @@ export default {
font-weight: 400;
font-size: 28rpx;
color: #666666;
padding-right: 72rpx;
}
.label_text {
@ -1044,10 +1096,9 @@ export default {
.img_video_warp {
width: 100%;
height: 321;
height: 321px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20rpx;
margin: 22rpx 0 32rpx 0;
}
.back_button_icon {

2
pages/index/index.vue
View File

@ -265,7 +265,7 @@
</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 class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img2.png">
</image>
<view class="table_nodata_text">暂无设备预警</view>
</view>