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>