Merge remote-tracking branch 'origin/main'
# Conflicts: # pages/deviceManage/index.vue
This commit is contained in:
18796357645
commit
7561634e99
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user