xcycle.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="selectBox">
            <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="conditions.event_type"
              @change="typeChange"
            >
              <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.xcycle_type"
            >
              <el-option value="" label="全部"></el-option>
              <el-option
                value="motorcycle"
                label="摩托车"
                v-show="conditions.event_type == 'xcycle'"
              ></el-option>
              <el-option
                value="bicycle"
                label="自行车"
                v-show="conditions.event_type == 'xcycle'"
              ></el-option>
              <el-option
                value="tricycle"
                label="三轮车"
                v-show="conditions.event_type == 'xcycle'"
              ></el-option>
              <el-option
                value="aaa"
                label="行人"
                v-show="conditions.event_type == 'pedestrian'"
              ></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.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="运营公司"
          v-show="conditions.event_type == 'xcycle'"
        >
          <span class="inputBox">
            <el-input
              placeholder="请输入公司名称"
              v-model="conditions.company"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          v-show="conditions.event_type == 'xcycle'"
        >
          <span class="inputBox">
            <el-input
              placeholder="请输入车牌号码"
              v-model="conditions.plate"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item
          label="是否带盔"
          v-show="conditions.event_type == 'xcycle'"
        >
          <span class="selectBox">
            <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="conditions.with_hats"
            >
              <el-option value="" label="全部"></el-option>
              <el-option :value="0" :key="0" label="不确定"></el-option>
              <el-option :value="1" :key="1" label="带盔"></el-option>
              <el-option :value="2" :key="2" label="未带盔"></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item
          label="是否带帽"
          v-show="conditions.event_type == 'pedestrian'"
        >
          <span class="selectBox">
            <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="conditions.with_hats"
            >
              <el-option value="" label="全部"></el-option>
              <el-option :value="0" :key="0" label="不确定"></el-option>
              <el-option :value="1" :key="1" label="带帽"></el-option>
              <el-option :value="2" :key="2" label="不带帽"></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item
          label="带口罩"
          v-show="conditions.event_type == 'pedestrian'"
        >
          <span class="selectBox">
            <el-select
              filterable
              placeholder="请选择"
              :popper-append-to-body="false"
              v-model="conditions.with_hats"
            >
              <el-option value="" label="全部"></el-option>
              <el-option :value="0" :key="0" label="不确定"></el-option>
              <el-option :value="1" :key="1" label="带口罩"></el-option>
              <el-option :value="2" :key="2" label="不带口罩"></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item
          label="上身颜色"
          v-show="conditions.event_type == 'pedestrian'"
        >
          <span class="selectBox">
            <el-select
              filterable
              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="下身颜色"
          v-show="conditions.event_type == 'pedestrian'"
        >
          <span class="selectBox">
            <el-select
              filterable
              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 compatibleBtn" @click="exportFun"
          >导出</el-button
        >
      </div>
      <div>
        <el-button type="success" class="block" @click="batchdel"
          >批量删除</el-button
        >
      </div>
    </el-col>
    <div style="">
      <div class="desplay-icon">
        <i class="el-icon-s-grid" @click="dataDisplay('list')"></i>
        <i class="el-icon-tickets" @click="dataDisplay('table')"></i>
      </div>
      <div v-if="displaystatus == 'table'">
      <el-table
        :data="formatterData"
        v-loading="loading"
        :height="tableHeight"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column
          prop="index"
          align="center"
          label="#"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="xcycle_type_text"
          align="center"
          label="检测类型"
        >
        </el-table-column>
        <el-table-column prop="driver_face_sex" align="center" label="性别">
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'xcycle'"
          prop="driver_face_with_hats"
          align="center"
          label="是否带盔"
        >
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'pedestrian'"
          prop="driver_face_with_hats"
          align="center"
          label="是否带帽"
        >
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'pedestrian'"
          prop="driver_face_upbody_text"
          align="center"
          label="上身颜色"
        >
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'pedestrian'"
          prop="driver_face_lobody_text"
          align="center"
          label="下身颜色"
        >
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'xcycle'"
          prop="xcycle_plate_text"
          align="center"
          label="车牌号码"
        >
        </el-table-column>
        <el-table-column
          v-if="conditions.event_type == 'xcycle'"
          prop="company"
          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>
            <span class="tableSpanBorder"></span>
            <el-tooltip
              content="删除"
              placement="bottom"
              effect="light"
              :visible-arrow="false"
            >
              <span
                class="el-icon-delete  delIcon"
                @click="delFun(scope.$index, scope.row)"
              ></span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
       </div>
       <div v-if="displaystatus == 'list'">
        <div class="listbox" :style="{'height':tableHeight}">
          <div v-for="(item, index) in formatterData" :key="index" class="listboxitem"  @click="detailFun(index,item)">
            <div class="imgbox">
                <img :src="item.pics[0].src_url" alt="">
            </div>
            <div class="displayinfo">
              <el-form>
               <el-form-item label="检测类型:">
                <span>{{ item.xcycle_type_text }}</span>
                </el-form-item>
                <el-form-item label="性别:">
                  <span>{{ item.driver_face_sex }}</span>
                </el-form-item>
                <el-form-item label="是否带头盔:"   v-if="item.event_type == 'xcycle'">
                  <span>{{ item.driver_face_with_hats }}</span>
                </el-form-item>
                <el-form-item label="是否带头盔:"   v-if="item.event_type == 'pedestrian'">
                  <span>{{ item.driver_face_with_hats }}</span>
                </el-form-item>
                <el-form-item label="运营公司:">
                  <span>{{ item.company }}</span>
                </el-form-item>
                <el-form-item label="经过日期:">
                  <span>{{
                    item.shoot_date ? item.shoot_date : ""
                  }} {{
                    item.shoot_time ? item.shoot_time : ""
                  }}</span>
                </el-form-item>
                <el-form-item label="经过地点:">
                  <span>{{ item.location_name }}</span>
                </el-form-item>
            </el-form>
            </div>
          </div>
        </div>
      </div>
      <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>
    <el-dialog
      title="详情"
      top="12vh"
      :visible.sync="detailVisible"
      class="detailDialog"
      width="1000px"
    >
      <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: 36%;display: block;margin: 0 auto;"
              />
            </div>
          </el-image>
          <el-form label-width="80px" inline>
            <el-form-item label="检测类型:">
              <span>{{ detailObj.xcycle_type_text }}</span>
            </el-form-item>
            <el-form-item label="经过地点:">
              <span>{{ detailObj.location_name }}</span>
            </el-form-item>
            <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.driver_height }}</span>
            </el-form-item>
            <el-form-item label="速度:">
              <span>{{ detailObj.location_speed }}</span>
            </el-form-item>
            <el-form-item label="性别:">
              <span>{{ detailObj.driver_face_sex }}</span>
            </el-form-item>
            <el-form-item label="运营公司:">
              <span>{{ detailObj.company }}</span>
            </el-form-item>
            <el-form-item label="上身颜色:">
              <span>{{ detailObj.driver_face_upbody_text }}</span>
            </el-form-item>
            <el-form-item label="下身颜色:">
              <span>{{ detailObj.driver_face_lobody_text }}</span>
            </el-form-item>
            <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>
          </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="danger" @click="detailDel" class="leftButton"
          >删 除</el-button
        >
        <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>
  </div>
