BJ_web_developers / highOrder

Commit 1b9bfe128f64c55f90071244967160ece0d89d00

Authored by liuqimichale
1 parent 331f09f2

按钮颜色

Inline Side-by-side
Showing 1 changed file with 108 additions and 130 deletions
src/views/highVideo.vue
  View file @1b9bfe1
1 <template> 1 <template>
2 2
3 - <el-container style="height: 100%;width: 1190px;margin: 0 auto;" v-if="list.length>0"> 3 + <el-container style="height: 100%;width: 1190px;margin: 0 auto;" >
4 <el-header class="header-wrap"> 4 <el-header class="header-wrap">
5 <el-row> 5 <el-row>
6 <el-col :span="4"> 6 <el-col :span="4">
@@ -32,142 +32,123 @@ @@ -32,142 +32,123 @@
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
34 </el-header> 34 </el-header>
35 - <el-main style="padding: 0;display: flex">  
36 - <ul class="status-wrap">  
37 - <li v-for="(i, index) in list" :key="i.id" >  
38 - <div :class="i.examineState | classBorderFilter" >  
39 - <el-row>  
40 - <el-col style="padding-left: 10px;" :span="9" :class="{active:currentIndex == index}" @click.native="chooseHandle(i,index)">  
41 - <p class="status-ifo">  
42 - <span>{{ i.parkState | parkStateFilter}}</span>  
43 - <span v-if="i.examineState == 0" class="redText">需审核</span>  
44 - <span v-else-if="i.examineState == 1" class="blueText">通过</span>  
45 - <span v-else class="yellowText">废弃</span>  
46 - </p>  
47 - <p class="status-ifo">  
48 - <span>车牌号码: {{ i.carNumber }}</span>  
49 - <span>车牌颜色: {{ i.vplColor | vplColorFilter}}</span>  
50 - </p>  
51 - <p class="status-ifo">  
52 - <span>车辆类型: 轿车</span>  
53 - <span>车身颜色: 其他</span>  
54 - </p>  
55 - <p class="status-ifo">  
56 - <span>{{ i.parkTime }}</span>  
57 - <span>停车事件: {{ i.parkState}}</span>  
58 - </p>  
59 - </el-col>  
60 - <el-col :span="15" style="overflow-x: auto;width: 550px;">  
61 - <div class="imgBox" :style="{width: i.imgList.length*190+'px'}">  
62 - <img  
63 - v-for="(item,imgindex) in i.imgList"  
64 - :key="imgindex"  
65 - :src="item"  
66 - :preview="index"  
67 - />  
68 - </div>  
69 -  
70 - </el-col>  
71 - <!--<el-col :span="4" style="text-align: center;line-height: 120px">-->  
72 - <!--<el-button type="primary">操作</el-button>-->  
73 - <!--</el-col>-->  
74 -  
75 - </el-row> 35 + <el-main style="padding: 0;">
  36 + <div v-if="list.length>0" style="display: flex">
  37 + <ul class="status-wrap" >
  38 + <li v-for="(i, index) in list" :key="i.id" >
  39 + <div :class="i.examineState | classBorderFilter" >
  40 + <el-row>
  41 + <el-col style="padding-left: 10px;" :span="9" :class="{active:currentIndex == index}" @click.native="chooseHandle(i,index)">
  42 + <p class="status-ifo">
  43 + <span>{{ i.parkState | parkStateFilter}}</span>
  44 + <span v-if="i.examineState == 0" class="redText">需审核</span>
  45 + <span v-else-if="i.examineState == 1" class="blueText">通过</span>
  46 + <span v-else class="yellowText">废弃</span>
  47 + </p>
  48 + <p class="status-ifo">
  49 + <span>车牌号码: {{ i.carNumber }}</span>
  50 + <span>车牌颜色: {{ i.vplColor | vplColorFilter}}</span>
  51 + </p>
  52 + <p class="status-ifo">
  53 + <span>车辆类型: 轿车</span>
  54 + <span>车身颜色: 其他</span>
  55 + </p>
  56 + <p class="status-ifo">
  57 + <span>{{ i.parkTime }}</span>
  58 + <span>停车事件: {{ i.parkState}}</span>
  59 + </p>
  60 + </el-col>
  61 + <el-col :span="15" style="overflow-x: auto;width: 550px;">
  62 + <div class="imgBox" :style="{width: i.imgList.length*190+'px'}">
  63 + <img
  64 + v-for="(item,imgindex) in i.imgList"
  65 + :key="imgindex"
  66 + :src="item"
  67 + :preview="index"
  68 + />
  69 + </div>
  70 +
  71 + </el-col>
  72 + <!--<el-col :span="4" style="text-align: center;line-height: 120px">-->
  73 + <!--<el-button type="primary">操作</el-button>-->
  74 + <!--</el-col>-->
  75 +
  76 + </el-row>
  77 + </div>
  78 + </li>
  79 +
  80 + </ul>
  81 +
  82 + <div class="handle-wrap">
  83 + <div v-show="handleShow">
  84 + <el-input v-model="carnum" maxlength="9">
  85 + <template slot="prepend">改车牌</template>
  86 + <el-button slot="append" @click.native="updateStatusCar">确定</el-button>
  87 + </el-input>
  88 + <div>
  89 + <el-date-picker style="width:73%;margin-top:15px;"
  90 + v-model="time"
  91 + default-value="2021-08-01 00:02:02"
  92 + type="datetime"
  93 + placeholder="选择日期时间">
  94 + </el-date-picker><el-button slot="append" @click.native="updateStatusTime">确定</el-button>
  95 + </div>
  96 + <div>
  97 + <el-button type="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(1,'')">通过</el-button>
  98 + </div>
  99 + <div>
  100 + <el-button type="danger" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(2,'')">废弃</el-button>
  101 +
  102 + </div>
  103 +
  104 + <div>
  105 + <el-button type="info" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(0,'')">撤销</el-button>
  106 +
  107 + </div>
  108 +
  109 + <div>
  110 + <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">补录</el-button>
  111 +
  112 + </div>
  113 +
  114 + <div style="margin-top:15px;">
  115 + 车辆类型:
  116 + <el-radio-group v-model="radio">
  117 + <el-radio :label="3">大型车</el-radio>
  118 + <el-radio :label="6">中型车</el-radio>
  119 + <el-radio :label="9">小型车</el-radio>
  120 + </el-radio-group>
  121 + </div>
