uniapp/pages/device-Manage/deviceDetail/deviceDetail.vue

<template>
	<view class="wrapper flex justify-between padding-lr-lg">
		<view class="device-items">
			<view class="device-item">
				<text class="text-yellow">Uab</text>
				<text>{{deviceDetail.Uab>1000?(deviceDetail.Uab/1000).toFixed(2):deviceDetail.Uab}}</text>
				<text v-if="deviceDetail.Uab>1000">kV</text>
				<text v-else>V</text>
			</view>
			<view class="device-item">
				<text class="text-green">Ubc</text>
				<text>{{deviceDetail.Ubc>1000?(deviceDetail.Ubc/1000).toFixed(2):deviceDetail.Ubc}}</text>
				<text v-if="deviceDetail.Ubc>1000">kV</text>
				<text v-else>V</text>
			</view>
			<view class="device-item">
				<text class="text-red">Uca</text>
				<text>{{deviceDetail.Uca>1000?(deviceDetail.Uca/1000).toFixed(2):deviceDetail.Uca}}</text>
				<text v-if="deviceDetail.Uca>1000">kV</text>
				<text v-else>V</text>
			</view>
			<view class="device-item">
				<text class="text-red">F</text>
				<text>{{deviceDetail.F}}</text>
				<text>HZ</text>
			</view>
		</view>

		<view class="device-items">
			<view class="device-item">
				<text class="text-yellow">Ia</text>
				<text>{{deviceDetail.Ia}}</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-green">Ib</text>
				<text>{{deviceDetail.Ib}}</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-red">Ic</text>
				<text>{{deviceDetail.Ic}}</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-yellow">P</text>
				<text>{{deviceDetail.P}}</text>
				<text>kW</text>
			</view>
			<view class="device-item">
				<text class="text-green">Q</text>
				<text>{{deviceDetail.Q}}</text>
				<text>kvar</text>
			</view>
			<view class="device-item">
				<text class="text-red">COS</text>
				<text>{{deviceDetail.COS}}</text>
				<text></text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				deviceDetail:''
			}
		},
	
		
		onLoad:function(option){
			
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#000033", //底部背景色
			})
			console.log(111)
			console.log(option.companyCode)
			this.companyCode=option.companyCode
			this.deviceType=option.deviceType
			this.getDeviceDetail({"companyCode":option.companyCode,"deviceType":option.deviceType,"deviceCode":option.deviceCode})
		},
		
		
		methods: {
			
			async getDeviceDetail(ming={}) {
				const res= await this.$myRequest({
					url:'OperationMonitoring/getMonitoringScreen',
					data:ming,
					showLoading:true
				})
				console.log(res.data.data[0])
				this.deviceDetail=res.data.data[0]
				// this.powerDeviceCount= res.data.data[0].powerDeviceCount
				// this.videoDeviceCount= res.data.data[0].videoDeviceCount
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100% !important
	}

	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #000033;
		background-image: url(../../../static/device-bg.png);
		background-position: center center;
		background-size: cover;
		position: relative;

		.device-items {
			font-family: FANDOLFANG-REGULAR;
			margin-top: 150rpx;
			color: #fff;
			.device-item text{
				vertical-align:top
			}

			.device-item text:first-child {
				width: 50rpx;
				display: inline-block;
				font-size: 28rpx;
			}
			.device-item text:nth-child(2) {
				display: inline-block;
				width: 100rpx;
				margin: 0 15rpx 30rpx 15rpx;
				height: 42rpx;
				background: #FFFFCC;
				font-size: 28rpx;
				text-align: left;
				padding-left: 10rpx;
				line-height: 42rpx;
				color: #333;
			}
		}
		.device-item:nth-child(3) {
			margin-bottom: 94rpx;
		}
	}
</style>