</template>
<script>
export default {
  data() {
    let start_dt = this.yesterDay();
    let end_dt = this.nowDay();
    return {
      detailObj: {},
      carImg: require("@/assets/img/home/defaultImg.png"),
      bodyColorList: this.$buildCode.getCodeList("车身颜色"),
      detailImg: "",
      detailVisible: false,
      loading: false,
      dates: [start_dt, end_dt],
      conditions: {
        start_dt: start_dt,
        end_dt: end_dt,
        event_type: "xcycle",
        subtask_id: "",
        task_id: "",
        xcycle_type: "",
        sex: "",
        company: "",
        with_hats: "",
        plate: "",
        upbodyColor: "",
        lobodyColor: ""
      },
      brandList: this.$buildCode.getCodeList("车辆品牌"),
      vehicleTypeList: this.$buildCode.getCodeList("车辆类型"),
      vehicleColorList: this.$buildCode.getCodeList("车身颜色"),
      tableData: [],
      formatterData: [],
      total: 0,
      page: 1,
      pageSize: 30,
      selectcheck: [],
      currentIndex: 0,
      taskList: [],
      displaystatus:'table',
      subTaskList: [],
      tableHeight: window.twoSearchTableHeight
    };
  },
  watch: {
    dates(val) {
      this.conditions.start_dt = val[0];
      this.conditions.end_dt = val[1];
    }
  },
  components: {},
  mounted() {
    this.getTaskList();
    this.getData();
  },
  methods: {
    indexFormatter(row, column, cellValue, index) {
      return index + (this.page - 1) * this.pageSize + 1;
    },
    dataDisplay(data){
      this.displaystatus = data
    },
    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 = "";
      });
    },
    typeChange() {
      this.conditions.xcycle_type = "";
    },
    exportFun() {
      let url = "";
      if (this.conditions.event_type == "xcycle") {
        url =
          process.env.VUE_APP_URL +
          "/api/v1/traffic/events/export?s=" +
          Math.random() +
          "&event_type=" +
          this.conditions.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") +
          "&xcycle_type=" +
          this.conditions.xcycle_type +
          "&sex=" +
          this.conditions.sex +
          "&task_id=" +
          this.conditions.task_id +
          "&subtask_id=" +
          this.conditions.subtask_id +
          "&company_like=" +
          this.conditions.company +
          "&with_hats=" +
          this.conditions.with_hats +
          "&plate_number__like=" +
          this.conditions.plate;
      } else {
        url =
          process.env.VUE_APP_URL +
          "/api/v1/traffic/events/export?s=" +
          Math.random() +
          "&event_type=" +
          this.conditions.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") +
          "&sex=" +
          this.conditions.sex +
          "&task_id=" +
          this.conditions.task_id +
          "&subtask_id=" +
          this.conditions.subtask_id +
          "&with_hats=" +
          this.conditions.with_hats +
          "&upbodyColor=" +
          this.conditions.upbodyColor +
          "&lobodyColor=" +
          this.conditions.lobodyColor;
      }
      this.$logs.oplogs({},'serv_serarch',`行人非机动车导出`);
      window.open(encodeURI(url));
    },
    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.$logs.oplogs(res,'serv_serarch',`行人非机动车批量删除了${this.selectcheck.length}条`);
              this.getData();
            } else {
              this.$message.error("删除失败!");
            }
          });
      });
    },
    leftFun() {
      if (this.currentIndex - 1 < 0) {
        this.$message({
          message: "目前为第一条",
          type: "warning"
        });
        return false;
      }
      this.detailObj = this.formatterData[this.currentIndex - 1];
      this.currentIndex -= 1;
      this.getImg(this.detailObj.pics[0].pic_unid);
    },
    rightFun() {
      if (this.currentIndex == this.formatterData.length - 1) {
        this.$message({
          message: "目前为最后一条",
          type: "warning"
        });
        return false;
      }
      this.detailObj = this.formatterData[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.page = 1;
      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,
        event_type: this.conditions.event_type,
        sex: this.conditions.sex,
        with_hats: this.conditions.with_hats
      };
      if (this.conditions.event_type == "xcycle") {
        search_params.xcycle_type = this.conditions.xcycle_type;
        search_params.company_like = this.conditions.company;
        search_params.plate_number__like = this.conditions.plate;
      } else {
        search_params.upbodyColor = this.conditions.upbodyColor;
        search_params.lobodyColor = this.conditions.lobodyColor;
      }
      this.$api.search
        .tableList(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;
          this.$logs.oplogs(res,'serv_serarch',`行人非机动车查询`);
        })
        .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.formatterData.splice(index);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getData();
              this.$logs.oplogs(res,'serv_serarch',`行人非机动车删除`);
            } 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.formatterData.splice(this.currentIndex, 1);
              this.detailObj = Object.assign(
                {},
                this.formatterData[this.currentIndex]
              );
              this.getImg(
                this.formatterData[this.currentIndex].pics[0].pic_unid
              );
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.$logs.oplogs(res,'serv_serarch',`行人非机动车删除`);
            } else {
              this.$message.error("删除失败!");
            }
          })
          .catch(e => {
            this.$message.error("删除失败!");
          });
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>