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-29 11:56:26 +08:00
parent 566b05ff77
commit 5900a8157c
6 changed files with 230 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
config.js
View File

@ -1,9 +1,18 @@
// 后端接口 // 后端接口
export const BASE_API_URL = "https://online.totustec.com/api"; export const BASE_API_URL = "https://online.totustec.com/api";
// 静态数据 // 静态数据
export const BASE_IMG_URL = "https://online.totustec.com/upload"; export const BASE_IMG_URL = "https://online.totustec.com/upload";
export const BASE_STOKECT_URL = "wss://online.totustec.com/webSocket/vue"
export const BASE_STOKECT_URL = "wss://online.totustec.com/webSocket/vue" // 打印状态颜色以及对应编号
export const DEVICE_STATUS_MAP={
0: { color: '#999999', text: '空闲' },
1: { color: '#00d195', text: '打印中' },
2: { color: '#00abff', text: '准备中' },
3: { color: '#FDCB3B', text: '铲件中' },
4: { color: '#FDCB3B', text: '暂停' },
5: { color: '#4CAF50', text: '打印完成' },
6: { color: '#18a2af', text: '报警' },
'-1': { color: '#999999', text: '断开' }
}

134
pages/device/index.vue
View File

@ -24,36 +24,33 @@
<view class="device_table_area"> <view class="device_table_area">
<view class="device_table_top"> <view class="device_table_top">
<view class="table_top_item" style="padding-left: 27rpx">机器序号</view> <view class="table_top_item" style="padding-left: 27rpx">机器序号</view>
<view class="table_top_item" style="width: 301rpx">机器描述</view> <view class="table_top_item" style="width: 240rpx">机器描述</view>
<view class="table_top_item" style="width: 200rpx">设备运行状态</view> <view class="table_top_item" style="width: 230rpx">运行状态</view>
<view class="table_top_item" style="width: 160rpx">设备控制</view>
</view> </view>
<view class="table_data_warp" v-if="deviceList.length > 0"> <view class="table_data_warp" v-if="deviceList.length > 0">
<view class="table_data_item" v-for="(item, index) in deviceList"> <view class="table_data_item" v-for="(item, index) in deviceList" :key="item.deviceCode">
<view class="data_display_warp"> <view class="data_display_warp">
<view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view> <view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view>
<view class="data_item_line" style="width: 301rpx">{{ item.brand }}</view> <view class="data_item_line" style="width: 240rpx">{{ item.brand }}</view>
<view class="data_item_line" style="width: 200rpx"> <view class="data_item_line">
<view class="label_warp" v-if="item.status == 0"> <view class="label_warp">
<view class="label_icon"></view> <view
<view class="label_text">空闲</view> class="label_icon"
</view> :style="{ background: getStatusConfig(item.status).color }"
<view class="label_warp" v-if="item.status == 2"> ></view>
<view class="label_icon" style="background: #00abff"></view> <view
<view class="label_text" style="color: #00abff">准备中</view> class="label_text"
</view> :style="{ color: getStatusConfig(item.status).color }"
<view class="label_warp" v-if="item.status == 1"> >
<view class="label_icon" style="background: #00d195"></view> {{ getStatusConfig(item.status).text }}
<view class="label_text" style="color: #00d195">打印中</view> </view>
</view>
<view class="label_warp" v-if="item.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="item.status == -1">
<view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view>
</view> </view>
</view> </view>
<view class="data_item_line" style="width: 160rpx">
<button class="device_control_btn" @click="toDeviceControl(item.deviceCode, item.status)">查看
</button>
</view>
</view> </view>
<view class="data_dline_warp"> <view class="data_dline_warp">
@ -74,20 +71,19 @@
<view style="height: 100rpx"></view> <view style="height: 100rpx"></view>
</view> </view>
<image class="equipment_control_warp" src="https://online.totustec.com/upload/devicePage/equipment_control_warp.png" <!-- <image class="equipment_control_warp" src="https://online.totustec.com/upload/devicePage/equipment_control_warp.png"-->
@click="toPage('设备控制')"> <!-- @click="toPage('设备控制')">-->
</image> <!-- </image>-->
</view> </view>
</template> </template>
<script> <script>
import { import {
BASE_API_URL, BASE_API_URL,
BASE_STOKECT_URL, BASE_STOKECT_URL,DEVICE_STATUS_MAP
BASE_IMG_URL
} from "@/config.js"; } from "@/config.js";
export default { export default {
data () { data() {
return { return {
title: "Hello", title: "Hello",
statusBarHeight: 0, statusBarHeight: 0,
@ -96,33 +92,30 @@ export default {
size: 10000, size: 10000,
}, },
deviceList: [], deviceList: [],
// WebSocket 相关状态 // WebSocket 相关状态
socketTask: null, // uni-app 的 WebSocket 任务实例 socketTask: null, // uni-app 的 WebSocket 任务实例
isSocketConnected: false, // 连接状态 isSocketConnected: false, // 连接状态
reconnectTimer: null, // 重连定时器 reconnectTimer: null, // 重连定时器
reconnectInterval: 5000 // 重连间隔（5秒） reconnectInterval: 5000, // 重连间隔（5秒）
}; };
}, },
onLoad () { onLoad() {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
} = systemInfo; } = systemInfo;
this.statusBarHeight = statusBarHeight; this.statusBarHeight = statusBarHeight;
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onUnload () { onUnload() {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
onShow () { onShow() {
this.getDeviceList(); // 每次显示页面时调用 this.getDeviceList(); // 每次显示页面时调用
}, },
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket() {
const wsUrl = BASE_STOKECT_URL; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
@ -138,20 +131,17 @@ export default {
} }
}); });
}, },
listenSocketMessage() {
listenSocketMessage () {
// 监听 WebSocket 消息 // 监听 WebSocket 消息
uni.onSocketMessage((event) => { uni.onSocketMessage((event) => {
console.log('event', event); console.log('event', event);
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
console.log('收到实时消息:', message); console.log('收到实时消息:', message);
this.getDeviceList(); this.getDeviceList();
// this.updateDeviceStatus(message); // 更新设备状态 // this.updateDeviceStatus(message); // 更新设备状态
}); });
}, },
closeWebSocket() {
closeWebSocket () {
// 关闭连接并清理资源 // 关闭连接并清理资源
if (this.socketTask) { if (this.socketTask) {
uni.closeSocket(); uni.closeSocket();
@ -160,8 +150,7 @@ export default {
} }
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
}, },
tryReconnect() {
tryReconnect () {
// 自动重连机制 // 自动重连机制
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => { this.reconnectTimer = setTimeout(() => {
@ -169,14 +158,10 @@ export default {
this.connectWebSocket(); this.connectWebSocket();
}, this.reconnectInterval); }, this.reconnectInterval);
}, },
updateDeviceStatus(message) {
updateDeviceStatus (message) {
console.log('实时消息'); console.log('实时消息');
}, },
toPage(type) {
toPage (type) {
if (type == "设备控制") { if (type == "设备控制") {
uni.navigateTo({ uni.navigateTo({
url: "/pages/selectDevice/index", url: "/pages/selectDevice/index",
@ -188,8 +173,20 @@ export default {
}); });
} }
}, },
toDeviceControl(deviceCode, status) {
async getDeviceList () { if (status === -1) {
uni.showToast({
title: '设备处于断开状态，暂不支持查看',
icon: 'none'
});
return
}
console.log("data", deviceCode);
uni.navigateTo({
url: `/pages/deviceManage/index?deviceCode=${deviceCode}`
});
},
async getDeviceList() {
try { try {
// 从本地缓存获取用户信息 // 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {}; const userInfo = uni.getStorageSync("userInfo") || {};
@ -210,13 +207,15 @@ export default {
} }
} catch (error) { } catch (error) {
console.log('请求接口失败', error); console.log('请求接口失败', error);
} }
}, },
getStatusConfig(status) {
return DEVICE_STATUS_MAP[status] || { color: '#cccccc', text: '未知' };
},
}, },
}; };
</script> </script>
<!-- 临时样式 -->
<style scoped> <style scoped>
.label_icon { .label_icon {
width: 18rpx; width: 18rpx;
@ -224,7 +223,6 @@ export default {
background: #cccccc; background: #cccccc;
border-radius: 100%; border-radius: 100%;
} }
.label_text { .label_text {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
@ -233,19 +231,9 @@ export default {
margin-left: 8rpx; margin-left: 8rpx;
} }
.label_text2 {
color: #ff0000;
}
.label_warp { .label_warp {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 48rpx;
}
.label_warp2 {
display: flex;
align-items: center;
} }
.data_item_line { .data_item_line {
@ -451,4 +439,18 @@ export default {
margin-top: -28rpx; margin-top: -28rpx;
padding-top: 28rpx; padding-top: 28rpx;
} }
.device_control_btn {
width: 114rpx;
height: 48rpx;
background: #f2c141;
border-radius: 24rpx;
display: flex;
justify-content: center;
align-items: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #333333;
}
</style> </style>

19
pages/deviceBind/index.vue
View File

@ -129,7 +129,6 @@ export default {
"Authorization": uni.getStorageSync("userInfo")?.token || "" "Authorization": uni.getStorageSync("userInfo")?.token || ""
} }
}); });
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: res.data.message, // 直接显示完整文本 content: res.data.message, // 直接显示完整文本
@ -139,16 +138,16 @@ export default {
if (res.statusCode === 200) { if (res.statusCode === 200) {
uni.showToast({ uni.showToast({
title: "绑定成功", title: "绑定成功",
icon: "success", // 可选，增加成功图标 icon: "success",
duration: 1500 // 1.5秒后自动关闭 duration: 1500,
success: () => {
setTimeout(() => {
uni.switchTab({
url: "/pages/device/index"
});
}, 1500);
}
}); });
// 1.5秒后跳转到设备页面
setTimeout(() => {
uni.navigateTo({
url: "/pages/device/index"
});
}, 1500);
} }
} catch (error) { } catch (error) {
console.error("设备绑定失败:", error); console.error("设备绑定失败:", error);

222
pages/deviceManage/index.vue
View File

@ -16,11 +16,17 @@
<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')"> <!--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> </view>
</view> </view>
</view> </view>
@ -30,45 +36,49 @@
<view class="loading_spinner" v-if="isMediaLoading"> <view class="loading_spinner" v-if="isMediaLoading">
<view class="spinner"></view> <view class="spinner"></view>
</view> </view>
<!-- 媒体内容 --> <!-- 媒体内容 -->
<video <video
class="img_video_warp" class="img_video_warp"
:src="socketData.videoUrl" :src="socketData.videoUrl"
v-if="socketData.videoUrl" v-if="getType === 'video' && socketData.videoUrl"
@loadedmetadata="handleMediaLoaded" @loadedmetadata="handleMediaLoaded"
@error="handleMediaError" @error="handleMediaError"
></video> ></video>
<image <image
class="img_video_warp" class="img_video_warp"
:src="socketData.imageUrl" :src="socketData.chipImageUrl"
v-else-if="socketData.imageUrl" v-else-if="getType === 'chip' && socketData.chipImageUrl"
@load="handleMediaLoaded" @load="handleMediaLoaded"
@error="handleMediaError" @error="handleMediaError"
></image> />
<image <image
class="img_video_warp" class="img_video_warp"
:src="TOPBG" :src="socketData.monitorImageUrl"
v-else v-else-if="getType === 'monitor' && socketData.monitorImageUrl"
mode="aspectFill" @load="handleMediaLoaded"
@error="handleMediaError"
/>
<image
class="img_video_warp"
:src="TOPBG"
v-else
mode="aspectFill"
/> />
</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>
<!-- 设备状态 --> <!-- 设备状态 -->
<view class="device_status_warp" v-if="deviceType == 1"> <view class="device_status_warp" v-if="deviceType == 1">
<view class="device_status_item" v-for="(field, idx) in statusFields" :key="idx"> <view class="device_status_item" v-for="(field, idx) in statusFields" :key="idx">
@ -78,26 +88,9 @@
<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">
<view class="label_icon"></view> <view class="label_icon" :style="{ background: getStatusConfig(deviceDetail.status).color }"></view>
<view class="label_text">空闲</view> <view class="label_text" :style="{ color: getStatusConfig(deviceDetail.status).color }">{{ getStatusConfig(deviceDetail.status).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> </view>
</template> </template>
@ -139,7 +132,12 @@
<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">
{{ printInfo[field.key] }} <template v-if="field.key === 'currentTicks' || field.key === 'totalTicks'">
{{ formatSecondsToHMS(printInfo[field.key]) }}
</template>
<template v-else>
{{ printInfo[field.key] }}
</template>
</view> </view>
</view> </view>
<view class="itemContent_line_warp"> <view class="itemContent_line_warp">
@ -150,25 +148,27 @@
</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 class="empty_state_icon" 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>
</view> </view>
<!-- 设备控制 --> <!-- 设备控制 -->
<view class="device_control_warp" v-if="deviceType == 3"> <view class="device_status_warp" style = "background: #eff4fa;" 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>
@ -187,11 +187,11 @@
<!--继续打印--> <!--继续打印-->
<view class="device_operation_btn" @click="operationData('CONTINUE')" <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 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>
@ -222,7 +222,6 @@
}">退出打印</view> }">退出打印</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')">
@ -243,19 +242,19 @@
</template> </template>
<script> <script>
import { import {
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL,DEVICE_STATUS_MAP
} from "@/config.js"; } from "@/config.js";
export default { export default {
data () { data () {
return { return {
TOPBG:BASE_IMG_URL + "/minePage/top.jpg", TOPBG:BASE_IMG_URL + "/minePage/top.jpg",
isMediaLoading: false, isMediaLoading: false,
deviceName: "", deviceName: "",
title: "Hello", title: "Hello",
statusBarHeight: 0, statusBarHeight: 0,
getType: "video", getType: "",
deviceType: 3, deviceType: 1,
deviceCode: "", // 存储接收到的设备编码 deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据 deviceDetail: {}, // 存储设备详情数据
printInfo: {},//存储设备二级详情数据 printInfo: {},//存储设备二级详情数据
@ -364,7 +363,7 @@ export default {
isErrorStatus: true isErrorStatus: true
}, },
{ {
label: '错误码', label: '报警状态',
key: 'errorStatus', key: 'errorStatus',
isErrorCode: true, isErrorCode: true,
}, },
@ -385,11 +384,11 @@ export default {
key: 'totalLayer' key: 'totalLayer'
}, },
{ {
label: '已打印时间(s)', label: '已打印时间',
key: 'currentTicks' key: 'currentTicks'
}, },
{ {
label: '总打印时间(s)', label: '总打印时间',
key: 'totalTicks' key: 'totalTicks'
}, },
{ {
@ -412,6 +411,8 @@ export default {
reconnectInterval: 5000, // 重连间隔（5秒） reconnectInterval: 5000, // 重连间隔（5秒）
socketData: {}, socketData: {},
isMediaRequesting: false, // 媒体请求状态锁，防止并发请求 isMediaRequesting: false, // 媒体请求状态锁，防止并发请求
mediaTimeoutTimer: null, // 新增：媒体请求超时定时器
}; };
}, },
onLoad (options) { onLoad (options) {
@ -436,16 +437,27 @@ export default {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
methods: { methods: {
getStatusConfig(status) {
return DEVICE_STATUS_MAP[status] || { color: '#cccccc', text: '未知' };
},
// 媒体加载成功处理 // 媒体加载成功处理
handleMediaLoaded () { handleMediaLoaded () {
this.isMediaLoading = false; this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态 this.isMediaRequesting = false; // 解锁请求状态
if (this.mediaTimeoutTimer) {
clearTimeout(this.mediaTimeoutTimer);
this.mediaTimeoutTimer = null;
}
}, },
// 媒体加载失败处理 // 媒体加载失败处理
handleMediaError () { handleMediaError () {
this.isMediaLoading = false; this.isMediaLoading = false;
this.isMediaRequesting = false; // 解锁请求状态 this.isMediaRequesting = false; // 解锁请求状态
if (this.mediaTimeoutTimer) {
clearTimeout(this.mediaTimeoutTimer);
this.mediaTimeoutTimer = null;
}
}, },
@ -515,10 +527,15 @@ export default {
// INFO 返回视频/图片地址 // INFO 返回视频/图片地址
if (message.msgType == "INFO") { if (message.msgType == "INFO") {
this.isMediaLoading = true; this.isMediaLoading = true;
this.socketData = message.data; this.socketData = this.socketData || {};
if (this.socketData.imageUrl) { if (message.data.videoUrl) {
this.socketData.imageUrl = this.socketData.videoUrl = message.data.videoUrl;
BASE_IMG_URL + message.data.imageUrl; }
if (message.data.chipImageUrl) {
this.socketData.chipImageUrl = message.data.chipImageUrl;
}
if (message.data.monitorImageUrl) {
this.socketData.monitorImageUrl = message.data.monitorImageUrl;
} }
} }
// WRITEIMG 接收图片数据中 // WRITEIMG 接收图片数据中
@ -557,15 +574,15 @@ 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) {
@ -683,9 +700,9 @@ export default {
getVideoImg (type) { getVideoImg (type) {
// 如果正在请求媒体资源，提示并阻止操作 // 如果正在请求媒体资源，提示并阻止操作
if (this.isMediaRequesting) { if (this.isMediaRequesting) {
const tipText = this.getType === "img" const tipText = this.getType === type
? "请等待图片获取完毕再切换" ? `请等待${type === 'video' ? '视频' : type === 'chip' ? '铲件图片' : '监控图片'}获取完毕再切换`
: "请等待视频获取完毕再切换"; : `请等待上一次获取完成再切换`;
uni.showToast({ uni.showToast({
title: tipText, title: tipText,
icon: "none", icon: "none",
@ -694,16 +711,43 @@ export default {
return; 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.isMediaRequesting = true;
this.isMediaLoading = true; this.isMediaLoading = true;
this.getType = type; 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 === "img") { if (type === "video") {
this.sendWsCommand("IMAGE");
} else {
this.sendWsCommand("OPEN_VIDEO"); this.sendWsCommand("OPEN_VIDEO");
} else if (type === "chip") {
this.sendWsCommand("CHIP_IMAGE");
} else if (type === "monitor") {
this.sendWsCommand("MONITOR_IMAGE");
} }
}, },
// 获取状态文字 // 获取状态文字
@ -738,6 +782,18 @@ 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}`;
}, },
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 () { goBack () {
uni.navigateBack(); uni.navigateBack();
}, },
@ -957,7 +1013,7 @@ export default {
} }
.deviceN_input { .deviceN_input {
/* width: 419rpx; */
width: 347rpx; width: 347rpx;
height: 74rpx; height: 74rpx;
background: #ffffff; background: #ffffff;
@ -1060,7 +1116,7 @@ export default {
padding: 0 16rpx; padding: 0 16rpx;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
align-items: center; align-items: center;
} }

7
pages/index/index.vue
View File

@ -323,10 +323,7 @@ export default {
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
} = systemInfo; } = systemInfo;
this.statusBarHeight = statusBarHeight; this.statusBarHeight = statusBarHeight;
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onShow () { onShow () {
@ -388,11 +385,7 @@ export default {
updateDeviceStatus (message) { updateDeviceStatus (message) {
console.log('实时消息'); console.log('实时消息');
}, },
// 获取状态文字 // 获取状态文字
getStatusText (status) { getStatusText (status) {
if (status == -1) { if (status == -1) {

4
pages/mine/index.vue
View File

@ -120,8 +120,8 @@ export default {
}, },
toPage (pageName) { toPage (pageName) {
if (pageName == "设备管理") { if (pageName == "设备管理") {
uni.navigateTo({ uni.switchTab({
url: "/pages/selectDevice/index", url: "/pages/device/index"
}); });
} }
}, },