<template>
|
<view class="content">
|
<div class="parking-container">
|
<div class="line-one">
|
<div class="left">
|
<div class="vertical-cell gray" :class="{'blue':item.state==0,'red':item.isMine}" v-for="item in sixthThree" :key="item.spaceNo">{{item.spaceNo}}</div>
|
<div class="vertical-cell gj small left-gap">工<br>具</div>
|
</div>
|
<div class="right">
|
<div class="vertical-cell gj small right-gap">工<br>具</div>
|
<div class="vertical-cell gray" v-for="item in thirdTwo" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine}">{{item.spaceNo}}</div>
|
</div>
|
</div>
|
<div class="center-area">
|
<div class="left">
|
<div class="horizen-cell whitespace"></div>
|
<div class="horizen-cell gray" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==69||item.spaceNo==72||item.spaceNo==75}" v-for="item in seventhNine" :key="item.spaceNo">{{item.spaceNo}}</div>
|
<div class="horizen-cell gap" ></div>
|
<div class="horizen-cell gray" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==80||item.spaceNo==83||item.spaceNo==86}" v-for="item in eighthEleven" :key="item.spaceNo">{{item.spaceNo}}</div>
|
<div class="horizen-cell gray" v-for="item in lastOne" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine}">{{item.spaceNo}}</div>
|
</div>
|
<div class="aisle left-road">
|
<div class="speed-bump-hor top"></div>
|
<!-- <div class="yellow-line-ver" v-for="i in 9"></div> -->
|
<div class="speed-bump-hor bottom"></div>
|
</div>
|
<div class="mid">
|
<div class="road-mark top-bg">
|
<div class="yellow-line">
|
<!-- <div class="yellow-line-hor" v-for="i in 3"></div> -->
|
</div>
|
<div class="speed-bump-ver"></div>
|
</div>
|
<div class="mid-space">
|
<div class="left-side">
|
<div class="horizen-cell gray" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==63||item.spaceNo==60||item.spaceNo==57||item.spaceNo==54||item.spaceNo==51||item.spaceNo==48}" v-for="item in fifthTwentyOne" :key="item.spaceNo">{{item.spaceNo}}</div>
|
</div>
|
<div class="right-side">
|
<div class="horizen-cell gray" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==26||item.spaceNo==29||item.spaceNo==32||item.spaceNo==35||item.spaceNo==38||item.spaceNo==41}" v-for="item in forthTwentyOne" :key="item.spaceNo">{{item.spaceNo}}</div>
|
</div>
|
</div>
|
<div class="road-mark bot-bg">
|
|
</div>
|
</div>
|
<div class="aisle right-road">
|
<div class="speed-bump-hor top"></div>
|
<!-- <div class="yellow-line-ver" v-for="i in 9" :key="i"></div> -->
|
<div class="speed-bump-ver bottom"></div>
|
<div class="speed-bump-hor bottom"></div>
|
</div>
|
<div class="right">
|
<div class="horizen-cell gj">工具</div>
|
<div class="horizen-cell gray" v-for="item in secondThirteen" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==21||item.spaceNo==18||item.spaceNo==15||item.spaceNo==12}">{{item.spaceNo}}</div>
|
<div class="horizen-cell gap"></div>
|
<div class="horizen-cell gray" v-for="item in firstEight" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine,'bottom-gap':item.spaceNo==7||item.spaceNo==4||item.spaceNo==1}">{{item.spaceNo}}</div>
|
<!-- <div class="horizen-cell zy" v-for="i in 2" :key="`z${i}`">专用</div> -->
|
<!-- <div class="horizen-cell gray" v-for="item in lastTwo" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine}">{{item.spaceNo}}</div> -->
|
<!-- <div class="horizen-cell gray" v-for="item in lastTwoTemp" :key="item.spaceNo" :class="{'blue':item.state==0,'red':item.isMine}">{{item.spaceNo}}</div> -->
|
</div>
|
</div>
|
<div class="last-line">
|
<div class="vertical-cell zy" :class="{'left-gap':i==3}" v-for="i in 5" :key="i">专<br>用</div>
|
</div>
|
<div class="entry"></div>
|
</div>
|
</view>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
parkingInfo:[],
|
//lastTwoTemp:[{spaceNo:'89',state:1,isMine:false},{spaceNo:'90',state:1,isMine:false}]
|
}
|
},
|
methods:{
|
async getSpaceNo(){
|
let {userId} = uni.getStorageSync('user') && JSON.parse(uni.getStorageSync('user'));
|
console.log(userId)
|
let res = await this.$api.syncRequest({
|
//url: 'http://111.205.161.131:5116/basic/api/car/spaceNo',
|
url: `/basic/api/car/spaceNo?userId=${userId}`,
|
loading: true
|
});
|
this.parkingInfo = res.data.data;
|
uni.stopPullDownRefresh();
|
}
|
},
|
onReady(){
|
|
},
|
onShow(){
|
this.getSpaceNo();
|
},
|
onPullDownRefresh(){
|
this.getSpaceNo();
|
},
|
computed:{
|
firstEight(){
|
let arr = this.parkingInfo.slice().splice(0,8);
|
return arr.reverse()
|
},
|
secondThirteen(){
|
let arr = this.parkingInfo.slice().splice(8,13);
|
return arr.reverse()
|
},
|
thirdTwo(){
|
return this.parkingInfo.slice().splice(21,2).reverse();
|
},
|
forthTwentyOne(){
|
return this.parkingInfo.slice().splice(23,21);
|
},
|
fifthTwentyOne(){
|
return this.parkingInfo.slice().splice(44,21).reverse();
|
},
|
sixthThree(){
|
return this.parkingInfo.slice().splice(65,3).reverse();
|
},
|
seventhNine(){
|
return this.parkingInfo.slice().splice(68,9);
|
},
|
eighthEleven(){
|
return this.parkingInfo.slice().splice(77,11);
|
},
|
// lastTwo(){
|
// return this.parkingInfo.slice().splice(88,2);
|
// },
|
lastOne(){
|
return this.parkingInfo.slice().splice(88,1);
|
}
|
}
|
}
|
</script>
|
<style lang="scss" >
|
.content{
|
background:#fbfbfb;
|
.parking-container{
|
padding: 20rpx;
|
position: relative;
|
.entry{
|
width:140rpx;
|
height: 170rpx;
|
background: url(../../static/parking/entry.png) no-repeat;
|
position: absolute;
|
bottom: 30rpx;
|
right: 126rpx;
|
}
|
.vertical-cell{
|
width: 68rpx;
|
height: 96rpx;
|
border-radius: 3px;
|
background-color: #dfdfdf;
|
box-shadow: inset 0 0 7px #e6e6e6;
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: 70%;
|
|
&.gray{
|
background-image: url(../../static/parking/u308.png);
|
}
|
&.blue{
|
background: linear-gradient(135deg, #7ccef9 0%, #7ccef9 0%, #7590fd 100%, #7590fd 100%);
|
background-size: 100%;
|
color: #ffffffa3;
|
line-height: 90rpx;
|
text-align: center;
|
font-family: auto;
|
}
|
&.red{
|
background-image: url(../../static/parking/u392.png);
|
background-repeat: no-repeat;
|
background-size: 70%;
|
background-position: center;
|
}
|
&.zy{
|
padding-top: 12rpx;
|
box-sizing: border-box;
|
font-size: 26rpx;
|
font-weight: bold;
|
text-align: center;
|
color: #fff;
|
background-color: #d5d5d5;
|
}
|
&.gj{
|
padding-top: 12rpx;
|
box-sizing: border-box;
|
font-size: 26rpx;
|
font-weight: bold;
|
text-align: center;
|
color: #fff;
|
background-color: #d5d5d5;
|
}
|
&.small{
|
margin-top: 14rpx;
|
height: 82rpx;
|
padding-top: 6rpx;
|
|
}
|
&.left-gap{
|
margin-left: 10rpx;
|
}
|
&.right-gap{
|
margin-right: 10rpx;
|
}
|
}
|
.horizen-cell{
|
width: 96rpx;
|
height: 68rpx;
|
border-radius: 3px;
|
background-color: #dfdfdf;
|
box-shadow: inset 0 0 7px #e6e6e6;
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: 56%;
|
font-size: 36rpx;
|
color: #ffffffa3;
|
line-height: 60rpx;
|
text-align: center;
|
font-family: auto;
|
&.whitespace{
|
background: none;
|
box-shadow: none;
|
}
|
&.gray{
|
background-image: url(../../static/parking/u308.png);
|
}
|
&.blue{
|
background: linear-gradient(135deg, #7ccef9 0%, #7ccef9 0%, #7590fd 100%, #7590fd 100%);
|
background-size: 100%;
|
}
|
&.red{
|
background-image: url(../../static/parking/u392.png);
|
background-repeat: no-repeat;
|
background-size: 70%;
|
background-position: center;
|
}
|
&.gap{
|
background-color: #fff;
|
box-shadow: none;
|
}
|
&.zy{
|
font-size: 26rpx;
|
font-weight: bold;
|
line-height: 76rpx;
|
text-align: center;
|
color: #fff;
|
background-color: #d5d5d5;
|
}
|
&.gj{
|
font-size: 26rpx;
|
font-weight: bold;
|
line-height: 76rpx;
|
text-align: center;
|
color: #fff;
|
background-color: #d5d5d5;
|
}
|
&.bottom-gap{
|
margin-bottom: 10rpx;
|
}
|
}
|
.yellow-line-hor{
|
width: 40rpx;
|
height: 7rpx;
|
background-color: #ffd917;
|
}
|
.yellow-line-ver{
|
width: 7rpx;
|
height: 100rpx;
|
background-color: #ffd917;
|
}
|
.speed-bump-ver{
|
width: 20rpx;
|
height: 146rpx;
|
background: url(../../static/parking/speed-ver.png);
|
background-size: cover;
|
&.bottom{
|
position: absolute;
|
bottom: 0;
|
left: -40rpx;
|
}
|
}
|
.speed-bump-hor{
|
width: 146rpx;
|
height: 20rpx;
|
background: url(../../static/parking/speed.png);
|
background-size: cover;
|
&.top{
|
position: absolute;
|
left: -8rpx;
|
top: 160rpx;
|
}
|
&.bottom{
|
position: absolute;
|
left: -8rpx;
|
bottom: 180rpx;
|
}
|
}
|
.line-one{
|
display: flex;
|
margin-left: 50rpx;
|
.left,.right{
|
display: flex;
|
}
|
.left{
|
margin-right: 50rpx;
|
}
|
}
|
.center-area{
|
display: flex;
|
justify-content: space-between;
|
padding: 7rpx 0;
|
.left{
|
width: 96rpx;
|
margin-top:8rpx;
|
}
|
.aisle{
|
padding: 200rpx 0 80rpx;
|
width: 130rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
position: relative;
|
// background-color: #e0ece7;
|
// opacity: .3;
|
&.left-road{
|
background: url(../../static/parking/left-road.png) no-repeat 0 180rpx;
|
background-size: 100% 80%;
|
min-height: 1500rpx;
|
}
|
&.right-road{
|
background: url(../../static/parking/right-road.png) no-repeat 0 170rpx;
|
background-size: 100% 80%;
|
min-height: 1500rpx;
|
}
|
}
|
.mid{
|
width: 192rpx;
|
font-size: 0;
|
.road-mark{
|
height: 152rpx;
|
position: relative;
|
&.top-bg{
|
background: url(../../static/parking/top-bg.png) no-repeat -30rpx;
|
background-size: 150% 150%;
|
}
|
&.bot-bg{
|
background: url(../../static/parking/bot-bg.png) no-repeat -30rpx -20rpx;
|
background-size: 120% 150%;
|
}
|
.yellow-line{
|
padding-top:75rpx;
|
display: flex;
|
justify-content: space-around;
|
}
|
.speed-bump-ver{
|
position: absolute;
|
top: 0;
|
left: 86rpx;
|
}
|
}
|
.mid-space{
|
display: flex;
|
}
|
// flex-direction: row-reverse;
|
// flex-wrap: wrap;
|
// align-content: flex-start;
|
|
}
|
.right{
|
width: 96rpx;
|
margin-top:8rpx;
|
}
|
}
|
.last-line{
|
display: flex;
|
padding-left: 100rpx;
|
}
|
}
|
}
|
</style>
|