76 </div> 122 </div>
77 - </li>  
78 -  
79 - </ul>  
80 -  
81 - <div class="handle-wrap">  
82 - <div v-show="handleShow">  
83 - <el-input v-model="carnum" maxlength="9">  
84 - <template slot="prepend">改车牌</template>  
85 - <el-button slot="append" @click.native="updateStatusCar">确定</el-button>  
86 - </el-input>  
87 - <div>  
88 - <el-date-picker style="width:73%;margin-top:15px;"  
89 - v-model="time"  
90 - default-value="2021-08-01 00:02:02"  
91 - type="datetime"  
92 - placeholder="选择日期时间">  
93 - </el-date-picker><el-button slot="append" @click.native="updateStatusTime">确定</el-button>  
94 - </div>  
95 - <div>  
96 - <el-button type="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(1,'')">通过</el-button>  
97 - </div>  
98 - <div>  
99 - <el-button type="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(2,'')">废弃</el-button>  
100 -  
101 - </div>  
102 -  
103 - <div>  
104 - <el-button type="primary" size="medium" style="width:100%;margin-top:15px;" @click.native="updateStatus(0,'')">撤销</el-button>  
105 -  
106 - </div>  
107 -  
108 - <div>  
109 - <el-button type="primary" size="medium" style="width:100%;margin-top:15px;">补录</el-button>  
110 123
111 - </div>  
112 </div> 124 </div>
  125 + </div>
113 126
114 -  
115 - <!--<div>-->  
116 - <!--<el-button type="success" size="medium" style="width:100%;margin-top:15px;">确定</el-button>-->  
117 -  
118 - <!--</div>-->  
119 - 127 + <div v-else>
  128 + <div style="font-size: 20px;padding-top: 20px;text-align: center">
  129 + <span class="el-icon-warning-outline">暂无数据</span>
  130 + </div>
120 131
121 </div> 132 </div>
  133 +
