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 color="#3895e1" 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="base-color padding-left-20">复制</text>
					</view>
				</view>
				<view class="right">
					<view v-if="dataDetail.defenseStatus==1" style="font-size: 22rpx;" class="radius sm cu-btn line-green">
						已上线
					</view>
					<view v-if="dataDetail.defenseStatus==2" style="font-size: 22rpx;" 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"  v-if="dataDetail.deviceType!=100030">
							<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">
							<view class="flex justify-start " style="width: 200rpx;">
								<u-icon  size="36" name="map" color="#fd9510"></u-icon>
								<text class="text-bold padding-left-10" >安装位置：</text>
							</view>
							<view class="">
								<text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'" class="text-unknow" style="padding-top: 8rpx;" ></text>
							</view>
						</view> -->
						
						<view class="content flex align-center justify-start">
							<u-icon  size="36" name="map" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10" >安装位置：</text>
							<text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'"  style="padding-top: 8rpx;" ></text>
						</view>
						
						<view class="content flex align-center justify-start">
							<u-icon  size="36" name="home" color="#fd9510"></u-icon>
							<text class="text-bold padding-left-10">所属企业：</text>
							<text  v-text="dataDetail.enterpriseNames?dataDetail.enterpriseNames:'未知'"  style="padding-top: 8rpx;" ></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" style="padding-top: 8rpx;"  v-text="dataDetail.updateTime?dataDetail.updateTime:'未知'"></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 name="ICCID" custom-prefix="custom-icon" size="32" color="#5064eb"></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="#5064eb"></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="#53b9b6"></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="#6c9a3a"></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="#afc629"></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;
}

.line-green{
	border-color: #16aa5d;
	color: #16aa5d;
}

.line-red{
	border-color: #cf0000;
	color: #cf0000;
}

.text-unknow{
	color: $base-color;
}
	
.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>