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-15 16:37:09 +08:00
parent 73536a9cc1
commit 164138577c
3 changed files with 770 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -4,3 +4,5 @@ export const BASE_API_URL = "https://online.totustec.com/api";
// 静态数据
export const BASE_IMG_URL = "https://online.totustec.com/upload";
export const BASE_STOKECT_URL = "ws://online.totustec.com/webSocket/vue"

464
pages/deviceManage/index.vue
View File

@ -5,7 +5,8 @@
<view class="top_nav_warp">
<view>设备管理</view>
<view class="back_button_warp" @click="goBack()">
<image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
<image class="back_button_icon"
src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view>
</view>
</view>
@ -19,7 +20,8 @@
@click="getVideoImg('video')">
获取视频
</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')">
获取图片</view>
</view>
</view>
@ -43,30 +45,13 @@
<!-- 设备状态 -->
<view class="device_status_warp" v-if="deviceType == 1">
<!-- 设备名称 -->
<view class="device_status_item">
<view class="device_status_item" v-for="(field, idx) in statusFields" :key="idx">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">设备名称</view>
<view class="item_content_middel">{{
deviceDetail.brand
}}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 打印状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">状态</view>
<view class="item_content_left">{{ field.label }}</view>
<view class="item_content_middel">
<!-- 状态特殊处理 -->
<template v-if="field.isStatus">
<view class="label_warp" v-if="deviceDetail.status == 0">
<view class="label_icon"></view>
<view class="label_text">空闲</view>
@ -87,73 +72,33 @@
<view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view>
</view>
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"> </view>
</view>
</view>
</view>
</view>
<!-- 子状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">子状态</view>
<view class="item_content_middel">
</template>
<!-- 子状态特殊处理 -->
<template v-else-if="field.isErrorStatus">
<view class="label_warp2">
<!-- 状态图标颜色映射 -->
<view class="label_icon" :style="{
background: getStatusColor(deviceDetail.errorStatus),
}"></view>
<!-- 状态文字条件渲染 -->
<view class="label_text label_text2" :style="{
color: getStatusColor(deviceDetail.errorStatus),
}">
<view class="label_icon"
:style="{ background: getStatusColor(deviceDetail.errorStatus) }">
</view>
<view class="label_text label_text2"
:style="{ color: getStatusColor(deviceDetail.errorStatus) }">
{{ getStatusText(deviceDetail.errorStatus) }}
</view>
</view>
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 当前时间 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">当前时间</view>
<view class="item_content_middel">{{ getCurrentTime() }}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 错误码 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">错误码</view>
<view class="item_content_middel">
<!-- {{deviceDetail.errorStatus}} -->
</template>
<!-- 错误码特殊处理 -->
<template v-else-if="field.isErrorCode">
{{ deviceDetail.errorStatus === -1 ? '断开' : deviceDetail.errorStatus }}
</template>
<!-- 当前时间特殊处理 -->
<template v-else-if="field.isCurrentTime">
{{ getCurrentTime() }}
</template>
<!-- 其他字段 -->
<template v-else>
{{ deviceDetail[field.key] }}
</template>
</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
@ -170,7 +115,8 @@
<input class="deviceN_input" type="text" v-model="deviceName" />
<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"></image>
src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png">
</image>
</view>
</view>
</view>
@ -182,7 +128,8 @@
? '#ffffff'
: '#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>
<view class="operation_btn_txt">开始打印</view>
</view>
@ -195,7 +142,8 @@
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image>
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">继续打印</view>
</view>
</view>
@ -203,11 +151,12 @@
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor:
deviceDetail.status == 2 && deviceDetail.status != -1
(deviceDetail.status == 1 || deviceDetail.status == 2) && deviceDetail.status != -1
? '#ffffff'
: '#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>
<view class="operation_btn_txt">暂停打印</view>
</view>
@ -218,19 +167,22 @@
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image>
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">退出打印</view>
</view>
</view>
<view class="device_operation_warp">
<view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image>
<view class="operation_btn_txt">报警继续</view>
</view>
<view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image>
<view class="operation_btn_txt">报警退出</view>
</view>
@ -241,8 +193,11 @@
</view>
</template>
<script>
export default {
data () {
import {
BASE_STOKECT_URL
} from "@/config.js";
export default {
data() {
return {
deviceName: "",
title: "Hello",
@ -252,15 +207,93 @@ export default {
deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据
statusMap: {
0: { text: "正常", color: "#00d195" }, // 绿色
1: { text: "文件校验失败", color: "#ff0000" }, // 红色
2: { text: "设备或加密错误", color: "#ff0000" },
3: { text: "打印准备过程出错", color: "#ff0000" }, // 橙色
4: { text: "打印出错", color: "#ff0000" },
5: { text: "加液失败", color: "#ff9800" },
6: { text: "铲件失败", color: "#ff9800" },
7: { text: "图片异物", color: "#ff0000" },
0: {
text: "正常",
color: "#00d195"
}, // 绿色
1: {
text: "文件校验失败",
color: "#ff0000"
}, // 红色
2: {
text: "设备或加密错误",
color: "#ff0000"
},
3: {
text: "打印准备过程出错",
color: "#ff0000"
}, // 橙色
4: {
text: "打印出错",
color: "#ff0000"
},
5: {
text: "加液失败",
color: "#ff9800"
},
6: {
text: "铲件失败",
color: "#ff9800"
},
7: {
text: "图片异物",
color: "#ff0000"
},
},
// 新增：设备状态字段配置
statusFields: [{
label: '设备名称',
key: 'brand'
},
{
label: '状态',
key: 'status',
isStatus: true
},
{
label: '子状态',
key: 'errorStatus',
isErrorStatus: true
},
{
label: '当前打印层数',
key: 'currentLayer'
},
{
label: '打印任务总层数',
key: 'totalLayer'
},
{
label: '已打印时间(s)',
key: 'printedTime'
},
{
label: '总打印时间(s)',
key: 'totalTime'
},
{
label: '打印文件名称',
key: 'fileName'
},
{
label: '错误码',
key: 'errorStatus',
isErrorCode: true
},
{
label: '当前任务数量',
key: 'Task'
},
{
label: '总共任务数量',
key: 'totalTask'
},
{
label: '当前时间',
key: 'currentTime',
isCurrentTime: true
}
],
// WebSocket 相关状态
socketTask: null, // uni-app 的 WebSocket 任务实例
@ -270,7 +303,7 @@ export default {
socketData: {},
};
},
onLoad (options) {
onLoad(options) {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // 状态栏高度（单位：px）
@ -288,13 +321,13 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接
},
onUnload () {
onUnload() {
this.closeWebSocket(); // 页面卸载时关闭连接
},
methods: {
// ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () {
const wsUrl = "ws://online.totustec.com/webSocket/vue";
connectWebSocket() {
const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({
@ -311,7 +344,7 @@ export default {
});
},
listenSocketMessage () {
listenSocketMessage() {
// 监听 WebSocket 消息
uni.onSocketMessage((event) => {
console.log("event", event);
@ -322,7 +355,7 @@ export default {
});
},
closeWebSocket () {
closeWebSocket() {
// 关闭连接并清理资源
if (this.socketTask) {
uni.closeSocket();
@ -332,7 +365,7 @@ export default {
clearTimeout(this.reconnectTimer);
},
tryReconnect () {
tryReconnect() {
// 自动重连机制
clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => {
@ -341,7 +374,7 @@ export default {
}, this.reconnectInterval);
},
updateDeviceStatus (message) {
updateDeviceStatus(message) {
console.log("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
@ -349,7 +382,10 @@ export default {
}
// ERROR 抛出异常信息
if (message.msgType == "ERROR") {
uni.showToast({ title: message.msg, icon: "none" });
uni.showToast({
title: message.msg,
icon: "none"
});
}
// INFO 返回视频/图片地址
if (message.msgType == "INFO") {
@ -373,7 +409,7 @@ export default {
* 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/
sendWsCommand (command) {
sendWsCommand(command) {
if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令");
return;
@ -406,7 +442,7 @@ export default {
});
},
operationData (type) {
operationData(type) {
if (type == "PRINT") {
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
this.sendWsCommand(type);
@ -422,17 +458,38 @@ export default {
}
}
if (type == 'PAUSE') {
if (this.deviceDetail.status == 2 && this.deviceDetail.status != -1) {
if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2) && this.deviceDetail.status != -
1) {
uni.showModal({
title: '提示',
content: '确定要暂停打印吗？',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
this.sendWsCommand(type);
}
}
});
}
}
if (type == 'EXIT') {
if (this.deviceDetail.status != 0 && this.deviceDetail.status != -1) {
uni.showModal({
title: '提示',
content: '确定要退出打印吗？',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
this.sendWsCommand(type);
}
}
});
}
}
},
getVideoImg (type) {
getVideoImg(type) {
if (type == "img") {
this.getType = "img";
this.sendWsCommand("IMAGE");
@ -442,20 +499,20 @@ export default {
}
},
// 获取状态文字
getStatusText (status) {
getStatusText(status) {
if (status == -1) {
return "断开";
}
return this.statusMap[status]?.text || "";
},
// 获取状态颜色
getStatusColor (status) {
getStatusColor(status) {
if (status == -1) {
return "#999999";
}
return this.statusMap[status]?.color; // 默认灰色
},
getCurrentTime () {
getCurrentTime() {
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
@ -463,12 +520,12 @@ export default {
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
return `${year}.${month}.${day} ${hours}:${minutes}`;
return `${year}年${month}月${day}日${hours}时${minutes}分`;
},
goBack () {
goBack() {
uni.navigateBack();
},
async getDeviceDetail () {
async getDeviceDetail() {
try {
const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/get`,
@ -488,27 +545,30 @@ export default {
}
} catch (error) {
console.error("获取设备详情失败:", error);
uni.showToast({ title: "获取设备信息失败", icon: "none" });
uni.showToast({
title: "获取设备信息失败",
icon: "none"
});
}
},
},
};
};
</script>
<!-- 临时样式 -->
<style scoped>
.operation_btn_icon {
.operation_btn_icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.operation_btn_txt {
.operation_btn_txt {
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
}
.device_operation_btn {
.device_operation_btn {
width: 320rpx;
height: 68rpx;
background: #ffffff;
@ -516,16 +576,16 @@ export default {
display: flex;
justify-content: center;
align-items: center;
}
}
.device_operation_warp {
.device_operation_warp {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
}
}
.deviceN_input_tip {
.deviceN_input_tip {
margin: 24rpx 0 70rpx 0;
font-weight: 400;
font-size: 26rpx;
@ -533,33 +593,33 @@ export default {
width: 100%;
display: flex;
justify-content: center;
}
}
.device_control_warp {
.device_control_warp {
width: 710rpx;
margin-top: 32rpx;
display: flex;
flex-direction: column;
}
}
.deviceN_input_warp {
.deviceN_input_warp {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.device_name_txt {
.device_name_txt {
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
}
.deviceN_input_area {
.deviceN_input_area {
position: relative;
}
}
.clear_deviceN_warp {
.clear_deviceN_warp {
position: absolute;
right: 16rpx;
top: 0;
@ -567,14 +627,14 @@ export default {
display: flex;
align-items: center;
z-index: 99;
}
}
.clear_deviceN_icon {
.clear_deviceN_icon {
width: 26rpx;
height: 26rpx;
}
}
.deviceN_input {
.deviceN_input {
width: 419rpx;
height: 74rpx;
background: #ffffff;
@ -583,108 +643,108 @@ export default {
font-weight: 400;
font-size: 28rpx;
color: #666666;
}
}
.label_text {
.label_text {
margin-left: 8rpx;
}
}
.label_text2 {
.label_text2 {
color: #ff0000;
}
}
.label_warp {
.label_warp {
display: flex;
align-items: center;
}
}
.label_warp2 {
.label_warp2 {
display: flex;
align-items: center;
}
}
.label_icon {
.label_icon {
width: 18rpx;
height: 18rpx;
background: #cccccc;
border-radius: 100%;
}
}
.item_content_model {
.item_content_model {
padding: 0 20rpx;
}
}
.item_content_line {
.item_content_line {
width: 100%;
height: 1rpx;
background-color: #ededed;
}
}
.itemContent_line_warp {
.itemContent_line_warp {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
}
.item_content_middel {
.item_content_middel {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #666666;
display: flex;
align-items: center;
}
}
.item_content_left {
.item_content_left {
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #333333;
margin-left: 5rpx;
width: 222rpx;
}
}
.item_content_warp {
.item_content_warp {
display: flex;
align-items: center;
}
}
.statusItem_modal_warp {
.statusItem_modal_warp {
padding: 0 22rpx;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
}
.device_status_item {
.device_status_item {
width: 100%;
height: 81rpx;
}
}
.device_status_warp {
.device_status_warp {
width: 710rpx;
background: #ffffff;
margin-top: 23rpx;
display: flex;
flex-direction: column;
}
}
.modal_warp {
.modal_warp {
padding: 0 16rpx;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.device_active {
.device_active {
background-color: #ffffff !important;
}
}
.select_device_item {
.select_device_item {
width: 329rpx;
height: 56rpx;
background: #e2edff;
@ -696,46 +756,46 @@ export default {
display: flex;
justify-content: center;
align-items: center;
}
}
.select_device_warp {
.select_device_warp {
width: 710rpx;
height: 68rpx;
background: #e2edff;
border-radius: 60rpx;
}
}
.content_warp {
.content_warp {
padding: 16rpx 20rpx 0 20rpx;
display: flex;
flex-direction: column;
}
}
.content_area_warp {
.content_area_warp {
width: 100%;
}
}
</style>
<style scoped>
.device_model {
.device_model {
width: 33%;
}
}
.img_video_warp {
.img_video_warp {
width: 100%;
height: 281rpx;
background: rgba(0, 0, 0, 0.3);
border-radius: 20rpx;
margin: 22rpx 0 32rpx 0;
}
}
.back_button_icon {
.back_button_icon {
transform: rotate(180deg);
width: 28rpx;
height: 28rpx;
}
}
.back_button_warp {
.back_button_warp {
position: absolute;
top: 0;
left: 0;
@ -744,9 +804,9 @@ export default {
display: flex;
align-items: center;
padding-left: 20rpx;
}
}
.contai_warp {
.contai_warp {
width: 100%;
display: flex;
flex-direction: column;
@ -755,20 +815,20 @@ export default {
min-height: 100vh;
background-color: #f1f6fc;
overflow-x: hidden !important;
}
}
.top_area_warp {
.top_area_warp {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
}
.top_status_area {
.top_status_area {
width: 100%;
}
}
.top_nav_warp {
.top_nav_warp {
width: 100%;
height: 88rpx;
display: flex;
@ -781,5 +841,5 @@ export default {
position: relative;
z-index: 5;
position: relative;
}
}
</style>

23
pages/mine/update.vue
View File

@ -17,9 +17,7 @@
<view class="profile_item">
<text class="item_label">头像</text>
<view class="avatar_wrapper" @click="changeAvatar">
<image class="avatar"
:src="userInfo.avatar || user"
mode="aspectFill"></image>
<image class="avatar" :src="userInfo.avatar || user" mode="aspectFill"></image>
</view>
</view>
@ -36,17 +34,20 @@
</template>
<script>
import { BASE_API_URL,BASE_IMG_URL } from "@/config.js";
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
data() {
return {
back:BASE_IMG_URL + "/minePage/back.png", //返回图标
user:BASE_IMG_URL + "/minePage/user.png", //用户默认图标
back: BASE_IMG_URL + "/minePage/back.png", //返回图标
user: BASE_IMG_URL + "/minePage/user.png", //用户默认图标
statusBarHeight: 0,
userInfo: {
nikename: "",
avatar:"",
phone:""
avatar: "",
phone: ""
}
};
},
@ -86,8 +87,9 @@
},
success: (uploadRes) => {
console.log(uploadRes)
this.userInfo.avatar=
"https://online.totustec.com/upload/file/image/" + uploadRes.data;
this.userInfo.avatar =
"https://online.totustec.com/upload/file/image/" + uploadRes
.data;
uni.showToast({
title: "头像上传成功"
});
@ -182,6 +184,7 @@
position: relative;
z-index: 5;
}
.back_icon {
position: absolute;
left: 20rpx;