tqApp-webView/pagesSanitation/workDetails/module/vehInfo.vue

<template>
    <u-popup :show="isShow" @close="close" :closeOnClickOverlay="false" :overlay="false" :closeable="false" :round="10">
		<view class="container">
			<view class="info">
				<view class="info-head">
					<view>
						{{renderItem(workTrackInfo,'planName','--')}}
					</view>
					<view>
						{{renderItem(workTrackInfo,'classTime','--')}}
					</view>
				</view>
				<view class="info-body">
					<view class="item">
						<view class="label">当前状态：</view>
						<view class="value"
							:class="{
								'orange': workTrackInfo.workStatus == '1',
								'red': workTrackInfo.workStatus == '0',
								'green': workTrackInfo.workStatus == '2',
							}"
						>{{workStatusObj[renderItem(workTrackInfo,'workStatus','')]}}</view>
					</view>
					
					<view class="item">
						<view class="label">完成率：</view>
						<view class="value green">{{renderItem(trackInfo,'percentage','--')}}%</view>
					</view>
					
					<view class="item">
						<view class="label">最近报警：</view>
						<view class="value red">{{renderItem(newAlarm,'alarmName','--')}}</view>
					</view>
					
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import {isArray,clone,isObject,isEmpty } from 'lodash'
import {getImages} from '@/plugins/images'
import {copyProps,clearProps} from '@/utils/gdtq.js'

export default {
	props: {
		trackInfo: {
			type: Object,
			default: () => {
				return {}
			}
		},
		workTrackInfo: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	
	computed: {
		newAlarm() {
			let list = []
			if(!this.isNull(this.renderItem(this.workTrackInfo,'alarmList',''))) {
				list = this.workTrackInfo.alarmList
			}
			
			if(isEmpty(list)) {
				return ''
			} else {
				let len = list.length
				return list[len-1]
			}
			
		}
	},
    data() {
        return {
			isShow: true,
			workStatusObj: {
				0: '未开始',
				1: '执行中',
				2: '已结束',
				3: '已失效',
			}
        }
    },
	mounted() {
		
	},
	
    methods: {
		

	   
    }

}
</script>

<style lang="scss" scoped>
	.orange {
		color: #FF8000 !important;
	}
	.red {
		color: #EB4141 !important;
	}
	.green {
		color: #68D100 !important;
	}
	
	.container {
		// background: #fff;
		// padding: 52rpx 48rpx;
		
		font-size: 28rpx;
		// min-height: 360rpx;
		
		.info {
			   border-radius: 20rpx;
			   background: #fff;
			   
			   // padding: 0 44rpx;
			   &-head{
					margin: 32rpx 48rpx;
				   // display: flex;
				   view:nth-child(1) {
					   font-family: PingFangSC, PingFang SC;
					   font-weight: 600;
					   font-size: 32rpx;
					   color: #333333;
					   text-align: left;
					   font-style: normal;
					   padding: 0 ;
					   width: auto;
				   }
				   view {
					   font-family: PingFangSC, PingFang SC;
					   font-weight: 400;
					   font-size: 28rpx;
					   color: #666666;
						line-height: 40rpx;
					   text-align: left;
					   font-style: normal;
					   margin-top: 12rpx;
				   }
			   }
			   &-body {
				   overflow: hidden;
				   background: #F6FAFF;
				   border-radius: 10rpx;
				   margin: 0rpx 24rpx 24rpx 24rpx;
				   .item {
						margin: 20rpx 32rpx;
						display: flex;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
				
						.label {
							color: #333333;
						}
						.value {
							
							color: #333333;
							flex: 1;
							text-align: right;
						}
				   }
			   }
		}
	}
	
	
	
</style>