添加详情信息

This commit is contained in:
18796357645 2025-07-16 10:06:24 +08:00
parent e505a0ab47
commit 5137974b5c
9 changed files with 536 additions and 376 deletions

View File

@ -1,4 +1,8 @@
<script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
onLaunch: function () {
console.log("App Launch");
@ -20,7 +24,7 @@ export default {
async loginWithPhoneNumber (code) {
try {
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
url: BASE_API_URL + "/api/front/wechat/authorize/login",
method: "POST",
data: { code },
header: {

View File

@ -2,6 +2,7 @@
// 后端接口
export const BASE_API_URL = "https://online.totustec.com/api";
// 静态数据
export const BASE_IMG_URL = "https://online.totustec.com/upload";

View File

@ -81,6 +81,11 @@
</template>
<script>
import {
BASE_API_URL,
BASE_STOKECT_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
data () {
return {
@ -118,7 +123,7 @@ export default {
methods: {
// ---------------------- WebSocket ----------------------
connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue';
const wsUrl = BASE_STOKECT_URL;
// WebSocket 使 uni-app
this.socketTask = uni.connectSocket({
url: wsUrl,
@ -189,7 +194,7 @@ export default {
//
const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/user/myDevice",
url: BASE_API_URL + "/api/front/user/myDevice",
method: "GET",
data: this.searchList,
header: {

View File

@ -54,6 +54,10 @@
</template>
<script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
data () {
return {
@ -106,7 +110,7 @@ export default {
async bindDevice () {
try {
const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/bindingDevice`,
url: BASE_API_URL + '/api/front/device/bindingDevice',
method: "GET",
data: {
deviceCode: this.deviceCode

View File

@ -5,8 +5,7 @@
<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>
@ -20,17 +19,30 @@
@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>
<!-- 临时调试 -->
<!-- <video class="img_video_warp" src="http://broadcasting.totustec.com/live/12345678.m3u8" v-if="socketData.videoUrl"></video> -->
<video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl"></image>
<!-- <video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl"></image> -->
<!-- 视频图片区域含加载动画 -->
<view class="media_container">
<!-- 加载动画转圈效果 -->
<view class="loading_spinner" v-if="isMediaLoading">
<view class="spinner"></view>
</view>
<!-- 媒体内容 -->
<video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"
@loadedmetadata="isMediaLoading = false" @error="isMediaLoading = false"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl" @load="isMediaLoading = false"
@error="isMediaLoading = false"></image>
</view>
<!-- 设备状态选择 -->
<view class="select_device_warp">
@ -79,32 +91,30 @@
</view>
</template>
<!-- 子状态处理 -->
<template v-else-if="field.isErrorStatus">
<view class="label_warp2">
<view class="label_icon" :style="{ background: getStatusColor(deviceDetail.errorStatus) }">
<view class="label_icon" :style="{ background: getStatusColor(deviceDetail.printStatus) }">
</view>
<view class="label_text label_text2" :style="{ color: getStatusColor(deviceDetail.errorStatus) }">
{{ getStatusText(deviceDetail.errorStatus) }}
<view class="label_text label_text2" :style="{ color: getStatusColor(deviceDetail.printStatus) }">
{{ getStatusText2(deviceDetail.printStatus) }}
</view>
</view>
</template>
<!-- 错误码处理 -->
<template v-else-if="field.isErrorCode">
{{ deviceDetail.errorStatus === -1 ? '断开' : getStatusText(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">
@ -114,7 +124,7 @@
</view>
</view>
</view>
<!-- 打印详情 -->
<view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
@ -131,6 +141,7 @@
</view>
</view>
</view>
<!-- 设备控制 -->
<view class="device_control_warp" v-if="deviceType == 3">
<view class="deviceN_input_warp">
@ -148,12 +159,11 @@
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{
backgroundColor:
deviceDetail.status == 0 && deviceDetail.status != -1
deviceDetail.status == 0
? '#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>
@ -166,8 +176,8 @@
? '#ffffff'
: '#cccccc',
}">
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt">继续打印</view>
</view>
</view>
@ -175,38 +185,35 @@
<view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor:
(deviceDetail.status == 1 || deviceDetail.status == 2) && deviceDetail.status != -1
deviceDetail.status == 1 || deviceDetail.status == 2
? '#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> -->
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image>
<view class="operation_btn_txt">暂停打印</view>
</view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{
backgroundColor:
deviceDetail.status != 0 && deviceDetail.status != -1
? '#ffffff'
: '#cccccc',
deviceDetail.status != 0 && deviceDetail.status != -1 ? '#ffffff' : '#cccccc',
}">
<image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/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>
@ -218,12 +225,13 @@
</template>
<script>
import {
BASE_STOKECT_URL, BASE_IMG_URL
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL
} from "@/config.js";
export default {
data () {
return {
isMediaLoading: false,
deviceName: "",
title: "Hello",
statusBarHeight: 0,
@ -232,6 +240,61 @@ export default {
deviceCode: "", //
deviceDetail: {}, //
printInfo: {},//
//
childStatusMap: {
0: {
text: "空闲",
color: "#00d195"
},
1: {
text: "归零中",
color: "#00d195"
},
2: {
text: "下降中",
color: "#00d195"
},
3: {
text: "曝光中",
color: "#00d195"
},
4: {
text: "抬升中",
color: "#00d195"
},
5: {
text: "正在执行暂停动作中",
color: "#00d195"
},
6: {
text: "已暂停",
color: "#00d195"
},
7: {
text: "正在执行停止动作中",
color: "#00d195"
},
8: {
text: "已停止",
color: "#00d195"
},
9: {
text: "打印完成",
color: "#00d195"
},
10: {
text: "文件检测中",
color: "#00d195"
},
11: {
text: "加液中",
color: "#00d195"
},
12: {
text: "铲件中",
color: "#00d195"
},
},
statusMap: {
0: {
text: "正常",
@ -284,7 +347,7 @@ export default {
{
label: '错误码',
key: 'errorStatus',
isErrorCode: true
isErrorCode: true,
},
{
@ -417,6 +480,7 @@ export default {
}
// INFO /
if (message.msgType == "INFO") {
this.isMediaLoading = true;
this.socketData = message.data;
if (this.socketData.imageUrl) {
this.socketData.imageUrl =
@ -518,6 +582,7 @@ export default {
}
},
getVideoImg (type) {
this.isMediaLoading = true;
if (type == "img") {
this.getType = "img";
this.sendWsCommand("IMAGE");
@ -533,12 +598,18 @@ export default {
}
return this.statusMap[status]?.text || "";
},
getStatusText2 (status) {
if (status == -1) {
return "断开";
}
return this.childStatusMap[status]?.text || "";
},
//
getStatusColor (status) {
if (status == -1) {
return "#999999";
}
return this.statusMap[status]?.color; //
return this.childStatusMap[status]?.color; //
},
getCurrentTime () {
const date = new Date();
@ -556,7 +627,7 @@ export default {
async getDeviceDetail () {
try {
const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/get`,
url: BASE_API_URL + '/api/front/device/get',
method: "GET",
data: {
deviceCode: this.deviceCode,
@ -571,7 +642,24 @@ export default {
this.deviceDetail = res.data;
this.printInfo = res.data.printInfo;
console.log("设备详情:", this.deviceDetail);
//
//
if (res.data.status == -1) {
uni.showToast({
title: '设备处于断开状态,暂不支持查看',
icon: 'none',
duration: 2000, //
complete: () => {
//
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index'
});
}, 1500); //
}
});
return;
}
}
} catch (error) {
console.error("获取设备详情失败:", error);
@ -590,6 +678,51 @@ export default {
</script>
<!-- 临时样式 -->
<style scoped>
/* 媒体容器(相对定位,用于加载动画绝对定位) */
.media_container {
position: relative;
width: 100%;
margin: 22rpx 0 32rpx 0;
}
/* 加载动画容器 */
.loading_spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
/* 与媒体区域背景一致 */
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
/* 确保在媒体上层显示 */
}
/* 转圈动画元素 */
.spinner {
width: 60rpx;
height: 60rpx;
border: 6rpx solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 旋转动画定义 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.operation_btn_icon {
width: 40rpx;
height: 40rpx;

View File

@ -279,6 +279,10 @@
</template>
<script>
import {
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL
} from "@/config.js";
export default {
data () {
return {
@ -334,7 +338,7 @@ export default {
methods: {
// ---------------------- WebSocket ----------------------
connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue';
const wsUrl = BASE_STOKECT_URL;
// WebSocket 使 uni-app
this.socketTask = uni.connectSocket({
@ -413,7 +417,7 @@ export default {
//
const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/user/myDevice",
url: BASE_API_URL + "/api/front/user/myDevice",
method: "GET",
data: this.searchList,
header: {

View File

@ -6,12 +6,10 @@
<view class="mine_area_warp">
<view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')">
<view class="mine_area_left">
<image class="mine_avater" :src="'https://online.totustec.com/upload' + userInfo.avatar"></image>
<image class="mine_avater" :src="avatarFun()"></image>
<!-- <view class="mine_avater"></view> -->
<view class="mine_info_warp">
<view class="mine_info_txt1" v-if="userInfo.nikeName">{{
userInfo.nikeName
}}</view>
<view class="mine_info_txt1" v-if="userInfo.token">{{userInfo.nikeName || '暂无昵称' }}</view>
<view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view>
<view class="mine_info_txt2">账户设置</view>
</view>
@ -19,12 +17,10 @@
<image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view>
</view>
<view class="top_area_backimg">
<image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image>
</view>
</view>
<view class="function_area1_warp">
<view style="padding: 0 20rpx">
<view class="function_area1_content">
@ -51,15 +47,17 @@
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> -->
<view class="function_area2_item" style="border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx;">
<!-- <view class="function_area2_item" style="border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx;">
<view class="area2_item_left">
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png"></image>
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
</image>
<view class="area2_item_txt">分享小程序</view>
</view>
<button open-type="share" class="area2_item_right_btn">
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png">
</image>
</button>
</view>
</view> -->
</view>
</view>
@ -68,6 +66,10 @@
</template>
<script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
data () {
return {
@ -87,27 +89,34 @@ export default {
// text: "",
// },
],
userInfo: {
},
userInfo: {},
avatarUrl: BASE_IMG_URL + "/file/image/",
user: BASE_IMG_URL + "/minePage/user.png", //
};
},
computed: {
},
onLoad () {
const systemInfo = wx.getSystemInfoSync();
const {
statusBarHeight, // px
} = systemInfo;
this.statusBarHeight = statusBarHeight;
//
this.getUserInfoFromCache();
},
methods: {
avatarFun() {
if (this.userInfo.avatar) {
return this.avatarUrl + this.userInfo.avatar;
}
else {
return this.user
}
},
getUserInfoFromCache () {
const userInfo = uni.getStorageSync("userInfo");
console.log('userInfo',userInfo);
if (userInfo) {
this.userInfo = userInfo;
}
@ -119,7 +128,6 @@ export default {
});
}
},
navigateToAccountSettings (path) {
uni.navigateTo({
url: path,
@ -137,7 +145,7 @@ export default {
async loginWithPhoneNumber (code) {
try {
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
url: BASE_API_URL + "/api/front/wechat/authorize/login",
method: "POST",
data: { code },
header: {
@ -146,7 +154,7 @@ export default {
});
if (res.statusCode == 200) {
this.userInfo = res.data;
console.log('this.userInfo', this.userInfo);
// console.log('this.userInfo', this.userInfo);
// uni-app
uni.setStorageSync("userInfo", this.userInfo);
uni.showToast({ title: "登录成功" });

View File

@ -17,7 +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="avatarFun()" mode="aspectFill"></image>
</view>
</view>
@ -38,11 +38,13 @@
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", //
avatarUrl: BASE_IMG_URL + "/file/image/",
statusBarHeight: 0,
userInfo: {
nikename: "",
@ -58,16 +60,18 @@
this.getUserInfoFromCache();
},
methods: {
navigateToAccountSettings(path) {
uni.navigateTo({
url: path,
});
avatarFun() {
if (this.userInfo.avatar) {
return this.avatarUrl + this.userInfo.avatar;
} else {
return this.user
}
},
getUserInfoFromCache() {
const userInfo = uni.getStorageSync("userInfo");
if (userInfo) {
this.userInfo.nikename = userInfo.nikeName;
this.userInfo.avatar = BASE_IMG_URL + userInfo.avatar;
this.userInfo.avatar = userInfo.avatar;
}
},
changeAvatar() {
@ -79,17 +83,13 @@
const tempFilePath = res.tempFilePaths[0];
const userInfo = uni.getStorageSync("userInfo") || {};
uni.uploadFile({
url: "https://online.totustec.com/api/api/front/user/pictures",
url: BASE_API_URL + "/api/front/user/pictures",
filePath: tempFilePath,
name: "file",
header: {
"Authorization": userInfo.token || ""
},
header: {"Authorization": userInfo.token || ""},
success: (uploadRes) => {
console.log(uploadRes)
this.userInfo.avatar =
"https://online.totustec.com/upload/file/image/" + uploadRes
.data;
this.userInfo.avatar = uploadRes.data;
uni.showToast({
title: "头像上传成功"
});

View File

@ -37,6 +37,11 @@
</template>
<script>
import {
BASE_API_URL,
BASE_STOKECT_URL,
BASE_IMG_URL
} from "@/config.js";
export default {
data () {
return {
@ -76,7 +81,7 @@ export default {
methods: {
// ---------------------- WebSocket ----------------------
connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue';
const wsUrl = BASE_STOKECT_URL;
// WebSocket 使 uni-app
this.socketTask = uni.connectSocket({
@ -128,10 +133,6 @@ export default {
console.log('实时消息');
},
goBack () {
uni.navigateBack();
},
@ -153,7 +154,7 @@ export default {
//
const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({
url: "https://online.totustec.com/api/api/front/user/myDevice",
url: BASE_API_URL + "/api/front/user/myDevice",
method: "GET",
data: this.searchList,
header: {