capture_statistics.vue

<template>
  <div class="innnerBox capbox">
    <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 value label="全部"></el-option>
              <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="selectBox">
            <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="conditions.search_type"
            >
              <el-option value label="全部"></el-option>
              <el-option
                v-for="item in types"
                :value="item.value"
                :key="item.value"
                :label="item.name"
              ></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">
      <el-button type="primary" style @click="query" class="block">查询</el-button>
    </el-col>
    <div style>
      <el-table :data="tableData" :height="tableHeight" stripe border  v-loading="loading">
        <el-table-column width="90" align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="taskname" label="任务名称"></el-table-column>
        
        <el-table-column align="center" label="子任务名称">
          <template slot-scope="scope">
            <div v-for="item in scope.row.subtaskList" :key="item.subtaskid" class="sub_line">
              {{item.subtaskname}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="过车" width="200">
          <template slot-scope="scope">
            <div v-for="item in scope.row.subtaskList" :key="item.subtaskid" class="sub_line">
              {{item.vechile}}
            </div>
          </template>
        </el-table-column>
         <el-table-column align="center" label="违章" width="200">
          <template slot-scope="scope">
            <div v-for="item in scope.row.subtaskList" :key="item.subtaskid" class="sub_line">
              {{item.illegal}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="事件" width="200">
          <template slot-scope="scope">
            <div v-for="item in scope.row.subtaskList" :key="item.subtaskid" class="sub_line">
              {{item.event}}
            </div>
          </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="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.$moment().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,
        username_like: "",
        task_id:null,
        subtask_id:null,
        search_type:'vechile'
      },
      loading:false,
      taskList:[],
      servname: "",
      tableData: [],
      subTaskList:[],
      types:[{
        name:"过车",
        value:"vechile",
      },{
        name:"违法",
        value:"illegal",
      },{
        name:"事件",
        value:"event",
      }],
      total: 0,
      page: 1,
      pageSize: 30,
      tableHeight: window.opsTableHeight
    };
  },
  watch: {
    dates(val) {
      this.conditions.start_dt = val[0];
      this.conditions.end_dt = val[1];
    }
  },
  components: {},
  mounted() {
    this.getTaskList();
    this.getData();
  },
  methods: {
    numFormatter(row, column, cellValue, index) {
      return (index + 1) * this.page;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
       if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    query() {
      this.getData();
    },

    getTaskList() {
      this.$api.task
        .getTask({
          source_type: "pull_video_stream",
          task_type: "normal"
        })
        .then(res => {
          this.taskList = res.list_data;
        });
    },
    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 = "";
      });
    },
    getData() {
      this.tableData = [];
      this.loading = true;
      let offset = (this.page - 1) * this.pageSize;
      let search_params = {
        limit: this.pageSize,
        offset: offset,
        start_dt: this.$moment(this.conditions.start_dt)
          .utc()
          .format("YYYY-MM-DD HH:mm:ss"),
        end_dt: 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,
        type:this.conditions.search_type
      };
      
      this.$api.ops
        .catstatistics(search_params)
        .then(res => {
          this.loading = false;
          this.total = res.total_num;
          this.tableData = res.list_data;
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.sub_line{
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  @include border-color(table_border);
  padding:0 10px;
}
.sub_line:last-child{
   border-bottom: 0px solid #ccc;
}
</style>