xcycleold.vue

<template>
  <div class="innnerBox">
		   <el-col :span="22">
			  <el-form ref="form" label-width="80px" inline>
					  <el-form-item label="抓拍地点" >
						   <span class="inputBox">
							 <el-input placeholder="请输入抓拍地点" v-model="conditions.location_name"></el-input>
						   </span>
					  </el-form-item>
					  <el-form-item label="任务名称">
						   <span class="inputBox">
							 <el-input placeholder="请输入任务名称"  v-model="conditions.task_name"></el-input>
						   </span>
					  </el-form-item>
						<el-form-item label="非机动车类型" label-width="110px" >
							<span class="selectBox">
							   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.xcycle_type">
								 <el-option value="" label='全部'></el-option>
								 <el-option value="motorcycle" label="摩托车"></el-option>
								 <el-option value="bicycle" label="自行车"></el-option>
								 <el-option value="tricycle" label="三轮车"></el-option>
								</el-select>
							</span>
						</el-form-item>
						<el-form-item label="起始时间">
							  <span class="dateBox">
								  <el-date-picker
								   v-model="dates"
								   value-format="yyyy-MM-dd HH:mm:ss"
								    :default-time="['00:00:00', '23:59:59']"
								   type="datetimerange"
								   range-separator="至"
								   start-placeholder="开始日期"
								   end-placeholder="结束日期">
								 </el-date-picker>
							  </span>
						  </el-form-item>
			  </el-form>
		  </el-col>
		   <el-col :span="2">
			   <div style="margin-bottom: 6px;padding-top: 3px;">
					<el-button type="primary" style="" @click="query" class="block">查询</el-button>
					<el-button type="success" class="block" @click="exportFun">导出</el-button>
				</div>
				<div>
					<el-button type="success" class="block" @click="batchdel">批量删除</el-button>
				</div>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="formattterData"
			       height="574"
				   stripe
				   border
			      @selection-change="handleSelectionChange">
			      <el-table-column
			        type="selection"
			        align="center"
			        width="55">
			      </el-table-column>
			       <el-table-column
			         prop="xcycle_type_text"
			          align="center"
			         label="非机动车类型	">
			       </el-table-column>
			         <el-table-column
			         prop="xcycle_plate_text"
			          align="center"
			         label="车牌号码	">
			       </el-table-column>
			        <el-table-column
			         prop="shoot_date"
			          align="center"
			         label="抓拍时间">
					 <template slot-scope="scope">
						 <span>{{scope.row.shoot_date}} {{scope.row.shoot_time}}</span>
					 </template>
			       </el-table-column>
			        <el-table-column
			         prop="location_name"
			          align="center"
			         label="抓拍地点">
			       </el-table-column>
				   <el-table-column
				     prop="company"
				      align="center"
				     label="运营公司	">
				   </el-table-column>
			       <el-table-column
			        align="center"
			         label="操作">
			         <template slot-scope="scope">
			         	<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
			         		<span class="iconfont icon-xiugai editIcon"   @click="detailFun(scope.$index, scope.row)"></span>
			         	</el-tooltip>
			         	<span class="tableSpanBorder"></span>
			         	<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
			         		<span class="iconfont icon-detail  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
			         	</el-tooltip>
			         </template>
			       </el-table-column>
			  </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
		  </div>
		  <el-dialog
		    title="详情"
		    top="12vh"
		    :visible.sync="detailVisible"
		    width="700px">
			<div style="position: relative;padding: 10px 20px;">
				<div class="leftArrow" @click="leftFun"><i class="el-icon-d-arrow-left"></i></div>
				<div class="detaiCon">
					<el-image style="width: 100%;"  :src="this.detailImg">
					  <div slot="error" class="image-slot">
						<img :src="carImg" alt="" style="width: 40%;display: block;margin: 0 auto;">
					  </div>
					</el-image>
					<el-form  label-width="120px" inline>
						<div>
							<el-form-item label="车牌号码:">
								<span>{{ detailObj.xcycle_plate_text }}</span>
							</el-form-item>
							<el-form-item label="非机动车类型:">
								<span>{{ detailObj.xcycle_type_text }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="经过日期:">
								<span>{{ detailObj.shoot_date ? detailObj.shoot_date : '' }}</span>
							</el-form-item>
							<el-form-item label="经过时间:">
								<span>{{ detailObj.shoot_time ? detailObj.shoot_time : '' }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="经过地点:">
								<span>{{ detailObj.location_name }}</span>
							</el-form-item>
							<el-form-item label="车辆颜色:">
								<span>{{ detailObj.xcycle_color_type }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="性别:">
								<span>{{ detailObj.driver_face_sex }}</span>
							</el-form-item>
							<el-form-item label="运营公司:">
								<span>{{ detailObj.company }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="上身颜色:">
								<span>{{ detailObj.driver_face_upbody_text }}</span>
							</el-form-item>
							<el-form-item label="速度:">
								<span>{{ detailObj.location_speed }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="戴帽子:">
								<span>{{ detailObj.driver_face_with_hats }}</span>
							</el-form-item>
							<el-form-item label="违法类型:">
								<span>{{ detailObj.illegalType }}</span>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<div class="rightArrow"  @click="rightFun"><i class="el-icon-d-arrow-right"></i></div>
			</div>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="detailDel">删 除</el-button>
		      <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
		    </span>
		  </el-dialog>
  </div>
</template>
<script>
	export default {
		data(){
			let start_dt = this.$moment('2019-12-20').format('YYYY-MM-DD')+' 00:00:00';
			let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
			return{
				detailObj:{},
				carImg:require("@/assets/img/home/defaultImg.png"),
				detailImg:'',
				detailVisible:false,
				dates:[ start_dt,end_dt ],
				conditions: {
					start_dt:start_dt,
					end_dt:end_dt,
					event_type: 'xcycle',
					xcycle_type:'',
					location_name:'',
					task_name:''
				},
				brandList:this.$buildCode.getCodeList('车辆品牌'),
				vehicleTypeList:this.$buildCode.getCodeList('车辆类型'),
				vehicleColorList:this.$buildCode.getCodeList('车身颜色'),
				tableData:[],
				formattterData:[],
				total:0,
				page:1,
				pageSize:30,
				selectcheck:[],
				currentIndex:0
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{},
		mounted(){
			this.getData()
		},
		methods:{
			exportFun(){
				  window.open(
				    encodeURI(
				      process.env.VUE_APP_URL+
				        "/api/v1/traffic/events/export?s=" +
				        Math.random() +
				        "&event_type=xcycle&event_dt__gte=" +
				        this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss') +
				        "&event_dt__lt=" +
				        this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss') +
				        "&xcycle_type=" +
				        this.conditions.xcycle_type +
				        "&location_name=" +
				        this.conditions.location_name +
				        "&task_name=" +
				        this.conditions.task_name
				    )
				  );
			},
			batchdel(){
				if(this.selectcheck.length==0){
					this.$message({
					  message: '请选择至少一条记录',
					  type: 'warning'
					});
					return false
				}
				
				this.$confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.search.patchdel({
						 "event_unids":this.selectcheck
					}).then(res=>{
					  if(res.ecode == '200'){
						this.$message({
						  type: 'success',
						  message: '删除成功!'
						});
						this.getData();
					  }else{
						  this.$message.error('删除失败!');
					  }
					})
				})
				
				
			},
			leftFun(){
				if(this.currentIndex-1<0){
					  this.$message({
						  message: '目前为第一条',
						  type: 'warning'
						});
						return false;
				}
				this.detailObj=this.formattterData[this.currentIndex-1];
				this.currentIndex-=1;
				this.getImg(this.detailObj.pics[0].pic_unid);
			},
			rightFun(){
				if(this.currentIndex==this.formattterData.length-1){
					  this.$message({
						  message: '目前为最后一条',
						  type: 'warning'
						});
						return false;
				}
				this.detailObj=this.formattterData[this.currentIndex+1];
				this.currentIndex+=1;
				this.getImg(this.detailObj.pics[0].pic_unid);
			},
			handleSelectionChange(obj){
			   this.selectcheck = [];
				 obj.forEach(item => {
				   this.selectcheck.push(item.id)
				 });
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getData();
			  },
			query(){
				this.getData();
			},
			getData(){
				this.formattterData=[];
				let offset = (this.page - 1) * this.pageSize;
				let search_params = {
					limit: this.pageSize,
					offset: offset,
					event_dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					event_dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					task_name: this.conditions.task_name ? this.conditions.task_name.replace(/\s\s*/g, '') : this.conditions.task_name,
					event_type: "xcycle",
					xcycle_type: this.conditions.xcycle_type,
					location_name: this.conditions.location_name
				}
				this.$api.search.tableList(search_params
				).then((res)=>{
					this.total=res.total_num;
					res.list_data.forEach((item,index)=>{
						this.formattterData.push(this.$buildCode.init(item));
					})
					
				}).catch((err)=>{
					
				})
			},
			getImg(unid){
				this.$api.search.detailImg({
				},unid).then(res=>{
					this.detailImg=res.pic_url ? res.pic_url : carImg;
				}).catch(e=>{
					
				})
			},
			detailFun(index,row){
				this.currentIndex=index;
				if(row.pics.length>0){
					this.detailObj = Object.assign({},row);
					this.getImg(row.pics[0].pic_unid);
				}
				this.detailVisible=true;
			},
			delFun(index,row){
				 this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						this.$api.search.delVehicle({
						},row.id).then(res=>{
						  if(res.ecode==200){
							  this.formattterData.splice(index);
							this.$message({
							  type: 'success',
							  message: '删除成功!'
							});
						  }else{
							  this.$message.error('删除失败!');
						  }
						}).catch(e=>{
							this.$message.error('删除失败!');
						})
					})
				
			},
			detailDel(){
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$api.search.delVehicle({},this.detailObj.id).then(res=>{
							if(res.ecode==200){
								this.formattterData.splice(this.currentIndex,1);
								this.detailObj = Object.assign({},this.formattterData[this.currentIndex]);
								this.getImg(this.formattterData[this.currentIndex].pics[0].pic_unid);
								this.$message({
								  type: 'success',
								  message: '删除成功!'
								});
							}else{
								this.$message.error('删除失败!');
							}
					}).catch(e=>{
						this.$message.error('删除失败!');
					})
					
				})
			 
			}
		},
	}
</script>
<style lang="scss" scoped>
</style>