traficflow.vue 7.73 KB
<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.device_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.detection_type">
									<el-option value="" label='全部'></el-option>
									<el-option value="big_vehicle" label='大车'></el-option>
								 	<el-option value="small_vehicle" label='小车'></el-option>
								 	<el-option value="xcycle" label='非机动车'></el-option>
								 	<el-option value="pedestrian" 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.statistic_type">
									<el-option value="road" label='按车道统计'></el-option>
									<el-option value="device" 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>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="formattterData"
			       height="574"
				   stripe
				   border>
			       <el-table-column
			          align="center"
					  prop="event_dt"
			         label="时间">
			       </el-table-column>
			         <el-table-column
			         prop="device_name"
			          align="center"
			         label="相机名称">
			       </el-table-column>
			       <el-table-column
			         prop="detection_type"
			          align="center"
					  :formatter="typeFormatter"
			         label="检测类型">
			       </el-table-column>
				   <el-table-column
				   v-if="conditions.statistic_type =='road'"
				     prop="road"
				      align="center"
				     label="车道">
				   </el-table-column>
				   <el-table-column
				    v-if="conditions.statistic_type =='device'"
				     prop="direction"
				      align="center"
				     label="方向">
					 <template slot-scope="scope">
					   <div>
					     {{scope.row.direction == 1?"来向":(scope.row.direction == 2?"去向":"来向")}}
					   </div>
					 </template>
				   </el-table-column>
			       <el-table-column
			          align="center"
			         label="平均速度(km/h)">
					 <template slot-scope="scope">
					   <div>
					     {{scope.row.velocity.toFixed(2)}}
					   </div>
					 </template>
			       </el-table-column>
				   <el-table-column
				     prop="occupy"
					 align="center"
				     label="空间占有率%">
				     <template slot-scope="scope">
				       <div>
				         {{(scope.row.occupy*100).toFixed(2)}}
				       </div>
				     </template>
				   </el-table-column>
			       <el-table-column
			         prop="sample_dura"
					 align="center"
			         label="统计周期(秒)">
			       </el-table-column>
				   <el-table-column
				     prop="distance"
					 align="center"
				     label="车头间距(m)">
				      <template slot-scope="scope">
				       <div>
				         {{(scope.row.distance).toFixed(2)}}
				       </div>
				     </template>
				   </el-table-column>
				   <el-table-column
				     prop="queue_length"
					 align="center"
				     label="排队长度(m)">
				     <template slot-scope="scope">
				       <div>
				         {{parseInt(scope.row.queue_length)}}
				       </div>
				     </template>
				   </el-table-column>
				   <el-table-column
				     prop="sample_num"
				      align="center"
				     label="车流量(辆)">
				   </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>
  </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{
				dates:[ start_dt,end_dt ],
				conditions: {
					start_dt:start_dt,
					end_dt:end_dt,
					location_name: '',
					device_name: '',
					detection_type: '',
					statistic_type: 'road'
				},
				formattterData:[],
				total:0,
				page:1,
				pageSize:30,
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{},
		mounted(){
			this.getData()
		},
		methods:{
			typeFormatter(row, column, cellValue, index){
			  let codename = '';
			  switch(cellValue){
			    case 'big_vehicle':
			    codename = "大车"
			    break;
			    case 'small_vehicle':
			    codename =  "小车"
			    break;
			    case 'xcycle':
			    codename = "非机动车"
			    case 'pedestrian':
			    codename =  "行人"
			    break;
			    case null:
			    codename = "全部"
			    break;
			  }
			  return codename
			},
			exportFun(){
				window.open(encodeURI(
						process.env.VUE_APP_URL + '/api/v1/traffic/flow/statistics/export?s=' + Math.random()+
						'&event_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')+
						'&location_name='+this.conditions.location_name+
						'&device_name='+this.conditions.device_name+
						'&statistic_type='+this.conditions.statistic_type
						))
			},
			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'),
					location_name: this.conditions.location_name,
					device_name: this.conditions.device_name,
					detection_type: this.conditions.detection_type,
					statistic_type: this.conditions.statistic_type
				}
				this.$api.search.traficflow(search_params
				).then((res)=>{
					this.total=res.total_num;
					res.list_data.forEach((item,index)=>{
						this.formattterData.push(this.$buildCode.init(item));
					})
					
				}).catch((err)=>{
					
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>