shenzeeUniApp/pages/User/equipmentStatusList.vue

<!-- 机器状态页面 -->
<template>
	<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: antiquewhite;">
											<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.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}}
															<button v-if="alarm.isEliminate==1" style="color:#BEBEBE;"
																@click="eliminate(alarm.id)" class="eliminateButton">
																<p class="p">已消除</p>
															</button>
															<button v-if="alarm.isEliminate!=1" type="primary"
																@click="eliminate(alarm.id)" class="eliminateButton">
																<p class="p">消除</p>
															</button>
														</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="search">
				<view class="search-title">
					<picker @change="changeSearch" :value="index" :range="searchList">
						<view class="uni-input">{{searchList[index]}}</view>
					</picker>
					<!-- {{$t('equipmentStatusList.equipmentClientID')}} -->
				</view>
				<view class="search-input">
					<input v-if="searchList[index] === $t('equipmentStatusList.deviceName')" type="text" :placeholder="$t('equipmentStatusList.deviceNamePlaceholder')" v-model="searchDeviceName" />
					<input v-else type="text" :placeholder="$t('equipmentStatusList.devicePlaceholder')" v-model="searchClientId" />
				</view>
				<view class="search-button">
					<button type="primary" size="mini" class="" @click="search()">
						<p class="">{{$t('equipmentStatusList.search')}}</P>
					</button>
				</view>
			</view>
			<view class="line"></view>
			<view class="titlelist" style="position: relative;" v-for="(equipment, index) in 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: antiquewhite;">
						<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,index)" />
							</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,index)" />
							</view>
						</view>
						<view class="line1"></view>
						<view class="swithBox" v-if="equipment.isSleep">
							<view class="swichFont2">{{$t('equipmentStatusList.sleepDesc')}}：</view>
							<input v-if="descShow" class="swichFont3" :value=equipment.sleepDesc @input="getValue" 
							style="background: #fff" />
							<span v-else class="swichFont4">{{equipment.sleepDesc==null?$t('equipmentStatusList.confirm'):equipment.sleepDesc}}</span>
							<view v-if="editBtn" class="switch3">
								<button type="primary" @click="toggleReadOnly" class="button">
									<p class="p">{{$t('equipmentStatusList.edit')}}</p>
								</button>
							</view>
							<view v-else class="switch2">
								<button type="primary" @click="confirmDesc(equipment.sleepDesc,equipment.id)" class="button">
									<p class="p">{{$t('equipmentStatusList.confirm')}}</p>
								</button>
								<button style="color:#BEBEBE;" @click="cancelDesc" class="button">
									<p class="p">{{$t('equipmentStatusList.cancel')}}</p>
								</button>
							</view>
						</view>
						<view v-if="equipment.isSleep" class="line1"></view>
						<!-- 一键重启 -->
						<view class="opendoor"><span>{{$t('equipmentStatusList.reboot')}}：</span>
							<view class="">
								<button type="primary" @click="reboot(equipment.id)" class="button">
									<p class="p">{{$t('equipmentStatusList.reset')}}</p>
								</button>
							</view>
						</view>
						<view class="line1"></view>
						<!-- 关机 -->
						<view class="" v-if="globalUser.open==0">
							<!-- 已关机 -->
							<view class="swithBox" v-if="equipment.eqeStatus==0">
								<view class="swichFont1">{{$t('equipmentStatusList.off')}}</view>
								<view class="switch2">
									<!-- <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" /> -->
									<button style="color:#BEBEBE;" @click="OnOff(equipment.id,1)" class="button">
										<p class="p">{{$t('equipmentStatusList.kaiqi')}}</p>
									</button>
									<button type="primary" @click="OnOff(equipment.id,0)" class="button">
										<p class="p">{{$t('equipmentStatusList.guanbi')}}</p>
									</button>
								</view>
							</view>
							<!-- 已开机 -->
							<view class="swithBox" v-else>
								<view class="swichFont1">{{$t('equipmentStatusList.on')}}</view>
								<view class="switch2">
									<!-- <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" /> -->
									<button type="primary" @click="OnOff(equipment.id,1)" class="button">
										<p class="p">{{$t('equipmentStatusList.kaiqi')}}</p>
									</button>
									<button style="color:#BEBEBE;" @click="OnOff(equipment.id,0)" class="button">
										<p class="p">{{$t('equipmentStatusList.guanbi')}}</p>
									</button>
								</view>
							</view>
						</view>
						<view class="line1"></view>
						<!-- 远程开门 -->
						<!-- 类型，0：外门，1：内门,状态：0：关闭，1：开启 -->
						<!-- 外门 -->
						<view class="" v-if="equipment.equimentType=='MG320'||equipment.equimentType=='MG330'">
						<view class="opendoor"><span>{{$t('equipmentStatusList.outDoor')}}：{{equipment.outDoor==1?$t('equipmentStatusList.openStatus'):$t('equipmentStatusList.closeStatus')}}</span>
							<view class="switch1">
								<button type="primary" @click="updateEquipment(equipment.id,0,1)" class="button">
									<p class="p">{{$t('equipmentStatusList.open')}}</p>
								</button>
								<button type="primary" @click="updateEquipment(equipment.id,0,0)" class="button">
									<p class="p">{{$t('equipmentStatusList.close')}}</p>
								</button>
							</view>
						</view>
						<view class="line1"></view>
						<!-- 内门 -->
						<view class="opendoor"><span>{{$t('equipmentStatusList.inDoor')}}：{{equipment.inDoor==1?$t('equipmentStatusList.openStatus'):$t('equipmentStatusList.closeStatus')}}</span>
							<view class="switch1">
								<button type="primary" @click="updateEquipment(equipment.id,1,1)" class="button">
									<p class="p">{{$t('equipmentStatusList.open')}}</p>
								</button>
								<button type="primary" @click="updateEquipment(equipment.id,1,0)" class="button">
									<p class="p">{{$t('equipmentStatusList.close')}}</p>
								</button>
							</view>
						</view>
						<view class="line1"></view>
						</view>
						<!-- 一键重启 -->
						<!-- <view class="opendoor"><span>{{$t('equipmentStatusList.reboot')}}：</span>
							<view class="">
								<button type="primary" @click="reboot(equipment.id)" class="button">
									<p class="p">{{$t('equipmentStatusList.reset')}}</p>
								</button>
							</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 class="opendoor"><span>{{$t('equipmentStatusList.gps')}}：</span>
							<view class="">
								<button type="primary"
									@click="lookMap(equipment.id,equipment.longitude,equipment.latitude)"
									class="button">
									<p class="p">{{$t('equipmentStatusList.look')}}</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>{{$t('equipmentStatusList.temperature')}}：</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}°C</span>
						</view>
						<view>
							<span>{{$t('equipmentStatusList.humidity')}}：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}%RH</span>
						</view>
						<view>
							<span>{{$t('equipmentStatusList.equipmentTemperature')}}：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}°C</span>
						</view>
						<view><span>plcVersion：</span><span>{{equipment.plcVersion}}</span></view>
						<!-- 物料 -->
						<view v-show="equipment.isMaterialUse==1">
							<span>{{$t('equipmentStatusList.whiteSugar')}}：</span><span>{{equipment.whiteSugar?equipment.whiteSugar:''}}%
								-- </span>
							<span>{{$t('equipmentStatusList.redSugar')}}：</span><span>{{equipment.redSugar?equipment.redSugar:''}}%
								-- </span>
							<span>{{$t('equipmentStatusList.yellowSugar')}}：</span><span>{{equipment.yellowSugar?equipment.yellowSugar:''}}%
								-- </span>
							<span>{{$t('equipmentStatusList.blueSugar')}}：</span><span>{{equipment.blueSugar?equipment.blueSugar:''}}%
							</span>
						</view>
						<view v-show="equipment.isMaterialUse==1">
							<span>{{$t('equipmentStatusList.stick')}}:</span><span>{{equipment.stick?equipment.stick:''}}%
							</span></view>
						<view v-show="equipment.isMaterialUse==1">
							<span>{{$t('equipmentStatusList.water')}}:</span><span>{{equipment.water?equipment.water:''}}%
								-- </span>
							<span>{{$t('equipmentStatusList.wasteWater')}}:</span><span>{{equipment.wasteWater?equipment.wasteWater:''}}%</span>
						</view>
						<view class="opendoor" v-show="equipment.isMaterialUse==1"><span>{{$t('equipmentStatusList.buliao')}}：</span>
							<view class="">
								<button type="primary" @click="buliao(equipment.id)" class="button">
									<p class="p">{{$t('equipmentStatusList.buliaoT')}}</p>
								</button>
							</view>
						</view>
						<view>
							<span>{{$t('equipmentStatusList.refreshTime')}}:</span><span>{{equipment.lastUpdateTime}}</span>
						</view>
						<view>
							<span>{{$t('equipmentStatusList.volume')}}:</span><span>{{equipment.volume?equipment.volume:''}}</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}}
										<button v-if="alarm.isEliminate==1" style="color:#BEBEBE;"
											@click="eliminate(alarm.id)" class="eliminateButton">
											<p class="p">{{$t('equipmentStatusList.yixiaochu')}}</p>
										</button>
										<button v-if="alarm.isEliminate!=1" type="primary" @click="eliminate(alarm.id)"
											class="eliminateButton">
											<p class="p">{{$t('equipmentStatusList.xiaochu')}}</p>
										</button>
									</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>
			<view v-if="btnShow" class="button-container">
				<button v-if="upBtn" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
				<button v-if="nextBtn" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
			</view>
		</uni-collapse>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	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';
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
		},
		data() {
			return {
				globalUser: {},
				merchantList: [{
					equipmentList: []
				}],
				equipmentList: [],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				},
				statusNormal: 'status-normal',
				statusError: 'status-error',
				sleepChecked: null,
				onffChecked: null,
				time: null,
				timeAll: {

				},
				input: 0,
				isReadOnly: true,
				editBtn:true,
				sleepDesc:false,
				descShow:false,
				btnShow:false, // 按钮显示
				upBtn:false, // 上一页按钮
				nextBtn:true, // 下一页按钮
				equipmentTotal:0, // 设备总数
				isLoading: false, //是否加载中
				searchList:[this.$t('equipmentStatusList.deviceName'),this.$t('equipmentStatusList.equipmentClientID')],
				index: 0,
				searchClientId: null,
				searchDeviceName: null,
				firstShow: true, // 添加一个标志变量
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onPullDownRefresh() {
			this.index = 0;
			this.searchClientId = null;
			this.searchDeviceName = null;
			this.globalUser.deviceName = null;
			this.globalUser.clientId = null;
			this.globalUser.offset = 0;
			this.globalUser.limit = 20;
			this.getEquipmentListData();
		},
		onShow() {
			if (this.firstShow) {
				this.input = this.input + 1;
				this.globalUser = uni.getStorageSync("globalUser");
				this.globalUser.offset = 0;
				this.globalUser.limit = 20;
				this.searchClientId = null;
				this.searchDeviceName = null;
				this.globalUser.deviceName = null;
				this.globalUser.clientId = null;
				uni.setNavigationBarTitle({
					title: this.$t('equipmentStatusList.title')
				});
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabs.tab4')
				});
				var token = uni.getStorageSync("token");
				if (token.length > 1) {
					this.getEquipmentListData();
					this.upBtn = false;
					this.nextBtn = true;
				} else {
					uni.reLaunch({
						url: '../Login/Login',
					});
				}
				this.firstShow = false;
			}

		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			getMerchantTitle(merchant) {
				return merchant.name ? merchant.name : merchant.username;
			},
			getEquipmentTitle(equipment) {
				return equipment.name ? equipment.name : equipment.clientId;
			},
			getEquipmentListData() {
				if(this.globalUser.id == 1) {
					uni.showToast({
						icon: 'none',
						title:'暂时无法查看数据',
					});
					return;
				} else {
					this.isLoading = true;
					this.getEquipmentListByUser(this.globalUser)
						.then(data => {
							this.merchantList = data;
							// this.equipmentList.push(...data[0].equipmentList);
							this.equipmentList = data[0].equipmentList;
							this.equipmentTotal = this.merchantList[0].equipmentTotal;
							if(this.equipmentTotal > this.globalUser.limit && this.globalUser.limit != null) {
								this.btnShow = true;
							} else {
								this.btnShow = false;
							}
							console.log(this.equipmentList);
							this.isLoading = false;
							var listName = data[0].equipmentList;
							var times = new Map;
							if (this.input == 1) {
								for (var i = 0; i < listName.length; i++) {
									var k = listName[i].id;
									times.set(k, null);
								}
								this.timeAll = times;
							}
							var listId = data[0].id;
							if (listId != null && listId != '1') {
								uni.setStorageSync("listName", listName);
							}
							uni.stopPullDownRefresh();
						}, _ => void uni.stopPullDownRefresh());
				}
			},
			// 更改按钮显示状态
			changeBtnshow() {
				if(this.globalUser.offset != 0) {
					this.upBtn = true;
				} else {
					this.upBtn = false;
				}
				if(this.globalUser.offset + this.globalUser.limit < this.equipmentTotal) {
					this.nextBtn = true;
				} else {
					this.nextBtn = false;
				}
			},
			// 点击上一页
			previousPage() {
				this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
			// 点击下一页
			nextPage() {
				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
			
			getValue: function(event) {
				// 绕过v-model 获取input输入框的值
				var value = event.target.value;
				this.sleepDesc = value;
			},
			
			// 点击更改
			toggleReadOnly() {
				this.descShow = true;
				this.editBtn = false;
			},
			
			// 取消更改
			cancelDesc() {
				this.descShow = false;
				this.editBtn = true;
			},
			
			// 选择搜索类型
			changeSearch: function(e) {
			    // console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
				this.searchClientId = null;
				this.searchDeviceName = null;
				this.globalUser.deviceName = null;
				this.globalUser.clientId = null;
			},
			
			// 点击搜索
			search() {
				if(this.index === 1) {
					if(this.searchClientId === null || this.searchClientId === '') {
						uni.showToast({
							title: this.$t('equipmentStatusList.devicePlaceholder'),
							icon: "none",
							duration: 2000
						});
						return;
						// this.globalUser.offset = 0;
						// this.globalUser.limit = 20;
					} else {
						this.globalUser.offset = null;
						this.globalUser.limit = null;
						console.log(this.globalUser)
						this.globalUser.clientId = this.searchClientId;
						this.getEquipmentListData();
					}
				} else {
					if(this.searchDeviceName === null || this.searchDeviceName === '') {
						uni.showToast({
							title: this.$t('equipmentStatusList.deviceNamePlaceholder'),
							icon: "none",
							duration: 2000
						});
						return;
					} else {
						this.globalUser.offset = null;
						this.globalUser.limit = null;
						this.globalUser.deviceName = this.searchDeviceName;
						this.getEquipmentListData();
						console.log(this.globalUser)
					}
				}
			},
			
			// 更改睡眠描述
			confirmDesc(sleepDesc,id) {
				var that = this;
				uni.showModal({
					title: that.$t('equipmentStatusList.tip'),
					content: that.$t('equipmentStatusList.sleepDescTip'),
					success: function(res) {
						if (res.confirm) {
							var serverurl = that.serverurl;
							var sleepDescNew = that.sleepDesc;
							if(sleepDescNew == null||sleepDescNew == '') {
								if(sleepDesc!=null) {
									sleepDescNew = sleepDesc;
								} else {
									sleepDescNew = that.$t('equipmentStatusList.suspendBusiness');
								}
							}
							var token = uni.getStorageSync("token");
							uni.request({
								url: serverurl + '/TEquipmentDesc/updateSleepDesc',
								data: {
									"sleepDesc": sleepDescNew,
									"equipmentId": id
								},
								method: "POST",
								header: {
									'token': token
								},
								success: (res) => {
									console.log(res.data.code);
									if (res.data.code) {
										uni.showModal({
											title: that.$t('equipmentStatusList.tip'),
											content: that.$t('equipmentStatusList.modifiedSuccessfully'),
										})
										that.descShow = false;
										that.editBtn = true;
										that.getEquipmentListData();
									} else {
										uni.showModal({
											title: that.$t('equipmentStatusList.tip'),
											content: that.$t('equipmentStatusList.modificationFailure'),
										})
										that.descShow = false;
										that.editBtn = true;
										that.getEquipmentListData();
									}
								}
							});
						}
					}
				})
			},
			
			//查看经纬度
			lookMap(id, longitude, latitude) {
				var item = {};
				item["id"] = id;
				item["longitude"] = longitude;
				item["latitude"] = latitude;
				var globalUser = uni.getStorageSync("globalUser");
				var ifForeign = globalUser.ifForeign;
				if (ifForeign == 0) {
					uni.navigateTo({
						url: '../../packageA/pages/equipmentStatus/map?item=' + encodeURIComponent(JSON.stringify(
							item))
					});
				}
				if (ifForeign == 1) {
					uni.navigateTo({
						url: '../../packageA/pages/equipmentStatus/GoogleMap?item=' + encodeURIComponent(JSON
							.stringify(item))
					});
				}
			},
			//一键重启
			reboot(id) {
				var that = this;
				uni.showModal({
					title: that.$t('equipmentStatusList.tip'),
					content: that.$t('equipmentStatusList.rebootTip'),
					success: function(res) {
						if (res.confirm) {
							var serverurl = that.serverurl;
							var code = "1";
							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) => {
									var list = res.data.data;
									if (list == "SUCCESS") {
										uni.showModal({
											title: that.$t('equipmentStatusList.kaiji'),
											content: that.$t('equipmentStatusList.successReturn'),
											success: function(res) {}
										})
									} else {
										uni.showModal({
											title: that.$t('equipmentStatusList.error'),
											content: that.$t(
												'equipmentStatusList.kaijierror'),
											success: function(res) {}
										})
									}
								}
							});
						}

					}
				})
			},
			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 < 15) {
						var s = 15 - 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.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;
							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.equipmentList = [];
										that.getEquipmentListData();
									}
								})
							}

						}
					});
				}
			},
			eliminate(id) {
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/eliminate',
					data: {
						"id": id
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						uni.showToast({
							title: "发送成功",
							icon: 'none',
							duration: 1000
						});
						this.getEquipmentListData();
					}
				});
			},
			network(id) {
				console.log("network");
				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) {

							}
						})
					}
				});
			},
			// type（类型，0：外门，1：内门）, 
			 // status（状态：0：关闭，1：开启）
			updateEquipment(id,type,status){
				var that = this;
				uni.showModal({
					title: that.$t('equipmentStatusList.tip'),
					content: that.$t('equipmentStatusList.updateTip'),
					success: function(res) {
						if (res.confirm) {
							var serverurl = that.serverurl;
							var token = uni.getStorageSync("token");
							uni.request({
								url: serverurl + '/TEquipment/updateEquipment?id='+id+'&type='+type+'&status='+status,
								method: "GET",
								header: {
									'token': token
								},
								success: (res) => {
									var code = res.data.code;
									if (code) {
										uni.showModal({
											title: that.$t(
												'equipmentStatusList.tip'),
											content: that.$t(
												'equipmentStatusList.successReturn'),
											success: function(res) {
												// setTimeout(function() {
												// }, 7000);
											}
										})
									} else {
										uni.showModal({
											title: that.$t(
												'equipmentStatusList.tip'),
											content: that.$t(
												'equipmentStatusList.errorReturn'),
											success: function(res) {
											}
										})
									}
				
								}
							});
						} else if (res.cancel) {
							that.onffChecked = false;
							that.getEquipmentListData();
						}
					}
				});
			},
			buliao(id) {
				var that = this;
				var token = uni.getStorageSync("token");
				uni.showModal({
					title: this.$t('equipmentStatusList.tip'),
					content: this.$t('equipmentStatusList.wuliaoTip'),
					success: function(res) {
						uni.request({
							url: that.serverurl + '/TEquipment/buliao',
							data: {
								"equipmentId": id
							},
							method: "POST",
							header: {
								'token': token
							},
							success: (res) => {
								uni.showModal({
									title: this.$t('equipmentStatusList.tip'),
									content: res.data.message,
									success: function(res) {
										that.getEquipmentListData();
									}
								})
							}
						})
					}
				})

			},
			change(id, code, index) {
				this.sleepChecked = true;
				var that = this;
				var code1 = code;
				// console.log(index);
				// console.log(code);
				if (code1 == 1) {
					// that.sleepChecked = true;
					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.equipmentList[index].isSleep = true;
										that.sleepChecked = null;
										that.getEquipmentListData();
									}
								});
							} else {
								that.equipmentList[index].isSleep = false;
								that.sleepChecked = false;
								that.getEquipmentListData();
							}
						}
					});
				} else {
					that.descShow = false;
					that.editBtn = true;
					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.equipmentList[index].isSleep = false;
							that.sleepChecked = false;
							that.getEquipmentListData();
						}
					});
				}
			},
		}
	}
