liuning/gate-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

闸门智控小程序

Browse Source
This commit is contained in:
liuning
2025-07-05 17:29:10 +08:00
commit 819594d8b2
52 changed files with 25235 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packagePage/pages/ctrldevice/ctrldevice.vue
+952
View File
@@ -0,0 +1,952 @@
<template>
<view class="container">
<view class='tui-notice-board'>
<view class="tui-icon-bg">
<tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
</view>
<view class="tui-scorll-view" @tap='detail'>
<view class="tui-notice" :class="[animation?'tui-animation':'']">友情提示：只有在远程手动模式下才能进行远程控制！</view>
</view>
</view>
<tui-list-view>
<tui-list-cell>
<view class="tui-item-box" :lineLeft="false">
<view class="tui-msg-box">
<image :src="apiHost+'/miniapp/static/wsapp/nav2.png'" class="tui-msg-pic" mode="widthFix"></image>
<view class="tui-msg-item">
<view class="tui-msg-name">{{device_info.name}}</view>
<!-- <view class="tui-msg-content">{{device_info.addr}}</view> -->
<view class="tui-msg-content1">更新时间：{{device_info.created_at}}</view>
</view>
</view>
<view class="tui-msg-right" @tap="do_back">
<uni-tag text="返回" style="border:none;padding:20rpx 20rpx;"></uni-tag>
</view>
</view>
</tui-list-cell>
<view style="height:20rpx"></view>
</tui-list-view>
<!-- <view class="mygrid1">
<h4 style="margin-left:2%; color: #ff0000;font-size: 30rpx;float:left;margin-top: 10rpx;"></h4>
<tui-button style="float: right;margin-right:20rpx;" type="danger" plain shape="circle" width="110rpx" height="60rpx" :size="24" @click="do_refresh()">刷新</tui-button>
</view> -->
<view class="tui-order-tracking" style="background-color: #F5F6FA;padding-top:0;padding-left:40rpx;display:flex;align-items:center;flex-wrap:wrap;padding-bottom: 10rpx;">
<view class="mygrid" v-if="device_info.svg_type!=5">
<view class="sensor_data">{{device_info.ph_data}}</view>
<view class="mygrid-size">PH</view>
</view>
<view class="mygrid" v-if="device_info.svg_type!=5">
<view class="sensor_data">{{device_info.elec_conductivity_tds_data}}<span style="font-size: 24rpx;">mg/L</span></view>
<view class="mygrid-size">TDS</view>
</view>
<view class="mygrid" v-if="device_info.svg_type!=5">
<view class="sensor_data">{{device_info.ammonia_data}}<span style="font-size: 24rpx;">mg/L</span></view>
<view class="mygrid-size">氨氮</view>
</view>
<br />
<view class="mygrid" v-if="device_info.svg_type!=5">
<view class="sensor_data">{{device_info.level_data}}<span style="font-size: 24rpx;">cm</span></view>
<view class="mygrid-size">液位</view>
</view>
<view class="mygrid">
<view class="sensor_data">{{device_info.rainsnow}}</view>
<view class="mygrid-size">雨雪量</view>
</view>
<view class="mygrid">
<view class="sensor_data">{{device_info.rainfall_data}}<span style="font-size: 24rpx;">mm</span></view>
<view class="mygrid-size">降雨量</view>
</view>
</view>
<view class="tui-flex-box">
<tui-button v-if="device_info.control_status=='本地'" margin="0 0rpx 26rpx 0" type="primary" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
<tui-button v-else margin="0 0rpx 26rpx 0" type="gray" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
<tui-button v-if="device_info.control_status=='远程'" margin="0 20rpx 26rpx 0" type="primary" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
<tui-button v-else margin="0 20rpx 26rpx 0" type="gray" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
</view>
<view class="tui-order-header">
<view class="device_status_cycle">
<view>
<tui-badge :type="gate_status_type_func" class="tui-badge device_status">{{device_info.gate_status_big}}</tui-badge>
</view>
</view>
<view class="device_name">
<view class="tui-text device_name_text">
<text class="tui-bold">闸门</text>
</view>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门上升')" >上升</tui-button>
<tui-button v-else disabled type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门上升')" >上升</tui-button>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门下降')">下降</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门下降')">下降</tui-button>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('停止')">停止</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('停止')">停止</tui-button>
</view>
</view>
<view class="tui-order-header">
<view class="device_status_cycle">
<view>
<tui-badge :type="main_pump_status_type_func" class="tui-badge device_status"> {{device_info.main_pump_big}} </tui-badge>
</view>
</view>
<view class="device_name">
<view class="tui-text device_name_text">
<text class="tui-bold">主泵</text>
</view>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵启动')">启动</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵启动')">启动</tui-button>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵停止')">停止</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵停止')">停止</tui-button>
</view>
</view>
<view class="tui-order-header">
<view class="device_status_cycle">
<view>
<tui-badge :type="standby_pump_status_type_func" class="tui-badge device_status">{{device_info.standby_pump_big}}</tui-badge>
</view>
</view>
<view class="device_name">
<view class="tui-text device_name_text">
<text class="tui-bold">备泵</text>
</view>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵启动')">启动</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵启动')">启动</tui-button>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵停止')">停止</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵停止')">停止</tui-button>
</view>
</view>
<!-- <view class="tui-order-header">
<view class="device_status_cycle">
<view>
<tui-badge :type="control_status_type_func" class="tui-badge device_status">{{device_info.control_status}}</tui-badge>
</view>
</view>
<view class="device_name">
<view class="tui-text device_name_text">
<text class="tui-bold">控制</text>
</view>
</view>
<view class="device_action">
<tui-button type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
</view>
<view class="device_action">
<tui-button type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
</view>
</view> -->
<view class="tui-order-header">
<view class="device_status_cycle">
<view>
<tui-badge :type="alert_status_type_func" class="tui-badge device_status">{{device_info.alert_big}}</tui-badge>
</view>
</view>
<view class="device_name">
<view class="tui-text device_name_text">
<text class="tui-bold">消警</text>
</view>
</view>
<view class="device_action">
<tui-button v-if="device_info.control_status=='手动'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('工控机报警复位')">消除</tui-button>
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('工控机报警复位')">消除</tui-button>
</view>
</view>
</view>
</template>
<script>
import myapp from '@/common/js/myapp.js';
import mqtt from '@/utils/mqtt4.1.0.js';
import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
export default {
data() {
return {
apiHost: myapp.apiHost,
animation: false,
detail:[],
detailEnd:{},
item: {
name: '总览',
url: '/packagePage/pages/overview/overview',
img: "nav1.png",
img_start: 'icon_start.png',
img_stop: 'icon_stop.png',
img_ctrlright: 'icon_ctrlright.png',
img_ctrlleft: 'icon_ctrlleft.png',
width: 74,
height: 74
},
ws_ctrl:null,
ws_status:null,
device_id: 0,
device_info: {},
f_did: 1001,
// mqtt 相关部分
broker:{
host: 'mqtt.gpic.opmonitor.com',
wsport: '8083',
wssport:'443',
path: '/mqtt',
},
onTopic: 'gpic_d/1000',
onSub: 'gpic_d/1000',
Qos: 2,
sendMassage: '',
time:0,
receiveMessage: '',
client: null,
options: {
wsOptions: {},
protocolVersion: 5, //MQTT连接协议版本
clientId: '',
keepalive: 60,
clean: false,
username: '',
password: '',
reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
},
}
},
onLoad: function(option) {
console.error("onLoad");
setTimeout(() => {
this.animation = true
}, 600)
this.device_id = option.id
let user = myapp.checkLogin()
uni.setStorageSync('lastPagePath', '/packagePage/pages/ctrldevice/ctrldevice')
let that = this
// 获取f_did
myapp.request('/?c=overview&a=getDeviceFdid',function(res) {
that.f_did = res.data.data;
that.onTopic = 'gpic_d/'+res.data.data;
that.onSub = 'gpic_d/'+res.data.data;
// console.info(res.data.data);
that.connect();
},{device_id:that.device_id})
myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
that.device_info = res.data.data;
},{device_id:that.device_id})
//mqtt相关
let clientId = "wx_" + Math.random().toString(16).substr(2, 8);
that.options.clientId=clientId;
},
onShow: function() {
console.error("onShow");
console.error("onSHOW | websocket status ",myapp.websocket.socketOpen);
if(!myapp.websocket.socketOpen){
// ################# web socket 控制用的 ################
uni.connectSocket({
url: myapp.websocket.url
})
uni.onSocketOpen(function (res) {
console.log('CTRL WebSocket连接已打开！' + JSON.stringify(res))
myapp.websocket.socketOpen = true
myapp.websocket.send(myapp, 'connect')
for (let i = 0; i < myapp.websocket.socketMsgQueue.length; i++) {
uni.sendSocketMessage({data: myapp.websocket.socketMsgQueue[i]})
}
myapp.websocket.socketMsgQueue = []
})
uni.onSocketError(function (res) {
console.log('CTRL WebSocket连接打开失败，请检查！' + JSON.stringify(res));
// 页面重新加载一下
uni.redirectTo({
url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + this_device_id
})
})
uni.onSocketMessage(function (res) {
console.log('收到服务器内容：' + JSON.stringify(res))
uni.hideLoading()
// console.log(res.data==null)
if(JSON.stringify(res).indexOf('connect') == -1) {
myapp.showHint('指令发送完成')
}
})
let this_device_id = this.device_id
uni.onSocketClose(function (res) {
console.log('CTRL WebSocket 已关闭--- 2！' + JSON.stringify(res))
uni.hideLoading();
uni.connectSocket({
url: myapp.websocket.url
});
// 坑，每次链接完成，页面就自动刷新
// console.info('=======')
// uni.redirectTo({
// url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + this_device_id
// })
})
}
},
onHide: function() {
console.error("onHide");
if (myapp.websocket.socketOpen) {
uni.closeSocket()
myapp.websocket.socketOpen = false
}
this.unconnect();
},
onUnload:function(){
console.error("onHide");
if (myapp.websocket.socketOpen) {
uni.closeSocket()
myapp.websocket.socketOpen = false
}
this.unconnect();
},
methods: {
// bigtran to modify
ctrlCmd: function(name) {
uni.showLoading({
title: '命令发送中',
mask: true
})
let that = this
that.connect();
console.error("ctrlCMD | websocket status ",myapp.websocket.socketOpen);
if(!myapp.websocket.socketOpen){
// ################# web socket 控制用的 ################
uni.connectSocket({
url: myapp.websocket.url
})
}
if(name == '停止')
{
myapp.websocket.send(myapp, 'control', '闸门停止上升', '000100000006FF0500240000', this.f_did)
myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
}else if(name == '闸门上升')
{
myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
myapp.websocket.send(myapp, 'control', '闸门上升', '000100000006FF050024FF00', this.f_did)
}else if(name == '闸门下降')
{
myapp.websocket.send(myapp, 'control', '闸门停止上升', '000100000006FF0500240000', this.f_did)
myapp.websocket.send(myapp, 'control', '闸门下降', '000100000006FF050025FF00', this.f_did)
}else if(name == '工控机报警复位')
{
myapp.websocket.send(myapp, 'control', '工控机报警复位', '000100000006FF0500270000', this.f_did)
}else if(name == 'M130设置为本地自动')
{
myapp.websocket.send(myapp, 'control', 'M130设置为本地自动', '000100000006FF0500820000', this.f_did)
}else if(name == 'M130设置为远程手动')
{
myapp.websocket.send(myapp, 'control', 'M130设置为远程手动', '000100000006FF050082FF00', this.f_did)
}else if(name == '主污泵启动')
{
myapp.websocket.send(myapp, 'control', '主污泵启动', '000100000006FF05001EFF00', this.f_did)
}else if(name == '主污泵停止')
{
myapp.websocket.send(myapp, 'control', '主污泵停止', '000100000006FF05001E0000', this.f_did)
}
else
{
myapp.websocket.send(myapp, 'control', name, myapp.websocket.cmd[name], this.f_did)
}
// console.info('=======')
// uni.redirectTo({
// url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + that.device_id
// })
// 更新数据
// setTimeout(function() {
// myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
// that.device_info = res.data.data
// console.info(res.data.data.main_sewage_pump)
// },{device_id:that.device_id})
// }, 4000);
},
do_back: function() {
this.unconnect();
uni.redirectTo({
url: '/packagePage/pages/ctrllist/ctrllist'
})
},
do_refresh: function() {
let that = this
myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
that.device_info = res.data.data
},{device_id:that.device_id})
},
// mqtt 相关部分 @bigtran
connect: function() {
var hosts = '',
// #ifdef APP-PLUS
hosts = 'wx://' + this.broker.host + ':8083/mqtt';
// #endif
// #ifdef H5
hosts = 'wss://' + this.broker.host + '/mqtt';
//#endif
// #ifdef MP-WEIXIN
// wx仅仅可以使用体验版
hosts = 'wxs://' + this.broker.host + '/mqtt';
// #endif
if (this.client == null || this.client.connented == false) {
this.client = mqtt.connect(
hosts,
this.options
);
this.client.on('connect', () => {
console.log('mqtt client ||| 连接成功 1')
this.subscribe()
});
this.client.on('message', (topic, message) => {
var currentDate = new Date();
var date = new Date();
var hours = date.getHours().toString().padStart(2, '0'); // 获取小时，并使用padStart补齐两位
var minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟，并使用padStart补齐两位
var seconds = date.getSeconds().toString().padStart(2, '0'); // 获取秒，并使用padStart补齐两位
var formattedTime = hours + ':' + minutes + ':' + seconds;
this.device_info.created_at=formattedTime;
console.log(formattedTime, topic," message arrived...");
// console.log(topic,message.toString());
this.receiveMessage = message
if(message.toString().length>10)
{
this.device_info.alert_big = JSON.parse(message.toString()).rbil==true?"预警":"正常";
this.device_info.main_pump_big = JSON.parse(message.toString()).mpril==true?"启":"停";
this.device_info.standby_pump_big = JSON.parse(message.toString()).spril==true?"启":"停";
this.device_info.control_status = JSON.parse(message.toString()).m130==true?"远程":"本地";
var gate_up_status_liuning = JSON.parse(message.toString()).guil==1?"上升":"停止";
var gate_down_status_liuning = JSON.parse(message.toString()).gdil==1?"下降":"停止";
if(gate_up_status_liuning=="上升"){
this.device_info.gate_status_big = "升";
}else if(gate_down_status_liuning=="下降"){
this.device_info.gate_status_big = "降";
}
if(JSON.parse(message.toString()).gul==0 && JSON.parse(message.toString()).gll==1 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
this.device_info.gate_status_big = "开";
}else if(JSON.parse(message.toString()).gul==1 && JSON.parse(message.toString()).gll==0 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
this.device_info.gate_status_big = "关";
}else if(gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
this.device_info.gate_status_big = "半开";
}
this.device_info.level_data = parseFloat(JSON.parse(message.toString()).llv).toFixed(2);
this.device_info.ph_data = parseFloat(JSON.parse(message.toString()).phv).toFixed(2);
this.device_info.rainfall_data = parseFloat(JSON.parse(message.toString()).rfv).toFixed(2);
this.device_info.ammonia_data = parseFloat(JSON.parse(message.toString()).nh4v).toFixed(2);
this.device_info.rainsnow = parseFloat(JSON.parse(message.toString()).rsv).toFixed(2);
this.device_info.elec_conductivity_tds_data = parseFloat(JSON.parse(message.toString()).tds).toFixed(2);
}
// console.info(this.device_info.control_status)
// console.log(JSON.parse(message.toString()).rbil," | ",JSON.parse(message.toString()).mpril," | ",JSON.parse(message.toString()).spril," | ",JSON.parse(message.toString()).guil," | ",JSON.parse(message.toString()).gdil)
// console.log(this.device_info.gate_status_big," | ",this.device_info.main_pump_big," | ",this.device_info.standby_pump_big," | ",this.device_info.alert_big)
});
}
this.client.on('reconnect', error => {
console.log('mqtt client ||| 正在重连 2')
});
this.client.on('error', error => {
console.log('mqtt client ||| 连接失败 3')
});
},
subscribe: function() {
// 判断是否已成功连接
if (!this.client || !this.client.connected) {
console.log('mqtt client ||| 未连接 4')
return;
}
this.client.subscribe(this.onTopic, {
qos: this.Qos
}, error => {
if (!error) {
console.log('mqtt client ||| 订阅成功 5');
}
});
},
publish: function() {
// 判断是否已成功连接
if (!this.client || !this.client.connected) {
console.log('mqtt client ||| 未连接 6')
return;
}
if (this.sendMassage != '') {
// 定义JSON对象
const messageq = {
code: 200,
msg: 'cmd_name',
data:'cmd_data'
}
// 将JSON对象转换为JSON字符串
const message1 = JSON.stringify(messageq)
this.client.publish(this.onSub,message1, error => {
console.log(error || '消息发布成功');
console.log('mqtt client ||| 消息发布成功 7')
});
} else {
console.log('mqtt client ||| 发布消息为空 8')
}
},
unsubscribe: function() {
this.client.unsubscribe(
this.onTopic,
err => {
console.log(err || 'mqtt client ||| 取消订阅成功 9');
}
);
},
unconnect: function() {
if (!this.client || !this.client.connected) {
console.log('mqtt client ||| 未连接 10')
return;
}
this.unsubscribe();
this.client.end();
this.client = null;
console.log('mqtt client ||| 成功断开连接 11');
},
},
computed:{
gate_status_type_func(){
var $class;
if (this.device_info.gate_status_big=="升" || this.device_info.gate_status_big=="降")
{
$class="green";
}else if(this.device_info.gate_status_big=="半开" || this.device_info.gate_status_big=="开" || this.device_info.gate_status_big=="关"){
$class="primary";
}
return $class;
},
main_pump_status_type_func(){
var $class;
if (this.device_info.main_pump_big=="启")
{
$class="green";
}else if(this.device_info.main_pump_big=="停"){
$class="gray";
}
return $class;
},
standby_pump_status_type_func(){
var $class;
if (this.device_info.standby_pump_big=="启")
{
$class="green";
}else if(this.device_info.standby_pump_big=="停"){
$class="gray";
}
return $class;
},
alert_status_type_func(){
var $class;
if (this.device_info.alert_big=="预警")
{
$class="danger";
}else if(this.device_info.alert_big=="正常"){
$class="gray";
}else{
$class="gray";
}
return $class;
},
control_status_type_func(){
var $class;
if (this.device_info.control_status=="远程")
{
$class="primary";
}else if(this.device_info.control_status=="手动"){
$class="primary";
}else{
$class="gray";
}
return $class;
}
}
}
</script>
<style>
page {
background-color: #F5F6FA;
}
.mygrid {
display:inline-block;
border:1px solid #E5E5E5;
width:200rpx;
margin:10rpx;
background-color:#FFF;
text-align:center;
padding-top:20rpx;
padding-bottom:20rpx;
}
.mygrid1 {
display:inline-block;
border:1px solid #E5E5E5;
width:85%;
margin-left:45rpx;
background-color:#FFF;
text-align:left;
padding-top:20rpx;
padding-bottom:20rpx;
}
.tui-order-header {
padding: 40rpx 25rpx 0rpx 36rpx;
/* box-sizing: border-box; */
background: #fff;
margin-bottom: 10rpx;
height:150rpx;
}
.tui-text {
font-size: 28rpx;
color: #333;
padding: 4rpx;
position: relative;
}
.tui-bold {
font-weight: bold;
}
.tui-node {
height: 24rpx;
width: 24rpx;
border-radius: 50%;
background-color: #5C5EC3;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
margin-top: 0rpx;
}
.tui-order-tracking {
padding: 30rpx 30rpx 30rpx 60rpx;
background: #fff;
box-sizing: border-box;
}
.tui-time-axis {
border-left: 3rpx solid #5C5EC3;
padding-top:0;
padding-bottom:10rpx;
margin-bottom: 0;
}
.mytimeaxis, .mytimeaxis .tui-time-axis {
border-left: none;
}
.tui-order-title {
position: relative;
top:-9rpx;
padding-bottom: 12rpx;
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.tui-order-desc {
padding-bottom: 12rpx;
font-size: 28rpx;
color: #333;
}
.tui-ptop {
display: flex;
justify-content: flex-start;
line-height: 28rpx;
}
.tui-order-time {
font-size: 24rpx;
font-weight: bold;
display:none;
}
.tui-gray {
color: #848484 !important;
}
.tui-light-gray {
color: #888 !important;
}
.textleft, .textright {
color: #949494;
font-size: 20rpx;
margin-bottom: 20rpx;
}
.textleft {
float:left;
}
.textright {
float:right;
}
.textleftright {
border-top:3px solid #F5F6FA;
}
.tui-default {
padding: 30rpx 10rpx 40rpx 10rpx;
}
.tui-item-box {
width: 100%;
display: flex;
align-items: center;
/* padding-bottom: 20rpx; */
}
.tui-msg-box {
display: flex;
align-items: center;
}
.tui-msg-item {
max-width: 500rpx;
min-height: 80rpx;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tui-msg-pic {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: block;
margin-right: 24rpx;
flex-shrink: 0;
}
.tui-msg-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 34rpx;
line-height: 1;
color: #262b3a;
}
.tui-msg-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 28rpx;
line-height: 1;
color: #9397a4;
padding-top: 15rpx;
}
.tui-msg-content1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 26rpx;
line-height: 1;
color: #ff0000;
padding-top: 15rpx;
font-weight: 600;
}
.tui-msg-right {
max-width: 180rpx;
height: 88rpx;
margin-left: auto;
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.uni-tag--primary {
background-color:#ADDEFF !important;
border:none !important;
color:#000 !important;
}
.uni-tag--success {
background-color:#ADFFB5 !important;
border:none !important;
color:#000 !important;
}
.tui-grid-icon {
width: 100%;
height: 74rpx;
display: flex;
align-items: center;
justify-content: center;
}
.tui-grid-label {
margin-top: 0rpx;
display: block;
text-align: center;
font-weight: 400;
color: #333;
font-size: 28rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uni-tag--primary {
background-color:#02BC85 !important;
border:none !important;
color:#000 !important;
}
.uni-tag--success {
background-color:#F00 !important;
border:none !important;
color:#000 !important;
}
.mygrid-size {
font-size: 12px;
}
.tui-flex-box {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: 45rpx;
}
.tui-notice-board {
width: 100%;
padding-right: 30rpx;
box-sizing: border-box;
font-size: 28rpx;
height: 60rpx;
background: #fff8d5;
display: flex;
align-items: center;
/* position: fixed; */
top: 0;
/* #ifdef H5 */
top: 44px;
/* #endif */
z-index: 999;
}
.tui-icon-bg {
background: #fff8d5;
padding-left: 30rpx;
position: relative;
z-index: 10;
}
.tui-icon-class {
margin-right: 12rpx;
}
.tui-scorll-view {
flex: 1;
line-height: 1;
white-space: nowrap;
overflow: hidden;
color: #f54f46;
}
.tui-notice {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(100%, 0, 0);
}
.tui-animation {
-webkit-animation: tui-rolling 12s linear infinite;
animation: tui-rolling 12s linear infinite;
}
@-webkit-keyframes tui-rolling {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-170%, 0, 0);
}
}
@keyframes tui-rolling {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-170%, 0, 0);
}
}
.device_status{position:relative !important;top:0px !important;}
.device_status_cycle{display:inline-block;margin-right:20rpx;}
.device_name{display:inline-block;margin-right:20rpx;}
.device_name_text{display:inline-block;margin-left: 10rpx;}
.device_action{display:inline-block;margin:auto 15rpx;}
.ctrl_btn{display: inline-block;float:left; top: 20rpx;}
.sensor_data{color:#5C5EC3;font-weight:bold;}
.sensor_data span{font-weight: normal;}
</style>