You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
7.1 KiB
350 lines
7.1 KiB
<template>
|
|
<view class="carInfo">
|
|
<view class="carContent">
|
|
<view>
|
|
<view class="carTitle">
|
|
1号支架车
|
|
</view>
|
|
<view class="carDetail">
|
|
<view v-for="item,index in carDetail1" :key="index" :class="item.width==0?'optionWidth':''">
|
|
<span>{{item.name}}</span>
|
|
<span style="padding-right:4px ;">{{item.val}}</span>
|
|
<span>{{index>=9?'mm':index==8?'°':''}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="carTitle">
|
|
2号支架车
|
|
</view>
|
|
<view class="carDetail">
|
|
<view v-for="item,index in carDetail2" :key="index" :class="item.width==0?'optionWidth':''">
|
|
<span>{{item.name}}</span>
|
|
<span style="padding-right:4px ;">{{item.val}}</span>
|
|
<span>{{index>=9?'mm':index==8?'°':''}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="carTitle">
|
|
3号支架车
|
|
</view>
|
|
<view class="carDetail">
|
|
<view v-for="item,index in carDetail3" :key="index" :class="item.width==0?'optionWidth':''">
|
|
<span>{{item.name}}</span>
|
|
<span style="padding-right:4px ;">{{item.val}}</span>
|
|
<span>{{index>=9?'mm':index==8?'°':''}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
props:{
|
|
carData:{
|
|
type:Object
|
|
}
|
|
},
|
|
data(){
|
|
let dataInter1=[
|
|
{
|
|
name:'支架车在线状态：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'左横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'上限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'下限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'左滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'超重限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'滚转位置：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'行进位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'横移位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'升降位置：',
|
|
width:0,
|
|
val:''
|
|
}
|
|
]
|
|
let dataInter2=[
|
|
{
|
|
name:'支架车在线状态：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'左横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'上限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'下限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'左滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'超重限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'滚转位置：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'行进位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'横移位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'升降位置：',
|
|
width:0,
|
|
val:''
|
|
}
|
|
]
|
|
let dataInter3=[
|
|
{
|
|
name:'支架车在线状态：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'左横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右横移限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'上限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'下限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'左滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'右滚转限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'超重限位：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'滚转位置：',
|
|
width:1,
|
|
val:''
|
|
},{
|
|
name:'行进位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'横移位置：',
|
|
width:0,
|
|
val:''
|
|
},{
|
|
name:'升降位置：',
|
|
width:0,
|
|
val:''
|
|
}
|
|
]
|
|
return{
|
|
carDetail1:dataInter1,
|
|
carDetail2:dataInter2,
|
|
carDetail3:dataInter3,
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
|
|
// 处理支架车数据数据
|
|
carEntsorgen(value){
|
|
this.carDetail1[0].val=value.online==1?'在线':'离线';
|
|
this.carDetail1[1].val=value.leftHorizontalLimit;
|
|
this.carDetail1[2].val=value.rightHorizontalLimit;
|
|
this.carDetail1[3].val=value.downLimit;
|
|
this.carDetail1[4].val=value.upLimit;
|
|
this.carDetail1[5].val=value.leftTurnLimit;
|
|
this.carDetail1[6].val=value.rightTurnLimit;
|
|
this.carDetail1[7].val=value.overWeightLimit;
|
|
this.carDetail1[8].val=value.turnPosition;
|
|
this.carDetail1[9].val=value.walkAxisPosition;
|
|
this.carDetail1[10].val=value.horizontalAxisPosition;
|
|
this.carDetail1[11].val=value.liftPosition;
|
|
|
|
this.carDetail2[0].val=value.onlineTwo==1?'在线':'离线';
|
|
this.carDetail2[1].val=value.leftHorizontalLimitTwo;
|
|
this.carDetail2[2].val=value.rightHorizontalLimitTwo;
|
|
this.carDetail2[3].val=value.downLimitTwo;
|
|
this.carDetail2[4].val=value.upLimitTwo;
|
|
this.carDetail2[5].val=value.leftTurnLimitTwo;
|
|
this.carDetail2[6].val=value.rightTurnLimitTwo;
|
|
|
|
this.carDetail2[7].val=value.overWeightLimitTwo;
|
|
this.carDetail2[8].val=value.turnPositionTwo;
|
|
this.carDetail2[9].val=value.walkAxisPositionTwo;
|
|
this.carDetail2[10].val=value.horizontalAxisPositionTwo;
|
|
this.carDetail2[11].val=value.liftPositionTwo;
|
|
|
|
|
|
|
|
this.carDetail3[0].val=value.onlineThree==1?'在线':'离线';
|
|
this.carDetail3[1].val=value.leftHorizontalLimitThree;
|
|
this.carDetail3[2].val=value.rightHorizontalLimitThree;
|
|
this.carDetail3[3].val=value.downLimitThree;
|
|
this.carDetail3[4].val=value.upLimitThree;
|
|
this.carDetail3[5].val=value.leftTurnLimitThree;
|
|
this.carDetail3[6].val=value.rightTurnLimitThree;
|
|
this.carDetail3[7].val=value.overWeightLimitThree;
|
|
this.carDetail3[8].val=value.turnPositionThree;
|
|
this.carDetail3[9].val=value.walkAxisPositionThree;
|
|
this.carDetail3[10].val=value.horizontalAxisPositionThree;
|
|
this.carDetail3[11].val=value.liftPositionThree;
|
|
}
|
|
},
|
|
|
|
|
|
|
|
watch:{
|
|
|
|
carData:{
|
|
immediate:true,
|
|
handler(newVal,oldVal){
|
|
if(newVal){
|
|
this.carEntsorgen(newVal);
|
|
// console.log(this.carDetail1)
|
|
// console.log(this.carDetail2)
|
|
// console.log(this.carDetail3)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.optionWidth{
|
|
width: 92% !important;
|
|
}
|
|
.carInfo{
|
|
width: 100%;
|
|
height: 90%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.carContent{
|
|
width: 98%;
|
|
height: 98%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.carContent>view{
|
|
width: 33%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.carTitle{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid #ccc;
|
|
width: 100%;
|
|
height: 8%;
|
|
font-size: 24px;
|
|
background-color: rgb(204, 204, 204,0.4);
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.carDetail{
|
|
width: 100%;
|
|
height: 92%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.carDetail>view{
|
|
width: 42%;
|
|
height: 8%;
|
|
border-radius: 10px;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
padding-left: 4%;
|
|
font-size: 18px;
|
|
}
|
|
.carDetail>view>span{
|
|
display: flex;
|
|
height: 50%;
|
|
align-items: end;
|
|
}
|
|
</style>
|