</script>

<style>
	.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 {
		display: flex;
		flex-direction: row;
		padding-left: 20upx;
	}

	.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; */
	}

	.eliminateButton {
		/* #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: 100upx;
		height: 22upx;
	}

	.switch1 {
		display: flex;
		/* flex-direction: row; */
		width: 35%;
		height: 42upx;
		/* padding-top: 13upx; */
/* 		padding-left: 132px; */
		margin-left: auto;
	}
	
	.switch2 {
		display: flex;
		flex-direction: row;
		padding-top: 13upx;
		width: 35%;
		height: 42upx;
		margin-left: auto;
	}
	
	.switch3 {
		height: 42upx;
		padding-top: 13upx;
		margin-left: auto;
	}

	.swichFont {
		width: 85%;
		padding-top: 12upx;
	}
	
	.swichFont2{
		width: auto;
		padding-top: 12upx;
	}
	
	.swichFont3{
		width: 40%;
		margin-top: 8px;
		font-size: 14px;
	}
	
	.swichFont4 {
		width: auto;
		padding-top: 12upx;
	}

	.swichFont1 {
		width: 60%;
		padding-top: 12upx;
	}

	.line1 {
		width: 100%;
		height: 3upx;
		background: #000000;
	}
	
	.line {
		width: 100%;
		height: 3upx;
		background: #c8c7cc;
	}
	
	.button-container {
	  display: flex;
	}
	
	.left-button,
	.right-button {
	  flex: 1;
	}
	
	.search {
		width: 100%;
		padding-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.search-title {
		width: 25%;
		/* margin: 0 10px; */
		margin-right: 10px;
		text-align: center;
		font-family: "PingFang-SC-Bold";
		/* box-shadow: 0upx 0upx 20upx #D3D3D3; */
		border-radius: 20px;
		/* padding: 2px; */
	}
	
	.search-input{
		width: 48%;
		height: 25px;
		text-align: center;
		margin-top: 5px;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
		box-shadow: 0upx 0upx 30upx #D3D3D3;
		border-radius: 5upx;
	}
	.search-button{
		width: 20%;
		padding-left: 10px;
		padding-bottom: 5px;
		margin-top: 3px;
		text-align: center;
		height: 60upx;
		text-align: left;
	}
</style>