BJ_web_developers / highOrder

<template>

  <el-container style="height: 100%;width: 1190px;margin: 0 auto;" >
    <el-header class="header-wrap">
      <el-row>
        <el-col :span="4">
          <p>车场:{{ plNo }}</p>
        </el-col>

        <el-col :span="4">
          <p>设备:</p>
        </el-col>

        <el-col :span="3">
          <p>车位:{{ berthNo }}</p>
        </el-col>

        <el-col :span="3">
          <p>待审: {{ count }}</p>
        </el-col>

        <el-col :span="4">
          <p>获取数据: {{ listNum }}</p>
        </el-col>

        <el-col :span="2">
          <p>刷新</p>
        </el-col>

        <el-col :span="4">
          <p>未审总数:{{ total }}</p>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding: 0;">
      <div v-if="list.length>0" style="display: flex">
        <ul class="status-wrap" >
          <li v-for="(i, index) in list" :key="i.id" >
            <div :class="i.examineState | classBorderFilter"  >
              <el-row>
                <el-col style="padding-left: 10px;" :span="9" :class="{active:currentIndex == index}" @click.native="chooseHandle(i,index)">
                  <p class="status-ifo">
                    <span>{{ i.parkState | parkStateFilter}}</span>
                    <span v-if="i.examineState == 0" class="redText">需审核</span>
                    <span v-else-if="i.examineState == 1" class="blueText">通过</span>
                    <span v-else class="yellowText">废弃</span>
                  </p>
                  <p class="status-ifo">
                    <span>车牌号码: {{ i.carNumber }}</span>
                    <span>车牌颜色: {{ i.vplColor | vplColorFilter}}</span>
                  </p>
                  <p class="status-ifo">
                    <span>车辆类型: 轿车</span>
                    <span>车身颜色: 其他</span>
                  </p>
                  <p class="status-ifo">
                    <span>{{ i.parkTime }}</span>
                    <span>停车事件: {{ i.parkState}}</span>
                  </p>
                </el-col>
                <el-col :span="15" style="overflow-x: auto;width: 550px;">
                  <div class="imgBox" :style="{width: i.imgList.length*190+'px'}">
                    <img
                      v-for="(item,imgindex) in i.imgList"
                      :key="imgindex"
                      :src="item"
                      :preview="index"
                    />
                  </div>

                </el-col>
                <!--<el-col :span="4" style="text-align: center;line-height: 120px">-->
                <!--<el-button type="primary">操作</el-button>-->
                <!--</el-col>-->

              </el-row>
            </div>
          </li>

        </ul>

        <div class="handle-wrap">
          <div v-show="handleShow">
            <el-input v-model="carnum" maxlength="9">
              <template slot="prepend">改车牌</template>
              <el-button slot="append"  @click.native="updateStatusCar">确定</el-button>
            </el-input>
            <div>
              <el-date-picker style="width:73%;margin-top:15px;"
                              v-model="time"
                              default-value="2021-08-01 00:02:02"
                              type="datetime"
                              placeholder="选择日期时间">
              </el-date-picker><el-button slot="append"  @click.native="updateStatusTime">确定</el-button>
            </div>
            <div>
              <el-button type="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(1,'')">通过</el-button>
            </div>
            <div>
              <el-button type="danger" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(2,'')">废弃</el-button>

            </div>

            <div>
              <el-button type="info" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(0,'')">撤销</el-button>

            </div>

            <div>
              <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">补录</el-button>

            </div>

            <div style="margin-top:15px;">
              车辆类型:
              <el-radio-group v-model="radio">
                <el-radio :label="3">大型车</el-radio>
                <el-radio :label="6">中型车</el-radio>
                <el-radio :label="9">小型车</el-radio>
              </el-radio-group>
            </div>
          </div>

        </div>
      </div>

      <div v-else>
        <div style="font-size: 20px;padding-top: 20px;text-align: center">
          <span class="el-icon-warning-outline">暂无数据</span>
        </div>

      </div>

    </el-main>
    <el-footer class="footer-wrap" style="height: 40px;">

      <el-row>
        <el-col :span="6">
          <p>今日已处理 {{ operCurrentCount }} 条，通过 {{ operPassCount }} 条，废弃 {{ operDiscardCount }} 条</p>
        </el-col>

        <el-col :span="15" :offset="3">
          <!--<p>操作按钮</p>-->
        </el-col>
      </el-row>

    </el-footer>

  </el-container>



</template>

<script>

import { orderExamine, updateStatus } from '@/api/highVideo'

