traficflow.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
              filterable
              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
              filterable
              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="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
              filterable
              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
              filterable
              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 compatibleBtn" @click="exportFun"
          >导出</el-button
        >
      </div>
    </el-col>
    <div style="">
      <el-table
        :data="formatterData"
        :height="tableHeight"
        stripe
        v-loading="loading"
        border
      >
        <el-table-column
          prop="index"
          align="center"
          label="#"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column align="center" prop="event_dt" label="时间">
        </el-table-column>
        <el-table-column prop="location_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="time_occupy" align="center" label="时间占有率%">
          <template slot-scope="scope">
            <div>
              {{ (scope.row.time_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="dist_time" align="center" label="车头时距(秒)">
          <template slot-scope="scope">
            <div>
              {{ scope.row.dist_time.toFixed(2) }}
            </div>
          </template>
        </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="total, prev, pager, next,sizes, jumper"
          :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.yesterDay();
    let end_dt = this.nowDay();
    return {
      loading: false,
      dates: [start_dt, end_dt],
      conditions: {
        start_dt: start_dt,
        end_dt: end_dt,
        task_id: "",
        subtask_id: "",
        detection_type: "",
        statistic_type: "road"
      },
      formatterData: [],
      total: 0,
      page: 1,
      pageSize: 30,
      taskList: [],
      subTaskList: [],
      tableHeight: window.oneSearchTableHeight
    };
  },
  watch: {
    dates(val) {
      this.conditions.start_dt = val[0];
      this.conditions.end_dt = val[1];
    }
  },
  components: {},
  mounted() {
    this.getData();
    this.getTaskList();
  },
  methods: {
    indexFormatter(row, column, cellValue, index) {
      return index + (this.page - 1) * this.pageSize + 1;
    },
    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 = "";
      });
    },
    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") +
            "&task_id=" +
            this.conditions.task_id +
            "&subtask_id=" +
            this.conditions.subtask_id +
            "&detection_type=" +
            this.conditions.detection_type +
            "&statistic_type=" +
            this.conditions.statistic_type
        )
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    query() {
      this.page = 1;
      this.total = 0;
      this.getData();
    },
    getData() {
      this.loading = true;
      this.formatterData = [];
      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_id: this.conditions.task_id,
        subtask_id: this.conditions.subtask_id,
        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.formatterData.push(this.$buildCode.init(item));
          });
          this.loading = false;
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped></style>