<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>
