添加详情信息
This commit is contained in:
18796357645
parent
999489671d
commit
056af4fbb0
@ -22,7 +22,8 @@
|
||||
</view>
|
||||
<view class="select_device_item" :class="{ device_active: getType == 'img' }"
|
||||
@click="getVideoImg('img')">
|
||||
获取图片</view>
|
||||
获取图片
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -35,11 +36,14 @@
|
||||
<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>
|
||||
@click="deviceType = 1">设备状态
|
||||
</view>
|
||||
<view class="select_device_item device_model" :class="{ device_active: deviceType == 2 }"
|
||||
@click="deviceType = 2">设备日志</view>
|
||||
@click="deviceType = 2">设备日志
|
||||
</view>
|
||||
<view class="select_device_item device_model" :class="{ device_active: deviceType == 3 }"
|
||||
@click="deviceType = 3">设备控制</view>
|
||||
@click="deviceType = 3">设备控制
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -106,13 +110,32 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device_status_item" v-for="(field, idx) in statusTwoFields" :key="idx">
|
||||
<view class="statusItem_modal_warp">
|
||||
<view class="item_content_warp">
|
||||
<view class="item_content_left">{{ field.label }}</view>
|
||||
<view class="item_content_middel">
|
||||
|
||||
{{ printInfo[field.key] }}
|
||||
</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" @input="onDeviceNameInput" />
|
||||
<input class="deviceN_input" type="text" v-model="deviceName" @input="onDeviceNameInput"/>
|
||||
<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">
|
||||
@ -143,7 +166,7 @@
|
||||
: '#cccccc',
|
||||
}">
|
||||
<image class="operation_btn_icon"
|
||||
src="https://online.totustec.com/upload/print_status1.png"></image>
|
||||
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
|
||||
<view class="operation_btn_txt">继续打印</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -168,7 +191,7 @@
|
||||
: '#cccccc',
|
||||
}">
|
||||
<image class="operation_btn_icon"
|
||||
src="https://online.totustec.com/upload/print_status1.png"></image>
|
||||
src="https://online.totustec.com/upload/deviceManage/print_status1.png"></image>
|
||||
<view class="operation_btn_txt">退出打印</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -193,10 +216,11 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
BASE_STOKECT_URL
|
||||
} from "@/config.js";
|
||||
export default {
|
||||
import {
|
||||
BASE_STOKECT_URL, BASE_IMG_URL
|
||||
} from "@/config.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceName: "",
|
||||
@ -206,6 +230,7 @@
|
||||
deviceType: 3,
|
||||
deviceCode: "", // 存储接收到的设备编码
|
||||
deviceDetail: {}, // 存储设备详情数据
|
||||
printInfo: {},//存储设备二级详情数据
|
||||
statusMap: {
|
||||
0: {
|
||||
text: "正常",
|
||||
@ -240,8 +265,8 @@
|
||||
color: "#ff0000"
|
||||
},
|
||||
},
|
||||
// 新增：设备状态字段配置
|
||||
statusFields: [{
|
||||
statusFields: [
|
||||
{
|
||||
label: '设备名称',
|
||||
key: 'brand'
|
||||
},
|
||||
@ -255,6 +280,19 @@
|
||||
key: 'errorStatus',
|
||||
isErrorStatus: true
|
||||
},
|
||||
{
|
||||
label: '错误码',
|
||||
key: 'errorStatus',
|
||||
isErrorCode: true
|
||||
},
|
||||
|
||||
{
|
||||
label: '当前时间',
|
||||
key: 'currentTime',
|
||||
isCurrentTime: true
|
||||
}
|
||||
],
|
||||
statusTwoFields: [
|
||||
{
|
||||
label: '当前打印层数',
|
||||
key: 'currentLayer'
|
||||
@ -265,36 +303,25 @@
|
||||
},
|
||||
{
|
||||
label: '已打印时间(s)',
|
||||
key: 'printedTime'
|
||||
key: 'currentTicks'
|
||||
},
|
||||
{
|
||||
label: '总打印时间(s)',
|
||||
key: 'totalTime'
|
||||
key: 'totalTicks'
|
||||
},
|
||||
{
|
||||
label: '打印文件名称',
|
||||
key: 'fileName'
|
||||
},
|
||||
{
|
||||
label: '错误码',
|
||||
key: 'errorStatus',
|
||||
isErrorCode: true
|
||||
key: 'filename'
|
||||
},
|
||||
{
|
||||
label: '当前任务数量',
|
||||
key: 'Task'
|
||||
key: 'task'
|
||||
},
|
||||
{
|
||||
label: '总共任务数量',
|
||||
key: 'totalTask'
|
||||
key: 'total'
|
||||
},
|
||||
{
|
||||
label: '当前时间',
|
||||
key: 'currentTime',
|
||||
isCurrentTime: true
|
||||
}
|
||||
],
|
||||
|
||||
// WebSocket 相关状态
|
||||
socketTask: null, // uni-app 的 WebSocket 任务实例
|
||||
isSocketConnected: false, // 连接状态
|
||||
@ -392,7 +419,7 @@
|
||||
this.socketData = message.data;
|
||||
if (this.socketData.imageUrl) {
|
||||
this.socketData.imageUrl =
|
||||
"http://online.totustec.com" + message.data.imageUrl;
|
||||
BASE_IMG_URL + message.data.imageUrl;
|
||||
}
|
||||
}
|
||||
// WRITEIMG 接收图片数据中
|
||||
@ -541,7 +568,9 @@
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
this.deviceDetail = res.data;
|
||||
this.printInfo = res.data.printInfo;
|
||||
console.log("设备详情:", this.deviceDetail);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取设备详情失败:", error);
|
||||
@ -556,23 +585,23 @@
|
||||
// console.log('输入内容：', e.detail.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<!-- 临时样式 -->
|
||||
<style scoped>
|
||||
.operation_btn_icon {
|
||||
.operation_btn_icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.operation_btn_txt {
|
||||
.operation_btn_txt {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.device_operation_btn {
|
||||
.device_operation_btn {
|
||||
width: 320rpx;
|
||||
height: 68rpx;
|
||||
background: #ffffff;
|
||||
@ -580,16 +609,16 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device_operation_warp {
|
||||
.device_operation_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceN_input_tip {
|
||||
.deviceN_input_tip {
|
||||
margin: 24rpx 0 70rpx 0;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
@ -597,33 +626,33 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device_control_warp {
|
||||
.device_control_warp {
|
||||
width: 710rpx;
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceN_input_warp {
|
||||
.deviceN_input_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device_name_txt {
|
||||
.device_name_txt {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceN_input_area {
|
||||
.deviceN_input_area {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.clear_deviceN_warp {
|
||||
.clear_deviceN_warp {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
top: 0;
|
||||
@ -633,14 +662,14 @@
|
||||
z-index: 99;
|
||||
pointer-events: auto;
|
||||
width: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.clear_deviceN_icon {
|
||||
.clear_deviceN_icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceN_input {
|
||||
.deviceN_input {
|
||||
width: 419rpx;
|
||||
height: 74rpx;
|
||||
background: #ffffff;
|
||||
@ -649,108 +678,108 @@
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.label_text {
|
||||
.label_text {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label_text2 {
|
||||
.label_text2 {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.label_warp {
|
||||
.label_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.label_warp2 {
|
||||
.label_warp2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.label_icon {
|
||||
.label_icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item_content_model {
|
||||
.item_content_model {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item_content_line {
|
||||
.item_content_line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
.itemContent_line_warp {
|
||||
.itemContent_line_warp {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item_content_middel {
|
||||
.item_content_middel {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item_content_left {
|
||||
.item_content_left {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 5rpx;
|
||||
width: 222rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item_content_warp {
|
||||
.item_content_warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.statusItem_modal_warp {
|
||||
.statusItem_modal_warp {
|
||||
padding: 0 22rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.device_status_item {
|
||||
.device_status_item {
|
||||
width: 100%;
|
||||
height: 81rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.device_status_warp {
|
||||
.device_status_warp {
|
||||
width: 710rpx;
|
||||
background: #ffffff;
|
||||
margin-top: 23rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.modal_warp {
|
||||
.modal_warp {
|
||||
padding: 0 16rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device_active {
|
||||
.device_active {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select_device_item {
|
||||
.select_device_item {
|
||||
width: 329rpx;
|
||||
height: 56rpx;
|
||||
background: #e2edff;
|
||||
@ -762,46 +791,46 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.select_device_warp {
|
||||
.select_device_warp {
|
||||
width: 710rpx;
|
||||
height: 68rpx;
|
||||
background: #e2edff;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content_warp {
|
||||
.content_warp {
|
||||
padding: 16rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.content_area_warp {
|
||||
.content_area_warp {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.device_model {
|
||||
.device_model {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.img_video_warp {
|
||||
.img_video_warp {
|
||||
width: 100%;
|
||||
height: 281rpx;
|
||||
height: 321;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 20rpx;
|
||||
margin: 22rpx 0 32rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.back_button_icon {
|
||||
.back_button_icon {
|
||||
transform: rotate(180deg);
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.back_button_warp {
|
||||
.back_button_warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -810,9 +839,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contai_warp {
|
||||
.contai_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -821,20 +850,20 @@
|
||||
min-height: 100vh;
|
||||
background-color: #f1f6fc;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top_area_warp {
|
||||
.top_area_warp {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.top_status_area {
|
||||
.top_status_area {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top_nav_warp {
|
||||
.top_nav_warp {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
@ -847,5 +876,5 @@
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -51,13 +51,9 @@
|
||||
<image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
|
||||
</view> -->
|
||||
|
||||
<view class="function_area2_item" open-type="share" style="
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
">
|
||||
<view class="function_area2_item" style="border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx;">
|
||||
<view class="area2_item_left">
|
||||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
|
||||
</image>
|
||||
<image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png"></image>
|
||||
<view class="area2_item_txt">分享小程序</view>
|
||||
</view>
|
||||
<button open-type="share" class="area2_item_right_btn">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user