SmartCommunity/smart/src/views/accessRecord/setpPage/details.vue

<template>
  <div class="lookDetail">
    <div class="left">
      <div class="list-item">
        <el-carousel
          :interval="5000"
          height="400px"
          arrow="always"
        >
          <el-carousel-item
            v-for="item in vehiclePicture"
            :key="item"
          >
            <img
              :src="item"
              alt=""
            >
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="right">
      <div class="list-item">
        <template>
          <div
            style="height:32px"
            v-for="(item,index) in cols"
            :key="index"
          >
            <el-col :span="8">{{item.name}}</el-col>
            <el-col :span="16">{{item.label}}</el-col>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  props: ['params'],
  data () {
    return {
      cols: [
        {
          name: '车场名称',
          label: '6.x灰度环境测试车场B1停车场', //
        }, {
          name: '车牌号码',
          label: '浙61616',//plateNo
        }, {
          name: '识别车牌',
          label: '少旭入口'//plateNo
        }, {
          name: '进场地点',
          label: '2020-04-06 09:42:11'//capPlace
        }, {
          name: '进场时间',
          label: '2020-04-06 09:42:11'//capTime
        },
        //  {
        //   name: '放行渠道',
        //   label: '临时车'//passType
        // }, 
        {
          name: '车牌类型',
          label: '-'//carType
        }, {
          name: '车辆车型',
          label: '车牌识别'//carStyle
        }, {
          name: '凭据号码',
          label: '长抬放行'//carSerial
        },
        //  {
        //   name: '进场凭据',
        //   label: '线下车场'
        // }, 
        {
          name: '放行类型',
          label: '服务到期长抬进出'//passType
        }
        // , {
        //   name: '操作人员',
        //   label: '服务到期长抬进出'
        // }, {
        //   name: '进场备注',
        //   label: '服务到期长抬进出'
        // }
      ],
      vehiclePicture: []
    }
  },
  created () {
    console.log(this.params);
    this.cols[0].label = this.params.parkName;
    this.cols[1].label = this.params.row.plateNo;
    this.cols[2].label = this.params.row.plateNo;
    this.cols[3].label = this.params.row.capPlace;
    this.cols[4].label = this.params.row.capTime;
    this.cols[5].label = this.params.row.carType == 0 ? '临时车'
      : this.params.row.carType == 1 ? 'VIP车'
        : this.params.row.carType == 2 ? '月租车'
          : this.params.row.carType == 3 ? '充时车'
            : this.params.row.carType == 4 ? '时租车'
              : this.params.row.carType == 5 ? '产权车'
                : this.params.row.carType == 6 ? '计次车'
                  : this.params.row.carType == 7 ? '贵宾卡'
                    : this.params.row.carType == 8 ? '员工卡' : '--';
    this.cols[6].label = this.params.row.carStyle == 0 ? '小轿车' : this.params.row.carStyle == 1 ? '大型车' : this.params.row.carStyle == 2 ? '货车' : this.params.row.carStyle == 3 ? '摩托车' : '其他';
    this.cols[7].label = this.params.row.carSerial;
    this.cols[8].label = this.params.row.passType == 0 ? '正常放行'
      : this.params.row.passType == 1 ? '免费放行'
        : this.params.row.passType == 2 ? '异常放行'
          : this.params.row.passType == 3 ? '遥控放行'
            : this.params.row.passType == 4 ? '跟车放行'
              : this.params.row.passType == 5 ? '补录放行'
                : this.params.row.passType == 6 ? '长抬放行'
                  : this.params.row.passType == 7 ? '临时车异常放行'
                    : this.params.row.passType == 8 ? '远程放行'
                      : '相机缓慢放行';

    debugger
    this.vehiclePicture.push(this.params.row.imgInfo)

  }
}
</script>


<style lang="scss" scoped>
@import '@assets/css/public-style.scss';

.el-col {
    height: 32px !important;
}
.el-select {
    width: 120px !important;
}
.el-input {
    width: 120px !important;
}
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
    }
    /deep/ .el-step__title.is-finish,
    /deep/ .el-step__title.is-process,
    /deep/ .el-step__description.is-finish {
        font-weight: 500 !important;
        color: #424656 !important;
    }

    display: flex;
    justify-content: space-between;
    .formContent-item_title {
        clear: both;
    }
    .left {
        width: 600px;
    }
    .right {
        width: calc(100% - 620px);
    }
    .list-item {
        clear: inherit;
    }
}

.el-carousel__container {
    height: 456px !important;
}
.el-carousel__container {
    height: 500px !important;
}

// 轮播图
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>