122 </el-main> 134 </el-main>
123 <el-footer class="footer-wrap" style="height: 40px;"> 135 <el-footer class="footer-wrap" style="height: 40px;">
124 136
125 <el-row> 137 <el-row>
126 <el-col :span="6"> 138 <el-col :span="6">
127 - <p>今日已处理 100 条，通过 80 条，废弃 20 条</p> 139 + <p>今日已处理 {{ operCurrentCount }} 条，通过 {{ operPassCount }} 条，废弃 {{ operDiscardCount }} 条</p>
128 </el-col> 140 </el-col>
129 141
130 <el-col :span="15" :offset="3"> 142 <el-col :span="15" :offset="3">
131 - <p>操作按钮</p> 143 + <!--<p>操作按钮</p>-->
132 </el-col> 144 </el-col>
133 </el-row> 145 </el-row>
134 146
135 </el-footer> 147 </el-footer>
136 148
137 - <!--<el-dialog-->  
138 - <!--title="操作"-->  
139 - <!--:visible.sync="centerDialogVisible"-->  
140 - <!--width="30%"-->  
141 - <!--center>-->  
142 -  
143 - <!--<div class="button">-->  
144 - <!--<el-input v-model="carNumber" maxlength="9">-->  
145 - <!--<template slot="prepend">修改车牌</template>-->  
146 - <!--</el-input>-->  
147 - <!--<div style="margin-bottom: 15px;"></div>-->  
148 - <!--<el-button type="primary">通过</el-button>-->  
149 - <!--<el-button type="primary">废弃</el-button>-->  
150 - <!--<el-button type="primary">通过</el-button>-->  
151 - <!--<el-button type="primary">废弃</el-button>-->  
152 - <!--<el-button type="primary">通过</el-button>-->  
153 - <!--<el-button type="primary">废弃</el-button>-->  
154 - <!--<el-button type="primary">通过</el-button>-->  
155 - <!--<el-button type="primary">废弃</el-button>-->  
156 - <!--</div>-->  
157 - <!--<span slot="footer" class="dialog-footer">-->  
158 - <!--<el-button @click="centerDialogVisible = false">取 消</el-button>-->  
159 - <!--<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->  
160 - <!--</span>-->  
161 - <!--</el-dialog>-->  
162 -  
163 </el-container> 149 </el-container>
164 150
165 - <div v-else>  
166 - <div style="font-size: 20px;padding-top: 20px;text-align: center">  
167 - <span class="el-icon-warning-outline">暂无数据</span>  
168 - </div>  
169 151
170 - </div>  
171 152
172 </template> 153 </template>
173 154
@@ -188,24 +169,17 @@ export default { @@ -188,24 +169,17 @@ export default {
188 currentIndex:0, 169 currentIndex:0,
189 list:[], 170 list:[],
190 time: '', 171 time: '',
191 - timer:'', 172 + radio: 3, // 车辆类型
  173 + timer:'', // 定时器
192 handleShow:true, 174 handleShow:true,
193 centerDialogVisible: false, 175 centerDialogVisible: false,
194 carnum: '', 176 carnum: '',
195 - carNumber: '京A123312', 177 + carNumber: '',
196 examineStateVal:'', 178 examineStateVal:'',
197 - swiperOption: {  
198 - autoplay: 5000,//可选选项，自动滑动  
199 - loop: true,//可选选项，开启循环  
200 - },  
201 - attachmentList: [  
202 - 'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',  
203 - 'https://img-blog.csdnimg.cn/20190504154805438.png',  
204 - 'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',  
205 - 'https://img-blog.csdnimg.cn/20190504154805438.png',  
206 - 'https://img-blog.csdnimg.cn/img_convert/26200f8ecce45d09d4f4bc5a8f4572c5.png',  
207 - 'https://img-blog.csdnimg.cn/20190504154805438.png',  
208 - ] 179 + attachmentList: [],
  180 + operCurrentCount:'', //今日已处理
  181 + operPassCount:'', //今日通过
  182 + operDiscardCount:'', // 今日作废
209 } 183 }
210 }, 184 },
211 created() { 185 created() {
@@ -224,7 +198,8 @@ export default { @@ -224,7 +198,8 @@ export default {
224 },10000) 198 },10000)
225 return 199 return
226 } 200 }
227 - clearInterval(this.timer) 201 + window.clearInterval(this.timer)
  202 + this.timer = null
228 this.list = response.data.dataList 203 this.list = response.data.dataList
229 this.plNo = response.data.plNo 204 this.plNo = response.data.plNo
230 this.berthNo = response.data.berthNo 205 this.berthNo = response.data.berthNo
@@ -234,6 +209,9 @@ export default { @@ -234,6 +209,9 @@ export default {
234 this.carnum = this.list[this.currentIndex].carNumber 209 this.carnum = this.list[this.currentIndex].carNumber
235 this.time = this.list[this.currentIndex].parkTime 210 this.time = this.list[this.currentIndex].parkTime
236 this.examineStateVal = this.list[this.currentIndex].examineState 211 this.examineStateVal = this.list[this.currentIndex].examineState
  212 + this.operCurrentCount = response.data.operCurrentCount //今日已处理
  213 + this.operPassCount = response.data.operPassCount //今日通过
  214 + this.operDiscardCount = response.data.operDiscardCount // 今日作废
237 215
238 }) 216 })
239 }, 217 },