cleanMachineUniApp/pages/Charts/mainStatistics.vue

<template>
	<view>
		<view class="head">
			<view class="">
				<image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
			</view>
			<view class="pname">
				<font class="wenzi" style="color: #BDD6F3;font-size:28upx"> {{$t('mainStatistics.name')}}: {{pnameData}}</font>
			</view>
			<view class="company">
				<font style="color: #BDD6F3;font-size:28upx">{{$t('mainStatistics.company')}}</font>
			</view>
		</view>
		<view class="ri">
			<view class="riShell">
				<view class="riImg">
					<image style="width: 64upx;height: 64upx;padding-top: 20upx;" :src="$t('mainStatistics.dayImg')"></image>
				</view>
				<view class="riTitle">
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{dayRandomTimes}}</font>
					</view>
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalNum')}}:</font>
						<font style="color: #ED341F;">{{dayRegularTimes}}</font>
					</view>
				</view>
			</view>
			<view class="riqi">
				<view style="text-align:right" class="tody">
					<font style="color: #596D83;">{{today}}</font>
				</view>
				<view style="text-align:right" class="xingqi">
					<font style="color: #596D83;">{{week}}</font>
				</view>
			</view>
		</view>
		<view class="fourTitle">
			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.weekImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{weekRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalNum')}}:</font>
						<font style="color: #ED341F;">{{weekRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.monthImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{monthRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalNum')}}:</font>
						<font style="color: #ED341F;">{{monthRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.yearImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{yearRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalNum')}}:</font>
						<font style="color: #ED341F;">{{yearRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.allImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineTotalNum')}}:</font>
						<font style="color: #ED341F;">{{machineTotalNum}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineUseNum')}}:</font>
						<font style="color: #ED341F;">{{machineUseNum}}</font>
					</view>
				</view>
			</view>
		</view>

		<!-- 厕所实时使用情况 -->
		<view class="">
			<view class="titleFlag">
				<image class="img" src="../../static/img/red.png"></image>
				<font class="wenziT">红色正在使用</font>
				<image class="img" src="../../static/img/green.png"></image>
				<font class="wenziT">绿色空闲</font>
				<image class="img" src="../../static/img/yellow.png"></image>
				<font class="wenziT">黄色清洗中</font>
			</view>
			<view class="td-right">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
								<view class="uni-input">{{equipmentNameList[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="single-poster" v-for="(box,num) in boxs" :key="num">
				<view class="poster-wapper">
					<image v-show="box.status==0" src="../../static/img/green.png" mode="" class="image"></image> 
					<image v-show="box.status==1" src="../../static/img/red.png" mode="" class="image"></image> 
					<image v-show="box.status==2" src="../../static/img/yellow.png" mode="" class="image"></image> 
				</view>
				<view class="box-name">
					{{box.sn}}
				</view>
			</view>
		</view>


	<!-- 机器详表 -->
	<view class="">
		<view v-if="merchantList.length>1">
			<uni-collapse :accordion="true">
				<view class="titleFlag">
					<image class="img" src="../../static/img/red.png"></image>
					<font class="wenziT">红色代表机器报警</font>
					<image class="img" src="../../static/img/green.png"></image>
					<font class="wenziT">绿色代表机器正常</font>
				</view>
				<view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id">
					<uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
						<view style="padding: 20upx;background-color: aliceblue;">
							<view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
							<view v-if="merchant.equipmentList.length>0">
								<uni-collapse :show-animation="true">
									<view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
										<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
										<uni-collapse-item :title="getEquipmentTitle(equipment)">
											<view style="padding: 20upx;background-color: #F8F8F8;">
												<view class="swithBox" v-if="equipment.isSleep">
													<view class="swichFont">睡眠状态：机器已睡眠</view>
													<view class="switch">
														<switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
													</view>
												</view>
												<view class="swithBox" v-else>
													<view class="swichFont">睡眠状态：未睡眠</view>
													<view class="switch">
														<switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
													</view>
												</view>
												<view class="line1"></view>
												<view class="swithBox" v-if="equipment.eqeStatus==0">
													<view class="swichFont">关机：已关机</view>
													<view class="switch">
														<switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
													</view>
												</view>
												<view class="swithBox" v-else>
													<view class="swichFont">关机：未关机</view>
													<view class="switch">
														<switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
													</view>
												</view>
												<view class="line1"></view>
												<view><span>机器唯一码：</span><span>{{equipment.clientId}}</span></view>
												<!-- <view><span>所在地：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view> -->
												<view><span>清洁剂余量：</span><span>{{equipment.cleaner?equipment.cleaner:''}}</span></view>
												<view><span>消毒水余量：</span><span>{{equipment.disinfectant?equipment.disinfectant:''}}</span></view>
												<view><span>机器到期时间：</span><span>{{equipment.overdueDate?equipment.overdueDate:''}}</span></view>
												<view><span>机器剩余使用次数：</span><span>{{equipment.remaining?equipment.remaining:''}}</span></view>
												<view><span>机器温度：</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
												<view><span>室内湿度：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
												<view><span>室内温度：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
												<view v-if="equipment.hasTodayAlarm">
													<view><span>报警内容：</span></view>
													<view v-for="(alarm,index) in equipment.alarmList" :key="index">
														<view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
													</view>
												</view>
												<view v-else>
													<view><span>报警内容：</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
															{{equipment.alarmContent}}</span></view>
												</view>
											</view>
										</uni-collapse-item>
									</view>
								</uni-collapse>
							</view>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
		<view v-else>
			<uni-collapse :show-animation="true">
				<view class="titleFlag">
					<image class="img" src="../../static/img/red.png"></image>
					<font class="wenziT">{{$t('equipmentStatusList.red')}}</font>
					<image class="img" src="../../static/img/green.png"></image>
					<font class="wenziT">{{$t('equipmentStatusList.green')}}</font>
				</view>
				<view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
					<span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
					<uni-collapse-item :title="getEquipmentTitle(equipment)">
						<!-- 睡眠 -->
						<view style="padding: 20upx;background-color:#F8F8F8;">
							<view class="swithBox" v-if="equipment.isSleep">
								<view class="swichFont">{{$t('equipmentStatusList.sleep')}}</view>
								<view class="switch">
									<switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
								</view>
							</view>
							<view class="swithBox" v-else>
								<view class="swichFont">{{$t('equipmentStatusList.unsleep')}}</view>
								<view class="switch">
									<switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
								</view>
							</view>
							<view class="line1"></view>
							<!-- 关机 -->
							<view class="" v-if="globalUser.open==0">
								<view class="swithBox" v-if="equipment.eqeStatus==0">
									<view class="swichFont">{{$t('equipmentStatusList.off')}}</view>
									<view class="switch">
										<switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
									</view>
								</view>
								<view class="swithBox" v-else>
									<view class="swichFont">{{$t('equipmentStatusList.on')}}</view>
									<view class="switch">
										<switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
									</view>
								</view>
							</view>

							<view class="line1"></view>
							<!-- 远程开门 -->
							<view class="opendoor"><span>{{$t('equipmentStatusList.door')}}：</span>
								<view class="">
									<button type="primary" @click="openDoor(equipment.id)" class="button">
										<p class="p">{{$t('equipmentStatusList.open')}}</p>
									</button>
								</view>
							</view>

							<view><span>{{$t('equipmentStatusList.equipmentNo')}}：</span><span>{{equipment.clientId}}</span></view>
							<!-- <view><span>{{$t('equipmentStatusList.area')}}：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
								 -->
							<view><span>清洁剂余量：</span><span>{{equipment.cleaner?equipment.cleaner:''}}</span></view>
							<view><span>消毒水余量：</span><span>{{equipment.disinfectant?equipment.disinfectant:''}}</span></view>
							<view><span>机器到期时间：</span><span>{{equipment.overdueDate?equipment.overdueDate:''}}</span></view>
							<view><span>机器剩余使用次数：</span><span>{{equipment.remaining?equipment.remaining:''}}</span></view>
							<view><span>{{$t('equipmentStatusList.temperature')}}：</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
							<view><span>{{$t('equipmentStatusList.humidity')}}：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
							<view><span>{{$t('equipmentStatusList.equipmentTemperature')}}：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
							<view class="" v-if="equipment.hasTodayAlarm">
								<view><span>{{$t('equipmentStatusList.alarm')}}：</span></view>
								<view v-for="(alarm,index) in equipment.alarmList" :key="index">
									<view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
								</view>
							</view>
							<view class="" v-else>
								<view><span>{{$t('equipmentStatusList.alarm')}}：</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
										{{equipment.alarmContent}}</span></view>
							</view>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	// import uCharts from '@/components/u-charts/u-charts.js';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
		dateUtils
	} from '@/common/util.js';
	var _self;
	export default {
		name: 'mainStatistics',
		props: {
			equipmentId: '',
			adminId: '',
			pname: '',
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				machineTotalNum: 0,
				machineUseNum: 0,
				dayRandomTimes: 0,
				dayRegularTimes: 0,
				weekRandomTimes: 0,
				weekRegularTimes: 0,
				monthRandomTimes: 0,
				monthRegularTimes: 0,
				yearRandomTimes: 0,
				yearRegularTimes: 0,
				today: '',
				week: '',

				globalUser: {},
				merchantList: [{
					equipmentList: []
				}],
				index: 0,
				equipmentName: null,
				equipmentNameList: [],
				boxs: [],
				num:null,
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				},
				statusNormal: 'status-normal',
				statusError: 'status-error',
				sleepChecked: null,
				onffChecked: null,
				time: null,
				timeAll: {

				},
				// input: 0
			}
		},

		computed: {
			...mapState(['loginUser']),
			pnameData: {
				get() {
					return this.pname;
				}
			},
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('mainStatistics.title')
			});
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabs.tab1')
			});
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();

			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// this.input = this.input + 1;
			var test = uni.getStorageSync('test');
			var globalUser = uni.getStorageSync("globalUser");
			this.globalUser = globalUser;
			if (globalUser.toString().length > 1) {
				//判断是不是初次登陆
				if (test == 2) {
					this.init();
				}
			}
			var id = this.adminId;

			this.day();
			// this.equipmentStatus();
		},
		mounted() {
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// this.day();
			this.equipmentStatus();
		},
		methods: {
			...mapActions('chart', ['getStatistics', 'getMainStatistics', 'getMachineNum', 'getEquipmentListByUser']),
			async init() {
				if (!this.pname) {
					this.pname = this.loginUser.name;
				}
				_self = this;
				await this.getMainStatisticsData();
				await this.getEquipmentListData();
				//初次登陆跳转后，把test变成2
				uni.setStorageSync('test', '2');

			},
			day() {
				var date = new Date();
				// var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
				var daystr = dateUtils.formateDate(date, 'yyyy-MM-dd');
				this.today = daystr;
				// var str= '星期'+'日一二三四五六'.charAt(date.getDay());
				this.week = this.$t('mainStatistics.week' + date.getDay());

			},
			//改变机器
			changeEquipment: function(e) {
				this.index = e.target.value;
				var list = uni.getStorageSync("listName");
				this.getBoxs(list[e.target.value].id);
			},
			equipmentStatus() {
				var id = uni.getStorageSync("globalUser").id;
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/equipmentStatus',
					data: {
						"adminId": id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {

					},
				});
			},
			getBoxs(equipmentId) {
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/getBoxs',
					data: {
						"equipmentId": equipmentId
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						this.boxs = res.data.data;
					},
				});
			},
			getMainStatisticsData() {
				const param = {};
				if (this.adminId) { // 子组件，则拿传过来的参
					param['adminId'] = this.adminId;
				} else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
					param['adminId'] = this.loginUser['id'];
				}
				var globalUser = uni.getStorageSync("globalUser");
				if (globalUser.id != 1) {
					if (param.adminId == null || param.adminId == undefined) {
						param['adminId'] = globalUser.id;
					}
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				// console.log('getMainStatisticsData:{}', param);
				var adminId = param.adminId;
				var equipmentId = this.equipmentId;
				var serverurl = this.serverurl;
				var token = uni.getStorageSync("token");
				uni.request({
					url: serverurl + '/TEquipment/getMachineNum',
					data: {
						"adminId": adminId,
						"equipmentId": equipmentId
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						var list = res.data.data;
						this.machineTotalNum = list[0];
						this.machineUseNum = list[1];
					}
				});
				return this.getMainStatistics(param)
					.then(data => {
						for (let bean of data) {
							if (bean['categorie'] === 'day') {
								if (bean['randomTimes'] != null) {
									this.dayRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.dayRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'week') {
								if (bean['randomTimes'] != null) {
									this.weekRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.weekRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'month') {
								if (bean['randomTimes'] != null) {
									this.monthRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.monthRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'year') {
								if (bean['randomTimes'] != null) {
									this.yearRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.yearRegularTimes = bean['regularTimes'];
								}


							}
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			// 属性方法
			getMerchantTitle(merchant) {
				return merchant.name ? merchant.name : merchant.username;
			},
			getEquipmentTitle(equipment) {
				return equipment.name ? equipment.name : '暂无名称';
			},
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						this.merchantList = data;
						var listName = data[0].equipmentList;
						var equipmentNameList = [];
						for (var i = 0; i < listName.length; i++) {
							equipmentNameList.push(listName[i].name);
							if (i == 0) {
								this.getBoxs(listName[i].id);
							}

						}
						this.equipmentNameList = equipmentNameList;
						var times = new Map;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			OnOff(id, code) {
				var that = this;
				var ddd = this.timeAll.get(id);
				if (that.timeAll.get(id) != null) {
					var stamp = Date.parse(new Date());
					var t = (stamp - that.timeAll.get(id)) / 1000;
					if (t < 30) {
						var s = 30 - t;
						uni.showModal({
							title: that.$t('equipmentStatusList.onoff'),
							content: that.$t('equipmentStatusList.remainingtime') + s + "s",
							success: function(res) {
								that.getEquipmentListData();
							}
						});
						return;
					}
				}
				var code1 = code;
				if (code1 == 0) {
					uni.showModal({
						title: that.$t('equipmentStatusList.tip'),
						content: that.$t('equipmentStatusList.onoffTip'),
						success: function(res) {
							if (res.confirm) {
								var serverurl = that.serverurl;
								var code2 = code1;
								var equipmentId = id;
								var token = uni.getStorageSync("token");
								uni.request({
									url: serverurl + '/TEquipment/onOff',
									data: {
										"adminId": code2,
										"equipmentId": equipmentId
									},
									method: "POST",
									header: {
										'token': token
									},
									success: (res) => {
										var list = res.data.data;
										// that.input = 2;
										var timestamp = Date.parse(new Date());
										that.timeAll.set(id, timestamp);
										var oo = that.timeAll;
										// that.time = timestamp;
										that.getEquipmentListData();
										if (list == 'SUCCESS') {
											uni.showModal({
												title: that.$t('equipmentStatusList.guanji'),
												content: that.$t('equipmentStatusList.tishi'),
												success: function(res) {
													that.getEquipmentListData();
													setTimeout(function() {
														that.network(id);
													}, 7000);
												}
											})
										} else {
											uni.showModal({
												title: that.$t('equipmentStatusList.error'),
												content: that.$t('equipmentStatusList.guanjierror'),
												success: function(res) {
													that.onffChecked = true;
													that.getEquipmentListData();
												}
											})
										}

									}
								});
							} else if (res.cancel) {
								that.onffChecked = false;
								that.getEquipmentListData();
							}
						}
					});
				} else {
					var serverurl = that.serverurl;
					var code = code;
					var equipmentId = id;
					var token = uni.getStorageSync("token");
					uni.request({
						url: serverurl + '/TEquipment/onOff',
						data: {
							"adminId": code,
							"equipmentId": equipmentId
						},
						method: "POST",
						header: {
							'token': token
						},
						success: (res) => {
							// that.input = 2;
							var list = res.data.data;
							that.getEquipmentListData();
							var timestamp = Date.parse(new Date());
							that.timeAll.set(id, timestamp);
							var oo = that.timeAll;
							// that.time = timestamp;
							if (list == "SUCCESS") {
								uni.showModal({
									title: that.$t('equipmentStatusList.kaiji'),
									content: that.$t('equipmentStatusList.tishi'),
									success: function(res) {
										that.getEquipmentListData();
										setTimeout(function() {
											that.network(id);
										}, 7000);
									}
								})
							} else {
								uni.showModal({
									title: that.$t('equipmentStatusList.error'),
									content: that.$t('equipmentStatusList.kaijierror'),
									success: function(res) {
										that.onffChecked = false;
										that.getEquipmentListData();
									}
								})
							}

						}
					});
				}
			},
			network(id) {
				var token = uni.getStorageSync("token");
				var equipmentId = id;
				uni.request({
					url: this.serverurl + '/TEquipment/checkStatus',
					data: {
						"equipmentId": id
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						var data = res.data.data;
						if (data == 'fail') {
							uni.showToast({
								title: this.$t('equipmentStatusList.network'),
								icon: 'none',
								duration: 3000
							});
							this.getEquipmentListData();
						}
					}
				});
			},
			openDoor(id) {
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/openDoor',
					data: {
						"equipmentId": id
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						uni.showModal({
							title: this.$t('equipmentStatusList.open'),
							content: this.$t('equipmentStatusList.opensuccess'),
							success: function(res) {

							}
						})
					}
				});
			},
			change(id, code) {
				var that = this;
				var code1 = code;
				if (code1 == 1) {
					uni.showModal({
						title: that.$t('equipmentStatusList.tip'),
						content: that.$t('equipmentStatusList.sleepTip'),
						success: function(res) {
							if (res.confirm) {
								var serverurl = that.serverurl;
								var code2 = code1;
								var equipmentId = id;
								var token = uni.getStorageSync("token");
								uni.request({
									url: serverurl + '/TEquipment/sleep',
									data: {
										"adminId": code2,
										"equipmentId": equipmentId
									},
									method: "POST",
									header: {
										'token': token
									},
									success: (res) => {
										var list = res.data.data;
										that.getEquipmentListData();
									}
								});
							} else if (res.cancel) {
								that.sleepChecked = false;
								that.getEquipmentListData();
							}
						}
					});
				} else {
					var serverurl = that.serverurl;
					var code = code;
					var equipmentId = id;
					var token = uni.getStorageSync("token");
					uni.request({
						url: serverurl + '/TEquipment/sleep',
						data: {
							"adminId": code,
							"equipmentId": equipmentId
						},
						method: "POST",
						header: {
							'token': token
						},
						success: (res) => {
							var list = res.data.data;
							that.getEquipmentListData();
						}
					});
				}
			},
		}
	}
</script>
<style>
	page {
		/* background: #F2F2F2; */
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}

	.head {
		display: flex;
		flex-direction: row;
		background: #206DC3;
		width: 750upx;
		height: 180upx;
	}

	.company {
		width: 48%;
		text-align: right;
	}

	.pname {
		display: flex;
		flex-direction: row;
		width: 40%;
	}

	.userFlagimg {
		padding-left: 30upx;
		padding-top: 10upx;
		width: 26upx;
		height: 28upx;
	}

	.wenzi {
		padding-left: 5upx;
		/* text-align:right; */
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}

	.ri {
		width: 690upx;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 15upx;
		/* 上移 */
		transform: translateY(-90upx);
		text-align: center;
		margin: auto;
		display: flex;
		flex-direction: row;
		/* 阴影 */
		box-shadow: 0upx -1upx 20upx #D3D3D3;
		/* box-shadow:0px 0px  10px 5px #aaa; */
	}

	.riShell {
		display: flex;
		flex-direction: row;
		margin: auto;
	}

	.riTitle {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.riqi {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.fourTitle {
		width: 690upx;
		height: 294upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #FFFFFF;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		margin: auto;
		border-radius: 15upx;
		transform: translateY(-60upx);
	}

	.four {
		display: flex;
		flex-direction: row;
		margin: auto;
		width: 48%;
	}

	.fourImg {
		width: 54upx;
		height: 54upx;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.fontLeft {
		margin-right: 6upx;
	}

	/* 参数表 */
	.status-css {
		position: absolute;
		width: 30upx;
		height: 30upx;
		right: 86upx;
		top: 30upx;
		border-radius: 30upx;
		color: "#596D83";
		font-size: 12upx;
	}

	.status-error {
		background-color: #dd524d
	}

	.status-normal {
		background-color: #4cd964
	}

	.baojing {
		padding-left: 120upx;
	}

	.titleFlag {
		height: 56upx;
		background-color: #F8F8F8;
		color: #8C959F;
		font-size: 22upx;
		display: flex;
		flex-direction: row;
	}

	.opendoor {
		/* #ifdef H5 */

		/* #endif */
		padding-top: 10upx;
		padding-bottom: 10upx;
		/* text-align: center; */
		display: flex;
		flex-direction: row;
	}

	.button {
		/* #ifdef H5 */
		text-align: center;
		height: 50upx;
		weight: 20upx;
		/* #endif */
		padding-left: 15upx;
		/* padding-top: 2upx; */
	}

	.p {
		/* #ifdef H5 */
		font-size: 28upx;
		height: 50upx;
		weight: 20upx;
		transform: translateY(-14upx);
		/* text-align: center; */
		/* #endif */
		/* padding-bottom: 50upx; */
		text-align: center;
		padding-left: 13upx;
	}

	.img {
		padding-top: 20upx;
		padding-left: 30upx;
		width: 15upx;
		height: 15upx;
	}

	.wenziT {
		padding-top: 10upx;
		padding-left: 10upx;
	}

	.titlelist {
		color: #363D44;
		font-size: 16upx;
		font-family: "PingFang-SC-Medium";
	}

	.swithBox {
		display: flex;
		flex-direction: row;
		padding-bottom: 15upx;
		padding-top: 5upx;
	}

	.switch {
		width: 44upx;
		height: 22upx;
	}

	.swichFont {
		width: 85%;
		padding-top: 12upx;
	}

	.line1 {
		width: 100%;
		height: 3upx;
		background: #000000;
	}

	.single-poster {
		display: inline-block;
		margin-left: 20upx;
		padding-top: 10upx;
		text-align: center;
		/* height: 30upx; */
	}

	.poster-wapper {
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.image{
		height: 30upx;
		width: 30upx;
	}
	.box-name{
		/* width: 200upx; */
		/* margin-top: 10upx; */
		font-size: 22upx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>