<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>