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

203
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')">
@ -32,24 +32,29 @@
</view> </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> @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> -->
<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> </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>
@ -138,8 +143,8 @@
<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" <image class="empty_state_icon" src="https://online.totustec.com/upload/deviceManage/empty_log_icon.png">
src="https://online.totustec.com/upload/deviceManage/empty_log_icon.png"></image> </image>
<view class="empty_state_title">暂无日志数据</view> <view class="empty_state_title">暂无日志数据</view>
<!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> --> <!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> -->
</view> </view>
@ -150,10 +155,10 @@
<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>
@ -161,45 +166,39 @@
<view class="deviceN_input_tip">文件位置：桌面File文件夹内</view> <view class="deviceN_input_tip">文件位置：桌面File文件夹内</view>
<view class="device_operation_warp"> <view class="device_operation_warp">
<!--只有主状态等于0时候开始打印才能点击，其他都不能点击--> <!--只有主状态等于0时候开始打印才能点击，其他都不能点击-->
<view class="device_operation_btn" <view class="device_operation_btn" @click="operationData('PRINT')" :style="{ backgroundColor: deviceDetail.status === 0 ? '#ffffff' : '#cccccc' }
@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>
<image class="operation_btn_icon" <view class="operation_btn_txt" :style="{
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image> color: deviceDetail.status === 0 ? '#333333' : '#ece8e8',
<view class="operation_btn_txt" }">开始打印</view>
:style="{
color:deviceDetail.status === 0 ?'#333333':'#ece8e8' ,}"
>开始打印</view>
</view> </view>
<!--继续打印--> <!--继续打印-->
<view class="device_operation_btn" <view class="device_operation_btn" @click="operationData('CONTINUE')"
@click="operationData('CONTINUE')" :style="{ backgroundColor: deviceDetail.status === 0 || printInfo.status !== 6 ? '#cccccc' : '#ffffff' }">
: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 class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt" <view class="operation_btn_txt"
:style="{color:deviceDetail.status === 0 || printInfo.status !== 6? '#ece8e8': '#333333'}" :style="{ color: deviceDetail.status === 0 || printInfo.status !== 6 ? '#ece8e8' : '#333333' }">继续打印
>继续打印</view> </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:printInfo.status !== 6 && deviceDetail.status !==0 backgroundColor: printInfo.status !== 6 && deviceDetail.status !== 0
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#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" :style="{ <view class="operation_btn_txt" :style="{
color: color:
printInfo.status !== 6 && deviceDetail.status !==0 printInfo.status !== 6 && deviceDetail.status !== 0
? '#333333':'#ece8e8', ? '#333333' : '#ece8e8',
}" }">暂停打印</view>
>暂停打印</view>
</view> </view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{ <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 class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt" <view class="operation_btn_txt" :style="{
:style="{ color: deviceDetail.status != 0 && deviceDetail.status != -1 ? '#333333' : '#ece8e8',
color: deviceDetail.status != 0 && deviceDetail.status != -1 ?'#333333': '#ece8e8', }">退出打印</view>
}"
>退出打印</view>
</view> </view>
</view> </view>
@ -240,7 +237,7 @@ import {
} from "@/config.js"; } from "@/config.js";
export default { export default {
data() { data () {
return { return {
isMediaLoading: false, isMediaLoading: false,
deviceName: "", deviceName: "",
@ -403,9 +400,10 @@ export default {
reconnectTimer: null, // 重连定时器 reconnectTimer: null, // 重连定时器
reconnectInterval: 5000, // 重连间隔（5秒） reconnectInterval: 5000, // 重连间隔（5秒）
socketData: {}, socketData: {},
isMediaRequesting: false, // 媒体请求状态锁，防止并发请求
}; };
}, },
onLoad(options) { onLoad (options) {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
@ -423,15 +421,26 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onUnload() { onUnload () {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
methods: { methods: {
// 媒体加载成功处理
handleMediaLoaded () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
},
// 媒体加载失败处理
handleMediaError () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
},
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket() { connectWebSocket () {
const wsUrl = BASE_STOKECT_URL; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
@ -449,7 +458,7 @@ export default {
}); });
}, },
listenSocketMessage() { listenSocketMessage () {
// 监听 WebSocket 消息 // 监听 WebSocket 消息
uni.onSocketMessage((event) => { uni.onSocketMessage((event) => {
console.log("event", event); console.log("event", event);
@ -460,7 +469,7 @@ export default {
}); });
}, },
closeWebSocket() { closeWebSocket () {
// 关闭连接并清理资源 // 关闭连接并清理资源
if (this.socketTask) { if (this.socketTask) {
uni.closeSocket(); uni.closeSocket();
@ -470,7 +479,7 @@ export default {
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
}, },
tryReconnect() { tryReconnect () {
// 自动重连机制 // 自动重连机制
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => { this.reconnectTimer = setTimeout(() => {
@ -479,7 +488,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") {
@ -498,7 +507,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 接收图片数据中
@ -515,7 +524,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;
@ -537,18 +546,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.deviceDetail.status == 0 && this.deviceDetail.status != -1) { if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
@ -598,8 +607,8 @@ export default {
} }
if (type == 'PAUSE') { if (type == 'PAUSE') {
console.log(this.deviceDetail.status ===0) console.log(this.deviceDetail.status === 0)
if (this.printInfo.status === 6 || this.deviceDetail.status ===0){ if (this.printInfo.status === 6 || this.deviceDetail.status === 0) {
// uni.showToast({ // uni.showToast({
// title: "当前设备已暂定，禁止操作", // title: "当前设备已暂定，禁止操作",
// icon: "none", // 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; this.isMediaLoading = true;
if (type == "img") { this.getType = type;
this.getType = "img";
// 根据类型发送对应指令
if (type === "img") {
this.sendWsCommand("IMAGE"); this.sendWsCommand("IMAGE");
} else { } else {
this.getType = "video";
this.sendWsCommand("OPEN_VIDEO"); this.sendWsCommand("OPEN_VIDEO");
} }
}, },
// 获取状态文字 // 获取状态文字
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) {
//如果状态为-1就算断开 //如果状态为-1就算断开
if (status === -1) { if (status === -1) {
return "断开"; return "断开";
@ -660,13 +710,13 @@ export default {
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"); // 月份补零
@ -677,10 +727,10 @@ export default {
// 格式：YYYY.MM.DD HH:MM:SS // 格式：YYYY.MM.DD HH:MM:SS
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`; 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',
@ -725,7 +775,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);
}, },
@ -896,7 +946,8 @@ export default {
} }
.deviceN_input { .deviceN_input {
width: 419rpx; /* width: 419rpx; */
width: 347rpx;
height: 74rpx; height: 74rpx;
background: #ffffff; background: #ffffff;
border-radius: 10rpx; border-radius: 10rpx;
@ -904,6 +955,7 @@ export default {
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #666666; color: #666666;
padding-right: 72rpx;
} }
.label_text { .label_text {
@ -1044,10 +1096,9 @@ export default {
.img_video_warp { .img_video_warp {
width: 100%; width: 100%;
height: 321; height: 321px;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 20rpx; border-radius: 20rpx;
margin: 22rpx 0 32rpx 0;
} }
.back_button_icon { .back_button_icon {

2
pages/index/index.vue
View File

@ -265,7 +265,7 @@
</view> --> </view> -->
</view> </view>
<view class="table_nodata_area" v-else> <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> </image>
<view class="table_nodata_text">暂无设备预警</view> <view class="table_nodata_text">暂无设备预警</view>
</view> </view>