src/views/highVideo.vue

<template>
  <el-container style="height: 100%;width: 1190px;margin: 0 auto;">
    <el-header class="header-wrap">
      <el-row>
        <el-col :span="4">
          <p>车场:XHZ-002</p>
        </el-col>
        <el-col :span="4">
          <p>设备:AAAAAAA</p>
        </el-col>
        <el-col :span="3">
          <p>车位:XHZ-002</p>
        </el-col>
        <el-col :span="3">
          <p>待审:AAAAAAA</p>
        </el-col>
        <el-col :span="4">
          <p>获取数据:AAAAA</p>
        </el-col>
        <el-col :span="2">
          <p>刷新</p>
        </el-col>
        <el-col :span="4">
          <p>未审总数:AAAAAAA</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">
          <el-row>
            <el-col :span="8">
              <p class="status-ifo">
                <span>{{ i.parkState | parkStateFilter}}</span>
                <span class="blueText">{{ i.examineState | examineStateFilter }}</span>
              </p>
              <p class="status-ifo">
                <span>车牌号码: {{ i.carNumber }}</span>
                <span>车牌颜色: {{ i.vplColor }}</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="16" style="overflow-x: auto;width: 570px;">
              <div class="imgBox" :style="{width: attachmentList.length*190+'px'}">
                <img
                  v-for="(item,index) in attachmentList"
                  :key="index"
                  :src="item"
                  preview="1"
                />
              </div>
            </el-col>
            <!--<el-col :span="4" style="text-align: center;line-height: 120px">-->
              <!--<el-button type="primary">操作</el-button>-->
            <!--</el-col>-->
          </el-row>
        </li>
      </ul>
      <div class="handle-wrap">
        <el-input v-model="carNumber" maxlength="9">
          <template slot="prepend">改车牌</template>
          <el-button slot="append">确定</el-button>
        </el-input>
        <div>
          <el-date-picker style="width:100%;margin-top:15px;"
            v-model="value1"
            default-value="2021-08-01 00:02:02"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div>
          <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">通过</el-button>
        </div>
        <div>
          <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">废弃</el-button>
        </div>
        <div>
          <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">撤销</el-button>
        </div>
        <div>
          <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">补录</el-button>
        </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>
</template>
<script>
import { orderExamine } from '@/api/highVideo'
export default {
  name: 'highVideo',
  data() {
    return {
      list:[],
      value1: '2021-08-01 00:02:02',
      centerDialogVisible: false,
      carNumber: '京A123312',
      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 jsondata = {}
      orderExamine(jsondata).then(response => {
        console.log(response)
        this.list = response.data.dataList
      })
    }
  },
  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 '废弃'
      }
    }
  }
}
</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-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .status-wrap > li {
    height: 130px;
    border-bottom: 1px solid #ddd;
  }
  .status-wrap > li:last-child {
    border-bottom: 0;
  }
  .status-ifo {
    display: flex;
    margin-top: 10px;
  }
  .status-ifo span {
    flex: 1;
  }
  .blueText {
    color: blue;
  }
  .redText {
    color: red;
  }
  .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: 110px;
    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>