shenzeeUniApp/packageA/pages/equipmentStatus/equipmentlist.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 >
		<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)" :open="true">
					<!-- 睡眠 -->
					<view style="padding: 20upx;background-color: antiquewhite;">
						<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:''}}</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>
							<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><span>{{$t('equipmentStatusList.stick')}}:</span><span>{{equipment.stick?equipment.stick:''}}% </span></view>
						<view>
							<span>{{$t('equipmentStatusList.water')}}:</span><span>{{equipment.water?equipment.water:''}}%  -- </span>
							<span>{{$t('equipmentStatusList.wasteWater')}}:</span><span>{{equipment.wasteWater?equipment.wasteWater:''}}%</span>
						</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>
		</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: []
				}],
				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']),
		},
		onPullDownRefresh() {
			this.getEquipmentListData();
		},
		onShow() {
			// this.input = this.input + 1;
			this.globalUser = uni.getStorageSync("globalUser");
			// 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();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			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 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());
			},
			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();
					}
				});
			},

}
	}
</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: 72upx;
	}

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

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

	.line1 {
		width: 100%;
		height: 3upx;
		background: #000000;
	}
</style>