diyici

ChargingStation/components/portItem/index.scss

@@ -0,0 +1,46 @@
+.portItem_body {
+	width: 675rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 1rpx 15rpx 0rpx rgba(0, 0, 0, 0.04);
+	border-radius: 10rpx 10rpx 10rpx 10rpx;
+	opacity: 1;
+	margin: 0 auto;
+	margin-bottom: 25rpx;
+	padding: 44rpx 27rpx;
+	box-sizing: border-box;
+	.bule{
+		color: #36658d;
+	}
+	.portItem_left {
+		.portItem_left_container {
+			width: 101rpx;
+			height: 101rpx;
+			border-radius: 216rpx 216rpx 216rpx 216rpx;
+			opacity: 1;
+			border: 4rpx solid #36658d;
+			box-sizing: border-box;
+			color: #36658d;
+			font-size: 37rpx;
+		}
+	}
+	.portItem_right {
+		margin-left: 29rpx; 
+		font-size: 24rpx;
+		.portItem_right_item:last-child{
+			margin-bottom: 0;
+		}
+		.portItem_right_item:first-child{
+			margin-top: 0;
+		}
+		.portItem_right_item{
+			margin: 15rpx 0;
+			.portItem_right_item_label{
+				min-width: 98rpx;
+			}
+			.portItem_right_item_value{
+				margin-left: 41rpx;
+			}
+		}
+		
+	}
+}

ChargingStation/components/portItem/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="portItem_body flex  ">
+		<view class="portItem_left flex ac">
+			<view :style="{borderColor:item.color,color:item.color}" class="portItem_left_container flex ac jc">
+				{{item.status|status}}
+			</view>
+		</view>
+		<view class="portItem_right oneflex">
+			<view class=" portItem_right_item flex">
+				<view class="portItem_right_item_label">桩编号</view>
+				<view class="portItem_right_item_value oneflex"> {{item.id}}</view>
+			</view>
+			<view class=" portItem_right_item flex">
+				<view class="portItem_right_item_label">电流</view>
+				<view class="portItem_right_item_value oneflex"> 最大{{item.current}}A</view>
+			</view>
+			<view class=" portItem_right_item flex">
+				<view class="portItem_right_item_label">电压</view>
+				<view class="portItem_right_item_value oneflex"> {{item.voltageLowerLimits}}V-{{item.voltageUpperLimits}}V</view>
+			</view>
+			<view class=" portItem_right_item flex">
+				<view class="portItem_right_item_label bule">{{item.equipmentType=='1'?'直流快充':item.equipmentType=='2'?'交流慢充':'其他'}}</view>
+				<view class="portItem_right_item_value oneflex"> 最大功率{{item.power}}KW</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "portItem",
+		props:{
+			item:{
+				type:Object,
+				default:()=>null
+			}
+		},
+		filters:{
+			status(e){
+				switch(e){
+					case 0 :
+					return '离网'
+					case 1 :
+					return '空闲	'
+					case 2 :
+					return '占用'
+					case 3 :
+					return '占用'
+					case 4 :
+					return '占用'
+					case 255 :
+					return '故障'
+				}
+			}
+		},
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'index.scss'
+</style>