publicFlow.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="selectBox">
					 	   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.task_id" @change="getSubTask">
					 		 <el-option v-for='item in taskList' :value="item.task_id" :key="item.task_id" :label='item.task_name'></el-option>
					 		</el-select>
					 	</span>
					 </el-form-item>
					 <el-form-item label="相机名称">
					 	<span class="selectBox">
					 	   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.subtask_id">
					 		 <el-option v-for='item in subTaskList' :value="item.subtask_id" :key="item.subtask_id" :label='item.subtask_name'></el-option>
					 		</el-select>
					 	</span>
					 </el-form-item>
					 <el-form-item label="性别">
					 	<span class="selectBox">
					 	   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.sex">
								<el-option value="" label="全部"></el-option>
								<el-option value="1" label="男"></el-option>
								<el-option value="2" label="女"></el-option>
					 		</el-select>
					 	</span>
					 </el-form-item>
					<el-form-item label="上身颜色">
						<span class="selectBox">
						   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.upbodyColor">
							 <el-option value="" label='全部'></el-option>
							 <el-option v-for='item in bodyColorList' :value="item.value" :key="item.value" :label='item.label'></el-option>
							</el-select>
						</span>
					</el-form-item>
					<el-form-item label="下身颜色">
						<span class="selectBox">
						   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.lobodyColor">
							 <el-option value="" label='全部'></el-option>
							 <el-option v-for='item in bodyColorList' :value="item.value" :key="item.value" :label='item.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="driver_face_upbody_text"
			          align="center"
			         label="上身颜色">
			       </el-table-column>
			         <el-table-column
			         prop="driver_face_lobody_text"
			          align="center"
			         label="下身颜色">
			       </el-table-column>
				   <el-table-column
				     prop="driver_face_sex"
				      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
			        align="center"
			         label="操作">
			         <template slot-scope="scope">
			         	<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
			         		<span class="el-icon-info editIcon"   @click="detailFun(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.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.driver_face_sex }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="上身颜色:">
								<span>{{ detailObj.driver_face_lobody_text }}</span>
							</el-form-item>
							<el-form-item label="下身颜色:">
								<span>{{ detailObj.driver_face_lobody_text }}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="身高:">
								<span>{{ detailObj.driver_height }}</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: 'pedestrian',
					location_name:'',
					subtask_id:null,
					task_id:null,
					upbodyColor: '',
					lobodyColor: '',
					sex:''
				},
				bodyColorList:this.$buildCode.getCodeList('车身颜色'),
				tableData:[],
				formattterData:[],
				total:0,
				page:1,
				pageSize:30,
				selectcheck:[],
				currentIndex:0,
				taskList:[],
				subTaskList:[]
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{},
		mounted(){
			this.getData()
			this.getTaskList();
		},
		methods:{
			getTaskList(){
				this.$api.task.getTask({
					source_type: "pull_video_stream",
					task_type: "normal"
				}).then(res=>{
					this.taskList=res.list_data;
				})
			},
			getSubTask(){
				this.conditions.subtask_id=null;
				this.$api.task.getSubTask(this.conditions.task_id).then(res => {
				  this.subTaskList = res.list_data;
				  if( this.subTaskList.length>0){
				  	this.conditions.subtask_id=this.subTaskList[0].subtask_id
				  }
				})
			},
			exportFun(){
				  window.open(
				    encodeURI(
					process.env.VUE_APP_URL+
					  "/api/v1/traffic/events/export?s=" + Math.random()+
					 '&event_type=pedestrian&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') +
					 '&location_name='+this.conditions.location_name+
					 '&task_id='+this.conditions.task_id+
					 '&subtask_id='+this.conditions.subtask_id+
					 '&upbodyColor='+this.conditions.upbodyColor+
					 '&lobodyColor='+this.conditions.lobodyColor+
					 '&sex='+this.conditions.sex
				    )
				  );
			},
			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_type: "pedestrian",
					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'),
					upbodyColor: this.conditions.upbodyColor,
					lobodyColor: this.conditions.lobodyColor,
					sex: this.conditions.sex,
					task_id: this.conditions.task_id,
					subtask_id: this.conditions.subtask_id,
					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>