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 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 4 <el-header class="header-wrap">
5 5 <el-row>
6 6 <el-col :span="4">
... ... @@ -32,142 +32,123 @@
32 32 </el-col>
33 33 </el-row>
34 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 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 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 132 </div>
  133 +
122 134 </el-main>
123 135 <el-footer class="footer-wrap" style="height: 40px;">
124 136  
125 137 <el-row>
126 138 <el-col :span="6">
127   - <p>今日已处理 100 条，通过 80 条，废弃 20 条</p>
  139 + <p>今日已处理 {{ operCurrentCount }} 条，通过 {{ operPassCount }} 条，废弃 {{ operDiscardCount }} 条</p>
128 140 </el-col>
129 141  
130 142 <el-col :span="15" :offset="3">
131   - <p>操作按钮</p>
  143 + <!--<p>操作按钮</p>-->
132 144 </el-col>
133 145 </el-row>
134 146  
135 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 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 153 </template>
173 154  
... ... @@ -188,24 +169,17 @@ export default {
188 169 currentIndex:0,
189 170 list:[],
190 171 time: '',
191   - timer:'',
  172 + radio: 3, // 车辆类型
  173 + timer:'', // 定时器
192 174 handleShow:true,
193 175 centerDialogVisible: false,
194 176 carnum: '',
195   - carNumber: '京A123312',
  177 + carNumber: '',
196 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 185 created() {
... ... @@ -224,7 +198,8 @@ export default {
224 198 },10000)
225 199 return
226 200 }
227   - clearInterval(this.timer)
  201 + window.clearInterval(this.timer)
  202 + this.timer = null
228 203 this.list = response.data.dataList
229 204 this.plNo = response.data.plNo
230 205 this.berthNo = response.data.berthNo
... ... @@ -234,6 +209,9 @@ export default {
234 209 this.carnum = this.list[this.currentIndex].carNumber
235 210 this.time = this.list[this.currentIndex].parkTime
236 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 },
... ...