export default {
  name: 'highVideo',
  data() {
    return {
      plNo:'', // 车场
      berthNo: '', // 设备
      total: '', // 总数
      count:'',
      listNum:'',
      classBorder:'blueBorder',
      currentIndex:0,
      list:[],
      time: '',
      radio: 3, // 车辆类型
      timer:'', // 定时器
      handleShow:true,
      centerDialogVisible: false,
      carnum: '',
      carNumber: '',
      examineStateVal:'',
      attachmentList: [],
      operCurrentCount:'', //今日已处理
      operPassCount:'', //今日通过
      operDiscardCount:'', // 今日作废
    }
  },
  created() {
    this.orderExamine()
  },
  methods:{
    orderExamine(){
      let me = this
      let jsondata = {}
      orderExamine(jsondata).then(response => {
        console.log(response)
        if(response.data.dataList.length == 0){
          this.timer = setInterval(function () {
            console.log('1')
            me.orderExamine()
          },10000)
          return
        }
        window.clearInterval(this.timer)
        this.timer = null
        this.list = response.data.dataList
        this.plNo = response.data.plNo
        this.berthNo = response.data.berthNo
        this.total = response.data.total
        this.count = response.data.count
        this.listNum = response.data.dataList.length
        this.carnum = this.list[this.currentIndex].carNumber
        this.time = this.list[this.currentIndex].parkTime
        this.examineStateVal = this.list[this.currentIndex].examineState
        this.operCurrentCount = response.data.operCurrentCount //今日已处理
        this.operPassCount = response.data.operPassCount //今日通过
        this.operDiscardCount = response.data.operDiscardCount // 今日作废

      })
    },
    chooseHandle(i,index){
      console.log(i)
      this.currentIndex = index
      this.carnum = this.list[this.currentIndex].carNumber
      this.time = this.list[this.currentIndex].parkTime
      this.examineStateVal = this.list[this.currentIndex].examineState

      if(this.examineStateVal===1){
        this.handleShow = false
      }else{
        this.handleShow = true
      }
    },
    updateStatus(val,car){
      let jsondata = {
        plNo:this.plNo,
        berthNo:this.berthNo,
        id:this.list[this.currentIndex].id,
        carNumber:car,
        vplColor:this.list[this.currentIndex].vplColor,
        examineState:val
      }
      console.log(jsondata)
      updateStatus(jsondata).then(response => {
        console.log(response)
        this.orderExamine()

      })
    },
    // 修改车牌
    updateStatusCar(){
      if(this.carnum.length<7){
        this.$message({
          message: '请输入正确的车牌号',
          type: 'warning'
        });
        return
      }
      let jsondata = {
        plNo:this.plNo,
        berthNo:this.berthNo,
        id:this.list[this.currentIndex].id,
        carNumber:this.carnum,
        vplColor:this.list[this.currentIndex].vplColor,
        examineState:1
      }
      console.log(jsondata)
      updateStatus(jsondata).then(response => {
        console.log(response)
        this.orderExamine()

      })
    },
    // 修改时间
    updateStatusTime(){
      let jsondata = {
        plNo:this.plNo,
        berthNo:this.berthNo,
        id:this.list[this.currentIndex].id,
        carNumber:this.carnum,
        vplColor:this.list[this.currentIndex].vplColor,
        examineState:1,
        parkTime:this.time
      }
      console.log(jsondata)
      updateStatus(jsondata).then(response => {
        console.log(response)
        this.orderExamine()

      })
    }
  },
  filters: {
    parkStateFilter(val){
      if(val===10){
        return '在场'
      }else if(val===20){
        return '离场'
      }else{
        return '预定'
      }
    },
    examineStateFilter(val){
      if(val===1){
        return '通过'
      }else if(val===0){
        return '需审核'
      }else{
        return '废弃'
      }
    },
    classBorderFilter(val){
      if(val===0){
        return 'redBorder'
      }else if(val===1){
        return 'blueBorder'
      }else{
        return 'yellowBorder'
      }
    },
    vplColorFilter(val){
      // 车辆颜色 0：蓝色 1：黄色 2：白色 3：黑色 4：绿色
      if(val === '0'){
        return '蓝色'
      }
      if(val === '1'){
        return '黄色'
      }
      if(val === '2'){
        return '白色'
      }
      if(val === '3'){
        return '黑色'
      }
      if(val === '4'){
        return '绿色'
      }
    }
  }
}
</script>

<style scoped lang="scss">

  .header-wrap {
    line-height: 60px;
    background: #409EFF;
    font-size: 16px;
    color: #fff;
  }

  .status-wrap {
    flex: 1;
  }

  .handle-wrap {
    width: 300px;
    padding: 15px;
    border-right: 1px solid #ddd;
  }

  .status-wrap > li {
    height: 140px;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }

  .status-wrap > li:last-child {
    border-bottom: 0;
  }

  .active{
    background: #67C23A;
  }
  .blueBorder{
    border: 1px solid blue;
  }

  .redBorder{
    border: 1px solid red;
  }

  .yellowBorder{
    border: 1px solid rgba(254,200,77,1);
  }

  .status-ifo {
    display: flex;
    margin-top: 10px;
  }

  .status-ifo span {
    flex: 1;
  }

  .blueText {
    color: blue;
  }

  .redText {
    color: red;
  }

  .yellowText{
    color: rgba(254,200,77,1);
  }

  .imgBox {
    /*width: 590px;*/
    height: 120px;
    /*padding-top: 10px;*/
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap
  }

  .imgBox > img {
    display: inline-block;
    width: 180px;
    height: 120px;
    float: left;
    margin-right: 10px;
  }

  .imgBox > img:last-child {
    margin-right: 0;
  }

  .button button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .footer-wrap {
    line-height: 40px;
    background: #f5f5f5;
  }


</style>