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.
215 lines
4.0 KiB
215 lines
4.0 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==7||index==11?'mm':index==9?'°':''}}</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==7||index==11?'mm':index==9?'°':''}}</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==7||index==11?'mm':index==9?'°':''}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
props:{
|
|
carData1:{
|
|
type:Array
|
|
},
|
|
carData2:{
|
|
type:Array
|
|
},
|
|
carData3:{
|
|
type:Array
|
|
},
|
|
},
|
|
data(){
|
|
return{
|
|
dataInter:[
|
|
{
|
|
name:'支架车在线状态：',
|
|
width:0,
|
|
val:'离线'
|
|
},{
|
|
name:'左横移限位：',
|
|
width:1,
|
|
val:'2'
|
|
},{
|
|
name:'右横移限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'上限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'下限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'左滚转限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'右滚转限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'行进位置：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'横移位置：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'滚转位置：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'超重限位：',
|
|
width:1,
|
|
val:'3'
|
|
},{
|
|
name:'升降位置：',
|
|
width:0,
|
|
val:'3'
|
|
}
|
|
],
|
|
carDetail1:[],
|
|
carDetail2:[],
|
|
carDetail3:[],
|
|
}
|
|
},
|
|
|
|
watch:{
|
|
carData1:{
|
|
handler(newVal,oldVal){
|
|
if(newVal){
|
|
this.carDetail1=newVal
|
|
}
|
|
}
|
|
},
|
|
carData2:{
|
|
handler(newVal,oldVal){
|
|
if(newVal){
|
|
this.carDetail2=newVal
|
|
}
|
|
}
|
|
},
|
|
carData3:{
|
|
handler(newVal,oldVal){
|
|
if(newVal){
|
|
this.carDetail3=newVal
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.carDetail1=this.dataInter; //初始化1号车数据
|
|
this.carDetail2=this.dataInter; //初始化2号车数据
|
|
this.carDetail3=this.dataInter; //初始化3号车数据
|
|
}
|
|
}
|
|
</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>
|