event.vue

<template>
  <div class="innnerBox">
		   <el-col :span="22">
			  <el-form ref="form" label-width="80px" inline>
					<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.event_cate" @change="cateChange">
									<el-option value="安防事件" label="全部"></el-option>
								<el-option v-for='item in cateList' :value="item.code" :key="item.code" :label='item.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.type">
							   <el-option value="" label="全部"></el-option>
								<el-option v-for='item in eventList' :value="item.code" :key="item.code" :label='item.name'></el-option>
					 		</el-select>
					 	</span>
					 </el-form-item>
					 <el-form-item label="组织名称">
					   <span class="inputBox">
						 <el-input placeholder="请输入组织名称"  v-model="conditions.location_code"></el-input>
					   </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 compatibleBtn" @click="exportFun">导出</el-button>
				</div>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="formattterData"
						 :height="tableHeight"
				   stripe
				   v-loading="loading"
				   border
			      @selection-change="handleSelectionChange">
				  <el-table-column
				  	prop="index"
				  	align="center"
				  	label="#"
				  	:formatter="indexFormatter"
				  	width="50">
				  </el-table-column>
						<el-table-column
							prop="event_cate"
							align="center"
							:formatter="cateFormatter"
							label="事件分类">
						</el-table-column>
			       <el-table-column
			         prop="event_type"
			          align="center"
			         label="事件类型">
			       </el-table-column>
			         <el-table-column
			         prop="event_data.location.code"
			          align="center"
			         label="组织名称">
			       </el-table-column>
				   <el-table-column
				      align="center"
				     label="抓拍地点">
					 <template slot-scope="scope" >
					   <div>
					     <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data&&scope.row.event_data">{{scope.row.event_data.locate_name}}</span>
					   </div>
					 </template>
				   </el-table-column>
			        <el-table-column
			         prop="shoot_date"
			          align="center"
			         label="抓拍时间">
					 <template slot-scope="scope">
						 <span v-if="scope.row.event_cate == 'behavior'&&scope.row.event_data">{{scope.row.shoot_date}} {{scope.row.shoot_time}}</span>
					 </template>
			       </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-fanxing-qidong playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}"  @click="playFun(scope.$index, scope.row)"></span>
						 </el-tooltip>
						 <span class="tableSpanBorder"></span>
			         	<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"
			class="detailDialog"
		    width="800px">
			<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="80px" inline>
							<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>
							<el-form-item label="事件类型:">
								<span>{{ detailObj.event_type }}</span>
							</el-form-item>
					</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 type="primary" @click="leftFun">上一条</el-button>
				<el-button type="primary" @click="rightFun">下一条</el-button>
				<el-button @click="detailVisible = false">关 闭</el-button>
		    </span>
		  </el-dialog>
		  <videoDialog ref="visableDialog" :playersrc="playurl"></videoDialog>
  </div>
</template>
<script>
	import videoDialog from '@/components/video'
	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,
					type: '',
					task_id:'',
					subtask_id:'',
					location_code:'',
					event_cate:'安防事件'
				},
				tableData:[],
				loading:false,
				formattterData:[],
				total:0,
				page:1,
				pageSize:30,
				selectcheck:[],
				currentIndex:0,
				cateList:JSON.parse(window.localStorage.getItem('cate列表')),
				eventList:JSON.parse(window.localStorage.getItem('安防事件')),
				playurl:'',
				taskList:[],
				subTaskList:[],
				tableHeight:window.twoSearchTableHeight,
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{
			videoDialog
		},
		mounted(){
			this.getTaskList();
			this.getData()
		},
		methods:{
			indexFormatter(row, column, cellValue, index){
				return index+(this.page-1)*this.pageSize+1;
			},
			cateFormatter(row, column, cellValue, index){
				let name=''
				this.cateList.forEach(item=>{
					if(item.code==cellValue){
						name=item.name
					}
				})
				return name;
			},
			getTaskList(){
				this.$api.task.getTask({
					source_type: "pull_video_stream",
					task_type: "normal"
				}).then(res=>{
						this.taskList=res.list_data;
						this.taskList.unshift({
							task_id:'',
							task_name:'全部'
						})
				})
			},
			getSubTask(){
				this.$api.task.getSubTask(this.conditions.task_id).then(res => {
					if(res.list_data==null){
						this.subTaskList=[];
					}else{
						this.subTaskList = res.list_data;
					}
					this.subTaskList.unshift({
						subtask_id:'',
						subtask_name:'全部'
					})
					this.conditions.subtask_id='';
				})
			},
			cateChange(){
				let name=this.conditions.event_cate;
				this.type = '';
				this.eventList = JSON.parse(window.localStorage.getItem(name));
			},
			exportFun(){
				let cate='';
				if(this.conditions.event_cate!='安防事件'){
					cate=this.conditions.event_cate
				}
				let url=
					process.env.VUE_APP_URL+
					  "/api/v1/behavior/events/export?s=" + Math.random()+
					 '&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_id='+this.conditions.task_id+
					 '&subtask_id='+this.conditions.subtask_id+
					 '&location_code__like='+this.conditions.location_code ? this.conditions.location_code.replace(/\s\s*/g, '') : this.conditions.location_code+
					 '&event_type='+this.conditions.type+
					 '&event_cate='+cate;
				  window.open(
				    encodeURI(url)
				  );
			},
			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.loading=true;
				this.formattterData=[];
				let offset = (this.page - 1) * this.pageSize;
				let search_params = {
					limit: this.pageSize,
					offset: offset,
					task_id:this.conditions.task_id,
					subtask_id:this.conditions.subtask_id,
					location_code__like: this.conditions.location_code ? this.conditions.location_code.replace(/\s\s*/g, '') : this.conditions.location_code,
					event_type: this.conditions.type,
					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')
				}
				if(this.conditions.event_cate=="安防事件"){
					search_params.event_cate='';
				}else{
					search_params.event_cate=this.conditions.event_cate;
				}
				this.$api.search.eventTableList(search_params
				).then((res)=>{
					this.total=res.total_num;
					res.list_data.forEach((item,index)=>{
						this.formattterData.push(this.$buildCode.init(item));
					})
					this.loading=false;
				}).catch((err)=>{
					
				})
			},
			getImg(unid){
				this.$api.search.detailImg({
				},unid).then(res=>{
					this.detailImg=res.pic_url ? res.pic_url : carImg;
				}).catch(e=>{
					
				})
			},
			playFun(index,row){
					if(!row.video) {
						return
				  }
					var play_url = '';
					if(row.video) {
						play_url = row.video[0].src_url
				  }
				  this.$refs.visableDialog.playvideos(play_url);
			},
			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;
			}
		},
	}
</script>
<style lang="scss" scoped>
</style>