BJ_web_developers / highOrder

  <template>
  

    <el-container style="height: 100%;width: 1190px;margin: 0 auto;" v-if="list.length>0">

      <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;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="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(2,'')">废弃</el-button>
  
            </div>
  
            <div>
              <el-button type="primary" 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>
  

          <!--<div>-->
            <!--<el-button type="success" size="medium" style="width:100%;margin-top:15px;">确定</el-button>-->

          <!--</div>-->

  
  
        </div>

      </el-main>
      <el-footer class="footer-wrap" style="height: 40px;">
  
        <el-row>
          <el-col :span="6">
            <p>今日已处理 100 条，通过 80 条，废弃 20 条</p>
          </el-col>
  
          <el-col :span="15" :offset="3">
            <p>操作按钮</p>
          </el-col>
        </el-row>
  
      </el-footer>
  

      <!--<el-dialog-->
        <!--title="操作"-->
        <!--:visible.sync="centerDialogVisible"-->
        <!--width="30%"-->
        <!--center>-->
  
        <!--<div class="button">-->
          <!--<el-input v-model="carNumber" maxlength="9">-->
            <!--<template slot="prepend">修改车牌</template>-->
          <!--</el-input>-->
          <!--<div style="margin-bottom: 15px;"></div>-->
          <!--<el-button type="primary">通过</el-button>-->
          <!--<el-button type="primary">废弃</el-button>-->
          <!--<el-button type="primary">通过</el-button>-->
          <!--<el-button type="primary">废弃</el-button>-->
          <!--<el-button type="primary">通过</el-button>-->
          <!--<el-button type="primary">废弃</el-button>-->
          <!--<el-button type="primary">通过</el-button>-->
          <!--<el-button type="primary">废弃</el-button>-->
        <!--</div>-->
        <!--<span slot="footer" class="dialog-footer">-->
      <!--<el-button @click="centerDialogVisible = false">取 消</el-button>-->
      <!--<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->
    <!--</span>-->
      <!--</el-dialog>-->

  
    </el-container>
  

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

  </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: '',
        timer:'',
        handleShow:true,

        centerDialogVisible: false,

        carnum: '',

        carNumber: '京A123312',

        examineStateVal:'',

        swiperOption: {
          autoplay: 5000,//可选选项，自动滑动
          loop: true,//可选选项，开启循环

        },

        attachmentList: [

          'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',
          'https://img-blog.csdnimg.cn/20190504154805438.png',
          'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',
          'https://img-blog.csdnimg.cn/20190504154805438.png',
          'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',
          'https://img-blog.csdnimg.cn/20190504154805438.png',
        ]
      }

    },
    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
          }
          clearInterval(this.timer)

          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
  
        })
      },
      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>