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-16 10:06:24 +08:00
parent e505a0ab47
commit 5137974b5c
9 changed files with 536 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
App.vue
View File

@ -1,4 +1,8 @@
<script> <script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
onLaunch: function () { onLaunch: function () {
console.log("App Launch"); console.log("App Launch");
@ -17,10 +21,10 @@ export default {
console.log("App Hide"); console.log("App Hide");
}, },
methods: { methods: {
async loginWithPhoneNumber (code) { async loginWithPhoneNumber (code) {
try { try {
const res = await uni.request({ 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", method: "POST",
data: { code }, data: { code },
header: { header: {
@ -31,7 +35,7 @@ export default {
if (res.statusCode == 200) { if (res.statusCode == 200) {
// 存储用户信息到本地缓存（uni-app接口） // 存储用户信息到本地缓存（uni-app接口）
uni.setStorageSync("userInfo", res.data); uni.setStorageSync("userInfo", res.data);
// uni.showToast({ title: "登录成功" }); // uni.showToast({ title: "登录成功" });
} }
} catch (error) { } catch (error) {
// uni.showToast({ title: "登录失败", icon: "none" }); // uni.showToast({ title: "登录失败", icon: "none" });

1
config.js
View File

@ -2,6 +2,7 @@
// 后端接口 // 后端接口
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";

9
pages/device/index.vue
View File

@ -81,6 +81,11 @@
</template> </template>
<script> <script>
import {
BASE_API_URL,
BASE_STOKECT_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
data () { data () {
return { return {
@ -118,7 +123,7 @@ export default {
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue'; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
url: wsUrl, url: wsUrl,
@ -189,7 +194,7 @@ export default {
// 从本地缓存获取用户信息 // 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {}; const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({ 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", method: "GET",
data: this.searchList, data: this.searchList,
header: { header: {

6
pages/deviceBind/index.vue
View File

@ -54,6 +54,10 @@
</template> </template>
<script> <script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
data () { data () {
return { return {
@ -106,7 +110,7 @@ export default {
async bindDevice () { async bindDevice () {
try { try {
const res = await uni.request({ 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", method: "GET",
data: { data: {
deviceCode: this.deviceCode deviceCode: this.deviceCode

291
pages/deviceManage/index.vue
View File

@ -5,8 +5,7 @@
<view class="top_nav_warp"> <view class="top_nav_warp">
<view>设备管理</view> <view>设备管理</view>
<view class="back_button_warp" @click="goBack()"> <view class="back_button_warp" @click="goBack()">
<image class="back_button_icon" <image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> </view>
</view> </view>
</view> </view>
@ -17,32 +16,45 @@
<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' }" <view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')">
@click="getVideoImg('img')">
获取图片 获取图片
</view> </view>
</view> </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> <!-- <video class="img_video_warp" :src="socketData.videoUrl" v-if="socketData.videoUrl"></video>
<image class="img_video_warp" v-else :src="socketData.imageUrl"></image> <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"> <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>
@ -79,32 +91,30 @@
</view> </view>
</template> </template>
<!-- 子状态处理 --> <!-- 子状态处理 -->
<template v-else-if="field.isErrorStatus"> <template v-else-if="field.isErrorStatus">
<view class="label_warp2"> <view class="label_warp2">
<view class="label_icon" :style="{ background: getStatusColor(deviceDetail.errorStatus) }"> <view class="label_icon" :style="{ background: getStatusColor(deviceDetail.printStatus) }">
</view> </view>
<view class="label_text label_text2" :style="{ color: getStatusColor(deviceDetail.errorStatus) }"> <view class="label_text label_text2" :style="{ color: getStatusColor(deviceDetail.printStatus) }">
{{ getStatusText(deviceDetail.errorStatus) }} {{ getStatusText2(deviceDetail.printStatus) }}
</view> </view>
</view> </view>
</template> </template>
<!-- 错误码处理 --> <!-- 错误码处理 -->
<template v-else-if="field.isErrorCode" > <template v-else-if="field.isErrorCode">
{{ deviceDetail.errorStatus === -1 ? '断开' : getStatusText(deviceDetail.errorStatus) }} {{ deviceDetail.errorStatus === -1 ? '断开' : getStatusText(deviceDetail.errorStatus) }}
</template> </template>
<!-- 当前时间特殊处理 --> <!-- 当前时间特殊处理 -->
<template v-else-if="field.isCurrentTime"> <template v-else-if="field.isCurrentTime">
{{ getCurrentTime() }} {{ getCurrentTime() }}
</template> </template>
<template v-else>
{{ deviceDetail[field.key] }}
</template>
</view> </view>
</view> </view>
<view class="itemContent_line_warp"> <view class="itemContent_line_warp">
@ -114,7 +124,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 打印详情 -->
<view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx"> <view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx">
<view class="statusItem_modal_warp"> <view class="statusItem_modal_warp">
<view class="item_content_warp"> <view class="item_content_warp">
@ -131,15 +141,16 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 设备控制 -->
<!-- 设备控制 -->
<view class="device_control_warp" v-if="deviceType == 3"> <view class="device_control_warp" 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>
@ -148,12 +159,11 @@
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{ <view class="device_operation_btn" @click="operationData('PRINT')" :style="{
backgroundColor: backgroundColor:
deviceDetail.status == 0 && deviceDetail.status != -1 deviceDetail.status == 0
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">开始打印</view> <view class="operation_btn_txt">开始打印</view>
</view> </view>
@ -166,8 +176,8 @@
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image> </image>
<view class="operation_btn_txt">继续打印</view> <view class="operation_btn_txt">继续打印</view>
</view> </view>
</view> </view>
@ -175,38 +185,35 @@
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{ <view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor: backgroundColor:
(deviceDetail.status == 1 || deviceDetail.status == 2) && deviceDetail.status != -1 deviceDetail.status == 1 || deviceDetail.status == 2
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" <!-- <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
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> </image>
<view class="operation_btn_txt">暂停打印</view> <view class="operation_btn_txt">暂停打印</view>
</view> </view>
<view class="device_operation_btn" @click="operationData('EXIT')" :style="{ <view class="device_operation_btn" @click="operationData('EXIT')" :style="{
backgroundColor: backgroundColor:
deviceDetail.status != 0 && deviceDetail.status != -1 deviceDetail.status != 0 && deviceDetail.status != -1 ? '#ffffff' : '#cccccc',
? '#ffffff'
: '#cccccc',
}"> }">
<image class="operation_btn_icon" <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png">
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image> </image>
<view class="operation_btn_txt">退出打印</view> <view class="operation_btn_txt">退出打印</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')">
<image class="operation_btn_icon" <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image> </image>
<view class="operation_btn_txt">报警继续</view> <view class="operation_btn_txt">报警继续</view>
</view> </view>
<view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')"> <view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')">
<image class="operation_btn_icon" <image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png">
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image> </image>
<view class="operation_btn_txt">报警退出</view> <view class="operation_btn_txt">报警退出</view>
</view> </view>
@ -218,12 +225,13 @@
</template> </template>
<script> <script>
import { import {
BASE_STOKECT_URL, BASE_IMG_URL BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL
} from "@/config.js"; } from "@/config.js";
export default { export default {
data() { data () {
return { return {
isMediaLoading: false,
deviceName: "", deviceName: "",
title: "Hello", title: "Hello",
statusBarHeight: 0, statusBarHeight: 0,
@ -232,6 +240,61 @@ export default {
deviceCode: "", // 存储接收到的设备编码 deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据 deviceDetail: {}, // 存储设备详情数据
printInfo: {},//存储设备二级详情数据 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: { statusMap: {
0: { 0: {
text: "正常", text: "正常",
@ -284,8 +347,8 @@ export default {
{ {
label: '错误码', label: '错误码',
key: 'errorStatus', key: 'errorStatus',
isErrorCode: true isErrorCode: true,
}, },
{ {
label: '当前时间', label: '当前时间',
@ -331,7 +394,7 @@ export default {
socketData: {}, socketData: {},
}; };
}, },
onLoad(options) { onLoad (options) {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
@ -349,12 +412,12 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onUnload() { onUnload () {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket() { connectWebSocket () {
const wsUrl = BASE_STOKECT_URL; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
@ -372,7 +435,7 @@ export default {
}); });
}, },
listenSocketMessage() { listenSocketMessage () {
// 监听 WebSocket 消息 // 监听 WebSocket 消息
uni.onSocketMessage((event) => { uni.onSocketMessage((event) => {
console.log("event", event); console.log("event", event);
@ -383,7 +446,7 @@ export default {
}); });
}, },
closeWebSocket() { closeWebSocket () {
// 关闭连接并清理资源 // 关闭连接并清理资源
if (this.socketTask) { if (this.socketTask) {
uni.closeSocket(); uni.closeSocket();
@ -393,7 +456,7 @@ export default {
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
}, },
tryReconnect() { tryReconnect () {
// 自动重连机制 // 自动重连机制
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => { this.reconnectTimer = setTimeout(() => {
@ -402,7 +465,7 @@ export default {
}, this.reconnectInterval); }, this.reconnectInterval);
}, },
updateDeviceStatus(message) { updateDeviceStatus (message) {
console.log("实时消息", message); console.log("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行 // CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") { if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
@ -417,10 +480,11 @@ export default {
} }
// INFO 返回视频/图片地址 // INFO 返回视频/图片地址
if (message.msgType == "INFO") { if (message.msgType == "INFO") {
this.isMediaLoading = true;
this.socketData = message.data; this.socketData = message.data;
if (this.socketData.imageUrl) { if (this.socketData.imageUrl) {
this.socketData.imageUrl = this.socketData.imageUrl =
BASE_IMG_URL + message.data.imageUrl; BASE_IMG_URL + message.data.imageUrl;
} }
} }
// WRITEIMG 接收图片数据中 // WRITEIMG 接收图片数据中
@ -437,7 +501,7 @@ export default {
* 发送 WebSocket 指令 * 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等） * @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/ */
sendWsCommand(command) { sendWsCommand (command) {
if (!this.isSocketConnected) { if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令"); console.warn("WebSocket 未连接，无法发送指令");
return; return;
@ -459,18 +523,18 @@ 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) {
if (type == "PRINT") { if (type == "PRINT") {
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) { if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
this.sendWsCommand(type); this.sendWsCommand(type);
@ -478,16 +542,16 @@ export default {
} }
if (type == "CONTINUE") { if (type == "CONTINUE") {
if ( if (
this.deviceDetail.status != 1 && this.deviceDetail.status != 1 &&
this.deviceDetail.printStatus != 6 && this.deviceDetail.printStatus != 6 &&
this.deviceDetail.status != -1 this.deviceDetail.status != -1
) { ) {
this.sendWsCommand(type); this.sendWsCommand(type);
} }
} }
if (type == 'PAUSE') { if (type == 'PAUSE') {
if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2) && this.deviceDetail.status != - if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2) && this.deviceDetail.status != -
1) { 1) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要暂停打印吗？', content: '确定要暂停打印吗？',
@ -517,7 +581,8 @@ export default {
} }
} }
}, },
getVideoImg(type) { getVideoImg (type) {
this.isMediaLoading = true;
if (type == "img") { if (type == "img") {
this.getType = "img"; this.getType = "img";
this.sendWsCommand("IMAGE"); this.sendWsCommand("IMAGE");
@ -527,20 +592,26 @@ export default {
} }
}, },
// 获取状态文字 // 获取状态文字
getStatusText(status) { getStatusText (status) {
if (status == -1) { if (status == -1) {
return "断开"; return "断开";
} }
return this.statusMap[status]?.text || ""; return this.statusMap[status]?.text || "";
}, },
getStatusText2 (status) {
if (status == -1) {
return "断开";
}
return this.childStatusMap[status]?.text || "";
},
// 获取状态颜色 // 获取状态颜色
getStatusColor(status) { getStatusColor (status) {
if (status == -1) { if (status == -1) {
return "#999999"; return "#999999";
} }
return this.statusMap[status]?.color; // 默认灰色 return this.childStatusMap[status]?.color; // 默认灰色
}, },
getCurrentTime() { getCurrentTime () {
const date = new Date(); const date = new Date();
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); const month = String(date.getMonth() + 1).padStart(2, "0");
@ -550,13 +621,13 @@ export default {
return `${year}年${month}月${day}日${hours}时${minutes}分`; return `${year}年${month}月${day}日${hours}时${minutes}分`;
}, },
goBack() { goBack () {
uni.navigateBack(); uni.navigateBack();
}, },
async getDeviceDetail() { async getDeviceDetail () {
try { try {
const res = await uni.request({ 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", method: "GET",
data: { data: {
deviceCode: this.deviceCode, deviceCode: this.deviceCode,
@ -571,7 +642,24 @@ export default {
this.deviceDetail = res.data; this.deviceDetail = res.data;
this.printInfo = res.data.printInfo; this.printInfo = res.data.printInfo;
console.log("设备详情:", this.deviceDetail); 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) { } catch (error) {
console.error("获取设备详情失败:", error); console.error("获取设备详情失败:", error);
@ -581,7 +669,7 @@ export default {
}); });
} }
}, },
onDeviceNameInput(e) { onDeviceNameInput (e) {
this.deviceName = e.detail.value; this.deviceName = e.detail.value;
// console.log('输入内容：', e.detail.value); // console.log('输入内容：', e.detail.value);
}, },
@ -590,6 +678,51 @@ export default {
</script> </script>
<!-- 临时样式 --> <!-- 临时样式 -->
<style scoped> <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 { .operation_btn_icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;

22
pages/index/index.vue
View File

@ -279,6 +279,10 @@
</template> </template>
<script> <script>
import {
BASE_STOKECT_URL, BASE_IMG_URL, BASE_API_URL
} from "@/config.js";
export default { export default {
data () { data () {
return { return {
@ -307,13 +311,13 @@ export default {
reconnectInterval: 5000 // 重连间隔（5秒） reconnectInterval: 5000 // 重连间隔（5秒）
}; };
}, },
onShareAppMessage() { onShareAppMessage () {
return { return {
title: '欢迎是有Totustec', title: '欢迎是有Totustec',
path: '/pages/index/index', path: '/pages/index/index',
imageUrl: 'https://online.totustec.com/upload/indexPage/logo.png' imageUrl: 'https://online.totustec.com/upload/indexPage/logo.png'
} }
}, },
onLoad () { onLoad () {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
@ -334,7 +338,7 @@ export default {
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue'; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
@ -413,7 +417,7 @@ export default {
// 从本地缓存获取用户信息 // 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {}; const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({ 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", method: "GET",
data: this.searchList, data: this.searchList,
header: { header: {

64
pages/mine/index.vue
View File

@ -5,26 +5,22 @@
<view class="top_nav_warp">我的</view> <view class="top_nav_warp">我的</view>
<view class="mine_area_warp"> <view class="mine_area_warp">
<view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')"> <view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')">
<view class="mine_area_left" > <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_avater"></view> -->
<view class="mine_info_warp"> <view class="mine_info_warp">
<view class="mine_info_txt1" v-if="userInfo.nikeName">{{ <view class="mine_info_txt1" v-if="userInfo.token">{{userInfo.nikeName || '暂无昵称' }}</view>
userInfo.nikeName
}}</view>
<view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view> <view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view>
<view class="mine_info_txt2" >账户设置</view> <view class="mine_info_txt2">账户设置</view>
</view> </view>
</view> </view>
<image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image> <image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> </view>
</view> </view>
<view class="top_area_backimg"> <view class="top_area_backimg">
<image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image> <image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image>
</view> </view>
</view> </view>
<view class="function_area1_warp"> <view class="function_area1_warp">
<view style="padding: 0 20rpx"> <view style="padding: 0 20rpx">
<view class="function_area1_content"> <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> <image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> --> </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"> <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 class="area2_item_txt">分享小程序</view>
</view> </view>
<button open-type="share" class="area2_item_right_btn"> <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> </button>
</view> </view> -->
</view> </view>
</view> </view>
@ -68,6 +66,10 @@
</template> </template>
<script> <script>
import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
data () { data () {
return { return {
@ -87,27 +89,34 @@ export default {
// text: "我的收藏", // text: "我的收藏",
// }, // },
], ],
userInfo: { userInfo: {},
}, avatarUrl: BASE_IMG_URL + "/file/image/",
user: BASE_IMG_URL + "/minePage/user.png", //用户默认图标
}; };
},
computed: {
}, },
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.getUserInfoFromCache(); this.getUserInfoFromCache();
}, },
methods: { methods: {
avatarFun() {
if (this.userInfo.avatar) {
return this.avatarUrl + this.userInfo.avatar;
}
else {
return this.user
}
},
getUserInfoFromCache () { getUserInfoFromCache () {
const userInfo = uni.getStorageSync("userInfo"); const userInfo = uni.getStorageSync("userInfo");
console.log('userInfo',userInfo);
if (userInfo) { if (userInfo) {
this.userInfo = userInfo; this.userInfo = userInfo;
} }
@ -119,12 +128,11 @@ export default {
}); });
} }
}, },
navigateToAccountSettings (path) {
navigateToAccountSettings(path) { uni.navigateTo({
uni.navigateTo({ url: path,
url: path, });
}); },
},
getLoginCode () { getLoginCode () {
uni.login({ uni.login({
success: (res) => { success: (res) => {
@ -137,7 +145,7 @@ export default {
async loginWithPhoneNumber (code) { async loginWithPhoneNumber (code) {
try { try {
const res = await uni.request({ 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", method: "POST",
data: { code }, data: { code },
header: { header: {
@ -146,7 +154,7 @@ export default {
}); });
if (res.statusCode == 200) { if (res.statusCode == 200) {
this.userInfo = res.data; this.userInfo = res.data;
console.log('this.userInfo', this.userInfo); // console.log('this.userInfo', this.userInfo);
// 存储用户信息到本地缓存（uni-app接口） // 存储用户信息到本地缓存（uni-app接口）
uni.setStorageSync("userInfo", this.userInfo); uni.setStorageSync("userInfo", this.userInfo);
uni.showToast({ title: "登录成功" }); uni.showToast({ title: "登录成功" });
@ -155,7 +163,7 @@ export default {
uni.showToast({ title: "登录失败", icon: "none" }); uni.showToast({ title: "登录失败", icon: "none" });
} }
}, },
onShareAppMessage() { onShareAppMessage () {
return { return {
title: '欢迎体验Totustec', title: '欢迎体验Totustec',
path: '/pages/index/index', path: '/pages/index/index',

484
pages/mine/update.vue
View File

@ -1,266 +1,266 @@
<template> <template>
<view class="contai_warp"> <view class="contai_warp">
<!-- Top Navigation Bar --> <!-- Top Navigation Bar -->
<view class="top_area_warp"> <view class="top_area_warp">
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view> <view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="top_nav_warp"> <view class="top_nav_warp">
<view class="back_icon" @click="goBack"> <view class="back_icon" @click="goBack">
<image :src="back" mode="aspectFit"></image> <image :src="back" mode="aspectFit"></image>
</view> </view>
<text>个人资料</text> <text>个人资料</text>
</view> </view>
</view> </view>
<!-- Profile Content --> <!-- Profile Content -->
<view class="profile_content"> <view class="profile_content">
<!-- Avatar Section --> <!-- Avatar Section -->
<view class="profile_item"> <view class="profile_item">
<text class="item_label">头像</text> <text class="item_label">头像</text>
<view class="avatar_wrapper" @click="changeAvatar"> <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>
</view> </view>
<!-- Nickname Section --> <!-- Nickname Section -->
<view class="profile_item"> <view class="profile_item">
<text class="item_label">昵称</text> <text class="item_label">昵称</text>
<input class="nickname_input" v-model="userInfo.nikename" placeholder="请输入昵称" /> <input class="nickname_input" v-model="userInfo.nikename" placeholder="请输入昵称"/>
</view> </view>
<!-- Save Button --> <!-- Save Button -->
<button class="save_btn" @click="saveProfile">保存修改</button> <button class="save_btn" @click="saveProfile">保存修改</button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { import {
BASE_API_URL, BASE_API_URL,
BASE_IMG_URL BASE_IMG_URL
} from "@/config.js"; } from "@/config.js";
export default {
data() { export default {
return { data() {
back: BASE_IMG_URL + "/minePage/back.png", //返回图标 return {
user: BASE_IMG_URL + "/minePage/user.png", //用户默认图标 back: BASE_IMG_URL + "/minePage/back.png", //返回图标
statusBarHeight: 0, user: BASE_IMG_URL + "/minePage/user.png", //用户默认图标
userInfo: { avatarUrl: BASE_IMG_URL + "/file/image/",
nikename: "", statusBarHeight: 0,
avatar: "", userInfo: {
phone: "" nikename: "",
} avatar: "",
}; phone: ""
}, }
onLoad() { };
// Get system info for status bar height },
const systemInfo = wx.getSystemInfoSync(); onLoad() {
this.statusBarHeight = systemInfo.statusBarHeight; // Get system info for status bar height
this.getUserInfoFromCache(); const systemInfo = wx.getSystemInfoSync();
}, this.statusBarHeight = systemInfo.statusBarHeight;
methods: { this.getUserInfoFromCache();
navigateToAccountSettings(path) { },
uni.navigateTo({ methods: {
url: path, avatarFun() {
}); if (this.userInfo.avatar) {
}, return this.avatarUrl + this.userInfo.avatar;
getUserInfoFromCache() { } else {
const userInfo = uni.getStorageSync("userInfo"); return this.user
if (userInfo) { }
this.userInfo.nikename = userInfo.nikeName; },
this.userInfo.avatar = BASE_IMG_URL + userInfo.avatar; getUserInfoFromCache() {
} const userInfo = uni.getStorageSync("userInfo");
}, if (userInfo) {
changeAvatar() { this.userInfo.nikename = userInfo.nikeName;
uni.chooseImage({ this.userInfo.avatar = userInfo.avatar;
count: 1, }
sizeType: ['compressed'], },
sourceType: ['album', 'camera'], changeAvatar() {
success: (res) => { uni.chooseImage({
const tempFilePath = res.tempFilePaths[0]; count: 1,
const userInfo = uni.getStorageSync("userInfo") || {}; sizeType: ['compressed'],
uni.uploadFile({ sourceType: ['album', 'camera'],
url: "https://online.totustec.com/api/api/front/user/pictures", success: (res) => {
filePath: tempFilePath, const tempFilePath = res.tempFilePaths[0];
name: "file", const userInfo = uni.getStorageSync("userInfo") || {};
header: { uni.uploadFile({
"Authorization": userInfo.token || "" url: BASE_API_URL + "/api/front/user/pictures",
}, filePath: tempFilePath,
success: (uploadRes) => { name: "file",
console.log(uploadRes) header: {"Authorization": userInfo.token || ""},
this.userInfo.avatar = success: (uploadRes) => {
"https://online.totustec.com/upload/file/image/" + uploadRes console.log(uploadRes)
.data; this.userInfo.avatar = uploadRes.data;
uni.showToast({ uni.showToast({
title: "头像上传成功" title: "头像上传成功"
}); });
console.log(this.userInfo.avatar) console.log(this.userInfo.avatar)
}, },
fail: () => { fail: () => {
uni.showToast({ uni.showToast({
title: "头像上传失败", title: "头像上传失败",
icon: "none" icon: "none"
}); });
} }
}); });
} }
}); });
}, },
async saveProfile() { async saveProfile() {
if (!this.userInfo.nikename.trim()) { if (!this.userInfo.nikename.trim()) {
uni.showToast({ uni.showToast({
title: '昵称不能为空', title: '昵称不能为空',
icon: 'none' icon: 'none'
}); });
return; return;
} }
try { try {
const userInfo = uni.getStorageSync("userInfo") || {}; const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({ const res = await uni.request({
url: BASE_API_URL + "/api/front/user/update", url: BASE_API_URL + "/api/front/user/update",
method: "POST", method: "POST",
data: this.userInfo, data: this.userInfo,
header: { header: {
"Content-Type": "application/x-www-form-urlencoded", "Content-Type": "application/x-www-form-urlencoded",
"Authorization": userInfo.token || "" "Authorization": userInfo.token || ""
}, },
}); });
if (res.statusCode == 200) { if (res.statusCode == 200) {
uni.showToast({ uni.showToast({
title: "修改成功" title: "修改成功"
}); });
setTimeout(() => { setTimeout(() => {
uni.reLaunch({ uni.reLaunch({
url: "/pages/mine/index", url: "/pages/mine/index",
}); });
}, 1000); }, 1000);
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error)
uni.showToast({ uni.showToast({
title: "修改失败", title: "修改失败",
icon: "none" icon: "none"
}); });
} }
}, },
goBack() { goBack() {
uni.navigateBack(); uni.navigateBack();
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.contai_warp { .contai_warp {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family: PingFang SC, PingFang SC !important; font-family: PingFang SC, PingFang SC !important;
min-height: 100vh; min-height: 100vh;
background-color: #f1f6fc; background-color: #f1f6fc;
} }
/* Top Navigation Styles */ /* Top Navigation Styles */
.top_area_warp { .top_area_warp {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
} }
.top_status_area { .top_status_area {
width: 100%; width: 100%;
} }
.top_nav_warp { .top_nav_warp {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #000000;
position: relative; position: relative;
z-index: 5; z-index: 5;
} }
.back_icon { .back_icon {
position: absolute; position: absolute;
left: 20rpx; left: 20rpx;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.back_icon image { .back_icon image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* Profile Content Styles */ /* Profile Content Styles */
.profile_content { .profile_content {
width: 90%; width: 90%;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
margin-top: 20rpx; margin-top: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} }
.profile_item { .profile_item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx 0; padding: 30rpx 0;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;
} }
.item_label { .item_label {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
} }
.avatar_wrapper { .avatar_wrapper {
position: relative; position: relative;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
} }
.avatar { .avatar {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
} }
.edit_icon { .edit_icon {
position: absolute; position: absolute;
right: -10rpx; right: -10rpx;
bottom: -10rpx; bottom: -10rpx;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
background: #fff; background: #fff;
border-radius: 50%; border-radius: 50%;
padding: 5rpx; padding: 5rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
} }
.nickname_input { .nickname_input {
text-align: right; text-align: right;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
flex: 1; flex: 1;
margin-left: 20rpx; margin-left: 20rpx;
} }
.save_btn { .save_btn {
margin-top: 60rpx; margin-top: 60rpx;
background-color: #0095de; background-color: #0095de;
color: white; color: white;
border-radius: 50rpx; border-radius: 50rpx;
font-size: 32rpx; font-size: 32rpx;
} }
.save_btn:active { .save_btn:active {
background-color: #ffffff; background-color: #ffffff;
} }
</style> </style>

25
pages/selectDevice/index.vue
View File

@ -24,7 +24,7 @@
</div> </div>
<!-- 设备项右侧操作 --> <!-- 设备项右侧操作 -->
<div class="data_item_right" @click="handleView(item.deviceCode,item.status)">查看</div> <div class="data_item_right" @click="handleView(item.deviceCode, item.status)">查看</div>
<!-- 设备使用状态图标（根据状态显示） --> <!-- 设备使用状态图标（根据状态显示） -->
<image v-if="item.isInUse" class="in_use_warp" <image v-if="item.isInUse" class="in_use_warp"
@ -37,6 +37,11 @@
</template> </template>
<script> <script>
import {
BASE_API_URL,
BASE_STOKECT_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
data () { data () {
return { return {
@ -76,7 +81,7 @@ export default {
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket () {
const wsUrl = 'ws://online.totustec.com/webSocket/vue'; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
@ -128,19 +133,15 @@ export default {
console.log('实时消息'); console.log('实时消息');
}, },
goBack () { goBack () {
uni.navigateBack(); uni.navigateBack();
}, },
handleView (deviceCode,status) { handleView (deviceCode, status) {
if(status == -1){ if (status == -1) {
uni.showToast({ uni.showToast({
title: '设备处于断开状态，暂不支持查看', title: '设备处于断开状态，暂不支持查看',
icon: 'none' icon: 'none'
}); });
return return
} }
console.log("data", deviceCode); console.log("data", deviceCode);
@ -153,7 +154,7 @@ export default {
// 从本地缓存获取用户信息 // 从本地缓存获取用户信息
const userInfo = uni.getStorageSync("userInfo") || {}; const userInfo = uni.getStorageSync("userInfo") || {};
const res = await uni.request({ 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", method: "GET",
data: this.searchList, data: this.searchList,
header: { header: {