add new key

zhangzengfei

2021-09-16 38430ddb8612fce15a2f1c940f9bd57d4da3e70b

 pages/parking/parking.vue

@@ -1,373 +1,373 @@
<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>

      <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:[],

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

         }

      },
      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%;

            }

            &.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;

            &.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;

         }

      }

   .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%;
            }
            &.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;
            &.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>