cleanMachineUniApp/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><span>机器唯一码：</span><span>{{equipment.clientId}}</span></view>
											<view><span>所在地：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
											<view><span>温度：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
											<view><span>湿度：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
											<view><span>转速：</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
											<view class="" 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 class="" 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">红色代表机器报警</font>
				<image class="img" src="../../static/img/green.png"></image>  <font class="wenziT">绿色代表机器正常</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: antiquewhite;">
						<view><span>机器唯一码：</span><span>{{equipment.clientId}}</span></view>
						<view><span>所在地：</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
						<view><span>温度：</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
						<view><span>湿度：</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
						<view><span>转速：</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
						<view class="" 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 class="" v-else>
							<view><span>报警内容：</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 {
				merchantList:[{equipmentList:[]}],
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				},
				statusNormal:'status-normal',
				statusError:'status-error',
			}
		},
		computed: {
			...mapState(['loginUser']),
			
		},
		onLoad(state){
			this.getEquipmentListData();
		},
		onPullDownRefresh() {
			this.getEquipmentListData();
		},
		onShow() {
			this.getEquipmentListData();
		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			getMerchantTitle(merchant){
				return merchant.name?merchant.name:merchant.username;
			},
			getEquipmentTitle(equipment){
				return equipment.name?equipment.name:'暂无名称';
			},
			getEquipmentListData(){
				this.getEquipmentListByUser(this.loginUser)
				.then(data => {
					this.merchantList = data;
					var listName = data[0].equipmentList;
					var listId = data[0].id;
					if(listId!=null && listId!='1'){
						uni.setStorageSync("listName",listName);
					}
					uni.stopPullDownRefresh();
				}
				, _ => void uni.stopPullDownRefresh());
			}
		}
    }
</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{
		padding-left: 120upx;
	}
	.titleFlag{
		height: 56upx;
		background-color: #F8F8F8;
		color: #8C959F;
		font-size: 22upx;
		display: flex;
		flex-direction: row;
	}
	.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";
	}
</style>