高位视频定时器

liuqimichale
1 parent 73c8d18c
Showing 4 changed files with 274 additions and 106 deletions
index.html
src/api/highVideo.js
src/utils/request.js
src/views/highVideo.vue
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>high</title>
+    <title>高位视频</title>
   </head>
   <body>
     <div id="app"></div>
@@ -12,6 +12,16 @@ export function orderExamine(params) {
 }
+//         1.2.状态更新，通过，撤销，废除
+export function updateStatus(params) {
+  return request({
+    url: 'orderExamine/updateStatus',
+    method: 'post',
+    data: params
+  })
+}
+
+
@@ -15,7 +15,7 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
-    config.headers['X-Auth-Token'] = '84108a96-3589-443d-90e1-1a8e724fd21c'
+    config.headers['X-Auth-Token'] = '952d9c9d-8b86-4dc4-8d3a-90d11e659dae'
     return config
   },
   error => {
 <template>
-  <el-container style="height: 100%;width: 1190px;margin: 0 auto;">
+  <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>车场:XHZ-002</p>
+          <p>车场:{{ plNo }}</p>
         </el-col>
         <el-col :span="4">
-          <p>设备:AAAAAAA</p>
+          <p>设备:</p>
         </el-col>
         <el-col :span="3">
-          <p>车位:XHZ-002</p>
+          <p>车位:{{ berthNo }}</p>
         </el-col>
         <el-col :span="3">
-          <p>待审:AAAAAAA</p>
+          <p>待审: {{ count }}</p>
         </el-col>
         <el-col :span="4">
-          <p>获取数据:AAAAA</p>
+          <p>获取数据: {{ listNum }}</p>
         </el-col>
         <el-col :span="2">
@@ -28,88 +28,94 @@
         </el-col>
         <el-col :span="4">
-          <p>未审总数:AAAAAAA</p>
+          <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">
-          <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">-->
+        <li v-for="(i, index) in list" :key="i.id" >
+          <div :class="i.examineState | classBorderFilter"  >
+            <el-row>
+              <el-col style="padding-left: 10px;" :span="8" :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="16" style="overflow-x: auto;width: 570px;">
+                <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-col>-->
-          </el-row>
+            </el-row>
+          </div>
         </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 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="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>-->
+          <!--<el-button type="success" size="medium" style="width:100%;margin-top:15px;">确定</el-button>-->
-        </div>
+        <!--</div>-->
       </div>
@@ -128,48 +134,66 @@
     </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-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 } from '@/api/highVideo'
+import { orderExamine, updateStatus } from '@/api/highVideo'
 export default {
   name: 'highVideo',
   data() {
     return {
+      plNo:'', // 车场
+      berthNo: '', // 设备
+      total: '', // 总数
+      count:'',
+      listNum:'',
+      classBorder:'blueBorder',
+      currentIndex:0,
       list:[],
-      value1: '2021-08-01 00:02:02',
+      time: '',
+      timer:'',
+      handleShow:true,
       centerDialogVisible: false,
+      carnum: '',
       carNumber: '京A123312',
+      examineStateVal:'',
       swiperOption: {
         autoplay: 5000,//可选选项，自动滑动
         loop: true,//可选选项，开启循环
@@ -189,10 +213,99 @@ export default {
   },
   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()
+
       })
     }
   },
@@ -207,7 +320,6 @@ export default {
       }
     },
     examineStateFilter(val){
-
       if(val===1){
         return '通过'
       }else if(val===0){
@@ -215,6 +327,33 @@ export default {
       }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 '绿色'
+      }
     }
   }
 }
@@ -236,12 +375,12 @@ export default {
   .handle-wrap {
     width: 300px;
     padding: 15px;
-    border-left: 1px solid #ddd;
     border-right: 1px solid #ddd;
   }
   .status-wrap > li {
-    height: 130px;
+    height: 140px;
+    padding: 10px 0;
     border-bottom: 1px solid #ddd;
   }
@@ -249,6 +388,21 @@ export default {
     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;
@@ -266,10 +420,14 @@ export default {
     color: red;
   }
+  .yellowText{
+    color: rgba(254,200,77,1);
+  }
+
   .imgBox {
     /*width: 590px;*/
     height: 120px;
-    padding-top: 10px;
+    /*padding-top: 10px;*/
     overflow-y: hidden;
     overflow-x: auto;
     white-space: nowrap
@@ -278,7 +436,7 @@ export default {
   .imgBox > img {
     display: inline-block;
     width: 180px;
-    height: 110px;
+    height: 120px;
     float: left;
     margin-right: 10px;
   }