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

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	pages/deviceManage/index.vue
This commit is contained in:
18796357645 2025-07-29 11:58:13 +08:00
commit 7561634e99
1 changed files with 83 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
pages/deviceManage/index.vue
View File

@ -16,17 +16,11 @@
<view class="select_device_warp">
<view class="modal_warp">
<view class="select_device_item" :class="{ device_active: getType == 'video' }"
@click="getVideoImg('video')">
@click="getVideoImg('video')">
获取视频
</view>
<!--todo 未实现-->
<view class="select_device_item" :class="{ device_active: getType == 'chip' }"
@click="getVideoImg('chip')">
获取铲件图片
</view>
<view class="select_device_item" :class="{ device_active: getType == 'monitor' }"
@click="getVideoImg('monitor')">
获取监控图片
<view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')">
获取图片
</view>
</view>
</view>
@ -36,49 +30,45 @@
<view class="loading_spinner" v-if="isMediaLoading">
<view class="spinner"></view>
</view>
<!-- 媒体内容 -->
<video
class="img_video_warp"
:src="socketData.videoUrl"
v-if="getType === 'video' && socketData.videoUrl"
@loadedmetadata="handleMediaLoaded"
@error="handleMediaError"
class="img_video_warp"
:src="socketData.videoUrl"
v-if="socketData.videoUrl"
@loadedmetadata="handleMediaLoaded"
@error="handleMediaError"
></video>
<image
class="img_video_warp"
:src="socketData.chipImageUrl"
v-else-if="getType === 'chip' && socketData.chipImageUrl"
@load="handleMediaLoaded"
@error="handleMediaError"
/>
class="img_video_warp"
:src="socketData.imageUrl"
v-else-if="socketData.imageUrl"
@load="handleMediaLoaded"
@error="handleMediaError"
></image>
<image
class="img_video_warp"
:src="socketData.monitorImageUrl"
v-else-if="getType === 'monitor' && socketData.monitorImageUrl"
@load="handleMediaLoaded"
@error="handleMediaError"
/>
<image
class="img_video_warp"
:src="TOPBG"
v-else
mode="aspectFill"
class="img_video_warp"
:src="TOPBG"
v-else
mode="aspectFill"
/>
</view>
<!-- 设备状态选择 -->
<view class="select_device_warp">
<view class="modal_warp">
<view class="select_device_item device_model" :class="{ device_active: deviceType == 1 }"
@click="deviceType = 1">设备状态
@click="deviceType = 1">设备状态
</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">设备日志
</view> -->
</view>
<view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }"
@click="deviceType = 3">设备控制
@click="deviceType = 3">设备控制
</view>
</view>
</view>
<!-- 设备状态 -->
<view class="device_status_warp" v-if="deviceType == 1">
<view class="device_status_item" v-for="(field, idx) in statusFields" :key="idx">
@ -88,9 +78,26 @@
<view class="item_content_middel">
<!-- 状态处理 完成-->
<template v-if="field.isStatus">
<view class="label_warp">
<view class="label_icon" :style="{ background: getStatusConfig(deviceDetail.status).color }"></view>
<view class="label_text" :style="{ color: getStatusConfig(deviceDetail.status).color }">{{ getStatusConfig(deviceDetail.status).text }}</view>
<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 == 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 == 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_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>
</template>
@ -132,12 +139,7 @@
<view class="item_content_warp">
<view class="item_content_left">{{ field.label }}</view>
<view class="item_content_middel">
<template v-if="field.key === 'currentTicks' || field.key === 'totalTicks'">
{{ formatSecondsToHMS(printInfo[field.key]) }}
</template>
<template v-else>
{{ printInfo[field.key] }}
</template>
{{ printInfo[field.key] }}
</view>
</view>
<view class="itemContent_line_warp">
@ -148,27 +150,25 @@
</view>
</view>
</view>
<!-- 设备日志 -->
<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>
<view class="empty_state_title">暂无日志数据</view>
<view class="empty_state_desc">设备运行日志将在这里显示</view>
<!-- <view class="empty_state_desc">设备运行日志将在这里显示</view> -->
</view>
</view>
<!-- 设备控制 -->
<view class="device_status_warp" style = "background: #eff4fa;" v-if="deviceType == 3">
<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"
@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">
src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png">
</image>
</view>
</view>
@ -187,11 +187,11 @@
<!--继续打印-->
<view class="device_operation_btn" @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>
<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>
@ -222,6 +222,7 @@
}">退出打印</view>
</view>
</view>
<!-- 报警继续 报警退出-->
<view class="device_operation_warp">
<view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')">
@ -242,19 +243,19 @@
</template>
<script>
import {
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL,DEVICE_STATUS_MAP
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL
} from "@/config.js";
export default {
data () {
return {
TOPBG:BASE_IMG_URL + "/minePage/top.jpg",
TOPBG:BASE_IMG_URL + "/minePage/top.jpg",
isMediaLoading: false,
deviceName: "",
title: "Hello",
statusBarHeight: 0,
getType: "",
deviceType: 1,
getType: "video",
deviceType: 3,
deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据
printInfo: {},//存储设备二级详情数据
@ -363,7 +364,7 @@ export default {
isErrorStatus: true
},
{
label: '报警状态',
label: '错误码',
key: 'errorStatus',
isErrorCode: true,
},
@ -384,11 +385,11 @@ export default {
key: 'totalLayer'
},
{
label: '已打印时间',
label: '已打印时间(s)',
key: 'currentTicks'
},
{
label: '总打印时间',
label: '总打印时间(s)',
key: 'totalTicks'
},
{
@ -411,8 +412,6 @@ export default {
reconnectInterval: 5000, // 重连间隔（5秒）
socketData: {},
isMediaRequesting: false, // 媒体请求状态锁，防止并发请求
mediaTimeoutTimer: null, // 新增：媒体请求超时定时器
};
},
onLoad (options) {
@ -437,27 +436,16 @@ export default {
this.closeWebSocket(); // 页面卸载时关闭连接
},
methods: {
getStatusConfig(status) {
return DEVICE_STATUS_MAP[status] || { color: '#cccccc', text: '未知' };
},
// 媒体加载成功处理
handleMediaLoaded () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
if (this.mediaTimeoutTimer) {
clearTimeout(this.mediaTimeoutTimer);
this.mediaTimeoutTimer = null;
}
},
// 媒体加载失败处理
handleMediaError () {
this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态
if (this.mediaTimeoutTimer) {
clearTimeout(this.mediaTimeoutTimer);
this.mediaTimeoutTimer = null;
}
},
@ -527,15 +515,10 @@ export default {
// INFO 返回视频/图片地址
if (message.msgType == "INFO") {
this.isMediaLoading = true;
this.socketData = this.socketData || {};
if (message.data.videoUrl) {
this.socketData.videoUrl = message.data.videoUrl;
}
if (message.data.chipImageUrl) {
this.socketData.chipImageUrl = message.data.chipImageUrl;
}
if (message.data.monitorImageUrl) {
this.socketData.monitorImageUrl = message.data.monitorImageUrl;
this.socketData = message.data;
if (this.socketData.imageUrl) {
this.socketData.imageUrl =
BASE_IMG_URL + message.data.imageUrl;
}
}
// WRITEIMG 接收图片数据中
@ -574,15 +557,15 @@ export default {
// 发送消息（使用 uni-app 的 sendSocketMessage）
uni
.sendSocketMessage({
data: JSON.stringify(message),
})
.then(() => {
console.log("指令发送成功:", message);
})
.catch((err) => {
console.error("指令发送失败:", err);
});
.sendSocketMessage({
data: JSON.stringify(message),
})
.then(() => {
console.log("指令发送成功:", message);
})
.catch((err) => {
console.error("指令发送失败:", err);
});
},
operationData (type) {
@ -700,9 +683,9 @@ export default {
getVideoImg (type) {
// 如果正在请求媒体资源，提示并阻止操作
if (this.isMediaRequesting) {
const tipText = this.getType === type
? `请等待${type === 'video' ? '视频' : type === 'chip' ? '铲件图片' : '监控图片'}获取完毕再切换`
: `请等待上一次获取完成再切换`;
const tipText = this.getType === "img"
? "请等待图片获取完毕再切换"
: "请等待视频获取完毕再切换";
uni.showToast({
title: tipText,
icon: "none",
@ -711,43 +694,16 @@ export default {
return;
}
// 防止重复获取
if (type === 'video' && this.getType === 'video' && this.socketData.videoUrl) {
uni.showToast({ title: '已获取到视频，无需重复获取', icon: 'none', duration: 2000 });
return;
}
if (type === 'chip' && this.getType === 'chip' && this.socketData.chipImageUrl) {
uni.showToast({ title: '已获取到铲件图片，无需重复获取', icon: 'none', duration: 2000 });
return;
}
if (type === 'monitor' && this.getType === 'monitor' && this.socketData.monitorImageUrl) {
uni.showToast({ title: '已获取到监控图片，无需重复获取', icon: 'none', duration: 2000 });
return;
}
// 开始新的媒体请求，锁定状态
this.isMediaRequesting = true;
this.isMediaLoading = true;
this.getType = type;
// 启动15秒超时定时器
if (this.mediaTimeoutTimer) clearTimeout(this.mediaTimeoutTimer);
this.mediaTimeoutTimer = setTimeout(() => {
this.isMediaRequesting = false;
this.isMediaLoading = false;
uni.showToast({
title: `获取${type === 'video' ? '视频' : type === 'chip' ? '铲件图片' : '监控图片'}请求超时，请重试`,
icon: 'none',
duration: 2000
});
}, 15000);
// 根据类型发送对应指令
if (type === "video") {
if (type === "img") {
this.sendWsCommand("IMAGE");
} else {
this.sendWsCommand("OPEN_VIDEO");
} else if (type === "chip") {
this.sendWsCommand("CHIP_IMAGE");
} else if (type === "monitor") {
this.sendWsCommand("MONITOR_IMAGE");
}
},
// 获取状态文字
@ -782,18 +738,6 @@ export default {
// 格式：YYYY.MM.DD HH:MM:SS
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
},
formatSecondsToHMS(seconds) {
if (!seconds && seconds !== 0) return '';
seconds = Number(seconds);
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
let result = '';
if (h > 0) result += `${h}时`;
if (m > 0 || h > 0) result += `${m}分`;
result += `${s}秒`;
return result;
},
goBack () {
uni.navigateBack();
},
@ -1013,7 +957,7 @@ export default {
}
.deviceN_input {
/* width: 419rpx; */
width: 347rpx;
height: 74rpx;
background: #ffffff;
@ -1116,7 +1060,7 @@ export default {
padding: 0 16rpx;
height: 100%;
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
}