ParkApp/pages/index/fire/detail.vue

<template>
	<view class="page">
		<view class="data" >
			<view class="top">
				<view class="left">
					
					<view class="title flex " style="padding:0  24rpx;">
						<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/sn.png"></u-icon>
						<text class="padding-left-10 text-lg text-bold">IEMI：{{dataDetail.imei}}</text>
						<text @click.stop="copy(dataDetail.imei)" style="text-decoration: underline;" class="text-blue padding-left-20">复制</text>
					</view>
				</view>
				<view class="right">
					<view v-if="dataDetail.defenseStatus==1" class="radius sm cu-btn line-green">
						已上线
					</view>
					<view v-if="dataDetail.defenseStatus==2" class="radius sm cu-btn line-red">
						已下线
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view style="padding: 0 30rpx;">
						<view class="content flex">
							<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/name.png"></u-icon>
							<text class="text-bold padding-left-10">设备名称：</text>
							<text>{{dataDetail.deviceName}}</text>
						</view>
						<view class="content flex">
							<view class="flex">
								<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/dianchi.png"></u-icon>
								<text class="text-bold padding-left-10">电池电量：</text>
							</view>
							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
								<view :style="[{ width:loading?dataDetail.battery+'%':''}]" style="background-color: #16c60c;color: #FFFFFF;">
									{{dataDetail.battery?dataDetail.battery:0}}%
								</view>
							</view>
						</view>
						<view class="content flex">
							<view class="flex">
								<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/wifi.png"></u-icon>
								<text class="text-bold padding-left-10">信号强弱：</text>
							</view>
							<view class="striped active cu-progress round margin-top-sm " style="width: 60%;">
								<view :style="[{ width:loading?dataDetail.signalIntensity+'%':''}]" style="width: 58%;background-color: #fc5f44;color: #FFFFFF;">
									{{dataDetail.signalIntensity?dataDetail.signalIntensity:0}}%
								</view>
							</view>
						</view>
						<view  class="content flex">
							<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/jiance.png"></u-icon>
							<text class="text-bold padding-left-10">监测值：</text>
							<text class="text-bold text-red" v-text="dataDetail.monitorValue?dataDetail.monitorValue:'未知'" ></text>
						</view>
						<view  class="content flex">
							<u-icon name="changshangguanliyuan" custom-prefix="custom-icon" size="32" color="#00aa00"></u-icon>
							<text class="text-bold padding-left-10">厂商名称：</text>
							<text :class="dataDetail.manufacturers?'':'text-unknow'"  v-text="dataDetail.manufacturers?dataDetail.manufacturers:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon  size="36" name="http://139.9.103.171:1888/miniofile/xlyq/updateTime2.png"></u-icon>
							<text class="text-bold padding-left-10">更新时间：</text>
							<text class="text-unknow"  v-text="dataDetail.lastUpdateTime?dataDetail.lastUpdateTime:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="ICCID" custom-prefix="custom-icon" size="32" color="#55aaff"></u-icon>
							<text class="text-bold padding-left-10">ICCID：</text>
							<text :class="dataDetail.iccid?'':'text-unknow'"  v-text="dataDetail.iccid?dataDetail.iccid:'未知'"></text>
						</view>
						
						<view  class="content flex">
							<u-icon name="MCUruanjianyouneirong" custom-prefix="custom-icon" size="32" color="#ff00ff"></u-icon>
							<text class="text-bold padding-left-10">Mcu软件版本：</text>
							<text :class="dataDetail.mcuEdition?'':'text-unknow'"  v-text="dataDetail.mcuEdition?dataDetail.mcuEdition:'未知'"></text>
						</view>
						
						<view  class="content flex">
							<u-icon name="xinghao" custom-prefix="custom-icon" size="32" color="#64c692"></u-icon>
							<text class="text-bold padding-left-10">NB模组型号：</text>
							<text :class="dataDetail.nbModuleModel?'':'text-unknow'"  v-text="dataDetail.nbModuleModel?dataDetail.nbModuleModel:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="banbenhao" custom-prefix="custom-icon" size="32" color="#71a4f9"></u-icon>
							<text class="text-bold padding-left-10">NB模组版本信息：</text>
							<text :class="dataDetail.nbModuleEdition?'':'text-unknow'"  v-text="dataDetail.nbModuleEdition?dataDetail.nbModuleEdition:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="cichang" custom-prefix="custom-icon" size="32" color="#5bccc9"></u-icon>
							<text class="text-bold padding-left-10">当场磁场值：</text>
							<text :class="dataDetail.magneticField?'':'text-unknow'"  v-text="dataDetail.magneticField?dataDetail.magneticField:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="-" custom-prefix="custom-icon" size="32" color="#d0267b"></u-icon>
							<text class="text-bold padding-left-10">心跳保护时间：</text>
							<text :class="dataDetail.heartbeatTime?'':'text-unknow'"  v-text="dataDetail.heartbeatTime?dataDetail.heartbeatTime:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="wuxian" custom-prefix="custom-icon" size="32" color="#6fa03c"></u-icon>
							<text class="text-bold padding-left-10">无线信号覆盖等级：</text>
							<text :class="dataDetail.wirelessLevel?'':'text-unknow'"  v-text="dataDetail.wirelessLevel?dataDetail.wirelessLevel:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="fashegongshuai" custom-prefix="custom-icon" size="32" color="#bcd62d"></u-icon>
							<text class="text-bold padding-left-10">终端发射功率：</text>
							<text :class="dataDetail.transmittingPower?'':'text-unknow'"  v-text="dataDetail.transmittingPower?dataDetail.transmittingPower:'未知'"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card',
	data() {
		return {
			loading:false,
			dataDetail:{}
		};
	},
	onShow() {
		this.dataDetail= getApp().globalData.fireHydrantDetail
	},
	onLoad(options) {
		let that = this;
		setTimeout(function() {
			that.loading = true
		}, 500)
	},
	methods:{
		copy(data){
			uni.setClipboardData({
				data:data
			})
		},
	}
};
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}

.text-unknow{
	color: #1296db;
}
	
.data {
	background-color: #ffffff;
	border-radius: 6rpx;
	box-sizing: border-box;
	margin-top: 40rpx;
	padding: 20rpx 10rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		// border-bottom: 1rpx solid $dt-border-color-sm;
		.left {
			display: flex;
			align-items: center;
			.title {
				margin: 0 10rpx;
				font-size: 30rpx;
			}
		}
		.right{
			margin-right: 10rpx;
		}
	}
	.item {
		margin: 5rpx 0 20rpx 0;
		.content {
			// border-bottom: 1rpx dashed #DDDDDD;
			padding: 30rpx 0;
		}
	}
	.bottom {
		display: flex;
		margin-top: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>