SmartCommunity/smart/src/views/onSiteVehicles/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"
          >
            <!-- <h3>{{ item }}</h3> -->
          </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>

            <!-- <el-input
              placeholder="请输入内容"
              v-show='item.details'
            ></el-input>
            <el-tooltip
              class="item"
              effect="light"
              placement="bottom"
              content="编辑"
              v-show='item.details'
            >
              <i
                class="zoniot_font zoniot-icon-bianji"
                v-on:click="addClass(index,$event)"
              ></i>
            </el-tooltip> -->
            <div v-if="index+1 == 1">
              <el-col :span="8">车牌号码</el-col>
              <div v-if="flag">
                <el-col :span="12">{{licensePlate}}</el-col>
                <el-tooltip
                  class="item"
                  effect="light"
                  placement="bottom"
                  content="编辑"
                >
                  <i
                    class="zoniot_font zoniot-icon-bianji"
                    @click="addClass"
                  ></i>
                </el-tooltip>
              </div>
              <div v-else>
                <el-col :span="16">
                  <el-input
                    v-model="licensePlate"
                    clearable
                  >
                  </el-input>
                  <el-button
                    size="mini"
                    type="success"
                    style="margin-left:5px"
                    @click="licensePlatebtn"
                  >保存</el-button>
                </el-col>
              </div>
            </div>
            <div v-if="index+1 ==5">
              <el-col :span="8">车辆类型</el-col>
              <div v-if="flags">
                <el-col :span="12">{{vehicleType == 0 ? '小型车' : vehicleType == 1 ? '大型车' :vehicleType == 2 ? '货车' : vehicleType == 3  ? '摩托车' : vehicleType == 4 ? '其他' : vehicleType}}</el-col>
                <!-- <el-col :span="12"> {{vehicleType }}</el-col> -->
                <el-tooltip
                  class="item"
                  effect="light"
                  placement="bottom"
                  content="编辑"
                >
                  <i
                    class="zoniot_font zoniot-icon-bianji"
                    @click="vehicleTypes"
                  ></i>
                </el-tooltip>
              </div>
              <div v-else>
                <el-col :span="16">
                  <el-select v-model="vehicleType">
                    <el-option
                      value="0"
                      label="小型车"
                    ></el-option>
                    <el-option
                      value="1"
                      label="大型车"
                    ></el-option>
                    <el-option
                      value="2"
                      label="货车"
                    ></el-option>
                    <el-option
                      label="摩托车"
                      value="3"
                    ></el-option>
                    <el-option
                      label="其他"
                      value="4"
                    ></el-option>
                  </el-select>
                  <el-button
                    size="mini"
                    type="success"
                    style="margin-left:5px"
                    @click="vehicle"
                  >保存</el-button>
                </el-col>

              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  props: ['params'],
  data () {
    return {
      cols: [
        {
          name: '车场名称',
          label: '',
        }, {
          name: '识别车牌',
          label: '',
        }, {
          name: '进程地点',
          label: ''
        }, {
          name: '进场时间',
          label: ''
        },
        //  {
        //   name: '更新时间',
        //   label: '2020-04-06 09:42:11'
        // }, 
        {
          name: '车牌类型',
          label: ''
        },
        //  {
        //   name: '凭据号码',
        //   label: '-'
        // }, 
        // {
        //   name: '进场凭据',
        //   label: '车牌识别'
        // }, 
        // {
        //   name: '放行类型',
        //   label: '长抬放行'  
        // }, {
        //   name: '放行渠道',
        //   label: '线下车场'
        // }, {
        //   name: '进场备注',
        //   label: '服务到期长抬进出'
        // }
      ],
      flag: true,
      flags: true,
      licensePlate: '',
      vehicleType: '',
      vehiclePicture: [],
    }
  },
  methods: {
    addClass () {
      this.flag = !this.flag;
    },
    licensePlatebtn () {
      this.flag = !this.flag;
      // /sc-community-web/parkingCar/modifyPlateNumber
      if (this.licensePlate.length == 0) {
        this.$message.error('请输入车牌号')
      } else {
        this.$http.post('/sc-community-web/parkingCar/modifyPlateNumber', { oldplateNo: (this.params.row.plateNo == "" ? this.licensePlate : this.params.row.plateNo), plateNo: this.licensePlate, parkId: this.params.parkId }).then(({ data, status, msg }) => {
          // console.log(data);
          this.$message.success('成功');
        });
      }

    },
    vehicleTypes () {
      this.flags = !this.flags
    },
    vehicle () {
      this.flags = !this.flags
      // console.log(this.vehicleType);
      this.$http.post('/sc-community-web/parkingCar/modifyType', { carStyle: this.vehicleType, parkId: this.params.parkId, plateNo: this.licensePlate }).then(({ data, status, msg }) => {
        // console.log(data);
        this.$message.success('成功');
      });

    },
    // OnSiteVehicleDetails () {
    // debugger
    // this.$http.post('/sc-community-web/parkingCar/queryPresenceVehicles', { parkId: this.params.parkId, nodeId: this.params.nodeId }).then(({ data, status, msg }) => {
    //   console.log(data);
    // });
    // },
  },
  created () {
    console.log(this.params.row);
    this.cols[0].label = this.params.row.parkName;
    this.cols[1].label = this.params.row.plateNo;
    this.cols[2].label = this.params.row.entryPlace;
    this.cols[3].label = this.params.row.entryTime;
    this.cols[4].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.licensePlate = this.params.row.plateNo;
    this.vehicleType = this.params.row.carStyle == 0 ? '小轿车' : this.params.row.carStyle == 1 ? '大型车' : this.params.row.carStyle == 2 ? '货车' : this.params.row.carStyle == 3 ? '摩托车' : '其他';
    this.vehiclePicture.push(this.params.row.imgName)

  }
}
</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>