add
This commit is contained in:
18796357645
parent
4deb66a50c
commit
e1c87cc001
3
.gitignore
vendored
3
.gitignore
vendored
@ -9,3 +9,6 @@ docs/_book
|
||||
# TODO: where does this rule come from?
|
||||
test/
|
||||
|
||||
.idea
|
||||
.hbuilderx
|
||||
unpackage
|
||||
|
||||
46
App.vue
Normal file
46
App.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log("App Launch");
|
||||
uni.login({
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
this.loginWithPhoneNumber(res.code);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
},
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
},
|
||||
methods: {
|
||||
async loginWithPhoneNumber (code) {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
|
||||
method: "POST",
|
||||
data: { code },
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
// 存储用户信息到本地缓存（uni-app接口）
|
||||
uni.setStorageSync("userInfo", res.data);
|
||||
// uni.showToast({ title: "登录成功" });
|
||||
}
|
||||
} catch (error) {
|
||||
// uni.showToast({ title: "登录失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
</style>
|
||||
20
index.html
Normal file
20
index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
main.js
Normal file
22
main.js
Normal file
@ -0,0 +1,22 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
75
manifest.json
Normal file
75
manifest.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"name" : "Project",
|
||||
"appid" : "__UNI__6C05555",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx583d0c321ef43dfe",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"postcss" : true,
|
||||
"es6" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
87
pages.json
Normal file
87
pages.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationStyle": "custom" // 首页使用自定义导航栏（需手动绘制）
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/update",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人资料",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/deviceBind/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备绑定",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/selectDevice/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择设备",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/device/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/deviceManage/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备管理",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#8A8A8A",
|
||||
"selectedColor": "#007AFF",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "black",
|
||||
"list": [{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "static/tabbar/index.png",
|
||||
"selectedIconPath": "static/tabbar/index_select.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/device/index",
|
||||
"text": "设备",
|
||||
"iconPath": "static/tabbar/device.png",
|
||||
"selectedIconPath": "static/tabbar/device_select.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"text": "我的",
|
||||
"iconPath": "static/tabbar/mine.png",
|
||||
"selectedIconPath": "static/tabbar/mine_select.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
450
pages/device/index.vue
Normal file
450
pages/device/index.vue
Normal file
@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="top_nav_warp">设备</view>
|
||||
</view>
|
||||
|
||||
<view class="middle_area_warp">
|
||||
<!-- 设备状态 -->
|
||||
<view class="device_area_warp">
|
||||
<view class="device_top">
|
||||
<view class="device_top_left">
|
||||
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img1.png"></image>
|
||||
<view class="top_left_text">设备状态</view>
|
||||
</view>
|
||||
|
||||
<view class="device_top_right" @click="toPage('绑定设备')">
|
||||
<image class="top_right_icon" src="https://online.totustec.com/upload/indexPage/top_right_icon.png"></image>
|
||||
<view class="top_right_text">绑定设备</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device_table_warp">
|
||||
<view class="device_table_area">
|
||||
<view class="device_table_top">
|
||||
<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: 200rpx">设备运行状态</view>
|
||||
</view>
|
||||
<view class="table_data_warp" v-if="deviceList.length > 0">
|
||||
<view class="table_data_item" v-for="(item, index) in deviceList">
|
||||
<view class="data_display_warp">
|
||||
<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: 200rpx">
|
||||
<view class="label_warp" v-if="item.status == 0">
|
||||
<view class="label_icon"></view>
|
||||
<view class="label_text">空闲</view>
|
||||
</view>
|
||||
<view class="label_warp" v-if="item.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="item.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="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 class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂无数据 -->
|
||||
<view class="table_nodata_area" v-else>
|
||||
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
|
||||
</image>
|
||||
<view class="table_nodata_text">暂无设备，请绑定设备～</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 100rpx"></view>
|
||||
</view>
|
||||
|
||||
<image class="equipment_control_warp" src="https://online.totustec.com/upload/devicePage/equipment_control_warp.png"
|
||||
@click="toPage('设备控制')">
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
searchList: {
|
||||
page: 1,
|
||||
size: 10000,
|
||||
},
|
||||
deviceList: [],
|
||||
|
||||
// WebSocket 相关状态
|
||||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||||
isSocketConnected: false, // 连接状态
|
||||
reconnectTimer: null, // 重连定时器
|
||||
reconnectInterval: 5000 // 重连间隔（5秒）
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
|
||||
this.connectWebSocket(); // 初始化 WebSocket 连接
|
||||
},
|
||||
onUnload () {
|
||||
this.closeWebSocket(); // 页面卸载时关闭连接
|
||||
},
|
||||
onShow () {
|
||||
this.getDeviceList(); // 每次显示页面时调用
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- WebSocket 核心方法 ----------------------
|
||||
connectWebSocket () {
|
||||
const wsUrl = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
|
||||
|
||||
// 初始化 WebSocket 连接（使用 uni-app 接口）
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
success: () => {
|
||||
console.log('WebSocket 连接成功');
|
||||
this.isSocketConnected = true;
|
||||
this.listenSocketMessage(); // 监听消息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('连接失败:', err);
|
||||
this.tryReconnect(); // 尝试重连
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
listenSocketMessage () {
|
||||
// 监听 WebSocket 消息
|
||||
uni.onSocketMessage((event) => {
|
||||
console.log('event', event);
|
||||
|
||||
const message = JSON.parse(event.data);
|
||||
console.log('收到实时消息:', message);
|
||||
this.getDeviceList();
|
||||
// this.updateDeviceStatus(message); // 更新设备状态
|
||||
});
|
||||
},
|
||||
|
||||
closeWebSocket () {
|
||||
// 关闭连接并清理资源
|
||||
if (this.socketTask) {
|
||||
uni.closeSocket();
|
||||
this.socketTask = null;
|
||||
this.isSocketConnected = false;
|
||||
}
|
||||
clearTimeout(this.reconnectTimer);
|
||||
},
|
||||
|
||||
tryReconnect () {
|
||||
// 自动重连机制
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
console.log('尝试重连 WebSocket...');
|
||||
this.connectWebSocket();
|
||||
}, this.reconnectInterval);
|
||||
},
|
||||
|
||||
updateDeviceStatus (message) {
|
||||
console.log('实时消息');
|
||||
|
||||
},
|
||||
|
||||
|
||||
toPage (type) {
|
||||
if (type == "设备控制") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/selectDevice/index",
|
||||
});
|
||||
}
|
||||
if (type == "绑定设备") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/deviceBind/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async getDeviceList () {
|
||||
try {
|
||||
// 从本地缓存获取用户信息
|
||||
const userInfo = uni.getStorageSync("userInfo") || {};
|
||||
const res = await uni.request({
|
||||
url: "https://online.totustec.com/api/api/front/user/myDevice",
|
||||
method: "GET",
|
||||
data: this.searchList,
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
"Authorization": userInfo.token || ""
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
this.deviceList = res.data.content
|
||||
console.log('this.deviceList', this.deviceList);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('请求接口失败', error);
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.label_icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.label_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.label_text2 {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.label_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
|
||||
.label_warp2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_item_line {
|
||||
width: 209rpx;
|
||||
min-height: 82rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.table_data_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table_data_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data_display_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_dline_warp {
|
||||
padding: 0 22rpx;
|
||||
}
|
||||
|
||||
.data_dline_css {
|
||||
width: 100%;
|
||||
border: 1rpx solid #ededed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.equipment_control_warp {
|
||||
position: fixed;
|
||||
right: 44rpx;
|
||||
bottom: 15%;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.contai_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.container_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
}
|
||||
|
||||
.table_nodata_area {
|
||||
width: 100%;
|
||||
height: 429rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table_nodata_img {
|
||||
width: 316rpx;
|
||||
height: 262rpx;
|
||||
}
|
||||
|
||||
.table_nodata_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.table_top_item {
|
||||
width: 209rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.device_table_top {
|
||||
width: 100%;
|
||||
height: 73rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_table_area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device_table_warp {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.device_top_right {
|
||||
display: flex;
|
||||
width: 158rpx;
|
||||
height: 42rpx;
|
||||
background: #0095de;
|
||||
border-radius: 21rpx;
|
||||
align-items: center;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.top_right_icon {
|
||||
display: flex;
|
||||
width: 31rpx;
|
||||
height: 31rpx;
|
||||
margin: 0 10rpx 0 14rpx;
|
||||
}
|
||||
|
||||
.top_right_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.device_area_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device_top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 12rpx 0 29rpx 0;
|
||||
}
|
||||
|
||||
.device_top_left {
|
||||
display: flex;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.top_left_img1 {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top_left_text {
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
margin-left: 7rpx;
|
||||
}
|
||||
|
||||
.middle_area_warp {
|
||||
width: 100%;
|
||||
background: #f1f6fc;
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -28rpx;
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
312
pages/deviceBind/index.vue
Normal file
312
pages/deviceBind/index.vue
Normal file
@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_area_warp">
|
||||
<view class="content_warp">
|
||||
<view class="content_item_warp" @click="scanCode()">
|
||||
<view class="content_item_left">
|
||||
<view class="item_left_txt1">扫码绑定</view>
|
||||
<!-- <view class="item_left_txt2">副文案副文案</view> -->
|
||||
</view>
|
||||
<image class="content_item_right" src="https://online.totustec.com/upload/deviceBind/content_item_right1.png">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="content_item_warp" @click="deviceBingDialog.show = true">
|
||||
<view class="content_item_left">
|
||||
<view class="item_left_txt1">输入设备名称</view>
|
||||
<view class="item_left_txt2">副文案副文案</view>
|
||||
</view>
|
||||
<image
|
||||
class="content_item_right"
|
||||
src="https://online.totustec.com/upload/deviceBind/content_item_right2.png"
|
||||
></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pop_up_warp" v-if="deviceBingDialog.show">
|
||||
<view class="pop_up_content">
|
||||
<view class="popUp_content">
|
||||
<input class="popUp_input" placeholder="请输入设备名称" v-model="deviceBingDialog.deviceName" />
|
||||
</view>
|
||||
|
||||
<view class="popUp_button_warp">
|
||||
<view class="popUp_button_item">取消</view>
|
||||
<view class="popUp_button_item popUp_button_css" @click="binding()">绑定</view>
|
||||
</view>
|
||||
|
||||
<image class="colse_icon" src="https://online.totustec.com/upload/deviceBind/colse_icon.png"
|
||||
@click="deviceBingDialog.show = false">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
deviceBingDialog: {
|
||||
show: false,
|
||||
deviceName: "",
|
||||
},
|
||||
deviceCode: ""
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
},
|
||||
methods: {
|
||||
binding () {
|
||||
console.log("此处绑定");
|
||||
},
|
||||
goBack () {
|
||||
uni.navigateBack();
|
||||
},
|
||||
scanCode () {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true, // 只允许从相机扫码
|
||||
scanType: ['qrCode'], // 只识别二维码
|
||||
success: (res) => {
|
||||
console.log('扫码结果:', res);
|
||||
if (res.result) {
|
||||
// 扫码成功，获取到设备ID或编码
|
||||
this.deviceCode = res.result;
|
||||
// 调用绑定接口
|
||||
this.bindDevice();
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('扫码失败:', err);
|
||||
// uni.showToast({
|
||||
// title: '扫码失败，请重试',
|
||||
// icon: 'none'
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
async bindDevice () {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: `https://online.totustec.com/api/api/front/device/bindingDevice`,
|
||||
method: "GET",
|
||||
data: {
|
||||
deviceCode: this.deviceCode
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
"Authorization": uni.getStorageSync("userInfo")?.token || ""
|
||||
}
|
||||
});
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: res.data.message, // 直接显示完整文本
|
||||
showCancel: false // 不显示取消按钮（可选）
|
||||
});
|
||||
// console.log('res', res);
|
||||
|
||||
// if (res.statusCode === 200) {
|
||||
// uni.showToast({ title: "绑定成功" });
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error("设备绑定失败:", error);
|
||||
uni.showToast({ title: "设备绑定失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.colse_icon {
|
||||
position: absolute;
|
||||
right: 21rpx;
|
||||
top: 19rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.popUp_button_css {
|
||||
color: #0095de !important;
|
||||
border-left: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.popUp_button_item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.popUp_button_warp {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.popUp_input {
|
||||
width: 534rpx;
|
||||
height: 80rpx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 10rpx;
|
||||
padding-left: 31rpx;
|
||||
}
|
||||
|
||||
.popUp_content {
|
||||
width: 100%;
|
||||
height: 230rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pop_up_content {
|
||||
width: 600rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pop_up_warp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content_item_right {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
margin-right: 23rpx;
|
||||
}
|
||||
|
||||
.item_left_txt2 {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
|
||||
.item_left_txt1 {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.content_item_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 26rpx;
|
||||
}
|
||||
|
||||
.content_item_warp {
|
||||
width: 340rpx;
|
||||
height: 158rpx;
|
||||
background: linear-gradient(180deg, #eaebfc 0%, #ffffff 100%);
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content_area_warp {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content_warp {
|
||||
padding: 23rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.back_button_icon {
|
||||
transform: rotate(180deg);
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.back_button_warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.contai_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
785
pages/deviceManage/index.vue
Normal file
785
pages/deviceManage/index.vue
Normal file
@ -0,0 +1,785 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_area_warp">
|
||||
<view class="content_warp">
|
||||
<!-- 视频、图片 -->
|
||||
<view class="select_device_warp">
|
||||
<view class="modal_warp">
|
||||
<view class="select_device_item" :class="{ device_active: getType == 'video' }"
|
||||
@click="getVideoImg('video')">
|
||||
获取视频
|
||||
</view>
|
||||
<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>
|
||||
|
||||
<!-- 设备状态选择 -->
|
||||
<view class="select_device_warp">
|
||||
<view class="modal_warp">
|
||||
<view class="select_device_item device_model" :class="{ device_active: deviceType == 1 }"
|
||||
@click="deviceType = 1">设备状态</view>
|
||||
<view class="select_device_item device_model" :class="{ device_active: deviceType == 2 }"
|
||||
@click="deviceType = 2">设备日志</view>
|
||||
<view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }"
|
||||
@click="deviceType = 3">设备控制</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备状态 -->
|
||||
<view class="device_status_warp" v-if="deviceType == 1">
|
||||
<!-- 设备名称 -->
|
||||
<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.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_middel">
|
||||
<view class="label_warp" v-if="deviceDetail.status == 0">
|
||||
<view class="label_icon"></view>
|
||||
<view class="label_text">空闲</view>
|
||||
</view>
|
||||
<view class="label_warp" v-if="deviceDetail.status == 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 == 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 == 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>
|
||||
</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">
|
||||
<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),
|
||||
}">
|
||||
{{ 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}} -->
|
||||
{{ deviceDetail.errorStatus === -1 ? '断开' : deviceDetail.errorStatus }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="itemContent_line_warp">
|
||||
<view class="item_content_model">
|
||||
<view class="item_content_line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 设备控制 -->
|
||||
<view class="device_control_warp" v-if="deviceType == 3">
|
||||
<view class="deviceN_input_warp">
|
||||
<view class="device_name_txt"> 请输入设备名称：</view>
|
||||
<view class="deviceN_input_area">
|
||||
<input class="deviceN_input" type="text" v-model="deviceName" />
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="deviceN_input_tip">文件位置：桌面File文件夹内</view>
|
||||
<view class="device_operation_warp">
|
||||
<view class="device_operation_btn" @click="operationData('PRINT')" :style="{
|
||||
backgroundColor:
|
||||
deviceDetail.status == 0 && deviceDetail.status != -1
|
||||
? '#ffffff'
|
||||
: '#cccccc',
|
||||
}">
|
||||
<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('CONTINUE')" :style="{
|
||||
backgroundColor:
|
||||
deviceDetail.status != 1 &&
|
||||
deviceDetail.printStatus != 6 &&
|
||||
deviceDetail.status != -1
|
||||
? '#ffffff'
|
||||
: '#cccccc',
|
||||
}">
|
||||
<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="operationData('PAUSE')" :style="{
|
||||
backgroundColor:
|
||||
deviceDetail.status == 2 && deviceDetail.status != -1
|
||||
? '#ffffff'
|
||||
: '#cccccc',
|
||||
}">
|
||||
<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',
|
||||
}">
|
||||
<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>
|
||||
<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>
|
||||
<view class="operation_btn_txt">报警退出</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
deviceName: "",
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
getType: "video",
|
||||
deviceType: 3,
|
||||
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" },
|
||||
},
|
||||
|
||||
// WebSocket 相关状态
|
||||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||||
isSocketConnected: false, // 连接状态
|
||||
reconnectTimer: null, // 重连定时器
|
||||
reconnectInterval: 5000, // 重连间隔（5秒）
|
||||
socketData: {},
|
||||
};
|
||||
},
|
||||
onLoad (options) {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
|
||||
this.deviceCode = options.deviceCode || "";
|
||||
console.log("接收到的设备编码:", this.deviceCode);
|
||||
|
||||
// 立即根据设备编码获取详情数据
|
||||
if (this.deviceCode) {
|
||||
this.getDeviceDetail();
|
||||
}
|
||||
|
||||
this.connectWebSocket(); // 初始化 WebSocket 连接
|
||||
},
|
||||
onUnload () {
|
||||
this.closeWebSocket(); // 页面卸载时关闭连接
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- WebSocket 核心方法 ----------------------
|
||||
connectWebSocket () {
|
||||
const wsUrl = "ws://e7eb22d8.natappfree.cc/webSocket/vue";
|
||||
|
||||
// 初始化 WebSocket 连接（使用 uni-app 接口）
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
success: () => {
|
||||
console.log("WebSocket 连接成功");
|
||||
this.isSocketConnected = true;
|
||||
this.listenSocketMessage(); // 监听消息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("连接失败:", err);
|
||||
this.tryReconnect(); // 尝试重连
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
listenSocketMessage () {
|
||||
// 监听 WebSocket 消息
|
||||
uni.onSocketMessage((event) => {
|
||||
console.log("event", event);
|
||||
|
||||
const message = JSON.parse(event.data);
|
||||
this.getDeviceDetail();
|
||||
this.updateDeviceStatus(message); // 更新设备状态
|
||||
});
|
||||
},
|
||||
|
||||
closeWebSocket () {
|
||||
// 关闭连接并清理资源
|
||||
if (this.socketTask) {
|
||||
uni.closeSocket();
|
||||
this.socketTask = null;
|
||||
this.isSocketConnected = false;
|
||||
}
|
||||
clearTimeout(this.reconnectTimer);
|
||||
},
|
||||
|
||||
tryReconnect () {
|
||||
// 自动重连机制
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
console.log("尝试重连 WebSocket...");
|
||||
this.connectWebSocket();
|
||||
}, this.reconnectInterval);
|
||||
},
|
||||
|
||||
updateDeviceStatus (message) {
|
||||
console.log("实时消息", message);
|
||||
// CLOSE、STATUS 你那就刷新接口就行
|
||||
if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
|
||||
this.getDeviceDetail();
|
||||
}
|
||||
// ERROR 抛出异常信息
|
||||
if (message.msgType == "ERROR") {
|
||||
uni.showToast({ title: message.msg, icon: "none" });
|
||||
}
|
||||
// INFO 返回视频/图片地址
|
||||
if (message.msgType == "INFO") {
|
||||
this.socketData = message.data;
|
||||
if (this.socketData.imageUrl) {
|
||||
this.socketData.imageUrl =
|
||||
"http://e7eb22d8.natappfree.cc" + message.data.imageUrl;
|
||||
}
|
||||
}
|
||||
// WRITEIMG 接收图片数据中
|
||||
if (message.msgType == "WRITEIMG") {
|
||||
if (message.data.chunkIndex == message.data.totalChunks) {
|
||||
// 微信图片小区域转圈圈加载
|
||||
} else {
|
||||
// 关闭加载
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 发送 WebSocket 指令
|
||||
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
|
||||
*/
|
||||
sendWsCommand (command) {
|
||||
if (!this.isSocketConnected) {
|
||||
console.warn("WebSocket 未连接，无法发送指令");
|
||||
return;
|
||||
}
|
||||
|
||||
// 确保 deviceCode 存在（从 URL 参数获取）
|
||||
if (!this.deviceCode) {
|
||||
console.error("设备编号未获取，无法发送指令");
|
||||
return;
|
||||
}
|
||||
|
||||
const message = {
|
||||
Topic: `sdcp/request/${this.deviceCode}`, // 替换 MainboardID 为 deviceCode
|
||||
command: command,
|
||||
};
|
||||
if (command == "PRINT") {
|
||||
message.filename = this.deviceName;
|
||||
}
|
||||
|
||||
// 发送消息（使用 uni-app 的 sendSocketMessage）
|
||||
uni
|
||||
.sendSocketMessage({
|
||||
data: JSON.stringify(message),
|
||||
})
|
||||
.then(() => {
|
||||
console.log("指令发送成功:", message);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("指令发送失败:", err);
|
||||
});
|
||||
},
|
||||
|
||||
operationData (type) {
|
||||
if (type == "PRINT") {
|
||||
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
|
||||
this.sendWsCommand(type);
|
||||
}
|
||||
}
|
||||
if (type == "CONTINUE") {
|
||||
if (
|
||||
this.deviceDetail.status != 1 &&
|
||||
this.deviceDetail.printStatus != 6 &&
|
||||
this.deviceDetail.status != -1
|
||||
) {
|
||||
this.sendWsCommand(type);
|
||||
}
|
||||
}
|
||||
if (type == 'PAUSE') {
|
||||
if (this.deviceDetail.status == 2 && this.deviceDetail.status != -1) {
|
||||
this.sendWsCommand(type);
|
||||
}
|
||||
}
|
||||
if (type == 'EXIT') {
|
||||
if (this.deviceDetail.status != 0 && this.deviceDetail.status != -1) {
|
||||
this.sendWsCommand(type);
|
||||
}
|
||||
}
|
||||
},
|
||||
getVideoImg (type) {
|
||||
if (type == "img") {
|
||||
this.getType = "img";
|
||||
this.sendWsCommand("IMAGE");
|
||||
} else {
|
||||
this.getType = "video";
|
||||
this.sendWsCommand("OPEN_VIDEO");
|
||||
}
|
||||
},
|
||||
// 获取状态文字
|
||||
getStatusText (status) {
|
||||
if (status == -1) {
|
||||
return "断开";
|
||||
}
|
||||
return this.statusMap[status]?.text || "";
|
||||
},
|
||||
// 获取状态颜色
|
||||
getStatusColor (status) {
|
||||
if (status == -1) {
|
||||
return "#999999";
|
||||
}
|
||||
return this.statusMap[status]?.color; // 默认灰色
|
||||
},
|
||||
getCurrentTime () {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
|
||||
return `${year}.${month}.${day} ${hours}:${minutes}`;
|
||||
},
|
||||
goBack () {
|
||||
uni.navigateBack();
|
||||
},
|
||||
async getDeviceDetail () {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: `https://online.totustec.com/api/api/front/device/get`,
|
||||
method: "GET",
|
||||
data: {
|
||||
deviceCode: this.deviceCode,
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
Authorization: uni.getStorageSync("userInfo")?.token || "",
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
this.deviceDetail = res.data;
|
||||
console.log("设备详情:", this.deviceDetail);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取设备详情失败:", error);
|
||||
uni.showToast({ title: "获取设备信息失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.operation_btn_icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.operation_btn_txt {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.device_operation_btn {
|
||||
width: 320rpx;
|
||||
height: 68rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_operation_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.deviceN_input_tip {
|
||||
margin: 24rpx 0 70rpx 0;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.device_control_warp {
|
||||
width: 710rpx;
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.deviceN_input_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_name_txt {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.deviceN_input_area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clear_deviceN_warp {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.clear_deviceN_icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.deviceN_input {
|
||||
width: 419rpx;
|
||||
height: 74rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding-left: 30rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.label_text {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.label_text2 {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.label_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label_warp2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label_icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.item_content_model {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.item_content_line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.itemContent_line_warp {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 5rpx;
|
||||
width: 222rpx;
|
||||
}
|
||||
|
||||
.item_content_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.statusItem_modal_warp {
|
||||
padding: 0 22rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device_status_item {
|
||||
width: 100%;
|
||||
height: 81rpx;
|
||||
}
|
||||
|
||||
.device_status_warp {
|
||||
width: 710rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 23rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal_warp {
|
||||
padding: 0 16rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_active {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.select_device_item {
|
||||
width: 329rpx;
|
||||
height: 56rpx;
|
||||
background: #e2edff;
|
||||
border-radius: 60rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_device_warp {
|
||||
width: 710rpx;
|
||||
height: 68rpx;
|
||||
background: #e2edff;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.content_warp {
|
||||
padding: 16rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content_area_warp {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.device_model {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
transform: rotate(180deg);
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.back_button_warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.contai_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
657
pages/index/index.vue
Normal file
657
pages/index/index.vue
Normal file
@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_mimicry" :style="{ height: statusBarHeight + 45 + 'px' }"></view>
|
||||
<view class="top_fixed_warp">
|
||||
<view style="width: 100%" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<view class="top_warp">
|
||||
<image class="company_logo_css" src="https://online.totustec.com/upload/indexPage/company_logo1.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="nav_warp" src="https://online.totustec.com/upload/indexPage/nav_img.png"></image>
|
||||
|
||||
<view class="middle_area_warp">
|
||||
<!-- 设备状态 -->
|
||||
<view class="device_area_warp">
|
||||
<view class="device_top">
|
||||
<view class="device_top_left">
|
||||
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img1.png"></image>
|
||||
<view class="top_left_text">设备状态</view>
|
||||
</view>
|
||||
|
||||
<view class="device_top_right" @click="toPage()">
|
||||
<image class="top_right_icon" src="https://online.totustec.com/upload/indexPage/top_right_icon.png"></image>
|
||||
<view class="top_right_text">绑定设备</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device_table_warp">
|
||||
<view class="device_table_area">
|
||||
<view class="device_table_top">
|
||||
<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: 200rpx">设备运行状态</view>
|
||||
</view>
|
||||
<view class="table_data_warp" v-if="deviceList.length > 0">
|
||||
<view class="table_data_item" v-for="(item, index) in deviceList">
|
||||
<view class="data_display_warp">
|
||||
<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: 200rpx">
|
||||
<view class="label_warp" v-if="item.status == 0">
|
||||
<view class="label_icon"></view>
|
||||
<view class="label_text">空闲</view>
|
||||
</view>
|
||||
<view class="label_warp" v-if="item.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="item.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="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 class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 以下是演示数据，对接数据时删除 -->
|
||||
<!-- <view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="width: 301rpx">调试二号机</view>
|
||||
<view class="data_item_line" style="width: 200rpx">
|
||||
<view class="label_warp">
|
||||
<view class="label_icon" style="background: #00abff"></view>
|
||||
<view class="label_text" style="color: #00abff">准备中</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="width: 301rpx">调试三号机</view>
|
||||
<view class="data_item_line" style="width: 200rpx">
|
||||
<view class="label_warp">
|
||||
<view class="label_icon" style="background: #00d195"></view>
|
||||
<view class="label_text" style="color: #00d195">打印中</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="width: 301rpx">调试四号机</view>
|
||||
<view class="data_item_line" style="width: 200rpx">
|
||||
<view class="label_warp">
|
||||
<view class="label_icon" style="background: #fdcb3b"></view>
|
||||
<view class="label_text" style="color: #fdcb3b">铲件中</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 暂无数据 -->
|
||||
<view class="table_nodata_area" v-else>
|
||||
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
|
||||
</image>
|
||||
<view class="table_nodata_text">暂无设备，请绑定设备～</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备预警 -->
|
||||
<view class="device_area_warp" style="margin-top: 56rpx">
|
||||
<view class="device_top">
|
||||
<view class="device_top_left">
|
||||
<image class="top_left_img1" src="https://online.totustec.com/upload/indexPage/top_left_img2.png"></image>
|
||||
<view class="top_left_text">设备预警</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device_table_warp">
|
||||
<view class="device_table_area">
|
||||
<view class="device_table_top">
|
||||
<view class="table_top_item" style="padding-left: 27rpx">机器序号</view>
|
||||
<view class="table_top_item" style="flex: 1">报警状态</view>
|
||||
</view>
|
||||
<view class="table_data_warp" v-if="deviceList.length > 0">
|
||||
<view class="table_data_item" v-for="(item, index) in deviceList">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">{{ item.deviceCode }}</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<!-- <view class="label_warp2">
|
||||
<view class="label_icon" style="background: #00d195"></view>
|
||||
<view class="label_text label_text2" style="color: #00d195">空闲</view>
|
||||
</view> -->
|
||||
<view class="label_warp2">
|
||||
<!-- 状态图标颜色映射 -->
|
||||
<view class="label_icon" :style="{ background: getStatusColor(item.errorStatus) }"></view>
|
||||
<!-- 状态文字条件渲染 -->
|
||||
<view class="label_text label_text2" :style="{ color: getStatusColor(item.errorStatus) }">
|
||||
{{ getStatusText(item.errorStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 以下是演示数据，对接数据时删除 -->
|
||||
<!-- <view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">文件校验失败</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">设备出错</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">准备过程出错</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">打印出错</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">加液失败</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">铲件失败</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="data_dline_warp">
|
||||
<view class="data_dline_css"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table_data_item">
|
||||
<view class="data_display_warp">
|
||||
<view class="data_item_line" style="padding-left: 27rpx">16628096</view>
|
||||
<view class="data_item_line" style="flex: 1">
|
||||
<view class="label_warp2">
|
||||
<view class="label_icon" style="background: #ff0000"></view>
|
||||
<view class="label_text label_text2">图片异物</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="table_nodata_area" v-else>
|
||||
<image class="table_nodata_img" src="https://online.totustec.com/upload/indexPage/table_nodata_img1.png">
|
||||
</image>
|
||||
<view class="table_nodata_text">暂无设备预警</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 100rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
searchList: {
|
||||
page: 1,
|
||||
size: 10000,
|
||||
},
|
||||
deviceList: [],
|
||||
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' }
|
||||
},
|
||||
|
||||
// WebSocket 相关状态
|
||||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||||
isSocketConnected: false, // 连接状态
|
||||
reconnectTimer: null, // 重连定时器
|
||||
reconnectInterval: 5000 // 重连间隔（5秒）
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
|
||||
|
||||
this.connectWebSocket(); // 初始化 WebSocket 连接
|
||||
},
|
||||
onShow () {
|
||||
this.getDeviceList(); // 每次显示页面时调用
|
||||
},
|
||||
onUnload () {
|
||||
this.closeWebSocket(); // 页面卸载时关闭连接
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- WebSocket 核心方法 ----------------------
|
||||
connectWebSocket () {
|
||||
const wsUrl = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
|
||||
|
||||
// 初始化 WebSocket 连接（使用 uni-app 接口）
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
success: () => {
|
||||
console.log('WebSocket 连接成功');
|
||||
this.isSocketConnected = true;
|
||||
this.listenSocketMessage(); // 监听消息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('连接失败:', err);
|
||||
this.tryReconnect(); // 尝试重连
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
listenSocketMessage () {
|
||||
// 监听 WebSocket 消息
|
||||
uni.onSocketMessage((event) => {
|
||||
console.log('event', event);
|
||||
|
||||
const message = JSON.parse(event.data);
|
||||
console.log('收到实时消息:', message);
|
||||
this.getDeviceList();
|
||||
// this.updateDeviceStatus(message); // 更新设备状态
|
||||
});
|
||||
},
|
||||
|
||||
closeWebSocket () {
|
||||
// 关闭连接并清理资源
|
||||
if (this.socketTask) {
|
||||
uni.closeSocket();
|
||||
this.socketTask = null;
|
||||
this.isSocketConnected = false;
|
||||
}
|
||||
clearTimeout(this.reconnectTimer);
|
||||
},
|
||||
|
||||
tryReconnect () {
|
||||
// 自动重连机制
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
console.log('尝试重连 WebSocket...');
|
||||
this.connectWebSocket();
|
||||
}, this.reconnectInterval);
|
||||
},
|
||||
|
||||
updateDeviceStatus (message) {
|
||||
console.log('实时消息');
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 获取状态文字
|
||||
getStatusText (status) {
|
||||
if (status == -1) {
|
||||
return '断开'
|
||||
}
|
||||
return this.statusMap[status]?.text || '';
|
||||
},
|
||||
// 获取状态颜色
|
||||
getStatusColor (status) {
|
||||
if (status == -1) {
|
||||
return '#999999'
|
||||
}
|
||||
return this.statusMap[status]?.color; // 默认灰色
|
||||
},
|
||||
toPage () {
|
||||
uni.navigateTo({
|
||||
url: "/pages/deviceBind/index",
|
||||
});
|
||||
},
|
||||
async getDeviceList () {
|
||||
try {
|
||||
// 从本地缓存获取用户信息
|
||||
const userInfo = uni.getStorageSync("userInfo") || {};
|
||||
const res = await uni.request({
|
||||
url: "https://online.totustec.com/api/api/front/user/myDevice",
|
||||
method: "GET",
|
||||
data: this.searchList,
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
"Authorization": userInfo.token || ""
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
this.deviceList = res.data.content
|
||||
console.log('this.deviceList', this.deviceList);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('请求接口失败', error);
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.label_icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.label_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.label_text2 {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.label_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
|
||||
.label_warp2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_item_line {
|
||||
width: 209rpx;
|
||||
min-height: 82rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.table_data_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table_data_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data_display_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_dline_warp {
|
||||
padding: 0 22rpx;
|
||||
}
|
||||
|
||||
.data_dline_css {
|
||||
width: 100%;
|
||||
border: 1rpx solid #ededed;
|
||||
}
|
||||
|
||||
.top_mimicry {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_fixed_warp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.container_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
}
|
||||
|
||||
.table_nodata_area {
|
||||
width: 100%;
|
||||
height: 429rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table_nodata_img {
|
||||
width: 316rpx;
|
||||
height: 262rpx;
|
||||
}
|
||||
|
||||
.table_nodata_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.table_top_item {
|
||||
width: 209rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.device_table_top {
|
||||
width: 100%;
|
||||
height: 73rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_table_area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device_table_warp {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.device_top_right {
|
||||
display: flex;
|
||||
width: 158rpx;
|
||||
height: 42rpx;
|
||||
background: #0095de;
|
||||
border-radius: 21rpx;
|
||||
align-items: center;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.top_right_icon {
|
||||
display: flex;
|
||||
width: 31rpx;
|
||||
height: 31rpx;
|
||||
margin: 0 10rpx 0 14rpx;
|
||||
}
|
||||
|
||||
.top_right_text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.device_area_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device_top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 12rpx 0 29rpx 0;
|
||||
}
|
||||
|
||||
.device_top_left {
|
||||
display: flex;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.top_left_img1 {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top_left_text {
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
margin-left: 7rpx;
|
||||
}
|
||||
|
||||
.middle_area_warp {
|
||||
width: 100%;
|
||||
background: #f1f6fc;
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -28rpx;
|
||||
padding-top: 28rpx;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
.nav_warp {
|
||||
width: 100%;
|
||||
height: 224rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top_warp {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
|
||||
.company_logo_css {
|
||||
width: 175rpx;
|
||||
height: 71rpx;
|
||||
}
|
||||
</style>
|
||||
357
pages/mine/index.vue
Normal file
357
pages/mine/index.vue
Normal file
@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="top_nav_warp">我的</view>
|
||||
<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>
|
||||
<!-- <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" @click="getLoginCode()" v-else>登录</view>
|
||||
<view class="mine_info_txt2" >账户设置</view>
|
||||
</view>
|
||||
</view>
|
||||
<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">
|
||||
<view class="area1_content_title">常用工具</view>
|
||||
<view class="area1_content_warp">
|
||||
<view v-for="(item, index) in area1ContentList" :key="index" class="area1_content_item"
|
||||
:style="index === 1 ? 'margin: 0 73rpx;' : ''" @click="toPage(item.text)">
|
||||
<image class="area1_content_icon" :src="item.icon" mode="widthFix"></image>
|
||||
<view class="area1_content_txt">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="function_area2_warp">
|
||||
<view class="function_area2_content">
|
||||
<!-- <view class="function_area2_item" style="border-top-left-radius: 20rpx; border-top-right-radius: 20rpx">
|
||||
<view class="area2_item_left">
|
||||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon1.png">
|
||||
</image>
|
||||
<view class="area2_item_txt">使用向导</view>
|
||||
</view>
|
||||
<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="area2_item_left">
|
||||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
|
||||
</image>
|
||||
<view class="area2_item_txt">分享小程序</view>
|
||||
</view>
|
||||
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <video style="width: 100%;height: 200rpx;" src="http://broadcasting.totustec.com/live/12345678.m3u8"></video> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
area1ContentList: [
|
||||
{
|
||||
icon: "https://online.totustec.com/upload/minePage/area1_content_icon1.png",
|
||||
text: "设备管理",
|
||||
},
|
||||
{
|
||||
icon: "https://online.totustec.com/upload/minePage/area1_content_icon2.png",
|
||||
text: "预警管理",
|
||||
},
|
||||
// {
|
||||
// icon: "https://online.totustec.com/upload/minePage/area1_content_icon3.png",
|
||||
// text: "我的收藏",
|
||||
// },
|
||||
],
|
||||
userInfo: {
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
|
||||
// 页面加载时获取缓存用户信息
|
||||
this.getUserInfoFromCache();
|
||||
|
||||
},
|
||||
methods: {
|
||||
getUserInfoFromCache () {
|
||||
const userInfo = uni.getStorageSync("userInfo");
|
||||
console.log('userInfo',userInfo);
|
||||
|
||||
if (userInfo) {
|
||||
this.userInfo = userInfo;
|
||||
}
|
||||
},
|
||||
toPage (pageName) {
|
||||
if (pageName == "设备管理") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/selectDevice/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
navigateToAccountSettings(path) {
|
||||
console.log("okk")
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
});
|
||||
},
|
||||
getLoginCode () {
|
||||
uni.login({
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
this.loginWithPhoneNumber(res.code);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
async loginWithPhoneNumber (code) {
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
|
||||
method: "POST",
|
||||
data: { code },
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
this.userInfo = res.data;
|
||||
console.log('this.userInfo', this.userInfo);
|
||||
|
||||
// 存储用户信息到本地缓存（uni-app接口）
|
||||
uni.setStorageSync("userInfo", this.userInfo);
|
||||
uni.showToast({ title: "登录成功" });
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "登录失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.area2_item_right {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.area2_item_txt {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 23rpx;
|
||||
}
|
||||
|
||||
.area2_item_icon1 {
|
||||
width: 30rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.area2_item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.function_area2_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.function_area2_item {
|
||||
height: 110rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 23rpx 0 37rpx;
|
||||
}
|
||||
|
||||
.function_area2_warp {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.area1_content_txt {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.area1_content_icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.area1_content_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.area1_content_warp {
|
||||
display: flex;
|
||||
margin-left: 38rpx;
|
||||
align-items: center;
|
||||
margin-top: 39rpx;
|
||||
}
|
||||
|
||||
.area1_content_title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
margin: 19rpx 0 0 28rpx;
|
||||
}
|
||||
|
||||
.function_area1_content {
|
||||
width: 100%;
|
||||
height: 238rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.function_area1_warp {
|
||||
width: 100%;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.contai_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top_area_backimg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mine_area_right {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.mine_info_txt2 {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.mine_info_txt1 {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.mine_info_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 23rpx;
|
||||
}
|
||||
|
||||
.mine_avater {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mine_area_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mimicry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mine_area_warp {
|
||||
height: 229rpx;
|
||||
padding: 26rpx 34rpx 0 47rpx;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
</style>
|
||||
216
pages/mine/update.vue
Normal file
216
pages/mine/update.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<!-- Top Navigation Bar -->
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="top_nav_warp">
|
||||
<view class="back_icon" @click="goBack">
|
||||
<image src="https://online.totustec.com/upload/minePage/back.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text>个人资料</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Profile Content -->
|
||||
<view class="profile_content">
|
||||
<!-- Avatar Section -->
|
||||
<view class="profile_item">
|
||||
<text class="item_label">头像</text>
|
||||
<view class="avatar_wrapper" @click="changeAvatar">
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||
<image class="edit_icon" src="https://online.totustec.com/upload/minePage/user.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Nickname Section -->
|
||||
<view class="profile_item">
|
||||
<text class="item_label">昵称</text>
|
||||
<input class="nickname_input" v-model="userInfo.nickname" placeholder="请输入昵称" />
|
||||
</view>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button class="save_btn" @click="saveProfile">保存修改</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// Get system info for status bar height
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||
|
||||
// Load user info
|
||||
this.loadUserInfo();
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
// Mock data - replace with actual data fetching
|
||||
this.userInfo = {
|
||||
avatar: '/static/default-avatar.png',
|
||||
nickname: '微信用户'
|
||||
};
|
||||
},
|
||||
changeAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
this.userInfo.avatar = tempFilePaths[0];
|
||||
// Here you would typically upload the image to your server
|
||||
}
|
||||
});
|
||||
},
|
||||
saveProfile() {
|
||||
if (!this.userInfo.nickname.trim()) {
|
||||
uni.showToast({
|
||||
title: '昵称不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Here you would typically send the updated info to your server
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contai_warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc; /* 保持原有背景色 */
|
||||
}
|
||||
|
||||
/* Top Navigation Styles */
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.back_icon {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.back_icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Profile Content Styles */
|
||||
.profile_content {
|
||||
width: 90%;
|
||||
padding: 40rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.profile_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item_label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar_wrapper {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.edit_icon {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
padding: 5rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nickname_input {
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.save_btn {
|
||||
margin-top: 60rpx;
|
||||
background-color: #0095de;
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.save_btn:active {
|
||||
background-color: #06AD56;
|
||||
}
|
||||
</style>
|
||||
309
pages/selectDevice/index.vue
Normal file
309
pages/selectDevice/index.vue
Normal file
@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="contai_warp">
|
||||
<view class="top_area_warp">
|
||||
<view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_warp">
|
||||
<view class="model_warp">
|
||||
<view class="content_title">设备名称</view>
|
||||
<view class="content_data_warp">
|
||||
<!-- 设备列表容器 -->
|
||||
<div v-for="(item, index) in deviceList" :key="index" class="content_data_item">
|
||||
<!-- 设备项左侧内容 -->
|
||||
<div class="data_item_left">
|
||||
<image class="data_item_icon" src="https://online.totustec.com/upload/selectDevice/data_item_icon.png">
|
||||
</image>
|
||||
<div class="data_item_txt">{{ item.brand }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备项右侧操作 -->
|
||||
<div class="data_item_right" @click="handleView(item.deviceCode,item.status)">查看</div>
|
||||
|
||||
<!-- 设备使用状态图标（根据状态显示） -->
|
||||
<image v-if="item.isInUse" class="in_use_warp"
|
||||
src="https://online.totustec.com/upload/selectDevice/in_use_warp.png"></image>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: "Hello",
|
||||
statusBarHeight: 0,
|
||||
searchList: {
|
||||
page: 1,
|
||||
size: 10000,
|
||||
},
|
||||
deviceList: [],
|
||||
|
||||
|
||||
// WebSocket 相关状态
|
||||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||||
isSocketConnected: false, // 连接状态
|
||||
reconnectTimer: null, // 重连定时器
|
||||
reconnectInterval: 5000 // 重连间隔（5秒）
|
||||
};
|
||||
},
|
||||
onLoad () {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const {
|
||||
statusBarHeight, // 状态栏高度（单位：px）
|
||||
} = systemInfo;
|
||||
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
|
||||
|
||||
this.connectWebSocket(); // 初始化 WebSocket 连接
|
||||
},
|
||||
onUnload () {
|
||||
this.closeWebSocket(); // 页面卸载时关闭连接
|
||||
},
|
||||
onShow () {
|
||||
this.getDeviceList(); // 每次显示页面时调用
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- WebSocket 核心方法 ----------------------
|
||||
connectWebSocket () {
|
||||
const wsUrl = 'ws://e7eb22d8.natappfree.cc/webSocket/vue';
|
||||
|
||||
// 初始化 WebSocket 连接（使用 uni-app 接口）
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
success: () => {
|
||||
console.log('WebSocket 连接成功');
|
||||
this.isSocketConnected = true;
|
||||
this.listenSocketMessage(); // 监听消息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('连接失败:', err);
|
||||
this.tryReconnect(); // 尝试重连
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
listenSocketMessage () {
|
||||
// 监听 WebSocket 消息
|
||||
uni.onSocketMessage((event) => {
|
||||
console.log('event', event);
|
||||
|
||||
const message = JSON.parse(event.data);
|
||||
console.log('收到实时消息:', message);
|
||||
this.getDeviceList();
|
||||
// this.updateDeviceStatus(message); // 更新设备状态
|
||||
});
|
||||
},
|
||||
|
||||
closeWebSocket () {
|
||||
// 关闭连接并清理资源
|
||||
if (this.socketTask) {
|
||||
uni.closeSocket();
|
||||
this.socketTask = null;
|
||||
this.isSocketConnected = false;
|
||||
}
|
||||
clearTimeout(this.reconnectTimer);
|
||||
},
|
||||
|
||||
tryReconnect () {
|
||||
// 自动重连机制
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
console.log('尝试重连 WebSocket...');
|
||||
this.connectWebSocket();
|
||||
}, this.reconnectInterval);
|
||||
},
|
||||
|
||||
updateDeviceStatus (message) {
|
||||
console.log('实时消息');
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
goBack () {
|
||||
uni.navigateBack();
|
||||
},
|
||||
handleView (deviceCode,status) {
|
||||
if(status == -1){
|
||||
uni.showToast({
|
||||
title: '设备处于断开状态，暂不支持查看',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
console.log("data", deviceCode);
|
||||
uni.navigateTo({
|
||||
url: `/pages/deviceManage/index?deviceCode=${deviceCode}`
|
||||
});
|
||||
},
|
||||
async getDeviceList () {
|
||||
try {
|
||||
// 从本地缓存获取用户信息
|
||||
const userInfo = uni.getStorageSync("userInfo") || {};
|
||||
const res = await uni.request({
|
||||
url: "https://online.totustec.com/api/api/front/user/myDevice",
|
||||
method: "GET",
|
||||
data: this.searchList,
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded", // 关键配置
|
||||
"Authorization": userInfo.token || ""
|
||||
},
|
||||
});
|
||||
|
||||
if (res.statusCode == 200) {
|
||||
this.deviceList = res.data.content
|
||||
console.log('this.deviceList', this.deviceList);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('请求接口失败', error);
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.in_use_warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 69rpx;
|
||||
height: 67rpx;
|
||||
}
|
||||
|
||||
.data_item_right {
|
||||
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;
|
||||
}
|
||||
|
||||
.data_item_txt {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
|
||||
.data_item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data_item_icon {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.content_data_item {
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 22rpx 0 53rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content_data_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content_title {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.content_warp {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model_warp {
|
||||
padding: 16rpx 12rpx 0 28rpx;
|
||||
}
|
||||
|
||||
.back_button_icon {
|
||||
transform: rotate(180deg);
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.back_button_warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contai_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC !important;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
BIN
static/logo.png
Normal file
BIN
static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/tabbar/device.png
Normal file
BIN
static/tabbar/device.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
BIN
static/tabbar/device_select.png
Normal file
BIN
static/tabbar/device_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/tabbar/index.png
Normal file
BIN
static/tabbar/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
static/tabbar/index_select.png
Normal file
BIN
static/tabbar/index_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/tabbar/mine.png
Normal file
BIN
static/tabbar/mine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/tabbar/mine_select.png
Normal file
BIN
static/tabbar/mine_select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
13
uni.promisify.adaptor.js
Normal file
13
uni.promisify.adaptor.js
Normal file
@ -0,0 +1,13 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
76
uni.scss
Normal file
76
uni.scss
Normal file
@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
Loading…
Reference in New Issue
Block a user